chore: 模板初步设计

src/views/system/devtools/template/TemplateModal.vue

@@ -9,7 +9,7 @@
     >
       <BasicForm @register="registerForm"/>
       <ATabs v-model:activeKey="state.typeActiveKey" type="card">
-        <ATabPane key="1" tab="主表">
+        <ATabPane key="0" tab="主表">
           <div class="tool-bar">
             <a-button type="primary" @click="handleAddTab">新增</a-button>
             <a-button type="primary" @click="handleEditTab">编辑</a-button>
@@ -29,7 +29,7 @@
             </ATabPane>
           </ATabs>
         </ATabPane>
-        <ATabPane key="2" tab="附表">
+        <ATabPane v-if="state.childrenTabVisible" key="1" tab="附表">
           <div class="tool-bar">
             <a-button type="primary" @click="handleAddTab">新增</a-button>
             <a-button type="primary" @click="handleEditTab">编辑</a-button>
@@ -42,7 +42,10 @@
                  @edit="handleRemoveTab"
           >
             <ATabPane v-for="childTemplateObj in childTemplateObjs" :key="childTemplateObj.index || childTemplateObj.id" :tab="childTemplateObj.name">
-              <AceEditor v-model:value="childTemplateObj.contents" @register="registerAceEditor"/>
+              <AceEditor v-model:value="childTemplateObj.contents"
+                         class="vue-ace-editor"
+                         @register="registerAceEditor"
+              />
             </ATabPane>
           </ATabs>
         </ATabPane>
@@ -69,6 +72,7 @@
   type templateTypePartial = Partial<GencodeTemplateObj>;
   interface WindowState {
     tag: string;
+    childrenTabVisible: boolean;
     templateObjs: templateTypePartial[];
     mainActiveKey: string;
     childActiveKey: string;
@@ -77,10 +81,11 @@
 
   const state = reactive<WindowState>({
     tag: '',
+    childrenTabVisible: false,
     templateObjs: [],
     mainActiveKey: '',
     childActiveKey: '',
-    typeActiveKey: ''
+    typeActiveKey: '0'
   });
 
   const mainTemplateObjs = computed(() => state.templateObjs.filter(item => item.isChild === '0'));
@@ -108,6 +113,14 @@
     await resetFields();
     await clearValidate();
     await setProps({ disabled: false });
+    await updateSchema([
+      {
+        field: 'type',
+        componentProps: {
+          onChange: (value: string) => (state.childrenTabVisible = value == '2')
+        }
+      }
+    ]);
     // 处理设置数据
     state.tag = data._tag;
     const id = data.record?.id;
@@ -135,14 +148,14 @@
 
   function handleRemoveTab(targetKey: string) {
     let lastIndex = 0;
-    (state.typeActiveKey == '1' ? mainTemplateObjs : childTemplateObjs).value.forEach((item, i) => {
+    (state.typeActiveKey == '0' ? mainTemplateObjs : childTemplateObjs).value.forEach((item, i) => {
       if ((item.index || item.id) == targetKey) {
         lastIndex = i - 1;
       }
     });
     state.templateObjs = state.templateObjs.filter(item => (item.index || item.id) != targetKey);
     // 当前选择需要删除的tab时候设置自动选择上一个tab
-    if (state.typeActiveKey == '1') {
+    if (state.typeActiveKey == '0') {
       if (mainTemplateObjs.value.length && state.mainActiveKey === targetKey) {
         if (lastIndex >= 0) {
           const mainTemplate = mainTemplateObjs.value[lastIndex];
@@ -166,11 +179,11 @@
   }
 
   function handlePrompt({ name }) {
-    const index = state.templateObjs.findIndex(item => (item.index || item.id) == (state.typeActiveKey == '1' ? state.mainActiveKey : state.childActiveKey));
+    const index = state.templateObjs.findIndex(item => (item.index || item.id) == (state.typeActiveKey == '0' ? state.mainActiveKey : state.childActiveKey));
     let template: templateTypePartial = {
       name,
       contents: '',
-      isChild: state.typeActiveKey == '1' ? '0' : '1',
+      isChild: state.typeActiveKey,
       index: `t${Date.now()}`
     };
     if (index != -1) {
@@ -178,7 +191,7 @@
       state.templateObjs.splice(index, 1, template);
     } else state.templateObjs.push(template);
     // 设置自动选择tab
-    if (state.typeActiveKey == '1'){
+    if (state.typeActiveKey == '0'){
       state.mainActiveKey = (template.index || template.id)!;
     } else state.childActiveKey = (template.index || template.id)!;
   }

src/views/system/devtools/template/template.data.ts

@@ -79,6 +79,7 @@ export const formSchema: FormSchema[] = [
     label: '模板分类',
     component: 'Select',
     required: true,
+    defaultValue: '1',
     componentProps: {
       options: [
         { label: '单表',value: '1' },