配置tablename和colname

src/utils/api/index.js

@@ -102,6 +102,15 @@ export function colListApi(data) {
     },
   });
 }
+//更新更新ICD类型属性配置
+
+export function icdupdateAttApi(data) {
+  return request({
+    url: "/icdconfig/updateAtt",
+    method: "post",
+    data,
+  });
+}
 
 //设备台账管理列表api
 //变电站相关接口

src/views/icdConfig/colDialog.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="colConfig">
+    <el-dialog
+      class="colDialogBox"
+      title="col配置"
+      :visible.sync="colDialogshow"
+      width="1020px"
+    >
+      <div class="colContain">
+        <el-table
+          v-loading="colLoading"
+          :data="attTableList"
+          stripe
+          border
+          style="width: 100%"
+          height="calc(100% - 0px)"
+        >
+          <el-table-column prop="doName" label="doName"> </el-table-column>
+          <el-table-column prop="lastName" label="lastName"> </el-table-column>
+          <el-table-column prop="colName" label="colName">
+            <template slot-scope="scope">
+              <el-select
+                v-show="scope.$index == cellIndex"
+                v-model="colName"
+                placeholder="请选择"
+                size="mini"
+              >
+                <el-option
+                  v-for="item in colOptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                ></el-option>
+              </el-select>
+              <span v-show="scope.$index != cellIndex">{{
+                scope.row.colName
+              }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" width="300" class-name="editClass">
+            <template slot-scope="scope">
+              <el-link
+                v-if="scope.$index != cellIndex"
+                type="primary"
+                @click="handlecolEditClick(scope)"
+                size="small"
+                icon="el-icon-document"
+              >
+                colName配置
+              </el-link>
+              <el-link
+                v-else
+                type="primary"
+                @click="handlecolSaveClick(scope)"
+                size="small"
+                icon="el-icon-document"
+              >
+                保存
+              </el-link>
+              <!-- <el-link
+                type="primary"
+                @click="handlecolEditClick(scope.row)"
+                size="small"
+                icon="el-icon-document"
+                >修改</el-link
+              > -->
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="colDialogshow = false"
+          >确 定</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { colListApi, icdupdateAttApi } from "@/utils/api/index";
+export default {
+  props: ["colChildData"],
+  data() {
+    return {
+      colDialogshow: false,
+      colTableData: {},
+      colLoading: false,
+      innerVisible: false,
+      colName: "",
+      colOptions: [],
+      colData: "",
+      cellIndex: null,
+      attTableList: [],
+      colIndex: 0,
+    };
+  },
+  watch: {
+    colChildData: {
+      handler(newVal, oldVal) {
+        if (newVal && newVal.attList) {
+          console.log("gaibian", newVal);
+          this.attTableList = newVal.attList;
+        }
+      },
+      immediate: true,
+      deep: true, //deep，默认值是 false，代表是否深度监听。
+    },
+  },
+  mounted() {},
+  methods: {
+    //修改
+    handlecolEditClick({ $index, row }) {
+      this.colName = "";
+      this.cellIndex = $index;
+      this.colData = row;
+    },
+    //保存
+    handlecolSaveClick({ row }) {
+      icdupdateAttApi({
+        colName: this.colName,
+        id: row.id,
+      })
+        .then((res) => {
+          if (res.success) {
+            this.cellIndex = null;
+            console.log(this.colTableData);
+            this.$parent.geticdList(this.colTableData.iedName, this.colIndex);
+          }
+        })
+        .catch((err) => {});
+    },
+
+    //获取colName
+    getColList() {
+      this.colOptions = [];
+      colListApi({ tableName: this.colTableData.tableName })
+        .then((res) => {
+          console.log(res);
+          this.colOptions = res.data;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    display(val, index) {
+      this.colDialogshow = true;
+      this.colTableData = val;
+      this.attTableList = val.attList;
+      this.colIndex = index;
+      console.log(val, index);
+      this.getColList();
+    },
+    hide() {
+      this.colDialogshow = false;
+    },
+  },
+};
+</script>
+<style lang="less">
+.colConfig {
+  .colDialogBox {
+    .colContain {
+      height: 540px;
+      .el-table {
+        .editClass {
+          .el-link.el-link--primary {
+            margin-right: 14px;
+          }
+        }
+      }
+    }
+  }
+}
+.innerBox {
+  .el-select {
+    width: 268px;
+  }
+}
+</style>

src/views/icdConfig/index.vue

@@ -53,18 +53,56 @@
           <el-table-column prop="ldeviceInst" label="ldeviceInst">
           </el-table-column>
           <el-table-column prop="lnClass" label="lnClass"> </el-table-column>
-          <el-table-column prop="doName" label="doName"> </el-table-column>
-          <el-table-column prop="tableName" label="tableName"></el-table-column>
-          <el-table-column prop="colName" label="colName"> </el-table-column>
+          <!-- <el-table-column prop="doName" label="doName"> </el-table-column> -->
+          <el-table-column prop="tableName" label="tableName">
+            <template slot-scope="scope">
+              <el-select
+                v-show="scope.$index == cellIndex"
+                v-model="tableName"
+                placeholder="请选择"
+                @change="changeTablename"
+                size="mini"
+              >
+                <el-option
+                  v-for="item in tableOptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                ></el-option>
+              </el-select>
+              <span v-show="scope.$index != cellIndex">{{
+                scope.row.tableName
+              }}</span>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column prop="colName" label="colName"> </el-table-column> -->
 
-          <el-table-column label="操作" width="300" class-name="editClass">
+          <el-table-column label="操作" width="400" class-name="editClass">
             <template slot-scope="scope">
               <el-link
+                v-if="scope.$index != cellIndex"
+                type="primary"
+                @click="handleEditClick(scope)"
+                size="small"
+                icon="el-icon-document"
+              >
+                tableName配置
+              </el-link>
+              <el-link
+                v-else
                 type="primary"
-                @click="handleEditClick(scope.row)"
+                @click="handleSaveClick(scope)"
                 size="small"
                 icon="el-icon-document"
-                >修改</el-link
+              >
+                保存
+              </el-link>
+              <el-link
+                type="primary"
+                @click="handlecolConfigClick(scope)"
+                size="small"
+                icon="el-icon-document"
+                >colName配置</el-link
               >
               <el-link
                 type="danger"
@@ -78,59 +116,7 @@
         </el-table>
       </div>
     </div>
-    <el-dialog
-      class="editDialogBox"
-      title="修改配置"
-      :visible.sync="editDialogshow"
-      width="520px"
-    >
-      <el-form
-        label-position="left"
-        ref="formInfo"
-        label-width="104px"
-        :rules="rules"
-        :model="formData"
-      >
-        <el-form-item label="tableName：" prop="tableName">
-          <el-select
-            v-model="formData.tableName"
-            placeholder="请选择"
-            @change="changeTablename"
-          >
-            <el-option
-              v-for="item in tableOptions"
-              :key="item"
-              :label="item"
-              :value="item"
-            ></el-option>
-          </el-select>
-          <!-- <el-input
-            placeholder="请输入tableName"
-            v-model="formData.tableName"
-            autocomplete="off"
-          ></el-input> -->
-        </el-form-item>
-
-        <el-form-item label="colName：" prop="colName">
-          <el-select v-model="formData.colName" placeholder="请选择">
-            <el-option
-              v-for="item in colOptions"
-              :key="item"
-              :label="item"
-              :value="item"
-            ></el-option>
-          </el-select>
-          <!-- <el-input
-            placeholder="请输入colName"
-            v-model="formData.colName"
-          ></el-input> -->
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="editDialogshow = false">取 消</el-button>
-        <el-button type="primary" @click="submitForm()">确 定</el-button>
-      </div>
-    </el-dialog>
+    <colDialog ref="colDialogRef" :colChildData="colChildData"></colDialog>
   </div>
 </template>
 <script>
@@ -141,18 +127,13 @@ import {
   icdUpdateApi,
   icdDeleteApi,
   tableListApi,
-  colListApi,
 } from "@/utils/api/index";
+import colDialog from "./colDialog.vue";
 export default {
+  components: {
+    colDialog,
+  },
   data() {
-    var validateInput = (rule, value, callback) => {
-      const reg = /^[a-zA-Z0-9_]+$/; // 允许英文、数字和下划线
-      if (!reg.test(value)) {
-        callback(new Error("请只输入英文、数字和下划线"));
-      } else {
-        callback();
-      }
-    };
     return {
       fileList: [], //上传列表
       reportData: {},
@@ -162,29 +143,12 @@ export default {
       icdTableData: [], //表格数据
       icdLoading: true,
       editDialogshow: false,
-      formData: {}, //需要修改的数据
-      rules: {
-        tableName: [
-          {
-            required: true,
-
-            validator: validateInput,
-            trigger: "blur",
-          },
-        ],
-
-        colName: [
-          {
-            required: true,
-
-            validator: validateInput,
-            trigger: "blur",
-          },
-          // { min: 6, max: 8, message: "请输入6-8位字符", trigger: "blur" },
-        ],
-      },
+      tableName: "",
+      currentData: "", //选中的数据
       tableOptions: [],
-      colOptions: [],
+      tableSelectShow: false,
+      cellIndex: null,
+      colChildData: "",
     };
   },
   mounted() {
@@ -236,6 +200,7 @@ export default {
     },
     //通过iedname 获取列表
     handleClick(item, index) {
+      this.cellIndex = null;
       this.selectedIndex = index;
       console.log(item, index);
       this.iedNameTitle = item;
@@ -255,23 +220,10 @@ export default {
         });
     },
     changeTablename(val) {
-      this.formData.tableName = val;
-      this.getColList();
-      this.formData.colName = "";
-    },
-    getColList() {
-      this.colOptions = [];
-      colListApi({ tableName: this.formData.tableName })
-        .then((res) => {
-          console.log(res);
-          this.colOptions = res.data;
-        })
-        .catch((err) => {
-          console.log(err); //代码错误、请求失败捕获
-        });
+      this.tableName = val;
     },
     //获取icd
-    geticdList(val) {
+    geticdList(val, index) {
       this.icdTableData = [];
       icdListApi({
         iedName: val,
@@ -280,6 +232,8 @@ export default {
           console.log(res);
           this.icdLoading = false;
           this.icdTableData = res.data;
+          this.colChildData = res.data[index];
+          console.log("我是更新后的", this.colChildData);
         })
         .catch((err) => {
           this.icdLoading = false;
@@ -287,27 +241,27 @@ export default {
         });
     },
     //更新icd类型
-    handleEditClick(val) {
-      this.formData = { ...val };
-      this.editDialogshow = true;
+    handleEditClick({ $index, row }) {
+      this.tableName = "";
+      this.tableSelectShow = true;
+      this.cellIndex = $index;
     },
-    submitForm() {
-      this.$refs.formInfo.validate((valid) => {
-        if (valid) {
-          icdUpdateApi(this.formData)
+    //保存tableName
+    handleSaveClick({ row }) {
+      this.cellIndex = null;
+      icdUpdateApi({
+        tableName: this.tableName,
+        id: row.id,
+      })
         .then((res) => {
           if (res.success) {
-                this.editDialogshow = false;
-                this.geticdList(this.formData.iedName);
+            this.cellIndex = null;
+            this.geticdList(row.iedName);
           }
         })
         .catch((err) => {});
-        } else {
-          console.log("error submit!!");
-          return false;
-        }
-      });
     },
+
     //删除icd类型配置
     handleDeleteClick(val) {
       console.log(val);
@@ -335,6 +289,21 @@ export default {
         })
         .catch(() => {});
     },
+    //获取col 配置
+    handlecolConfigClick({ $index, row }) {
+      if (row.tableName == null || row.tableName == "") {
+        this.$message({
+          duration: 1500,
+          showClose: true,
+          message: "请先配置tableName",
+          type: "success",
+        });
+        // this.handleEditClick(val);
+      } else {
+        console.log(row, $index);
+        this.$refs.colDialogRef.display(row, $index);
+      }
+    },
   },
 };
 </script>