n20-common-lib 1.3.10 → 1.3.11

package/nstc-g6/components/NstcFileUpload/NstcFileUpload.vue

@@ -0,0 +1,989 @@
+<!--
+  功能：    新版UI文件上传
+  作者：    lihao
+  创建时间： 2021-02-19
+-->
+<template>
+  <div class="nstc-file-upload">
+    <div v-if="pattern !== 'text'" class="nstc-file-upload-head">
+      <el-button
+        v-if="!views"
+        type="primary"
+        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 v-else class="nstc-file-upload-head">
+      <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 ref="form" :rules="model.rules" :model="model">
+        <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-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
+  },
+  filters: {
+    parseTimeFormat: function (val) {
+      if (val !== '' && val) {
+        return parseTime(new Date(val), '{y}-{m}-{d}')
+      } else {
+        return ''
+      }
+    }
+  },
+  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
+    }
+  },
+  beforeUpdate() {
+    this.showProgress = false
+  },
+  updated() {
+    setTimeout(() => {
+      this.showProgress = true
+    }, 1)
+  },
+  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) || (c >= 0xff60 && 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()
+    }
+  }
+}
+</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>