remove 移除动态表单
This commit is contained in:
songgaoshuai
parent
b8a3ccb867
commit
28a5508c53
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,63 +0,0 @@
|
|||||||
import request from '@/utils/request';
|
|
||||||
import { AxiosPromise } from 'axios';
|
|
||||||
import { BusinessFormVO, BusinessFormForm, BusinessFormQuery } from '@/api/workflow/businessForm/types';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 查询发起流程列表
|
|
||||||
* @param query
|
|
||||||
* @returns {*}
|
|
||||||
*/
|
|
||||||
|
|
||||||
export const listBusinessForm = (query?: BusinessFormQuery): AxiosPromise<BusinessFormVO[]> => {
|
|
||||||
return request({
|
|
||||||
url: '/workflow/businessForm/list',
|
|
||||||
method: 'get',
|
|
||||||
params: query
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 查询发起流程详细
|
|
||||||
* @param id
|
|
||||||
*/
|
|
||||||
export const getBusinessForm = (id: string | number): AxiosPromise<BusinessFormVO> => {
|
|
||||||
return request({
|
|
||||||
url: '/workflow/businessForm/' + id,
|
|
||||||
method: 'get'
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 新增发起流程
|
|
||||||
* @param data
|
|
||||||
*/
|
|
||||||
export const addBusinessForm = (data: BusinessFormForm) => {
|
|
||||||
return request({
|
|
||||||
url: '/workflow/businessForm',
|
|
||||||
method: 'post',
|
|
||||||
data: data
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 修改发起流程
|
|
||||||
* @param data
|
|
||||||
*/
|
|
||||||
export const updateBusinessForm = (data: BusinessFormForm) => {
|
|
||||||
return request({
|
|
||||||
url: '/workflow/businessForm',
|
|
||||||
method: 'put',
|
|
||||||
data: data
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 删除发起流程
|
|
||||||
* @param id
|
|
||||||
*/
|
|
||||||
export const delBusinessForm = (id: string | number | Array<string | number>) => {
|
|
||||||
return request({
|
|
||||||
url: '/workflow/businessForm/' + id,
|
|
||||||
method: 'delete'
|
|
||||||
});
|
|
||||||
};
|
|
||||||
@ -1,111 +0,0 @@
|
|||||||
export interface BusinessFormVO {
|
|
||||||
/**
|
|
||||||
* 主键
|
|
||||||
*/
|
|
||||||
id: string | number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 申请编码
|
|
||||||
*/
|
|
||||||
applyCode: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 表单id
|
|
||||||
*/
|
|
||||||
formId: string | number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 表单内容
|
|
||||||
*/
|
|
||||||
content: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 表单值
|
|
||||||
*/
|
|
||||||
contentValue: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 表单名称
|
|
||||||
*/
|
|
||||||
formName: string;
|
|
||||||
wfFormDefinitionVo: {
|
|
||||||
/**
|
|
||||||
* 主键
|
|
||||||
*/
|
|
||||||
id: string | number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 动态表单id
|
|
||||||
*/
|
|
||||||
formId: string | number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流程定义id
|
|
||||||
*/
|
|
||||||
processDefinitionKey: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流程定义名称
|
|
||||||
*/
|
|
||||||
processDefinitionName: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流程定义id
|
|
||||||
*/
|
|
||||||
processDefinitionId: string | number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流程定义版本
|
|
||||||
*/
|
|
||||||
processDefinitionVersion: number;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface BusinessFormForm extends BaseEntity {
|
|
||||||
/**
|
|
||||||
* 主键
|
|
||||||
*/
|
|
||||||
id?: string | number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 申请编码
|
|
||||||
*/
|
|
||||||
applyCode?: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 表单id
|
|
||||||
*/
|
|
||||||
formId?: string | number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 表单名称
|
|
||||||
*/
|
|
||||||
formName?: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 表单内容
|
|
||||||
*/
|
|
||||||
content?: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 表单值
|
|
||||||
*/
|
|
||||||
contentValue?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface BusinessFormQuery extends PageQuery {
|
|
||||||
/**
|
|
||||||
* 申请编码
|
|
||||||
*/
|
|
||||||
applyCode?: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 表单名称
|
|
||||||
*/
|
|
||||||
formName?: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 日期范围参数
|
|
||||||
*/
|
|
||||||
params?: any;
|
|
||||||
}
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
import request from '@/utils/request';
|
|
||||||
import { FormForm, FormQuery, FormVO } from './types';
|
|
||||||
import { AxiosPromise } from 'axios';
|
|
||||||
|
|
||||||
// 查询流程表单列表
|
|
||||||
export function listForm(query: FormQuery): AxiosPromise<FormVO[]> {
|
|
||||||
return request({
|
|
||||||
url: '/workflow/form/list',
|
|
||||||
method: 'get',
|
|
||||||
params: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 查询流程表单列表
|
|
||||||
export function queryList(query: any): AxiosPromise<FormVO[]> {
|
|
||||||
return request({
|
|
||||||
url: '/workflow/form/queryList',
|
|
||||||
method: 'get',
|
|
||||||
params: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 查询流程表单详细
|
|
||||||
export function getForm(formId: string | number): AxiosPromise<FormVO> {
|
|
||||||
return request({
|
|
||||||
url: '/workflow/form/' + formId,
|
|
||||||
method: 'get'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 新增流程表单
|
|
||||||
export function addForm(data: FormForm) {
|
|
||||||
return request({
|
|
||||||
url: '/workflow/form',
|
|
||||||
method: 'post',
|
|
||||||
data: data
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 修改流程表单
|
|
||||||
export function updateForm(data: FormForm) {
|
|
||||||
return request({
|
|
||||||
url: '/workflow/form',
|
|
||||||
method: 'put',
|
|
||||||
data: data
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除流程表单
|
|
||||||
export function delForm(formId: string | number | (string | number)[]) {
|
|
||||||
return request({
|
|
||||||
url: '/workflow/form/' + formId,
|
|
||||||
method: 'delete'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
export interface FormVO extends BaseEntity {
|
|
||||||
formId: number | string;
|
|
||||||
formName: string;
|
|
||||||
formConfig: string;
|
|
||||||
content: string;
|
|
||||||
status?: string;
|
|
||||||
remark: string;
|
|
||||||
wfFormDefinitionVo: {
|
|
||||||
/**
|
|
||||||
* 主键
|
|
||||||
*/
|
|
||||||
id: string | number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 动态表单id
|
|
||||||
*/
|
|
||||||
formId: string | number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流程定义id
|
|
||||||
*/
|
|
||||||
processDefinitionKey: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流程定义名称
|
|
||||||
*/
|
|
||||||
processDefinitionName: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流程定义id
|
|
||||||
*/
|
|
||||||
processDefinitionId: string | number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流程定义版本
|
|
||||||
*/
|
|
||||||
processDefinitionVersion: number;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface FormForm {
|
|
||||||
formId: number | string | undefined;
|
|
||||||
formName: string;
|
|
||||||
formConfig?: string;
|
|
||||||
content?: string;
|
|
||||||
status?: string;
|
|
||||||
remark: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface FormQuery extends PageQuery {
|
|
||||||
formName?: string;
|
|
||||||
}
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
import request from '@/utils/request';
|
|
||||||
import { AxiosPromise } from 'axios';
|
|
||||||
import { FormDefinitionVO, FormDefinitionForm, FormDefinitionQuery } from '@/api/workflow/formDefinition/types';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 查询动态单与流程定义关联信息列表
|
|
||||||
* @param query
|
|
||||||
* @returns {*}
|
|
||||||
*/
|
|
||||||
|
|
||||||
export const listFormDefinition = (query?: FormDefinitionQuery): AxiosPromise<FormDefinitionVO[]> => {
|
|
||||||
return request({
|
|
||||||
url: '/workflow/formDefinition/list',
|
|
||||||
method: 'get',
|
|
||||||
params: query
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 查询动态单与流程定义关联信息详细
|
|
||||||
* @param id
|
|
||||||
*/
|
|
||||||
export const getFormDefinition = (id: string | number): AxiosPromise<FormDefinitionVO> => {
|
|
||||||
return request({
|
|
||||||
url: '/workflow/formDefinition/' + id,
|
|
||||||
method: 'get'
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 新增动态单与流程定义关联信息
|
|
||||||
* @param data
|
|
||||||
*/
|
|
||||||
export const addFormDefinition = (data: FormDefinitionForm) => {
|
|
||||||
return request({
|
|
||||||
url: '/workflow/formDefinition',
|
|
||||||
method: 'post',
|
|
||||||
data: data
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 修改动态单与流程定义关联信息
|
|
||||||
* @param data
|
|
||||||
*/
|
|
||||||
export const updateFormDefinition = (data: FormDefinitionForm) => {
|
|
||||||
return request({
|
|
||||||
url: '/workflow/formDefinition',
|
|
||||||
method: 'put',
|
|
||||||
data: data
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 删除动态单与流程定义关联信息
|
|
||||||
* @param id
|
|
||||||
*/
|
|
||||||
export const delFormDefinition = (id: string | number | Array<string | number>) => {
|
|
||||||
return request({
|
|
||||||
url: '/workflow/formDefinition/' + id,
|
|
||||||
method: 'delete'
|
|
||||||
});
|
|
||||||
};
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
export interface FormDefinitionVO {
|
|
||||||
/**
|
|
||||||
* 主键
|
|
||||||
*/
|
|
||||||
id: string | number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 动态表单id
|
|
||||||
*/
|
|
||||||
formId: string | number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流程定义id
|
|
||||||
*/
|
|
||||||
processDefinitionKey: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流程定义名称
|
|
||||||
*/
|
|
||||||
processDefinitionName: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流程定义id
|
|
||||||
*/
|
|
||||||
processDefinitionId: string | number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流程定义版本
|
|
||||||
*/
|
|
||||||
processDefinitionVersion: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface FormDefinitionForm extends BaseEntity {
|
|
||||||
/**
|
|
||||||
* 主键
|
|
||||||
*/
|
|
||||||
id?: string | number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 动态表单id
|
|
||||||
*/
|
|
||||||
formId?: string | number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流程定义id
|
|
||||||
*/
|
|
||||||
processDefinitionKey?: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流程定义名称
|
|
||||||
*/
|
|
||||||
processDefinitionName?: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流程定义id
|
|
||||||
*/
|
|
||||||
processDefinitionId?: string | number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流程定义版本
|
|
||||||
*/
|
|
||||||
processDefinitionVersion?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface FormDefinitionQuery extends PageQuery {
|
|
||||||
/**
|
|
||||||
* 动态表单id
|
|
||||||
*/
|
|
||||||
formId?: string | number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流程定义id
|
|
||||||
*/
|
|
||||||
processDefinitionKey?: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流程定义名称
|
|
||||||
*/
|
|
||||||
processDefinitionName?: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流程定义id
|
|
||||||
*/
|
|
||||||
processDefinitionId?: string | number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流程定义版本
|
|
||||||
*/
|
|
||||||
processDefinitionVersion?: number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 日期范围参数
|
|
||||||
*/
|
|
||||||
params?: any;
|
|
||||||
}
|
|
||||||
@ -37,9 +37,6 @@ import { parseTime, addDateRange, handleTree, selectDictLabel, selectDictLabels
|
|||||||
// 国际化
|
// 国际化
|
||||||
import i18n from '@/lang/index';
|
import i18n from '@/lang/index';
|
||||||
|
|
||||||
import VForm3 from '@/../lib/vform/designer.umd.js';
|
|
||||||
import '../lib/vform/designer.style.css';
|
|
||||||
|
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
// 全局方法挂载
|
// 全局方法挂载
|
||||||
app.config.globalProperties.useDict = useDict;
|
app.config.globalProperties.useDict = useDict;
|
||||||
@ -57,7 +54,6 @@ app.use(ElementIcons);
|
|||||||
app.use(router);
|
app.use(router);
|
||||||
app.use(store);
|
app.use(store);
|
||||||
app.use(i18n);
|
app.use(i18n);
|
||||||
app.use(VForm3);
|
|
||||||
app.use(plugins);
|
app.use(plugins);
|
||||||
// 自定义指令
|
// 自定义指令
|
||||||
directive(app);
|
directive(app);
|
||||||
|
|||||||
@ -1,225 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="p-2">
|
|
||||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
|
|
||||||
:leave-active-class="proxy?.animate.searchAnimate.leave">
|
|
||||||
<div class="search" v-show="showSearch">
|
|
||||||
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
|
|
||||||
<el-form-item label="表单名称" prop="formName">
|
|
||||||
<el-input v-model="queryParams.formName" placeholder="请输入表单名称" clearable @keyup.enter="handleQuery" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
||||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
|
|
||||||
<el-card shadow="never" v-loading="loading">
|
|
||||||
<template #header>
|
|
||||||
<el-row :gutter="10" class="mb8">
|
|
||||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="queryFromList"></right-toolbar>
|
|
||||||
</el-row>
|
|
||||||
</template>
|
|
||||||
<el-row :gutter="12">
|
|
||||||
<el-col :span="8" style="padding-top: 15px;" v-for="(item, index) in formList" :key="index">
|
|
||||||
<el-card shadow="hover" style="cursor: pointer;" @click="handleAppay(item)">
|
|
||||||
<div style="display: flex;justify-content:flex-start;">
|
|
||||||
<div>
|
|
||||||
<img
|
|
||||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAABwBAMAAAA0zul4AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAeUExURf///zKW+ur0/nO4+6XR/YvE/Eqi+5DG/Nnr/sPg/brnfYAAAAFMSURBVFjD7dfPSsNAEAbwNTGtuXVM09pbqCAeFV8gwYNXtU+wioI3FcFrLorH+OeBncYuSnYl+wUKEueDNmHhR8rO7myqqGOUQIECBQoUaDK5dsQD3ihXNtth6YTqtQ0mbqcGbXD8C4z6BYPFUSP3ftCawOVU+8ANezH5QXuVzDwnJ5g38nfruP/SSOYHh9bkjNdcjrDrAghOHhvJe7ettlab6RaFA9fDkTpOURivbi963OX+H/x4qLrA4IzHzjvA57pzVDCMsU7+nT0eKfiTofCQKF2SAxAGPLBdf4GQz63LXB1rHsVgRDtfD05BGLKofQJDOuXLHQyHdQm5mOhPjQ2coXXUXIiM6zFCYUGj3aTUlKMwpIQPOd9j7ufS0abDotsqMu+wcAd40nRV+sCp1W0ysxbW9GpNlRsWrTB9mzvyLn/KBAoUKFCgyScZMYmWkzKSDQAAAABJRU5ErkJggg=="
|
|
||||||
width="60" />
|
|
||||||
</div>
|
|
||||||
<div style="display: inline-block;padding-left: 15px;">
|
|
||||||
<div class="from-font">{{ item.formName }}</div>
|
|
||||||
<div class="from-time">{{ item.updateTime }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-empty description="暂无可用表单" v-if="formList.length === 0" />
|
|
||||||
</el-card>
|
|
||||||
<!-- 流程表单设计器对话框 -->
|
|
||||||
<el-dialog :title="render.title" v-if="render.visible" v-model="render.visible" width="80%" append-to-body>
|
|
||||||
<div v-loading="fromLoading">
|
|
||||||
<v-form-render :form-json="{}" :form-data="{}" ref="vfRenderRef" />
|
|
||||||
</div>
|
|
||||||
<template #footer>
|
|
||||||
<span class="dialog-footer">
|
|
||||||
<el-button v-loading="buttonLoading" @click="render.visible = false">取消</el-button>
|
|
||||||
<el-button type="success" v-loading="buttonLoading" @click="submitData('draft')">暂存</el-button>
|
|
||||||
<el-button type="primary" v-loading="buttonLoading" @click="submitData('submit')">提交</el-button>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
<!-- 提交组件 -->
|
|
||||||
<submitVerify ref="submitVerifyRef" @submitCallback="submitCallback" @cancelCallback="cancelCallback" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup name="BusinessForm" lang="ts">
|
|
||||||
import { queryList, getForm } from "@/api/workflow/form";
|
|
||||||
import { FormVO } from "@/api/workflow/form/types";
|
|
||||||
import { addBusinessForm, updateBusinessForm } from '@/api/workflow/businessForm';
|
|
||||||
import { BusinessFormForm } from '@/api/workflow/businessForm/types';
|
|
||||||
import { startWorkFlow } from '@/api/workflow/task';
|
|
||||||
import SubmitVerify from '@/components/Process/submitVerify.vue';
|
|
||||||
|
|
||||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
||||||
//提交组件
|
|
||||||
const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
|
|
||||||
|
|
||||||
const showSearch = ref(true);
|
|
||||||
const ids = ref<Array<string | number>>([]);
|
|
||||||
const formList = ref<FormVO[]>([]);
|
|
||||||
const loading = ref(true);
|
|
||||||
const fromLoading = ref(true);
|
|
||||||
const buttonLoading = ref(false);
|
|
||||||
const processDefinitionKey = ref<string>('');
|
|
||||||
|
|
||||||
const queryFormRef = ref<ElFormInstance>();
|
|
||||||
const vfRenderRef = ref();
|
|
||||||
|
|
||||||
const render = reactive<DialogOption>({
|
|
||||||
visible: false,
|
|
||||||
title: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const queryParams = ref<Record<string, any>>({
|
|
||||||
formName: ''
|
|
||||||
});
|
|
||||||
|
|
||||||
const initFormData = ref<BusinessFormForm>({
|
|
||||||
id: undefined,
|
|
||||||
applyCode: undefined,
|
|
||||||
formId: undefined,
|
|
||||||
formName: undefined,
|
|
||||||
content: undefined,
|
|
||||||
contentValue: undefined
|
|
||||||
})
|
|
||||||
|
|
||||||
const submitFormData = ref<Record<string, any>>({
|
|
||||||
businessKey: '',
|
|
||||||
processKey: '',
|
|
||||||
variables: {}
|
|
||||||
});
|
|
||||||
|
|
||||||
/** 搜索按钮操作 */
|
|
||||||
const handleQuery = () => {
|
|
||||||
queryFromList();
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
const resetQuery = () => {
|
|
||||||
queryFormRef.value?.resetFields();
|
|
||||||
handleQuery();
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 查询可用表单 */
|
|
||||||
const queryFromList = async () => {
|
|
||||||
loading.value = true
|
|
||||||
const res = await queryList(queryParams.value);
|
|
||||||
formList.value = res.data;
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
/** 申请单据 */
|
|
||||||
const handleAppay = async (row?: FormVO) => {
|
|
||||||
render.visible = true;
|
|
||||||
fromLoading.value = true
|
|
||||||
buttonLoading.value = true
|
|
||||||
render.title = row?.formName;
|
|
||||||
const formId = row?.formId || ids.value[0];
|
|
||||||
initFormData.value.formId = row?.formId
|
|
||||||
initFormData.value.formName = row?.formName
|
|
||||||
initFormData.value.content = row?.content
|
|
||||||
const res = await getForm(formId);
|
|
||||||
if (vfRenderRef.value) {
|
|
||||||
fromLoading.value = false
|
|
||||||
buttonLoading.value = false
|
|
||||||
if (res.data.wfFormDefinitionVo && res.data.wfFormDefinitionVo.processDefinitionKey) {
|
|
||||||
processDefinitionKey.value = res.data.wfFormDefinitionVo.processDefinitionKey
|
|
||||||
}
|
|
||||||
vfRenderRef.value.setFormJson(res.data.content);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 提交按钮 */
|
|
||||||
const submitData = (status: string) => {
|
|
||||||
if (vfRenderRef.value) {
|
|
||||||
fromLoading.value = true
|
|
||||||
buttonLoading.value = true;
|
|
||||||
vfRenderRef.value.getFormData().then((formData: object) => {
|
|
||||||
initFormData.value.contentValue = JSON.stringify(formData)
|
|
||||||
if ('draft' === status) {
|
|
||||||
addBusinessForm(initFormData.value).then(res => {
|
|
||||||
proxy?.$modal.msgSuccess("暂存成功");
|
|
||||||
render.visible = false;
|
|
||||||
buttonLoading.value = false;
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
if (!processDefinitionKey.value) {
|
|
||||||
proxy?.$modal.msgError("未绑定流程!");
|
|
||||||
buttonLoading.value = false;
|
|
||||||
fromLoading.value = false;
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (initFormData.value && initFormData.value.id) {
|
|
||||||
updateBusinessForm(initFormData.value).then(res => {
|
|
||||||
initFormData.value = res.data
|
|
||||||
handleStartWorkFlow(res.data)
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
addBusinessForm(initFormData.value).then(res => {
|
|
||||||
initFormData.value = res.data
|
|
||||||
handleStartWorkFlow(res.data)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//提交申请
|
|
||||||
const handleStartWorkFlow = async (data: any) => {
|
|
||||||
submitFormData.value.processKey = processDefinitionKey.value;
|
|
||||||
submitFormData.value.businessKey = data.id;
|
|
||||||
submitFormData.value.variables = data.variable;
|
|
||||||
startWorkFlow(submitFormData.value).then((response: any) => {
|
|
||||||
if (submitVerifyRef.value) {
|
|
||||||
submitVerifyRef.value.openDialog(response.data.taskId);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
//提交回调
|
|
||||||
const submitCallback = async () => {
|
|
||||||
render.visible = false;
|
|
||||||
buttonLoading.value = false;
|
|
||||||
fromLoading.value = false;
|
|
||||||
handleQuery();
|
|
||||||
};
|
|
||||||
//取消回调
|
|
||||||
const cancelCallback = async () => {
|
|
||||||
buttonLoading.value = false;
|
|
||||||
fromLoading.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
queryFromList();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.from-font {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
vertical-align: top;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.from-time {
|
|
||||||
font-size: 12px;
|
|
||||||
vertical-align: bottom;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,288 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="p-2">
|
|
||||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
|
|
||||||
:leave-active-class="proxy?.animate.searchAnimate.leave">
|
|
||||||
<div class="search" v-show="showSearch">
|
|
||||||
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
|
|
||||||
<el-form-item label="申请编码" prop="applyCode">
|
|
||||||
<el-input v-model="queryParams.applyCode" placeholder="请输入申请编码" clearable @keyup.enter="handleQuery" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="表单名称" prop="formName">
|
|
||||||
<el-input v-model="queryParams.formName" placeholder="请输入表单名称" clearable @keyup.enter="handleQuery" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
||||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
|
|
||||||
<el-card shadow="never">
|
|
||||||
<template #header>
|
|
||||||
<el-row :gutter="10" class="mb8">
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button type="warning" plain icon="Download" @click="handleExport"
|
|
||||||
v-hasPermi="['workflow:businessForm:export']">导出</el-button>
|
|
||||||
</el-col>
|
|
||||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
|
||||||
</el-row>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<el-table v-loading="loading" :data="businessFormList" @selection-change="handleSelectionChange">
|
|
||||||
<el-table-column type="selection" width="55" align="center" />
|
|
||||||
<el-table-column label="主键" align="center" prop="id" v-if="false" />
|
|
||||||
<el-table-column label="申请编码" align="center" prop="applyCode" />
|
|
||||||
<el-table-column label="表单名称" align="center" prop="formName" />
|
|
||||||
<el-table-column align="center" prop="businessStatusName" label="流程状态" min-width="70">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-tag type="success">{{ scope.row.processInstanceVo.businessStatusName }}</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-row :gutter="10" class="mb8">
|
|
||||||
<el-col :span="1.5" v-if="scope.row.processInstanceVo.businessStatus !== 'draft'">
|
|
||||||
<el-button type="text" size="small" icon="Document"
|
|
||||||
@click="handleApprovalRecord(scope.row.processInstanceVo.id)">审批记录</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5"
|
|
||||||
v-if="scope.row.processInstanceVo.businessStatus === 'draft' || scope.row.processInstanceVo.businessStatus === 'cancel' || scope.row.processInstanceVo.businessStatus === 'back'">
|
|
||||||
<el-button v-hasPermi="['workflow:businessForm:remove']" type="text" size="small" icon="Delete"
|
|
||||||
@click="handleDelete(scope.row)">删除</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5" v-if="scope.row.processInstanceVo.businessStatus === 'waiting'">
|
|
||||||
<el-button type="text" size="small" icon="Notification"
|
|
||||||
@click="handleCancelProcessApply(scope.row.processInstanceVo.id)">撤销</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5"
|
|
||||||
v-if="scope.row.processInstanceVo.businessStatus === 'draft' || scope.row.processInstanceVo.businessStatus === 'cancel' || scope.row.processInstanceVo.businessStatus === 'back'">
|
|
||||||
<el-button v-hasPermi="['workflow:businessForm:edit']" type="text" size="small" icon="Edit"
|
|
||||||
@click="handleUpdate(scope.row)">修改</el-button>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
|
||||||
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
|
||||||
</el-card>
|
|
||||||
<!-- 流程表单设计器对话框 -->
|
|
||||||
<el-dialog :title="render.title" v-if="render.visible" v-model="render.visible" width="80%" append-to-body>
|
|
||||||
<div v-loading="fromLoading">
|
|
||||||
<v-form-render :form-json="{}" :form-data="{}" ref="vfRenderRef" />
|
|
||||||
</div>
|
|
||||||
<template #footer>
|
|
||||||
<span class="dialog-footer">
|
|
||||||
<el-button v-loading="buttonLoading" @click="render.visible = false">取消</el-button>
|
|
||||||
<el-button type="success" v-loading="buttonLoading" @click="submitData('draft')">暂存</el-button>
|
|
||||||
<el-button type="primary" v-loading="buttonLoading" @click="submitData('submit')">提交</el-button>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
<!-- 提交组件 -->
|
|
||||||
<submitVerify ref="submitVerifyRef" @submitCallback="submitCallback" @cancelCallback="cancelCallback" />
|
|
||||||
<!-- 审批记录 -->
|
|
||||||
<approvalRecord ref="approvalRecordRef" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup name="BusinessForm" lang="ts">
|
|
||||||
import { listBusinessForm, getBusinessForm, delBusinessForm, updateBusinessForm } from '@/api/workflow/businessForm';
|
|
||||||
import { cancelProcessApply } from '@/api/workflow/processInstance';
|
|
||||||
import { BusinessFormVO, BusinessFormQuery, BusinessFormForm } from '@/api/workflow/businessForm/types';
|
|
||||||
import SubmitVerify from '@/components/Process/submitVerify.vue';
|
|
||||||
import ApprovalRecord from '@/components/Process/approvalRecord.vue';
|
|
||||||
import { startWorkFlow } from '@/api/workflow/task';
|
|
||||||
//提交组件
|
|
||||||
const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
|
|
||||||
//审批记录组件
|
|
||||||
const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
|
|
||||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
||||||
|
|
||||||
const businessFormList = ref<BusinessFormVO[]>([]);
|
|
||||||
const buttonLoading = ref(false);
|
|
||||||
const loading = ref(true);
|
|
||||||
const fromLoading = ref(true);
|
|
||||||
const showSearch = ref(true);
|
|
||||||
const ids = ref<Array<string | number>>([]);
|
|
||||||
const applyCodes = ref<Array<string | number>>([]);
|
|
||||||
const single = ref(true);
|
|
||||||
const multiple = ref(true);
|
|
||||||
const total = ref(0);
|
|
||||||
const processDefinitionKey = ref<string>('');
|
|
||||||
|
|
||||||
const queryFormRef = ref<ElFormInstance>();
|
|
||||||
const vfRenderRef = ref();
|
|
||||||
|
|
||||||
const render = reactive<DialogOption>({
|
|
||||||
visible: false,
|
|
||||||
title: ''
|
|
||||||
});
|
|
||||||
|
|
||||||
const initFormData: BusinessFormForm = {
|
|
||||||
id: undefined,
|
|
||||||
applyCode: undefined,
|
|
||||||
formId: undefined,
|
|
||||||
formName: undefined,
|
|
||||||
content: undefined,
|
|
||||||
contentValue: undefined
|
|
||||||
};
|
|
||||||
const data = reactive<PageData<BusinessFormForm, BusinessFormQuery>>({
|
|
||||||
form: { ...initFormData },
|
|
||||||
queryParams: {
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
applyCode: undefined,
|
|
||||||
formName: undefined,
|
|
||||||
params: {}
|
|
||||||
},
|
|
||||||
rules: {}
|
|
||||||
});
|
|
||||||
|
|
||||||
const { queryParams, form, rules } = toRefs(data);
|
|
||||||
|
|
||||||
const submitFormData = ref<Record<string, any>>({
|
|
||||||
businessKey: '',
|
|
||||||
processKey: '',
|
|
||||||
variables: {}
|
|
||||||
});
|
|
||||||
|
|
||||||
/** 查询发起流程列表 */
|
|
||||||
const getList = async () => {
|
|
||||||
loading.value = true;
|
|
||||||
const res = await listBusinessForm(queryParams.value);
|
|
||||||
businessFormList.value = res.rows;
|
|
||||||
total.value = res.total;
|
|
||||||
loading.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 搜索按钮操作 */
|
|
||||||
const handleQuery = () => {
|
|
||||||
queryParams.value.pageNum = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
const resetQuery = () => {
|
|
||||||
queryFormRef.value?.resetFields();
|
|
||||||
handleQuery();
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 多选框选中数据 */
|
|
||||||
const handleSelectionChange = (selection: BusinessFormVO[]) => {
|
|
||||||
ids.value = selection.map((item) => item.id);
|
|
||||||
applyCodes.value = selection.map((item) => item.applyCode);
|
|
||||||
single.value = selection.length != 1;
|
|
||||||
multiple.value = !selection.length;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 修改按钮操作 */
|
|
||||||
const handleUpdate = async (row?: BusinessFormVO) => {
|
|
||||||
const _id = row?.id || ids.value[0];
|
|
||||||
fromLoading.value = true;
|
|
||||||
buttonLoading.value = true;
|
|
||||||
render.visible = true;
|
|
||||||
const res = await getBusinessForm(_id);
|
|
||||||
form.value = res.data;
|
|
||||||
render.title = '修改单据';
|
|
||||||
if (res.data.wfFormDefinitionVo && res.data.wfFormDefinitionVo.processDefinitionKey) {
|
|
||||||
processDefinitionKey.value = res.data.wfFormDefinitionVo.processDefinitionKey;
|
|
||||||
}
|
|
||||||
if (vfRenderRef.value) {
|
|
||||||
fromLoading.value = false;
|
|
||||||
buttonLoading.value = false;
|
|
||||||
vfRenderRef.value.setFormJson(res.data.content);
|
|
||||||
vfRenderRef.value.setFormData(JSON.parse(res.data.contentValue));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 提交按钮 */
|
|
||||||
const submitData = (status: string) => {
|
|
||||||
if (vfRenderRef.value) {
|
|
||||||
buttonLoading.value = true;
|
|
||||||
fromLoading.value = true;
|
|
||||||
vfRenderRef.value.getFormData().then((formData: object) => {
|
|
||||||
form.value.contentValue = JSON.stringify(formData);
|
|
||||||
if ('draft' === status) {
|
|
||||||
updateBusinessForm(form.value).then((res) => {
|
|
||||||
proxy?.$modal.msgSuccess('暂存成功');
|
|
||||||
render.visible = false;
|
|
||||||
buttonLoading.value = false;
|
|
||||||
fromLoading.value = false;
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
if (!processDefinitionKey.value) {
|
|
||||||
proxy?.$modal.msgError('未绑定流程!');
|
|
||||||
buttonLoading.value = false;
|
|
||||||
fromLoading.value = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
updateBusinessForm(form.value).then((res) => {
|
|
||||||
handleStartWorkFlow(res.data);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//提交申请
|
|
||||||
const handleStartWorkFlow = async (data: any) => {
|
|
||||||
submitFormData.value.processKey = processDefinitionKey.value;
|
|
||||||
submitFormData.value.businessKey = data.id;
|
|
||||||
submitFormData.value.variables = data.variable;
|
|
||||||
startWorkFlow(submitFormData.value).then((response: any) => {
|
|
||||||
if (submitVerifyRef.value) {
|
|
||||||
submitVerifyRef.value.openDialog(response.data.taskId);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
//提交回调
|
|
||||||
const submitCallback = async () => {
|
|
||||||
render.visible = false;
|
|
||||||
buttonLoading.value = false;
|
|
||||||
fromLoading.value = false;
|
|
||||||
handleQuery();
|
|
||||||
};
|
|
||||||
//取消回调
|
|
||||||
const cancelCallback = async () => {
|
|
||||||
buttonLoading.value = false;
|
|
||||||
fromLoading.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 删除按钮操作 */
|
|
||||||
const handleDelete = async (row?: BusinessFormVO) => {
|
|
||||||
const _ids = row?.id || ids.value;
|
|
||||||
const _applyCode = row?.applyCode || applyCodes.value;
|
|
||||||
await proxy?.$modal.confirm('是否确认删除流程编号为【' + _applyCode + '】的数据项？').finally(() => loading.value = false);
|
|
||||||
loading.value = true;
|
|
||||||
await delBusinessForm(_ids);
|
|
||||||
proxy?.$modal.msgSuccess("删除成功");
|
|
||||||
loading.value = false;
|
|
||||||
await getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 导出按钮操作 */
|
|
||||||
const handleExport = () => {
|
|
||||||
proxy?.download('workflow/businessForm/export', {
|
|
||||||
...queryParams.value
|
|
||||||
}, `businessForm_${new Date().getTime()}.xlsx`)
|
|
||||||
}
|
|
||||||
//审批记录
|
|
||||||
const handleApprovalRecord = (processInstanceId: string) => {
|
|
||||||
if (approvalRecordRef.value) {
|
|
||||||
approvalRecordRef.value.init(processInstanceId);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/** 撤销按钮操作 */
|
|
||||||
const handleCancelProcessApply = async (processInstanceId: string) => {
|
|
||||||
await proxy?.$modal.confirm('是否确认撤销当前单据？');
|
|
||||||
loading.value = true;
|
|
||||||
await cancelProcessApply(processInstanceId).finally(() => (loading.value = false));
|
|
||||||
getList();
|
|
||||||
proxy?.$modal.msgSuccess('撤销成功');
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
getList();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,389 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="p-2">
|
|
||||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
|
||||||
<div class="search" v-show="showSearch">
|
|
||||||
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="70">
|
|
||||||
<el-form-item label="表单名称" prop="formName">
|
|
||||||
<el-input v-model="queryParams.formName" placeholder="请输入表单名称" clearable @keyup.enter="handleQuery" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
||||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
<el-card shadow="never">
|
|
||||||
<template #header>
|
|
||||||
<el-row :gutter="10" class="mb8">
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['workflow:form:add']">新增</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['workflow:form:edit']">修改</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['workflow:form:remove']">删除</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['workflow:form:export']">导出</el-button>
|
|
||||||
</el-col>
|
|
||||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
|
||||||
</el-row>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<el-table v-loading="loading" :data="formList" @selection-change="handleSelectionChange">
|
|
||||||
<el-table-column type="selection" width="55" align="center" />
|
|
||||||
<el-table-column label="表单主键" align="center" prop="formId" v-if="false" />
|
|
||||||
<el-table-column label="表单名称" align="center" prop="formName" />
|
|
||||||
<el-table-column label="状态" align="center" key="status">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="流程定义KEY" align="center" prop="wfFormDefinitionVo">
|
|
||||||
<template #default="scope">
|
|
||||||
<span v-if="scope.row.wfFormDefinitionVo">{{ scope.row.wfFormDefinitionVo.processDefinitionKey }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="流程定义名称" align="center" prop="wfFormDefinitionVo">
|
|
||||||
<template #default="scope">
|
|
||||||
<span v-if="scope.row.wfFormDefinitionVo">{{ scope.row.wfFormDefinitionVo.processDefinitionName }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-tooltip content="详情" placement="top">
|
|
||||||
<el-button link type="primary" icon="View" @click="handleDetail(scope.row)" v-hasPermi="['workflow:form:query']"></el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip content="修改" placement="top">
|
|
||||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['workflow:form:edit']"></el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip content="删除" placement="top">
|
|
||||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['workflow:form:remove']"></el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip content="绑定流程" placement="top">
|
|
||||||
<el-button link type="primary" icon="Tickets" @click="handleProcess(scope.row)"></el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
<!-- 流程表单设计器对话框 -->
|
|
||||||
<el-dialog :title="designer.title" v-model="designer.visible" fullscreen>
|
|
||||||
<div id="form-designer">
|
|
||||||
<v-form-designer ref="vfDesignerRef" :resetFormJson="true" :designer-config="designerConfig">
|
|
||||||
<!-- 自定义按钮插槽 -->
|
|
||||||
<template #customToolButtons>
|
|
||||||
<el-button link type="primary" icon="Finished" @click="dialog.visible = true">保存</el-button>
|
|
||||||
</template>
|
|
||||||
</v-form-designer>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
|
|
||||||
<!-- 预览表单对话框 -->
|
|
||||||
<el-dialog :title="render.title" v-model="render.visible" width="60%" append-to-body>
|
|
||||||
<v-form-render :form-json="{}" :form-data="{}" ref="vfRenderRef" />
|
|
||||||
</el-dialog>
|
|
||||||
|
|
||||||
<!-- 添加或修改流程表单对话框 -->
|
|
||||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="600px" append-to-body>
|
|
||||||
<el-form ref="formFormRef" :model="form" :rules="rules" label-width="80px">
|
|
||||||
<el-form-item label="表单名称" prop="formName">
|
|
||||||
<el-input v-model="form.formName" placeholder="请输入表单名称" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注" prop="remark">
|
|
||||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<div class="dialog-footer">
|
|
||||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
||||||
<el-button @click="cancel">取 消</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
<el-dialog v-if="processDefinitionDialog.visible" v-model="processDefinitionDialog.visible" :title="processDefinitionDialog.title" width="70%">
|
|
||||||
<el-table v-loading="loading" :data="processDefinition.list">
|
|
||||||
<el-table-column fixed align="center" type="index" label="序号" width="50"></el-table-column>
|
|
||||||
<el-table-column fixed align="center" prop="name" label="流程定义名称"></el-table-column>
|
|
||||||
<el-table-column align="center" prop="key" label="标识Key"></el-table-column>
|
|
||||||
<el-table-column align="center" prop="version" label="版本号" width="90">
|
|
||||||
<template #default="scope"> v{{ scope.row.version }}.0</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" prop="suspensionState" label="状态" min-width="70">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-tag type="success" v-if="scope.row.suspensionState == 1">激活</el-tag>
|
|
||||||
<el-tag type="danger" v-else>挂起</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" prop="deploymentTime" label="部署时间" :show-overflow-tooltip="true"></el-table-column>
|
|
||||||
<el-table-column fixed="right" label="操作" align="center" width="200" class-name="small-padding fixed-width">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button link type="primary" size="small" @click="handleConfirm(scope.row)">确认绑定</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<pagination
|
|
||||||
v-show="processDefinition.total > 0"
|
|
||||||
:total="processDefinition.total"
|
|
||||||
v-model:page="processQueryParams.pageNum"
|
|
||||||
v-model:limit="processQueryParams.pageSize"
|
|
||||||
@pagination="getDefinitionList"
|
|
||||||
/>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup name="Form" lang="ts">
|
|
||||||
import { listForm, addForm, updateForm, getForm, delForm } from "@/api/workflow/form";
|
|
||||||
import {
|
|
||||||
listProcessDefinition
|
|
||||||
} from '@/api/workflow/processDefinition';
|
|
||||||
import {
|
|
||||||
addFormDefinition
|
|
||||||
} from '@/api/workflow/formDefinition';
|
|
||||||
import { FormForm, FormQuery, FormVO } from "@/api/workflow/form/types";
|
|
||||||
import { ComponentInternalInstance } from "vue";
|
|
||||||
|
|
||||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
||||||
|
|
||||||
const formList = ref<FormVO[]>([]);
|
|
||||||
const loading = ref(true);
|
|
||||||
const showSearch = ref(true);
|
|
||||||
const ids = ref<Array<number | string>>([]);
|
|
||||||
const single = ref(true);
|
|
||||||
const multiple = ref(true);
|
|
||||||
const total = ref(0);
|
|
||||||
const formId = ref<number | string>();
|
|
||||||
|
|
||||||
const processDefinition = reactive<any>({
|
|
||||||
list: [],
|
|
||||||
total: 0
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const vfDesignerRef = ref();
|
|
||||||
const vfRenderRef = ref();
|
|
||||||
const formFormRef = ref(ElForm);
|
|
||||||
const queryFormRef = ref(ElForm);
|
|
||||||
|
|
||||||
const designer = reactive<DialogOption>({
|
|
||||||
visible: false,
|
|
||||||
title: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const processDefinitionDialog = reactive<DialogOption>({
|
|
||||||
visible: false,
|
|
||||||
title: '流程定义'
|
|
||||||
});
|
|
||||||
|
|
||||||
const designerConfig = reactive({
|
|
||||||
externalLink: true,
|
|
||||||
toolbarMaxWidth: 510,
|
|
||||||
// languageMenu: true,
|
|
||||||
//externalLink: false,
|
|
||||||
//formTemplates: false,
|
|
||||||
//eventCollapse: false,
|
|
||||||
//clearDesignerButton: false,
|
|
||||||
//previewFormButton: false,
|
|
||||||
})
|
|
||||||
|
|
||||||
const render = reactive<DialogOption>({
|
|
||||||
visible: false,
|
|
||||||
title: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const dialog = reactive<DialogOption>({
|
|
||||||
visible: false,
|
|
||||||
title: ''
|
|
||||||
});
|
|
||||||
|
|
||||||
const initFormData: FormForm = {
|
|
||||||
formId: undefined,
|
|
||||||
formName: '',
|
|
||||||
formConfig: '',
|
|
||||||
content: '',
|
|
||||||
status: '1',
|
|
||||||
remark: ''
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = reactive<PageData<FormForm, FormQuery>>({
|
|
||||||
form: { ...initFormData },
|
|
||||||
queryParams: {
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
formName: ''
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
formName: [{ required: true, message: "表单名称不能为空", trigger: "blur" }]
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const { queryParams, form, rules } = toRefs<PageData<FormForm, FormQuery>>(data);
|
|
||||||
|
|
||||||
// 查询参数
|
|
||||||
const processQueryParams = ref<Record<string, any>>({
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
name: undefined,
|
|
||||||
key: undefined,
|
|
||||||
categoryCode: undefined
|
|
||||||
});
|
|
||||||
|
|
||||||
/** 查询岗位列表 */
|
|
||||||
const getList = async () => {
|
|
||||||
loading.value = true;
|
|
||||||
const res = await listForm(queryParams.value);
|
|
||||||
formList.value = res.rows;
|
|
||||||
total.value = res.total;
|
|
||||||
loading.value = false;
|
|
||||||
}
|
|
||||||
/** 取消按钮 */
|
|
||||||
const cancel = () => {
|
|
||||||
reset();
|
|
||||||
dialog.visible = false;
|
|
||||||
}
|
|
||||||
/** 表单重置 */
|
|
||||||
const reset = () => {
|
|
||||||
form.value = { ...initFormData };
|
|
||||||
}
|
|
||||||
/** 搜索按钮操作 */
|
|
||||||
const handleQuery = () => {
|
|
||||||
queryParams.value.pageNum = 1;
|
|
||||||
getList();
|
|
||||||
}
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
const resetQuery = () => {
|
|
||||||
queryFormRef.value.resetFields();
|
|
||||||
handleQuery();
|
|
||||||
}
|
|
||||||
/** 多选框选中数据 */
|
|
||||||
const handleSelectionChange = (selection: FormVO[]) => {
|
|
||||||
ids.value = selection.map(item => item.formId);
|
|
||||||
single.value = selection.length != 1;
|
|
||||||
multiple.value = !selection.length;
|
|
||||||
}
|
|
||||||
/** 新增表单操作 */
|
|
||||||
const handleAdd = () => {
|
|
||||||
designer.visible = true;
|
|
||||||
getDefinitionList()
|
|
||||||
nextTick(() => {
|
|
||||||
reset();
|
|
||||||
vfDesignerRef.value.clearDesigner();
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/** 修改表单操作 */
|
|
||||||
const handleUpdate = (row?: FormVO) => {
|
|
||||||
designer.visible = true;
|
|
||||||
getDefinitionList()
|
|
||||||
nextTick(async () => {
|
|
||||||
const formId = row?.formId || ids.value[0];
|
|
||||||
const res = await getForm(formId);
|
|
||||||
form.value = res.data;
|
|
||||||
vfDesignerRef.value.setFormJson(form.value.content);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
//修改状态
|
|
||||||
const handleStatusChange = async (row: FormVO) => {
|
|
||||||
let text = row.status === "0" ? "启用" : "停用"
|
|
||||||
try {
|
|
||||||
form.value = row
|
|
||||||
form.value.status === "0" ? "1" : "0";
|
|
||||||
await proxy?.$modal.confirm('确认要' + text + '【' + row.formName + '】表单?');
|
|
||||||
await updateForm(row);
|
|
||||||
proxy?.$modal.msgSuccess(text + "成功");
|
|
||||||
getList()
|
|
||||||
} catch (err) {
|
|
||||||
row.status = row.status === "0" ? "1" : "0";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/** 查看表单操作 */
|
|
||||||
const handleDetail = (row: FormVO) => {
|
|
||||||
render.visible = true;
|
|
||||||
render.title = '查看表单详情';
|
|
||||||
nextTick(async () => {
|
|
||||||
vfRenderRef.value.setFormJson(row.content || { formConfig: {}, widgetList: [] });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 删除按钮操作 */
|
|
||||||
const handleDelete = async (row?: FormVO) => {
|
|
||||||
const formIds = row?.formId || ids.value;
|
|
||||||
await proxy?.$modal.confirm('是否确认删除表单编号为"' + formIds + '"的数据项？');
|
|
||||||
await delForm(formIds);
|
|
||||||
getList();
|
|
||||||
proxy?.$modal.msgSuccess("删除成功");
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 导出按钮操作 */
|
|
||||||
const handleExport = () => {
|
|
||||||
proxy?.download("workflow/form/export", {
|
|
||||||
...queryParams.value
|
|
||||||
}, `form_${new Date().getTime()}.xlsx`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const submitForm = () => {
|
|
||||||
const formJson = vfDesignerRef.value.getFormJson();
|
|
||||||
form.value.content = JSON.stringify(formJson);
|
|
||||||
nextTick(async () => {
|
|
||||||
form.value.formId ? await updateForm(form.value) : await addForm(form.value);
|
|
||||||
proxy?.$modal.msgSuccess("操作成功");
|
|
||||||
dialog.visible = false;
|
|
||||||
designer.visible = false;
|
|
||||||
getList();
|
|
||||||
})
|
|
||||||
}
|
|
||||||
//获取流程定义
|
|
||||||
const getDefinitionList = () => {
|
|
||||||
listProcessDefinition(processQueryParams.value).then(res => {
|
|
||||||
processDefinition.list = res.rows
|
|
||||||
processDefinition.total = res.total;
|
|
||||||
loading.value = false;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const handleProcess = async (row?: FormVO) => {
|
|
||||||
formId.value = row?.formId
|
|
||||||
processDefinitionDialog.visible = true
|
|
||||||
getDefinitionList()
|
|
||||||
}
|
|
||||||
//绑定流程
|
|
||||||
|
|
||||||
const handleConfirm = async (row?: any) => {
|
|
||||||
await proxy?.$modal.confirm('是否确认绑定【' + row.key + '】？');
|
|
||||||
let data = {
|
|
||||||
formId: formId.value,
|
|
||||||
processDefinitionKey: row.key,
|
|
||||||
processDefinitionName: row.name,
|
|
||||||
processDefinitionId: row.id,
|
|
||||||
processDefinitionVersion: row.version
|
|
||||||
}
|
|
||||||
await addFormDefinition(data);
|
|
||||||
processDefinitionDialog.visible = false
|
|
||||||
getList();
|
|
||||||
proxy?.$modal.msgSuccess("绑定成功");
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
getList();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
#form-designer {
|
|
||||||
.main-container {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.external-link) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -69,7 +69,6 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
|
|||||||
'vue-i18n',
|
'vue-i18n',
|
||||||
'@vueup/vue-quill',
|
'@vueup/vue-quill',
|
||||||
'@iconify/iconify',
|
'@iconify/iconify',
|
||||||
'@/../lib/vform/designer.umd.js',
|
|
||||||
|
|
||||||
'element-plus/es/components/form/style/css',
|
'element-plus/es/components/form/style/css',
|
||||||
'element-plus/es/components/form-item/style/css',
|
'element-plus/es/components/form-item/style/css',
|
||||||
@ -115,12 +114,6 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
|
|||||||
'element-plus/es/components/image/style/css',
|
'element-plus/es/components/image/style/css',
|
||||||
'element-plus/es/components/tab-pane/style/css'
|
'element-plus/es/components/tab-pane/style/css'
|
||||||
]
|
]
|
||||||
},
|
|
||||||
build: {
|
|
||||||
commonjsOptions: {
|
|
||||||
// 把lib目录加进来，否则生产打包会报错！！
|
|
||||||
include: /node_modules|lib/
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user