hi-ucs/front/src/views/personalCenter/components/MyApply.vue

<template>
  <div class="on-the-right-side-of-the-list">
    <div class="title" style="margin-bottom: 0.2rem">我的申请</div>
    <div class="tab" style="margin-bottom: 0.1rem">
      <span>类型</span>
      <div :class="typeIndex == index ? 'tabclass' : ' '" @click="changeType(item, index)"
        v-for="(item, index) in typeList" :key="index">
        {{ item }}
      </div>
    </div>
    <div class="tab">
      <span>申请状态</span>
      <div :class="tabIndex == index ? 'tabclass' : ' '" @click="changeApplyState(item, index)"
        v-for="(item, index) in tabList" :key="index">
        <a-badge :count="item === '审核中' ? num.unfinished : num.finished" v-if="item !== '全部'">
          {{ item }}
        </a-badge>
        <template v-else>
          {{ item }}
        </template>
      </div>
    </div>
    <div v-if="contentList.data.length > 0">
      <div class="content">
        <div class="content-body" v-for="item in contentList.data" :key="item.index">
          <div class="content-body-title">
            <span>申请单号：{{ item.applyNumber || '--' }}</span>
            <div></div>
          </div>
          <a-tooltip>
            <template #title>
              {{ item.cameraList ? item.system : item.title }}
            </template>
            <div class="content-body-title">
              <span>
                名称：{{ item.cameraList ? item.system : item.title }}
              </span>
              <div></div>
            </div>
          </a-tooltip>
          <div class="content-body-content">
            <p class="content-body-content-son" v-if="typeName !=='设备申请'">
              审核结果：{{ item.ended ? '审核完成' : '审核中' }}
            </p>
            <p class="content-body-content-son" v-else>
              审核结果：{{ item.state === 0 ? '审核中' : '审核完成' }}
            </p>
          </div>
          <div class="content-body-bottom">
            <div>申请日期：{{ item.createDate || item.startTime }}</div>
            <div></div>
          </div>
          <div class="button-box">
            <div class="button" v-if="typeName =='设备申请' && phoneSate.includes(item.state)"
              @click="showPhoneModal(item)">联系方式</div>
            <div class="button" @click="showDetail(item)">查看详情</div>
            <div class="button" @click="showAdd(item)" v-if="item.backToFirst">
              修改
            </div>
            <svg t="1652233950228" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="5970" data-spm-anchor-id="a313x.7781069.0.i8" width="80" height="80" v-if="
                item.processDefinitionName != '能力资源下架' &&
                (item.resourceStatus == 4 || item.resourceStatus == 5)
              " style="position: absolute; top: 20px; left: -850px">
              <path
                d="M955.22053 256C813.82053 11.2 500.72053-72.6 255.92053 68.8S-72.67947 523.2 68.72053 768 523.22053 1096.6 768.02053 955.2c244.7-141.2 328.6-454.1 187.4-698.8 0-0.1-0.1-0.3-0.2-0.4zM762.02053 944.7c-239 138.1-544.8 56.2-682.9-182.8S22.92053 217.1 261.92053 79.1s544.8-56.2 682.9 182.8c137.9 239 56.1 544.6-182.8 682.8z"
                fill="#515151" opacity=".5" p-id="5971"></path>
              <path
                d="M898.12053 289.2C775.02053 76 502.42053 2.9 289.22053 126 76.02053 249.1 3.02053 521.6 126.02053 734.8 249.12053 948 521.62053 1021.1 734.82053 898 947.92053 774.9 1021.02053 502.4 898.12053 289.2zM731.62053 892.8C521.32053 1014.3 252.42053 942.2 131.02053 731.9 9.52053 521.6 81.62053 252.7 291.92053 131.3 502.12053 9.9 771.02053 81.8 892.42053 292c121.5 210.3 49.5 479.3-160.8 600.8z"
                fill="#515151" opacity=".5" p-id="5972"></path>
              <path
                d="M323.62053 176.8c3.6-2 6 0.8 8.8 2.8 6 4.4 12.4 8.8 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 13.6-5.6 20.8 4.8 6 10 11.6 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.4 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.4-1.9-3.9-4.7-4.4-7.7l-7.2-20.5-25.2-6.4c-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 4-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.7-0.8-0.3-1.6 0.6-2zM200.72053 289.2c3.6-2 6 0.8 8.8 2.8 6.4 4.4 12.4 8.4 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 13.6-5.6 20.8 4.8 6 10 11.6 14.8 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.4-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.8 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.2-2-3.8-4.7-4.4-7.7l-7.2-20.5c-8.4-2-16.8-4.4-25.2-6.4-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 3.6-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.4-1.2 0-1.6 0.8-2.4l0.2 0.4z m276.6-159.6c3.6-2 6 0.8 8.8 2.8 6.4 4.4 12.4 8.4 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 14-5.6 20.8 4.8 6 10 12 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.8 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.2-2-3.8-4.7-4.4-7.7l-7.2-20.5-25.2-6.4c-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 4-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.8-1.2-0.4-1.6 0.4-2.4l0.2 0.4z m141.9 29.6c3.6-2 6 0.8 8.8 2.8l18.8 12.8c7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 14-5.6 20.8 4.8 6 10 12 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4-7.7 0.4-15.2 0.8-22.4 0.8-4.4 6.8-8.4 13.2-12.8 20-1.6 2.4-4 5.1-7.2 4-2.4-1.9-3.9-4.7-4.4-7.7l-7.2-20.5c-8.4-2-16.8-4.4-25.2-6.4-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 4-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.5-1.2 0.2-1.6 0.6-2zM150.02053 430c3.6-2 6 0.8 8.8 2.8 6.4 4.4 12.4 8.4 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-4 14-5.6 20.8 4.8 6 10 11.6 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.8 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.2-2-3.8-4.7-4.4-7.7l-7.2-20.5-25.2-6.4c-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 3.6-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.7-0.8-0.3-1.5 0.6-2z m558.9 414.4c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-2-14-3.6-20.8-5.6-2.8-7.2-5.1-14.4-7.7-21.6-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.1 4.4-0.7 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.5-1.1 0.8-1.1 1.6-1.1h0.1z m-158.8 50c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.1-3.7-5.6-3.6-7.7-4-6.8-1.6-14-3.6-20.8-5.6l-7.7-22c-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.3 4.3-0.9 6.4-1.6l14.4-4.8c2-1 4.2-1.7 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.4-0.8 0.8-0.8 1.7-0.7z m276.5-159.6c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-2-14-3.6-20.8-5.6-2.8-7.2-5.1-14.4-7.7-21.6-1.2-3.6-2.8-6.4-5.6-6.8s-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.2 4.4-0.7 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0-0.8 0.8-1.2 1.6-1.2l0.1 0.1z m45.6-137.6c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-1.6-14-3.6-20.8-5.6l-7.7-22c-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c
                fill="#515151" opacity=".5" p-id="5973"></path>
              <path
                d="M386.42053 590.4l-43.8-75.9L207.02053 592.7l10.2 17.7L334.02053 543l23.4 40.4-90.5 52.2-13.5-23.4-18.7 10.8 53.1 92c9.1 15.8 21.2 19.5 36.4 10.7l98.8-57c6.2-3.6 11-9.3 13.4-16.1-1.4-15.9-6.2-31.2-14.2-45l-21.4 4.8c6.7 10.3 11 21.9 12.8 34-1 3.3-3.2 6-6.1 7.8l-88.3 51c-6.2 3.6-11.1 2.1-14.8-4.3l-27.3-47.4 109.3-63.1z m2.9-103.2l10.4 18.1 65.6-37.9 79.9 138.4 18.6-10.8-55.9-96.9c18.8-0.9 43.2-0.6 73 0.7l1.5-23.1c-29.8-0.3-58.4 0.4-86 2.6l-12.5-21.6 74.9-43.2-10.4-18.1-159.1 91.8zM669.52053 329l38.2 66.2 61.4-35.4-38.1-66.1-61.5 35.3z m72.4 24.2l-26.3 15.2-19-33 26.3-15.2 19 33zM599.02053 356.7l7.9 13.7-23.3 13.5 9.8 17 21.8-12.6c7.5 18.7 6.6 39.6-2.5 57.6l20.7 4.4c10.3-23.1 10.3-49.4 0-72.5l18.8-10.9c6 9.2 10.7 19.2 14.2 29.7 0.3 5-2.6 9.7-7.2 11.7-2.9 1.2-6.4 2.8-10.9 4.9l14.1 14.1c3.7-1.3 7.3-2.9 10.7-4.8 8.6-3.9 14.4-12.2 15.2-21.6-5.4-22.1-14.6-43-27.4-61.8l-36.1 20.8-7.9-13.7-17.9 10.5z m29.9 108.1l10 17.4 53.2-30.7c-7.8 23.7-20.6 45.4-37.5 63.6l20.6 11.1c18.6-24.2 30-53.1 33-83.4l29.8 51.5 18.4-10.7-29.8-51.5c27.4 11.5 57.2 16.3 86.9 14.1l3.5-23.5c-24.7 5.1-50.1 5-74.8-0.1l53.5-30.9-10-17.3-69.3 40-7.3-12.6-18.4 10.7L698.02053 425l-69.1 39.8z"
                fill="#515151" opacity=".5" p-id="5974"></path>
            </svg>
          </div>
        </div>
      </div>
      <div class="bottom">
        <a-pagination size="small" pageSize="4" :total="total" :current="page" @change="handleCurrentChange"
          @showSizeChange="handlePageSizeChange" :showSizeChanger="false" />
      </div>
    </div>
    <a-empty v-else />
    <a-modal bodyStyle="padding:0.1rem 0" v-model:visible="detailsVisible" title="申请详情" style="width: 900px"
      :footer="null" destroyOnClose="true" :maskClosable="false">
      <apply-details :processDefinitionName="processDefinitionName" :businessKey="businessKey"
        :processInstanceId="processInstanceId" :resourceId="resourceId" :refObj="refObj" :showType="showType">
      </apply-details>
    </a-modal>
    <a-modal v-model:visible="visible" title="下架原因" @ok="del()" @cancel="reason = ''">
      <a-input v-model:value="reason" placeholder="请输入下架原因" />
    </a-modal>
    <a-modal v-model:visible="videoVisible" title="已申请摄像头列表" @ok="videoVisible = false">
      <a-table :columns="columns" :data-source="xVideoList" bordered :pagination="{ defaultPageSize: 6 }">
        <template #bodyCell="{ column, text }">
          <!-- <template>
        <a>{{ text }}</a>
      </template> -->
        </template>
      </a-table>
    </a-modal>
  </div>

  <!-- 联系方式弹框 -->
  <a-modal v-model:visible="phoneVisible" title="提示" @ok="phoneVisible = false">
    <!-- 工业信息化局那个号，电话配这个号：199 6399 0996 -->
    <p>请联系工业信息化局，电话：199 6399 0996</p>
  </a-modal>
