西海岸：我的申请，增加设备申请

front/src/api/personalCenter.js

@@ -284,3 +284,20 @@ export function endProcess(params) {
     params,
   })
 }
+
+// 西海岸：我的申请--设备申请列表
+export function deviceApplylist(params) {
+  return request({
+    url: '/deviceApply/page',
+    method: 'get',
+    params,
+  })
+}
+
+// 西海岸：我的申请--设备申请--查询详情
+export function getDeviceDetail(deviceId) {
+  return request({
+    url: `/device/${deviceId}`,
+    method: 'get',
+  })
+}

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

@@ -1,24 +1,12 @@
 <template>
-  <div class="form-container">
+  <DeviceApplyDetail v-if="showType === '设备申请'" :refObj="refObj"></DeviceApplyDetail>
-    <AbilityApplication
+  <div class="form-container" v-else>
-      :refObj="refObj"
+    <AbilityApplication :refObj="refObj" v-if="showType === '能力申请'"></AbilityApplication>
-      v-if="showType === '能力申请'"
+    <PutOnTheShelf :refObj="refObj" v-else-if="showType === '能力上架'"></PutOnTheShelf>
-    ></AbilityApplication>
+    <OffTheShelf :refObj="refObj" v-else-if="showType === '能力下架'"></OffTheShelf>
-    <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>
-    <!-- <div class="title">流程图</div>
-    <div>
-      <img :src="getResourceURL()" alt="" />
-    </div> -->
     <div>
       <div class="title">审批详情</div>
       <template v-for="item in dataSource.data" :key="item">
@@ -35,219 +23,222 @@
   </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 OtherApplications from '@/views/personalCenter/components/OtherApplications '
+import DeviceApplyDetail from './DeviceApplyDetail.vue'
-  import { onMounted, reactive, defineProps, ref } from 'vue'
+import OtherApplications from '@/views/personalCenter/components/OtherApplications '
-  import Cookies from 'js-cookie'
+import { onMounted, reactive, defineProps, ref } from 'vue'
-  // import { baseURL } from '@/config'
+import Cookies from 'js-cookie'
-  import qs from 'qs'
+// import { baseURL } from '@/config'
-  import {
+import qs from 'qs'
-    getApplyForm,
+import {
-    getTaskHandleDetailInfo,
+  getApplyForm,
-    getDemandForm,
+  getTaskHandleDetailInfo,
-    nengliziyuanshangjiaapply,
+  getDemandForm,
-    getTaskVariables,
+  nengliziyuanshangjiaapply,
-  } from '@/api/personalCenter'
+  getTaskVariables,
-  import { selectOneDel } from '@/api/home'
+} from '@/api/personalCenter'
-  const props = defineProps({
+import { selectOneDel } from '@/api/home'
-    processDefinitionName: { type: String, default: null },
+const props = defineProps({
-    businessKey: { type: String, default: null },
+  processDefinitionName: { type: String, default: null },
-    processInstanceId: { type: String, default: null },
+  businessKey: { type: String, default: null },
-    resourceId: { type: String, default: null },
+  processInstanceId: { type: String, default: null },
-    refObj: { type: Object, default: null },
+  resourceId: { type: String, default: null },
-    showType: { type: String, default: null },
+  refObj: { type: Object, default: null },
-  })
+  showType: { type: String, default: null },
-  const refObj = ref({})
+})
-  const showType = ref('')
+const refObj = ref({})
-  // eslint-disable-next-line vue/no-setup-props-destructure
+const showType = ref('')
-  refObj.value = props.refObj
+// eslint-disable-next-line vue/no-setup-props-destructure
-  // eslint-disable-next-line vue/no-setup-props-destructure
+refObj.value = props.refObj
-  showType.value = props.showType
+// eslint-disable-next-line vue/no-setup-props-destructure
-  //流转详情
+showType.value = props.showType
-  const dataSource = reactive({ data: [] })
+//流转详情
-  // console.log(props.refObj, '---------------------------------------')
+const dataSource = reactive({ data: [] })
+console.log('refObj------------>', refObj);
 
