cac-fronted/src/views/icdConfig/colDialog.vue

<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="success"
                @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;
          }
          .el-link.el-link--success {
            margin-right: 14px;
          }
        }
      }
    }
  }
}
.innerBox {
  .el-select {
    width: 268px;
  }
}
</style>