多租户环境下表单配置的个性化

2025-05-06 10:20:11 +08:00
parent 0dccbc7340
commit 3ca8f39a18
7 changed files with 380 additions and 79 deletions
--- a/src/components/CreateCodeStep/index.ts
+++ b/src/components/CreateCodeStep/index.ts
@ -1,5 +1,6 @@
 export { default as MenuConfigStep } from './src/MenuConfigStep.vue';
 export { default as StructureConfigStep } from './src/StructureConfigStep.vue';
+export { default as EntireConfigStep } from './src/EntireConfigStep.vue';

 export { default as ViewDesignStep } from './src/ViewDesignStep.vue';

--- a/src/components/CreateCodeStep/src/EntireConfigStep.vue
+++ b/src/components/CreateCodeStep/src/EntireConfigStep.vue
@ -0,0 +1,60 @@
+<template>
+  <div class="entireConfigStep">
+    <CodeEditor v-model:value="jsonObject" @change="handleChange" language="json" />
+  </div>
+</template>
+<script lang="ts" setup>
+    import { onMounted, inject,watch,computed, ref,unref} from 'vue';
+    import Icon from '/@/components/Icon/index';
+    import { useI18n } from '/@/hooks/web/useI18n';
+    import { useMessage } from '/@/hooks/web/useMessage';
+    import { debounce} from 'lodash-es';
+    import { CodeEditor } from '/@/components/CodeEditor';
+   
+    const { t } = useI18n();
+    const { notification } = useMessage();
+    const generatorConfig = inject<GeneratorConfig>('generatorConfig');
+    const jsonObject=ref();
+    
+    onMounted(() => {
+        
+    });
+    
+
+  const handleChange=debounce((v)=>{
+      try{
+          generatorConfig.formJson= JSON.parse(v);
+       }catch(e){
+         notification.error({
+           message: t('提示'),
+           description: t('json格式有误'),
+         });  
+       }
+    },500);   
+  
+  const initStep =()=> {
+       jsonObject.value=JSON.stringify(generatorConfig.formJson, null, 2);
+  }
+    
+  const validateStep = async (): Promise<boolean> => {
+      try{
+          generatorConfig.formJson= JSON.parse(jsonObject.value);
+      }catch(e){
+          notification.error({
+            message: t('提示'),
+            description: t('json格式有误'),
+          });
+          return false;
+      }
+      return true;
+  }
+  
+    
+   defineExpose({initStep,validateStep});
+</script> 
+<style lang="less" scoped>
+    .entireConfigStep{
+      height:100%;
+    }
+   
+</style>
--- a/src/views/form/design/components/BasicConfigStep.vue
+++ b/src/views/form/design/components/BasicConfigStep.vue
@ -342,6 +342,7 @@
  const designType = inject<string>('designType');
  const isFieldUpper = inject<Ref<boolean>>('isFieldUpper', ref(false));
  let mainTableName = inject<Ref<string>>('mainTableName', ref(''));
+  const formType = inject<Ref<number>>('formType');

  watch(
    () => generatorConfig?.databaseId,
@ -382,12 +383,29 @@
      deep: true,
    },
  );
+  
+  const filterFormSchema=(formSchema:FormSchema[])=>{
+      customFormConfig.formType=formType.value;
+      const rtSchema=[];
+      for(let i=0;i<formSchema.length;i++){
+          let item=formSchema[i];
+         if(item.field=='category'){
+            if(formType.value==1){
+                rtSchema.push(item); 
+            }
+         }else{
+           rtSchema.push(item);  
+         } 
+      }
+      // alert("xx"+customFormConfig.formType);
+      return rtSchema;
+  };

  const [registerModal, { openModal }] = useModal();

  const [register, { validate, getFieldsValue, setFieldsValue, updateSchema }] = useForm({
    labelWidth: 100,
-    schemas: designType === 'data' ? formSchemaData : formSchema,
+    schemas: designType === 'data' ? filterFormSchema(formSchemaData) : filterFormSchema(formSchema),
    showActionButtonGroup: false,
  });

