hi-ucs/front/src/views/capacityOnTheShelf/BusinessComponent.vue

<!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-20 09:35:51
 * @LastEditors: hisense.liangjunhua
 * @LastEditTime: 2022-06-21 10:37:49
 * @Description: 业务组件
-->
<template>
  <div class="box">
    <div class="header">能力上架申请</div>
    <div class="top">
      <div
        v-for="(nav, index) in navList"
        :key="nav"
        :class="[index <= navList2.indexOf(showView) ? 'finish' : '']"
      >
        <span class="bg-box">
          <span>{{ index + 1 }}</span>
        </span>
        <span>{{ nav.name }}</span>
        <div class="line" v-if="index !== navList.length - 1"></div>
      </div>
    </div>
    <div class="vue-box">
      <put-on-the-shelf
        v-if="showView === '基本信息' && refData.name"
        :refData="refData"
        :dataFrom="dataFrom"
        :videoList="videoList"
        :externalField="[
          '组件名称',
          '组件描述',
          '共享条件',
          '共享类型',
          '部门联系人',
          '部门联系人电话',
        ]"
      ></put-on-the-shelf>
      <put-on-the-shelf
        v-else-if="showView === '功能介绍'"
        :refData="refData"
        :dataFrom="dataFrom"
        :configure="gnjs"
      ></put-on-the-shelf>
      <put-on-the-shelf
        v-else-if="showView === '应用场景'"
        :refData="refData"
        :dataFrom="dataFrom"
        :configure="yycj"
      ></put-on-the-shelf>
      <put-on-the-shelf
        v-else-if="showView === '部署与使用'"
        :refData="refData"
        :dataFrom="dataFrom"
        :fileList="fileList"
        :fileList2="fileList2"
        :imgList="imgList"
        :configure="bs"
      ></put-on-the-shelf>
    </div>
    <div class="btn" :class="showView === '基本信息' ? 'first' : ''">
      <button v-show="showView !== '基本信息'" @click="back()">上一步</button>
      <button v-show="showView === '部署与使用'" @click="preview()">
        预览
      </button>
      <button v-show="showView !== '部署与使用'" @click="next()">下一步</button>
      <button v-show="showView === '部署与使用'" @click="submit()">提交</button>
    </div>
  </div>
