feat: tab页允许手动修改标题 新建流程改为tab页而不是弹框

This commit is contained in:
gaoyunqi
2024-02-05 11:27:33 +08:00
parent 445292105f
commit ec11057a12
7 changed files with 606 additions and 37 deletions

View File

@ -43,8 +43,9 @@
const { t } = useI18n();
const getTitle = computed(() => {
const { tabItem: { meta } = {} } = props;
return meta && t(meta.title as string);
const tabItem = props.tabItem as any;
const meta = tabItem.meta || {};
return tabItem.tabTitle || (meta && t(meta.title as string));
});
const getIsTabs = computed(() => !props.isExtra);

View File

@ -130,23 +130,21 @@ export const USERCENTER_ROUTE: AppRouteRecordRaw = {
],
};
// export const CUSTOMFORM_ROUTE: AppRouteRecordRaw = {
// path: '/custom-form/:id',
// name: 'CustomForm',
// component: LAYOUT,
// // redirect: PageEnum.CUSTOM_FORM,
// meta: {
// title: t('自定义表单'),
// },
// children: [
// {
// path: 'list',
// name: 'CustomFormList',
// component: () => import('/@/views/form/template/index.vue'),
// meta: {
// title: `自定义表单`,
// icon: 'ant-design:user-outlined',
// },
// },
// ],
// };
export const FLOW_ROUTE: AppRouteRecordRaw = {
path: '/flow',
name: 'Flow',
meta: {
title: '流程',
},
component: LAYOUT,
children: [
{
path: 'createFlow',
name: 'CreateFlow',
component: () => import('/@/views/secondDev/createFlow.vue'),
meta: {
title: '新建流程',
},
},
],
};

View File

@ -5,6 +5,7 @@ import {
REDIRECT_ROUTE,
SYSTEM_ROUTE,
USERCENTER_ROUTE,
FLOW_ROUTE,
// CUSTOMFORM_ROUTE,
} from '/@/router/routes/basic';
@ -52,5 +53,6 @@ export const basicRoutes = [
PAGE_NOT_FOUND_ROUTE,
SYSTEM_ROUTE,
USERCENTER_ROUTE,
FLOW_ROUTE,
// CUSTOMFORM_ROUTE,
];

View File