--- a/src/views/form/design/components/components/CodeFirstModal.vue
+++ b/src/views/form/design/components/components/CodeFirstModal.vue
@ -11,14 +11,15 @@
          <a-step :title="t('基础信息')" />
          <a-step :title="t('表单设计')" />
          <a-step :title="t('表单事件')" />
+          <a-step :title="t('完整配置')" />
          <a-step :title="t('结构配置')" />
        </a-steps>
        <div class="btn-box">
          <a-button @click="handleStepPrev" v-show="current !== 0">{{ t('上一步') }}</a-button>
-          <a-button type="primary" @click="handleStepNext" v-show="current < 3">
+          <a-button type="primary" @click="handleStepNext" v-show="current < 4">
            {{ t('下一步') }}
          </a-button>
-          <a-button type="primary" @click="handleSave" v-show="current === 3">
+          <a-button type="primary" @click="handleSave" v-show="current === 4">
            {{ t('保存') }}
          </a-button>
          <a-button type="primary" danger @click="handleClose">{{ t('关闭') }}</a-button>
@ -29,19 +30,21 @@
      <BasicConfigStep ref="basicConfigStepRef" v-show="current === 0" />
      <FormDesignStep ref="formDesignStepRef" v-show="current === 1" />
      <FormEventStep ref="formEventStepRef" v-show="current === 2" />
+      <EntireConfigStep ref="entireConfigStepRef" v-show="current === 3"/>
      <StructureConfigStep
        ref="structureConfigStepRef"
-        v-show="current === 3"
+        v-show="current === 4"
        :isUpdate="isUpdate"
        :beforeTableNames="beforeTableNames"
        @validate-table="handleSave"
      />
+      
    </div>
  </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { ref, reactive, provide, Ref, toRaw, watch } from 'vue';
-  import { FormDesignStep, FormEventStep, StructureConfigStep } from '/@/components/CreateCodeStep';
+  import { ref, reactive, provide, inject, Ref, toRaw, watch } from 'vue';
+  import { FormDesignStep, FormEventStep, StructureConfigStep,EntireConfigStep} from '/@/components/CreateCodeStep';
  import BasicConfigStep from '../BasicConfigStep.vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import {
@ -71,6 +74,7 @@
  const basicConfigStepRef = ref();
  const formDesignStepRef = ref();
  const formEventStepRef = ref();
+  const entireConfigStepRef = ref();
  const structureConfigStepRef = ref();
  const widgetForm = ref(JSON.parse(JSON.stringify(antd.widgetForm))); //FormDesignStep -> designer和StructureConfigStep页面使用
  const isUpdate = ref<boolean>(false);
@ -78,7 +82,7 @@
  const formId = ref<string>('');
  const beforeTableNames = ref<string[]>([]);
  const mainTableName = ref('table_' + random(10000, 99999));
