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

<template>
  <div class="icdConfigBox">
    <div class="configHead">
      <div class="upgradeBox">
        <h3 class="lableBox">文件上传：</h3>
        <el-upload
          class="upload-demo"
          ref="upload"
          action="/cac-api/iecserver/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>
    <div class="iedContain">
      <div class="icdTableBox" v-if="icdTableData.length !== 0">
        <el-table
          v-loading="icdLoading"
          :data="icdTableData"
          stripe
          border
          style="width: 100%"
          height="calc(100% - 40px)"
        >
          <el-table-column prop="filename" label="文件名称"> </el-table-column>
          <el-table-column prop="md5" label="md5"> </el-table-column>
          <el-table-column prop="start" label="是否启用">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.start == 1">启用</el-tag>
              <el-tag type="danger" v-else>未启用</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" class-name="editClass">
            <template slot-scope="scope">
              <el-link
                type="danger"
                @click="deleteServer(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>
  </div>
</template>
<script>
import { ieclistFileApi, serverDeleteApi } from "@/utils/api/index";

export default {
  components: {},
  data() {
    return {
      fileList: [], //上传列表
      reportData: {},
      icdTableData: [], //表格数据
      icdLoading: true,
    };
  },
  mounted() {
    this.geticdList(); //获取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.geticdList(); //获取iedName列表
      } else {
        this.$message({
          duration: 1500,
          showClose: true,
          message: res.errorMsg,
          type: "error",
        });
        this.$refs.upload.clearFiles();
      }
    },
    //获取ied左侧列表
    geticdList() {
      ieclistFileApi()
        .then((res) => {
          console.log(res);
          this.icdTableData = res.data;
          this.icdLoading = false;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //删除服务器
    deleteServer(row) {
      serverDeleteApi({ fileId: row.id })
        .then((res) => {
          if (res.success) {
            console.log(res);
            this.geticdList();
          } else {
            this.$message({
              duration: 1500,
              showClose: true,
              type: "error",
              message: res.errorMsg,
            });
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
  },
};
</script>
<style lang="less">
.icdConfigBox {
  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>