能力申请 1条消息时隐藏 展开按钮，审批详情 添加处理部门

front/src/views/home/AbilityToApplyFor.vue

@@ -2,7 +2,11 @@
   <div class="ability-to-apply-for" :class="{ all: falg }">
     <div class="title">
       <span>申请能力</span>
-      <div class="btnBox" v-show="!falg">
+      <div
+        class="btnBox"
+        v-show="!falg"
+        v-if="dataForm[0].arr.length > 1 || dataForm.length > 1"
+      >
         <svg
           t="1659419933164"
           class="btn"
@@ -97,7 +101,10 @@
               {{
                 val.description ||
                 ((val.note1 || '') &&
-                  (JSON.parse(val.note1) && JSON.parse(val.note1)[0] && JSON.parse(val.note1)[0].channelName || '--') +
+                  ((JSON.parse(val.note1) &&
+                    JSON.parse(val.note1)[0] &&
+                    JSON.parse(val.note1)[0].channelName) ||
+                    '--') +
                     '等' +
                     JSON.parse(val.note1).length +
                     '个摄像头') ||
@@ -105,7 +112,11 @@
               }}
             </div>
           </div>
-          <div class="remove" v-if="item.arr.length>1" @click="removeFunction(val)"></div>
+          <div
+            class="remove"
+            v-if="item.arr.length > 1"
+            @click="removeFunction(val)"
+          ></div>
         </div>
       </template>
     </div>
