n20-common-lib 1.2.46 → 1.3.2

package/src/components/NstcG6Components/NstcFileUpload/NstcFileUpload.vue

@@ -0,0 +1,1011 @@
+<!--
+  功能：    新版UI文件上传
+  作者：    lihao
+  创建时间： 2021-02-19
+-->
+<template>
+  <div class="nstc-file-upload">
+    <div class="nstc-file-upload-head" v-if="pattern !== 'text'">
+      <el-button
+          type="primary"
+          v-if="!views"
+          class="nstc-g6-common-btn-1 nstc-g6-common-btn-size-s"
+          :disabled="isDisabled"
+          @click="add"
+      >
+        新增
+      </el-button>
+      <el-button
+          v-if="tableData.length !== 0 && !views"
+          class="nstc-g6-common-btn-1 nstc-g6-common-btn-size-s"
+          @click="batchDownload"
+      >下载
+      </el-button>
+      <el-button
+          v-if="tableData.length !== 0 && !views"
+          class="nstc-g6-common-btn-4 nstc-g6-common-btn-size-s"
+          :disabled="isDisabled"
+          @click="batchDelete"
+      >
+        删除
+      </el-button>
+    </div>
+    <div class="nstc-file-upload-head" v-else>
+      <el-button
+          v-if="tableData.length !== 0 && !views"
+          class="nstc-g6-common-btn-1 nstc-g6-common-btn-size-s"
+          @click="batchDownload"
+      >下载
+      </el-button
+      >
+    </div>
+    <div class="nstc-file-upload-table">
+      <el-form :rules="model.rules" :model="model" ref="form">
+        <el-table :data="tableData" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="50" align="center"/>
+          <el-table-column
+              label="附件类型"
+              align="left"
+              min-width="180"
+          >
+            <template slot-scope="scope">
+              <!-- !textFlag(scope.row.uuid,scope.row.filePath) -->
+              <el-select
+                  v-if="!textFlag(scope.row.uuid, scope.row.filePath) && !views"
+                  v-model="scope.row.fileType"
+              >
+                <el-option
+                    v-for="(item, index) in fileTypeList"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                />
+              </el-select>
+              <span v-else>{{
+                  getFileTypeLabel(scope.row.fileType) || "--"
+                }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+              label="附件名称"
+              align="left"
+              min-width="180"
+          >
+            <template slot-scope="scope">
+              <el-form-item
+                  v-if="!textFlag(scope.row.uuid, scope.row.filePath) && !views"
+                  :prop="'tableData.' + scope.$index + '.attachmentName'"
+                  :rules="model.rules.attachmentName"
+              >
+                <el-input
+                    v-model.trim="scope.row.attachmentName"
+                    placeholder="请输入附件名称"
+                    clearable
+                    :maxlength="attachmentMaxlength"
+                ></el-input>
+              </el-form-item>
+
+              <span v-else>{{ scope.row.attachmentName || "--" }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+              label="附件上传"
+              align="left"
+              min-width="180"
+          >
+            <template slot-scope="scope">
+              <el-upload
+                  v-if="pattern !== 'text' && !views"
+                  :ref="`nstc_g6_common_upload_index_${scope.$index}`"
+                  action=""
+                  v-bind="$attrs"
+                  :auto-upload="false"
+                  :before-upload="
+                  function (file) {
+                    return beforeUpload(file, scope.row);
+                  }
+                "
+                  :on-exceed="handleExceed"
+                  :on-change="
+                  (file, fileLists) => {
+                    handleChange(file, fileLists, scope.$index, scope.row);
+                  }
+                "
+                  :file-list="fileList"
+                  :show-file-list="false"
+                  :http-request="httpRequest"
+                  v-on="$listeners"
+              >
+                <el-input
+                    v-model="scope.row.fileName"
+                    placeholder="请选择附件"
+                    readonly
+                    @click="getUploadIndex(scope.$index)"
+                >
+                  <div slot="suffix" class="input-upload">
+                    <img :src="inputUploadSvg" alt=""/>
+                  </div>
+                </el-input>
+              </el-upload>
+              <span v-else>{{ scope.row.fileName || "--" }}</span>
+            </template>
+            <el-input/>
+          </el-table-column>
+          <el-table-column
+              label="上传时间"
+              prop="time"
+              align="left"
+              width="220px"
+          >
+            <template slot-scope="scope">
+              <span>{{
+                  (scope.row.time || scope.row.createTime) | parseTimeFormat
+                }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+              label="上传人"
+              prop="user"
+              align="left"
+          >
+            <template slot-scope="scope">
+              <span>{{ scope.row.user || scope.row.creator }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+              v-if="pattern !== 'text'"
+              label="上传进度"
+              align="left"
+              width="300px"
+          >
+            <template slot-scope="scope">
+              <div class="nstc-el-progress-box">
+                <el-progress
+                    v-show="showProgress"
+                    :percentage="
+                    (scope.row.uuid || scope.row.filePath) &&
+                    scope.row.status !== 'exception'
+                      ? 100
+                      : scope.row.percentage
+                  "
+                    :status="
+                    scope.row.uuid || scope.row.filePath
+                      ? 'success'
+                      : scope.row.status
+                  "
+                    :width="100"
+                />
+              </div>
+              <span
+                  v-if="scope.row.status === 'exception'"
+                  class="nstc-file-reload"
+                  @click="reUploadAction(scope.$index)"
+              >重新上传</span
+              >
+            </template>
+          </el-table-column>
+          <el-table-column
+              label="操作"
+              align="left"
+              width="100px"
+          >
+            <template slot-scope="scope">
+              <div class="nstc-file-upload-opt">
+                <!-- v-if="false" -->
+                <!--  -->
+                <img
+                    v-if="showViews"
+                    :src="lookDiabled"
+                    alt=""
+                    @click="lookFile(scope.$index)"
+                />
+                <img
+                    v-if="
+                    (scope.row.uuid || scope.row.filePath) && pattern === 'text'
+                  "
+                    :src="downloadSvg"
+                    alt=""
+                    @click="downLoadFile(scope.row)"
+                />
+                <!-- <img
+                  v-if="pattern !== 'text'"
+                  :src="deleteSvg"
+                  alt=""
+                  @click="deleteFile(scope.$index)"
+                /> -->
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form>
+    </div>
+    <DialogCustom
+        v-model="dialogShowFlag"
+        :show-footer="false"
+        :title="dialogTitle"
+        @confirm="handleConfirm"
+    >
+      <span>查看文件</span>
+    </DialogCustom>
+  </div>
+</template>
+
+<script>
+import lookSvg from "./img/look.svg";
+import lookDiabled from "./img/look-diabled.svg";
+import downloadSvg from "./img/download.svg";
+import deleteSvg from "./img/delete.svg";
+import inputUploadSvg from "./img/inputUpload.svg";
+import addFile from "./img/addFile.svg";
+import deleteFileSvg from "./img/deleteFile.svg";
+import DialogCustom from "../NstcDialog/NstcDialog";
+// fileDownloadGdt
+
+import {parseTime} from "@/utils/parseTime";
+import auth from "@/utils/auth";
+import axios from "axios";
+
+export default {
+  name: "NstcFileUpload",
+  components: {
+    DialogCustom,
+  },
+  props: {
+    attachmentMaxlength: {
+      type: String,
+      default: "64",
+    },
+    views: {
+      //是否浏览模式
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    pattern: {
+      type: String,
+      default: () => {
+        return "normal";
+      },
+    },
+    url: {
+      type: String,
+      default: null,
+    },
+    batchDownloadUrl: {
+      type: String,
+      default: null,
+    },
+    httpMethod: {
+      type: String,
+      default: "post",
+    },
+    showLength: {
+      type: Boolean,
+      default: true,
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      lookSvg,
+      lookDiabled,
+      downloadSvg,
+      deleteSvg,
+      inputUploadSvg,
+      addFile,
+      deleteFileSvg,
+      showViews: false,
+      model: {
+        rules: {
+          attachmentName: {
+            type: "string",
+            required: true,
+            message: "必填字段",
+            trigger: "change",
+          },
+        },
+        tableData: [],
+      },
+      fileList: [],
+      tableSelectionData: [],
+      tableSelectionData2: [],
+      fileTypeList: [{label: '附件', value: 1}],
+      tempFile: {
+        id: "",
+        attachmentName: "",
+        fileName: "",
+        remark: null,
+        fileType: 1,
+        type: "",
+        time: "",
+        user: "",
+        progress: 0,
+        uuid: "",
+        status: null,
+        fileObj: "",
+        percentage: 0,
+      },
+      dialogTitle: '查看',
+      dialogShowFlag: false,
+      currentUploadIndex: null,
+      showProgress: true,
+      dialogShowDelete: false,
+      dialogDeleteTitle: "提示",
+    };
+  },
+  computed: {
+    tableData: {
+      get() {
+        this.value.map((item) => {
+          item.fileType = item.fileType == "" ? "" : Number(item.fileType);
+          item.status == null ? (item.status = 0) : "";
+          return item;
+        });
+        this.model.tableData = this.value;
+        console.log("this.model=====", this.model.tableData);
+        return this.value;
+      },
+      set(val) {
+        this.$emit("input", val);
+      },
+    },
+    uploadFlag() {
+      return this.tableData.filter((i) => i.uuid).length !== 0;
+    },
+  },
+  filters: {
+    parseTimeFormat: function (val) {
+      if (val !== "" && val) {
+        return parseTime(new Date(val), "{y}-{m}-{d}");
+      } else {
+        return "";
+      }
+    },
+  },
+  methods: {
+    beforeUpload(file, row) {
+      console.log(file, row);
+      // if(!row.attachmentName) {
+      //   this.$message({
+      //       type: "warning",
+      //       message: "请先输入附件名称再上传",
+      //     });
+      //     return false
+      // }
+    },
+    checkValidate() {
+      this.$refs["form"].validate((res) => {
+        return res;
+      });
+    },
+    cancel(i) {
+      this.tableData[i].percentage = 0;
+      console.log("111");
+    },
+    /**
+     * 判断当前是不是文档模式
+     * 1， pattern 等于 text
+     * 2   上传成功
+     */
+    textFlag(uuid, filePath) {
+      console.log(uuid, filePath);
+      if (this.pattern === "text") {
+        return true;
+      } else {
+        return !!uuid || !!filePath;
+      }
+    },
+
+    /**
+     * 新增文件
+     */
+    add() {
+      this.tableData.unshift(
+          JSON.parse(
+              JSON.stringify({
+                id: new Date().getTime(),
+                attachmentName: "",
+                fileName: "",
+                remark: null,
+                fileType: 1,
+                type: "",
+                time: "",
+                user: "",
+                progress: 0,
+                uuid: "",
+                status: null,
+                fileObj: "",
+                percentage: 0,
+              })
+          )
+      );
+    },
+
+    /**
+     * 表格选择变化
+     */
+    handleSelectionChange(data) {
+      this.tableSelectionData = data;
+    },
+
+    /**
+     * 查看文件
+     */
+    lookFile() {
+      // this.dialogShowFlag = true;
+    },
+
+    /**
+     * 下载文件
+     */
+    downLoadFile(data) {
+      console.log(data);
+      // const aEl = document.createElement('a')
+      let uuid = data.uuid || data.filePath;
+      const p = encodeURIComponent(uuid);
+      const n = encodeURIComponent(data.fileName);
+
+      axios({
+        method: this.httpMethod,
+        url: `${this.url}/download/${p}/${n}`,
+        // 这里可以在header中加一些东西，比如token
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${auth.getCookieToken()}`,
+          timestamp: Date.now(),
+          OperationDesc: "yYarJp",
+          requestKey: Math.round(Math.random() * 1000000000),
+        },
+        responseType: "blob",
+      })
+          .then((res) => {
+            console.log("response: ", res);
+            let blob = new Blob([res.data], {
+              type: "application/octet-stream;charset=UTF-8",
+            });
+            let fileName = decodeURI(
+                res.headers["content-disposition"].split(";")[1].split("=")[1]
+            );
+            if (window.navigator.msSaveBlob) {
+              // ie
+              window.navigator.msSaveOrOpenBlob(blob, fileName);
+              return;
+            }
+            let elink = document.createElement("a");
+            elink.style.display = "none";
+            elink.href = window.URL.createObjectURL(blob);
+            elink.download = data.fileName;
+            document.body.appendChild(elink);
+            elink.click();
+            URL.revokeObjectURL(elink.href);
+            document.body.removeChild(elink);
+          })
+          .catch((error) => {
+            console.log("response: ", error);
+          });
+    },
+
+    /**
+     * 删除文件
+     */
+    deleteFile(index) {
+      this.$confirmTip({
+        type: "info",
+        title: "确认删除该文件？",
+        info: "",
+        button: {
+          ok: "提交",
+          cancel: "取消",
+        },
+      }).then(() => {
+        this.tableData.splice(index, 1);
+        this.$message({
+          type: "success",
+          message: "删除成功!",
+        });
+      });
+    },
+
+    /**
+     * 弹框确认事件
+     */
+    handleConfirm() {
+    },
+
+    /**
+     * 批量下载
+     */
+    batchDownload() {
+      if (this.tableSelectionData.length === 1) {
+        // 单条下载
+        this.downLoadFile(this.tableSelectionData[0]);
+      } else if (this.tableSelectionData.length > 1) {
+        const files = [];
+        // 判断是否有文件未上传
+        console.log("this.tableSelectionData====", this.tableSelectionData);
+        let isNoUpload = this.tableSelectionData.some((item) => {
+          !item.uuid == true;
+        });
+        console.log("文件判断=======", isNoUpload);
+        if (isNoUpload) {
+          // 阻断下载
+          this.$message({
+            type: "warning",
+            message: "勾选文件中有文件未上传",
+          });
+          return;
+        }
+        this.tableSelectionData.map((item) => {
+          files.push({
+            uuid: item.uuid || item.filePath,
+            fileName: item.fileName,
+          });
+        });
+
+        axios({
+          url: this.batchDownloadUrl,
+          method: "POST",
+          data: JSON.stringify(files),
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${auth.getCookieToken()}`,
+            timestamp: Date.now(),
+            OperationDesc: "yYarJp",
+            requestKey: Math.round(Math.random() * 1000000000),
+          },
+          responseType: "blob",
+        })
+            .then((res) => {
+              let blob = new Blob([res.data], {
+                type: "application/octet-stream;charset=UTF-8",
+              });
+              let fileName = decodeURI(
+                  res.headers["content-disposition"].split(";")[1].split("=")[1]
+              );
+              if (window.navigator.msSaveBlob) {
+                // ie
+                window.navigator.msSaveOrOpenBlob(blob, fileName);
+                return;
+              }
+              let elink = document.createElement("a");
+              elink.style.display = "none";
+              elink.href = window.URL.createObjectURL(blob);
+              elink.download = "批量下载.zip";
+              document.body.appendChild(elink);
+              elink.click();
+              URL.revokeObjectURL(elink.href);
+              document.body.removeChild(elink);
+            })
+            .catch((error) => {
+              console.log("response: ", error);
+            });
+      } else {
+        this.$message({
+          type: "warning",
+          message: "请选择要下载的附件",
+        });
+      }
+    },
+
+    /**
+     * 批量删除
+     */
+    batchDelete() {
+      if (this.tableSelectionData.length !== 0) {
+        this.dialogShowDelete = true;
+        this.$confirmTip({
+          type: "error",
+          title: "确认要删除所选附件吗？",
+          info: "删除后数据不可恢复",
+          button: {
+            ok: "提交",
+            cancel: "取消",
+          },
+        }).then(() => {
+          this.tableData = this.tableData.filter((i) => {
+            return !this.tableSelectionData.includes(i);
+          });
+          setTimeout(() => {
+            this.tableSelectionData = [];
+          }, 30);
+          this.$message({
+            type: "success",
+            message: "删除成功!",
+          });
+        });
+      } else {
+        this.$message({
+          type: "warning",
+          message: "请选择要删除的附件",
+        });
+      }
+    },
+    handleConfirmDelete() {
+      this.tableData = this.tableData.filter((i) => {
+        return !this.tableSelectionData.includes(i);
+      });
+      setTimeout(() => {
+        this.tableSelectionData = [];
+      }, 30);
+      this.dialogShowDelete = false;
+      this.$message({
+        type: "success",
+        message: "删除成功!",
+      });
+    },
+
+    /**
+     * 获取文件类型
+     */
+    getFileTypeLabel(type) {
+      const t = this.fileTypeList.filter((i) => {
+        return Number(type) === Number(i.value);
+      });
+      if (t.length === 1) {
+        return t[0].label;
+      } else {
+        return type;
+      }
+    },
+
+    /**
+     * 附件上传
+     */
+    httpRequest(fileObj) {
+      const isLt2M = fileObj.file.size / 1024 / 1024 < 20;
+      if (!isLt2M) {
+        this.$message({
+          message: "上传文件大小不能超过 20MB!",
+          type: "warning",
+        });
+        this.tableData[this.currentUploadIndex].percentage = 75;
+        this.tableData[this.currentUploadIndex].status = "exception";
+        this.$emit("upload_over", {});
+        return;
+      }
+      const that = this;
+      const formData = new FormData();
+      this.tableData[this.currentUploadIndex].fileSize = fileObj.file.size;
+      // this.tableData[this.currentUploadIndex].fileName = fileObj.file.name
+      this.tableData[this.currentUploadIndex].type = fileObj.file.type;
+
+      formData.append("file", fileObj.file);
+      axios(`${this.url}/upload`, formData, {
+        onUploadProgress: progressEvent => {
+          let percent = (progressEvent.loaded / progressEvent.total * 100) | 0
+          // 调用onProgress方法来显示进度条，需要传递个对象 percent为进度值
+          that.tableData[this.currentUploadIndex].percentage = percent;
+        }
+      }).then((res) => {
+            // 上传成功
+            // that.tableData[this.currentUploadIndex].percentage = 100
+            console.log("上传文件1111", res);
+            this.tableData[this.currentUploadIndex].time = parseTime(
+                res[0][`time`],
+                "{y}-{m}-{d} {h}:{i}:{s}"
+            );
+            this.tableData[this.currentUploadIndex].uuid = res[0][`uuid`];
+            this.tableData[this.currentUploadIndex].status = "success";
+            this.tableData[this.currentUploadIndex].user = res[0][`user`];
+            this.tableData[this.currentUploadIndex].creator = res[0][`creator`];
+            res[0][`createTime`] = parseTime(
+                res[0][`createTime`],
+                "{y}-{m}-{d} {h}:{i}:{s}"
+            );
+            this.tableData[this.currentUploadIndex].createTime =
+                res[0][`createTime`];
+            this.$emit("upload_over", {});
+          })
+          .catch(() => {
+            // 上传失败
+            // this.resetUpload(this.currentUploadIndex)
+            that.tableData[this.currentUploadIndex].percentage = 75;
+            this.tableData[this.currentUploadIndex].status = "exception";
+            this.$emit("upload_over", {});
+          });
+      // setTimeout(function () {
+      //   //去调用了这个cancel()方法，没有完成请求的接口便会停止请求
+      //   self.cancel()
+      // }, 1)
+    },
+
+    /**
+     * 文件超出个数限制
+     */
+    handleExceed() {
+      this.$message({
+        type: "error",
+        message: "最多只能选择一个文件",
+      });
+    },
+
+    /**
+     * 文件变化
+     * file, fileList
+     */
+    handleChange(file, fileLists, index, row) {
+      // if(!row.attachmentName) {
+      //     this.$message({
+      //       type: "warning",
+      //       message: "请先输入附件名称再上传",
+      //     });
+      //     return false
+      // }
+      this.tableData[index].fileObj = file;
+      this.tableData[index].fileName = file.name;
+      this.tableData[index].user = "";
+      this.tableData[index].percentage = 0;
+      this.tableData[index].uuid = "";
+      if (fileLists.length > 1) {
+        fileLists.splice(0, 1);
+      }
+
+      this.tableSelectionData2 = [];
+      this.tableSelectionData2.push(this.tableData[index]);
+      this.validFile(index);
+    },
+
+    /**
+     * 获取当前上传的文件的index
+     */
+    getUploadIndex(index) {
+      this.currentUploadIndex = index;
+    },
+
+    strLen(str) {
+      let len = 0;
+      for (let i = 0; i < str.length; i++) {
+        let c = str.charCodeAt(i);
+        //单字节加1
+        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
+          len++;
+        } else {
+          len += 3;
+        }
+      }
+      return len;
+    },
+
+    /**
+     * 校验文件上传
+     */
+    validFile(index) {
+      // if(this.tableSelectionData.length == 0) {
+      //   return this.$message.warning('请选择数据')
+      // }
+      let t = this.tableSelectionData2.filter((item) => {
+        // return this.strLen(item.fileName) > 60;
+        return item.fileName.length > 60;
+      });
+      if (t.length) {
+        this.$message({
+          type: "error",
+          message: "文件名不能超过64个字，请重新上传!",
+        });
+        // this.tableData[index].status = 'exception';
+        return null;
+      }
+      let temp = this.tableSelectionData2.filter((item) => {
+        const names = item.fileName ? item.fileName.split(".") : [];
+        let nameType = names.length ? names[names.length - 1] : "";
+        return ["exe", "bin"].includes(nameType);
+      });
+      if (temp.length) {
+        this.$message({
+          type: "error",
+          message: "暂不支持 .exe, .bin等格式文件格式上传！",
+        });
+        this.tableData[index].fileName = "";
+        return null;
+      }
+      this.tableData[index].percentage = 50;
+      this.submitFile();
+    },
+
+    /**
+     * 上传文件
+     */
+    submitFile() {
+      // 获得将要上传的文件
+      const uploadFileArr = [];
+      this.tableSelectionData2.map((item) => {
+        // 没有上传文件 并且选择了文件
+        if (!item.uuid && item.fileObj) {
+          uploadFileArr.push({
+            ref_index: this.tableData.findIndex(
+                (objitem) => objitem.id === item.id
+            ),
+            data: item,
+          });
+        }
+      });
+      // 执行
+      uploadFileArr.length &&
+      this.uploadAction(uploadFileArr).then(() => {
+        console.log("上传文件完成");
+      });
+    },
+
+    /**
+     * 文件上传动作
+     */
+    uploadAction(fileArr) {
+      let uploadedLength = 0;
+      return new Promise((resolve) => {
+        // 启动上传
+        uploadedLength++;
+        this.currentUploadIndex = fileArr[0].ref_index;
+        this.$refs[
+            `nstc_g6_common_upload_index_${this.currentUploadIndex}`
+            ].submit();
+
+        // 监听上传完毕
+        this.$on("upload_over", () => {
+          if (uploadedLength === fileArr.length) {
+            resolve();
+          } else {
+            uploadedLength++;
+            this.currentUploadIndex = fileArr[uploadedLength - 1].ref_index;
+            this.$refs[
+                `nstc_g6_common_upload_index_${this.currentUploadIndex}`
+                ].submit();
+          }
+        });
+      });
+    },
+
+    /**
+     * 重置
+     */
+    resetUpload(index) {
+      this.$refs[`nstc_upload_index_${index}`].clearFiles();
+      this.tableData[index].fileName = "";
+      this.tableData[index].fileSize = "";
+      this.tableData[index].percentage = 0;
+      this.tableData[index].fileType = 1;
+      this.tableData[index].fileFormat = "";
+      this.tableData[index].remark = "";
+      this.tableData[index].state = "1";
+      this.tableData[index].createTime = "";
+      this.tableData[index].uuid = "";
+    },
+
+    /**
+     * 发生错误重新上传
+     */
+    reUploadAction(index) {
+      console.log("附件上传", index);
+      // this.tableData[index].percentage = 0;
+      // this.tableData[index].percentage = 50;
+      this.$refs[`nstc_g6_common_upload_index_${index}`].submit();
+    },
+  },
+  beforeUpdate() {
+    this.showProgress = false;
+  },
+  updated() {
+    setTimeout(() => {
+      this.showProgress = true;
+    }, 1);
+  },
+};
+</script>
+
+<style lang="scss">
+
+.nstc-file-upload {
+  .input-upload {
+    height: 100%;
+  }
+
+  .cell {
+    padding: 0 8px !important;
+  }
+
+  &-head {
+    text-align: right;
+    display: flex;
+    justify-content: flex-end;
+
+    .nstc-g6-common-btn-4 {
+      // border-color: $--color-danger !important;
+      color: #fb5555 !important;
+    }
+  }
+
+  &-table {
+    margin-top: 12px;
+
+    .is-success {
+      .el-icon-circle-check {
+        &:before {
+          content: "\e79c";
+        }
+      }
+    }
+
+    .is-exception {
+      .el-icon-circle-close {
+        &:before {
+          content: "\e79d";
+        }
+      }
+    }
+
+    th {
+      > .cell {
+        box-sizing: border-box;
+        padding-left: 5px !important;
+        text-align: left !important;
+      }
+    }
+
+    .el-table-column--selection {
+      > .cell {
+        text-align: center !important;
+      }
+    }
+
+    .input-upload {
+      display: flex;
+      align-items: center;
+      margin-right: 5px;
+    }
+  }
+
+  &-opt {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    img {
+      margin-right: 10px;
+      // &:hover {
+      //   cursor: pointer;
+      //   color: $baseColor;
+      // }
+    }
+  }
+
+  .nstc-el-progress-box {
+    width: 200px;
+    display: inline-block;
+  }
+
+  .nstc-file-reload {
+    color: #fb5555;
+    cursor: pointer;
+  }
+
+  .nstc-file-cancal {
+    color: #007aff;
+    cursor: pointer;
+  }
+
+  &-input-width {
+    max-width: 180px !important;
+
+    .el-input,
+    .el-select {
+      max-width: 180px !important;
+    }
+  }
+}
+</style>
+<style scoped>
+.nstc-file-upload /deep/ .cell {
+  padding: 0 8px 0 16px !important;
+}
+
+.nstc-file-upload .el-form-item {
+  margin-bottom: 0 !important;
+}
+</style>