perf(标准入库流程、技术标准发布): 文件可更名

2024-01-24 17:44:13 +08:00
parent 0638dcd5c1
commit f541cbce00
3 changed files with 294 additions and 4 deletions
@@ -1426,13 +1426,58 @@
        :before-upload="beginImportFile"
        :on-success="importFileSuccess"
        :on-remove="removeOneFile"
-        :show-file-list="true"
+        :show-file-list="false"
      >
        <div>
          <i class="el-icon-upload" style="color: #3399ff" />
          <p>点击或拖拽上传文件</p>
        </div>
      </el-upload>
+      <ul class="el-upload-list el-upload-list--text">
+        <li
+          v-for="(file, index) in fileList"
+          :key="index"
+          class="el-upload-list__item is-success"
+          :title="file.name"
+        >
+          <a class="el-upload-list__item-name">
+            <i class="el-icon-document" />
+            {{ file.name }}
+          </a>
+          <label class="el-upload-list__item-status-label">
+            <i class="el-icon-upload-success el-icon-circle-check" />
+          </label>
+          <i class="el-icon-edit" @click.stop="handleModifyName(file)" />
+          <i class="el-icon-close" @click.stop="handleRemoveFile(file)" />
+        </li>
+      </ul>
+    </el-dialog>
+    <el-dialog
+      title="修改文件名称"
+      :visible.sync="openModifyFileNameDialog"
+      append-to-body
+    >
+      <el-input v-model="modifyFile.fileName" />
+      <div class="demo-drawer-footer" style="text-align: right;margin-top:30px">
+        <el-button
+          class="common-button-primary"
+          size="mini"
+          icon="el-icon-check"
+          type="primary"
+          :loading="modifyFileNameLoading"
+          @click="handleModifyNameSubmite"
+        >
+          提交
+        </el-button>
+        <el-button
+          class="common-button-default"
+          size="mini"
+          icon="el-icon-close"
+          @click="openModifyFileNameDialog = false"
+        >
+          取消
+        </el-button>
+      </div>
    </el-dialog>
    <!-- 新建抽屉 -->
    <el-drawer
