4、单据列表页面扩展流程业务功能 === #### 单据列表页面改造,扩展流程业务相关功能 **(1)修改代码混入引用** ``` import { JeecgListMixin } from '@/mixins/JeecgListMixin' mixins:[JeecgListMixin], ``` 修改为: ``` import {JeecgBpmListMixin} from '@/mixins/JeecgBpmListMixin' mixins: [JeecgBpmListMixin], ``` **(2)列表增加流程状态** ``` 引入: import {initDictOptions, filterDictText} from '@/components/dict/JDictSelectUtil' data ()中定义变量: bpmStatusDictOptions:[], methods个增加方法: initDictConfig() { //初始化字典 initDictOptions('bpm_status').then((res) => { if (res.success) { this.bpmStatusDictOptions = res.result; } }); }, 数据列表增加列: { title: '流程状态', align:"center", dataIndex: 'bpmStatus', customRender: (text, record, index) => { //字典值替换通用方法 return filterDictText(this.bpmStatusDictOptions, text); } }, ``` **(3)列表操作功能扩展** 按钮扩展 ``` <span slot="action" slot-scope="text, record"> <template v-if="record.bpmStatus === '1'"> <a @click="handleEdit(record)">编辑</a> <a-divider type="vertical"/> <a @click="startProcess(record)">提交流程</a> <a-divider type="vertical"/> </template> <template v-else-if="showBtn(record.bpmStatus)&&queryParam.bizTaskType=='1'"> <a @click="handleProcess(record)">办理</a> <a-divider type="vertical"/> </template> <a-dropdown> <a class="ant-dropdown-link">更多 <a-icon type="down" /></a> <a-menu slot="overlay"> <a-menu-item v-if="queryParam.bizTaskType=='2'"> <a href="javascript:;" @click="handleDetail(record)">详情</a> </a-menu-item> <a-menu-item v-if="record.bpmStatus === '1'"> <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)"> <a>删除</a> </a-popconfirm> </a-menu-item> <!--<a-menu-item v-else @click="handlePreviewPic(record)">审批进度</a-menu-item>--> <a-menu-item v-else @click="handleTrack(record)">审批进度</a-menu-item> </a-menu> </a-dropdown> </span> ``` 组件扩展 ``` <bpm-process-track-modal ref="bpmProcessTrackModal"></bpm-process-track-modal> <bpm-biz-task-deal-modal ref="taskDealModal" :path="path" :formData="formData" @ok="handleOk"></bpm-biz-task-deal-modal> 引入组件 import BpmBizTaskDealModal from "@/views/modules/bpm/common/BpmBizTaskDealModal.vue"; import BpmProcessTrackModal from "../../bpm/common/BpmProcessTrackModal.vue"; components: { BpmProcessTrackModal, BpmBizTaskDealModal }, ``` data ()流程参数定义 ``` flowCode:"TEST001",//唯一编码 formUrl:"modules/extbpm/biz/modules/ExtBizLeaveForm", formUrlMobile:"modules/extbpm/biz/modules/ExtBizLeaveForm", ``` formUrl表单组件页面开发参见:[流程节点对接表单页面开发方法](http://jeecg-boot.mydoc.io/?t=344852) 增加过滤字段 ``` <a-form-item label="类型"> <a-radio-group v-model="queryParam.bizTaskType" @change="onBizTaskTypeChange"> <a-radio value="1">待我审批</a-radio> <a-radio value="2">我发起的申请</a-radio> </a-radio-group> </a-form-item> ```