西海岸摄像头已申请列表添加新字段

front/src/views/home/AbilityToApplyFor.vue

@@ -126,11 +126,17 @@
     title="已申请摄像头列表"
     @ok="videoVisible = false"
   >
+  <a-select placeholder="请选择归属部门"  v-model:value="deptName" :getPopupContainer="(triggerNode) => triggerNode.parentNode" show-search  option-filter-prop="children" :filterOption="filterOption" @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>
@@ -146,6 +152,7 @@
   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 },
@@ -154,12 +161,19 @@
   let dataForm = ref([])
   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
@@ -189,14 +203,16 @@
   // 详情
   const showItem = (id, type, delFlag, note1) => {
     if (type == '基础设施') {
-      let arr = JSON.parse(note1)
+      let arr = JSON.parse(note1);
       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) {
@@ -211,6 +227,27 @@
       }
     }
   }
+    //归属部门选中改变事件
+    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(); 
+    //select搜索过滤
+    const filterOption = (input, option) => {
+    return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
+  }
 </script>
 
 <style scoped lang="less">
@@ -351,4 +388,11 @@
     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>