8 changed files with 838 additions and 107 deletions
			
			
		- 
					7src/assets/styles/yxk-admin.scss
 - 
					252src/views/components/archivesDetail/index.vue
 - 
					340src/views/components/archivesDetail/uploadFile/index.vue
 - 
					105src/views/system/processManage/runningProcess/module/approvalList/index.vue
 - 
					109src/views/system/processManage/runningProcess/module/businessDetails/index.vue
 - 
					21src/views/system/processManage/runningProcess/module/detail.vue
 - 
					3src/views/system/processManage/runningProcess/module/processImg/index.vue
 - 
					108src/views/system/processManage/runningProcess/module/taskList/index.vue
 
@ -0,0 +1,252 @@ | 
				
			|||
<template> | 
				
			|||
  <el-dialog class="upload-dialog" :title="detailTitle" :close-on-click-modal="false" :visible.sync="archivesInfoVisible" append-to-body :before-close="handleClose"> | 
				
			|||
    <span class="dialog-right-top" /> | 
				
			|||
    <span class="dialog-left-bottom" /> | 
				
			|||
    <div class="setting-dialog"> | 
				
			|||
      <div class="archives-info-wrap"> | 
				
			|||
        <!-- tab --> | 
				
			|||
        <ul class="archives-tab"> | 
				
			|||
          <li :class="{'active': archivesTabIndex == 0}" @click="changeActiveTab(0)">基本信息</li> | 
				
			|||
          <li v-if="isHasFile" :class="{'active': archivesTabIndex == 1}" @click="changeActiveTab(1)">附件</li> | 
				
			|||
          <li :class="{'active': archivesTabIndex == 2}" @click="changeActiveTab(2)">元数据</li> | 
				
			|||
        </ul> | 
				
			|||
        <!-- 基本信息 --> | 
				
			|||
        <div v-if="archivesTabIndex==0" class="base-info item-content"> | 
				
			|||
          <el-row> | 
				
			|||
            <el-col v-for="(item,index) in archivesDetailsData" v-show="index<archivesDetailsData.length-5" :key="index" :span="item.isLine ? 24 : 12" class="base-info-item"> | 
				
			|||
              <span>{{ item.fieldCnName }}:</span> | 
				
			|||
              <p :style="{ width: ( item.editLength ? item.editLength+'px' : '' ), flex: ( !item.editLength ? 1 : '' )}">{{ item.context }}</p> | 
				
			|||
            </el-col> | 
				
			|||
          </el-row> | 
				
			|||
          <el-row v-if="isDetailsInfo"> | 
				
			|||
            <el-col v-for="(item,index) in archivesDetailsData.slice(archivesDetailsData.length-5,archivesDetailsData.length)" :key="'last'+index" :span=" 12" class="base-info-item"> | 
				
			|||
              <span>{{ item.fieldCnName }}:</span> | 
				
			|||
              <div v-if="item.fieldName === 'folder_location' && item.context" :style="{ width: item.editLength+'px', marginTop:'-6px'}"> | 
				
			|||
                <div v-if="item.context.indexOf(',')"> | 
				
			|||
                  <el-tag | 
				
			|||
                    v-for="(val,key) in item.context.split(',')" | 
				
			|||
                    :key="key" | 
				
			|||
                    :type="val" | 
				
			|||
                    effect="dark" | 
				
			|||
                  > | 
				
			|||
                    {{ val }} | 
				
			|||
                  </el-tag> | 
				
			|||
                </div> | 
				
			|||
                <div v-else-if="!item.context.indexOf(',')"> | 
				
			|||
                  <el-tag effect="dark">{{ item.context }}</el-tag> | 
				
			|||
                </div> | 
				
			|||
              </div> | 
				
			|||
              <div v-else :style="{ width: item.editLength+'px'}" :class="[ (item.fieldName === 'borrow_type') ? 'row-state row-lending' : '' ]"> | 
				
			|||
                {{ item.context }} | 
				
			|||
              </div> | 
				
			|||
            </el-col> | 
				
			|||
          </el-row> | 
				
			|||
        </div> | 
				
			|||
        <!-- 附件 --> | 
				
			|||
        <UploadFile v-if="archivesTabIndex==1" ref="uploadFile" class="item-content" :is-upload-detail="false" :category-id="categoryId" :arc-id="arcId" /> | 
				
			|||
        <!-- 元数据 --> | 
				
			|||
        <div v-if="archivesTabIndex==2" class="item-content"> | 
				
			|||
          <pre v-highlightjs="xml_show"> | 
				
			|||
            <code class="highlight_s"> | 
				
			|||
              {[xml_show]} | 
				
			|||
            </code> | 
				
			|||
          </pre> | 
				
			|||
        </div> | 
				
			|||
      </div> | 
				
			|||
    </div> | 
				
			|||
  </el-dialog> | 
				
			|||
