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

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;