</template>

<script setup>
import { onMounted, reactive, ref, onBeforeUnmount, h } from 'vue'
import {
  getMyProcessInstancePage,
  getTabilityapplication,
  getByApplyFlag,
  nengliziyuanshangjiaapply,
  getDemandForm,
  demandComment,
  deviceApplylist,
  getDeviceDetail,
} from '@/api/personalCenter'
import {
  updateRes,
  relaunch,
  selectOne,
  getApplyCameraList,
  selectOneDel,
} from '@/api/home'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import ApplyDetails from '@/views/personalCenter/components/ApplyDetails'
import mybus from '@/myplugins/mybus'
import * as moment from 'moment'

const router = useRouter()
let typeList = ref([
  '能力申请',
  '能力评价',
  '能力上架',
  '能力下架',
  '能力需求',
  '需求评论',
])
// 西海岸-设备申请
let isXiHaiAn = whoShow.itShowXiHaiAn;
const phoneSate = ref([2, 3])
if (isXiHaiAn) {
  typeList.value.push('设备申请')
}
const typeStrObj = {
  '能力上架': 'resourcemountapply',
  '能力下架': 'resourcundercarriageapply',
  '能力需求': 'abilitydemandapply',
  '需求评论': 'comment_review',
}
let tabList = ref(['全部', '审核中', '审核完成'])
const contentList = reactive({ data: [] })
let tabIndex = ref(0)
let typeIndex = ref(0)
let typeName = ref(typeList.value[0])

