From ed0ec177ec156ff38ecd3d99d9ccee537181fa96 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Sat, 6 May 2023 17:31:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=81=E7=A8=8B=E7=AE=A1=E7=90=86=E5=BC=B9?=
 =?UTF-8?q?=E6=A1=86=E5=BC=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/yxk-admin.scss              |   7 +
 src/views/components/archivesDetail/index.vue | 252 +++++++++++++
 .../archivesDetail/uploadFile/index.vue       | 340 ++++++++++++++++++
 .../module/approvalList/index.vue             | 105 ++++--
 .../module/businessDetails/index.vue          | 109 ++++--
 .../runningProcess/module/detail.vue          |  21 +-
 .../module/processImg/index.vue               |   3 +
 .../runningProcess/module/taskList/index.vue  | 108 ++++--
 8 files changed, 838 insertions(+), 107 deletions(-)
 create mode 100644 src/views/components/archivesDetail/index.vue
 create mode 100644 src/views/components/archivesDetail/uploadFile/index.vue

diff --git a/src/assets/styles/yxk-admin.scss b/src/assets/styles/yxk-admin.scss
index 6c4915c..bc36398 100644
--- a/src/assets/styles/yxk-admin.scss
+++ b/src/assets/styles/yxk-admin.scss
@@ -83,6 +83,13 @@
   }
 }
 
