From 1a5e206100a3570f7c783f984db62ad4268fde57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E9=9C=84?= <zhaoxiaox0053@163.com>
Date: Tue, 10 Oct 2023 17:23:41 +0800
Subject: [PATCH] =?UTF-8?q?add=20=E6=B5=81=E7=A8=8B=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ProcessDetailList.vue | 270 +++++++++++++++++++++++++++
 1 file changed, 270 insertions(+)
 create mode 100644 src/components/ProcessDetailList.vue

diff --git a/src/components/ProcessDetailList.vue b/src/components/ProcessDetailList.vue
new file mode 100644
index 00000000..47fc5124
--- /dev/null
+++ b/src/components/ProcessDetailList.vue
@@ -0,0 +1,270 @@
+<template>
+  <div class="page-box">
+    <div class="personnel-info">
+      <slot name="personnelInfo"></slot>
+    </div>
+    <div class="approval-list">
+      <!--查询区域-->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <!--项目名称-->
+            <a-col :md="8" :sm="12">
+              <a-form-item :label="$t('expirationDate')">
+                <a-range-picker
+                  value-format="YYYY-MM-DD"
+                  format="YYYY-MM-DD"
+                  v-model="queryParam.publicizeData"
+                  @change="searchQuery">
+                </a-range-picker>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <div style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+                <!--催办-->
+                <a-button type="primary" @click="handleUrge" icon="bell" v-if="canUrge">
+                  {{ $t('workCenter.processDetail.urgeHandle') }}
+                </a-button>
+                <!--流程图-->
+                <a-button type="primary" @click="viewFlowChart" icon="apartment" ghost>{{ $t('workCenter.processDetail.flowChart') }}</a-button>
+              </div>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <div>
+        <j-table
+          :columns="columns"
+          :dataSource="dataSource"
+          :can-drag="true"
+          rowKey="id"
+          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+          :pagination="false"
+          :scroll="{x: '100%'}"
+          @change="handleTableChange">
+
+          <!--审批意见-->
+          <template v-slot:approvalOpinion="{text, record}">
+            <a-tooltip overlay-class-name="tooltip-style">
+              <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
+              <div class="table-text" :class="{'agree-color': record.approval === '1', 'reject-color': record.approval === '2'}">
+                {{ text || text === 0 ? text : global.emptyLine }}
+              </div>
+            </a-tooltip>
+          </template>
+
+          <!--附件-->
+          <template v-slot:file="{text, record}">
+            <a-tooltip overlay-class-name="tooltip-style">
+              <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
+              <div class="table-text can-click-table-text" v-if="text || text === 0" @click="handlePreview(record)">{{ text }}</div>
+              <div v-else class="table-text">{{ global.emptyLine }}</div>
+            </a-tooltip>
+          </template>
+        </j-table>
+      </div>
+
+      <div id="images">
+        <div class="image" v-viewer="{movable: false}">
+          <img v-show="image" :src="imageUrl" alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { JeroListMixin } from '../mixins/JeroListMixin.js'
+import JTable from './jero/JTable.vue'
+import Vue from 'vue'
+import { ACCESS_TOKEN } from '../store/mutation-types.js'
+import { downloadFile, getFileAccessHttpUrl } from '../api/manage.js'
+import { previewPdf } from '../utils/previewPdf.js'
+import { Base64 } from 'js-base64'
+
+// 支持预览的文件后缀
+const CAN_PREVIEW_FILE_SUFFIX = ['jpg', 'jpeg', 'png', 'raw', 'pdf', 'docx', 'doc']
+const FILE_TYPE_IMGS = ['jpg', 'jpeg', 'png', 'raw']
+const FILE_TYPE_PDF = 'pdf'
+
+export default {
+  name: 'ProcessDetailList',
+  components: { JTable },
+  mixins: [JeroListMixin],
+  props: {
+    // 需要有list属性，用于混入里的接口获取
+    url: {
+      type: Object,
+      required: false,
+      default: () => {
+        return {}
+      }
+    },
+    // 是否可以催办，自己不能催自己
+    canUrge: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    // 催办按钮的权限
+    urgePermissionFlag: {
+      type: String,
+      required: false,
+      default: null
+    },
+    // 流程图按钮的权限
+    flowChartPermissionFlag: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  data () {
+    return {
+      columns: [
+        // 任务节点
+        {
+          dataIndex: 'projectSource_dictText',
+          title: this.$t('workCenter.processDetail.taskNode'),
+          width: 150
+        },
+        // 任务受理人
+        {
+          dataIndex: 'projectName',
+          title: this.$t('workCenter.processDetail.taskHandler'),
+          width: 120
+        },
+        // 创建时间
+        {
+          dataIndex: 'workNumber',
+          title: this.$t('createTime'),
+          width: 150
+        },
+        // 完成时间
+        {
+          dataIndex: 'nameWorkNo',
+          title: this.$t('workCenter.processDetail.completionTime'),
+          width: 150
+        },
+        // 耗时
+        {
+          dataIndex: 'projectHealth_dictText',
+          title: this.$t('workCenter.processDetail.timeConsuming'),
+          width: 100
+        },
+        // 审批意见
+        {
+          dataIndex: 'approval_dictText',
+          title: this.$t('workCenter.processDetail.approvalOpinion'),
+          width: 100,
+          scopedSlots: { customRender: 'approvalOpinion' }
+        },
+        // 意见内容
+        {
+          dataIndex: 'projectName',
+          title: this.$t('workCenter.processDetail.opinionContent'),
+          width: 120,
+          scopedSlots: { customRender: 'projectName' }
+        },
+        // 附件
+        {
+          dataIndex: 'file',
+          title: this.$t('businessSupport.questionAnswer.attach'),
+          width: 160,
+          scopedSlots: { customRender: 'file' }
+        },
+        // 状态
+        {
+          dataIndex: 'nameWorkNo',
+          title: this.$t('status'),
+          width: 100
+        }
+      ],
+      image: false,
+      imageUrl: null
+    }
+  },
+  methods: {
+    handleUrge () {
+    },
+    /**
+     * 跳转流程图页面
+     */
+    viewFlowChart () {
+    },
+    handlePreview (file) {
+      if (!file || !file.url) {
+        return
+      }
+      // 截取文件后缀名
+      const fileSuffix = file.fileName ? file.fileName.split('.')[file.fileName.split('.').length - 1] : ''
+      const canPreview = CAN_PREVIEW_FILE_SUFFIX.some(tt => fileSuffix.toLowerCase() === tt)
+      // 判断是否为可预览格式的文件
+      if (!canPreview) {
+        this.$message.loading('该文件类型不支持预览，正在为您准备下载...').then(() => {
+          this.handleDownload(file)
+        })
+        return
+      }
+      const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${file.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.fileName}`
+      // 图片预览，使用自己添加的组件
+      if (canPreview && FILE_TYPE_IMGS.includes(fileSuffix.toLowerCase())) {
+        this.imageUrl = getFileAccessHttpUrl(file.id)
+        // 获取viewer实例
+        const viewer = this.$el.querySelector('.image').$viewer
+        // 调用show方法进行显示预览图
+        viewer.show()
+        // this.$refs.imagePreviewModal.open(file)
+        return
+      }
+      // pdf预览
+      if (canPreview && FILE_TYPE_PDF.includes(fileSuffix)) {
+        const url = previewPdf(file.id)
+        window.open(url)
+        return
+      }
+      // word用KKfile预览
+      if (canPreview && (fileSuffix === 'doc' || fileSuffix === 'docx')) {
+        const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
+        window.open(url)
+        return
+      }
+      // 如果都不能预览就下载
+      downloadFile(`/sys/common/download/${file.id}`, file.fileName)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.page-box {
+  height: 100%;
+  display: flex;
+}
+
+.personnel-info {
+  height: 100%;
+  width: 400px;
+  padding: 32px;
+  overflow: auto;
+  border-right: 1px solid #E5E6EB;
+}
+
+.approval-list {
+  height: 100%;
+  flex: 1;
+  width: 0;
+  overflow: auto;
+  padding: 32px;
+}
+
+.agree-color {
+  color: #229B1F;
+}
+
+// 这个地方的颜色不用primary-color是因为拒绝永远是红色的
+.reject-color {
+  color: #D52C26;
+}
+</style>