浏览代码

feat: 添加打印功能和测试打印逻辑,优化表格数据处理

xieyong 5 天之前
父节点
当前提交
b4079a4747
共有 1 个文件被更改,包括 164 次插入 和 1 次删除
  1. 164 1
      src/views/bpm/carbonCopy/index.vue

+ 164 - 1
src/views/bpm/carbonCopy/index.vue

@@ -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';