+.detail-tab{
+  @include row_tab_style;
+  .tab-nav{
+    margin: 25px 0 18px 0;
+  }
+}
+
 .category-container{
   .elect-cont-left{
     @include category-left-style;
diff --git a/src/views/components/archivesDetail/index.vue b/src/views/components/archivesDetail/index.vue
new file mode 100644
index 0000000..b30c0c5
--- /dev/null
+++ b/src/views/components/archivesDetail/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>
diff --git a/src/views/components/archivesDetail/uploadFile/index.vue b/src/views/components/archivesDetail/uploadFile/index.vue
new file mode 100644
index 0000000..8ef9671
--- /dev/null
+++ b/src/views/components/archivesDetail/uploadFile/index.vue
@@ -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>
diff --git a/src/views/system/processManage/runningProcess/module/approvalList/index.vue b/src/views/system/processManage/runningProcess/module/approvalList/index.vue
index f77a826..e45b3e8 100644
--- a/src/views/system/processManage/runningProcess/module/approvalList/index.vue
+++ b/src/views/system/processManage/runningProcess/module/approvalList/index.vue
@@ -1,23 +1,16 @@
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%"
-  >
-    <el-table-column
-      prop="date"
-      label="日期"
-      width="180"
-    />
-    <el-table-column
-      prop="name"
-      label="姓名"
-      width="180"
-    />
-    <el-table-column
-      prop="address"
-      label="地址"
-    />
-  </el-table>
+  <div>
+    <el-table :data="tableData" style="width: 100%" height="300">
+      <el-table-column type="index" align="center" width="55" />
+      <el-table-column prop="name" label="任务名称" />
+      <el-table-column prop="approver" label="审批人" />
+      <el-table-column prop="state" label="审批结果" />
+      <el-table-column prop="opinion" label="审批意见" />
+      <el-table-column prop="endDate" label="审批时间" />
+    </el-table>
+    <!-- @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler"  -->
+    <el-pagination :page-size.sync="page.size" :total="page.total" :current-page.sync="page.page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" />
+  </div>
 </template>
 
 <script>
@@ -25,28 +18,78 @@
 export default {
   data() {
     return {
+      page: {
+        total: 0,
+        size: 10,
+        page: 1
+      },
       tableData: [{
-        date: '2016-05-02',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
+        state: 1,
+        name: '任务A',
+        approver: 'admin',
+        opinion: '-',
+        endDate: '2022-10-02 10:23:54'
       }, {
-        date: '2016-05-04',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1517 弄'
+        state: 1,
+        name: '任务A',
+        approver: 'admin',
+        opinion: '-',
+        endDate: '2022-10-02 10:23:54'
       }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1519 弄'
+        state: 1,
+        name: '任务A',
+        approver: 'admin',
+        opinion: '-',
+        endDate: '2022-10-02 10:23:54'
       }, {
-        date: '2016-05-03',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1516 弄'
+        state: 1,
+        name: '任务A',
+        approver: 'admin',
+        opinion: '-',
+        endDate: '2022-10-02 10:23:54'
       }]
     }
+  },
+  methods: {
+    // 每页条数改变
+    sizeChangeHandler(e) {
+      this.loading = true
+      this.page.size = e
+      this.page.page = 1
+      this.params.size = e
+      this.params.page = 0
+      // this.doQuery(this.params)
+      this.loading = false
+    },
+    // 当前页改变
+    pageChangeHandler(e) {
+      this.loading = true
+      this.page.page = e
+      this.params.page = e - 1
+      // this.doQuery(this.params)
+      this.loading = false
+    }
   }
 }
 
 </script>
 
 <style lang='scss' scoped>
+.process-state{
+  width: 48px;
+  height: 22px;
+  margin: 0 auto;
+  font-size: 12px;
+  text-align: center;
+  line-height: 22px;
+  color: #2ECAAC;
+  border-radius: 3px;
+  border: 1px solid #B1EBDF;
+  background-color: #E8F8F5;
+  &.ing-state{
+    color: #0348F3;
+    border-color: #90B0F9;
+    background-color: #EEF5FE;
+  }
+}
 </style>
diff --git a/src/views/system/processManage/runningProcess/module/businessDetails/index.vue b/src/views/system/processManage/runningProcess/module/businessDetails/index.vue
index f77a826..390774e 100644
--- a/src/views/system/processManage/runningProcess/module/businessDetails/index.vue
+++ b/src/views/system/processManage/runningProcess/module/businessDetails/index.vue
@@ -1,48 +1,93 @@
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%"
-  >
-    <el-table-column
-      prop="date"
-      label="日期"
-      width="180"
-    />
-    <el-table-column
-      prop="name"
-      label="姓名"
-      width="180"
-    />
-    <el-table-column
-      prop="address"
-      label="地址"
-    />
-  </el-table>
+  <div>
+    <el-table :data="tableData" style="width: 100%" height="300" @cell-dblclick="tableDoubleClick">
+      <el-table-column type="selection" align="center" width="55" />
+      <el-table-column prop="groups" label="所属全宗" />
+      <el-table-column prop="name" label="门类名称" />
+      <el-table-column prop="type" label="整理方式" />
+      <el-table-column prop="number" label="项目号/档号" />
+      <el-table-column prop="title" label="题名" :show-overflow-tooltip="true" />
+    </el-table>
+    <!-- @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler"  -->
+    <el-pagination :page-size.sync="page.size" :total="page.total" :current-page.sync="page.page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" />
+    <Detail ref="archivesDetail" />
+  </div>
 </template>
 
 <script>
-
+import Detail from '@/views/components/archivesDetail/index.vue'
 export default {
+  name: 'BusinessDetails',
+  components: { Detail },
   data() {
     return {
+      page: {
+        total: 0,
+        size: 10,
+        page: 1
+      },
       tableData: [{
-        date: '2016-05-02',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
+        groups: '全宗A',
+        name: '文书档案（文件）',
+        type: '按件整理',
+        number: 'DAS-Y-2020-001',
+        title: '人事劳资文件级文书档案'
+      }, {
+        groups: '全宗A',
+        name: '文书档案（文件）',
+        type: '按件整理',
+        number: 'DAS-Y-2020-001',
+        title: '人事劳资文件级文书档案'
       }, {
-        date: '2016-05-04',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1517 弄'
+        groups: '全宗A',
+        name: '文书档案（文件）',
+        type: '按件整理',
+        number: 'DAS-Y-2020-001',
+        title: '人事劳资文件级文书档案'
       }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1519 弄'
+        groups: '全宗A',
+        name: '文书档案（文件）',
+        type: '按件整理',
+        number: 'DAS-Y-2020-001',
+        title: '人事劳资文件级文书档案'
       }, {
-        date: '2016-05-03',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1516 弄'
+        groups: '全宗A',
+        name: '文书档案（文件）',
+        type: '按件整理',
+        number: 'DAS-Y-2020-001',
+        title: '人事劳资文件级文书档案'
+      }, {
+        groups: '全宗A',
+        name: '文书档案（文件）',
+        type: '按件整理',
+        number: 'DAS-Y-2020-001',
+        title: '人事劳资文件级文书档案'
       }]
     }
+  },
+  methods: {
+    // table - 双击查看详情
+    tableDoubleClick(row) {
+      this.$refs.archivesDetail.archivesInfoVisible = true
+    },
+    // 每页条数改变
+    sizeChangeHandler(e) {
+      this.loading = true
+      this.page.size = e
+      this.page.page = 1
+      this.params.size = e
+      this.params.page = 0
+      // this.doQuery(this.params)
+      this.loading = false
+    },
+    // 当前页改变
+    pageChangeHandler(e) {
+      this.loading = true
+      this.page.page = e
+      this.params.page = e - 1
+      // this.doQuery(this.params)
+      this.loading = false
+    }
   }
 }
 