-
+  
  let generatorConfig = reactive<CustomFormJson>({
    databaseId: '', //数据库id
    formJson: {} as FormJson,
@ -92,7 +96,7 @@
    name: '',
    category: '',
    formDesignType: 1,
-    formType: FormTypeEnum.CUSTOM_FORM,
+    formType:'',
    formJson: generatorConfig,
    remark: '',
    isChange: false,
@ -203,15 +207,20 @@
  }

  //上一步
-  function handleStepPrev() {
+async  function handleStepPrev() {
    current.value--;
+    if(current.value==1){
+        widgetForm.value = generatorConfig.formJson;
+    } 
  }
  //下一步
  async function handleStepNext() {
    if (current.value === 2) {
+        entireConfigStepRef.value.initStep();
      current.value++;
      return;
    }
+    
    const isOk = await stepValidate[current.value]();
    if (!isOk) {
      return;
@ -220,7 +229,7 @@
  }

  async function handleSave() {
-    const isOk = await stepValidate[3]();
+    const isOk = await stepValidate[4]();
    if (!isOk) {
      return;
    }
@ -257,7 +266,9 @@
    0: () => basicConfigStepRef.value.validateStep(),
    1: () => formDesignStepRef.value.validateStep(),
    2: () => formEventStepRef.value.validateStep(),
-    3: () => structureConfigStepRef.value.validateStep(),
+    3: () => entireConfigStepRef.value.validateStep(),
+    4: () => structureConfigStepRef.value.validateStep(),
+  
  };
 </script>
 <style lang="less" scoped>
--- a/src/views/form/design/components/components/DataFirstModal.vue
+++ b/src/views/form/design/components/components/DataFirstModal.vue
@ -11,16 +11,17 @@
          <a-step :title="t('基础信息')" />
          <a-step :title="t('表单设计')" />
          <a-step :title="t('表单事件')" />
+          <a-step :title="t('完整配置')" />
        </a-steps>
        <div class="btn-box">
          <ajax-error-icon />
          <a-button type="primary" @click="handleStepPrev" v-show="current !== 0">{{
            t('上一步')
          }}</a-button>
-          <a-button type="primary" @click="handleStepNext" v-show="current < 2">{{
+          <a-button type="primary" @click="handleStepNext" v-show="current < 3">{{
            t('下一步')
          }}</a-button>
-          <a-button type="primary" @click="handleSave" v-show="current === 2">{{
+          <a-button type="primary" @click="handleSave" v-show="current === 3">{{
            t('保存')
          }}</a-button>
          <a-button type="primary" danger @click="handleClose">{{ t('关闭') }}</a-button>
@ -31,13 +32,14 @@
      <BasicConfigStep ref="basicConfigStepRef" v-show="current === 0" />
      <FormDesignStep ref="formDesignStepRef" v-show="current === 1" />
      <FormEventStep ref="formEventStepRef" v-show="current === 2" />
+      <EntireConfigStep ref="entireConfigStepRef" v-show="current === 3"/>
    </div>
  </BasicModal>
 </template>
 <script lang="ts" setup>
  import { ref, reactive, provide, watch, Ref, toRaw, onUnmounted } from 'vue';
  import BasicConfigStep from '../BasicConfigStep.vue';
-  import { FormDesignStep, FormEventStep } from '/@/components/CreateCodeStep';
+  import { FormDesignStep, FormEventStep,EntireConfigStep } from '/@/components/CreateCodeStep';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { CustomFormConfig, GeneratorConfig } from '/@/model/generator/generatorConfig';
  import { TableInfo } from '/@/components/Designer';
@ -59,6 +61,7 @@
  const basicConfigStepRef = ref();
  const formDesignStepRef = ref();
  const formEventStepRef = ref();
+  const entireConfigStepRef = ref();

  const tableInfo = ref<TableInfo[]>([]);
  const widgetForm = ref(JSON.parse(JSON.stringify(antd.widgetForm)));
@ -67,7 +70,7 @@
  const emits = defineEmits(['success', 'register', 'close']);
  const globalFlag = useGlobalFlag();
  const { isEditorOpen } = globalFlag;
-
+  
  watch(current, () => {
    isEditorOpen.value = current.value === 1;
  });
@ -88,7 +91,7 @@
    name: '',
    category: '',
    formDesignType: 0,
-    formType: FormTypeEnum.CUSTOM_FORM,
+    formType: '',
    formJson: generatorConfig,
    remark: '',
  });
@ -166,6 +169,9 @@
  //上一步
  function handleStepPrev() {
    current.value--;
+    if(current.value==1){
+        widgetForm.value = generatorConfig.formJson;
+    } 
  }
  //下一步
  async function handleStepNext() {
@ -174,10 +180,15 @@
      return;
    }
    current.value++;
+    
+    if(current.value === 3){
+       entireConfigStepRef.value.initStep();
+    }
  }
+ 

  async function handleSave() {
-    const isOk = await stepValidate[2]();
+    const isOk = await stepValidate[3]();
    if (!isOk) {
      return;
    }
@ -203,6 +214,7 @@
    0: () => basicConfigStepRef.value.validateStep(),
    1: () => formDesignStepRef.value.validateStep(),
    2: () => formEventStepRef.value.validateStep(),
+    3: () => entireConfigStepRef.value.validateStep(),
  };
 </script>
 <style lang="less" scoped>
--- a/src/views/form/design/components/components/SimpleTemplateModal.vue
+++ b/src/views/form/design/components/components/SimpleTemplateModal.vue
@ -11,13 +11,14 @@
          <a-step :title="t('基础信息')" />
          <a-step :title="t('表单设计')" />
          <a-step :title="t('表单事件')" />
+          <a-step :title="t('完整配置')" />
        </a-steps>
        <div class="btn-box">
          <a-button @click="handleStepPrev" v-show="current !== 0">{{ t('上一步') }}</a-button>
-          <a-button type="primary" @click="handleStepNext" v-show="current < 2">
+          <a-button type="primary" @click="handleStepNext" v-show="current < 3">
            {{ t('下一步') }}
          </a-button>
-          <a-button type="primary" @click="handleSave" v-show="current === 2">
+          <a-button type="primary" @click="handleSave" v-show="current === 3">
            {{ t('保存') }}
          </a-button>
          <a-button type="primary" danger @click="handleClose">{{ t('关闭') }}</a-button>
@ -28,13 +29,14 @@
      <BasicConfigStep ref="basicConfigStepRef" v-show="current === 0" />
      <FormDesignStep ref="formDesignStepRef" v-show="current === 1" />
      <FormEventStep ref="formEventStepRef" v-show="current === 2" />
+      <EntireConfigStep ref="entireConfigStepRef" v-show="current === 3"/>
    </div>
  </BasicModal>
  <TableNameModal @register="registerTableName" @success="handleEditSuccess" />
 </template>
 <script lang="ts" setup>
  import { ref, reactive, provide, Ref, toRaw, watch, onMounted } from 'vue';
-  import { FormDesignStep, FormEventStep, TableNameModal } from '/@/components/CreateCodeStep';
+  import { FormDesignStep, FormEventStep,EntireConfigStep,TableNameModal } from '/@/components/CreateCodeStep';
  import BasicConfigStep from '../BasicConfigStep.vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { GeneratorConfig, CustomFormConfig } from '/@/model/generator/generatorConfig';
@ -59,6 +61,7 @@
  const basicConfigStepRef = ref();
  const formDesignStepRef = ref();
  const formEventStepRef = ref();
+  const entireConfigStepRef = ref();

  const widgetForm = ref(JSON.parse(JSON.stringify(antd.widgetForm))); //FormDesignStep -> designer和StructureConfigStep页面使用
  const mainTableName = ref('table_' + random(10000, 99999));
@ -68,7 +71,7 @@
  const formId = ref<string>('');
  const beforeTableNames = ref<string[]>([]);
  const isFieldUpper = ref<boolean>(false);
-
+  
  let generatorConfig = reactive<GeneratorConfig>({
    databaseId: 'master',
    formJson: {},
@ -82,7 +85,7 @@
    name: '',
    category: '',
    formDesignType: 2,
-    formType: FormTypeEnum.CUSTOM_FORM,
+    formType:'',
    formJson: generatorConfig,
    remark: '',
    isChange: false,
@ -204,6 +207,9 @@
  //上一步
  function handleStepPrev() {
    current.value--;
+    if(current.value==1){
+        widgetForm.value = generatorConfig.formJson;
+    } 
  }
  //下一步
  async function handleStepNext() {
@ -212,9 +218,13 @@
      return;
    }
    current.value++;
+    
+    if(current.value === 3){
+        entireConfigStepRef.value.initStep();
+    }
  }
  async function handleSave() {
-    const isOk = await stepValidate[2]();
+    const isOk = await stepValidate[3]();

    if (!isOk) {
      return;
@ -298,6 +308,7 @@
    0: () => basicConfigStepRef.value.validateStep(),
    1: () => formDesignStepRef.value.validateStep(),
    2: () => formEventStepRef.value.validateStep(),
+    3: () => entireConfigStepRef.value.validateStep(),
  };
 </script>
 <style lang="less" scoped>
--- a/src/views/form/design/index.vue
+++ b/src/views/form/design/index.vue
@ -1,57 +1,100 @@
 <template>
  <PageWrapper dense contentFullHeight fixed-height contentClass="flex">
-    <div
-      class="w-1/3 xl:w-1/4 overflow-hidden bg-white h-full"
-      :style="{ 'border-right': '1px solid #e5e7eb' }"
-    >
-      <BasicTree
-        :title="t('表单分类')"
-        :clickRowToExpand="true"
-        :treeData="treeData"
-        :fieldNames="{ key: 'id', title: 'name' }"
-        @select="handleSelect"
-      />
-    </div>
-    <BasicTable @register="registerTable" class="w-2/3 xl:w-3/4">
-      <template #toolbar>
-        <div class="toolbar-defined">
-          <a-button type="primary" @click="handleCreate" v-auth="'form-design:add'">
-            <template #icon><PlusOutlined /></template>
-            {{ t('新增') }}
-          </a-button>
-          <a-button @click="handleDelete" v-auth="'form-design:batchDelete'">{{
-            t('批量删除')
-          }}</a-button>
-          <a-button @click="previewForm" v-auth="'form-design:previewForm'">{{
-            t('预览表单')
-          }}</a-button>
-          <a-button @click="queryHistory">{{ t('历史记录') }}</a-button>
-          <a-button @click="handleCategory" v-auth="'form-design:classifyMGT'">{{
-            t('分类管理')
-          }}</a-button>
-          <a-button @click="handleCodeGenerator" v-auth="'form-design:generatedCode'">{{
-            t('生成代码')
-          }}</a-button>
-        </div>
-      </template>
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              icon: 'clarity:note-edit-line',
-              auth: 'form-design:edit',
-              onClick: handleEdit.bind(null, record),
-            },
-            {
-              icon: 'ant-design:delete-outlined',
-              auth: 'form-design:delete',
-              color: 'error',
-              onClick: handleDelete.bind(null, record),
-            },
-          ]"
-        />
-      </template>
-    </BasicTable>
+    <a-tabs v-model:activeKey="activeKey" class="custom-tab white">
+        <a-tab-pane key="1" tab="零代码表单">
+            <div style="display:flex;background-color:white">
+                <div
+                  class="w-1/3 xl:w-1/4 overflow-hidden bg-white h-full"
+                  :style="{ 'border-right': '1px solid #e5e7eb' }"
+                >
+                  <BasicTree
+                    :title="t('表单分类')"
+                    :clickRowToExpand="true"
+                    :treeData="treeData"
+                    :fieldNames="{ key: 'id', title: 'name' }"
+                    @select="handleSelect"
+                  />
+                </div>
+                <BasicTable @register="registerTable" class="w-2/3 xl:w-3/4">
+                  <template #toolbar>
+                    <div class="toolbar-defined">
+                      <a-button type="primary" @click="handleCreate" v-auth="'form-design:add'">
+                        <template #icon><PlusOutlined /></template>
+                        {{ t('新增') }}
+                      </a-button>
+                      <a-button @click="handleDelete" v-auth="'form-design:batchDelete'">{{
+                        t('批量删除')
+                      }}</a-button>
+                      <a-button @click="previewForm" v-auth="'form-design:previewForm'">{{
+                        t('预览表单')
+                      }}</a-button>
+                      <a-button @click="queryHistory">{{ t('历史记录') }}</a-button>
+                      <a-button @click="handleCategory" v-auth="'form-design:classifyMGT'">{{
+                        t('分类管理')
+                      }}</a-button>
+                      <a-button @click="handleCodeGenerator" v-auth="'form-design:generatedCode'">{{
+                        t('生成代码')
+                      }}</a-button>
+                    </div>
+                  </template>
+                  <template #action="{ record }">
+                    <TableAction
+                      :actions="[
+                        {
+                          icon: 'clarity:note-edit-line',
+                          auth: 'form-design:edit',
+                          onClick: handleEdit.bind(null, record,1),
+                        },
+                        {
+                          icon: 'ant-design:delete-outlined',
+                          auth: 'form-design:delete',
+                          color: 'error',
+                          onClick: handleDelete.bind(null, record),
+                        },
+                      ]"
+                    />
+                  </template>
+                </BasicTable>
+            </div>
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="生成器表单">
+            <div style="display:flex;background-color:white">
+                <div
+                  class="w-1/3 xl:w-1/4 overflow-hidden bg-white h-full"
+                  :style="{ 'border-right': '1px solid #e5e7eb' }"
+                >
+                  <BasicTree
+                    :title="t('生成器类型')"
+                    :clickRowToExpand="true"
+                    :treeData="treeData02"
+                    :fieldNames="{ key: 'id', title: 'name' }"
+                    @select="handleSelect02"
+                  />
+                </div>
+                <BasicTable @register="registerTable02" class="w-2/3 xl:w-3/4">
+                  <template #toolbar>
+                    <div class="toolbar-defined">
+                      <a-button @click="previewForm02" v-auth="'form-design:previewForm'">{{
+                        t('预览表单')
+                      }}</a-button>
+                      <a-button @click="queryHistory02">{{ t('历史记录') }}</a-button>
+                    </div>
+                  </template>
+                  <template #action="{ record }">
+                    <TableAction
+                      :actions="[
+                        {
+                          icon: 'clarity:note-edit-line',
+                          auth: 'form-design:edit',
+                          onClick: handleEdit.bind(null, record,0),
+                        }
+                      ]"
+                    />
+                  </template>
+                </BasicTable>
+            </div>
+        </a-tab-pane>
+    </a-tabs>

    <DesignModal @register="registerDesignModal" @success="reload" />
    <HistoryModal @register="registerHistoryModal" />
@ -101,7 +144,7 @@
  import CodeFirstModal from './components/components/CodeFirstModal.vue';
  import SimpleTemplateModal from './components/components/SimpleTemplateModal.vue';
  import CodeGeneratorModal from './components/CodeGeneratorModal.vue';
-  import { h, onMounted, ref, createVNode, reactive, computed } from 'vue';
+  import { h, onMounted, ref, createVNode, reactive, computed,provide } from 'vue';
  import { BasicTree, TreeItem } from '/@/components/Tree';
  import { getDicDetailList } from '/@/api/system/dic';
  import { FormTypeEnum } from '/@/enums/formtypeEnum';
@ -110,10 +153,17 @@
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const treeData = ref<TreeItem[]>([]);
+  const treeData02 = ref<TreeItem[]>([
+      {    "id":'0',name:'数据优先模板'},
+      {    "id":'1',name:'界面优先模板'},
+      {    "id":'2',name:'简易模板'}
+  ]);
+  const formType=ref('');
  const selectId = ref('');
  const selectedKeys = ref<string[]>([]);
+  const selectedKeys02 = ref<string[]>([]);
  const dicId = '1419276800524424444';
-
+  const activeKey = ref('1');
  const state = reactive({
    isShowDataFirst: true,
    isShowCodeFirst: true,
@ -193,6 +243,47 @@
      title: t('备注'),
    },
  ];
+  
+  const columns02: BasicColumn[] = [
+    {
+      dataIndex: 'name',
+      title: t('名称'),
+      align: 'left',
+    },
+    {
+      dataIndex: 'formDesignType',
+      title: t('模板类型'),
+      width: 120,
+      align: 'left',
+      customRender: ({ record }) => {
+        if(record.formDesignType==0){
+            return "数据优先模板";
+        }else if(record.formDesignType==1){
+             return "界面优先模板";
+        }else if(record.formDesignType==2){
+             return "简易模板";
+        }else{
+            return '';
+        }
+      },
+    },
+    {
+      dataIndex: 'createUserName',
+      title: t('创建人'),
+      align: 'left',
+    },
+    {
+      dataIndex: 'createDate',
+      title: t('创建时间'),
+      align: 'left',
+    },
+    {
+      dataIndex: 'remark',
+      align: 'left',
+      title: t('备注'),
+    },
+  ];
+  
  const { notification } = useMessage();

  const [registerDesignModal, { openModal: openDesignModal }] = useModal();
@ -233,23 +324,63 @@
    rowSelection: {
      onChange: onSelectChange,
    },
+    customRow02,
+    tableSetting: {
+      size: false,
+      setting: false,
+    },
+  });
+  
+  const [registerTable02, { reload:reload02, setSelectedRowKeys:setSelectedRowKeys02}] = useTable({
+    api: getFormTemplatePage,
+    rowKey: 'id',
+    title: '表单列表',
+    columns:columns02,
+    formConfig,
+    beforeFetch: (params) => {
+      //发送请求默认新增  左边树结构所选id
+      return { ...params, category: selectId.value, type: FormTypeEnum.SYSTEM_FORM };
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    striped: false,
+    actionColumn: {
+      width: 80,
+      title: t('操作'),
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+    rowSelection: {
+      onChange: onSelectChange02,
+    },
    customRow,
    tableSetting: {
      size: false,
      setting: false,
    },
  });
-
+  
  const formId = computed(() => {
    return selectedKeys.value && selectedKeys.value.length
      ? selectedKeys.value[selectedKeys.value.length - 1]
      : '';
  });
+  
+  const formId02 = computed(() => {
+    return selectedKeys02.value && selectedKeys02.value.length
+      ? selectedKeys02.value[selectedKeys02.value.length - 1]
+      : '';
+  });

  function onSelectChange(rowKeys: string[]) {
    selectedKeys.value = rowKeys;
    setSelectedRowKeys(selectedKeys.value);
  }
+  
+  function onSelectChange02(rowKeys: string[]) {
+    selectedKeys02.value = rowKeys;
+    setSelectedRowKeys02(selectedKeys02.value);
+  }

  function customRow(record: Recordable) {
    return {
@ -266,6 +397,22 @@
      },
    };
  }
+  
+  function customRow02(record: Recordable) {
+    return {
+      onClick: () => {
+        let selectedRowKeys = [...selectedKeys02.value];
+        if (selectedRowKeys.indexOf(record.id) >= 0) {
+          let index = selectedRowKeys.indexOf(record.id);
+          selectedRowKeys02.splice(index, 1);
+        } else {
+          selectedRowKeys02.push(record.id);
+        }
+        selectedKeys02.value = selectedRowKeys;
+        setSelectedRowKeys02(selectedRowKeys);
+      },
+    };
+  }

  function handleCreate() {
    openDesignModal(true, {
@ -273,7 +420,8 @@
    });
  }

-  function handleEdit(record: Recordable) {
+  function handleEdit(record: Recordable,fType:number) {
+    formType.value=fType;
    switch (record.formDesignType) {
      case 0:
        openDataFirstModal(true, {
@ -293,6 +441,12 @@
          isUpdate: true,
        });
        break;
+      default:
+         notification.error({
+            message: t('提示'),
+            description: '该表单缺少模板类型',
+         });
+      
    }
  }

@ -320,6 +474,8 @@
      cancelText: t('取消'),
    });
  }
