问题修复

ZZJ

2021-11-09 ccee429d379e0108b7445f72ade8d97c110a6fb3

 src/pages/shuohuangMonitorAnalyze/components/lkgManage.vue

@@ -1,13 +1,23 @@
<template>
  <div class="lkg-manage">
    <div class="import-btn">
      <label>上传LKG数据文件</label>
      <el-button
      <!-- <label> : </label> -->
      <!-- <el-button
        size="mini"
        type="primary"
        @click="uploadDirectoryTrigger"
        :loading="uploading"
      >点击上传</el-button>
        >上传 LKJ 数据文件</el-button
      > -->
      <el-tooltip class="item" effect="dark" content="上传 LKJ 数据文件" placement="bottom">
      <span
        class="icon iconfont"
        @click="uploadDirectoryTrigger"
        style="font-size: 34px; color: #92abd1"
        >&#xe7b0;</span
      >
    </el-tooltip>
      
      <input
        ref="directoryInput"
        @change="importDirectory"
@@ -17,49 +27,176 @@
        multiple
      />
    </div>

    <div class="lkg-list">
      <el-table
        :data="lkgData"
        stripe
        style="width: 100%"
        :header-cell-style="{
          background: '#2D52D7',
          color: '#fff',
          height: '50px',
        }"
      >
        <el-table-column
          type="index"
          width="120"
          label="序号"
        ></el-table-column>
        <el-table-column prop="CarNumber" label="机车号"></el-table-column>
        <el-table-column prop="TrainNumber" label="车次"></el-table-column>
        <el-table-column prop="Driver1" label="司机"></el-table-column>
        <el-table-column prop="Driver2" label="副司机"></el-table-column>
        <el-table-column prop="StartTime" label="开始时间"></el-table-column>
        <el-table-column prop="EndTime" label="结束时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="icon-wrap">
              <span class="iconfont icon del-icon" @click="delLKG(scope.row)"
                >&#xe775;</span
              >
            </div>
            <!-- <i class="el-icon-delete del-icon" ></i> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { uploadLKG } from "@/api/shuohuang"
import { uploadLKG, getLKGData, delLKGData } from "@/api/shuohuang";

export default {
  data() {
    return {
      uploading: false
    }
      uploading: false,
      lkgData: [],
    };
  },
  mounted() {
    this.fetchLKGData();
  },
  methods: {
    uploadDirectoryTrigger() {
      this.$refs['directoryInput'].click();
      this.$refs["directoryInput"].click();
    },
    importDirectory() {
      let _this = this;
      _this.uploading = true;
      let formData = new FormData;
      for (let i = 0; i < this.$refs['directoryInput'].files.length; i++) {
        formData.append('files', this.$refs['directoryInput'].files[i])
      let formData = new FormData();
      for (let i = 0; i < this.$refs["directoryInput"].files.length; i++) {
        formData.append("files", this.$refs["directoryInput"].files[i]);
      }

      uploadLKG(formData).then(res => {
        if (res && res.success) {
          this.$message.success("上传成功")
        }
        _this.uploading = false;
      }).catch(err => {
        this.$message.warning("上传失败", err)
        _this.uploading = false;
      })
      uploadLKG(formData)
        .then((res) => {
          if (res && res.success) {
            this.$message.success("上传成功");
          }
          _this.uploading = false;
          this.fetchLKGData();
        })
        .catch((err) => {
          this.$message.warning("上传失败", err);
          _this.uploading = false;
        });
    },
  }
}
    fetchLKGData() {
      getLKGData().then((rsp) => {
        if (rsp && rsp.success) {
          this.lkgData = rsp.data;
        }
      });
    },
    delLKG(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delLKGData({ id: row.ID })
            .then((rsp) => {
              if (rsp && rsp.success) {
                this.$message.success("删除成功");
              } else {
                this.$message.warning("删除失败");
              }

              this.fetchLKGData();
            })
            .catch((err) => {
              this.$message.warning("删除失败");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss">
.lkg-manage {
  background: #fff;
  padding: 25px 33px;
  box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
  border-radius: 10px;
  .import-btn {
    text-align: left;
    margin: 10px 20px;
    margin-bottom: 10px;
    span {
      cursor: pointer;
    }
    button {
      span {
        color: #fff;
      }
    }
  }

  .lkg-list {
    // margin: 10px 20px;
    .el-table--striped
      .el-table__body
      tr.el-table__row--striped
      td.el-table__cell {
      background: #f4f6f9;
    }
    .el-table__row > td {
      border: none;
    }
    .el-table th.is-leaf {
      border: none;
    }
    .el-table {
      margin-top: 15px;
      border: none;
    }
    th.el-table__cell > .cell {
      color: #fff;
    }
  }
  .icon-wrap {
    background: #9dabc1;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    text-align: center;
    .del-icon {
      color: #fff;
      font-size: 21px;
      cursor: pointer;
    }
  }
  .icon-wrap:hover {
    background: #d94141;
  }
}
</style>