diff --git a/src/views/system/processManage/runningProcess/module/detail.vue b/src/views/system/processManage/runningProcess/module/detail.vue
index 1d71e4f..1ea97ab 100644
--- a/src/views/system/processManage/runningProcess/module/detail.vue
+++ b/src/views/system/processManage/runningProcess/module/detail.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog class="detail-dialog" :visible.sync="detailVisible" :modal-append-to-body="false" :close-on-click-modal="false" title="流程详情">
+  <el-dialog class="detail-dialog" :visible.sync="detailVisible" :modal-append-to-body="false" :close-on-click-modal="false" append-to-body title="流程详情">
     <div class="setting-dialog">
       <div class="detail-info">
         <p><span>流程名称：</span>01-归档审批流程</p>
@@ -25,12 +25,12 @@
           </div>
         </div>
       </el-collapse-transition>
-      <div class="detail-tab">
+      <div class="detail-tab tab-content">
         <ul class="tab-nav">
-          <li :class="{ 'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">流程示意图</li>
-          <li :class="{ 'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">业务详情</li>
-          <li :class="{ 'active-tab-nav': activeIndex == 2 }" @click="changeActiveTab(2)">任务列表</li>
-          <li :class="{ 'active-tab-nav': activeIndex == 3 }" @click="changeActiveTab(3)">审批列表</li>
+          <li :class="{'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">流程示意图</li>
+          <li :class="{'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">业务详情</li>
+          <li :class="{'active-tab-nav': activeIndex == 2 }" @click="changeActiveTab(2)">任务列表</li>
+          <li :class="{'active-tab-nav': activeIndex == 3 }" @click="changeActiveTab(3)">审批列表</li>
         </ul>
         <component :is="comName" class="component-cont" />
       </div>
@@ -160,13 +160,8 @@ export default {
       }
     }
   }
-  .tab-nav{
-    margin: 25px 0 18px 0;
-  }
-  .component-cont{
-    max-height: 344px;
-    overflow: hidden;
-    overflow-y: scroll;
+  ::v-deep .el-pagination{
+    margin: 20px 0 10px 0 !important;
   }
 }
 </style>
