feat: 任务(新增、编辑、详情) 添加 文件信息内容

src/views/task/edit/index.vue

@@ -296,6 +296,16 @@
         @change="handleModChange"
       />
     </el-form>
+    <!-- 文件上传 -->
+    <div class="tip-navigation">
+      <div class="tip"></div>
+      <div class="tip-title">文件信息</div>
+    </div>
+    <DocumentInfo
+      class="global-left-margin"
+      :pass-data="passDocumentInfoArr"
+      @change="handleDocumentInfoChange"
+    />
     <!--返回按钮-->
     <div class="bottom-btn">
       <footer-button
@@ -328,6 +338,7 @@ import {
 } from '@/api/task/task'
 import { mapGetters } from 'vuex'
 import { getDicts } from '@/api/system/dict/data'
+import DocumentInfo from '@/views/task/new/components/DocumentInfo.vue'
 
 export default {
   dicts: [
@@ -337,11 +348,14 @@ export default {
     'inspection_item'
   ],
   components: {
+    DocumentInfo,
     CarInfo,
     PartInfo
   },
   data() {
     return {
+      passDocumentInfoArr: [], // 接详情、传入子组件
+      documentInfoArr: [], // 调用新增接口，使用(拿取的子组件数据)
       // 最终提交
       taskCreateRequest: {
         standardId: '', // 检验依据
@@ -609,6 +623,9 @@ export default {
     ...mapGetters(['standard', 'standardList', 'testScenarioList'])
   },
   methods: {
+    handleDocumentInfoChange(value) {
+      this.documentInfoArr = value
+    },
     getTaskDetail(taskId) {
       getTaskById({ id: taskId }).then(response => {
         console.log('response', response)
@@ -677,12 +694,8 @@ export default {
             item.flag = 1
           })
         }
-        console.log(
-          '零件样品信息',
-          this.taskDetail.partVehicleSample,
-          this.partInfoArr
-        )
-        console.log('model', this.model)
+        // 文件
+        this.passDocumentInfoArr = this.taskDetail.fileList
       })
     },
     selectAll() {
@@ -770,6 +783,8 @@ export default {
               item.flag = 1
             })
           }
+          // 文件信息
+          this.passDocumentInfoArr = this.taskTemporaryStorage.fileList
         }
       })
     },
