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

<template>
  <div class="icdConfig">
    <div class="configHead">
      <div class="upgradeBox">
        <h3 class="lableBox">文件上传：</h3>
        <el-upload
          class="upload-demo"
          ref="upload"
          action="/cac-api/icdconfig/upload"
          :limit="1"
          :file-list="fileList"
          :data="reportData"
          :auto-upload="false"
          :on-success="handleAvatarSuccess"
          @before-upload="beforeAvatarUpload"
        >
          <el-button slot="trigger" size="small" type="primary"
            >选取文件</el-button
          >
        </el-upload>
      </div>
      <el-button
        class="uploadBtn"
        size="small"
        type="primary"
        @click="submitUpload"
        >上传到服务器</el-button
      >
      <div class="grouprpt">
        <el-button
          class="clearBtn"
          size="small"
          type="primary"
          @click="clearAllicd"
          >清空文件和配置</el-button
        >
        <el-button
          class="clearBtn"
          size="small"
          type="primary"
          @click="creatRpt"
          >生成rptparamindex</el-button
        >
      </div>
    </div>
    <div class="iedContain">
      <div class="leftMenu" v-if="iedListData.length !== 0">
        <p
          class="iedame"
          v-for="(item, index) in iedListData"
          :key="index"
          :class="{ 'is-selected': selectedIndex === index }"
          @click="handleClick(item, index)"
        >
          <i class="el-icon-document"></i>{{ item }}
        </p>
      </div>
      <div class="leftMenu" v-else>
        <el-empty description="请上传文件"></el-empty>
      </div>
      <div class="icdTableBox" v-if="iedListData.length !== 0">
        <h3>{{ iedNameTitle }}</h3>
        <el-table
          v-loading="icdLoading"
          :data="icdTableData"
          stripe
          border
          style="width: 100%"
          height="calc(100% - 40px)"
        >
          <el-table-column prop="iedName" label="ied名称"> </el-table-column>
          <el-table-column prop="ldeviceInst" label="设备类型">
          </el-table-column>
          <el-table-column prop="lnClass" label="ln类型(ln备注)">
            <template slot-scope="scope">
              <span>{{ scope.row.lnClass }} ({{ scope.row.lnDesc }})</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="doName" label="doName"> </el-table-column> -->
          <el-table-column prop="tableName" label="表名">
            <template slot-scope="scope">
              <el-select
                filterable
                v-show="scope.$index == cellIndex"
                v-model="tableName"
                placeholder="请选择"
                @change="changeTablename"
                size="mini"
              >
                <el-option
                  v-for="item in tableOptions"
                  :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>
              <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="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"
              >
                配置表名
              </el-link>
              <el-link
                v-else
                type="success"
                @click="handleSaveClick(scope)"
                size="small"
                icon="el-icon-document"
              >
                保存
              </el-link>
              <el-link
                :disabled="disableFlag && scope.row.tableName == ''"
                type="primary"
                @click="handlecolConfigClick(scope)"
                size="small"
                icon="el-icon-document"
                >配置字段名</el-link
              >
              <el-link
                type="danger"
                @click="handleDeleteClick(scope.row)"
                size="small"
                icon="el-icon-delete"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="icdTableBox" v-else>
        <el-empty description="暂无数据"></el-empty>
      </div>
    </div>
    <colDialog ref="colDialogRef" :colChildData="colChildData"></colDialog>
  </div>
