优化icd配置

src/views/icdConfig/colDialog.vue

@@ -9,6 +9,15 @@
       :close-on-click-modal="false"
     >
       <div class="colContain">
+        <div class="bindBox" v-if="multipleSelection.length > 0">
+          <el-link
+            type="primary"
+            @click="handleBindClick()"
+            size="small"
+            icon="el-icon-connection"
+            >批量配置字段名</el-link
+          >
+        </div>
         <el-table
           v-loading="colLoading"
           :data="attTableList"
@@ -16,7 +25,9 @@
           border
           style="width: 100%"
           height="calc(100% - 0px)"
+          @selection-change="handleSelectionChange"
         >
+          <el-table-column type="selection" width="55"> </el-table-column>
           <el-table-column prop="doName" label="属性(备注)">
             <template slot-scope="scope">
               <span>{{ scope.row.doName }} ({{ scope.row.description }})</span>
@@ -58,6 +69,7 @@
                 @click="handlecolEditClick(scope)"
                 size="small"
                 icon="el-icon-document"
+                :disabled="multipleSelection.length > 0"
               >
                 配置字段名
               </el-link>
@@ -75,12 +87,52 @@
                 @click="handleDeleteClick(scope.row)"
                 size="small"
                 icon="el-icon-delete"
+                :disabled="multipleSelection.length > 0"
                 >删除</el-link
               >
             </template>
           </el-table-column>
         </el-table>
       </div>
+      <el-dialog
+        width="450px"
+        title="批量配置字段名"
+        :visible.sync="innerVisible"
+        append-to-body
+        class="colBlindDialog"
+      >
+        <el-form
+          label-position="left"
+          ref="formInfo"
+          label-width="108px"
+          :rules="rules"
+          :model="formInfo"
+        >
+          <el-form-item label="选择字段名：" prop="colName">
+            <el-select
+              filterable
+              v-model="formInfo.colName"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in colOptions"
+                :key="item.name"
+                :label="item.name"
+                :value="item.name"
+              >
+                {{ item.name
+                }}<span v-if="item.comment != '' && item.comment != null"
+                  >({{ item.comment }})</span
+                >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="innerVisible = false">取 消</el-button>
+          <el-button type="primary" @click="submitSetForm()">确 定</el-button>
+        </div>
+      </el-dialog>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="hide">关 闭</el-button>
       </div>
@@ -94,15 +146,24 @@ export default {
   data() {
     return {
       colDialogshow: false,
+      innerVisible: false,
       colTableData: {},
       colLoading: false,
-      innerVisible: false,
       colName: "",
       colOptions: [],
+      multipleSelection: [],
       colData: "",
       cellIndex: null,
       attTableList: [],
       colIndex: 0,
+      formInfo: {
+        colName: "",
+      },
+      rules: {
+        colName: [
+          { required: true, message: "请选择字段名", trigger: "change" },
+        ],
+      },
     };
   },
   watch: {
@@ -125,6 +186,58 @@ export default {
       this.cellIndex = $index;
       this.colData = row;
     },
+    //多选
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+      //console.log(this.multipleSelection);
+    },
+    handleBindClick() {
+      //点击绑定弹出框 传入选中的值
+      console.log(this.multipleSelection);
+      this.innerVisible = true;
+      //this.$refs.bindingRef.display(this.multipleSelection);
+    },
+    //批量设置
+    submitSetForm() {
+      this.$refs.formInfo.validate((valid) => {
+        console.log(valid);
+        if (valid) {
+          //选中的
+          console.log(this.multipleSelection);
+          let plidlistArr = [];
+          this.multipleSelection.forEach((item) => {
+            // 将每个对象的id字段push到plidlistArr数组中
+            plidlistArr.push(item.id);
+          });
+          icdupdateAttApi({
+            colName: this.formInfo.colName,
+            idList: plidlistArr,
+          })
+            .then((res) => {
+              if (res.success) {
+                this.innerVisible = false;
+                this.cellIndex = null;
+                console.log(this.colTableData);
+                this.$parent.geticdList(
+                  this.colTableData.iedName,
+                  this.colIndex
+                );
+              } else {
+                this.$message({
+                  duration: 1500,
+                  showClose: true,
+                  message: res.errorMsg,
+                  type: "error",
+                });
+              }
+            })
+            .catch((err) => {});
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
     //保存
     handlecolSaveClick({ row }) {
       const idlistArr = [];
@@ -139,6 +252,13 @@ export default {
             this.cellIndex = null;
             console.log(this.colTableData);
             this.$parent.geticdList(this.colTableData.iedName, this.colIndex);
+          } else {
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
           }
         })
         .catch((err) => {});
@@ -215,6 +335,18 @@ export default {
   .colDialogBox {
     .colContain {
       height: 540px;
+      position: relative;
+      .bindBox {
+        position: absolute;
+        background: #fff;
+        height: 38px;
+        width: calc(100% - 62px);
+        z-index: 2;
+        left: 60px;
+        display: flex;
+        align-items: center;
+        top: 1px;
+      }
       .el-table {
         .editClass {
           .el-link.el-link--primary {
@@ -233,4 +365,9 @@ export default {
     width: 268px;
   }
 }
+.colBlindDialog {
+  .el-select {
+    width: 306px;
+  }
+}
 </style>