<template> <div class="ability-to-apply-for" :class="{ all: falg }"> <div class="title"> <span>申请能力</span> <div class="btnBox" v-show="!falg" v-if="dataForm[0].arr.length > 1 || dataForm.length > 1" > <svg t="1659419933164" class="btn" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5926" width="20" height="20" @click="falg = !falg" > <path d="M512 565.12a45.44 45.44 0 0 1-32.64-13.44l-448-451.84a45.44 45.44 0 0 1 64-64L512 454.4 931.84 35.2a46.08 46.08 0 0 1 64 0 45.44 45.44 0 0 1 0 64L545.28 551.68a45.44 45.44 0 0 1-33.28 13.44z" fill="#13227a" p-id="5927" ></path> <path d="M512 1016.96a45.44 45.44 0 0 1-32.64-13.44l-448-451.84a45.44 45.44 0 0 1 64-64L512 906.24l419.2-419.2a46.08 46.08 0 0 1 64 0 45.44 45.44 0 0 1 0 64l-449.92 452.48a45.44 45.44 0 0 1-33.28 13.44z" fill="#13227a" p-id="5928" ></path> </svg> <span class="btn" style="font-weight:600" @click="falg = !falg">展开</span> <span class="btn" @click="falg = !falg">(共{{totalDataNum}}条数据)</span> </div> <div class="btnBox" v-show="falg"> <svg t="1659420014519" class="btn" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9781" width="20" height="20" @click="falg = !falg" > <path d="M498.095 146.134l403.416 403.415c17.387 17.387 45.576 17.387 62.963 0s17.387-45.576 0-62.963L499.888 22 35.302 486.586c-17.388 17.387-17.388 45.575 0 62.963 17.387 17.387 45.576 17.387 62.964 0L498.095 146.134zM498.817 592.073l402.693 402.693c17.387 17.387 45.576 17.387 62.963 0s17.387-45.576 0-62.963L499.888 467.219 35.302 931.804c-17.388 17.387-17.388 45.576 0 62.963 17.387 17.387 45.576 17.387 62.964 0L498.817 592.073z" p-id="9782" fill="#13227a" ></path> </svg> <span class="btn" style="font-weight:600" @click="falg = !falg">收起</span> </div> </div> <div v-for="(item, index) in dataForm" :key="index" class="ability-to-apply-for-content" > <div class="dep-name"> <span></span> {{ item.deptName }} </div> <template v-for="val in item.arr" :key="val.resourceId"> <div class="item"> <div class="tx" :class=" val.type == '基础设施' ? 'sxt' : val.type == '应用资源' ? 'yyzy' : val.componentType == '智能算法' ? 'znsf' : val.componentType == '图层服务' ? 'tcfw' : val.componentType == '开发组件' ? 'kfzj' : val.componentType == '业务组件' ? 'ywzj' : 'znsf' " ></div> <div class="text"> <div class="name"> <span @click=" showItem(val.resourceId, val.type, val.delFlag, val.note1) " style="cursor: pointer" > {{ val.resourceName }} </span> <span>{{ val.type }}</span> </div> <!-- (item.note1 && JSON.parse(item.note1) && JSON.parse(item.note1)[0] && JSON.parse(item.note1)[0].channelName --> <div class="description"> {{ val.description || ((val.note1 || '') && ((JSON.parse(val.note1) && JSON.parse(val.note1)[0] && JSON.parse(val.note1)[0].channelName) || '--') + '等' + JSON.parse(val.note1).length + '个摄像头') || '--' }} </div> </div> <div class="remove" v-if="item.arr.length > 1" @click="removeFunction(val)" ></div> </div> </template> </div> </div> <a-modal v-model:visible="videoVisible" title="已申请摄像头列表" @ok="videoVisible = false" > <a-select placeholder="请选择归属部门" style="width: 200px" v-model:value="deptName" :getPopupContainer="(triggerNode) => triggerNode.parentNode" show-search :filterOption="true" @change="deptIdChangeFunction"> <a-select-option v-for="(item, index) in deptNameAll" :key="`${index}-${item}`" :value="item.name"> {{ item.name }} </a-select-option> </a-select> <a-table :columns="columns" :data-source="xVideoList" bordered :pagination="{ defaultPageSize: 6 }" style="margin-top:10px" > <template #bodyCell="{ column, text }"> <!-- <template> <a>{{ text }}</a> </template> --> </template> </a-table> </a-modal> </template> <script setup> import { useRouter } from 'vue-router' import { message } from 'ant-design-vue' import { ref, defineProps } from 'vue' import mybus from '@/myplugins/mybus' import { getDeptAll } from '@/api/user' const router = useRouter() const props = defineProps({ dataList: { type: Array, default: null }, }) const falg = ref(false) let dataForm = ref([]) let totalDataNum = ref(0); const videoVisible = ref(false) const xVideoList = ref([]) const xVideoListAll = ref([]) const deptNameAll = ref([]) //所有部门名称 const deptFlage = ref(true) //判断是否存在默认部门名称 const deptName = ref(null) const columns = ref([ { title: '摄像头名称', dataIndex: 'name', }, { title: '归属部门', dataIndex: 'managementUnitName', } ]) // eslint-disable-next-line vue/no-setup-props-destructure dataForm.value = props.dataList console.log('============dataList=============>', dataForm.value) // const router = useRouter() // const arr = // router.currentRoute.value.query.name instanceof Array // ? router.currentRoute.value.query.name // : [router.currentRoute.value.query.name] // const dataResourceId = router.currentRoute.value.query.resourceId // const depList = ref({ // Name: [], // depID: [], // }) //移除方法 const removeFunction = (data) => { dataForm.value.map((val) => { if (val.arr.length > 1) { val.arr = val.arr.filter((item) => item.id !== data.id) } else { message.error('至少需要提交一条能力申请!') } }) dataForm.value = dataForm.value.filter((val) => val.arr.length !== 0) } // 详情 const showItem = (id, type, delFlag, note1) => { if (type == '基础设施') { let arr = JSON.parse(note1); //console.log('arrarr====',arr); xVideoList.value = [] arr.map((val) => { xVideoList.value.push({ name: val.channelName || '', key: val.channelId, managementUnitName:val.managementUnitName || '', }) }) xVideoListAll.value = xVideoList.value; videoVisible.value = true } else { if (delFlag == 0) { window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle')) mybus.emit('tabsChange', { flag: id }) router.push({ path: '/details', query: { id: id, }, }) } } } //归属部门选中改变事件 const deptIdChangeFunction = (name) => { //console.log('nnnndddd',name); //console.log('过滤前xVideoList',xVideoList); //通过name过滤xVideoList xVideoList.value = xVideoListAll.value.filter((item) => { if (name && item.managementUnitName.indexOf(name) < 0) return false return true }); } //获取所有的归属部门列表 const getDeptAllData = () =>{ getDeptAll().then((res) => { deptNameAll.value = res.data.data }) } getDeptAllData(); const getDataTotalNum = () =>{ let totalNum =0; dataForm.value.forEach((item)=>{ totalNum = totalNum +item.arr.length; }); totalDataNum.value = totalNum; } getDataTotalNum(); //获取数据的总条数 </script> <style scoped lang="less"> .ability-to-apply-for { height: 2.9rem; overflow: hidden; .title { font-size: 0.16rem; color: #212121; border-bottom: 0.01rem #dddee1 solid; padding-bottom: 0.1rem; margin-bottom: 0.2rem; display: flex; justify-content: space-between; } .ability-to-apply-for-content { padding-right: 0.5rem; position: relative; .dep-name { color: #0558e1; font-size: 0.22rem; display: flex; align-items: center; line-height: 0.22rem; margin-bottom: 0.2rem; span { display: inline-block; width: 0.05rem; height: 0.05rem; background: #0558e1; border-radius: 0.05rem; margin-right: 0.05rem; } } .item { padding-bottom: 0.1rem; margin-bottom: 0.1rem; border-bottom: 1px solid #dddee1; display: flex; align-items: center; .text { margin-left: 0.2rem; width: 8.8rem; } } .name { margin-bottom: 0.2rem; span:first-child { display: inline-block; margin-right: 0.08rem; font-size: 0.18rem; color: #000000; } span:last-child { display: inline-block; padding: 0 0.05rem; background: #00b8e6; color: #fff; } } .description { width: 8.8rem; color: rgba(0, 0, 0, 0.45); } .remove { margin-left: 0.1rem; width: 0.32rem; height: 0.32rem; background: url('~@/assets/home/remove.png') no-repeat; background-size: cover; cursor: pointer; } .remove:hover { background: url('~@/assets/home/remove-hover.png') no-repeat; background-size: cover; } } } .all { height: unset; min-height: 2.9rem; } .btn { cursor: pointer; margin-left: 10px; } .tx { display: inline-block; width: 0.8rem; height: 0.8rem; margin-left: 0.1rem; } .sxt { background: url('~@/assets/home/sxt_square.png') no-repeat; background-size: 100%; } .yyzy { background: url('~@/assets/home/yyzy_square.png') no-repeat; background-size: 100%; } .znsf { background: url('~@/assets/home/znsf_square.png') no-repeat; background-size: 100%; } .tcfw { background: url('~@/assets/home/tcfw_square.png') no-repeat; background-size: 100%; } .kfzj { background: url('~@/assets/home/kfzj_square.png') no-repeat; background-size: 100%; } .ywzj { background: url('~@/assets/home/ywzj_square.png') no-repeat; background-size: 100%; } .btnBox { display: flex; align-items: center; } ::v-deep .ant-table-thead > tr > th { //padding-left: px; font-size: 18px; font-weight: bold; color:#000000 ; //background: # !important; } </style>