123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202 |
- <template>
- <a-card :bordered="false">
- <!--流程申请选择-->
- <a-input-search style="margin-bottom: 10px;margin-right:10px;width: 200px" v-model="searchProcessKey"
- placeholder="输入流程名称" @search="onSearchProcess" />
- <a-button @click="onSearchProcess(searchProcessKey)" type="primary">查询</a-button>
- <a-button @click="onSearchProcess('')">重置</a-button>
- <a-button @click="handleToApplyList" type="primary" style="float: right;">前往我的申请列表</a-button>
- <a-empty description="无流程可供选择" v-if="activeKeyAll.length==0" />
- <div v-else>
- <a-collapse v-model="activeKey">
- <a-collapse-panel v-for="(value, index) in activeKeyAll" :header="filterDictText(dictOptions,value)||'未分类'"
- :key="value">
- <a-list :grid="{ gutter: 10,column:4}" :dataSource="processDataMap[value]">
- <a-list-item slot="renderItem" slot-scope="item">
- <a-card>
- <div slot="title">
- <a-row>
- <a-col span="12" :title="item.name">{{item.name}} </a-col>
- <a-col span="12" style="text-align: right;">
- <a href="javascript:void (0)" @click="chooseProcess(item)">发起申请</a>
- </a-col>
- </a-row>
- </div>
- <b>版本:</b>v.{{item.version}}
- <br />
- <b>说明:</b>{{item.description}}
- </a-card>
- </a-list-item>
- </a-list>
- </a-collapse-panel>
- </a-collapse>
- </div>
- <!--流程表单-->
- <a-modal :title="lcModa.title" v-model="lcModa.visible" :footer="null" :maskClosable="false" width="80%">
- <component :disabled="lcModa.disabled" v-if="lcModa.visible" :is="lcModa.formComponent"
- :processData="lcModa.processData" :isNew="lcModa.isNew" @afterSubmit="afterSub"
- @close="lcModa.visible=false,lcModa.disabled = false"></component>
- </a-modal>
- </a-card>
- </template>
- <script>
- import {
- activitiMixin
- } from '@/views/activiti/mixins/activitiMixin'
- import JEllipsis from '@/components/jeecg/JEllipsis'
- import JTreeSelect from '@/components/jeecg/JTreeSelect'
- import {
- initDictOptions,
- filterDictText
- } from '@/components/dict/JDictSelectUtil'
- import historicDetail from '@/views/activiti/historicDetail'
- export default {
- name: "applyHome",
- mixins: [activitiMixin],
- components: {
- JEllipsis,
- JTreeSelect,
- historicDetail
- },
- data() {
- return {
- typeList: ["input", "textarea", "number", "select", "checkbox", "radio", "date", "time", "rate", "slider",
- "uploadFile", "uploadImg", "switch", "button", "text", "card", "grid", "table"
- ],//"alert","html", "divider",
- description: '所有',
- dictOptions: [],
- url: {
- getProcessDataList: "/activiti_process/listData",
- getFirstNode: '/actProcessIns/getFirstNode',
- applyBusiness: '/actBusiness/apply',
- },
- // 查询条件
- queryParam: {
- createTimeRange: [],
- keyWord: '',
- },
- // 表头
- labelCol: {
- xs: {
- span: 4
- },
- sm: {
- span: 4
- },
- },
- wrapperCol: {
- xs: {
- span: 20
- },
- sm: {
- span: 20
- },
- },
- processModalVisible: null,
- activeKeyAll: [],
- activeKey: [],
- processDataMap: {},
- searchProcessKey: null,
- addApplyLoading: false,
- lcModa: {
- title: '',
- disabled: false,
- visible: false,
- formComponent: null,
- isNew: false
- },
- }
- },
- computed: {},
- mounted() {
- this.initDictConfig()
- this.getProcessList()
- },
- methods: {
- saveJson(json) {
- console.log(json)
- },
- initDictConfig() {
- //初始化字典 - 流程分类
- initDictOptions('bpm_process_type').then((res) => {
- if (res.success) {
- this.dictOptions = res.result;
- }
- });
- },
- filterDictText(dictOptions, text) {
- if (dictOptions instanceof Array) {
- for (let dictItem of dictOptions) {
- if (text === dictItem.value) {
- return dictItem.text
- }
- }
- }
- return text || text == 'null' ? '' : text
- },
- /*加载流程列表*/
- getProcessList() {
- this.addApplyLoading = true;
- this.getAction(this.url.getProcessDataList, {
- status: 1,
- roles: true
- }).then(res => {
- this.activeKeyAll = [];
- if (res.success) {
- var result = res.result || [];
- if (result.length > 0) {
- let searchProcessKey = this.searchProcessKey;
- if (searchProcessKey) { //过滤条件
- result = _.filter(result, function (o) {
- return o.name.indexOf(searchProcessKey) > -1;
- });
- }
- this.processDataMap = _.groupBy(result, 'categoryId');
- for (const categoryId in this.processDataMap) {
- this.activeKeyAll.push(categoryId)
- }
- this.activeKey = this.activeKeyAll;
- }
- this.processModalVisible = true;
- } else {
- this.$message.warning(res.message)
- }
- }).finally(() => this.addApplyLoading = false);
- },
- onSearchProcess(value) {
- this.searchProcessKey = value;
- this.getProcessList()
- },
- chooseProcess(v) {
- if (!v.routeName) {
- this.$message.warning(
- "该流程信息未配置表单,请联系开发人员!"
- );
- return;
- }
- this.lcModa.formComponent = this.getFormComponent(v.routeName).component;
- this.lcModa.title = '发起流程:' + v.name;
- this.lcModa.isNew = true;
- this.lcModa.processData = v;
- this.lcModa.visible = true;
- console.log("发起", v)
- },
- /*提交成功申请后*/
- afterSub(formData) {
- this.lcModa.visible = false;
- this.$message("请前往我的申请列表提交审批!")
- },
- /*前往我的申请页面*/
- handleToApplyList() {
- this.$router.push({
- path: '/activiti/applyList'
- })
- }
- }
- }
- </script>
- <style scoped>
- @import '~@assets/less/common.less';
- </style>
|