fix: 赋能场景--基础设施--详情

back/src/views/modules/ability/assignedScene/add-update-scene.vue

@@ -62,7 +62,7 @@
               组合能力
             </div>
             <InfrastructureModal v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施"
-              ref="jcssDom"></InfrastructureModal>
+              :modalType="modalType" ref="jcssDom"></InfrastructureModal>
             <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="数据资源" ref="sjzyDom"
               :getDataParams="getListParams['数据资源']"></combine-ability>
             <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="组件服务" ref="zjfwDom"
@@ -269,6 +269,7 @@ export default {
       handler(newVal) {
         this.addOrUpdateVisibleCopy = newVal;
         if (this.modalType == 'add' && newVal) {
+          localStorage.setItem('InfrastructureSearchData', JSON.stringify({}))
           this.getDetail(this.dataForm)
         }
       },
@@ -361,6 +362,7 @@ export default {
     ),
     // 详情
     getDetail(data) {
+      console.log('data---详情--------->', data);
       this.dataForm = data;
       this.$nextTick(() => {
         for (const key in this.refsParseArray) {
@@ -369,7 +371,7 @@ export default {
         let _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {};
         this.imageUrl = _imgObj.attrValue;
 
-        // 组合能力
+        // 组合能力--特殊处理
         Object.keys(this.getListParams).map(k => {
           let arr = data.fuseResourceList.filter(v => v.type == k);
           let arr2 = [];
@@ -391,14 +393,9 @@ export default {
         file.type === 'image/jpeg' ||
         file.type === 'image/jpg' ||
         file.type === 'image/png'
-      // const isLt2M = file.size / 1024 / 1024 < 2
-
       if (!isImage) {
         this.$message.error('上传头像图片只能是 jpg/png 格式!')
       }
-      // if (!isLt2M) {
-      //   this.$message.error('上传头像图片大小不能超过 2MB!')
-      // }
       return isImage
     },
     addUploadRemoveFile(file, fileList) {
@@ -410,14 +407,10 @@ export default {
         file.type === 'image/jpeg' ||
         file.type === 'image/jpg' ||
         file.type === 'image/png'
-      // const isLt2M = file.size / 1024 / 1024 < 2
 
       if (!isImage) {
         this.$message.error('上传头像图片只能是 jpg/png 格式!')
       }
-      // if (!isLt2M) {
-      //   this.$message.error('上传头像图片大小不能超过 2MB!')
-      // }
       return isImage
     },
     editUploadRemoveFile(file, fileList) {
@@ -429,7 +422,6 @@ export default {
         return this.$message.error(res.msg)
       }
       this.imageUrl = res.data
-      // this.imageUrl = URL.createObjectURL(file.raw);
     },
   },
   beforeDestroy() {

back/src/views/modules/ability/assignedScene/components/infrastructure-modal.vue

@@ -2,7 +2,8 @@
     <div>
         <div class="top flex-row-start">
             <div class="type">{{ type }}</div>
-            <el-button type="primary" size="small" @click="showModal = true">添加</el-button>
+            <el-button type="primary" size="small" @click="showModal = true">{{ modalType == 'add' ? '添加' : '编辑' }}
+            </el-button>
         </div>
         <el-dialog class="modal-box" :visible.sync="showModal" title="请选择" @close="close" :close-on-click-modal="false"
             :close-on-press-escape="false" :key="showKey" append-to-body>
@@ -34,8 +35,8 @@
                     </div>
                     <div class="flex-row-start" style="margin-bottom:10px;align-items: flex-start;">
                         <div class="left-text" style="margin-top: 10px;">关键词</div>
-                        <el-input style="margin-left:10px;width: 200px;" v-model="cameraName" placeholder="名称"
-                            clearable>
+                        <el-input style="margin-left:10px;width: 200px;" v-model="searchData.cameraName"
+                            placeholder="名称" clearable>
                         </el-input>
                         <el-button type="primary" style="margin-left:10px;margin-top:4px" size="small" @click="getData">
                             搜索
@@ -59,8 +60,8 @@
                             <el-table-column prop="nodeName" label="归属" header-align="center" align="center">
                             </el-table-column>
                         </el-table>
-                        <el-pagination style="justify-content: center;display: flex;" :current-page="pageData.page"
-                            :page-sizes="[10, 20, 50, 100]" :page-size="pageData.limit" :total="pageData.total"
+                        <el-pagination style="justify-content: center;display: flex;" :current-page="searchData.pageNum"
+                            :page-sizes="[10, 20, 50, 100]" :page-size="searchData.pageSize" :total="pageData.total"
                             layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
                             @current-change="pageCurrentChangeHandle">
                         </el-pagination>
@@ -75,7 +76,7 @@
             </template>
         </el-dialog>
 
-        <DisplayList :displayList="displayList"></DisplayList>
+        <DisplayList :displayList="displayList" showKey="channelName"></DisplayList>
     </div>
 </template>
 
@@ -98,6 +99,10 @@ export default {
             type: String,
             default: "基础设施"
         },
+        modalType: {
+            type: String,
+            default: 'add'
+        }
     },
     data() {
         const getYunList = () => {
@@ -109,9 +114,7 @@ export default {
         return {
             showKey: 0,
             showModal: false,
-            transferData: [], // 穿梭框所有数据
             selectedArray: [], // 已选择的数据id
-            allData: [],
             displayList: [], // 用于展示的list
             btnList: ['视频资源', '云资源', '感知资源'],
             showText: {
@@ -133,23 +136,28 @@ export default {
                     list: []
                 },
             ],
-            activeBtn: '视频资源',
-            checkList: [],
             currentList: [],
             dataListLoading: false,
             dataList: [],
             pageData: {
-                limit: 10,
-                page: 1,
                 total: 0,
             },
             cameraName: '',
+            postData: {},
+            activeBtn: '视频资源',
+            checkList: [],
+            searchData: {
+                cameraName: '',
+                pageSize: 10,
+                pageNum: 1,
+                parentId: ''
+            },
+            dataFormCopy: {}
         }
     },
     watch: {
         async showModal(newVal) {
             if (newVal) {
-                await this.getData();
                 // 默认选中复选框
                 this.$nextTick(() => {
                     this.selectCheckbox()
@@ -160,8 +168,6 @@ export default {
     mounted() {
         // 获取视频资源
         this.getVideoBtn()
-        // 获取列表
-        this.getData()
     },
     methods: {
         selectCheckbox() {
@@ -176,24 +182,24 @@ export default {
                 })
                 if (list.length) {
                     list.forEach((row) => {
-                        this.$refs.dataTable.toggleRowSelection(row, true)
+                        this.$refs.dataTable && this.$refs.dataTable.toggleRowSelection(row, true)
                     })
                 }
             }
         },
+        showAction() {
+            this.showModal = true;
+        },
+        // 详情
         async getDataInfo(dataForm) {
+            this.modalType == 'edit'
+            this.dataFormCopy = dataForm;
             await this.getVideoBtn();
-            await this.getData();
             let arr = [];
             let attrValue = dataForm.fuseResourceList.filter(v => v.type == this.type);
             if (attrValue.length > 0) {
                 attrValue.map(val => {
-                    let item = this.dataList.find(v => v.idtCameraChannel == val.resourceId) || {};
-                    let _obj = {
-                        type: val.type,
-                        idtCameraChannel: val.resourceId,
-                        name: item.channelName
-                    };
+                    let _obj = Object.assign({}, val, val.resource)
                     arr.push(_obj);
                 });
             }
@@ -201,28 +207,31 @@ export default {
             this.displayList = JSON.parse(JSON.stringify(arr));
             // 已选中
             this.selectedArray = arr.map(v => v.idtCameraChannel);
-        },
-        handleShowModal() {
-            this.showModal = true;
+            this.dataList = JSON.parse(JSON.stringify(arr));
+            this.pageData.total = arr.length;
+            // 默认选中复选框
+            this.$nextTick(() => {
+                this.selectCheckbox()
+            })
         },
         // 点击复选框
         dataListSelectionChangeHandle(data) {
             this.selectedArray = data;
         },
-        pageCurrentChangeHandle(page) {
-            this.pageData.page = page;
+        pageCurrentChangeHandle(pageNum) {
+            this.searchData.pageNum = pageNum;
             this.getData()
         },
-        pageSizeChangeHandle(limit) {
-            this.pageData.limit = limit;
+        pageSizeChangeHandle(pageSize) {
+            this.searchData.pageSize = pageSize;
             this.getData()
         },
         changeBtn(btn) {
             this.activeBtn = btn;
+            this.currentList = this.tabData.find(v => v.tabName == btn).list || [];
             this.checkList = [];
-            this.cameraName = '';
+            this.searchData.cameraName = '';
             this.getData()
-            this.currentList = this.tabData.find(v => v.tabName == btn).list || []
         },
         // 获取视频标签列表
         getVideoBtn() {
@@ -234,7 +243,13 @@ export default {
                     }
                     this.tabData[0].list = res.data.data || [];
 
-                    this.changeBtn(this.activeBtn)
+                    this.$nextTick(() => {
+                        this.currentList = this.tabData.find(v => v.tabName == this.activeBtn).list || [];
+                        if (this.modalType == 'add') {
+                            // 获取列表
+                            this.getData()
+                        }
+                    })
                 }).catch(err => {
                     reject(err)
                     this.$message.error(err);
@@ -255,23 +270,19 @@ export default {
             } else {
                 this.checkList.push(item.labelCode)
             }
-            console.log('this.checkList------------>', this.checkList);
+            this.$nextTick(() => {
                 this.getData()
+            })
         },
         // 获取列表
-        getData(parentId = '') {
-            this.allData = [];
-            let postData = {
-                parentId: parentId,
-                cameraName: this.cameraName,
+        getData() {
+            let postData = Object.assign({
                 checkStatus: 1,
-                pageNum: this.pageData.page,
-                pageSize: this.pageData.limit,
                 gpsX: '',
                 gpsY: '',
                 radius: '',
                 labelCodes: this.checkList.join(),
-            }
+            }, this.searchData);
             return new Promise((resolve, reject) => {
                 this.$http.get('/api/project/selectByParentIdNew', { params: postData }).then(res => {
                     resolve(res)
@@ -285,10 +296,9 @@ export default {
                     this.$message.error(err);
                 })
             })
-
         },
         changeParentId(parentId) {
-            console.log('parentId------------>', parentId);
+            this.searchData.parentId = parentId;
             this.getData(parentId)
         },
         confirmSubmitHandle() {
@@ -305,6 +315,7 @@ export default {
                     })
                 }
             })
+
             this.$emit('update', {
                 title: this.type,
                 list: this.selectedArray.map(v => v.idtCameraChannel)
@@ -312,16 +323,12 @@ export default {
         },
         close() {
             this.showModal = false;
-            this.cameraName = ''
+            this.searchData.cameraName = ''
             this.selectedArray = [];
-            this.allData = [];
-            this.transferData = [];
             this.$emit('closeModal');
         },
         clear() {
-            this.cameraName = ''
-            this.selectedArray = [];
-            this.getData()
+            this.changeBtn('视频资源')
         },
     }