服务部署和表单编辑

src/components/SimpleTable/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="table-wrapper">
-    <el-table ref="table" v-el-table-infinite-scroll="load" :data="dealedTableData" :header-cell-class-name="headerCellClass" :row-class-name="rowClass" :cell-class-name="cellClass" :span-method="tableSpanMethod" :show-summary="showSummary" :summary-method="tableSummaryMethod" :height="height" stripe fit border @selection-change="handleSelectionChange" @cell-click="cellClickHandler">
+    <el-table ref="table" v-el-table-infinite-scroll="load" :data="dealedTableData" :header-cell-class-name="headerCellClass" :row-class-name="rowClass" :cell-class-name="cellClass" :span-method="tableSpanMethod" :show-summary="showSummary" :summary-method="tableSummaryMethod" :height="height" stripe fit border @select="handleSelectionChange" @cell-click="cellClickHandler">
       <el-table-column v-if="selected" type="selection" width="55">
       </el-table-column>
       <el-table-column v-for="col in filteredTableCols" :key="col.pagecode" :prop="col.pagecode" :label="col.pagename" :width="col.displaywidth" :show-overflow-tooltip="showOverflowTooltip" :formatter="tableFormatter">
@@ -53,6 +53,14 @@ export default {
       type: Array,
       default: () => []
     },
+    selectedDatas: {
+      type: Array,
+      default: () => []
+    },
+    selectedCheck: {
+      type: Object,
+      default: () => new Object()
+    },
     data: {
       type: Array,
       default: () => []
@@ -148,6 +156,19 @@ export default {
       },
       deep: true
     },