</template>
<script>
import {
  iedListApi,
  icdListApi,
  icdUploadApi,
  icdUpdateApi,
  icdDeleteApi,
  tableListApi,
  icdclearAllApi,
  generateRptApi,
} from "@/utils/api/index";
import colDialog from "./colDialog.vue";
export default {
  components: {
    colDialog,
  },
  data() {
    return {
      fileList: [], //上传列表
      reportData: {},
      iedListData: [], //左侧ied列表
      selectedIndex: 0, //默认选中第一个
      iedNameTitle: "", //标题
      icdTableData: [], //表格数据
      icdLoading: true,
      editDialogshow: false,
      tableName: "",
      currentData: "", //选中的数据
      tableOptions: [],
      tableSelectShow: false,
      cellIndex: null,
      colChildData: "",
      disableFlag: false,
    };
  },
  mounted() {
    this.getiedList(); //获取iedName列表
  },
  methods: {
    //点击升级确定
    beforeAvatarUpload(file) {
      console.log(this.reportData.title);
      console.log(file);
    },
    //上传apk
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleAvatarSuccess(res, file) {
      console.log(res);
      if (res.success) {
        this.$message({
          duration: 1500,
          showClose: true,
          message: "文件上传成功",
          type: "success",
        });

        this.$refs.upload.clearFiles();
        this.getiedList(); //获取iedName列表
      } else {
        this.$message({
          duration: 1500,
          showClose: true,
          message: res.errorMsg,
          type: "error",
        });
        this.$refs.upload.clearFiles();
      }
    },
    //获取ied左侧列表
    getiedList() {
      iedListApi()
        .then((res) => {
          console.log(res);
          this.iedListData = res.data;
          this.handleClick(res.data[0], 0);
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //通过iedname 获取列表
    handleClick(item, index) {
      this.cellIndex = null;
      this.selectedIndex = index;
      console.log(item, index);
      this.iedNameTitle = item;
      this.icdLoading = true;
      this.geticdList(item);
      this.getTableList();
    },
    //获取修改的tableList和colLost
    getTableList() {
      tableListApi()
        .then((res) => {
          console.log(res);
          this.tableOptions = res.data;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    changeTablename(val) {
      this.tableName = val;
    },
    //获取icd
    geticdList(val, index) {
      this.icdTableData = [];
      icdListApi({
        iedName: val,
      })
        .then((res) => {
          console.log(res);
          this.icdLoading = false;
          this.icdTableData = res.data;
          this.colChildData = res.data[index];
          console.log("我是更新后的", this.colChildData);
        })
        .catch((err) => {
          this.icdLoading = false;
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //更新icd类型
    handleEditClick({ $index, row }) {
      // this.tableName = "";
      this.tableSelectShow = true;
      this.tableName = row.tableName;
      this.cellIndex = $index;
      this.disableFlag = true;
    },
    //保存tableName
    handleSaveClick({ row }) {
      this.cellIndex = null;
      icdUpdateApi({
        tableName: this.tableName,
        id: row.id,
      })
        .then((res) => {
          if (res.success) {
            this.cellIndex = null;
            this.geticdList(row.iedName);
            this.disableFlag = false;
          }
        })
        .catch((err) => {});
    },

    //删除icd类型配置
    handleDeleteClick(val) {
      console.log(val);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          icdDeleteApi({
            id: val.id,
          })
            .then((res) => {
              console.log(res);
              if (res.success) {
                this.$message({
                  duration: 1500,
                  showClose: true,
                  message: "文件删除成功",
                  type: "success",
                });
                this.geticdList(val.iedName);
              } else {
                this.$message({
                  duration: 1500,
                  showClose: true,
                  type: "error",
                  message: res.errorMsg,
                });
              }
            })
            .catch((err) => {});
          //this.getactivityList();
        })
        .catch(() => {});
    },
    //获取col 配置
    handlecolConfigClick({ $index, row }) {
      if (row.tableName == null || row.tableName == "") {
        this.$message({
          duration: 1500,
          showClose: true,
          message: "请先配置tableName",
          type: "warning",
        });
        // this.handleEditClick(val);
      } else {
        console.log(row, $index);
        this.$refs.colDialogRef.display(row, $index);
      }
    },
    clearAllicd() {
      this.$confirm(
        "此操作将清除所有客户端和服务端的icd文件和icd绑定配置, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          icdclearAllApi()
            .then((res) => {
              console.log(res);
              if (res.success) {
                this.$message({
                  duration: 1500,
                  showClose: true,
                  message: "文件已全部清除",
                  type: "success",
                });
                this.getiedList();
              } else {
                this.$message({
                  duration: 1500,
                  showClose: true,
                  type: "error",
                  message: res.errorMsg,
                });
              }
            })
            .catch((err) => {});
        })
        .catch(() => {});
    },
    //生成rptparamindex
    creatRpt() {
      generateRptApi()
        .then((res) => {
          console.log(res);
          if (res.success) {
            this.$message({
              duration: 1500,
              showClose: true,
              message: res.data,
              type: "success",
            });
          } else {
            this.$message({
              duration: 1500,
              showClose: true,
              message: res.errorMsg,
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
  },
};
</script>
<style lang="less">
.icdConfig {
  width: calc(100% - 24px);
  overflow-x: hidden;
  background: rgba(8, 9, 36, 0.28);

  box-shadow: inset 0 4px 44px 0 #106cde;
  padding: 0px 12px;
  height: 100%;
  .configHead {
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;

    .upgradeBox {
      display: flex;
      .lableBox {
        font-size: 14px;
        font-weight: normal;
        width: 78px;
      }
      .upload-demo {
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        margin-right: 16px;
        .el-upload-list {
          width: 320px;
          height: 32px;
          line-height: 32px;
          border: 1px solid #dcdfe6;
          background: #fff;
          margin-right: 12px;
          border-radius: 4px;
          .el-upload-list__item {
            transition: none;
            font-size: 14px;
            color: #606266;
            position: relative;
            box-sizing: border-box;
            border-radius: 4px;
            width: 100%;
            height: 32px;
            line-height: 32px;
            margin-top: 0px !important;
            .el-icon-close {
              top: 10px;
            }
          }
        }
      }
    }
    .uploadBtn {
    }
    .grouprpt {
      margin-left: auto;
    }
    // .clearBtn {
    // }
  }
  .iedContain {
    width: 100%;
    height: 100%;
    background: #fff;
    margin-top: 10px;
    height: calc(100% - 60px);
    display: flex;
    .leftMenu {
      width: 200px;
      //padding: 0px 10px 0px 10px;
      height: calc(100% - 2px);
      border: 1px solid #dcdfe6;
      overflow-y: auto;
      .iedame {
        line-height: 28px;
        height: 28px;
        color: #333;
        font-size: 14px;
        padding-left: 10px;
        padding-right: 10px;
        cursor: pointer;
        i {
          margin-right: 4px;
        }
        &:hover {
          // background: #3889cf;
          color: #3889cf;
        }
      }
      .is-selected {
        background: #3889cf;
        color: #fff;
        &:hover {
          color: #fff;
        }
      }
    }
    .el-empty {
      height: 100%;
      .el-empty__image {
        width: 100px;
      }
    }
    .icdTableBox {
      flex: 1;
      min-width: 0;
      margin-left: 12px;
      //border: 1px solid #dcdfe6;
      height: calc(100% - 2px);
      h3 {
        height: 32px;
        line-height: 32px;
        margin-bottom: 8px;
        color: #333;
        font-size: 14px;
      }
      .el-table {
        .editClass {
          .el-link.el-link--primary {
            margin-right: 14px;
          }
          .el-link.el-link--success {
            margin-right: 14px;
          }
        }
      }
    }
  }
  .editDialogBox {
    .el-dialog {
      margin-top: 0 !important;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      .el-select {
        width: 376px;
      }
    }
  }
}
</style>