+  
+  provide<Ref<number>>('formType', formType); 

  function handleCodeGenerator() {
    if (!formId.value) {
@ -344,6 +500,11 @@
    selectId.value = selectIds[0];
    reload({ searchInfo: { category: selectIds[0] } });
  }
+  
+  function handleSelect02(selectIds) {
+    selectId.value = selectIds[0];
+    reload02({ searchInfo: { category: selectIds[0] } });
+  }

  function handleCategory() {
    openCategoryModal(true, { title: t('表单分类管理') });
@ -363,6 +524,15 @@
    const templateJson = await getFormTemplate(formId.value);
    openPreviewModal(true, { title: t('预览'), formJson: templateJson.formJson });
  }
+  
+  async function previewForm02() {
+    if (!formId02.value) {
+      noticeInfo('预览');
+      return;
+    }
+    const templateJson = await getFormTemplate(formId02.value);
+    openPreviewModal(true, { title: t('预览'), formJson: templateJson.formJson });
+  }

  async function queryHistory() {
    if (!formId.value) {
@ -374,6 +544,17 @@
    }
    openHistoryModal(true, { title: t('历史记录'), formId: formId.value });
  }
+  
+  async function queryHistory02() {
+    if (!formId02.value) {
+      notification.warning({
+        message: t('提示'),
+        description: t(`请先选中一行后再查看当前表单历史记录！`),
+      });
+      return;
+    }
+    openHistoryModal(true, { title: t('历史记录'), formId: formId02.value });
+  }

  function noticeInfo(info: string) {
    notification.warning({
@ -393,6 +574,13 @@
    }
  }

+   :deep(.custom-tab.white){
+     background-color:white!important; 
+   }
+  :deep(.ant-tabs-nav){
+      padding:0px 10px!important;   
+   }
+ 
  // :deep(.ant-col-15) {
  //   flex: 0 0 calc(100% - 185px);
  //   max-width: initial;