n20-common-lib 1.2.41 → 1.3.0

package/src/components/NstcG6Components/NstcElectronicFile/NstcElectronicFile.vue

@@ -0,0 +1,591 @@
+<template>
+  <div>
+    <!-- <el-dialog :visible.sync="VisibleAdd" :close-on-click-modal="false" width='1140px'> -->
+    <!-- 新增 -->
+    <div class="uploadfiletip">
+      <div>附件信息</div>
+      <div>
+        <el-button type="primary" size="small" @click="createRow"
+          >新增</el-button
+        >
+        <el-button size="small" plain @click="batchload">下载</el-button>
+        <el-button size="small" type="danger" plain @click="batchdel"
+          >删除</el-button
+        >
+      </div>
+    </div>
+    <el-table
+      :data="files"
+      header-row-class-name="customHeader"
+      size="small"
+      class="uploadtable mb20"
+      :header-cell-style="{ 'text-align': 'center' }"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column label="附件类型">
+        <template slot-scope="scope">
+          <el-select
+            v-model="scope.row.attnoadd"
+            placeholder="请选择"
+            size="small"
+            clearable
+          >
+            <el-option
+              v-for="item in eamsAttachfiles"
+              :key="item.index"
+              :label="item.attname"
+              :value="item.attno"
+            />
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column label="附件名称" width="200">
+        <template slot-scope="scope">
+          <el-input
+            v-model="scope.row.memo"
+            size="small"
+            autocomplete="off"
+            placeholder="请输入"
+            clearable
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="附件上传">
+        <template slot-scope="scope">
+          <div class="cantpick">
+            <div
+              v-show="!scope.row.attnoadd"
+              class="canttip"
+              @click="cantTip"
+            ></div>
+            <div
+              v-show="!scope.row.memo"
+              class="canttip"
+              @click="cantTip1"
+            ></div>
+            <div
+              v-show="scope.row.canupload == 0"
+              class="canttip"
+              @click="cantTip2"
+            ></div>
+            <el-upload
+              ref="upload"
+              class="upload"
+              action="string"
+              :http-request="uploadFile"
+              :on-change="handleChange"
+              :show-file-list="false"
+            >
+              <div
+                class="changeindex"
+                @click="curRowIndex = scope.$index"
+              ></div>
+              <el-input
+                v-if="scope.row.file != null"
+                v-model="scope.row.file.name"
+                size="small"
+                class="uploadinput"
+                placeholder="请选择附件"
+              >
+                <i
+                  v-show="scope.row.canupload == 1"
+                  slot="suffix"
+                  class="el-icon-upload2"
+                  style="color: #242424"
+                ></i>
+                <i
+                  v-show="scope.row.canupload == 0"
+                  slot="suffix"
+                  class="el-icon-upload2"
+                  style="color: #d8d8d8"
+                ></i>
+              </el-input>
+            </el-upload>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="文件大小">
+        <template slot-scope="scope">
+          <span v-if="scope.row.file != null">{{ scope.row.file.size }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="上传时间" align="left">
+        <template slot-scope="scope">
+          <span v-if="scope.row.file != null">{{ uploadDate }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="上传进度">
+        <template slot-scope="scope">
+          <div class="loadcol">
+            <div class="loadtotal">
+              <div
+                class="loaded"
+                :style="{ width: scope.row.loadprogress }"
+                :class="'loadbg' + scope.row.upstatus"
+              ></div>
+            </div>
+            <div v-show="scope.row.upstatus == 0">
+              <i class="el-icon-time" style="color: #606266"></i>
+            </div>
+            <div v-show="scope.row.upstatus == 1" class="">
+              {{ scope.row.loadprogress }}
+              <el-button
+                v-show="scope.row.upstatus == 1"
+                class="ml10 p0"
+                type="text"
+                @click="cancelupload(scope.$index)"
+                >取消</el-button
+              >
+            </div>
+            <div v-show="scope.row.upstatus == 2">
+              <i class="el-icon-success" style="color: #48d2a0"></i>
+            </div>
+            <div v-show="scope.row.upstatus == 3">
+              <i class="el-icon-error" style="color: #fb5555"></i>
+              <el-button
+                v-show="scope.row.upstatus == 3"
+                class="ml10 p0"
+                type="text"
+                @click="reupload(scope.$index)"
+                >重新上传</el-button
+              >
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" type="index" width="100">
+        <template slot-scope="scope">
+          <i
+            v-show="scope.row.recordno"
+            class="el-icon-view"
+            @click="handleDownload(scope.row.recordno)"
+          ></i>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- </el-dialog> -->
+    <!-- 修改 -->
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+var CancelToken = axios.CancelToken
+export default {
+  name: 'NstcElectronicFile',
+  props: {
+    paramVal: {
+      default: null,
+      type: Object
+    },
+    sysno: {
+      default: '',
+      type: String
+    },
+    appno: {
+      default: '',
+      type: String
+    },
+    bussValue: {
+      default: '',
+      type: String
+    },
+    bussId: {
+      default: '',
+      type: String
+    },
+    cltno: {
+      default: '',
+      type: String
+    },
+    cltname: {
+      default: '',
+      type: String
+    },
+    propList: {
+      default: null,
+      type: Array
+    }
+  },
+  data() {
+    return {
+      VisibleAdd: true,
+      files: [],
+      eamsAttachfiles: [],
+      eamsBaseRecord: {},
+      attno: '',
+      attnoadd: '',
+      recordname: '',
+      value2: '',
+      fileList: [],
+      multiple: true,
+      memo: '',
+      multipleSelection: [],
+      curRowIndex: 0,
+      recordarr: [],
+      axios: axios
+    }
+  },
+  watch: {},
+  created() {
+    this.getUploadDate()
+    axios.defaults.timeout = 60000
+  },
+  mounted: function () {
+    this.getBussTypeSetting()
+  },
+  methods: {
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    getUploadDate() {
+      let date = new Date()
+      this.uploadDate =
+        date.getFullYear() +
+        '-' +
+        ('00' + (date.getMonth() + 1)).slice(-2) +
+        '-' +
+        ('00' + date.getDate()).slice(-2)
+    },
+    createRow() {
+      this.getAlleamsAttachfile()
+      // 创建行
+      var row = {
+        loadprogress: 0,
+        upstatus: 0,
+        file: {
+          name: ''
+        },
+        canupload: 1
+      }
+      this.files.push(row)
+    },
+    batchload() {
+      this.$confirm('确定下载选中的附件?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        let multipleSelection = this.multipleSelection
+        multipleSelection.forEach((_) => {
+          if (_.recordno) {
+            this.handleDownload(_.recordno)
+          }
+        })
+      })
+    },
+    batchdel() {
+      this.$confirm('确定删除选中的附件?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        let files = this.files
+        while (this.multipleSelection.length > 0) {
+          let pop = this.multipleSelection.pop()
+          for (let i = 0; i < files.length; i++) {
+            if (files[i] == pop) {
+              files.splice(i, 1)
+            }
+          }
+        }
+        this.files = files
+      })
+    },
+    handleDelete(index) {
+      // 模态框删除按钮
+      this.files.splice(index, 1)
+    },
+    init() {
+      this.VisibleAdd = true
+    },
+    getBussTypeSetting() {
+      this.axios
+        .get(
+          '/neams/eamsattachfile/queryByBussValue/' +
+            this.$props.paramVal.bussValue
+        )
+        .then((response) => {
+          this.eamsAttachfiles = response.data.data
+        })
+        .catch(function (error) {
+          console.log(error)
+        })
+    },
+    getAlleamsAttachfile() {
+      this.axios
+        .get('/neams/eamsbaserecord/all')
+        .then((response) => {
+          this.eamsAttachfiles = response.data.data
+        })
+        .catch(function (error) {
+          console.log(error)
+        })
+    },
+    getAlleamsSystem() {
+      this.axios
+        .get('/neams/eamssystem/all')
+        .then((response) => {
+          this.eamsSystems = response.data.data
+        })
+        .catch(function (error) {
+          console.log(error)
+        })
+    },
+    delFile() {
+      this.fileList = []
+    },
+    handleChange(file, fileList) {
+      this.fileList = fileList
+    },
+    cantTip() {
+      this.$message({
+        showClose: true,
+        message: '请选择附件类型'
+      })
+    },
+    cantTip1() {
+      this.$message({
+        showClose: true,
+        message: '请输入附件名称'
+      })
+    },
+    cantTip2() {
+      this.$message({
+        showClose: true,
+        message: '没有上传完成，不能再次上传'
+      })
+    },
+    uploadFile(params) {
+      let isFind = this.files.find((_) => {
+        return _.file.name == params.file.name
+      })
+      if (!isFind) {
+        //   this.$message({
+        //     showClose: true,
+        //     message: params.file.name+'已经上传过了'
+        //   });
+        // }else{
+        let _file = this.files[this.curRowIndex]
+        _file.file = params.file
+        _file.loadprogress = 0
+        _file.upstatus = 1 //1上传中蓝底，2上传成功绿底，3上传失败红底
+        _file.recordno = ''
+        _file.canupload = 0
+        this.$set(this.files, this.curRowIndex, _file)
+        this.submitUpload()
+      }
+    },
+    handlePreview(file) {
+      console.log(file)
+    },
+    reupload(index) {
+      this.curRowIndex = index
+      this.files[this.curRowIndex].loadprogress = 0
+      this.files[this.curRowIndex].upstatus = 1
+      this.files[this.curRowIndex].recordno = ''
+      this.files[this.curRowIndex].canupload = 0
+      this.submitUpload()
+    },
+    submitUpload() {
+      let _file = this.files[this.curRowIndex]
+      let formData = new FormData()
+
+      this.eamsAttachfiles.forEach((item) => {
+        if (_file.attnoadd == item.attno) {
+          if (item.attSize * 1024 < _file.size) {
+            this.$message.error(
+              '附件超过设置大小，目前附件限制大小为' + item.attSize + 'M'
+            )
+            return
+          }
+        }
+      })
+      let reqParam = this.paramVal
+      reqParam.attno = _file.attnoadd
+      reqParam.memo = _file.memo
+      // reqParam.propList = this.propList
+      formData.append('file', _file.file)
+      formData.append('data', JSON.stringify(this.paramVal))
+      formData.append('date', '2021-08-02 12:33:33,2023-08-23 12:33:33')
+      _file.cancel = ''
+      axios({
+        url: '/neams/eamsbaserecord/batchSavejson',
+        method: 'post',
+        data: formData,
+        contentType: false,
+        headers: {
+          'Content-Type': 'multipart/form-data;charset=utf-8'
+        },
+        onUploadProgress(progressEvent) {
+          _file.loadprogress =
+            Math.round((progressEvent.loaded / progressEvent.total) * 100) + '%'
+        },
+        cancelToken: new CancelToken(function executor(c) {
+          // executor 函数接收一个 cancel 函数作为参数
+          _file.cancel = c
+        })
+      })
+        .then((res) => {
+          if (res.data.code != 200) {
+            _file.upstatus = 3
+            this.$message.error(res.data.msg)
+          } else {
+            _file.upstatus = 2
+            this.$message.success('上传成功！')
+            let recordno = res.data.data.replace(',', '')
+            _file.recordno = recordno
+            if (this.recordarr.indexOf(recordno) === -1) {
+              this.recordarr.push(recordno)
+              this.$emit('refreshDataList', this.recordarr)
+            }
+          }
+        })
+        .catch((err) => {
+          _file.upstatus = 3
+          console.log(err)
+        })
+        .finally(() => {
+          _file.canupload = 1
+        })
+    },
+    cancelupload(index) {
+      this.files[index].cancel()
+    },
+    handleDownload(row) {
+      this.axios({
+        method: 'GET',
+        url: `/neams/eamsbaserecord/download/${row}/${0}`,
+        responseType: 'blob'
+      })
+        .then((response) => {
+          if (response.data.type === 'application/octet-stream') {
+            // 获取http头部的文件名信息，若无需重命名文件，将下面这行删去
+            const fileName =
+              response.headers['content-disposition'].split('=')[1]
+            /* 兼容ie内核，360浏览器的兼容模式 */
+            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+              const blob = new Blob([response.data], {
+                type: 'application/zip'
+              })
+              window.navigator.msSaveOrOpenBlob(blob, fileName)
+            } else {
+              /* 火狐谷歌的文件下载方式 */
+              const blob = new Blob([response.data], {
+                type: 'application/zip'
+              })
+              const url = window.URL.createObjectURL(blob)
+              const link = document.createElement('a') // 创建a标签
+              link.href = url
+              link.download = fileName // 文件重命名，若无需重命名，将该行删去
+              link.click()
+              URL.revokeObjectURL(url) // 释放内存
+            }
+            // resolve(response)
+          } else {
+            this.$message.error('下载失败数据已删除!')
+          }
+        })
+        .catch((error) => this.$message.error(error))
+    }
+  }
+}
+</script>
+<style>
+.uploadfiletip {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 51px;
+  font-size: 16px;
+  line-height: 50px;
+  padding: 0 20px;
+  border: 1px solid #ebeef5;
+  box-sizing: border-box;
+}
+.uploadtable {
+  border-right: 1px solid #ebeef5;
+  border-left: 1px solid #ebeef5;
+}
+.upload {
+  position: relative;
+}
+.cantpick {
+  position: relative;
+}
+.canttip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+.changeindex {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+.el-icon-delete {
+  background-color: transparent;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 23px;
+}
+.el-icon-upload2 {
+  font-size: 16px;
+  line-height: 34px;
+}
+.loadcol {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.loadtotal {
+  width: 80px;
+  height: 6px;
+  border-radius: 3px;
+  background-color: #dfe6ee;
+  position: relative;
+  margin-right: 10px;
+}
+.loaded {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-radius: 3px;
+}
+.loadbg1 {
+  background-color: #007aff;
+}
+.loadbg2 {
+  background-color: #48d2a0;
+}
+.loadbg3 {
+  background-color: #fb5555;
+}
+.vertical_m {
+  vertical-align: middle;
+}
+.uploadbtn {
+  float: right;
+  margin-top: 13px;
+  margin-right: 20px;
+  cursor: pointer;
+}
+.ml10 {
+  margin-left: 10px;
+}
+.p0 {
+  padding: 0;
+}
+
+.uploadinput .el-input__inner {
+  cursor: pointer !important;
+}
+</style>