+    selectedDatas: {
+      handler (rows) {
+        this.$refs.table.clearSelection()
+        if (rows) {
+          this.$nextTick(() => {
+            rows.forEach(row => {
+              this.$refs.table.toggleRowSelection(row)
+            })
+          })
+        }
+      },
+      deep: true
+    },
     dealedTableData: {
       handler (arr) {
         const spanArr = []
@@ -320,6 +341,11 @@ export default {
     },
     //表格-勾选
     handleSelectionChange (val) {
+      if (!Object.keys(this.selectedCheck).length) {
+        this.$refs.table.clearSelection()
+        this.$message.error('请选中容器后再操作')
+        return
+      }
       this.$emit('handleSelectionChange', val)
     }
   }

src/components/publicPageForm/index.vue

@@ -25,6 +25,9 @@
             <template v-else-if="fromDataType(item.datatype) == 'PASSWORD'">
               <el-input show-password v-model="tableForm[item.pagecode]"></el-input>
             </template>
+            <template v-else-if="fromDataType(item.datatype) == 'UNPASSWORD'">
+              <el-input show-password v-model="tableForm[item.pagecode]"></el-input>
+            </template>
             <template v-else-if="fromDataType(item.datatype) == 'UPLOAD'">
               <upload-item :id="index" :base-img="tableForm[item.pagecode]" ref="upload" />
             </template>
@@ -219,13 +222,14 @@ export default {
     setPassters (array = []) {
       const passitem = this.formItemArr.filter(item => item.pagecode == 'passparameters')
       if (passitem?.length) {
+        const ndata = _.cloneDeep(array)
         const passitemkey = passitem[0]
         passitemkey.datatype = 'DROP'
-        array.map(item => {
+        ndata.map(item => {
           item.dropdownlistid = item.pageconfigurationid
           item.dropdownlistlabel = item.pagename
         })
-        this.tableOptions['passparameters'] = array
+        this.tableOptions['passparameters'] = ndata
       }
     },
     formatData (returnData) {

src/views/tablePage/index.vue

@@ -11,7 +11,7 @@
         </div>
       </template>
       <div :class="dataFlag ? 'tableAuto' : treeData.length ? 'tableSacle' : 'tableAuto'" class="TablePage_content_right">
-        <PublicPageTable :loading="loading" :selected="selected" :table-cols="tableCols" :table-btns="authBtns" :data="tableData" :header-cell-class-name="headerCellClass" :row-class-name="rowClass" :cell-class-name="cellClass" :formatter="tableFormatter" show-summary @mounted="tableMountedHandler" @load="load" @cell-click="cellClickHandler" @handleDetail="handleDetail" @handleEdit="handleEdit" @handleOther="handleOther" @handleRemove="handleRemove" @handleSelectionChange="handleSelectionChange" />
+        <PublicPageTable :loading="loading" :selected="selected" :table-cols="tableCols" :table-btns="authBtns" :data="tableData" :header-cell-class-name="headerCellClass" :row-class-name="rowClass" :cell-class-name="cellClass" :formatter="tableFormatter" :selectedDatas="selectedDatas" :selectedCheck="selectedDataCheck" show-summary @mounted="tableMountedHandler" @load="load" @cell-click="cellClickHandler" @handleDetail="handleDetail" @handleEdit="handleEdit" @handleOther="handleOther" @handleRemove="handleRemove" @handleSelectionChange="handleSelectionChange" />
       </div>
     </div>
     <div class="TablePage_dialog">
@@ -97,7 +97,10 @@ export default {
       tableKey: null,//表格主键
       depMath: 0,
       selected: 0, //是否勾选
-      selectedDatas: [], //勾选数据
+      selectedDatas: [], //回显勾选的数据
+      selectedDatasCath: [],//回显数据缓存
+      selectedDataAlls: [], //勾选数据
+      selectedDataCheck: {}, //勾选树-选中
       triggerserviceid: null, //勾选后查询的serviceid
     }
   },
@@ -229,7 +232,9 @@ export default {
     //获取tree点击
     treeNodeClick (data) {
       if (this.selected) {
-        this.treeCheckQuery(data)
+        const nrow = _.cloneDeep(data)
+        this.selectedDataCheck = nrow
+        this.treeCheckQuery(nrow)
       } else {
         const values = Object.values(data)
         const filterItem = this.formatDefault(this.treeParameters, data)
@@ -245,6 +250,8 @@ export default {
       if (!Object.keys(filterItem).length) return
       const itemFilter = values.includes(-1) || values.includes('全部') ? { 1: 1 } : filterItem
       const datacontent = { filter: itemFilter }
+      this.loading = true
+      this.selectedDataAlls = []
       try {
         const { code, returnData } = await Query({
           page: 1,
@@ -254,13 +261,24 @@ export default {
           size: 9999
         });
         if (code == 0) {
-          this.selectedDatas = [...returnData]
+          const datas = []
+          this.tableData.filter(item => {
+            [...returnData].forEach(pt => {
+              if (item['serviceid'] == pt['serviceid']) {
+                datas.push(item)
+              }
+            })
+          })
+          this.selectedDatas = [...datas]
+          this.selectedDatasCath = [...returnData]
+          this.selectedDataAlls.push([...datas])
         } else {
           this.$message.error("获取表格数据失败")
         }
       } catch (error) {
         this.$message.error("获取表格数据失败")
       }
+      this.loading = false
     },
     //格式化传递参数数据
     formatDefault (item, data = {}) {
@@ -359,7 +377,6 @@ export default {
         nrow.passparameters = this.resPassters(row)
       }
       this.tableForm = nrow
-
     },
     //表格-其他类型按钮操作
     handleOther (row, auth) {
@@ -420,7 +437,74 @@ export default {
     },
     //表格-勾选
     handleSelectionChange (val) {
-      console.log(val)
+      this.selectedDataAlls.push([...val])
+      const ndatas = _.cloneDeep(this.selectedDataAlls)
+      if (ndatas.length == 1) {
+        this.sendCheckData('add', ndatas[0])
+      } else {
+        const [nitems1, nitems2] = [ndatas.at(-1), ndatas.at(-2)]
+        if (nitems1.length > nitems2.length) {
+          const res = this.findRepetData(nitems1, nitems2)
+          this.sendCheckData('add', res)
+        } else {
+          const res = this.findRepetData(nitems1, nitems2)
+          this.sendCheckData('del', res)
+        }
+      }
+    },
+    findRepetData (nitems1, nitems2) {
+      const key = 'serviceid'
+      const res = [...nitems1, ...nitems2].filter(
+        (item) =>
+          !(
+            nitems1.some((p) => item[key] == p[key]) &&
+            nitems2.some((c) => item[key] == c[key])
+          )
+      )
+      return res
+    },
+    //发送新增编辑删除数据
+    sendCheckData (types, data, key = 'serviceid') {
+      const event = types == 'add' ? 1 : types == 'edit' ? 2 : 3
+      const querys = []
+      const items = _.cloneDeep(data)
+      const { serviceid, servicename } = items[0]
+      const { containerid, containercode, containername } = this.selectedDataCheck
+      const pitem = {
+        serviceid,
+        servicename,
+        containerid,
+        containercode,
+        containername
+      }
+      const params = {
+        serviceid: this.triggerserviceid,
+        datacontent: formatChange(pitem, event, key),
+        event,
+      }
+      event == 1 ? querys.push(newData(params)) : querys.push(moveData(params))
+      this.getAnscyData(querys)
+    },
+    //获取异步数据
+    async getAnscyData (allResult) {
+      if (!allResult.length) return
+      this.loading = true
+      const results = await Promise.allSettled(allResult)
+      results.map((item) => {
+        const { status, value } = item
+        if (status == 'fulfilled') {
+          const { code } = value
+          if (code == 0) {
+            this.treeCheckQuery(this.selectedDataCheck)
+            this.$message.success('操作成功')
+          } else {
+            this.$message.error('操作失败')
+          }
+        } else {
+          this.$message.error('网络错误')
+        }
+      })
+      this.loading = false
     },
     // 新增/编辑-取消
     submitClickClose (formName) {
@@ -679,19 +763,21 @@ export default {
         const { code, returnData } = await Query(parmas);
         if (code == 0) {
           if (returnData.length === 0) {
-            this.page--;
-            this.noMore = true;
+            this.page--
+            this.noMore = true
           }
-          this.tableData.push(...returnData);
+          this.tableData.push(...returnData)
         } else {
-          this.page--;
-          this.$message.error("获取表格数据失败");
+          this.page--
+          this.$message.error("获取表格数据失败")
         }
       } catch (error) {
-        this.page--;
+        this.page--
+      }
+      if (this.selected) {
+        this.noMore = true
       }
-      // this.noMore = true;
-      this.loading = false;
+      this.loading = false
     }
   }
 }