index.vue 10.1 KB
Newer Older
1
<template>
jingnan's avatar
jingnan committed
2
  <div class="BiographicDataUpload">
3 4 5 6 7 8 9 10 11 12 13 14 15
    <dee-tools slot="header" :tools="tools" mode="normal" :collapse="false" />
    <div class="dee-table dee-table-dis-border">
      <el-table
        ref="table"
        :data="tableData"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column prop="contentType" label="附件类型">
          <template slot-scope="scope">
jingnan's avatar
jingnan committed
16
            <el-select v-if="!scope.row.id&&showBtns" v-model="scope.row.contentType" placeholder="请选择">
17 18 19 20 21
              <el-option
                v-for="i in contentTypeOptions"
                :key="i.value"
                :label="i.label"
                :value="i.value"
22
                :disabled="disabledOptions.includes(i.value)"
23 24 25 26 27
              />
            </el-select>
            <span v-else>{{ scope.row.contentType }}</span>
          </template>
        </el-table-column>
jingnan's avatar
jingnan committed
28
        <el-table-column prop="fileName" label="文件名">
29
          <template slot-scope="scope">
jingnan's avatar
jingnan committed
30 31 32 33 34 35 36 37 38 39 40 41
            <span
              class="link"
              @click="(val)=> {
                loadFile(scope.row)
              }"
            >{{ scope.row.fileName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="uoloadfileName" label="上传附件">
          <template slot-scope="scope">
            <div v-if="!scope.row.id&&showBtns" class="importTemp-com">
42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
              <el-upload
                ref="upload"
                class="upload-demo"
                action=""
                :with-credentials="true"
                accept=".pdf"
                :on-change="(fileList)=>{
                  fileChange(fileList,scope)
                }"
                :auto-upload="false"
                :show-file-list="false"
              >
                <el-button
                  class="border-none"
                  style="width:80px !important;"
                >
                  选择文件
                </el-button>
              </el-upload>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="showBtns" class="btns">
        <el-button
          type="primary"
          size="small"
          class="min-width-80"
          @click="submitUpload"
        >完成</el-button>

        <el-button
          class="min-width-80"
          size="small"
          @click="handleClose"
        >取消</el-button>
      </div>
    </div></div>

</template>

<script>
import { post } from '@/utils/http'
jingnan's avatar
jingnan committed
85
import { downFileByFileId } from '@/api/file'
86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120
export default {
  name: 'BiographicDataUpload',
  componentName: '履历本上传附件',
  props: {
    basicData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: false,
      showBtns: false,
      tableData: [],
      tools: [{
        name: '新增',
        icon: '/icons/c-add.png',
        handler: {
          click: () => {
            this.showBtns = true
            this.handleAdd()
          }
        }
      },
      {
        name: '删除',
        icon: '/icons/c-creatbackups.png',
        handler: {
          click: () => {
            this.showBtns = true
            this.handleRemove()
          }
        }
      }],
      extension: [],
jingnan's avatar
jingnan committed
121
      options: [],
122 123
      currentSelection: [],
      disabledOptions: []
124 125 126
    }
  },
  computed: {
jingnan's avatar
jingnan committed
127 128 129 130 131 132 133 134 135 136
    contentTypeOptions() {
      if (this.basicData.subTypeName === 'BiographicData') {
        return this.options.filter(item => item.value !== 'AirworthinessLabelOrCertificate')
      } else if (this.basicData.subTypeName === 'ProductCertificate') {
        return this.options.filter(item => item.value === 'briefTechnicalPerformance' || item.value === 'acceptanceCertificate' || item.value === 'match' || item.value === 'lifeAndReliability')
      } else {
        return this.options.filter(item => item.value === 'AirworthinessLabelOrCertificate')
      }
    }

137 138
  },
  watch: {
jingnan's avatar
jingnan committed
139
    'basicData.id': {
140 141 142
      immediate: true,
      deep: true,
      handler(val) {
jingnan's avatar
jingnan committed
143
        if (val) {
144 145 146 147 148
          this.$nextTick(() => {
            this.getTableData()
          })
        }
      }
149 150 151 152 153 154 155 156 157 158 159 160 161 162 163
    },
    tableData: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val) {
          this.disabledOptions = val.map(item => {
            if (item.id) {
              return this.$utils.getParamsFromLists(this.options, 'label', item.contentType, 'value')
            } else {
              return item.contentType
            }
          })
        }
      }