const videoVisible = ref(false)
const numFlag = ref(true)
const columns = ref([
  {
    title: '摄像头名称',
    dataIndex: 'name',
  },
])
const xVideoList = ref([])

// 申请状态切换
function changeApplyState(item, index) {
  tabIndex.value = index
  switch (item) {
    case '审核中':
      page.value = 1
      ended.value = false
      getApplyList()
      break
    case '审核完成':
      page.value = 1
      ended.value = true
      getApplyList()
      break
    case '全部':
      page.value = 1
      ended.value = ''
      getApplyList()
      break
  }
}
// 选择类型
const changeType = (item, index) => {
  console.log('item, index-----选择类型------->', item, index);
  numFlag.value = true
  num.value = []
  showType.value = ''
  tabIndex.value = 0
  ended.value = ''
  page.value = 1
  typeIndex.value = index
  typeName.value = item
  getApplyList()
}
let name = ref('')
const detailsVisible = ref(false)
const detailsVisible2 = ref(false)
const businessKey = ref('')
const processInstanceId = ref('')
const processDefinitionName = ref('')
const resourceId = ref('')
const reason = ref('')
const visible = ref(false)
const delObj = ref({})
const taskId = ref('')
const backUrl = ref(window.SITE_CONFIG.apiURL + '/')
const refObj = ref({})

