add 流程详情组件
This commit is contained in:
赵霄
@@ -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>
|
||||
Reference in New Issue
Block a user