feat(代码生成器-模版管理): 模版管理页面功能完善

src/components/registerGlobComp.ts

@@ -1,6 +1,18 @@
 import type { App } from 'vue';
 import { Button } from './Button';
-import { Input, Layout, Radio, Tag, Select, Tooltip, Tree, Tabs, Switch } from 'ant-design-vue';
+import {
+  Input,
+  Layout,
+  Radio,
+  Tag,
+  Select,
+  Tooltip,
+  Tree,
+  Tabs,
+  Switch,
+  Form,
+  InputNumber,
+} from 'ant-design-vue';
 import VXETable from 'vxe-table';
 
 import { i18n } from '@/locales/setupI18n';
@@ -32,5 +44,7 @@ export function registerGlobComp(app: App) {
     .use(Tree)
     .use(Tabs)
     .use(Switch)
+    .use(InputNumber)
+    .use(Form)
     .use(VXETable);
 }

src/modules/codeGenerator/components/template/TemplateGroup.vue

@@ -1,29 +1,88 @@
 <template>
-  <div>
+  <div class="full-height" :class="prefixCls">
     <SmartTable
       @register="registerTable"
       v-bind="getTableProps"
-      @current-change="handleCurrentChange"
-    />
+      class="table-container"
+      :size="getTableSize"
+      @cell-click="handleCellClick"
+    >
+      <template #table-groupName="{ row }">
+        <div style="cursor: pointer" @contextmenu="(e) => handleContext(e, row)">
+          {{ row.groupName }}
+        </div>
+      </template>
+    </SmartTable>
+    <div class="button-container">
+      <a-button class="button" block type="primary" @click="() => showAddModal()">
+        {{ $t('common.button.add') }}
+      </a-button>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
   import type { SmartTableProps } from '@/components/SmartTable';
 
-  import { computed } from 'vue';
+  import { computed, ref, unref, watch } from 'vue';
 
   import { SmartTable, useSmartTable } from '@/components/SmartTable';
-  import { ApiServiceEnum, defHttp } from '@/utils/http/axios';
+  import { useSizeSetting } from '@/hooks/setting/UseSizeSetting';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { createContextMenu } from '@/components/ContextMenu';
+  import { useDesign } from '@/hooks/web/useDesign';
+
+  import {
+    listGroupApi,
+    saveUpdateGroupApi,
+    deleteGroupByIdApi,
+    getGroupByIdApi,
+  } from '../../views/template/CodeTemplateList.api';
 
   const props = defineProps({
     tableProps: Object as PropType<SmartTableProps>,
   });
 
-  const emit = defineEmits(['current-change']);
+  const emit = defineEmits(['change']);
+  const { t } = useI18n();
+  const { prefixCls } = useDesign('smart-tool-db-templateGroup');
+
+  const { getTableSize } = useSizeSetting();
 