const showDetail = (item) => {
  // 西海岸-申请时间过期，提示
  if (isXiHaiAn) {
    if (item.expireDate) {
      let diff = moment().diff(moment(item.expireDate), 'seconds')
      if (diff > 0) {
        return message.error('当前申请已过期！')
      }
    }
  }
  if (typeName.value == '能力申请' && item.applyFlag) {
    getByApplyFlag(item.applyFlag).then((res) => {
      if (res.data.code == 0) {
        refObj.value = res.data.data;

        detailsVisible.value = true
        processDefinitionName.value = item.processDefinitionName
        businessKey.value = item.businessKey
        processInstanceId.value = item.instanceId
        resourceId.value = item.resourceId
      } else {
        message.error('数据请求失败！')
      }
    })
  } else if (typeName.value == '设备申请') {
    getDeviceDetailInfo(item.deviceId).then(res => {
      if (res.data.code == 0) {
        refObj.value = res.data.data
        detailsVisible.value = true
        processDefinitionName.value = item.processDefinitionName
        // businessKey.value = item.businessKey
        // processInstanceId.value = item.processInstanceId
        // resourceId.value = item.resourceId
      }
    }).catch(err => {
    })
  } else if (Object.keys(typeStrObj).includes(typeName.value) || typeName.value == '能力评价') {
    refObj.value = item
    detailsVisible.value = true
    processDefinitionName.value = item.processDefinitionName
    businessKey.value = item.businessKey
    processInstanceId.value = item.processInstanceId
    resourceId.value = item.resourceId
  } else {
    message.error('数据请求失败！')
  }
}
const showVideoList = (item) => {
  console.log('显示列表', item)
  getApplyCameraList(item.processInstanceId).then((res) => {
    console.log('res', res)
    xVideoList.value = []
    res.data.data.map((val) => {
      xVideoList.value.push({ name: val.channelName, key: val.channelId })
    })
  })
  videoVisible.value = true
}
const copyComment = (data) => {
  let url = data
  let oInput = document.createElement('input')
  oInput.value = url
  document.body.appendChild(oInput)
  oInput.select() // 选择对象;
  console.log(oInput.value)
  document.execCommand('Copy') // 执行浏览器复制命令
  message.success('复制成功')
  oInput.remove()
}
const showAdd = (item) => {
  if (item.processDefinitionKey == 'resourcemountapply') {
    const data = {
      id: item.resourceId,
      taskId: item.currentTaskList[0].taskId,
    }
    if (item.dto.type == '组件服务') {
      data.abilityToType = '组件服务'
      data.componentTypeValue = item.dto.infoList.filter(
        (val) => val.attrType == '组件类型'
      )[0].attrValue
    } else if (item.dto.type == '应用资源') {
      data.abilityToType = '应用资源'
    }
    const newpage = router.resolve({
      path: '/nenglishangjia', // 跳转的页面路由
      query: data,
    })
    console.log('上架申请修改=================》', item)
    window.open(newpage.href, '_blank')
  } else if (item.processDefinitionKey == 'resourcundercarriageapply') {
    selectOne(item.resourceId).then((res) => {
      if (res.data.code == 0) {
        delObj.value = res.data.data
        reason.value = delObj.value.undercarriageReason
        taskId.value = item.currentTaskList[0].taskId
        visible.value = true
        console.log('下架申请修改=================》', res.data.data)
      }
    })
  } else if (item.processDefinitionKey == 'abilitydemandapply') {
    const newpage = router.resolve({
      path: '/addApplication', // 跳转的页面路由
      query: {
        id: item.businessKey,
        taskId: item.currentTaskList[0].taskId,
      },
    })
    console.log('需求申请修改=================》', item)
    window.open(newpage.href, '_blank')
  } else if (item.processDefinitionKey == 'abilityprocess') {
    const newpage = router.resolve({
      path: '/apply', // 跳转的页面路由
      query: {
        id: item.businessKey,
        resourceId: item.resourceId,
        name: item.name,
        taskId: item.currentTaskList[0].taskId,
      },
    })
    console.log('能力申请修改=================》', item)
    window.open(newpage.href, '_self')
  }
}
const num = ref({
  finished: 0,
  unfinished: 0,
})
const initNum = () => {
  if (numFlag.value) {
    num.value = []
    getMyProcessInstancePage({
      page: 1,
      limit: 4,
      ended: 'false',
      processDefinitionKey: processDefinitionKey.value,
    }).then((res) => {
      if (res.data.code == 0) {
        num.value.unfinished = res.data.data.total
        getMyProcessInstancePage({
          page: 1,
          limit: 4,
          ended: 'true',
          processDefinitionKey: processDefinitionKey.value,
        }).then((res) => {
          if (res.data.code == 0) {
            num.value.finished = res.data.data.total
            numFlag.value = false
          }
        })
      }
    })
  }
}
const initNum2 = () => {
  if (numFlag.value) {
    num.value = []
    getTabilityapplication({
      page: 1,
      limit: 4,
      ended: 'false',
    }).then((res) => {
      if (res.data.code == 0) {
        num.value.unfinished = res.data.data.total
        getTabilityapplication({
          page: 1,
          limit: 4,
          ended: 'true',
        }).then((res) => {
          if (res.data.code == 0) {
            num.value.finished = res.data.data.total
            numFlag.value = false
          }
        })
      }
    })
  }
}
// initNum()
const total = ref('')
const showType = ref('')
const page = ref('1')
const ended = ref('')
const processDefinitionKey = ref('')
// 搜索框
const onSearch = (name) => {
  console.log(name.value)
}
//重置
function replacement() {
  name.value = ''
  getApplyList(name.value)
}
const getApplyList = () => {
  const params = {
    page: page.value,
    limit: 4,
    ended: ended.value,
    // name: name.value,
  }
  if (ended.value === '') {
    delete params.ended
  }
  if (typeName.value == '能力申请') {
    getTabilityapplication(params).then((res) => {
      contentList.data = []
      console.log('获取我的申请===============>', res.data.data)
      contentList.data = res.data.data.list
      total.value = res.data.data.total
      showType.value = '能力申请'
      initNum2()
    })
  } else if (typeName.value == '能力评价') {
    contentList.data = []
    num.value = []
    showType.value = ''
  } else if (typeName.value == '设备申请') {
    let _state = ended.value === '' ? '全部' : ended.value === true ? '审核完成' : '审核中';
    getDeviceApply(_state).then(res => {
      if (res.data.code == 0) {
        contentList.data = []
        contentList.data = res.data.data.list || []
        total.value = res.data.data.total
        showType.value = '设备申请';
        // 获取审核中，审核完成 数量
        getDeviceNum()
      }
    }).catch(err => {
    })
  } else if (Object.keys(typeStrObj).includes(typeName.value)) {
    processDefinitionKey.value = typeStrObj[typeName.value]
    params.processDefinitionKey = processDefinitionKey.value;
    getMyProcessInstancePage(params).then((res) => {
      contentList.data = []
      // initNum(name.value)
      console.log(res.data.data.list)
      contentList.data = res.data.data.list
      total.value = res.data.data.total
      initNum()
      switch (typeIndex.value) {
        case 2:
          contentList.data.map((val) => {
            nengliziyuanshangjiaapply(val.businessKey).then((res1) => {
              console.log('上架===========>', res1.data.data)
              val.title = res1.data.data.resourceDTO.name
              val.dto = res1.data.data.resourceDTO
              showType.value = '能力上架'
            })
          })
          break
        case 3:
          contentList.data.map((val) => {
            selectOneDel(val.businessKey).then((res1) => {
              console.log('下架===========>', res1.data.data)
              val.title = res1.data.data.name
              val.dto = res1.data.data
              showType.value = '能力下架'
            })
          })
          break
        case 4:
          contentList.data.map((val) => {
            getDemandForm(val.businessKey).then((res1) => {
              console.log('需求===========>', res1.data.data)
              val.title = res1.data.data.demandSubject
              val.resourceStatusTip = res1.data.data.flagTip
              val.dto = res1.data.data
              showType.value = '能力需求'
            })
          })
          break
        case 5:
          contentList.data.map((val) => {
            demandComment(val.businessKey).then((res1) => {
              console.log('评论===========>', res1.data.data)
              val.title = res1.data.data.comment
              val.resourceStatusTip = res1.data.data.delFlagTip
              val.dto = res1.data.data
              showType.value = '需求评论'
            })
          })
          break
      }
    })
  } else {
    contentList.data = []
    num.value = []
    showType.value = ''
  }
}
const handleCurrentChange = (val) => {
  page.value = val
  getApplyList()
}