@ -165,12 +165,25 @@ export const useMultipleTabStore = defineStore({
index !== -1 && this.tabList.splice(index, 1);
}
}
this.tabList.push(route);
const _route = Object.assign(
{
tabKey: route?.query?.tabKey || `tab_${Math.round(Math.random() * 1000000)}`,
},
route,
);
this.tabList.push(_route);
}
this.updateCacheTab();
cacheTab && Persistent.setLocal(MULTIPLE_TABS_KEY, this.tabList);
},
changeTitle(tabKey: string, title: string) {
const tab = (this.tabList as any).find((item) => item.tabKey === tabKey);
if (tab) {
tab.tabTitle = title;
}
},
async closeTab(tab: RouteLocationNormalized, router: Router) {
const close = (route: RouteLocationNormalized) => {
const { fullPath, meta: { affix } = {} } = route;

View File

@ -0,0 +1,404 @@
<template>
<!-- 表单信息 -->
<div class="form-container">
<div class="box">
<div :style="{}" class="form-right">
<div v-for="(item, index) in forms.configs" :key="index" :tab="item.formName">
<div v-show="activeIndex == index">
<SystemForm
v-if="item.formType == FormType.SYSTEM"
:ref="setItemRef"
:formModel="item.formModel"
:isViewProcess="props.disabled"
:systemComponent="item.systemComponent"
:workflowConfig="item"
class="form-box"
/>
<SimpleForm
v-else-if="item.formType == FormType.CUSTOM"
:ref="setItemRef"
:formModel="item.formModel"
:formProps="item.formProps"
:isWorkFlow="true"
class="form-box"
/>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
import { onBeforeUpdate, nextTick, onMounted, reactive, ref } from 'vue';
import { TaskApproveOpinion, ValidateForms } from '/@/model/workflow/bpmnConfig';
import { cloneDeep } from 'lodash-es';
import { GeneratorConfig } from '/@/model/generator/generatorConfig';
import { FormEventColumnConfig } from '/@/model/generator/formEventConfig';
import { changeFormJson } from '/@/hooks/web/useWorkFlowForm';
import { SystemForm } from '/@/components/SystemForm/index';
import { FormType } from '/@/enums/workflowEnum';
import { createFormEvent, loadFormEvent, submitFormEvent } from '/@/hooks/web/useFormEvent';
const props = withDefaults(
defineProps<{
disabled: boolean | undefined;
formInfos: Array<any>;
opinions?: Array<TaskApproveOpinion> | undefined;
opinionsComponents?: Array<string> | undefined;
formAssignmentData?: null | Recordable;
}>(),
{
disabled: false,
formInfos: () => {
return [];
},
},
);
const emits = defineEmits(['getFormConfigs']);
let uploadComponent: { ids: Array<string> } = reactive({ ids: [] });
let activeIndex = ref(0);
let itemRefs = ref([]) as any;
const setItemRef = (el: never) => {
itemRefs.value.push(el);
};
onBeforeUpdate(() => {
itemRefs.value = [];
});
let forms: {
formModels: Array<Recordable>;
configs: Array<{
formName: string;
formProps: {};
formModel: Recordable;
formKey: string;
validate: boolean;
formType: FormType;
workflowPermissions?: Array<any>;
opinions?: Array<any>;
opinionsComponents?: Array<any>;
systemComponent?: {
functionalModule: string;
functionName: string;
functionFormName: string;
};
formJson?: Array<any>;
isOldSystem?: boolean;
}>;
formEventConfigs: FormEventColumnConfig[];
} = reactive({
formModels: [],
configs: [],
formEventConfigs: [],
});
onMounted(async () => {
for await (let element of props.formInfos) {
let formModels = {};
if (element.formData) {
formModels = cloneDeep(element.formData);
}
// 参数赋值[赋值权限最大]
if (props.formAssignmentData) {
if (props.formAssignmentData[element.formConfig.formId]) {
formModels = { ...formModels, ...props.formAssignmentData[element.formConfig.formId] };
}
}
forms.formModels.push(formModels);
// 系统表单
if (element.formType == FormType.SYSTEM) {
forms.configs.push({
formName: element.formConfig.formName,
formProps: {},
formModel: formModels,
formKey: element.formConfig.key,
validate: true,
formType: element.formType,
workflowPermissions: element.formConfig.children,
opinions: props.opinions,
opinionsComponents: props.opinionsComponents,
systemComponent: {
functionalModule: element.functionalModule,
functionName: element.functionName,
functionFormName: 'Form',
},
formJson: element.formJson,
isOldSystem: false,
});
// 上传组件Id集合
setTimeout(() => {
getSystemUploadComponentIds();
}, 0);
} else {
const model = JSON.parse(element.formJson) as GeneratorConfig;
const { formJson, formEventConfig } = model;
if (formEventConfig) {
forms.formEventConfigs.push(formEventConfig);
//初始化表单
await createFormEvent(formEventConfig, formModels, true);
//加载表单
await loadFormEvent(formEventConfig, formModels, true);
//TODO 暂不放开 工作流没有获取表单数据这个步骤 获取表单数据
// getFormDataEvent(formEventConfig, formModels,true);
}
let formKey = element.formConfig.key;
let config = {
formName: element.formConfig.formName,
formProps: {},
formModel: {},
formKey,
validate: true,
formType: element.formType,
};
let isViewProcess = props.disabled;
let { buildOptionJson, uploadComponentIds } = changeFormJson(
{
formJson,
formConfigChildren: element.formConfig.children,
formConfigKey: element.formConfig.key,
opinions: props.opinions,
opinionsComponents: props.opinionsComponents,
},
isViewProcess,
uploadComponent.ids,
);
uploadComponent.ids = uploadComponentIds;
if (buildOptionJson.schemas) {
config.formProps = buildOptionJson;
forms.configs.push(config);
}
}
// });
}
await nextTick();
setTimeout(() => {
setFormModel();
}, 0);
emits('getFormConfigs', forms.configs.length ? forms.configs[activeIndex.value] : null);
});
function setFormModel() {
for (let index = 0; index < itemRefs.value.length; index++) {
if (itemRefs.value[index]) {
itemRefs.value[index].setFieldsValue(forms.formModels[index]);
}
}
}
async function setFormData(formData) {
await nextTick();
forms.formModels = formData;
setFormModel();
}
function getSystemUploadComponentIds() {
for (let index = 0; index < itemRefs.value.length; index++) {
if (itemRefs.value[index] && itemRefs.value[index].getUploadComponentIds) {
let ids = itemRefs.value[index].getUploadComponentIds();
uploadComponent.ids = [...uploadComponent.ids, ...ids];
}
}
}
// 获取上传组件的字段值集合
function getUploadComponentIds() {
return uploadComponent.ids;
}
async function validateForm() {
let validateForms: ValidateForms = [];
for (let index = 0; index < itemRefs.value.length; index++) {
if (itemRefs.value[index]) {
try {
await itemRefs.value[index]?.validate();
validateForms.push({
validate: true,
msgs: [],
isOldSystem: forms.configs[index].isOldSystem,
});
forms.configs[index].validate = true;
} catch (error: any | Array<{ errors: Array<string>; name: Array<string> }>) {
validateForms.push({
validate: false,
msgs: error?.errorFields,
});
forms.configs[index].validate = false;
}
}
}
return validateForms;
}
async function saveDraftData() {
let formModes = {};
for (let index = 0; index < forms.configs.length; index++) {
const ele = forms.configs[index];
if (ele.formType == FormType.SYSTEM) {
let values = await itemRefs.value[index].validate();
formModes[ele.formKey] = values;
} else {
formModes[ele.formKey] = ele.formModel;
}
}
return formModes;
}
async function getFormModels() {
let formModes = {};
for (let index = 0; index < forms.configs.length; index++) {
const ele = forms.configs[index];
if (ele.formType == FormType.SYSTEM) {
let values = await itemRefs.value[index].workflowSubmit();
formModes[ele.formKey] = values;
} else {
formModes[ele.formKey] = ele.formModel;
}
}
// forms.configs.forEach((ele) => {
// formModes[ele.formKey] = ele.formModel;
// });
forms.formEventConfigs.forEach(async (ele, i) => {
//此组件 获取数据 就是为了提交表单 所以 表单提交数据 事件 就此处执行
await submitFormEvent(ele, forms.configs[i]?.formModel);
});
return formModes;
}
function getSystemType() {
let system = {};
for (let index = 0; index < forms.configs.length; index++) {
const ele = forms.configs[index];
if (ele.formType == FormType.SYSTEM) {
system[ele.formKey] = itemRefs.value[index].getIsOldSystem();
}
}
return system;
}
defineExpose({
validateForm,
getFormModels,
saveDraftData,
setFormData,
getUploadComponentIds,
getSystemType,
});
</script>
<style lang="less" scoped>
.form-container {
display: flex;
height: 100vh;
margin-top: -10px;
}
.box {
width: 100%;
.form-left {
float: left;
height: 100vh;
box-shadow: 5px 5px 5px rgb(0 0 0 / 10%);
z-index: 9998;
.resize-shrink-sidebar {
cursor: col-resize;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
right: 0;
z-index: 9999;
.shrink-sidebar-text {
padding: 0 2px;
background: #f2f2f2;
border-radius: 10px;
}
}
.left-box {
margin-right: 10px;
border-right: 1px solid #f0f0f0;
height: 80vh;
}
span {
font-size: 16px;
font-weight: 500;
padding-left: 4px;
}
.form-name {
height: 36px;
display: flex;
align-items: center;
font-size: 14px;
cursor: pointer;
color: rgb(102 102 102 / 99.6%);
margin-right: -2px;
padding-left: 4px;
}
.actived {
border-right: 1px solid #5e95ff;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: transparent;
margin-right: 4px;
}
.validate {
background-color: @clear-color;
}
.icon-box {
font-size: 16px;
margin-right: 4px;
}
.left-title {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding: 10px 4px 10px 0;
top: 0;
left: 0;
.in-or-out {
position: absolute;
right: 10px;
}
}
}
.form-box {
overflow: auto;
height: calc(100vh - 120px);
}
.form-right {
width: 100%;
padding-top: 20px;
}
}
</style>

View File

@ -0,0 +1,131 @@
<template>
<div clas="itc-create-flow">
<div class="toolbar">
<a-space wrap>
<a-button>提交</a-button>
<a-button>暂存</a-button>
<a-button>关闭</a-button>
<a-button>打印</a-button>
<a-button>流程图</a-button>
</a-space>
</div>
<div class="flow-content">
<FormInformation
:key="randKey"
ref="formInformation"
:disabled="false"
:formAssignmentData="data.formAssignmentData"
:formInfos="data.formInfos"
:opinions="data.opinions"
:opinionsComponents="data.opinionsComponents"
/>
</div>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
import FormInformation from '/@/views/secondDev/FormInformation.vue';
import { getStartProcessInfo, getReStartProcessInfo } from '/@/api/workflow/task';
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
const router = useRouter();
const tabStore = useMultipleTabStore();
import { nextTick, onMounted, ref, toRaw } from 'vue';
const { data, initProcessData } = userTaskItem();
const currentRoute = router.currentRoute;
const rParams = currentRoute.value.query;
const rSchemaId = rParams.schemaId;
let formInformation = ref();
let randKey = ref('randkey'); // 强制表单重新渲染
const props = defineProps({
schemaId: {
type: String,
required: true,
},
draftsJsonStr: {
type: String,
},
draftsId: {
type: String,
},
taskId: {
type: String,
required: false,
default: '',
},
processId: {
type: String,
required: false,
default: '',
},
formData: {
type: Object,
},
formId: {
type: String,
},
rowKeyData: {
type: String,
},
});
onMounted(async () => {
try {
if (props.processId) {
// 重新发起
let res = await getReStartProcessInfo(props.taskId, props.processId);
res.taskApproveOpinions = [];
initProcessData(res);
} else if (props.schemaId && props.formId) {
let res = await getStartProcessInfo(props.schemaId);
if (props.formData && props.formId) {
res.formInfos.map((m) => {
if (m.formConfig.formId === props.formId) {
m.formData = toRaw(props.formData);
}
});
}
initProcessData(res);
} else {
// 发起流程
let res = await getStartProcessInfo(rSchemaId);
const title = res?.schemaInfo?.name;
if (title) {
tabStore.changeTitle('new_' + rSchemaId, '新建 - ' + title);
}
initProcessData(res);
}
} catch (error) {}
await nextTick();
initDraftsFormData();
randKey.value = Math.random() + '';
});
async function initDraftsFormData() {
//isPublish.value = Object.keys(data.formInfos).length > 0 ? false : true;
if (props.draftsJsonStr) {
let formDataJson = JSON.parse(props.draftsJsonStr);
let formData = [];
data.formInfos.forEach((item) => {
if (
formDataJson &&
item.formConfig &&
item.formConfig.key &&
formDataJson[item.formConfig.key]
) {
formData.push(item.formConfig.key ? formDataJson[item.formConfig.key] : {});
}
});
await formInformation.value.setFormData(formData);
}
}
</script>

View File

@ -7,23 +7,23 @@
? '!p-0 !pr-7px'
: ''
"
:title="t('流程模板列表')"
:searchConfig="searchConfig"
:title="t('流程模板列表')"
@search="search"
@scroll-height="scrollHeight"
>
<template #left>
<BasicTree
search
:title="t('流程模板分类')"
:clickRowToExpand="true"
:treeData="data.treeData"
:fieldNames="{ key: 'id', title: 'name' }"
:title="t('流程模板分类')"
:treeData="data.treeData"
search
@select="handleSelect"
/>
</template>
<template #search> </template>
<template #search></template>
<template #right>
<div
@ -35,19 +35,20 @@
v-for="(item, index) in data.list"
:key="index"
:item="item"
@click="launchProcess(item.id)"
@click="launchProcessInTab(item.id)"
/>
</div>
<div class="page-box">
<a-pagination
v-model:current="data.pagination.current"
:total="data.pagination.total"
v-model:pageSize="data.pagination.pageSize"
:pageSizeOptions="['18', '36', '54', '72']"
:showSizeChanger="true"
:show-total="(total) => t(`共 {total} 条数据`, { total })"
:showSizeChanger="true"
:total="data.pagination.total"
@change="getList"
/></div>
/>
</div>
</div>
<div v-else>
@ -62,7 +63,7 @@
</PageLayout>
</template>
<script setup lang="ts">
<script lang="ts" setup>
import { onMounted, reactive, ref, unref, watch } from 'vue';
import TemplateCard from '/@bpmn/components/card/TemplateCard.vue';
import { EmptyBox } from '/@/components/ModalPanel/index';
@ -76,8 +77,10 @@
import userTableScrollHeight from '/@/hooks/setting/userTableScrollHeight';
import { useRouter } from 'vue-router';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
const { currentRoute } = useRouter();
const router = useRouter();
const { currentRoute } = router;
const searchConfig = [
{
field: 'code',
@ -121,12 +124,14 @@
getCategoryTree();
init();
});
async function init() {
data.pagination.current = 1;
data.pagination.total = 0;
data.selectDeptId = '';
await getList();
}
async function getCategoryTree() {
let res = (await getDicDetailList({
itemId: FlowCategory.ID,
@ -136,6 +141,7 @@
return ele;
});
}
async function getList(params?: any) {
const searchParams = {
...{
@ -158,10 +164,24 @@
data.selectDeptId = deptIds[0];
getList();
}
async function launchProcess(id: string) {
data.schemaId = id;
visibleLaunchProcess.value = true;
/*
async function launchProcess(id: string) {
data.schemaId = id;
visibleLaunchProcess.value = true;
}
*/
function launchProcessInTab(id: string) {
router.push({
path: '/flow/createFlow',
query: {
schemaId: id,
tabKey: 'new_' + id,
},
});
}
function search(params: any) {
data.pagination.current = 1;
getList(params);