-  const downloadFile = (path, name) => {
+// console.log(props.refObj, '---------------------------------------')
-    const xhr = new XMLHttpRequest()
+
-    xhr.open('get', path)
+const downloadFile = (path, name) => {
-    xhr.responseType = 'blob'
+  const xhr = new XMLHttpRequest()
-    xhr.send()
+  xhr.open('get', path)
-    xhr.onload = function () {
+  xhr.responseType = 'blob'
-      if (this.status === 200 || this.status === 304) {
+  xhr.send()
-        // 如果是IE10及以上，不支持download属性，采用msSaveOrOpenBlob方法，但是IE10以下也不支持msSaveOrOpenBlob
+  xhr.onload = function () {
-        if ('msSaveOrOpenBlob' in navigator) {
+    if (this.status === 200 || this.status === 304) {
-          navigator.msSaveOrOpenBlob(this.response, name)
+      // 如果是IE10及以上，不支持download属性，采用msSaveOrOpenBlob方法，但是IE10以下也不支持msSaveOrOpenBlob
-          return
+      if ('msSaveOrOpenBlob' in navigator) {
-        }
+        navigator.msSaveOrOpenBlob(this.response, name)
-        // const blob = new Blob([this.response], { type: xhr.getResponseHeader('Content-Type') });
+        return
-        // const url = URL.createObjectURL(blob);
+      }
-        const url = URL.createObjectURL(this.response)
+      // const blob = new Blob([this.response], { type: xhr.getResponseHeader('Content-Type') });
-        const a = document.createElement('a')
+      // const url = URL.createObjectURL(blob);
-        a.style.display = 'none'
+      const url = URL.createObjectURL(this.response)
-        a.href = url
+      const a = document.createElement('a')
-        a.download = name
+      a.style.display = 'none'
-        document.body.appendChild(a)
+      a.href = url
-        a.click()
+      a.download = name
-        document.body.removeChild(a)
+      document.body.appendChild(a)
-        URL.revokeObjectURL(url)
+      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: 'durationInSeconds',
+    key: 'durationInSeconds',
+  },
+]
+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 formName = reactive({
+
-    user: '',
+const getResourceURL = () => {
-    phone: '',
+  console.log('111111111111111111111111111111', Cookies.get('token'))
-    unit: '',
+  const params = qs.stringify({
-    area: '',
+    token: Cookies.get('token'),
-    system: '',
+    // processInstanceId: this.dataForm.processInstanceId
-    scene: '',
+    processInstanceId: props.processInstanceId,
-    basis: '',
-    id: '',
   })
-  let shifoushizujian = ref('')
+  return `${window.SITE_CONFIG.apiURL}/act/his/getInstImage?${params}`
-  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: 'durationInSeconds',
-      key: 'durationInSeconds',
-    },
-  ]
-  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">
@@ -255,6 +246,7 @@
   height: 6rem;
   overflow-y: scroll;
   padding: 20px 20px 30px 20px;
+
   .title {
     font-size: 18px;
     color: #000;
@@ -265,20 +257,23 @@
     border-left: 6px #0058e1 solid;
   }
 }
-:deep(.ant-table-thead) > tr > .ant-table-cell {
+
+:deep(.ant-table-thead)>tr>.ant-table-cell {
   background: #0087ff;
   color: #fff;
   border: none;
   text-align: center;
   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;
   // display: inline-block;
   // white-space: nowrap;
   // overflow: hidden;
   // text-overflow: ellipsis;
 }
+
 .oddNumbers {
   margin-bottom: 0.05rem;
 }

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

@@ -0,0 +1,43 @@
+<!--
+ * @Description: 我的申请 设备申请 查看详情
+-->
+<template>
+  <div class="device-detail-box">
+    <div v-for="(db, key) in wrjData" :key="key">
+      <template v-if="typeof db == 'object'">
+        <div style="
+                  font-size: 20px;
+                  font-weight: 600;
+                  margin: 10px 0;
+                  text-align: center;
+                ">
+          {{ db.attrType || '--' }}
+        </div>
+        <template v-if="db.attrValue">
+          <div style="padding: 0 30px" v-for="(value, key2) in JSON.parse(db.attrValue)" :key="value">
+            {{ key2 + '：' + value }}
+          </div>
+        </template>
+      </template>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, defineProps, watch } from 'vue'
+const props = defineProps({
+  refObj: { type: Object, default: null },
+})
+const wrjData = ref([])
+wrjData.value = props.refObj.deviceAttrDTOList || []
+
+watch(() => props.refObj, (val) => {
+  wrjData.value = val.deviceAttrDTOList || []
+}, { immediate: true, deep: true })
+
+</script>
+<style lang="less" scoped>
+.device-detail-box {
+  height: 6rem;
+  overflow-y: auto;
+}
+</style>

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

@@ -39,15 +39,20 @@
             </div>
           </a-tooltip>
           <div class="content-body-content">
-            <p class="content-body-content-son">
+            <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">
               修改
@@ -98,10 +103,16 @@
       </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 } from 'vue'
+import { onMounted, reactive, ref, onBeforeUnmount, h } from 'vue'
 import {
   getMyProcessInstancePage,
   getTabilityapplication,
@@ -109,6 +120,8 @@ import {
   nengliziyuanshangjiaapply,
   getDemandForm,
   demandComment,
+  deviceApplylist,
+  getDeviceDetail,
 } from '@/api/personalCenter'
 import {
   updateRes,
@@ -132,6 +145,7 @@ let typeList = ref([
 ])
 // 西海岸-设备申请
 let isXiHaiAn = whoShow.itShowXiHaiAn;
+const phoneSate = ref([2, 3])
 if (isXiHaiAn) {
   typeList.value.push('设备申请')
 }
@@ -146,7 +160,6 @@ const contentList = reactive({ data: [] })
 let tabIndex = ref(0)
 let typeIndex = ref(0)
 let typeName = ref(typeList.value[0])
-console.log('typeName------------>', typeName);
 
 const videoVisible = ref(false)
 const numFlag = ref(true)
@@ -206,9 +219,8 @@ const taskId = ref('')
 const backUrl = ref(window.SITE_CONFIG.apiURL + '/')
 const refObj = ref({})
 const showDetail = (item) => {
-  console.log('showDetail', item)
   // getProcDefBizRoute(item.processDefinitionId)
-  if (typeIndex.value == 0 && item.applyFlag) {
+  if (typeName.value == '能力申请' && item.applyFlag) {
     getByApplyFlag(item.applyFlag).then((res) => {
       if (res.data.code == 0) {
         refObj.value = res.data.data
@@ -221,7 +233,19 @@ const showDetail = (item) => {
         message.error('数据请求失败！')
       }
     })
-  } else if (typeIndex.value !== 1) {
+  } 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
@@ -401,9 +425,18 @@ const getApplyList = () => {
     num.value = []
     showType.value = ''
   } else if (typeName.value == '设备申请') {
-    contentList.data = []
+    let _state = ended.value === '' ? '全部' : ended.value === true ? '审核完成' : '审核中';
-    num.value = []
+    getDeviceApply(_state).then(res => {
-    showType.value = ''
+      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;
@@ -528,6 +561,61 @@ const del = () => {
     }
   })
 }
+
+// 西海岸：设备申请列表 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)