</template> | 
				
			|||
 | 
				
			|||
<script> | 
				
			|||
import { form } from '@crud/crud' | 
				
			|||
import { FetchArchivesDetails, FetchArchivesMetadata } from '@/api/archivesManage/archivesList' | 
				
			|||
import UploadFile from './uploadFile/index' | 
				
			|||
export default { | 
				
			|||
  name: 'ArchivesInfo', | 
				
			|||
  components: { UploadFile }, | 
				
			|||
  mixins: [ | 
				
			|||
    form({}) | 
				
			|||
  ], | 
				
			|||
  inject: ['recycleMain'], | 
				
			|||
  props: { | 
				
			|||
    categoryId: { | 
				
			|||
      type: String, | 
				
			|||
      default: function() { | 
				
			|||
        return '' | 
				
			|||
      } | 
				
			|||
    }, | 
				
			|||
    arcId: { | 
				
			|||
      type: String, | 
				
			|||
      default: function() { | 
				
			|||
        return '' | 
				
			|||
      } | 
				
			|||
    } | 
				
			|||
  }, | 
				
			|||
  data() { | 
				
			|||
    return { | 
				
			|||
      detailTitle: '', | 
				
			|||
      isHasFile: false, // 卷内/文件才有附件 | 
				
			|||
      isDetailsInfo: false, // 项目不显示最下面5行基本信息 | 
				
			|||
      isTidOrBorrow: true, // 卷内不显示tid/借阅状态 | 
				
			|||
      archivesInfoVisible: false, | 
				
			|||
      archivesTabIndex: 0, | 
				
			|||
      archivesDetailsData: [], | 
				
			|||
      archivesDetailsMetadata: [], | 
				
			|||
      xml_show: null | 
				
			|||
    } | 
				
			|||
  }, | 
				
			|||
  mounted() { | 
				
			|||
  }, | 
				
			|||
  methods: { | 
				
			|||
    getDetial(rowId) { | 
				
			|||
      const params = { | 
				
			|||
        categoryId: this.categoryId, | 
				
			|||
        archivesId: rowId | 
				
			|||
      } | 
				
			|||
      FetchArchivesDetails(params).then(data => { | 
				
			|||
        this.archivesDetailsData = data | 
				
			|||
        // 案卷 / 文件的借阅状态 | 
				
			|||
        this.archivesDetailsData.forEach(item => { | 
				
			|||
          if (item.fieldName === 'borrow_type') { | 
				
			|||
            if (item.context === 1) { | 
				
			|||
              item.context = '待登记' | 
				
			|||
            } else if (item.context === 2) { | 
				
			|||
              item.context = '待借阅' | 
				
			|||
            } else if (item.context === 3) { | 
				
			|||
              item.context = '待归还' | 
				
			|||
            } else if (item.context === 4 || item.context === '' || item.context === null) { | 
				
			|||
              item.context = '-' | 
				
			|||
            } else if (item.context === -1) { | 
				
			|||
              item.context = '在库' | 
				
			|||
            } | 
				
			|||
          } | 
				
			|||
        }) | 
				
			|||
        // 如果是卷内 - 不显示‘tid’/'借阅状态' | 
				
			|||
        if (!this.isTidOrBorrow) { | 
				
			|||
          const indexBorrow = this.archivesDetailsData.findIndex(item => item.fieldName === 'borrow_type') | 
				
			|||
          const indexTid = this.archivesDetailsData.findIndex(item => item.fieldName === 'tid') | 
				
			|||
          this.archivesDetailsData.splice(indexBorrow, 1) | 
				
			|||
          this.archivesDetailsData.splice(indexTid, 1) | 
				
			|||
        } | 
				
			|||
      }) | 
				
			|||
      FetchArchivesMetadata(params).then(data => { | 
				
			|||
        this.archivesDetailsMetadata = data | 
				
			|||
      }) | 
				
			|||
    }, | 
				
			|||
    setXml() { | 
				
			|||
      const xmlstr = this.archivesDetailsMetadata | 
				
			|||
      // console.log('xmlstr:', xmlstr) | 
				
			|||
      // console.log('xml转json:', this.$x2js.xml2js(xmlstr)) | 
				
			|||
      // console.log('json转xml:', this.$x2js.js2xml(this.$x2js.xml2js(xmlstr))) | 
				
			|||
      // this.xml_show = vkbeautify.xml(xmlstr) | 
				
			|||
      this.xml_show = this.showXml(xmlstr) | 
				
			|||
    }, | 
				
			|||
    changeActiveTab(index) { | 
				
			|||
      this.archivesTabIndex = index | 
				
			|||
      if (this.archivesTabIndex === 2) { | 
				
			|||
        this.setXml() | 
				
			|||
      } | 
				
			|||
      this.$nextTick(() => { | 
				
			|||
        if (this.$refs.uploadFile) { | 
				
			|||
          this.$refs.uploadFile.tableData = [] | 
				
			|||
          this.$refs.uploadFile.getFileList() | 
				
			|||
        } | 
				
			|||
      }) | 
				
			|||
    }, | 
				
			|||
    // 删除 - 关闭 | 
				
			|||
    handleClose(done) { | 
				
			|||
      this.archivesInfoVisible = false | 
				
			|||
      done() | 
				
			|||
    }, | 
				
			|||
    // xml格式化 | 
				
			|||
    showXml(str) { | 
				
			|||
      var that = this | 
				
			|||
      var text = str | 
				
			|||
      // 去掉多余的空格 | 
				
			|||
      text = | 
				
			|||
        '\n' + | 
				
			|||
        text | 
				
			|||
          .replace(/(<\w+)(\s.*?>)/g, function($0, name, props) { | 
				
			|||
            return name + ' ' + props.replace(/\s+(\w+=)/g, ' $1') | 
				
			|||
          }) | 
				
			|||
          .replace(/>\s*?</g, '>\n<') | 
				
			|||
      // 把注释编码 | 
				
			|||
      text = text | 
				
			|||
        .replace(/\n/g, '\r') | 
				
			|||
        .replace(/<!--(.+?)-->/g, function($0, text) { | 
				
			|||
          var ret = '<!--' + escape(text) + '-->' | 
				
			|||
          return ret | 
				
			|||
        }) | 
				
			|||
        .replace(/\r/g, '\n') | 
				
			|||
 | 
				
			|||
      // 调整格式 | 
				
			|||
      var rgx = /\n(<(([^\?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/gm | 
				
			|||
      var nodeStack = [] | 
				
			|||
      var output = text.replace(rgx, function( | 
				
			|||
        $0, | 
				
			|||
        all, | 
				
			|||
        name, | 
				
			|||
        isBegin, | 
				
			|||
        isCloseFull1, | 
				
			|||
        isCloseFull2, | 
				
			|||
        isFull1, | 
				
			|||
        isFull2 | 
				
			|||
      ) { | 
				
			|||
        var isClosed = | 
				
			|||
          isCloseFull1 === '/' || | 
				
			|||
          isCloseFull2 === '/' || | 
				
			|||
          isFull1 === '/' || | 
				
			|||
          isFull2 === '/' | 
				
			|||
        var prefix = '' | 
				
			|||
        if (isBegin === '!') { | 
				
			|||
          prefix = that.getPrefix(nodeStack.length) | 
				
			|||
        } else { | 
				
			|||
          if (isBegin !== '/') { | 
				
			|||
            prefix = that.getPrefix(nodeStack.length) | 
				
			|||
            if (!isClosed) { | 
				
			|||
              nodeStack.push(name) | 
				
			|||
            } | 
				
			|||
          } else { | 
				
			|||
            nodeStack.pop() | 
				
			|||
            prefix = that.getPrefix(nodeStack.length) | 
				
			|||
          } | 
				
			|||
        } | 
				
			|||
        var ret = '\n' + prefix + all | 
				
			|||
        return ret | 
				
			|||
      }) | 
				
			|||
      var outputText = output.substring(1) | 
				
			|||
      // 把注释还原并解码,调格式 | 
				
			|||
      outputText = outputText | 
				
			|||
        .replace(/\n/g, '\r') | 
				
			|||
        .replace(/(\s*)<!--(.+?)-->/g, function($0, prefix, text) { | 
				
			|||
          if (prefix.charAt(0) === '\r') prefix = prefix.substring(1) | 
				
			|||
          text = unescape(text).replace(/\r/g, '\n') | 
				
			|||
          var ret = | 
				
			|||
            '\n' + prefix + '<!--' + text.replace(/^\s*/gm, prefix) + '-->' | 
				
			|||
          return ret | 
				
			|||
        }) | 
				
			|||
      outputText = outputText.replace(/\s+$/g, '').replace(/\r/g, '\r\n') | 
				
			|||
      return outputText | 
				
			|||
    }, | 
				
			|||
    getPrefix(prefixIndex) { | 
				
			|||
      var span = '    ' | 
				
			|||
      var output = [] | 
				
			|||
      for (var i = 0; i < prefixIndex; ++i) { | 
				
			|||
        output.push(span) | 
				
			|||
      } | 
				
			|||
      return output.join('') | 
				
			|||
    } | 
				
			|||
  } | 
				
			|||
} | 
				
			|||
</script> | 
				
			|||
 | 
				
			|||
<style lang="scss" scoped> | 
				
			|||
// .base-info .base-info-item span.el-tag{ | 
				
			|||
//   width: auto; | 
				
			|||
//   color: #fff; | 
				
			|||
// } | 
				
			|||
// ::v-deep .el-dialog .el-dialog__header .el-dialog__headerbtn { | 
				
			|||
//   top: 12px; | 
				
			|||
//   right: -320px; | 
				
			|||
// } | 
				
			|||
</style> | 
				
			|||
@ -0,0 +1,340 @@ | 
				
			|||
<template> | 
				
			|||
  <div class="upload-file"> | 
				
			|||
    <!-- 上传附件curd --> | 
				
			|||
    <div v-if="isUploadDetail" class="upload-curd"> | 
				
			|||
      <div class="upload-btn"> | 
				
			|||
        <el-button icon="el-icon-plus" size="small" type="primary">添加</el-button> | 
				
			|||
        <input id="upFile" type="file" name="upFile" @change="changeFile($event)"> | 
				
			|||
      </div> | 
				
			|||
      <el-button icon="el-icon-delete" :disabled="selections.length === 0" @click="toDelete(selections)">删除</el-button> | 
				
			|||
      <el-button icon="el-icon-sort" @click="showSort">排序</el-button> | 
				
			|||
    </div> | 
				
			|||
 | 
				
			|||
    <!--表格渲染--> | 
				
			|||
    <el-table | 
				
			|||
      ref="table" | 
				
			|||
      :data="tableData" | 
				
			|||
      style="min-width: 100%" | 
				
			|||
      height="calc(100vh - 382px)" | 
				
			|||
      @row-click="clickRowHandler" | 
				
			|||
      @selection-change="selectionChangeHandler" | 
				
			|||
    > | 
				
			|||
      <el-table-column v-if="isUploadDetail" type="selection" width="55" align="center" /> | 
				
			|||
      <el-table-column type="index" label="序号" width="55" align="center" /> | 
				
			|||
      <el-table-column prop="file_name" label="文件名称" show-overflow-tooltip min-width="140" align="center" /> | 
				
			|||
      <el-table-column prop="file_type" label="格式" min-width="60" align="center" /> | 
				
			|||
      <el-table-column prop="file_size" label="大小" min-width="85" align="center"> | 
				
			|||
        <template slot-scope="scope"> | 
				
			|||
          {{ (scope.row.file_size / 1024).toFixed(2) + 'kB' }} | 
				
			|||
        </template> | 
				
			|||
      </el-table-column> | 
				
			|||
      <el-table-column prop="file_dpi" label="分辨率" min-width="85" align="center" /> | 
				
			|||
      <el-table-column prop="file_thumbnail" label="缩览图" min-width="60" align="center"> | 
				
			|||
        <template slot-scope="scope"> | 
				
			|||
          <div v-if="scope.row.file_type === 'jpg' || scope.row.file_type === 'jpeg' || scope.row.file_type === 'png' || scope.row.file_type === 'bmp'|| scope.row.file_type === 'gif'"> | 
				
			|||
            <img width="60px" height="32px" class="screenshot" :src="baseApi+ '/downloadFile' +scope.row.file_path" :onerror="defaultImg" @click="showCoverPreview(scope.row)"> | 
				
			|||
          </div> | 
				
			|||
          <div v-else> | 
				
			|||
            <svg-icon icon-class="fujian" class-name="svg-style" /> | 
				
			|||
          </div> | 
				
			|||
        </template> | 
				
			|||
      </el-table-column> | 
				
			|||
      <el-table-column prop="create_time" label="创建时间" min-width="110" align="center" /> | 
				
			|||
      <el-table-column v-if="!isUploadDetail && !recycleMain.isRecycle" label="操作" min-width="100" align="center"> | 
				
			|||
        <template slot-scope="scope"> | 
				
			|||
          <el-button class="file-down iconfont icon-weibiaoti-2" @click="downloadFile(scope.row)">下载</el-button> | 
				
			|||
        </template> | 
				
			|||
      </el-table-column> | 
				
			|||
    </el-table> | 
				
			|||
 | 
				
			|||
    <!-- 点击缩略图看大图 --> | 
				
			|||
    <el-dialog class="preview-dialog" :append-to-body="true" :close-on-click-modal="false" :before-close="handleClose" :visible="showCoverVisible" title="查看大图"> | 
				
			|||
      <span class="dialog-right-top" /> | 
				
			|||
      <span class="dialog-left-bottom" /> | 
				
			|||
      <div class="setting-dialog" style="max-height:calc(100vh - 230px); overflow:auto;"> | 
				
			|||
        <img style="max-width:100%; object-fit: contain;" :src="previewSrc" :onerror="defaultImg"> | 
				
			|||
      </div> | 
				
			|||
    </el-dialog> | 
				
			|||
 | 
				
			|||
    <!-- 排序 --> | 
				
			|||
    <el-dialog :close-on-click-modal="false" :append-to-body="true" title="排序" :visible.sync="sortVisible" @opened="opened"> | 
				
			|||
      <span class="dialog-right-top" /> | 
				
			|||
      <span class="dialog-left-bottom" /> | 
				
			|||
      <div class="setting-dialog"> | 
				
			|||
        <i class="drag-tip">提示:请通过拖动鼠标来调整当前顺序</i> | 
				
			|||
        <el-table :data="sortTableData" class="file-sort" style="width: 100%;max-height: 70vh;" row-key="id"> | 
				
			|||
          <el-table-column type="index" label="序号" width="100" align="center" /> | 
				
			|||
          <el-table-column prop="file_name" label="文件名称" /> | 
				
			|||
        </el-table> | 
				
			|||
        <div slot="footer" class="dialog-footer"> | 
				
			|||
          <el-button type="primary" @click.native="handleSort">保存</el-button> | 
				
			|||
        </div> | 
				
			|||
      </div> | 
				
			|||
    </el-dialog> | 
				
			|||
 | 
				
			|||
    <!-- 删除附件 --> | 
				
			|||
    <el-dialog title="删除附件" :append-to-body="true" :close-on-click-modal="false" :visible.sync="deleteVisible" :before-close="handleClose"> | 
				
			|||
      <span class="dialog-right-top" /> | 
				
			|||
      <span class="dialog-left-bottom" /> | 
				
			|||
      <div class="setting-dialog"> | 
				
			|||
        <div class="dialog-delt"> | 
				
			|||
          <p><span>确定删除已选择的附件吗?</span></p> | 
				
			|||
        </div> | 
				
			|||
        <div slot="footer" class="dialog-footer"> | 
				
			|||
          <el-button type="primary" @click.native="handleDeltConfirm">确定</el-button> | 
				
			|||
        </div> | 
				
			|||
      </div> | 
				
			|||
    </el-dialog> | 
				
			|||
  </div> | 
				
			|||
</template> | 
				
			|||
 | 
				
			|||
<script> | 
				
			|||
import { FetchInitArchiveFilesView, FetchEditFile, FetchDeleteFile, FetchFileSort } from '@/api/archivesManage/archivesList' | 
				
			|||
import { archivesUpload } from '@/utils/upload' | 
				
			|||
import { downloadFile, getCurrentTime } from '@/utils/index' | 
				
			|||
import { mapGetters } from 'vuex' | 
				
			|||
import { form } from '@crud/crud' | 
				
			|||
import Sortable from 'sortablejs' | 
				
			|||
export default { | 
				
			|||
  name: 'UploadFile', | 
				
			|||
  components: {}, | 
				
			|||
  mixins: [ | 
				
			|||
    form({}) | 
				
			|||
  ], | 
				
			|||
  inject: ['recycleMain'], | 
				
			|||
  props: { | 
				
			|||
    isUploadDetail: { | 
				
			|||
      type: Boolean, | 
				
			|||
      default: true | 
				
			|||
    }, | 
				
			|||
    categoryId: { | 
				
			|||
      type: String, | 
				
			|||
      default: function() { | 
				
			|||
        return '' | 
				
			|||
      } | 
				
			|||
    }, | 
				
			|||
    arcId: { | 
				
			|||
      type: String, | 
				
			|||
      default: function() { | 
				
			|||
        return '' | 
				
			|||
      } | 
				
			|||
    } | 
				
			|||
  }, | 
				
			|||
  data() { | 
				
			|||
    return { | 
				
			|||
      defaultImg: 'this.src="' + require('@/assets/images/cover-bg.png') + '"', | 
				
			|||
      tableData: [], // 附件list | 
				
			|||
      selections: [], // table - 选中的 | 
				
			|||
      showCoverVisible: false, // 查看大图dialog | 
				
			|||
      sortTableData: [], // 排序data | 
				
			|||
      sortVisible: false, // 排序dialog | 
				
			|||
      deleteVisible: false, // 删除附件 dialog | 
				
			|||
      deleteData: [], // 删除选中的data | 
				
			|||
      file: null, // 附件 change | 
				
			|||
      fileNames: '', // 附件 - name | 
				
			|||
      formatType: '', // 附件 - type | 
				
			|||
      postfix: '', // 附件 - 文件后缀 | 
				
			|||
      fileSize: '', // 附件 - 大小 | 
				
			|||
      filePath: '', // 附件 - path | 
				
			|||
      px: '', // 附件 - 分辨率 | 
				
			|||
      nowDate: '', // 当前时间 | 
				
			|||
      previewSrc: '' // 查看大图src | 
				
			|||
    } | 
				
			|||
  }, | 
				
			|||
  computed: { | 
				
			|||
    ...mapGetters([ | 
				
			|||
      'baseApi' | 
				
			|||
    ]) | 
				
			|||
  }, | 
				
			|||
  watch: { | 
				
			|||
    arcId: function(newValue, oldValue) { | 
				
			|||
    } | 
				
			|||
  }, | 
				
			|||
  methods: { | 
				
			|||
    // 选择附件 | 
				
			|||
    async changeFile(e) { | 
				
			|||
      this.file = e.target.files[0] | 
				
			|||
      this.fileSize = this.file.size | 
				
			|||
      this.formatType = this.file.type.substring(0, this.file.type.indexOf('/')) | 
				
			|||
      this.fileNames = this.file.name | 
				
			|||
      this.postfix = this.file.name.substring( | 
				
			|||
        this.fileNames.lastIndexOf('.') + 1, | 
				
			|||
        this.fileNames.length | 
				
			|||
      ) | 
				
			|||
      if (this.formatType === 'image') { | 
				
			|||
        const fileBase64 = await this.getBase64(this.file) | 
				
			|||
        const res = await this.getImgPx(fileBase64) | 
				
			|||
        this.px = res.width + 'px*' + res.height + 'px' | 
				
			|||
      } else { | 
				
			|||
        this.px = '' | 
				
			|||
      } | 
				
			|||
      // 上传附件 | 
				
			|||
      archivesUpload(this.baseApi + '/api/archives/uploadFile', this.file, this.categoryId).then(res => { | 
				
			|||
        if (res.data.code === 200) { | 
				
			|||
          this.filePath = res.data.data | 
				
			|||
          this.uploadSave() | 
				
			|||
        } | 
				
			|||
      }) | 
				
			|||
    }, | 
				
			|||
    // 上传附件 - 选择上传即保存 | 
				
			|||
    uploadSave() { | 
				
			|||
      this.nowDate = getCurrentTime() | 
				
			|||
      const json = { | 
				
			|||
        'file_name': this.fileNames, | 
				
			|||
        'file_size': this.fileSize, | 
				
			|||
        'file_type': this.postfix, | 
				
			|||
        'file_path': this.filePath, | 
				
			|||
        'sequence': null, | 
				
			|||
        'archive_id': this.arcId, | 
				
			|||
        'file_dpi': this.px, | 
				
			|||
        'file_thumbnail': '', | 
				
			|||
        'create_time': this.nowDate, | 
				
			|||
        'id': null | 
				
			|||
      } | 
				
			|||
      const arrayUpload = [] | 
				
			|||
      arrayUpload.push(json) | 
				
			|||
      const params = { | 
				
			|||
        'categoryId': this.categoryId, | 
				
			|||
        'jsonString': JSON.stringify(arrayUpload) | 
				
			|||
      } | 
				
			|||
      FetchEditFile(params).then(data => { | 
				
			|||
        this.$message.success('上传附件成功!') | 
				
			|||
        this.crud.refresh() | 
				
			|||
        this.getFileList() | 
				
			|||
      }) | 
				
			|||
    }, | 
				
			|||
    // 将上传的图片转为base64 | 
				
			|||
    getBase64(file) { | 
				
			|||
      const reader = new FileReader() | 
				
			|||
      reader.readAsDataURL(file) | 
				
			|||
      return new Promise((resolve) => { | 
				
			|||
        reader.onload = () => { | 
				
			|||
          resolve(reader.result) | 
				
			|||
        } | 
				
			|||
      }) | 
				
			|||
    }, | 
				
			|||
    // 获取图片的分辨率 | 
				
			|||
    getImgPx(img) { | 
				
			|||
      const image = new Image() | 
				
			|||
      image.src = img | 
				
			|||
      return new Promise((resolve) => { | 
				
			|||
        image.onload = () => { | 
				
			|||
          const width = image.width | 
				
			|||
          const height = image.height | 
				
			|||
          resolve({ width, height }) | 
				
			|||
        } | 
				
			|||
      }) | 
				
			|||
    }, | 
				
			|||
    // 上传list | 
				
			|||
    getFileList() { | 
				
			|||
      const params = { | 
				
			|||
        'categoryId': this.categoryId, | 
				
			|||
        'archiveId': this.arcId | 
				
			|||
      } | 
				
			|||
      FetchInitArchiveFilesView(params).then(data => { | 
				
			|||
        this.tableData = data.returnlist | 
				
			|||
      }) | 
				
			|||
    }, | 
				
			|||
    // 下载附件 | 
				
			|||
    downloadFile(row) { | 
				
			|||
      const url = this.baseApi + '/downloadFile' + row.file_path | 
				
			|||
      fetch(url).then(res => res.blob()).then(blob => { | 
				
			|||
        downloadFile(blob, row.file_name.split('.')[0], row.file_type) | 
				
			|||
      }).catch(() => { | 
				
			|||
        this.$message.error('下载文件失败!') | 
				
			|||
      }) | 
				
			|||
    }, | 
				
			|||
    // 选择删除 | 
				
			|||
    toDelete(data) { | 
				
			|||
      this.deleteData = data | 
				
			|||
      this.deleteVisible = true | 
				
			|||
    }, | 
				
			|||
    // 确认删除 | 
				
			|||
    handleDeltConfirm() { | 
				
			|||
      this.deleteVisible = false | 
				
			|||
      const ids = [] | 
				
			|||
      this.deleteData.forEach(val => { | 
				
			|||
        ids.push(val.id) | 
				
			|||
      }) | 
				
			|||
      const params = { | 
				
			|||
        'ids': ids, | 
				
			|||
        'categoryId': this.categoryId | 
				
			|||
      } | 
				
			|||
      // 删除fetch | 
				
			|||
      FetchDeleteFile(params).then(res => { | 
				
			|||
        this.crud.delAllLoading = false | 
				
			|||
        this.$message.success('删除成功!') | 
				
			|||
        this.crud.refresh() | 
				
			|||
        this.getFileList() | 
				
			|||
      }) | 
				
			|||
    }, | 
				
			|||
    // 排序 -  行拖拽 | 
				
			|||
    rowDrop(className, targetName) { | 
				
			|||
      // 此时找到的元素是要拖拽元素的父容器 | 
				
			|||
      const tbody = document.querySelector('.' + className + ' .el-table__body-wrapper tbody') | 
				
			|||
      const that = this | 
				
			|||
      Sortable.create(tbody, { | 
				
			|||
        // 指定父元素下可被拖拽的子元素 | 
				
			|||
        draggable: '.el-table__row', | 
				
			|||
        onEnd({ newIndex, oldIndex }) { | 
				
			|||
          if (newIndex === oldIndex) return | 
				
			|||
          that[targetName].splice(newIndex, 0, that[targetName].splice(oldIndex, 1)[0]) | 
				
			|||
        } | 
				
			|||
      }) | 
				
			|||
    }, | 
				
			|||
    // 排序 | 
				
			|||
    opened() { | 
				
			|||
      this.rowDrop('file-sort', 'sortTableData') | 
				
			|||
    }, | 
				
			|||
    showSort() { | 
				
			|||
      this.sortVisible = true | 
				
			|||
      this.sortTableData = JSON.parse(JSON.stringify(this.tableData)) | 
				
			|||
    }, | 
				
			|||
    // 排序 - 保存 | 
				
			|||
    handleSort() { | 
				
			|||
      const ids = [] | 
				
			|||
      const sequences = [] | 
				
			|||
      this.sortTableData.map((value, index) => { | 
				
			|||
        ids.push(value.id) | 
				
			|||
        sequences.push(index + 1) | 
				
			|||
      }) | 
				
			|||
      const params = { | 
				
			|||
        'categoryId': this.categoryId, | 
				
			|||
        'ids': ids, | 
				
			|||
        'sequences': sequences | 
				
			|||
      } | 
				
			|||
      FetchFileSort(params).then((res) => { | 
				
			|||
        this.sortVisible = false | 
				
			|||
        this.$message.success('附件排序成功!') | 
				
			|||
        this.crud.refresh() | 
				
			|||
        this.getFileList() | 
				
			|||
      }) | 
				
			|||
    }, | 
				
			|||
    // table | 
				
			|||
    clickRowHandler(row) { | 
				
			|||
      this.$refs.table.toggleRowSelection(row) | 
				
			|||
    }, | 
				
			|||
    // table | 
				
			|||
    selectionChangeHandler(val) { | 
				
			|||
      this.selections = val | 
				
			|||
    }, | 
				
			|||
    // dialog - close | 
				
			|||
    handleClose(done) { | 
				
			|||
      this.showCoverVisible = false | 
				
			|||
      done() | 
				
			|||
    }, | 
				
			|||
    // 查看大图 | 
				
			|||
    showCoverPreview(row) { | 
				
			|||
      this.showCoverVisible = true | 
				
			|||
      this.previewSrc = this.baseApi + '/downloadFile' + row.file_path | 
				
			|||
    } | 
				
			|||
  } | 
				
			|||
} | 
				
			|||
</script> | 
				
			|||
 | 
				
			|||
<style lang="scss" scoped> | 
				
			|||
.svg-style{ | 
				
			|||
  width: 60px; | 
				
			|||
  height: 32px; | 
				
			|||
} | 
				
			|||
</style> | 
				
			|||
						Write
						Preview
					
					
					Loading…
					
					Cancel
						Save
					
		Reference in new issue