const handlePageSizeChange = (val) => {
  page.value = val
  getApplyList()
}

const viewDetail = (processDefinitionName, id, ended, businessKey) => {
  if (processDefinitionName == '能力申请流程') {
    router.push({
      path: '/details',
      query: {
        id: id,
        ended: ended,
      },
    })
  }
  if (processDefinitionName == '能力资源上架') {
    console.log('showDetail', id, businessKey, ended)
    router.push({
      path: '/details',
      query: {
        id: id,
      },
    })
  }
  if (processDefinitionName == '能力需求申请') {
    router.push({
      path: '/demandDetails',
      query: {
        id: businessKey,
      },
    })
  }
}

// 下架能力
const del = () => {
  console.log('下架================》', delObj.value, reason.value)
  delObj.value.undercarriageReason = reason.value
  updateRes(delObj.value).then((upres) => {
    if (upres.data.code == 0) {
      relaunch({
        data: { undercarriageReason: reason.value },
        taskId: taskId.value,
      }).then((res) => {
        console.log('驳回================>', res)
        if (res.data.code == 0) {
          message.success('重新发起流程成功！')
          visible.value = false
          reason.value = ''
        } else {
          message.error('重新发起流程失败！')
        }
      })
    } else {
      message.error('数据更新失败！')
    }
  })
}