-  const handleCurrentChange = ({ row }) => {
-    emit('current-change', row);
+  const currentGroupIdRef = ref<number | null>(null);
+  const handleCellClick = ({ row }) => {
+    if (unref(currentGroupIdRef) === row.groupId) {
+      currentGroupIdRef.value = null;
+    } else {
+      currentGroupIdRef.value = row.groupId;
+    }
+  };
+  watch(currentGroupIdRef, (value) => {
+    const tableInstance = getTableInstance();
+    if (value === null) {
+      tableInstance.clearCurrentRow();
+    } else {
+      tableInstance.setCurrentRow({ groupId: value });
+    }
+    emit('change', value);
+  });
+
+  const handleContext = (e: MouseEvent, row: any) => {
+    return createContextMenu({
+      event: e,
+      items: [
+        {
+          label: t('common.button.edit'),
+          icon: 'ant-design:edit-outlined',
+          handler: () => editByRowModal(row),
+        },
+        {
+          label: t('common.button.delete'),
+          icon: 'ant-design:delete-outlined',
+          handler: () => deleteByRow(row),
+        },
+      ],
+    });
   };
 
   const getTableProps = computed<SmartTableProps>(() => {
@@ -41,24 +100,89 @@
       height: 'auto',
       proxyConfig: {
         ajax: {
-          query: async (params) => {
-            const result = await defHttp.post({
-              service: ApiServiceEnum.SMART_CODE,
-              url: 'db/code/template/listGroup',
-              data: {
-                ...params.ajaxParameter,
-                sortName: 'seq',
-              },
+          query: (params) => {
+            return listGroupApi({
+              ...params.ajaxParameter,
+              sortName: 'seq',
             });
-            return [{ groupName: 'ALL' }, ...result];
           },
+          save: ({ body: { insertRecords, updateRecords } }) =>
+            saveUpdateGroupApi([...insertRecords, ...updateRecords][0]),
+          getById: (row) => getGroupByIdApi(row.groupId),
+          delete: ({ body: { removeRecords } }) =>
+            deleteGroupByIdApi(removeRecords.map((item) => item.groupId)),
         },
       },
       ...props.tableProps,
     };
   });
 
-  const [registerTable] = useSmartTable();
+  const [registerTable, { showAddModal, editByRowModal, deleteByRow, getTableInstance }] =
+    useSmartTable({
+      id: 'smart-tool-code-templateGroup',
+      stripe: true,
+      height: 'auto',
+      rowConfig: {
+        isHover: true,
+        isCurrent: true,
+        keyField: 'groupId',
+      },
+      columns: [
+        {
+          title: '{generator.views.template.title.templateGroup}',
+          field: 'groupName',
+          slots: {
+            default: 'table-groupName',
+          },
+        },
+      ],
+      addEditConfig: {
+        formConfig: {
+          schemas: [
+            {
+              field: 'groupId',
+              label: '',
+              show: false,
+              component: 'Input',
+            },
+            {
+              field: 'groupName',
+              label: t('generator.views.template.title.templateGroup'),
+              component: 'Input',
+              required: true,
+            },
+            {
+              field: 'seq',
+              label: t('generator.views.template.title.seq'),
+              component: 'InputNumber',
+              required: true,
+            },
+          ],
+        },
+      },
+    });
 </script>
 
-<style scoped></style>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-smart-tool-db-templateGroup';
+  @buttonContainerHeight: 50px;
+  .@{prefix-cls} {
+    .table-container {
+      height: calc(100% - @buttonContainerHeight);
+    }
+
+    .button-container {
+      height: @buttonContainerHeight;
+      line-height: @buttonContainerHeight;
+      text-align: center;
+
+      .button {
+        width: 90%;
+      }
+    }
+
+    .smart-table-container {
+      padding: 0;
+    }
+  }
+</style>

src/modules/codeGenerator/views/database/DatabaseListView.data.ts

@@ -130,9 +130,10 @@ export const addEditForm: (t: Function) => Array<FormSchema> = (t: Function) =>
     {
       label: t('generator.views.database.table.url'),
       field: 'url',
-      component: 'Input',
+      component: 'InputTextArea',
       componentProps: {
         placeholder: t('generator.views.database.validate.url'),
+        rows: 4,
       },
       required: true,
     },

src/modules/codeGenerator/views/database/DatabaseListView.vue

@@ -84,10 +84,13 @@
   };
 
   const [registerTable, { editByRowModal, setLoading, query, showAddModal }] = useSmartTable({
+    id: 'smart-tool-code-databaseList',
+    customConfig: { storage: true },
     searchFormConfig: {
       searchWithSymbol: true,
       schemas: searchForm(t),
       layout: 'inline',
+      compact: true,
       actionColOptions: {
         span: undefined,
       },
@@ -142,6 +145,8 @@
     },
     toolbarConfig: {
       refresh: true,
+      column: { columnOrder: true },
+      zoom: true,
       buttons: [
         {
           // name: t('common.button.add'),

src/modules/codeGenerator/views/database/components/TemplateSelectedModal.vue

@@ -6,7 +6,7 @@
     :width="600"
     :title="$t('generator.views.database.common.chooseTemplate')"
   >
-    <a-transfer
+    <Transfer
       class="db-template-selected"
       :data-source="transDataSource"
       :target-keys="targetKeysModel"
@@ -23,11 +23,12 @@
   import BasicModal from '@/components/Modal/src/BasicModal.vue';
   import { listTemplate, getCreateDicUrl } from '../DatabaseListView.api';
   import { useModalInner } from '@/components/Modal';
-  import { message } from 'ant-design-vue';
+  import { Transfer } from 'ant-design-vue';
   import { applyTempToken } from '@/utils/auth';
   import { useMessage } from '@/hooks/web/useMessage';
-  import { Result } from '/#/axios';
+  import { Result } from '#/axios';
   import { useI18n } from '@/hooks/web/useI18n';
+  import { errorMessage } from '@/utils/message/SystemNotice';
 
   const props = defineProps({
     templateType: String as PropType<string>,
@@ -65,7 +66,7 @@
   const handleCreate = async () => {
     const selectTemplateIdList = unref(targetKeysModel);
     if (selectTemplateIdList.length === 0) {
-      message.error(t('generator.views.database.validate.template'));
+      errorMessage(t('generator.views.database.validate.template'));
       return false;
     }
     try {

src/modules/codeGenerator/views/template/CodeTemplateList.api.ts

@@ -5,6 +5,10 @@ enum Api {
   saveUpdate = 'db/code/template/saveUpdate',
   delete = 'db/code/template/batchDeleteById',
   getById = 'db/code/template/getById',
+  listGroup = 'db/code/template/listGroup',
+  getGroupById = 'db/code/template/getGroupById',
+  saveUpdateGroup = 'db/code/template/saveUpdateGroup',
+  deleteGroupById = 'db/code/template/deleteGroupById',
 }
 
 export const listApi = (params) =>
@@ -37,3 +41,35 @@ export const getByIdApi = (id: number) => {
     data: id,
   });
 };
+
+export const listGroupApi = (data: Recordable) => {
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_CODE,
+    url: Api.listGroup,
+    data,
+  });
+};
+
+export const getGroupByIdApi = (id: number) => {
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_CODE,
+    url: Api.getGroupById,
+    data: id,
+  });
+};
+
+export const saveUpdateGroupApi = (data: Recordable) => {
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_CODE,
+    url: Api.saveUpdateGroup,
+    data,
+  });
+};
+
+export const deleteGroupByIdApi = (idList: number[]) => {
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_CODE,
+    url: Api.deleteGroupById,
+    data: idList,
+  });
+};

src/modules/codeGenerator/views/template/CodeTemplateList.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="full-height code-container" id="codeTemplateContainer" style="padding: 10px">
+  <div class="full-height page-container" id="codeTemplateContainer">
     <LayoutSeparate :show-line="false" first-size="240px" class="full-height">
       <template #first>
-        <div class="full-height" style=" margin-right: 5px;background: white">
+        <div class="full-height" style="margin-right: 5px; background: white">
           <TemplateGroup @change="handleGroupChange" />
         </div>
       </template>
@@ -13,11 +13,7 @@
           </template>
           <template #addEditForm-language="{ model }">
             <div class="code-edit-container">
-              <CodeEditor
-                :read-only="isReadonly"
-                v-model:value="model.template"
-                :mode="model.language"
-              />
+              <CodeEditor :readonly="isReadonly" v-model:value="model.template" />
             </div>
           </template>
         </SmartTable>
@@ -31,12 +27,11 @@
 
   import { computed, ref, unref } from 'vue';
   import { useI18n } from '@/hooks/web/useI18n';
-  import { merge } from 'lodash-es';
   import { message } from 'ant-design-vue';
 
   import { SmartTable, SmartVxeTableAction, useSmartTable } from '@/components/SmartTable';
   import { LayoutSeparate } from '@/components/LayoutSeparate';
-  import TemplateGroup from './components/TemplateGroup.vue';
+  import TemplateGroup from '../../components/template/TemplateGroup.vue';
   import { CodeEditor } from '@/components/CodeEditor';
 
   import {
@@ -48,11 +43,11 @@
 
   const { t } = useI18n();
 
-  const currentGroupIdRef = ref<number | undefined>();
+  const currentGroupIdRef = ref<number | null>();
 
-  const handleGroupChange = (id: number | undefined) => {
+  const handleGroupChange = (id: number | null) => {
     currentGroupIdRef.value = id;
-    reload();
+    query();
   };
 
   const getActions = (row): ActionItem[] => {
@@ -98,13 +93,21 @@
     };
   });
 
-  const [registerTable, { editByRowModal, showAddModal, reload }] = useSmartTable({
+  const [registerTable, { editByRowModal, showAddModal, query }] = useSmartTable({
+    id: 'smart-tool-code-templateList',
+    customConfig: { storage: true },
     height: 'auto',
-    highlightHoverRow: true,
     stripe: true,
+    showOverflow: 'tooltip',
+    border: true,
+    rowConfig: {
+      isHover: true,
+    },
+    columnConfig: { resizable: true },
     columns: getTableColumns(t),
     useSearchForm: true,
     searchFormConfig: {
+      autoSubmitOnEnter: true,
       schemas: getSearchSchemas(t),
       searchWithSymbol: true,
       colon: true,
@@ -112,10 +115,12 @@
       actionColOptions: {
         span: undefined,
       },
+      compact: true,
     },
     toolbarConfig: {
       refresh: true,
-      resizable: true,
+      zoom: true,
+      column: { columnOrder: true },
       buttons: [
         {
           code: 'ModalAdd',
@@ -140,13 +145,16 @@
     },
     proxyConfig: {
       ajax: {
-        query: (params) => {
-          const parameter = merge(params.ajaxParameter, {
+        query: ({ ajaxParameter }) => {
+          const currentGroupId = unref(currentGroupIdRef);
+          const groupParameter = currentGroupId ? { 'groupId@=': currentGroupId } : {};
+          return listApi({
+            ...ajaxParameter,
             parameter: {
-              'groupId@=': unref(currentGroupIdRef),
+              ...ajaxParameter?.parameter,
+              ...groupParameter,
             },
           });
-          return listApi(parameter);
         },
         save: ({ body: { insertRecords, updateRecords } }) =>
           saveUpdateApi([...insertRecords, ...updateRecords][0]),

src/modules/codeGenerator/views/template/components/TemplateGroup.vue

@@ -1,248 +0,0 @@
-<template>
-  <div class="full-height">
-    <div class="table-container">
-      <vxe-grid
-        ref="gridRef"
-        highlight-current-row
-        stripe
-        :columns="columns"
-        height="auto"
-        size="small"
-        v-bind="tableProps"
-        @cell-click="handleChange"
-      >
-        <template #table-groupName="{ row }">
-          <div style="cursor: pointer" @contextmenu="handleContext">
-            {{ row.groupName }}
-          </div>
-          <!--            <ContextMenu event="contextmenu">-->
-          <!--              {{ row.groupName }}-->
-          <!--              <template #menu>-->
-          <!--                <a-menu @click="({ key, domEvent }) => handleMenuClick(key, row.groupId, domEvent)">-->
-          <!--                  <a-menu-item key="edit">-->
-          <!--                    <EditOutlined />-->
-          <!--                    &nbsp;&nbsp;{{ $t('common.button.edit') }}-->
-          <!--                  </a-menu-item>-->
-          <!--                  <a-menu-item key="delete">-->
-          <!--                    <DeleteOutlined />-->
-          <!--                    &nbsp;&nbsp;{{ $t('common.button.delete') }}-->
-          <!--                  </a-menu-item>-->
-          <!--                </a-menu>-->
-          <!--              </template>-->
-          <!--            </ContextMenu>-->
-          <!--          </div>-->
-        </template>
-      </vxe-grid>
-    </div>
-    <div class="button-container">
-      <a-button class="button" block type="primary" @click="() => handleAddEdit(true, null)">
-        {{ $t('common.button.add') }}
-      </a-button>
-    </div>
-
-    <a-modal v-bind="modalProps">
-      <a-spin :spinning="spinning">
-        <a-form
-          v-bind="formProps"
-          :rules="rules"
-          :label-col="{ span: 6 }"
-          :wrapper-col="{ span: 17 }"
-        >
-          <a-form-item :label="$t('generator.views.template.title.templateGroup')" name="groupName">
-            <a-input
-              v-model:value="formProps.model.groupName"
-              :placeholder="$t('generator.views.template.validate.templateGroup')"
-            />
-          </a-form-item>
-          <a-form-item :label="$t('generator.views.template.title.seq')" name="seq">
-            <a-input-number
-              v-model:value="formProps.model.seq"
-              style="width: 100%"
-              :placeholder="$t('generator.views.template.validate.seq')"
-            />
-          </a-form-item>
-        </a-form>
-      </a-spin>
-    </a-modal>
-  </div>
-</template>
-
-<script lang="ts">
-  import { defineComponent, onMounted, ref } from 'vue';
-  import { useI18n } from 'vue-i18n';
-
-  // import { ContextMenu } from '@/components/ContextMenu';
-  import { useVxeTable, useAddEdit, useVxeDelete } from '@/hooks/web/useCrud';
-  import { ApiServiceEnum, defHttp } from '@/utils/http/axios';
-  import { useContextMenu } from '@/hooks/web/useContextMenu';
-
-  const handleLoadData = async () => {
-    const result = [
-      {
-        groupName: 'ALL',
-      },
-    ];
-    return result.concat(
-      (await defHttp.post({
-        url: 'db/code/template/listGroup',
-        service: ApiServiceEnum.SMART_CODE,
-      })) || [],
-    );
-  };
-
-  /**
-   * 通过ID查询
-   */
-  const handleGet = (id: any) => {
-    return defHttp.post({
-      service: ApiServiceEnum.SMART_CODE,
-      url: 'db/code/template/getGroupById',
-      data: id,
-    });
-  };
-
-  const handleSaveUpdate = async (model: any) => {
-    return defHttp.post({
-      service: ApiServiceEnum.SMART_CODE,
-      url: 'db/code/template/saveUpdateGroup',
-      data: model,
-    });
-  };
-
-  const handleDelete = async (idList: Array<any>) => {
-    return defHttp.post({
-      service: ApiServiceEnum.SMART_CODE,
-      url: 'db/code/template/deleteGroupById',
-      data: idList,
-    });
-  };
-
-  export default defineComponent({
-    name: 'TemplateGroup',
-    emits: ['change'],
-    setup() {
-      const { t } = useI18n();
-      const gridRef = ref();
-      const { tableProps, loadData } = useVxeTable(handleLoadData, {
-        paging: false,
-      });
-      // 编辑
-      const { modalProps, handleAddEdit, spinning, formProps, formRef } = useAddEdit(
-        gridRef,
-        handleGet,
-        loadData,
-        handleSaveUpdate,
-        t,
-        {
-          defaultModel: {
-            seq: 1,
-          },
-        },
-      );
-
-      const [createContextMenu] = useContextMenu();
-
-      const handleContext = (e: MouseEvent) => {
-        return createContextMenu({
-          event: e,
-          items: [
-            {
-              label: t('common.button.edit'),
-              icon: 'ant-design:edit-outlined',
-            },
-            {
-              label: t('common.button.delete'),
-              icon: 'ant-design:delete-outlined',
-            },
-          ],
-        });
-      };
-
-      const { handleDeleteById } = useVxeDelete(gridRef, t, handleDelete, {
-        idField: 'groupId',
-        listHandler: loadData,
-      });
-
-      const handleMenuClick = (ident: string, groupId: number, event: Event) => {
-        event.preventDefault();
-        switch (ident) {
-          case 'edit': {
-            handleAddEdit(false, groupId);
-            break;
-          }
-          case 'delete': {
-            handleDeleteById(groupId);
-            break;
-          }
-        }
-      };
-
-      onMounted(loadData);
-      return {
-        gridRef,
-        tableProps,
-        loadData,
-        handleMenuClick,
-        modalProps,
-        handleAddEdit,
-        spinning,
-        formProps,
-        formRef,
-        handleContext,
-      };
-    },
-    data() {
-      return {
-        columns: [
-          {
-            title: '{generator.views.template.title.templateGroup}',
-            field: 'groupName',
-            slots: {
-              default: 'table-groupName',
-            },
-          },
-        ],
-        rules: {
-          groupName: [
-            {
-              required: true,
-              message: this.$t('generator.views.template.validate.templateGroup'),
-              trigger: 'blur',
-            },
-          ],
-          seq: [
-            {
-              required: true,
-              message: this.$t('generator.views.template.validate.seq'),
-              trigger: 'blur',
-              type: 'number',
-            },
-          ],
-        },
-      };
-    },
-    methods: {
-      handleChange({ row }: any) {
-        this.$emit('change', row.groupId);
-      },
-    },
-  });
-</script>
-
-<style lang="less" scoped>
-  @buttonContainerHeight: 50px;
-
-  .table-container {
-    height: calc(100% - @buttonContainerHeight);
-  }
-
-  .button-container {
-    height: @buttonContainerHeight;
-    line-height: @buttonContainerHeight;
-    text-align: center;
-
-    .button {
-      width: 90%;
-    }
-  }
-</style>