</template>
<script setup>
  import PutOnTheShelf from '@/views/capacityOnTheShelf/components/PutOnTheShelf.vue'
  import { ref, onBeforeUnmount } from 'vue'
  import { useRouter } from 'vue-router'
  import { getCategoryTree } from '@/api/personalCenter'
  import { shangjiainsert, shangjiaapply } from '@/api/personalCenter'
  import { getUser, getUserInfo } from '@/api/home'
  import { message } from 'ant-design-vue'
  import mybus from '@/myplugins/mybus'
  const router = useRouter()
  const showView = ref('基本信息')
  const gnjs = ref([
    {
      name: '功能介绍',
      list: [
        {
          name: '功能名称',
          field: 'name',
          type: 'input',
          note1: '',
        },
        {
          name: '功能描述',
          field: 'desc',
          type: 'textArea',
          note1: '',
        },
        {
          name: '功能图片',
          field: 'img',
          type: 'image',
          note1: '',
        },
      ],
    },
  ])
  const yycj = ref([
    {
      name: '应用场景',
      list: [
        {
          name: '应用场景名称',
          field: 'name',
          type: 'input',
          note1: '',
        },
        {
          name: '应用场景描述',
          field: 'desc',
          type: 'textArea',
          note1: '',
        },
        {
          name: '应用场景图片',
          field: 'img',
          type: 'image',
          note1: '',
        },
      ],
    },
  ])
  const bs = ref([
    {
      name: '计费标准信息',
      list: [
        {
          name: '计费方式',
          field: 'type',
          type: 'radio',
          options: ['一次性买断', '按调用次数', '按并发路数', '按年计费'],
          note1: '',
        },
        {
          name: '计费标准',
          field: 'price',
          type: 'number',
          company: '元',
          note1: '',
        },
        {
          name: '计费标准描述',
          field: 'desc',
          type: 'textArea',
          note1: '',
        },
      ],
    },
    {
      name: '常见问题',
      list: [
        {
          name: '问题',
          field: 'question',
          type: 'textArea',
          note1: '',
        },
        {
          name: '答复',
          field: 'answer',
          type: 'textArea',
          note1: '',
        },
      ],
    },
  ])
  let shiyongshouce = ref({})
  const navList = ref([])
  const navList2 = ref([])
  const fileList = ref({})
  const fileList2 = ref({})
  const imgList = ref({})
  const videoList = ref({})
  const data = ref({})
  const refData = ref({})
  const submitFlag = ref(true)
  const dataFrom = ref({
    infoList: [
      {
        attrType: '组件类型',
        attrValue: '业务组件',
        delFlag: 0,
      },
    ],
    delFlag: 0,
    type: '组件服务',
    deptId: '',
  })
  getUser().then((res) => {
    dataFrom.value.deptId = res.data.data.deptId
  })
  const back = () => {
    navList.value.forEach((val, index) => {
      if (val.key === showView.value && index > 0) {
        showView.value = navList2.value[index - 1]
        refData.value = data.value.filter(
          (item) => item.name === showView.value
        )[0]
        console.log('表单数据=============>', dataFrom.value)
      }
    })
  }
  const next = () => {
    let i = -1
    navList.value.forEach((val, index) => {
      if (val.key === showView.value && index < navList.value.length - 1) {
        i = index + 1
      }
    })
    if (i !== -1) {
      showView.value = navList2.value[i]
      refData.value = data.value.filter(
        (item) => item.name === showView.value
      )[0]
      console.log('表单数据=============>', dataFrom.value, refData.value)
    }
  }
  // 预览
  const preview = () => {
    dataFrom.value.infoList = dataFrom.value.infoList.filter(
      (item) => item.attrValue !== ''
    )
    console.log('预览==============>', dataFrom.value)
    window.sessionStorage.setItem('preview', JSON.stringify(dataFrom.value))
    const newpage = router.resolve({
      path: '/details',
    })
    window.open(newpage.href, '_blank')
  }
  const submit = () => {
    console.log('提交数据=============>', dataFrom.value)
    if (submitFlag.value) {
      submitFlag.value = false
      dataFrom.value.infoList = dataFrom.value.infoList.filter(
        (item) => item.attrValue !== ''
      )
      shangjiainsert(dataFrom.value).then((res) => {
        const instanceId = res.data.data
        dataFrom.value.id = res.data.data
        getUser().then((res6) => {
          getUserInfo(res6.data.data.id).then((res2) => {
            const deptId = res2.data.data.deptId
            const userId = res2.data.data.id
            const userName = res2.data.data.realName
            const params = {
              instanceId: instanceId,
              deptId: deptId,
              userId: userId,
              userName: userName,
              resourceDTO: [dataFrom.value],
            }
            shangjiaapply(params).then((res3) => {
              console.log('res3', res3)
              if (res3.data.code == 0) {
                message.success('上架成功！')
                submitFlag.value = true
                window.setTimeout(() => {
                  window.close()
                }, 1000)
              }
            })
          })
        })
      })
    }
  }
  const init = () => {
    getCategoryTree().then((res) => {
      // console.clear()
      res.data.data = res.data.data
        .filter((item) => item.name === '组件服务一')[0]
        .children.filter((item) => item.name === '业务组件')[0]
      navList.value = []
      navList2.value = []
      res.data.data.children.forEach((val) => {
        console.log(val)
        navList.value.push({
          name: val.name,
          key: val.name,
        })
        navList2.value.push(val.name)
      })
      data.value = res.data.data.children
      refData.value = data.value.filter(
        (item) => item.name === showView.value
      )[0]
      console.log('所有编目结构==============>', res.data.data)
    })
  }
  init()
  mybus.on('chageDataFrom', (obj) => {
    if (obj.attrType == '使用手册' && obj.attrValue != null) {
      shiyongshouce.value = obj
    }
    dataFrom.value.infoList = dataFrom.value.infoList.filter(
      (item) => item.attrType !== obj.attrType
    )
    if (obj.attrValue == [] || obj.attrValue == '[]' || obj.attrValue == null) {
      obj.attrValue = ''
    }
    dataFrom.value.infoList.push(obj)
    if (shiyongshouce.value.attrValue) {
      dataFrom.value.infoList.map((syscitem, syscindex) => {
        if (syscitem.attrType == '使用手册') {
          dataFrom.value.infoList[syscindex] = shiyongshouce.value
        }
      })
    }
    console.log('数据变更=================》', obj, dataFrom.value.infoList)
  })
  mybus.on('chageFileList', (obj) => {
    fileList.value = obj
  })
  mybus.on('chageFileList2', (obj) => {
    fileList2.value = obj
  })
  mybus.on('chageImgList', (obj) => {
    imgList.value = obj
  })
  mybus.on('chageVideoList', (obj) => {
    videoList.value = obj
  })
  //datafrom外面数据
  mybus.on('chageDataFromDwon', (obj) => {
    switch (obj.attrType) {
      case '组件名称':
        dataFrom.value.name = obj.attrValue
        break
      case '组件描述':
        dataFrom.value.description = obj.attrValue
        break
      case '共享条件':
        dataFrom.value.shareCondition = obj.attrValue
        break
      case '共享类型':
        dataFrom.value.shareType = obj.attrValue
        break
      case '部门联系人':
        dataFrom.value.deptContacts = obj.attrValue
        break
      case '部门联系人电话':
        dataFrom.value.deptPhone = obj.attrValue
        break
      case '服务接口':
        dataFrom.value.apiUrl = obj.attrValue
        break
      case '接口请求方式':
        dataFrom.value.apiMethodType = obj.attrValue
        break
    }
    // console.log('dataFrom.value', dataFrom.value)
  })
  onBeforeUnmount(() => {
    mybus.off('chageDataFrom')
    mybus.off('chageFileList')
    mybus.off('chageFileList2')
    mybus.off('chageImgList')
    mybus.off('chageDataFromDwon')
  })