diff --git a/src/views/system/processManage/runningProcess/module/processImg/index.vue b/src/views/system/processManage/runningProcess/module/processImg/index.vue
index b3f398a..877e247 100644
--- a/src/views/system/processManage/runningProcess/module/processImg/index.vue
+++ b/src/views/system/processManage/runningProcess/module/processImg/index.vue
@@ -9,6 +9,9 @@
 
 <style lang='scss' scoped>
 .tab-img{
+  max-height: 344px;
+  overflow: hidden;
+  overflow-y: scroll;
   img{
     display: block;
     width: 100%;
diff --git a/src/views/system/processManage/runningProcess/module/taskList/index.vue b/src/views/system/processManage/runningProcess/module/taskList/index.vue
index f77a826..4a7c1ff 100644
--- a/src/views/system/processManage/runningProcess/module/taskList/index.vue
+++ b/src/views/system/processManage/runningProcess/module/taskList/index.vue
@@ -1,23 +1,19 @@
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%"
-  >
-    <el-table-column
-      prop="date"
-      label="日期"
-      width="180"
-    />
-    <el-table-column
-      prop="name"
-      label="姓名"
-      width="180"
-    />
-    <el-table-column
-      prop="address"
-      label="地址"
-    />
-  </el-table>
+  <div>
+    <el-table :data="tableData" style="width: 100%" height="300">
+      <el-table-column prop="state" label="状态" align="center" width="90px">
+        <template slot-scope="scope">
+          <div :class="scope.row.state ? 'process-state' :'process-state ing-state'">{{ scope.row.state ? '已完成':'进行中' }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="任务名称" />
+      <el-table-column prop="operator" label="执行人" />
+      <el-table-column prop="createDate" label="创建时间" />
+      <el-table-column prop="endDate" label="完成时间" />
+    </el-table>
+    <!-- @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler" -->
+    <el-pagination :page-size.sync="page.size" :total="page.total" :current-page.sync="page.page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" />
+  </div>
 </template>
 
 <script>
@@ -25,28 +21,78 @@
 export default {
   data() {
     return {
+      page: {
+        total: 0,
+        size: 10,
+        page: 1
+      },
       tableData: [{
-        date: '2016-05-02',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
+        state: 1,
+        name: '入管理库流程',
+        operator: 'admin',
+        createDate: '2022-10-01 10:23:54',
+        endDate: '2022-10-02 10:23:54'
       }, {
-        date: '2016-05-04',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1517 弄'
+        state: 1,
+        name: '入管理库流程',
+        operator: 'admin',
+        createDate: '2022-10-01 10:23:54',
+        endDate: '2022-10-02 10:23:54'
       }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1519 弄'
+        state: 1,
+        name: '入管理库流程',
+        operator: 'admin',
+        createDate: '2022-10-01 10:23:54',
+        endDate: '2022-10-02 10:23:54'
       }, {
-        date: '2016-05-03',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1516 弄'
+        state: 0,
+        name: '入管理库流程',
+        operator: 'admin',
+        createDate: '2022-10-01 10:23:54',
+        endDate: '-'
       }]
     }
+  },
+  methods: {
+    // 每页条数改变
+    sizeChangeHandler(e) {
+      this.loading = true
+      this.page.size = e
+      this.page.page = 1
+      this.params.size = e
+      this.params.page = 0
+      // this.doQuery(this.params)
+      this.loading = false
+    },
+    // 当前页改变
+    pageChangeHandler(e) {
+      this.loading = true
+      this.page.page = e
+      this.params.page = e - 1
+      // this.doQuery(this.params)
+      this.loading = false
+    }
   }
 }
 
 </script>
 
 <style lang='scss' scoped>
+.process-state{
+  width: 48px;
+  height: 22px;
+  margin: 0 auto;
+  font-size: 12px;
+  text-align: center;
+  line-height: 22px;
+  color: #2ECAAC;
+  border-radius: 3px;
+  border: 1px solid #B1EBDF;
+  background-color: #E8F8F5;
+  &.ing-state{
+    color: #0348F3;
+    border-color: #90B0F9;
+    background-color: #EEF5FE;
+  }
+}
 </style>