4、单据列表页面扩展流程业务功能

单据列表页面改造，扩展流程业务相关功能

（1）修改代码混入引用

  1. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  3. mixins:[JeecgListMixin],

修改为：

  1. import {JeecgBpmListMixin} from '@/mixins/JeecgBpmListMixin'
  3. mixins: [JeecgBpmListMixin],

（2）列表增加流程状态

  1. 引入：
  2. import {initDictOptions, filterDictText} from '@/components/dict/JDictSelectUtil'
  4. data ()中定义变量：
  5. bpmStatusDictOptions:[],
  7. methods个增加方法：
  8.  initDictConfig() {
  9.         //初始化字典
  10.         initDictOptions('bpm_status').then((res) => {
  11.           if (res.success) {
  12.             this.bpmStatusDictOptions = res.result;
  13.           }
  14.         });
  15.       },
  17. 数据列表增加列：
  18. {
  19.             title: '流程状态',
  20.             align:"center",
  21.             dataIndex: 'bpmStatus',
  22.             customRender: (text, record, index) => {
  23.               //字典值替换通用方法
  24.               return filterDictText(this.bpmStatusDictOptions, text);
  25.             }
  26.           },

（3）列表操作功能扩展按钮扩展

  1. <span slot="action" slot-scope="text, record">
  2.           <template v-if="record.bpmStatus === '1'">
  3.             <a @click="handleEdit(record)">编辑</a>
  4.             <a-divider type="vertical"/>
  5.             <a @click="startProcess(record)">提交流程</a>
  6.             <a-divider type="vertical"/>
  7.           </template>
  8.           <template v-else-if="showBtn(record.bpmStatus)&&queryParam.bizTaskType=='1'">
  9.             <a @click="handleProcess(record)">办理</a>
  10.             <a-divider type="vertical"/>
  11.           </template>
  12.           <a-dropdown>
  13.             <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
  14.             <a-menu slot="overlay">
  15.               <a-menu-item v-if="queryParam.bizTaskType=='2'">
  16.                 <a href="javascript:;" @click="handleDetail(record)">详情</a>
  17.               </a-menu-item>
  18.               <a-menu-item v-if="record.bpmStatus === '1'">
  19.                 <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
  20.                   <a>删除</a>
  21.                 </a-popconfirm>
  22.               </a-menu-item>
  23.               <!--<a-menu-item v-else @click="handlePreviewPic(record)">审批进度</a-menu-item>-->
  24.               <a-menu-item v-else @click="handleTrack(record)">审批进度</a-menu-item>
  25.             </a-menu>
  26.           </a-dropdown>
  27.         </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表单组件页面开发参见：流程节点对接表单页面开发方法

增加过滤字段

<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>