From 3ca8f39a18c5ab6e22e50ec202b20ef8ca420ac3 Mon Sep 17 00:00:00 2001
From: suguangxu <274928232@qq.com>
Date: Tue, 6 May 2025 10:20:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=9A=E7=A7=9F=E6=88=B7=E7=8E=AF=E5=A2=83?=
 =?UTF-8?q?=E4=B8=8B=E8=A1=A8=E5=8D=95=E9=85=8D=E7=BD=AE=E7=9A=84=E4=B8=AA?=
 =?UTF-8?q?=E6=80=A7=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CreateCodeStep/index.ts        |   1 +
 .../CreateCodeStep/src/EntireConfigStep.vue   |  60 ++++
 .../design/components/BasicConfigStep.vue     |  20 +-
 .../components/components/CodeFirstModal.vue  |  31 +-
 .../components/components/DataFirstModal.vue  |  24 +-
 .../components/SimpleTemplateModal.vue        |  23 +-
 src/views/form/design/index.vue               | 300 ++++++++++++++----
 7 files changed, 380 insertions(+), 79 deletions(-)
 create mode 100644 src/components/CreateCodeStep/src/EntireConfigStep.vue

diff --git a/src/components/CreateCodeStep/index.ts b/src/components/CreateCodeStep/index.ts
index 4d6fe5c..dd0d606 100644
--- 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';
 
diff --git a/src/components/CreateCodeStep/src/EntireConfigStep.vue b/src/components/CreateCodeStep/src/EntireConfigStep.vue
new file mode 100644
index 0000000..b6be60e
--- /dev/null
+++ 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>
diff --git a/src/views/form/design/components/BasicConfigStep.vue b/src/views/form/design/components/BasicConfigStep.vue
index bda8771..1893dc5 100644
--- 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,
   });
 
diff --git a/src/views/form/design/components/components/CodeFirstModal.vue b/src/views/form/design/components/components/CodeFirstModal.vue
index 84c0270..d0d2587 100644
--- 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>
diff --git a/src/views/form/design/components/components/DataFirstModal.vue b/src/views/form/design/components/components/DataFirstModal.vue
index 8482ee6..98b3c34 100644
--- 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>
diff --git a/src/views/form/design/components/components/SimpleTemplateModal.vue b/src/views/form/design/components/components/SimpleTemplateModal.vue
index 80b8aaa..77a159e 100644
--- 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>
diff --git a/src/views/form/design/index.vue b/src/views/form/design/index.vue
index 5ca8290..ad10d2a 100644
--- 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;