【update】-会议-文件上传接口的修改

src/api/api.js

@@ -101,6 +101,8 @@ const getTransitURL = url => `/sys/common/transitRESTful?url=${encodeURIComponen
 
 // 通过文件的id获取文件的相应信息
 const getFileInfo = (params) => getAction('/sys/oss/file/queryById', params)
+// 通过多个文件的ids 获取文件的相应信息
+const getFileInfoByIds = (params) => getAction('/sys/oss/file/queryByIds', params)
 
 // 中转HTTP请求
 export const transitRESTful = {
@@ -186,6 +188,7 @@ export {
   queryallRoles,
   getContactsById,
   getFileInfo,
+  getFileInfoByIds,
   getKeyIv,
   getContactsByCompanyNoLimit,
   loginIdmPlatform,

src/views/incomePayments/meetManage/modules/UploadMeetFileModal.vue

@@ -8,28 +8,62 @@
     @cancel="handleCancel"
     cancelText="关闭">
     <a-spin :spinning="confirmLoading">
-      <div class="table-operator">
-        <a-button type="primary" icon="plus"  >新增</a-button>
-        <a-button type="danger" icon="delete" >
-          批量删除
-        </a-button>
-      </div>
-      <a-table
-        ref="table"
-        size="middle"
-        rowKey="id"
-        :scroll="{x:auto}"
-        :pagination="false"
-        :columns="columns"
-        :dataSource="fileList"
-        class="j-table-force-nowrap"
-      >
-      <span slot="action" slot-scope="record" class="action-span-cell">
-        <a class="color-blue" >下载</a>
-        <a class="color-blue" >查看</a>
-        <a class="color-blue" >删除</a>
-      </span>
-      </a-table>
+      <a-form :form="form">
+        <a-row>
+          <a-col :span="24">
+            <!--上传会议资料显示 -->
+            <!--<a-form-item label="会议文件" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="type === '2' ">-->
+            <!--  <j-upload file-type-error-message="请上传会议文件" :multiple="true"-->
+            <!--            :return-id="true"-->
+            <!--            v-decorator="['fileIds']"-->
+            <!--            :trigger-change="true"></j-upload>-->
+            <!--</a-form-item>-->
+            <!--上传会议纪要显示 -->
+            <a-form-item label="会议纪要" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="type === '1' ">
+              <j-upload file-type-error-message="请上传会议纪要" :multiple="true"
+                        :return-id="true"
+                        v-decorator="['fileIds']"
+                        :trigger-change="true"></j-upload>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+      <!-- 以表格的形式展示 所有的文件 -->
+      <template v-if="type === '2' ">
+        <div class="table-operator">
+          <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader"
+                    :action="importExcelUrl" :beforeUpload="beforeUpload" @change="handleChange"
+          >
+            <a-button type="primary" icon="plus">新增</a-button>
+          </a-upload>
+          <a-button type="danger" icon="delete" @click="batchDel">
+            批量删除
+          </a-button>
+        </div>
+        <a-table
+          ref="table"
+          size="middle"
+          rowKey="id"
+          :scroll="{x:auto}"
+          :pagination="false"
+          :columns="columns"
+          :dataSource="fileList"
+          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+          class="j-table-force-nowrap"
+        >
+          <template slot="text" slot-scope="text">
+            <a-tooltip>
+              <template slot="title">{{ text }}</template>
+              <div class="table-text">{{ text }}</div>
+            </a-tooltip>
+          </template>
+          <span slot="action" slot-scope="record" class="action-span-cell">
+          <a class="color-blue" @click="myDownload(record)">下载</a>
+          <a class="color-blue" @click="myPreview(record)">查看</a>
+          <a class="color-blue" @click="deleteFile(record)">删除</a>
+        </span>
+        </a-table>
+      </template>
     </a-spin>
     <email-error-msg-modal ref="emailError"></email-error-msg-modal>
   </j-modal>
@@ -38,27 +72,36 @@
 <script>
 import JUpload from '@comp/jero/JUpload'
 import {httpAction} from '@api/manage'
+import {getFileInfoByIds} from '@/api/api'
 import EmailErrorMsgModal from '@views/projectManagement/modules/EmailErrorMsgModal'
+import Vue from 'vue'
+import { downloadFile } from '../../../../api/manage'
+import { ACCESS_TOKEN } from '../../../../store/mutation-types'
+import { Modal } from 'ant-design-vue'
+import store from '@/store'
+const FILE_TYPE_ALL = 'all'
 
 const columns = [
   {
     title: '文件名',
     align: 'center',
-    dataIndex: 'name',
-    width: 200
+    dataIndex: 'fileName',
+    width: 200,
+    scopedSlots: { customRender: 'text' }
   },
   {
     title: '上传人',
     align: 'center',
-    dataIndex: 'createTime',
-    width: 100
+    dataIndex: 'createBy',
+    width: 100,
+    scopedSlots: { customRender: 'text' }
   },
   {
     title: '操作',
     align: 'center',
     dataIndex: '',
     scopedSlots: {customRender: 'action'},
-    width: 100
+    width: 150
   }
 ]
 
@@ -92,7 +135,20 @@ export default {
       validatorRules: {},
       url: {},
       columns,
-      fileList: [{}]
+      fileList: [],
+      /* table选中keys*/
+      selectedRowKeys: [],
+      fileType: FILE_TYPE_ALL
+    }
+  },
+  computed: {
+    //token header
+    tokenHeader() {
+      let head = {'X-Access-Token': Vue.ls.get(ACCESS_TOKEN)}
+      return head
+    },
+    importExcelUrl: function () {
+      return `${ window._CONFIG['domianURL'] }/sys/common/uploadByToken`
     }
   },
   methods: {
@@ -100,7 +156,7 @@ export default {
       this.edit({})
     },
     // type 1上传会议纪要 2上传会议资料
-    edit(record, type) {
+    async edit(record, type) {
       this.visible = true
       this.type = type
       this.form.resetFields()
@@ -119,8 +175,9 @@ export default {
       } else if (type === '2') {
         this.meetingFileIds = this.model.meetingData ? this.model.meetingData : ''
         if (this.meetingFileIds && this.meetingFileIds !== '') {
+          this.fileList = await this.getFileInfoArr(this.meetingFileIds)
           this.$nextTick(() => {
-            this.form.setFieldsValue({'fileIds': this.meetingFileIds})
+            // this.form.setFieldsValue({'fileIds': this.meetingFileIds})
           })
         }
       }
@@ -131,6 +188,7 @@ export default {
       this.meetingFileIds = ''
       this.type = ''
       this.visible = false
+      this.confirmLoading = false
     },
     // uplodFile 上传会议资料的接口  uploadCouncilFile 上传会议纪要的接口
     createUrlByMeetingType(meetingType) {
@@ -179,58 +237,249 @@ export default {
         return
       }
       this.confirmLoading = true
-      // 触发表单验证
-      this.form.validateFields((err, values) => {
-        if (!err && values.fileIds !== undefined) {
-          const params = {
-            fileIds: values.fileIds,
-            id: that.meetingId
-          }
-          let url
-          if (this.type === '1') {
-            // 上传会议纪要用会议纪要的接口
-            url = this.url.uploadCouncilFile
-          } else if (this.type === '2') {
-            url = this.url.uploadFile
-          }
-          httpAction(url, params, 'post').then(res => {
-            if (res.success) {
+      // 所有的数据验证后请求的回调方法
+      const callbackFunc = (url, params) => {
+        httpAction(url, params, 'post').then(res => {
+          if (res.success) {
 
-              if (Array.isArray(res.result) && res.result.length > 0) {
-                // msgWarn(this,res.result,0)
-                that.$refs.emailError.open()
-                that.$refs.emailError.msgList = res.result
-                console.log(this.$refs.emailError.msgList, 'this.$refs.emailError.msgList ')
-              }else {
-                that.$message.success(res.message)
-              }
-              that.$emit('ok')
-              this.confirmLoading = false
-              that.close()
-            } else {
-              this.$message.warn(res.message)
-              this.confirmLoading = false
+            if (Array.isArray(res.result) && res.result.length > 0) {
+              // msgWarn(this,res.result,0)
+              that.$refs.emailError.open()
+              that.$refs.emailError.msgList = res.result
+              console.log(this.$refs.emailError.msgList, 'this.$refs.emailError.msgList ')
+            }else {
+              that.$message.success(res.message)
             }
-          }).catch((err) => {
-            console.log(err, 'err')
-          }).finally(() => {
-            setTimeout(() => {
-              this.confirmLoading = false
-            }, 1000)
-          })
-        } else {
-          that.close()
+            that.$emit('ok')
+            this.confirmLoading = false
+            that.close()
+          } else {
+            this.$message.warn(res.message)
+            this.confirmLoading = false
+          }
+        }).catch((err) => {
+          console.log(err, 'err')
+        }).finally(() => {
+          setTimeout(() => {
+            this.confirmLoading = false
+          }, 1000)
+        })
+      }
+
+      // 会议纪要-触发表单的验证
+      if(this.type === '1') {
+        // 触发表单验证
+        this.form.validateFields((err, values) => {
+          if (!err && values.fileIds !== undefined) {
+            const params = {
+              fileIds: values.fileIds,
+              id: that.meetingId
+            }
+            let url = this.url.uploadCouncilFile
+            callbackFunc(url, params)
+          } else {
+            that.close()
+          }
+        })
+      } else if (this.type === '2'){
+        // 会议文件
+        let ids = this.fileList.map(tt => tt.id).join(',')
+        const params = {
+          fileIds: ids,
+          id: that.meetingId
         }
-      })
+        let url = this.url.uploadFile
+        //   会议文件 不用对比开始与最后文件的差别，后端会自己比对
+        callbackFunc(url, params)
+      }
     },
     handleCancel() {
       this.close()
     },
+    /**
+     * 通过文件的id获取文件的相关信息
+     * @param id
+     */
+    getFileInfoArr(ids) {
+      return new Promise(resolve => {
+        let result = {}
+        getFileInfoByIds({ids: ids}).then(res => {
+          if (res.success) {
+            result = res.result
+          }
+        }).finally(() => {
+          resolve(result)
+        })
+      })
+    },
+    onSelectChange(selectedRowKeys, selectionRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectionRows = selectionRows
+    },
+    onClearSelected() {
+      this.selectedRowKeys = []
+      this.selectionRows = []
+    },
+    /**
+     * 单个文件的下载功能
+     * @param file
+     */
+    myDownload(file) {
+      downloadFile(`sys/common/download/${file.id}`, file.fileName)
+    },
+    /**
+     * 单个文件的预览功能
+     * @param file
+     */
+    myPreview(file) {
+      if (file && file.url) {
+        const fileName = (file || {}).fileName
+        const fileNameNotType = fileName.substring(0, fileName.lastIndexOf('.'))
+        const previewUrl = (file || {}).url || ''
+        const previewName = previewUrl.substring(previewUrl.lastIndexOf(fileNameNotType))
+
+        const fileFullUrl = `${window._CONFIG['domianWebSocketURL']}/sys/common/download/${file.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${previewName}`
+        let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(fileFullUrl)}`
+        window.open(url)
+      }
+    },
+    // 单个文件的删除
+    deleteFile(file) {
+      const that = this
+      this.$confirm({
+        title: '确认删除',
+        content: '确定要删除此条数据吗?',
+        onOk: function () {
+          let index = that.fileList.findIndex(tt => tt.id === file.id)
+          that.fileList.splice(index, 1)
+          that.onClearSelected()
+        }
+      })
+    },
+    batchDel() {
+      if (this.selectedRowKeys.length <= 0) {
+        this.$message.warning('请选择一条记录！')
+        return
+      }
+      const that = this
+      this.$confirm({
+        title: '确认删除',
+        content: '是否删除选中数据?',
+        onOk: function () {
+          that.fileList = that.fileList.filter(tt => !that.selectedRowKeys.includes(tt.id))
+          that.onClearSelected()
+        }
+      })
+    },
+    beforeUpload(file) {
+      this.uploadGoOn = true
+      file.uploadGoOn = true
+      const fileSize = file.size // 上传的文件大小
+      const fileType = file.type // 上传的文件类型
+      if (fileSize > 1024 * 1024 * 100) {
+        this.$message.warning('文件大小限制为100M')
+        this.uploadGoOn = false
+        file.uploadGoOn = false
+        return false
+      }
+      // 不等于全部类型可以上传的时候，对上传的文件进行判断
+      if (this.fileType !== FILE_TYPE_ALL) {
+        // filter(tt => fileType.indexOf(tt) > -1)   判断用户传的文件类型，和要求传的文件类型是否一致
+        // 当上传的图片格式为jpg时，在此组件中，会返回类型为 image/jpeg  ElememntUI设计如此 所以需要把用户传下来的jpg强制改成jpeg
+        this.fileTypes = this.fileTypes.replace('jpg', 'jpeg')
+        const arr = this.fileTypes.split(',').filter(tt => fileType.indexOf(tt) > -1)
+        if (arr.length === 0) {
+          this.$message.warning(this.fileTypeErrorMessage || `请上传${this.fileTypes}文件`)
+          this.uploadGoOn = false
+          file.uploadGoOn = false
+          return false
+        }
+      }
+      return true
+    },
+    handleChange(info) {
+      if (info.file.status !== 'uploading') {
+        console.log(info.file, info.fileList)
+      }
+      if (info.file.status === 'done') {
+        if (info.file.response.success) {
+          // this.$message.success(`${info.file.name} 文件上传成功`);
+          if (info.file.response.code === 201) {
+            let {message, result: {msg, fileUrl, fileName}} = info.file.response
+            let href = window._CONFIG['domianURL'] + fileUrl
+            this.$warning({
+              title: message,
+              content: (<div>
+                  <span>{msg}</span>
+                  <br/>
+                  <span>具体详情请
+                      <a href={href} target="_blank" download={fileName}>点击下载</a>
+                    </span>
+                </div>
+              )
+            })
+          } else {
+            this.$message.success(info.file.response.message || `${info.file.name} 文件上传成功`)
+          }
+
+          this.fileList.push(info.file.response.result)
+        } else {
+          this.messageLineFeed('文件导入错误', info.file.response.message)
+        }
+      } else if (info.file.status === 'error') {
+        if (info.file.response.status === 500) {
+          let data = info.file.response
+          const token = Vue.ls.get(ACCESS_TOKEN)
+          if (token && data.message.includes('Token失效')) {
+            Modal.error({
+              title: '登录已过期',
+              content: '很抱歉，登录已过期，请重新登录',
+              okText: '重新登录',
+              mask: false,
+              onOk: () => {
+                store.dispatch('Logout').then(() => {
+                  Vue.ls.remove(ACCESS_TOKEN)
+                  window.location.reload()
+                })
+              }
+            })
+          }
+        } else {
+          this.$message.error(`文件上传失败: ${info.file.msg} `)
+        }
+      }
+
+    },
+    /**
+     * 对包含<br/>的后端错误信息进行处理
+     * @param title
+     * @param content
+     */
+    messageLineFeed(title, content) {
+      const messageArr = content.split('<br/>')
+      let htmlDom = []
+      messageArr.map(tt => {
+        if (tt) {
+          htmlDom.push((<div>{tt}</div>))
+        }
+      })
+      this.$warning({
+        title: title,
+        content: (h) => <div>
+          {htmlDom}
+        </div>
+      })
+    }
   }
 }
 </script>
 
 <style scoped lang="less">
 @import '~@assets/less/common.less';
+/*表格滚动条*/
+.ant-table-body {
+  overflow-x: auto!important;
+}
+
 
 </style>