</script>
<style lang="less" scoped>
  .box {
    position: relative;
    top: 64px;
    margin: 15px 400px;
    padding: 10px;
    background: #fff;
    .header {
      font-size: 28px;
      font-weight: 600;
    }
    .vue-box {
      padding: 0 100px;
    }
    .top {
      margin: 10px 20px 0;
      padding: 15px 30px;
      background: #edf4fc;
      display: flex;
      justify-content: space-between;
      div {
        font-size: 18px;
        color: #999;
        display: flex;
        justify-content: center;
        align-items: center;
        .bg-box {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 45px;
          height: 45px;
          border-radius: 50%;
          border: 1px solid rgb(214, 214, 214);
          margin-right: 10px;
          transition: all 0.3s ease;
          span {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid #999;
          }
        }
        .line {
          margin-left: 10px;
          width: 130px;
          height: 1px;
          background: #999;
        }
      }
      .finish {
        color: #0087ff;
        .bg-box {
          background: #9ccefa;
          color: #fff;
          border: 1px solid #9ccefa;
          span {
            background: #0087ff;
            border: 1px solid #0087ff;
          }
        }
        .line {
          background: #0087ff;
        }
      }
    }
    .btn {
      display: flex;
      justify-content: space-between;
      padding: 10px 400px 0;
      button {
        cursor: pointer;
        width: 80px;
        height: 35px;
        text-align: center;
        color: #fff;
        border: none;
        border-radius: 6px;
        background: #0087ff;
      }
      button:nth-of-type(1) {
        color: #0087ff;
        background: #e1edfa;
      }
      button:nth-of-type(2) {
        background: #01c5dc;
      }
    }
    .first {
      justify-content: center;
    }
  }
</style>