@@ -1961,6 +2006,12 @@ export default {
      })
    }
    return {
+      openModifyFileNameDialog: false,
+      modifyFile: {
+        fileName: '',
+        fileId: ''
+      },
+      modifyFileNameLoading: false,
      disabledXX: !!this.$route.query.disabledXX,
      ccc: false,
      productTitle: '', // 模态框标题
@@ -2505,6 +2556,43 @@ export default {
    this.modelFunc()
  },
  methods: {
+    handleRemoveFile (file) {
+      const fileList = []
+      this.fileList.forEach(item => {
+        const fileId = file.id || file.response.data.id
+        const itemId = item.id || item.response.data.id
+        if (fileId !== itemId) {
+          fileList.push(item)
+        }
+      })
+      this.fileList = fileList
+      this.removeOneFile(file, fileList)
+    },
+    handleModifyName (file) {
+      this.modifyFile.fileName = file.name
+      this.modifyFile.fileId = file.id || file.response.data.id
+      this.openModifyFileNameDialog = true
+    },
+    handleModifyNameSubmite () {
+      this.modifyFileNameLoading = true
+      this.$http.get('att/attFile/updateFileName', this.modifyFile, {
+        _this: this
+      }, res => {
+        if(res.ok) {
+          this.modifyFileNameLoading = false
+          this.openModifyFileNameDialog = false
+          this.fileList.forEach(item => {
+            const id = item.id || item.response.data.id
+            if(id === this.modifyFile.fileId) {
+              item.name = this.modifyFile.fileName
+            }
+          })
+          this.removeOneFile('_', this.fileList)
+        }
+      }, e => {
+        this.modifyFileNameLoading = false
+      })
+    },
    // 新增
    productAdd () {
      this.productModal = true
@@ -3609,7 +3697,7 @@ export default {
        //     }
        //     this.form.zbjbdName += response.data.name+',';
        // }
-
+        this.fileList = fileList
        switch (this.fileType) {
          case 'fbgbjbd':
            this.FBGBJBDFileList = fileList;
@@ -4419,4 +4507,12 @@ export default {
    height: 8%;
  }
 }
+.el-upload-list__item .el-icon-edit{
+  position: absolute;
+  top: 5px;
+  right: 25px;
+  cursor: pointer;
+  opacity: .75;
+  color: #606266;
+}
 </style>
@@ -1562,13 +1562,58 @@
        :on-success="importFileSuccess"
        :on-change="fileChange"
        :on-remove="removeOneFile"
-        :show-file-list="true"
+        :show-file-list="false"
      >
        <div>
          <i class="el-icon-upload" style="color: #3399ff" />
          <p>点击或拖拽上传文件</p>
        </div>
      </el-upload>
+      <ul class="el-upload-list el-upload-list--text">
+        <li
+          v-for="(file, index) in fileList"
+          :key="index"
+          class="el-upload-list__item is-success"
+          :title="file.name"
+        >
+          <a class="el-upload-list__item-name">
+            <i class="el-icon-document" />
+            {{ file.name }}
+          </a>
+          <label class="el-upload-list__item-status-label">
+            <i class="el-icon-upload-success el-icon-circle-check" />
+          </label>
+          <i class="el-icon-edit" @click.stop="handleModifyName(file)" />
+          <i class="el-icon-close" @click.stop="handleRemoveFile(file)" />
+        </li>
+      </ul>
+    </el-dialog>
+    <el-dialog
+      title="修改文件名称"
+      :visible.sync="openModifyFileNameDialog"
+      append-to-body
+    >
+      <el-input v-model="modifyFile.fileName" />
+      <div class="demo-drawer-footer" style="text-align: right;margin-top:30px">
+        <el-button
+          class="common-button-primary"
+          size="mini"
+          icon="el-icon-check"
+          type="primary"
+          :loading="modifyFileNameLoading"
+          @click="handleModifyNameSubmite"
+        >
+          提交
+        </el-button>
+        <el-button
+          class="common-button-default"
+          size="mini"
+          icon="el-icon-close"
+          @click="openModifyFileNameDialog = false"
+        >
+          取消
+        </el-button>
+      </div>
    </el-dialog>
    <el-dialog
      :title="config.attrName"
@@ -1770,6 +1815,12 @@ export default {
  },
  data () {
    return {
+      openModifyFileNameDialog: false,
+      modifyFile: {
+        fileName: '',
+        fileId: ''
+      },
+      modifyFileNameLoading: false,
      submitType: '',
      bpnId: '',
      ccc: false,
@@ -2096,6 +2147,43 @@ export default {
    this.modelFunc()
  },
  methods: {
+    handleRemoveFile (file) {
+      const fileList = []
+      this.fileList.forEach(item => {
+        const fileId = file.id || file.response.data.id
+        const itemId = item.id || item.response.data.id
+        if (fileId !== itemId) {
+          fileList.push(item)
+        }
+      })
+      this.fileList = fileList
+      this.removeOneFile(file, fileList)
+    },
+    handleModifyName (file) {
+      this.modifyFile.fileName = file.name
+      this.modifyFile.fileId = file.id || file.response.data.id
+      this.openModifyFileNameDialog = true
+    },
+    handleModifyNameSubmite () {
+      this.modifyFileNameLoading = true
+      this.$http.get('att/attFile/updateFileName', this.modifyFile, {
+        _this: this
+      }, res => {
+        if(res.ok) {
+          this.modifyFileNameLoading = false
+          this.openModifyFileNameDialog = false
+          this.fileList.forEach(item => {
+            const id = item.id || item.response.data.id
+            if(id === this.modifyFile.fileId) {
+              item.name = this.modifyFile.fileName
+            }
+          })
+          this.removeOneFile('_', this.fileList)
+        }
+      }, e => {
+        this.modifyFileNameLoading = false
+      })
+    },
    // 限制上传文件个数
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 8 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
@@ -2581,6 +2669,7 @@ export default {
        //   this.form.caName += response.data.name+',';
        // }

+        this.fileList = fileList
        switch (this.fileType) {
          case 'fbgbjbd':
            this.FBGBJBDFileList = fileList;
@@ -3348,4 +3437,12 @@ export default {
    }
  }
 }
+.el-upload-list__item .el-icon-edit{
+  position: absolute;
+  top: 5px;
+  right: 25px;
+  cursor: pointer;
+  opacity: .75;
+  color: #606266;
+}
 </style>
@@ -187,13 +187,58 @@
        :on-success="importFileSuccess"
        :on-preview="handleFilePreview"
        :on-remove="removeOneFile"
-        :show-file-list="true"
+        :show-file-list="false"
      >
        <div style="padding: 20px 0">
          <i class="el-icon-upload" style="color: #3399ff" />
          <p>点击或拖拽上传文件</p>
        </div>
      </el-upload>
+      <ul class="el-upload-list el-upload-list--text">
+        <li
+          v-for="(file, index) in fileList"
+          :key="index"
+          class="el-upload-list__item is-success"
+          :title="file.name"
+        >
+          <a class="el-upload-list__item-name">
+            <i class="el-icon-document" />
+            {{ file.name }}
+          </a>
+          <label class="el-upload-list__item-status-label">
+            <i class="el-icon-upload-success el-icon-circle-check" />
+          </label>
+          <i class="el-icon-edit" @click.stop="handleModifyName(file)" />
+          <i class="el-icon-close" @click.stop="handleRemoveFile(file)" />
+        </li>
+      </ul>
+    </el-dialog>
+    <el-dialog
+      title="修改文件名称"
+      :visible.sync="openModifyFileNameDialog"
+      append-to-body
+    >
+      <el-input v-model="modifyFile.fileName" />
+      <div class="demo-drawer-footer" style="text-align: right;margin-top:30px">
+        <el-button
+          class="common-button-primary"
+          size="mini"
+          icon="el-icon-check"
+          type="primary"
+          :loading="modifyFileNameLoading"
+          @click="handleModifyNameSubmite"
+        >
+          提交
+        </el-button>
+        <el-button
+          class="common-button-default"
+          size="mini"
+          icon="el-icon-close"
+          @click="openModifyFileNameDialog = false"
+        >
+          取消
+        </el-button>
+      </div>
    </el-dialog>
    <el-dialog
      :title="config.attrName"
@@ -692,6 +737,12 @@ export default {
      callback()
    };
    return {
+      openModifyFileNameDialog: false,
+      modifyFile: {
+        fileName: '',
+        fileId: ''
+      },
+      modifyFileNameLoading: false,
      pickerOptions: {
        shortcuts: [ {
          text: '最近一周',
@@ -1211,6 +1262,43 @@ export default {
    // this.getMaxStandnSn();
  },
  methods: {
+    handleRemoveFile (file) {
+      const fileList = []
+      this.fileList.forEach(item => {
+        const fileId = file.id || file.response.data.id
+        const itemId = item.id || item.response.data.id
+        if (fileId !== itemId) {
+          fileList.push(item)
+        }
+      })
+      this.fileList = fileList
+      this.removeOneFile(file, fileList)
+    },
+    handleModifyName (file) {
+      this.modifyFile.fileName = file.name
+      this.modifyFile.fileId = file.id || file.response.data.id
+      this.openModifyFileNameDialog = true
+    },
+    handleModifyNameSubmite () {
+      this.modifyFileNameLoading = true
+      this.$http.get('att/attFile/updateFileName', this.modifyFile, {
+        _this: this
+      }, res => {
+        if(res.ok) {
+          this.modifyFileNameLoading = false
+          this.openModifyFileNameDialog = false
+          this.fileList.forEach(item => {
+            const id = item.id || item.response.data.id
+            if(id === this.modifyFile.fileId) {
+              item.name = this.modifyFile.fileName
+            }
+          })
+          this.removeOneFile('_', this.fileList)
+        }
+      }, e => {
+        this.modifyFileNameLoading = false
+      })
+    },
    reveseStatusChange (val) {
      if(this.form.reviseStatus === '1') {
        this.$http.get('lawss/sarBussionessStand/getStandInfoByReviseStatus', { reviseStatus: 'buss1_' + this.form.reviseStatus, standSort: this.form.standSort, taskId: this.taskIds }, {
@@ -2285,6 +2373,7 @@ export default {
        const fileObj = {}
        fileObj.id = file.response.data.id
        fileObj.name = file.response.data.name
+        this.fileList = fileList
        switch (this.fileType) {
          case 'FBGBUSS':
            this.FBGBUSSFileList = this.FBGBUSSFileList.filter( item => item.response === undefined);
@@ -3240,4 +3329,12 @@ export default {
            }
        }
    }
+    .el-upload-list__item .el-icon-edit{
+      position: absolute;
+      top: 5px;
+      right: 25px;
+      cursor: pointer;
+      opacity: .75;
+      color: #606266;
+    }
 </style>