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

src/layouts/default/tabs/components/TabContent.vue

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

src/router/routes/basic.ts

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

src/router/routes/index.ts

@@ -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,
 ];

src/store/modules/multipleTab.ts

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

src/views/secondDev/FormInformation.vue

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

src/views/secondDev/createFlow.vue

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

src/views/workflow/task/FlowLaunch.vue

@@ -7,18 +7,18 @@
         ? '!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>
@@ -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;
 }
+*/
+
+  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);