@@ -1058,6 +1073,8 @@ export default {
             this.taskCreateRequest.partSample.forEach(item => {
               delete item.id
             })
+            // 文件
+            this.taskCreateRequest.fileList = this.documentInfoArr
             console.log('发布...', this.taskCreateRequest)
             if (this.taskId === undefined) {
               createTask(this.taskCreateRequest).then(response => {

src/views/task/new/components/DocumentInfo.vue

+<template>
+  <div class="upload-file">
+    <!-- 上传按钮 -->
+    <el-upload
+      v-if="!isDetail"
+      multiple
+      ref="fileUpload"
+      :action="uploadFileUrl"
+      :before-upload="handleBeforeUpload"
+      :file-list="fileList"
+      :limit="limit"
+      :on-error="handleUploadError"
+      :on-exceed="handleExceed"
+      :on-success="handleUploadSuccess"
+      :show-file-list="false"
+      :headers="headers"
+      class="upload-file-uploader"
+    >
+      <!-- 上传按钮 -->
+      <el-button size="mini" type="primary">选取文件</el-button>
+    </el-upload>
+    <!-- 表格 -->
+    <el-table style="width: 100%" border :data="tableData">
+      <el-table-column label="文件名称" align="left" prop="name">
+        <template slot-scope="{ row }">
+          <span>{{ row.name }}</span>
+        </template>
+      </el-table-column>
+      <!--      <el-table-column v-if="isDetail" label="文件" align="left" prop="url">-->
+      <!--        <template slot-scope="{ row }">-->
+      <!--          <el-image-->
+      <!--            style="width: 36px; height: 36px"-->
+      <!--            :src="showUrl + row.url"-->
+      <!--            :preview-src-list="[showUrl + row.url]"-->
+      <!--          >-->
+      <!--          </el-image>-->
+      <!--        </template>-->
+      <!--      </el-table-column>-->
+      <el-table-column
+        v-if="!isDetail"
+        label="排序"
+        align="center"
+        prop="orderIndex"
+        width="200"
+      >
+        <template slot-scope="scope">
+          <div class="sortable-handle-table">
+            <icon-park type="sort-three" size="14" fill="#F9A221" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="!isDetail"
+        width="240"
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <div class="actions-container">
+            <page-button
+              icon="delete"
+              title="删除"
+              class="button-item"
+              @click="handleDeleteFile(scope.row)"
+            ></page-button>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import Sortable from 'sortablejs'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'DocumentInfo',
+  props: {
+    // 值
+    value: [String, Object, Array],
+    // 数量限制
+    limit: {
+      type: Number,
+      default: 5
+    },
+    // 大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 5
+    },
+    // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: {
+      type: Array,
+      default: () => ['doc', 'xls', 'ppt', 'txt', 'pdf', 'jpg', 'png', 'jpeg']
+    },
+    passData: {
+      type: Array,
+      default: () => []
+    },
+    isDetail: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      number: 0,
+      uploadList: [],
+      showUrl: 'http://49.232.167.247:22038',
+      baseUrl: process.env.VUE_APP_BASE_API,
+      uploadFileUrl: process.env.VUE_APP_BASE_API + '/common/uploadMinio', // 上传文件服务器地址
+      headers: {
+        Authorization: 'Bearer ' + getToken()
+      },
+      fileList: [],
+      tableData: [],
+      currentFile: {} // 当前上传文件
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val) {
+          let temp = 1
+          // 首先将值转为数组
+          const list = Array.isArray(val) ? val : this.value.split(',')
+          // 然后将数组转为对象数组
+          this.fileList = list.map(item => {
+            if (typeof item === 'string') {
+              item = { name: item, url: item }
+            }
+            item.uid = item.uid || new Date().getTime() + temp++
+            return item
+          })
+        } else {
+          this.fileList = []
+          return []
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    tableData: {
+      handler(newValue, oldValue) {
+        console.log('new', newValue)
+        this.emitChange()
+      },
+      deep: true
+    },
+    passData: {
+      handler(newValue, oldValue) {
+        this.tableData = JSON.parse(JSON.stringify(newValue))
+      },
+      deep: true
+    }
+  },
+  created() {
+    // this.tableData = this.passTableData
+    this.$nextTick(() => {
+      this.rowDrop()
+    })
+  },
+  methods: {
+    handleDeleteFile(row) {
+      this.$confirm('是否确认删除此文件', '删除', {
+        confirmButtonText: '确定',
+        concelButtonText: '取消',
+        type: 'warning',
+        customClass: 'box-logout',
+        cancelButtonClass: 'resetBtn',
+        closeOnClickModal: false,
+        confirmButtonClass: 'queryBtn'
+      }).then(() => {
+        const index = this.tableData.findIndex(item => item === row)
+        if (index > -1) {
+          this.tableData.splice(index, 1)
+        }
+      })
+    },
+    emitChange() {
+      this.$emit('change', this.tableData)
+    },
+    // 上传前校检格式和大小
+    handleBeforeUpload(file) {
+      // 校检文件类型
+      if (this.fileType) {
+        const fileName = file.name.split('.')
+        const fileExt = fileName[fileName.length - 1]
+        const isTypeOk = this.fileType.indexOf(fileExt) >= 0
+        if (!isTypeOk) {
+          this.$modal.msgError(
+            `文件格式不正确, 请上传${this.fileType.join('/')}格式文件!`
+          )
+          return false
+        }
+      }
+      // 校检文件大小
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize
+        if (!isLt) {
+          this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`)
+          return false
+        }
+      }
+      this.$modal.loading('正在上传文件，请稍候...')
+      this.number++
+      return true
+    },
+    // 文件个数超出
+    handleExceed() {
+      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`)
+    },
+    // 上传失败
+    handleUploadError(err) {
+      console.log('err', err)
+      this.$modal.msgError('上传文件失败，请重试')
+      this.$modal.closeLoading()
+    },
+    // 上传成功回调
+    handleUploadSuccess(res, file) {
+      if (res.code === 200) {
+        console.log('res成功', res)
+        this.tableData.push({
+          name: res.originalFilename,
+          url: res.url,
+          edit: 1
+        })
+        this.uploadList.push({ name: res.fileName, url: res.fileName })
+        this.uploadedSuccessfully()
+      } else {
+        this.number--
+        this.$modal.closeLoading()
+        this.$modal.msgError(res.msg)
+        this.$refs.fileUpload.handleRemove(file)
+        this.uploadedSuccessfully()
+      }
+    },
+    // 删除文件
+    handleDelete(index) {
+      this.fileList.splice(index, 1)
+      this.$emit('input', this.listToString(this.fileList))
+    },
+    // 上传结束处理
+    uploadedSuccessfully() {
+      if (this.number > 0 && this.uploadList.length === this.number) {
+        this.fileList = this.fileList.concat(this.uploadList)
+        this.uploadList = []
+        this.number = 0
+        this.$emit('input', this.listToString(this.fileList))
+        this.$modal.closeLoading()
+      }
+    },
+    // 获取文件名称
+    getFileName(name) {
+      // 如果是url那么取最后的名字 如果不是直接返回
+      if (name.lastIndexOf('/') > -1) {
+        return name.slice(name.lastIndexOf('/') + 1)
+      } else {
+        return name
+      }
+    },
+    // 对象转成指定字符串分隔
+    listToString(list, separator) {
+      let strs = ''
+      separator = separator || ','
+      for (const i in list) {
+        strs += list[i].url + separator
+      }
+      return strs !== '' ? strs.substr(0, strs.length - 1) : ''
+    },
+    /** 行-拖拽 */
+    rowDrop() {
+      const tbody = document.querySelector(
+        '.upload-file .el-table__body-wrapper tbody'
+      )
+      const _this = this
+      Sortable.create(tbody, {
+        handle: '.sortable-handle-table',
+        onEnd(evt) {
+          _this.tableData.splice(
+            evt.newIndex,
+            0,
+            _this.tableData.splice(evt.oldIndex, 1)[0]
+          )
+          const newArray = _this.tableData.slice(0)
+          _this.tableData = []
+          _this.$nextTick(() => {
+            _this.tableData = newArray
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.upload-file-uploader {
+  margin-bottom: 5px;
+}
+.upload-file-list .el-upload-list__item {
+  border: 1px solid #e4e7ed;
+  line-height: 2;
+  margin-bottom: 10px;
+  position: relative;
+}
+.upload-file-list .ele-upload-list__item-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: inherit;
+}
+.ele-upload-list__item-content-action .el-link {
+  margin-right: 10px;
+}
+.actions-container {
+  display: flex;
+  justify-content: center;
+}
+.sortable-handle-table {
+  cursor: move;
+}
+</style>

src/views/task/new/index.vue

@@ -295,6 +295,16 @@
         @change="handleModChange"
       />
     </el-form>
+    <!-- 文件上传 -->
+    <div class="tip-navigation">
+      <div class="tip"></div>
+      <div class="tip-title">文件信息</div>
+    </div>
+    <DocumentInfo
+      class="global-left-margin"
+      :pass-data="passDocumentInfoArr"
+      @change="handleDocumentChange"
+    />
     <!--返回按钮-->
     <div class="bottom-btn">
       <footer-button
@@ -313,7 +323,6 @@
 </template>
 <script>
 import Sortable from 'sortablejs'
-import { manufacturerData } from '../../../api/task/new'
 import CarInfo from './components/CarInfo'
 import PartInfo from './components/PartInfo'
 import { selectSamplePage } from '@/api/system/sample'
@@ -328,6 +337,8 @@ import {
 } from '@/api/task/task'
 import { mapGetters } from 'vuex'
 import { getDicts } from '@/api/system/dict/data'
+import DocumentInfo from '@/views/task/new/components/DocumentInfo.vue'
+
 export default {
   dicts: [
     'sys_task_status',
@@ -336,11 +347,15 @@ export default {
     'inspection_item'
   ],
   components: {
+    DocumentInfo,
     CarInfo,
     PartInfo
   },
   data() {
     return {
+      passDocumentInfoArr: [],
+      // 文件信息
+      documentInfoArr: [],
       // 最终提交
       taskCreateRequest: {
         standardId: '', // 检验依据
@@ -377,7 +392,9 @@ export default {
             sampleId: '', // 样品id
             flag: 1
           }
-        ]
+        ],
+        // 文件
+        fileList: []
       },
       // 当前填写的整车样品信息
       currentVehicleSampleInformation: [],
@@ -781,6 +798,7 @@ export default {
               item.flag = 1
             })
           }
+          this.passDocumentInfoArr = this.taskTemporaryStorage.fileList
         }
       })
     },
@@ -801,6 +819,9 @@ export default {
       this.currentPartSampleInformation = cards
       console.log('PartInfo组件传值', cards)
     },
+    handleDocumentChange(data) {
+      this.documentInfoArr = data
+    },
     getSampleInformation() {
       // 查询整车样品信息
       selectSamplePage({ pageNum: 1, pageSize: 999, flag: 0 }).then(
@@ -1115,6 +1136,8 @@ export default {
             this.taskCreateRequest.partSample.forEach(item => {
               delete item.id
             })
+            // 文件
+            this.taskCreateRequest.fileList = this.documentInfoArr
             console.log('发布...', this.taskCreateRequest)
             if (this.taskId === undefined) {
               createTask(this.taskCreateRequest).then(response => {
@@ -1156,7 +1179,8 @@ export default {
         this.areAllPropertiesEmpty(this.model) &&
         this.tableData.length === 0 &&
         this.currentVehicleSampleInformation.length === 0 &&
-        this.currentPartSampleInformation.length === 0
+        this.currentPartSampleInformation.length === 0 &&
+        this.passDocumentInfoArr.length === 0
       ) {
         this.$modal.msgError('请填写部分内容再进行暂存')
         return
@@ -1182,6 +1206,7 @@ export default {
       this.taskCreateRequest.partSample.forEach(item => {
         delete item.id
       })
+      this.taskCreateRequest.fileList = this.documentInfoArr
       console.log('暂存', this.taskCreateRequest)
       if (this.taskTemporaryStorage !== null) {
         // 暂存有数据再次暂存走编辑

src/views/task/task-detail/index.vue

@@ -249,6 +249,16 @@
         :part-sample-information="partSampleInformationList"
         @change="handleModChange"
       />
+      <!-- 文件上传 -->
+      <div class="tip-navigation">
+        <div class="tip"></div>
+        <div class="tip-title">文件信息</div>
+      </div>
+      <DocumentInfo
+        class="global-left-margin"
+        :pass-data="passDocumentInfoArr"
+        :is-detail="true"
+      />
     </el-form>
   </page-standard>
 </template>
@@ -262,6 +272,7 @@ import { getUserByRole } from '@/api/system/user'
 import { createTask, getTaskById } from '@/api/task/task'
 import { mapGetters } from 'vuex'
 import { getDicts } from '@/api/system/dict/data'
+import DocumentInfo from '@/views/task/new/components/DocumentInfo.vue'
 export default {
   dicts: [
     'sys_task_status',
@@ -270,6 +281,7 @@ export default {
     'inspection_item'
   ],
   components: {
+    DocumentInfo,
     CarInfo,
     PartInfo
   },
@@ -312,6 +324,8 @@ export default {
           }
         ]
       },
+      // 文件信息
+      passDocumentInfoArr: [],
       // 当前填写的整车样品信息
       currentVehicleSampleInformation: [],
       // 当前填写的零部件样品信息
@@ -584,6 +598,8 @@ export default {
             item.flag = 1
           })
         }
+        // 文件信息
+        this.passDocumentInfoArr = this.taskDetail.fileList
         const taskList = this.taskDetail.taskList.split(',')
         if (
           (taskList.length === 1 && taskList.includes('trfis')) ||