|
|
@@ -70,7 +70,26 @@
|
|
|
:columns="columns"
|
|
|
:datasource="datasource"
|
|
|
cache-key="systemRoleTable5"
|
|
|
+ :selection.sync="selection"
|
|
|
>
|
|
|
+ <template v-slot:toolbar>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ class="el-icon-printer"
|
|
|
+ size="small"
|
|
|
+ @click="handlePrint"
|
|
|
+ >
|
|
|
+ 打印
|
|
|
+ </el-button>
|
|
|
+ <!-- <el-button
|
|
|
+ type="warning"
|
|
|
+ class="el-icon-document"
|
|
|
+ size="small"
|
|
|
+ @click="handleMockPrint"
|
|
|
+ >
|
|
|
+ 测试打印(mock)
|
|
|
+ </el-button> -->
|
|
|
+ </template>
|
|
|
<template v-slot:result="{ row }">
|
|
|
<el-tag
|
|
|
size="medium"
|
|
|
@@ -117,6 +136,8 @@
|
|
|
</ele-pro-table>
|
|
|
</el-card>
|
|
|
<detail ref="detailRef"></detail>
|
|
|
+ <!-- 隐藏的打印服务实例:复用 collaborative/detail 的 printRows 批量打印 -->
|
|
|
+ <formDetail ref="printService" v-show="false"></formDetail>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -125,6 +146,7 @@
|
|
|
import { ccPage, ccReaderTask } from '@/api/bpm/task';
|
|
|
import { getDate } from '@/utils/dateUtils';
|
|
|
import detail from '@/views/bpm/done/detailDialog.vue';
|
|
|
+ import formDetail from '@/views/bpm/collaborative/detail.vue';
|
|
|
|
|
|
// 默认表单数据
|
|
|
const defaultParams = {
|
|
|
@@ -133,15 +155,24 @@
|
|
|
};
|
|
|
export default {
|
|
|
name: 'BpmDoneTask',
|
|
|
- components: { detail },
|
|
|
+ components: { detail, formDetail },
|
|
|
mixins: [dictMixins],
|
|
|
data() {
|
|
|
return {
|
|
|
// 遮罩层
|
|
|
loading: true,
|
|
|
params: { ...defaultParams },
|
|
|
+ // 表格勾选项
|
|
|
+ selection: [],
|
|
|
statusList: [],
|
|
|
columns: [
|
|
|
+ {
|
|
|
+ type: 'selection',
|
|
|
+ columnKey: 'selection',
|
|
|
+ width: 55,
|
|
|
+ align: 'center',
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
{
|
|
|
columnKey: 'index',
|
|
|
label: '序号',
|
|
|
@@ -315,6 +346,138 @@
|
|
|
// });
|
|
|
this.$refs.detailRef.open(params);
|
|
|
},
|
|
|
+ /* 勾选记录批量打印:复用 collaborative/detail 的 printRows */
|
|
|
+ handlePrint() {
|
|
|
+ if (!this.selection || this.selection.length === 0) {
|
|
|
+ this.$message.warning('请先勾选需要打印的记录');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.$refs.printService) {
|
|
|
+ this.$message.error('打印组件未就绪');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$refs.printService.printRows(this.selection);
|
|
|
+ },
|
|
|
+ /* 测试打印:使用本地 mock 数据,不依赖列表/接口 */
|
|
|
+ handleMockPrint() {
|
|
|
+ if (!this.$refs.printService) {
|
|
|
+ this.$message.error('打印组件未就绪');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 构造两条 mock 流程记录,验证多记录批量打印 + 表单模板渲染
|
|
|
+ const mockRows = this.buildMockPrintRows();
|
|
|
+ this.$refs.printService.printRows(mockRows);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 构造测试用 mock 数据
|
|
|
+ * - id:用于 loadTasks 拉审批记录(mock 时会失败,被 catch 吞掉)
|
|
|
+ * - formJson.makingJson:表单模板 JSON,含 list(控件列表) + config.dataSource(数据源)
|
|
|
+ * - valueJson:表单值,键名与控件 model 对应
|
|
|
+ */
|
|
|
+ buildMockPrintRows() {
|
|
|
+ const makingJson = {
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ type: 'input',
|
|
|
+ model: 'applicant',
|
|
|
+ label: '申请人'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'input',
|
|
|
+ model: 'department',
|
|
|
+ label: '部门'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'textarea',
|
|
|
+ model: 'reason',
|
|
|
+ label: '事由'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'blank',
|
|
|
+ model: 'blank_adopzrdd',
|
|
|
+ label: '报销明细',
|
|
|
+ tableRows: []
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ config: {
|
|
|
+ platform: 'pc',
|
|
|
+ dataSource: []
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const baseRow = {
|
|
|
+ processInstanceId: 'mock-pi-001',
|
|
|
+ processDefinitionId: 'mock_pd:1:mock',
|
|
|
+ processTypeName: '报销流程',
|
|
|
+ taskName: '财务复核',
|
|
|
+ name: '2024年第三季度差旅报销(mock)',
|
|
|
+ vals: {
|
|
|
+ businessCode: 'BX-2024-001',
|
|
|
+ businessName: '差旅报销',
|
|
|
+ businessType: '财务',
|
|
|
+ businessId: 'mock-biz-001',
|
|
|
+ userName: '张三'
|
|
|
+ },
|
|
|
+ result: '1',
|
|
|
+ processResult: '1',
|
|
|
+ createTime: '2024-09-15 09:30:00',
|
|
|
+ endTime: '2024-09-18 17:45:00',
|
|
|
+ durationInMillis: 86400000 * 3,
|
|
|
+ isRead: 0,
|
|
|
+ id: 'mock-cc-001',
|
|
|
+ pcViewRouter: '',
|
|
|
+ formJson: {
|
|
|
+ makingJson: JSON.stringify(makingJson)
|
|
|
+ },
|
|
|
+ valueJson: {
|
|
|
+ applicant: '张三',
|
|
|
+ department: '研发中心 / 前端组',
|
|
|
+ reason: '赴北京参加高端制造业数字化转型峰会,并拜访清华大学工业工程系相关教授。',
|
|
|
+ blank_adopzrdd: [
|
|
|
+ {
|
|
|
+ remark: '2024年第三季度跨省差旅,含交通、住宿、餐饮、市内交通等费用',
|
|
|
+ price: 8866.5,
|
|
|
+ file: [
|
|
|
+ { name: '出差审批单-登机牌-酒店水单-发票合订版.pdf', url: 'https://example.com/file1.pdf' },
|
|
|
+ { name: '出租车发票-餐费发票-打车小票-打包扫描.pdf', url: 'https://example.com/file3.pdf' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ remark: '客户答谢晚宴及产品发布会场地、餐饮、灯光、礼仪等费用',
|
|
|
+ price: 32680,
|
|
|
+ file: [
|
|
|
+ { name: '场地租赁合同正本(盖章版).pdf', url: 'https://example.com/file4.pdf' },
|
|
|
+ { name: '增值税专用发票_2024-09-15_001.jpg', url: 'https://example.com/file5.jpg' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ };
|
|
|
+ // 第二条用来验证批量打印分页
|
|
|
+ const second = JSON.parse(JSON.stringify(baseRow));
|
|
|
+ second.id = 'mock-cc-002';
|
|
|
+ second.processInstanceId = 'mock-pi-002';
|
|
|
+ second.name = '2024年市场推广活动费用报销(mock)';
|
|
|
+ second.vals = {
|
|
|
+ ...baseRow.vals,
|
|
|
+ businessCode: 'BX-2024-002',
|
|
|
+ businessName: '市场推广费',
|
|
|
+ userName: '李四'
|
|
|
+ };
|
|
|
+ second.valueJson = {
|
|
|
+ ...baseRow.valueJson,
|
|
|
+ applicant: '李四',
|
|
|
+ department: '市场部 / 品牌组',
|
|
|
+ reason: '组织新产品发布会及客户答谢晚宴。',
|
|
|
+ blank_adopzrdd: [
|
|
|
+ {
|
|
|
+ remark: '发布会场地、舞台、灯光、音响设备租赁费用',
|
|
|
+ price: 15800,
|
|
|
+ file: [{ name: '场地租赁发票.pdf', url: 'https://example.com/scene.pdf' }]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ return [baseRow, second];
|
|
|
+ },
|
|
|
getTimelineItemType(result) {
|
|
|
if (result === '通过') {
|
|
|
return 'success';
|