@@ -181,7 +192,10 @@
       let arr = JSON.parse(note1)
       xVideoList.value = []
       arr.map((val) => {
-        xVideoList.value.push({ name: val.channelName || '', key: val.channelId })
+        xVideoList.value.push({
+          name: val.channelName || '',
+          key: val.channelId,
+        })
       })
       videoVisible.value = true
     } else {

front/src/views/personalCenter/components/ApplyDetails.vue

@@ -1,9 +1,21 @@
 <template>
-  <DeviceApplyDetail v-if="showType === '设备申请'" :refObj="refObj"></DeviceApplyDetail>
+  <DeviceApplyDetail
+    v-if="showType === '设备申请'"
+    :refObj="refObj"
+  ></DeviceApplyDetail>
   <div class="form-container" v-else>
-    <AbilityApplication :refObj="refObj" v-if="showType === '能力申请'"></AbilityApplication>
+    <AbilityApplication
-    <PutOnTheShelf :refObj="refObj" v-else-if="showType === '能力上架'"></PutOnTheShelf>
+      :refObj="refObj"
-    <OffTheShelf :refObj="refObj" v-else-if="showType === '能力下架'"></OffTheShelf>
+      v-if="showType === '能力申请'"
+    ></AbilityApplication>
+    <PutOnTheShelf
+      :refObj="refObj"
+      v-else-if="showType === '能力上架'"
+    ></PutOnTheShelf>
+    <OffTheShelf
+      :refObj="refObj"
+      v-else-if="showType === '能力下架'"
+    ></OffTheShelf>
     <Demand :refObj="refObj" v-else-if="showType === '能力需求'"></Demand>
     <Comment :refObj="refObj" v-else-if="showType === '需求评论'"></Comment>
     <OtherApplications :refObj="refObj" v-else></OtherApplications>
@@ -23,258 +35,263 @@
   </div>
 </template>
 <script setup>
-import AbilityApplication from './AbilityApplication.vue'
+  import AbilityApplication from './AbilityApplication.vue'
-import PutOnTheShelf from './PutOnTheShelf .vue'
+  import PutOnTheShelf from './PutOnTheShelf .vue'
-import OffTheShelf from './OffTheShelf.vue'
+  import OffTheShelf from './OffTheShelf.vue'
-import Demand from './Demand.vue'
+  import Demand from './Demand.vue'
-import Comment from './Comment.vue'
+  import Comment from './Comment.vue'
-import DeviceApplyDetail from './DeviceApplyDetail.vue'
+  import DeviceApplyDetail from './DeviceApplyDetail.vue'
-import OtherApplications from '@/views/personalCenter/components/OtherApplications '
+  import OtherApplications from '@/views/personalCenter/components/OtherApplications '
-import { onMounted, reactive, defineProps, ref } from 'vue'
+  import { onMounted, reactive, defineProps, ref } from 'vue'
-import Cookies from 'js-cookie'
+  import Cookies from 'js-cookie'
-// import { baseURL } from '@/config'
+  // import { baseURL } from '@/config'
-import qs from 'qs'
+  import qs from 'qs'
-import {
+  import {
-  getApplyForm,
+    getApplyForm,
-  getTaskHandleDetailInfo,
+    getTaskHandleDetailInfo,
-  getDemandForm,
+    getDemandForm,
-  nengliziyuanshangjiaapply,
+    nengliziyuanshangjiaapply,
-  getTaskVariables,
+    getTaskVariables,
-} from '@/api/personalCenter'
+  } from '@/api/personalCenter'
-import { selectOneDel } from '@/api/home'
+  import { selectOneDel } from '@/api/home'
-const props = defineProps({
+  const props = defineProps({
-  processDefinitionName: { type: String, default: null },
+    processDefinitionName: { type: String, default: null },
-  businessKey: { type: String, default: null },
+    businessKey: { type: String, default: null },
-  processInstanceId: { type: String, default: null },
+    processInstanceId: { type: String, default: null },
-  resourceId: { type: String, default: null },
+    resourceId: { type: String, default: null },
-  refObj: { type: Object, default: null },
+    refObj: { type: Object, default: null },
-  showType: { type: String, default: null },
+    showType: { type: String, default: null },
-})
-const refObj = ref({})
-const showType = ref('')
-// eslint-disable-next-line vue/no-setup-props-destructure
-refObj.value = props.refObj
-// eslint-disable-next-line vue/no-setup-props-destructure
-showType.value = props.showType
-//流转详情
-const dataSource = reactive({ data: [] })
-console.log('refObj------------>', refObj);
-
-// console.log(props.refObj, '---------------------------------------')
-
-const downloadFile = (path, name) => {
-  const xhr = new XMLHttpRequest()
-  xhr.open('get', path)
-  xhr.responseType = 'blob'
-  xhr.send()
-  xhr.onload = function () {
-    if (this.status === 200 || this.status === 304) {
-      // 如果是IE10及以上，不支持download属性，采用msSaveOrOpenBlob方法，但是IE10以下也不支持msSaveOrOpenBlob
-      if ('msSaveOrOpenBlob' in navigator) {
-        navigator.msSaveOrOpenBlob(this.response, name)
-        return
-      }
-      // const blob = new Blob([this.response], { type: xhr.getResponseHeader('Content-Type') });
-      // const url = URL.createObjectURL(blob);
-      const url = URL.createObjectURL(this.response)
-      const a = document.createElement('a')
-      a.style.display = 'none'
-      a.href = url
-      a.download = name
-      document.body.appendChild(a)
-      a.click()
-      document.body.removeChild(a)
-      URL.revokeObjectURL(url)
-    }
-  }
-}
-//表单信息
-const formName = reactive({
-  user: '',
-  phone: '',
-  unit: '',
-  area: '',
-  system: '',
-  scene: '',
-  basis: '',
-  id: '',
-})
-let shifoushizujian = ref('')
-let nameNotShow = ref('')
-let algorithmShow = ref('')
-const dataForm = reactive({ data: {} })
-const columns = [
-  {
-    title: '任务名称',
-    dataIndex: 'activityName',
-    key: 'activityName',
-  },
-  {
-    title: '处理人',
-    dataIndex: 'assigneeName',
-    key: 'assigneeName',
-  },
-  {
-    title: '任务开始时间',
-    dataIndex: 'startTime',
-    key: 'startTime',
-  },
-  {
-    title: '任务结束时间',
-    dataIndex: 'endTime',
-    key: 'endTime',
-  },
-  {
-    title: '审核意见',
-    dataIndex: 'comment',
-    key: 'comment',
-  },
-  {
-    title: '任务时长',
-    dataIndex: 'duration',
-    key: 'duration',
-  },
-]
-const getInfo = () => {
-  console.log(props.processInstanceId, '============================')
-  if (props.processDefinitionName == '能力申请') {
-    // getTaskVariables({ taskId: props.processInstanceId }).then((res) => {
-    //   console.log('获取数据====================>', res.data.data)
-    // })
-  }
-  if (props.processDefinitionName == '能力申请流程') {
-    getApplyForm(props.businessKey).then((res) => {
-      const { data } = res.data
-      console.log(data)
-      formName.user = data.user
-      formName.phone = data.phone
-      formName.unit = data.unit
-      formName.area = data.area
-      formName.system = data.system
-      formName.scene = data.scene
-      formName.enclosure = data.enclosure
-      formName.basis = data.basis
-    })
-  }
-  if (props.processDefinitionName == '能力需求申请') {
-    getDemandForm(props.businessKey).then((res) => {
-      const { data } = res.data
-      console.log(data)
-      formName.applyUserName = data.applyUserName
-      formName.applyUserPhone = data.applyUserPhone
-      formName.applyUserDeptName = data.applyUserDeptName
-      formName.detailsField = data.detailsField
-      formName.demandDetails = data.demandDetails
-      formName.detailsType = data.detailsType
-      formName.demandSubject = data.demandSubject
-      formName.enclosure = data.enclosure
-    })
-  }
-  if (props.processDefinitionName == '能力资源上架') {
-    // debugger
-    nengliziyuanshangjiaapply(props.businessKey).then((res) => {
-      // const { data } = res.data
-      dataForm.data = res.data.data.resourceDTO
-      if (res.data.data.resourceDTO.type == '应用资源') {
-        shifoushizujian.value = true
-      } else {
-        shifoushizujian.value = false
-        console.log(res.data.data.resourceDTO)
-        res.data.data.resourceDTO.infoList.forEach((val) => {
-          console.log(val, '111111111111111111111111')
-          if (val.attrValue === '智能算法') {
-            nameNotShow.value = true
-            algorithmShow.value = false
-            console.log(nameNotShow.value, algorithmShow.value, 'wowowo')
-          }
-        })
-      }
-      console.log('222222222222', dataForm.data)
-    })
-  }
-  if (props.processDefinitionName == '能力资源下架') {
-    // debugger
-    selectOneDel(props.resourceId).then((res) => {
-      // const { data } = res.data
-      dataForm.data = res.data.data
-    })
-  }
-}
-
-const getLiuZhuanInfo = () => {
-  const params = qs.stringify({
-    processInstanceId: props.processInstanceId,
   })
-  getTaskHandleDetailInfo(params).then((res) => {
+  const refObj = ref({})
-    let arr = []
+  const showType = ref('')
-    res.data.data.forEach((item) => {
+  // eslint-disable-next-line vue/no-setup-props-destructure
-      arr.push(item)
+  refObj.value = props.refObj
-    })
+  // eslint-disable-next-line vue/no-setup-props-destructure
-    dataSource.data.push([props.processInstanceId, arr])
+  showType.value = props.showType
-  })
+  //流转详情
-}
+  const dataSource = reactive({ data: [] })
+  console.log('refObj------------>', refObj)
 
-onMounted(() => {
+  // console.log(props.refObj, '---------------------------------------')
-  // getInfo()
+
-  if (props.refObj.resourceApplication) {
+  const downloadFile = (path, name) => {
-    dataSource.data = []
+    const xhr = new XMLHttpRequest()
-    for (const key in props.refObj.resourceApplication) {
+    xhr.open('get', path)
-      if (props.refObj.resourceApplication[key].length > 0) {
+    xhr.responseType = 'blob'
-        props.refObj.resourceApplication[key].map((item) => {
+    xhr.send()
-          dataSource.data.push([item.instanceId, item.taskHandleDetailInfo])
+    xhr.onload = function () {
-        })
+      if (this.status === 200 || this.status === 304) {
+        // 如果是IE10及以上，不支持download属性，采用msSaveOrOpenBlob方法，但是IE10以下也不支持msSaveOrOpenBlob
+        if ('msSaveOrOpenBlob' in navigator) {
+          navigator.msSaveOrOpenBlob(this.response, name)
+          return
+        }
+        // const blob = new Blob([this.response], { type: xhr.getResponseHeader('Content-Type') });
+        // const url = URL.createObjectURL(blob);
+        const url = URL.createObjectURL(this.response)
+        const a = document.createElement('a')
+        a.style.display = 'none'
+        a.href = url
+        a.download = name
+        document.body.appendChild(a)
+        a.click()
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
       }
     }
-  } else {
-    getLiuZhuanInfo()
   }
-})
+  //表单信息
-
+  const formName = reactive({
-const getResourceURL = () => {
+    user: '',
-  console.log('111111111111111111111111111111', Cookies.get('token'))
+    phone: '',
-  const params = qs.stringify({
+    unit: '',
-    token: Cookies.get('token'),
+    area: '',
-    // processInstanceId: this.dataForm.processInstanceId
+    system: '',
-    processInstanceId: props.processInstanceId,
+    scene: '',
+    basis: '',
+    id: '',
   })
-  return `${window.SITE_CONFIG.apiURL}/act/his/getInstImage?${params}`
+  let shifoushizujian = ref('')
-}
+  let nameNotShow = ref('')
+  let algorithmShow = ref('')
+  const dataForm = reactive({ data: {} })
+  const columns = [
+    {
+      title: '任务名称',
+      dataIndex: 'activityName',
+      key: 'activityName',
+    },
+    {
+      title: '处理部门',
+      dataIndex: 'assigneeDeptName',
+      key: 'assigneeDeptName',
+    },
+    {
+      title: '处理人',
+      dataIndex: 'assigneeName',
+      key: 'assigneeName',
+    },
+    {
+      title: '任务开始时间',
+      dataIndex: 'startTime',
+      key: 'startTime',
+    },
+    {
+      title: '任务结束时间',
+      dataIndex: 'endTime',
+      key: 'endTime',
+    },
+    {
+      title: '审核意见',
+      dataIndex: 'comment',
+      key: 'comment',
+    },
+    {
+      title: '任务时长',
+      dataIndex: 'duration',
+      key: 'duration',
+    },
+  ]
+  const getInfo = () => {
+    console.log(props.processInstanceId, '============================')
+    if (props.processDefinitionName == '能力申请') {
+      // getTaskVariables({ taskId: props.processInstanceId }).then((res) => {
+      //   console.log('获取数据====================>', res.data.data)
+      // })
+    }
+    if (props.processDefinitionName == '能力申请流程') {
+      getApplyForm(props.businessKey).then((res) => {
+        const { data } = res.data
+        console.log(data)
+        formName.user = data.user
+        formName.phone = data.phone
+        formName.unit = data.unit
+        formName.area = data.area
+        formName.system = data.system
+        formName.scene = data.scene
+        formName.enclosure = data.enclosure
+        formName.basis = data.basis
+      })
+    }
+    if (props.processDefinitionName == '能力需求申请') {
+      getDemandForm(props.businessKey).then((res) => {
+        const { data } = res.data
+        console.log(data)
+        formName.applyUserName = data.applyUserName
+        formName.applyUserPhone = data.applyUserPhone
+        formName.applyUserDeptName = data.applyUserDeptName
+        formName.detailsField = data.detailsField
+        formName.demandDetails = data.demandDetails
+        formName.detailsType = data.detailsType
+        formName.demandSubject = data.demandSubject
+        formName.enclosure = data.enclosure
+      })
+    }
+    if (props.processDefinitionName == '能力资源上架') {
+      // debugger
+      nengliziyuanshangjiaapply(props.businessKey).then((res) => {
+        // const { data } = res.data
+        dataForm.data = res.data.data.resourceDTO
+        if (res.data.data.resourceDTO.type == '应用资源') {
+          shifoushizujian.value = true
+        } else {
+          shifoushizujian.value = false
+          console.log(res.data.data.resourceDTO)
+          res.data.data.resourceDTO.infoList.forEach((val) => {
+            console.log(val, '111111111111111111111111')
+            if (val.attrValue === '智能算法') {
+              nameNotShow.value = true
+              algorithmShow.value = false
+              console.log(nameNotShow.value, algorithmShow.value, 'wowowo')
+            }
+          })
+        }
+        console.log('222222222222', dataForm.data)
+      })
+    }
+    if (props.processDefinitionName == '能力资源下架') {
+      // debugger
+      selectOneDel(props.resourceId).then((res) => {
+        // const { data } = res.data
+        dataForm.data = res.data.data
+      })
+    }
+  }
+
+  const getLiuZhuanInfo = () => {
+    const params = qs.stringify({
+      processInstanceId: props.processInstanceId,
+    })
+    getTaskHandleDetailInfo(params).then((res) => {
+      let arr = []
+      res.data.data.forEach((item) => {
+        arr.push(item)
+      })
+      dataSource.data.push([props.processInstanceId, arr])
+    })
+  }
+
+  onMounted(() => {
+    // getInfo()
+    if (props.refObj.resourceApplication) {
+      dataSource.data = []
+      for (const key in props.refObj.resourceApplication) {
+        if (props.refObj.resourceApplication[key].length > 0) {
+          props.refObj.resourceApplication[key].map((item) => {
+            dataSource.data.push([item.instanceId, item.taskHandleDetailInfo])
+          })
+        }
+      }
+    } else {
+      getLiuZhuanInfo()
+    }
+  })
+
+  const getResourceURL = () => {
+    console.log('111111111111111111111111111111', Cookies.get('token'))
+    const params = qs.stringify({
+      token: Cookies.get('token'),
+      // processInstanceId: this.dataForm.processInstanceId
+      processInstanceId: props.processInstanceId,
+    })
+    return `${window.SITE_CONFIG.apiURL}/act/his/getInstImage?${params}`
+  }
 </script>
 
 <style scoped lang="less">
-.form-container {
+  .form-container {
-  height: 6rem;
+    height: 6rem;
-  overflow-y: scroll;
+    overflow-y: scroll;
-  padding: 20px 20px 30px 20px;
+    padding: 20px 20px 30px 20px;
 
-  .title {
+    .title {
-    font-size: 18px;
+      font-size: 18px;
-    color: #000;
+      color: #000;
-    font-weight: bold;
+      font-weight: bold;
-    margin-bottom: 20px;
+      margin-bottom: 20px;
-    padding-left: 10px;
+      padding-left: 10px;
-    margin-top: 10px;
+      margin-top: 10px;
-    border-left: 6px #0058e1 solid;
+      border-left: 6px #0058e1 solid;
+    }
   }
-}
 
-:deep(.ant-table-thead)>tr>.ant-table-cell {
+  :deep(.ant-table-thead) > tr > .ant-table-cell {
-  background: #0087ff;
+    background: #0087ff;
-  color: #fff;
+    color: #fff;
-  border: none;
+    border: none;
-  text-align: center;
+    text-align: center;
-  font-size: 16px;
+    font-size: 16px;
-}
+  }
 
-:deep(.ant-table-tbody)>tr>.ant-table-cell:nth-child(5) {
+  :deep(.ant-table-tbody) > tr > .ant-table-cell:nth-child(5) {
-  // width: 110px;
+    // width: 110px;
-  // display: inline-block;
+    // display: inline-block;
-  // white-space: nowrap;
+    // white-space: nowrap;
-  // overflow: hidden;
+    // overflow: hidden;
-  // text-overflow: ellipsis;
+    // text-overflow: ellipsis;
-}
+  }
 
-.oddNumbers {
+  .oddNumbers {
-  margin-bottom: 0.05rem;
+    margin-bottom: 0.05rem;
-}
+  }
 </style>