// 西海岸：设备申请列表 todo
const getDeviceApply = (state) => {
  return new Promise((resolve, reject) => {
    let _data = {
      page: page.value,
      limit: 4,
      state
    }
    deviceApplylist(_data).then(res => {
      resolve(res)
      console.log('res----设备申请-------->', res);
    }).catch(err => {
      reject(err)
      console.log('err------------>', err);
    })
  })
}

// 西海岸：设备申请--查询详情
const getDeviceDetailInfo = (deviceId) => {
  return new Promise((resolve, reject) => {
    getDeviceDetail(deviceId).then(res => {
      resolve(res)
      console.log('res----查询详情-------->', res);
    }).catch(err => {
      reject(err)
      console.log('err------------>', err);
    })
  })
}

// 西海岸：设备申请-审核中, 审核完成数量
const getDeviceNum = () => {
  if (!numFlag.value) {
    return;
  }
  num.value = []
  Promise.all([getDeviceApply('审核中'), getDeviceApply('审核完成')]).then(res => {
    console.log('res-----数量------->', res);
    let unfinished = res[0] && res[0].data && res[0].data.data;
    let finished = res[1] && res[1].data && res[1].data.data;
    num.value.unfinished = unfinished.total || '';
    num.value.finished = finished.total || '';
    numFlag.value = false
  }).catch(err => {
    console.log('err------------>', err);
  })
}