164 165 166
    }
  },
  created() {
jingnan's avatar
jingnan committed
167
    this.getDicData()
168 169 170 171 172 173
  },
  mounted() {
  },
  methods: {
    getDicData() {
      this.$utils.getDicListByCode('resumeBookConentType').then(res => {
jingnan's avatar
jingnan committed
174
        this.options = res
175 176 177
      })
    },
    getTableData() {
jingnan's avatar
jingnan committed
178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193
      const params = {
        'pageFrom': 1,
        'pageSize': 1,
        'searchItems': {
          'items': [
            {
              'fieldName': 'id',
              'operator': 'EQ',
              'value': this.basicData.id
            }
          ]
        },
        'sortItem': [
          {
            'fieldName': 'modifyTime',
            'sortOrder': 'asc'
194
          }
jingnan's avatar
jingnan committed
195 196 197 198 199 200 201 202 203 204 205
        ],
        'openProps': [
          {
            'name': 'objFileLinks',
            'openProps': [
              {
                'name': 'target'
              }
            ]
          }
        ]
206
      }
jingnan's avatar
jingnan committed
207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225
      this.loading = true
      this.$api.searchApi('BiographicData', params).then(res => {
        this.tableData = []
        if (res.items && res.items.content && res.items.content[0] && res.items.content[0].objFileLinks) {
          res.items.content[0].objFileLinks.map(item => {
            if (item.target && item.target.originalFileName) {
              this.tableData.push({
                ...item,
                fileName: item.target.originalFileName,
                contentType: this.$utils.getParamsFromLists(this.options, 'value', item.contentType, 'label')

              })
            }
          })
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244
    },
    handleAdd() {
      this.tableData.push({
        tempId: parseInt(Math.random() * 100000000000000, 10),
        fileName: '',
        contentType: ''
      })
    },
    handleSelectionChange(val) {
      this.currentSelection = val
    },
    handleRemove() {
      if (this.currentSelection.length === 0) {
        this.$utils.showMessageWarning('请至少选择一条记录!')
      } else {
        this.tableData = this.tableData.filter(x => this.currentSelection.every(y => x.id !== y.id || x.tempId !== y.tempId))
      }
    },
    fileChange(fileList, scope) {
245 246 247 248 249
      const fileNameRepeat = this.tableData.find(r => r.fileName === fileList.name)
      if (fileNameRepeat) {
        this.$utils.showMessageError('同一附件不能重复上传!')
        return false
      }
250 251 252 253 254
      this.showBtns = true
      this.$set(scope.row, 'fileName', fileList.name)
      this.$set(scope.row, 'fileListRaw', fileList.raw)
    },
    submitUpload() {
jingnan's avatar
jingnan committed
255 256
      const flag = this.tableData.find(item => !item.fileName || !item.contentType)
      if (flag) return this.$utils.showMessageWarning('请完成列表内数据的填写!')
257 258 259 260 261
      const contentTypeArr = this.tableData.map(r => r.contentType && this.$utils.getParamsFromLists(this.options, 'value', r.contentType, 'label'))
      if (this.isRepeat(contentTypeArr)) {
        this.$utils.showMessageError('附件类型不能重复!')
        return
      }
262
      this.loading = true
jingnan's avatar
jingnan committed
263 264
      const fileExtVOS = [] // 新增文件的名称和附件类型
      const objFileLinkIds = [] // 已有的文件
265 266
      const formData = new FormData()
      this.tableData.forEach(row => {
jingnan's avatar
jingnan committed
267 268 269 270 271 272
        if (!row.id) {
          formData.append('multipartFiles', row.fileListRaw) // 新增文件
          fileExtVOS.push({
            'fileName': row.fileName,
            'contentType': row.contentType
          })
273
        } else {
jingnan's avatar
jingnan committed
274
          objFileLinkIds.push(row.id)
275 276
        }
      })
jingnan's avatar
jingnan committed
277
      formData.append('objFileLinkIds', new Blob([JSON.stringify(objFileLinkIds)], { type: 'application/json' }))
278 279 280 281 282 283 284 285 286 287 288 289 290 291
      formData.append('fileExtVOS', new Blob([JSON.stringify(fileExtVOS)], { type: 'application/json' }))
      post(`/BiographicData/uploadMultiFile/${this.basicData.id}`, formData)
        .then((res) => {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.loading = false
          this.handleClose()
        })
        .catch((res) => {
          this.loading = false
        })
    },
jingnan's avatar
jingnan committed
292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315
    loadFile(val) {
      downFileByFileId(val.sourceIdType, val.sourceId, val.id).then(res => {
        this.downLoadFileUrl(res)
      })
    },
    downLoadFileUrl(res) {
      if (res.headers['content-disposition']) {
        const fileName = decodeURI(res.headers['content-disposition'].substring(res.headers['content-disposition'].indexOf('=') + 1, res.headers['content-disposition'].length))
        const url = window.URL.createObjectURL(new Blob([res.data], { type: res.headers['content-type'] }))
        this.$utils.downLoadFileUrl(url, decodeURI(fileName))
      } else {
        if (res.data instanceof Blob) {
          var reader = new FileReader()
          reader.addEventListener('loadend', () => {
            const message = reader.result && JSON.parse(reader.result)
            this.$utils.showMessageWarning(message ? message.message : '数据包下载出错:未找到数据包内容的下载链接,请联系管理员排查问题!')
          })
          reader.readAsText(res.data, 'utf-8')
        } else {
          const message = res.data && res.data.message
          this.$utils.showMessageWarning(message || '数据包下载出错:未找到数据包内容的下载链接,请联系管理员排查问题!')
        }
      }
    },
316 317 318
    handleClose() {
      this.showBtns = false
      this.getTableData()
319 320 321 322 323 324 325 326
    },
    isRepeat(arr) {
      const hash = {}
      for (const i in arr) {
        if (hash[arr[i]]) { return true }
        hash[arr[i]] = true
      }
      return false
327 328 329 330 331 332 333 334 335 336 337 338 339 340 341
    }

  }
}
</script>
<style lang="scss">
.BiographicDataUpload{
  .btns{
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }

}
</style>