const phoneVisible = ref(false)
const showPhoneModal = () => {
  phoneVisible.value = true
}

mybus.on('closeModal', (obj) => {
  detailsVisible.value = false
  changeType(obj.type, obj.index)
})
onBeforeUnmount(() => {
  mybus.off('closeModal')
})
onMounted(() => {
  getApplyList()
})
</script>

<style scoped lang="less">
.on-the-right-side-of-the-list {
  background: #ffffff;
  padding: 20px 0px 30px 20px;
  position: absolute;
  width: 1087px;
  height: 810px;
  top: 0px;
  display: flex;
  margin-top: 20px;
  flex-direction: column;
  font-size: 16px;
  justify-content: left;

  .title {
    font-size: 20px;
    color: #000000;
    font-family: 'Alibaba PuHuiTi';
    font-weight: 500;
  }

  .sousuokuang {
    margin: 20px 0px 21px 0px;

    .ant-input-search {
      max-width: 490px;
    }

    :deep(.ant-input) {
      width: 400px;
      height: 36px;
      font-size: 14px;
      color: #b2b2b2;
      background: #f5f5f5;
    }

    :deep(.ant-input-group-addon) {
      display: inline-block;
      margin-left: 10px;

      .ant-input-search-button {
        width: 80px;
        height: 36px;
        border-radius: 4px;
        font-size: 14px;
      }
    }
  }

  .tab {
    display: flex;
    font-size: 14px;
    color: #999999;

    div {
      // width: 70px;
      padding: 5px 10px;
      height: 24px;
      line-height: 14px;
      border: 1px solid #cccccc;
      border-radius: 12px;
      margin-left: 10px;
      text-align: center;
      color: #666666;
      cursor: pointer;
    }

    .tabclass {
      border: 1px solid #0087ff;
      color: #0087ff;
    }
  }

  .content {
    padding-right: 10px;
    height: 510px;

    .content-body {
      padding-bottom: 20px;
      padding-top: 20px;
      margin-right: 10px;
      height: 150px;
      border-bottom: #cccccc 1px solid;
      position: relative;

      .content-body-title {
        min-width: 100px;
        max-width: 900px;
        width: fit-content;
        font-size: 14px;
        color: #333333;
        font-family: 'Alibaba PuHuiTi';
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .content-body-content {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-right: 40px;
        /* width: 720px; */
        display: inline-block;
      }

      .content-body-content-son {
        line-height: 16px;
        font-size: 12px;
        width: 100%;
        // text-overflow: -o-ellipsis-lastline;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // display: -webkit-box;
        // -webkit-line-clamp: 3;
        // -webkit-box-orient: vertical;
        display: flex;
        color: #999999;

        span {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          max-width: 8.1rem;
          line-height: 24px;
          word-break: break-all;
        }
      }

      .content-body-bottom {
        display: flex;
        color: #cccccc;
        font-size: 12px;

        div:first-child {
          margin-right: 30px;
        }
      }
    }
  }

  .bottom {
    position: absolute;
    bottom: 30px;
    right: 20px;
  }

  .button-box {
    position: absolute;
    right: 20px;
    top: 10px;
    display: flex;
    flex-direction: column;
  }

  .button {
    width: 96px;
    height: 30px;
    margin: 5px 0;
    background: #0087ff;
    font-size: 14px;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
  }

  .buttonAgree {
    background-color: #49c988;
  }

  .backToFirst {
    background-color: rgb(214, 91, 91);
  }
}

:deep(.ant-badge-count) {
  top: -5px;
  right: -10px;
}
</style>