perf(代码生成器): 代码生成器功能完善

src/modules/smart-code/views/codeDesign/CodeDesignPage.config.ts

@@ -1,4 +1,5 @@
 import type { FormSchema } from '@/components/Form';
+import { SmartColumn } from '@/components/SmartTable';
 
 type ButtonType =
   | 'SEARCH'
@@ -12,7 +13,9 @@ type ButtonType =
   | 'ZOOM'
   | 'REFRESH'
   | 'SHOW_SEARCH'
-  | 'PRINT';
+  | 'PRINT'
+  | 'USE_YN_TRUE'
+  | 'USE_YN_FALSE';
 
 interface Button {
   key: ButtonType;
@@ -196,6 +199,11 @@ export const formSchemas = (t: Function): FormSchema[] => {
       required: true,
     },
     // ------------ 第五行 ---------------------
+    {
+      label: '权限前缀',
+      field: 'permissionPrefix',
+      component: 'Input',
+    },
     {
       label: t('generator.views.code.title.relateTable'),
       field: 'addendumTableList',
@@ -234,6 +242,14 @@ const letButtonList: Button[] = [
     key: 'DELETE',
     value: '删除',
   },
+  {
+    key: 'USE_YN_TRUE',
+    value: '启用',
+  },
+  {
+    key: 'USE_YN_FALSE',
+    value: '停用',
+  },
 ];
 
 const rightButtonList: Button[] = [
@@ -329,3 +345,406 @@ const rowButtonTypeList = (t: Function) => [
     value: 'TEXT',
   },
 ];
+
+/**
+ * 获取table column
+ */
+export const getTableFiledColumns = (): SmartColumn[] => {
+  return [
+    {
+      field: 'columnName',
+      title: '{generator.views.tableField.title.columnName}',
+      width: 160,
+      align: 'left',
+      headerAlign: 'center',
+    },
+    {
+      field: 'typeName',
+      title: '{generator.views.tableField.title.typeName}',
+      width: 120,
+    },
+    {
+      field: 'columnSize',
+      title: '{generator.views.tableField.title.columnSize}',
+      width: 120,
+    },
+    {
+      field: 'decimalDigits',
+      title: '{generator.views.tableField.title.decimalDigits}',
+      width: 120,
+    },
+    {
+      field: 'columnDef',
+      title: '{generator.views.tableField.title.columnDef}',
+      width: 120,
+    },
+    {
+      field: 'nullable',
+      title: '{generator.views.tableField.title.nullable}',
+      width: 120,
+      autoClass: 'Boolean',
+      formatter({ row }) {
+        const value = row.nullable;
+        if (value === 0) {
+          return '否';
+        }
+        return '是';
+      },
+    },
+    {
+      field: 'remarks',
+      title: '{generator.views.tableField.title.remarks}',
+      minWidth: 120,
+      align: 'left',
+      headerAlign: 'center',
+    },
+    {
+      field: 'primaryKey',
+      title: '{generator.views.tableField.title.primaryKey}',
+      width: 120,
+      autoClass: 'Boolean',
+      formatter({ row }) {
+        const value = row.primaryKey;
+        if (value) {
+          return '是';
+        }
+        return '';
+      },
+    },
+    {
+      field: 'indexed',
+      title: '{generator.views.tableField.title.indexed}',
+      width: 120,
+      autoClass: 'Boolean',
+      formatter({ row }) {
+        const value = row.indexed;
+        if (value) {
+          return '是';
+        }
+        return '';
+      },
+    },
+  ];
+};
+
+export const getPageSearchSettingColumn = (t: Function): SmartColumn[] => {
+  const controlFormatMap = {};
+  const controlFormatList = controlList.map(({ key, value }) => {
+    const label = t(value);
+    controlFormatMap[key] = label;
+    return {
+      label: label,
+      value: key,
+    };
+  });
+
+  return [
+    {
+      title: '{generator.views.tableField.title.columnName}',
+      field: 'columnName',
+      width: 160,
+      align: 'left',
+      headerAlign: 'center',
+    },
+    {
+      title: '{generator.views.tableSetting.title.title}',
+      field: 'title',
+      width: 160,
+      align: 'left',
+      headerAlign: 'center',
+      editRender: {
+        name: 'AInput',
+        autofocus: true,
+      },
+    },
+    {
+      title: '{generator.views.formSetting.title.controlType}',
+      field: 'controlType',
+      width: 150,
+      editRender: {
+        name: 'ASelect',
+        autofocus: true,
+        props: (row) => {
+          return {
+            disabled: !row.visible,
+            options: controlFormatList,
+          };
+        },
+      },
+      formatter({ row }) {
+        const value = row.controlType;
+        if (!value) {
+          return '';
+        }
+        return controlFormatMap[value];
+      },
+    },
+    {
+      title: '{generator.views.formSetting.title.readonly}',
+      field: 'readonly',
+      width: 110,
+      editRender: {
+        name: 'ASwitch',
+        props: (row) => {
+          return {
+            disabled: !row.visible,
+          };
+        },
+      },
+      formatter({ row }) {
+        const value = row.readonly;
+        if (value) {
+          return '是';
+        }
+        return '否';
+      },
+      autoClass: 'Boolean',
+    },
+    {
+      title: '{generator.views.tableSetting.title.visible}',
+      field: 'visible',
+      width: 110,
+      editRender: {
+        name: 'ASwitch',
+      },
+      formatter({ row }) {
+        const value = row.visible;
+        if (value) {
+          return '是';
+        }
+        return '否';
+      },
+      autoClass: 'Boolean',
+    },
+    {
+      title: '{generator.views.tableSetting.title.hidden}',
+      field: 'hidden',
+      width: 110,
+      editRender: {
+        name: 'ASwitch',
+        props: (row) => {
+          return {
+            disabled: !row.visible,
+          };
+        },
+      },
+      formatter({ row }) {
+        const value = row.hidden;
+        if (value) {
+          return '是';
+        }
+        return '否';
+      },
+      autoClass: 'Boolean',
+    },
+    {
+      title: '{generator.views.formSetting.title.used}',
+      field: 'used',
+      width: 120,
+      editRender: {
+        name: 'ASwitch',
+        props: (row) => {
+          return {
+            disabled: !row.visible,
+          };
+        },
+      },
+      formatter({ row }) {
+        const value = row.used;
+        if (value) {
+          return '是';
+        }
+        return '否';
+      },
+      autoClass: 'Boolean',
+    },
+    {
+      title: '{generator.views.searchSetting.title.searchSymbol}',
+      field: 'searchSymbol',
+      width: 120,
+      editRender: {
+        name: 'ASelect',
+        autofocus: true,
+        props: (row) => {
+          return {
+            disabled: !row.visible,
+            options: searchSymbolList.map((item) => {
+              return {
+                label: item,
+                value: item,
+              };
+            }),
+          };
+        },
+      },
+    },
+    {
+      title: '{generator.views.formSetting.title.useTableSearch}',
+      field: 'useTableSearch',
+      width: 110,
+      editRender: {
+        name: 'ASwitch',
+        props: (row) => {
+          return {
+            disabled: !row.visible,
+          };
+        },
+      },
+      formatter({ row }) {
+        const value = row.useTableSearch;
+        if (value) {
+          return '是';
+        }
+        return '否';
+      },
+      autoClass: 'Boolean',
+    },
+    {
+      title: '{generator.views.code.table.tableName}',
+      field: 'tableName',
+      width: 120,
+      editRender: {
+        name: 'AInput',
+        autofocus: true,
+        props: (row) => {
+          return {
+            disabled: !(row.useTableSearch && row.visible),
+          };
+        },
+      },
+    },
+    {
+      title: '{generator.views.formSetting.title.keyColumnName}',
+      field: 'keyColumnName',
+      width: 120,
+      editRender: {
+        name: 'AInput',
+        autofocus: true,
+        props: (row) => {
+          return {
+            disabled: !(row.useTableSearch && row.visible),
+          };
+        },
+      },
+    },
+    {
+      title: '{generator.views.formSetting.title.valueColumnName}',
+      field: 'valueColumnName',
+      width: 120,
+      editRender: {
+        name: 'AInput',
+        autofocus: true,
+        props: (row) => {
+          return {
+            disabled: !(row.useTableSearch && row.visible),
+          };
+        },
+      },
+    },
+    {
+      title: '{generator.views.formSetting.title.tableWhere}',
+      field: 'tableWhere',
+      minWidth: 180,
+      editRender: {
+        name: 'AInput',
+        autofocus: true,
+        props: (row) => {
+          return {
+            disabled: !(row.useTableSearch && row.visible),
+          };
+        },
+      },
+    },
+    {
+      title: '{generator.views.code.table.remarks}',
+      field: 'remarks',
+      minWidth: 160,
+      align: 'left',
+      headerAlign: 'center',
+    },
+  ];
+};
+
+const controlList = [
+  {
+    key: 'INPUT',
+    value: 'generator.views.code.title.controlList.input',
+  },
+  {
+    key: 'TEXTAREA',
+    value: 'generator.views.code.title.controlList.textarea',
+  },
+  {
+    key: 'NUMBER',
+    value: 'generator.views.code.title.controlList.number',
+  },
+  {
+    key: 'PASSWORD',
+    value: 'generator.views.code.title.controlList.password',
+  },
+  {
+    key: 'SELECT',
+    value: 'generator.views.code.title.controlList.select',
+  },
+  {
+    key: 'TRANSFER',
+    value: 'generator.views.code.title.controlList.transfer',
+  },
+  {
+    key: 'SELECT_TABLE',
+    value: 'generator.views.code.title.controlList.selectTable',
+  },
+  {
+    key: 'RADIO',
+    value: 'generator.views.code.title.controlList.radio',
+  },
+  {
+    key: 'CHECKBOX',
+    value: 'generator.views.code.title.controlList.checkbox',
+  },
+  {
+    key: 'SWITCH_TYPE',
+    value: 'generator.views.code.title.controlList.switch_type',
+  },
+  {
+    key: 'DATE',
+    value: 'generator.views.code.title.controlList.date',
+  },
+  {
+    key: 'TIME',
+    value: 'generator.views.code.title.controlList.time',
+  },
+  {
+    key: 'DATETIME',
+    value: 'generator.views.code.title.controlList.datetime',
+  },
+  {
+    key: 'FILE',
+    value: 'generator.views.code.title.controlList.file',
+  },
+  {
+    key: 'DATA_DICT',
+    value: 'generator.views.design.title.controlList.dataDict',
+  },
+  {
+    key: 'CATEGORY_DICT',
+    value: 'generator.views.design.title.controlList.categoryDict',
+  },
+];
+
+/**
+ * 查询标识列表
+ */
+export const searchSymbolList = [
+  '=',
+  'like',
+  '>',
+  '>=',
+  '<',
+  '<=',
+  'in',
+  'notIn',
+  'notLike',
+  'likeLeft',
+  'likeRight',
+];

src/modules/smart-code/views/codeDesign/CodeDesignPage.vue

@@ -113,7 +113,7 @@
   import TableFieldTable from './componenets/TableFieldTable/TableFieldTable.vue';
   import PageTableSetting from './componenets/PageTableSetting/PageTableSetting.vue';
   import PageFormSetting from './componenets/PageFromSetting/PageFormSetting.vue';
-  import PageSearchSetting from './componenets/PageSearchSetting/PageSearchSetting.vue';
+  import PageSearchSetting from './componenets/PageSearchSetting/PageSearchSettingOld.vue';
   import { Icon } from '@/components/Icon';
   import PageAddendumTableChoseModal from './componenets/PageAddendumTableChoseModal.vue';
 

src/modules/smart-code/views/codeDesign/componenets/PageFromSetting/PageFormSetting.vue

@@ -156,7 +156,7 @@
         data[field] = item[field];
       });
       return Object.assign(data, {
-        title: data.remarks,
+        title: data.remarks || data.javaProperty,
         readonly: false,
         visible: true,
         hidden: false,

src/modules/smart-code/views/codeDesign/componenets/PageSearchSetting/PageSearchSetting.vue

@@ -1,159 +1,80 @@
 <template>
   <div class="full-height">
-    <vxe-grid
-      ref="tableRef"
-      row-key
-      :size="tableSizeConfig"
-      :columns="columns"
-      :data="data"
-      align="center"
-      highlight-hover-row
-      stripe
+    <SmartTable
       v-bind="$attrs"
-    >
-      <template #table-drop="{ rowIndex }">
-        <div class="table-drop" :data-id="rowIndex">
-          <MenuOutlined />
-        </div>
-      </template>
-      <template #table-title="{ row }">
-        <a-input v-model:value="row.title" :disabled="!row.visible" :size="formSizeConfig" />
-      </template>
-      <template #table-visible="{ row }">
-        <a-checkbox v-model:checked="row.visible" :size="formSizeConfig" />
-      </template>
-      <template #table-hidden="{ row }">
-        <a-checkbox v-model:checked="row.hidden" :disabled="!row.visible" :size="formSizeConfig" />
-      </template>
-      <template #table-readonly="{ row }">
-        <a-checkbox
-          v-model:checked="row.readonly"
-          :disabled="!row.visible"
-          :size="formSizeConfig"
-        />
-      </template>
-      <template #table-used="{ row }">
-        <a-checkbox v-model:checked="row.used" :disabled="!row.visible" :size="formSizeConfig" />
-      </template>
-      <template #table-searchSymbol="{ row }">
-        <a-select
-          v-model:value="row.searchSymbol"
-          :disabled="!row.visible"
-          :size="formSizeConfig"
-          style="width: 100px"
-        >
-          <a-select-option v-for="item in searchSymbolList" :key="item" :value="item">
-            {{ item }}
-          </a-select-option>
-        </a-select>
-      </template>
-      <template #table-useTableSearch="{ row }">
-        <a-checkbox
-          v-model:checked="row.useTableSearch"
-          :disabled="!row.visible"
-          :size="formSizeConfig"
-        />
-      </template>
-      <template #table-tableName="{ row }">
-        <a-input
-          v-model:value="row.tableName"
-          :disabled="!(row.useTableSearch && row.visible)"
-          :size="formSizeConfig"
-        />
-      </template>
-      <template #table-keyColumnName="{ row }">
-        <a-input
-          v-model:value="row.keyColumnName"
-          :disabled="!(row.useTableSearch && row.visible)"
-          :size="formSizeConfig"
-        />
-      </template>
-      <template #table-valueColumnName="{ row }">
-        <a-input
-          v-model:value="row.valueColumnName"
-          :disabled="!(row.useTableSearch && row.visible)"
-          :size="formSizeConfig"
-        />
-      </template>
-      <template #table-tableWhere="{ row }">
-        <a-input v-model:value="row.tableWhere" :size="formSizeConfig" />
-      </template>
-      <template #table-controlType="{ row }">
-        <a-select
-          v-model:value="row.controlType"
-          :disabled="!row.visible"
-          style="width: 100px"
-          :size="formSizeConfig"
-        >
-          <a-select-option v-for="item in controlList" :key="item.key" :value="item.key">
-            {{ $t(item.value) }}
-          </a-select-option>
-        </a-select>
-        <a-tooltip v-if="row.controlType === 'selectTable'" placement="top">
-          <template #title>
-            <span>选择表格</span>
-          </template>
-          <PlusOutlined
-            :style="{ cursor: 'pointer', 'margin-left': '5px' }"
-            @click="() => handleShowChoseSelectTable(row)"
-          />
-        </a-tooltip>
-      </template>
-      <template #table-rules="{ row }">
-        <a-select
-          v-model:value="row.rules"
-          :disabled="!row.visible"
-          mode="multiple"
-          :size="formSizeConfig"
-          style="width: 160px"
-        >
-          <a-select-option v-for="item in ruleList" :key="item.key" :value="item.key">
-            {{ item.value }}
-          </a-select-option>
-        </a-select>
-      </template>
-      <template #table-visible-header="{ column }">
-        <a-checkbox v-model:checked="headerVisibleCheckboxChecked" :size="formSizeConfig" />
-        {{ $t(column.title.replace('{', '').replace('}', '')) }}
-      </template>
-      <template #table-hidden-header="{ column }">
-        <a-checkbox v-model:checked="headerHiddenCheckboxChecked" :size="formSizeConfig" />
-        {{ $t(column.title.replace('{', '').replace('}', '')) }}
-      </template>
-      <template #table-readonly-header="{ column }">
-        <a-checkbox v-model:checked="headerReadonlyCheckboxChecked" :size="formSizeConfig" />
-        {{ $t(column.title.replace('{', '').replace('}', '')) }}
-      </template>
-      <template #table-used-header="{ column }">
-        <a-checkbox v-model:checked="headerUseCheckboxChecked" :size="formSizeConfig" />
-        {{ $t(column.title.replace('{', '').replace('}', '')) }}
-      </template>
-    </vxe-grid>
-    <PageAddendumTableChoseModal
-      @ok="handleChoseTable"
-      :select-table-list="currentRow.selectTableList == null ? [] : currentRow.selectTableList"
-      @register="registerSelectTableModal"
+      :data="dataList"
+      @register="registerTable"
+      :size="tableSizeConfig"
     />
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, onMounted, ref, toRefs, watch } from 'vue';
-  import type { Ref, PropType } from 'vue';
+<script lang="ts" setup>
+  import { onMounted, PropType, ref, watch } from 'vue';
 
-  import { MenuOutlined, PlusOutlined } from '@ant-design/icons-vue';
-  import PageAddendumTableChoseModal from '../PageAddendumTableChoseModal.vue';
+  import { SmartTable, useSmartTable } from '@/components/SmartTable';
   import { useSizeSetting } from '@/hooks/setting/UseSizeSetting';
-  import { useVxeTableSortable } from '@/components/SmartTable';
+  import { useI18n } from 'vue-i18n';
+
+  import { getPageSearchSettingColumn } from '../../CodeDesignPage.config';
+
+  const props = defineProps({
+    tableData: {
+      type: Array as PropType<Array<any>>,
+      default: () => [],
+    },
+    editData: {
+      type: Array as PropType<Array<any>>,
+    },
+  });
 
-  import {
-    controlList,
-    getRuleList,
-    searchSymbolList,
-    vueTableHeaderCheckboxSupport,
-    vueChoseSelectTableSupport,
-  } from '../PageSettingSupport';
-  import { useI18n } from '@/hooks/web/useI18n';
+  const { t } = useI18n();
+  const { tableSizeConfig } = useSizeSetting();
+
+  const dataList = ref<Array<any>>([]);
+
+  watch(
+    () => props.tableData,
+    () => {
+      dataList.value = createDataFromTableData(props.tableData, props.editData);
+    },
+  );
+  onMounted(() => {
+    dataList.value = createDataFromTableData(props.tableData, props.editData);
+  });
+
+  const [registerTable] = useSmartTable({
+    columns: getPageSearchSettingColumn(t),
+    rowConfig: {
+      isHover: true,
+      useKey: true,
+      dragConfig: true,
+      keyField: 'javaProperty',
+    },
+    editConfig: {
+      trigger: 'click',
+      mode: 'cell',
+      showStatus: true,
+      showUpdateStatus: true,
+      showInsertStatus: true,
+    },
+    keepSource: true,
+    border: true,
+    stripe: true,
+    align: 'center',
+    columnConfig: {
+      resizable: true,
+    },
+    mouseConfig: { selected: true },
+    keyboardConfig: {
+      isArrow: true,
+      isDel: true,
+      isEnter: true,
+      isTab: true,
+      isEdit: true,
+      isChecked: true,
+    },
+  });
 
   const copyField = [
     'columnName',
@@ -165,12 +86,9 @@
     'simpleJavaType',
   ];
 
-  /**
-   * 创建数据
-   */
-  const createDataFromTableData = (tableData: Array<any>, editData: Ref | undefined) => {
-    if (editData && editData.value) {
-      return editData.value;
+  const createDataFromTableData = (tableData: Array<any>, editData: any[] | undefined) => {
+    if (editData) {
+      return editData;
     }
     return tableData.map((item) => {
       const data: any = {};
@@ -178,7 +96,7 @@
         data[field] = item[field];
       });
       return Object.assign(data, {
-        title: data.remarks,
+        title: data.remarks || data.javaProperty,
         readonly: false,
         visible: true,
         hidden: false,
@@ -190,191 +108,5 @@
       });
     });
   };
-
-  /**
-   * 搜索配置页面
-   */
-  export default defineComponent({
-    name: 'PageSearchSetting',
-    components: {
-      MenuOutlined,
-      PlusOutlined,
-      PageAddendumTableChoseModal,
-    },
-    props: {
-      tableData: {
-        type: Array as PropType<Array<any>>,
-        default: () => [],
-      },
-      editData: {
-        type: Array as PropType<Array<any>>,
-      },
-    },
-    setup(props) {
-      const { t } = useI18n();
-      const { tableData, editData } = toRefs(props);
-      const sizeConfigHoops = useSizeSetting();
-      const tableRef = ref();
-      const data = ref<Array<any>>([]);
-      const currentRow = ref<any>({});
-      watch(tableData, () => {
-        data.value = createDataFromTableData(tableData.value, editData);
-      });
-      onMounted(() => {
-        data.value = createDataFromTableData(tableData.value, editData);
-      });
-      const getData = () => {
-        return data.value;
-      };
-      return {
-        ...sizeConfigHoops,
-        data,
-        getData,
-        tableRef,
-        currentRow,
-        ...vueChoseSelectTableSupport(currentRow),
-        ...useVxeTableSortable(tableRef, '.table-drop', data),
-        ruleList: ref(getRuleList(t)),
-        controlList: ref(controlList),
-        searchSymbolList: ref(searchSymbolList),
-        headerVisibleCheckboxChecked: vueTableHeaderCheckboxSupport(data, 'visible').checked,
-        headerHiddenCheckboxChecked: vueTableHeaderCheckboxSupport(data, 'hidden', false).checked,
-        headerReadonlyCheckboxChecked: vueTableHeaderCheckboxSupport(data, 'readonly', false)
-          .checked,
-        headerUseCheckboxChecked: vueTableHeaderCheckboxSupport(data, 'used', true).checked,
-      };
-    },
-    data() {
-      return {
-        columns: [
-          {
-            title: '#',
-            field: 'drop',
-            width: 80,
-            slots: {
-              default: 'table-drop',
-            },
-          },
-          {
-            title: '{generator.views.tableField.title.columnName}',
-            field: 'columnName',
-            width: 160,
-            align: 'left',
-            headerAlign: 'center',
-          },
-          {
-            title: '{generator.views.tableSetting.title.title}',
-            field: 'title',
-            width: 160,
-            align: 'left',
-            headerAlign: 'center',
-            slots: {
-              default: 'table-title',
-            },
-          },
-          {
-            title: '{generator.views.formSetting.title.controlType}',
-            field: 'controlType',
-            width: 150,
-            slots: {
-              default: 'table-controlType',
-            },
-          },
-          {
-            title: '{generator.views.formSetting.title.readonly}',
-            field: 'readonly',
-            width: 110,
-            slots: {
-              default: 'table-readonly',
-              header: 'table-readonly-header',
-            },
-          },
-          {
-            title: '{generator.views.tableSetting.title.visible}',
-            field: 'visible',
-            width: 110,
-            slots: {
-              default: 'table-visible',
-              header: 'table-visible-header',
-            },
-          },
-          {
-            title: '{generator.views.tableSetting.title.hidden}',
-            field: 'hidden',
-            width: 110,
-            slots: {
-              default: 'table-hidden',
-              header: 'table-hidden-header',
-            },
-          },
-          {
-            title: '{generator.views.formSetting.title.used}',
-            field: 'used',
-            width: 110,
-            slots: {
-              default: 'table-used',
-              header: 'table-used-header',
-            },
-          },
-          {
-            title: '{generator.views.searchSetting.title.searchSymbol}',
-            field: 'searchSymbol',
-            width: 120,
-            slots: {
-              default: 'table-searchSymbol',
-            },
-          },
-          {
-            title: '{generator.views.formSetting.title.useTableSearch}',
-            field: 'useTableSearch',
-            width: 110,
-            slots: {
-              default: 'table-useTableSearch',
-            },
-          },
-          {
-            title: '{generator.views.code.table.tableName}',
-            field: 'tableName',
-            width: 120,
-            slots: {
-              default: 'table-tableName',
-            },
-          },
-          {
-            title: '{generator.views.formSetting.title.keyColumnName}',
-            field: 'keyColumnName',
-            width: 120,
-            slots: {
-              default: 'table-keyColumnName',
-            },
-          },
-          {
-            title: '{generator.views.formSetting.title.valueColumnName}',
-            field: 'valueColumnName',
-            width: 120,
-            slots: {
-              default: 'table-valueColumnName',
-            },
-          },
-          {
-            title: '{generator.views.formSetting.title.tableWhere}',
-            field: 'tableWhere',
-            minWidth: 180,
-            slots: {
-              default: 'table-tableWhere',
-            },
-          },
-          {
-            title: '{generator.views.code.table.remarks}',
-            field: 'remarks',
-            minWidth: 160,
-            align: 'left',
-            headerAlign: 'center',
-          },
-        ],
-      };
-    },
-  });
 </script>
-
 <style scoped></style>

src/modules/smart-code/views/codeDesign/componenets/PageSearchSetting/PageSearchSettingOld.vue

@@ -0,0 +1,380 @@
+<template>
+  <div class="full-height">
+    <vxe-grid
+      ref="tableRef"
+      row-key
+      :size="tableSizeConfig"
+      :columns="columns"
+      :data="data"
+      align="center"
+      highlight-hover-row
+      stripe
+      v-bind="$attrs"
+    >
+      <template #table-drop="{ rowIndex }">
+        <div class="table-drop" :data-id="rowIndex">
+          <MenuOutlined />
+        </div>
+      </template>
+      <template #table-title="{ row }">
+        <a-input v-model:value="row.title" :disabled="!row.visible" :size="formSizeConfig" />
+      </template>
+      <template #table-visible="{ row }">
+        <a-checkbox v-model:checked="row.visible" :size="formSizeConfig" />
+      </template>
+      <template #table-hidden="{ row }">
+        <a-checkbox v-model:checked="row.hidden" :disabled="!row.visible" :size="formSizeConfig" />
+      </template>
+      <template #table-readonly="{ row }">
+        <a-checkbox
+          v-model:checked="row.readonly"
+          :disabled="!row.visible"
+          :size="formSizeConfig"
+        />
+      </template>
+      <template #table-used="{ row }">
+        <a-checkbox v-model:checked="row.used" :disabled="!row.visible" :size="formSizeConfig" />
+      </template>
+      <template #table-searchSymbol="{ row }">
+        <a-select
+          v-model:value="row.searchSymbol"
+          :disabled="!row.visible"
+          :size="formSizeConfig"
+          style="width: 100px"
+        >
+          <a-select-option v-for="item in searchSymbolList" :key="item" :value="item">
+            {{ item }}
+          </a-select-option>
+        </a-select>
+      </template>
+      <template #table-useTableSearch="{ row }">
+        <a-checkbox
+          v-model:checked="row.useTableSearch"
+          :disabled="!row.visible"
+          :size="formSizeConfig"
+        />
+      </template>
+      <template #table-tableName="{ row }">
+        <a-input
+          v-model:value="row.tableName"
+          :disabled="!(row.useTableSearch && row.visible)"
+          :size="formSizeConfig"
+        />
+      </template>
+      <template #table-keyColumnName="{ row }">
+        <a-input
+          v-model:value="row.keyColumnName"
+          :disabled="!(row.useTableSearch && row.visible)"
+          :size="formSizeConfig"
+        />
+      </template>
+      <template #table-valueColumnName="{ row }">
+        <a-input
+          v-model:value="row.valueColumnName"
+          :disabled="!(row.useTableSearch && row.visible)"
+          :size="formSizeConfig"
+        />
+      </template>
+      <template #table-tableWhere="{ row }">
+        <a-input v-model:value="row.tableWhere" :size="formSizeConfig" />
+      </template>
+      <template #table-controlType="{ row }">
+        <a-select
+          v-model:value="row.controlType"
+          :disabled="!row.visible"
+          style="width: 100px"
+          :size="formSizeConfig"
+        >
+          <a-select-option v-for="item in controlList" :key="item.key" :value="item.key">
+            {{ $t(item.value) }}
+          </a-select-option>
+        </a-select>
+        <a-tooltip v-if="row.controlType === 'selectTable'" placement="top">
+          <template #title>
+            <span>选择表格</span>
+          </template>
+          <PlusOutlined
+            :style="{ cursor: 'pointer', 'margin-left': '5px' }"
+            @click="() => handleShowChoseSelectTable(row)"
+          />
+        </a-tooltip>
+      </template>
+      <template #table-rules="{ row }">
+        <a-select
+          v-model:value="row.rules"
+          :disabled="!row.visible"
+          mode="multiple"
+          :size="formSizeConfig"
+          style="width: 160px"
+        >
+          <a-select-option v-for="item in ruleList" :key="item.key" :value="item.key">
+            {{ item.value }}
+          </a-select-option>
+        </a-select>
+      </template>
+      <template #table-visible-header="{ column }">
+        <a-checkbox v-model:checked="headerVisibleCheckboxChecked" :size="formSizeConfig" />
+        {{ $t(column.title.replace('{', '').replace('}', '')) }}
+      </template>
+      <template #table-hidden-header="{ column }">
+        <a-checkbox v-model:checked="headerHiddenCheckboxChecked" :size="formSizeConfig" />
+        {{ $t(column.title.replace('{', '').replace('}', '')) }}
+      </template>
+      <template #table-readonly-header="{ column }">
+        <a-checkbox v-model:checked="headerReadonlyCheckboxChecked" :size="formSizeConfig" />
+        {{ $t(column.title.replace('{', '').replace('}', '')) }}
+      </template>
+      <template #table-used-header="{ column }">
+        <a-checkbox v-model:checked="headerUseCheckboxChecked" :size="formSizeConfig" />
+        {{ $t(column.title.replace('{', '').replace('}', '')) }}
+      </template>
+    </vxe-grid>
+    <PageAddendumTableChoseModal
+      @ok="handleChoseTable"
+      :select-table-list="currentRow.selectTableList == null ? [] : currentRow.selectTableList"
+      @register="registerSelectTableModal"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, onMounted, ref, toRefs, watch } from 'vue';
+  import type { Ref, PropType } from 'vue';
+
+  import { MenuOutlined, PlusOutlined } from '@ant-design/icons-vue';
+  import PageAddendumTableChoseModal from '../PageAddendumTableChoseModal.vue';
+  import { useSizeSetting } from '@/hooks/setting/UseSizeSetting';
+  import { useVxeTableSortable } from '@/components/SmartTable';
+
+  import {
+    controlList,
+    getRuleList,
+    searchSymbolList,
+    vueTableHeaderCheckboxSupport,
+    vueChoseSelectTableSupport,
+  } from '../PageSettingSupport';
+  import { useI18n } from '@/hooks/web/useI18n';
+
+  const copyField = [
+    'columnName',
+    'remarks',
+    'nullable',
+    'javaProperty',
+    'extType',
+    'javaType',
+    'simpleJavaType',
+  ];
+
+  /**
+   * 创建数据
+   */
+  const createDataFromTableData = (tableData: Array<any>, editData: Ref | undefined) => {
+    if (editData && editData.value) {
+      return editData.value;
+    }
+    return tableData.map((item) => {
+      const data: any = {};
+      copyField.forEach((field) => {
+        data[field] = item[field];
+      });
+      return Object.assign(data, {
+        title: data.remarks || data.javaProperty,
+        readonly: false,
+        visible: true,
+        hidden: false,
+        used: true,
+        controlType: 'INPUT',
+        searchSymbol: '=',
+        rules: [],
+        useTableSearch: false,
+      });
+    });
+  };
+
+  /**
+   * 搜索配置页面
+   */
+  export default defineComponent({
+    name: 'PageSearchSetting',
+    components: {
+      MenuOutlined,
+      PlusOutlined,
+      PageAddendumTableChoseModal,
+    },
+    props: {
+      tableData: {
+        type: Array as PropType<Array<any>>,
+        default: () => [],
+      },
+      editData: {
+        type: Array as PropType<Array<any>>,
+      },
+    },
+    setup(props) {
+      const { t } = useI18n();
+      const { tableData, editData } = toRefs(props);
+      const sizeConfigHoops = useSizeSetting();
+      const tableRef = ref();
+      const data = ref<Array<any>>([]);
+      const currentRow = ref<any>({});
+      watch(tableData, () => {
+        data.value = createDataFromTableData(tableData.value, editData);
+      });
+      onMounted(() => {
+        data.value = createDataFromTableData(tableData.value, editData);
+      });
+      const getData = () => {
+        return data.value;
+      };
+      return {
+        ...sizeConfigHoops,
+        data,
+        getData,
+        tableRef,
+        currentRow,
+        ...vueChoseSelectTableSupport(currentRow),
+        ...useVxeTableSortable(tableRef, '.table-drop', data),
+        ruleList: ref(getRuleList(t)),
+        controlList: ref(controlList),
+        searchSymbolList: ref(searchSymbolList),
+        headerVisibleCheckboxChecked: vueTableHeaderCheckboxSupport(data, 'visible').checked,
+        headerHiddenCheckboxChecked: vueTableHeaderCheckboxSupport(data, 'hidden', false).checked,
+        headerReadonlyCheckboxChecked: vueTableHeaderCheckboxSupport(data, 'readonly', false)
+          .checked,
+        headerUseCheckboxChecked: vueTableHeaderCheckboxSupport(data, 'used', true).checked,
+      };
+    },
+    data() {
+      return {
+        columns: [
+          {
+            title: '#',
+            field: 'drop',
+            width: 80,
+            slots: {
+              default: 'table-drop',
+            },
+          },
+          {
+            title: '{generator.views.tableField.title.columnName}',
+            field: 'columnName',
+            width: 160,
+            align: 'left',
+            headerAlign: 'center',
+          },
+          {
+            title: '{generator.views.tableSetting.title.title}',
+            field: 'title',
+            width: 160,
+            align: 'left',
+            headerAlign: 'center',
+            slots: {
+              default: 'table-title',
+            },
+          },
+          {
+            title: '{generator.views.formSetting.title.controlType}',
+            field: 'controlType',
+            width: 150,
+            slots: {
+              default: 'table-controlType',
+            },
+          },
+          {
+            title: '{generator.views.formSetting.title.readonly}',
+            field: 'readonly',
+            width: 110,
+            slots: {
+              default: 'table-readonly',
+              header: 'table-readonly-header',
+            },
+          },
+          {
+            title: '{generator.views.tableSetting.title.visible}',
+            field: 'visible',
+            width: 110,
+            slots: {
+              default: 'table-visible',
+              header: 'table-visible-header',
+            },
+          },
+          {
+            title: '{generator.views.tableSetting.title.hidden}',
+            field: 'hidden',
+            width: 110,
+            slots: {
+              default: 'table-hidden',
+              header: 'table-hidden-header',
+            },
+          },
+          {
+            title: '{generator.views.formSetting.title.used}',
+            field: 'used',
+            width: 120,
+            slots: {
+              default: 'table-used',
+              header: 'table-used-header',
+            },
+          },
+          {
+            title: '{generator.views.searchSetting.title.searchSymbol}',
+            field: 'searchSymbol',
+            width: 120,
+            slots: {
+              default: 'table-searchSymbol',
+            },
+          },
+          {
+            title: '{generator.views.formSetting.title.useTableSearch}',
+            field: 'useTableSearch',
+            width: 110,
+            slots: {
+              default: 'table-useTableSearch',
+            },
+          },
+          {
+            title: '{generator.views.code.table.tableName}',
+            field: 'tableName',
+            width: 120,
+            slots: {
+              default: 'table-tableName',
+            },
+          },
+          {
+            title: '{generator.views.formSetting.title.keyColumnName}',
+            field: 'keyColumnName',
+            width: 120,
+            slots: {
+              default: 'table-keyColumnName',
+            },
+          },
+          {
+            title: '{generator.views.formSetting.title.valueColumnName}',
+            field: 'valueColumnName',
+            width: 120,
+            slots: {
+              default: 'table-valueColumnName',
+            },
+          },
+          {
+            title: '{generator.views.formSetting.title.tableWhere}',
+            field: 'tableWhere',
+            minWidth: 180,
+            slots: {
+              default: 'table-tableWhere',
+            },
+          },
+          {
+            title: '{generator.views.code.table.remarks}',
+            field: 'remarks',
+            minWidth: 160,
+            align: 'left',
+            headerAlign: 'center',
+          },
+        ],
+      };
+    },
+  });
+</script>
+
+<style scoped></style>

src/modules/smart-code/views/codeDesign/componenets/TableFieldTable/TableFieldTable.vue

@@ -1,105 +1,24 @@
 <template>
   <div>
-    <vxe-grid
-      align="center"
-      stripe
-      v-bind="$attrs"
-      :size="tableSizeConfig"
-      border
-      :columns="columns"
-    >
-      <template #table-nullable="{ row }">
-        <a-switch :size="formSizeConfig" disabled :checked="row.nullable === 1" />
-      </template>
-      <template #table-primaryKey="{ row }">
-        <a-switch :size="formSizeConfig" disabled :checked="row.primaryKey" />
-      </template>
-      <template #table-indexed="{ row }">
-        <a-switch :size="formSizeConfig" disabled :checked="row.indexed" />
-      </template>
-    </vxe-grid>
+    <SmartTable v-bind="$attrs" @register="register" :size="tableSizeConfig" />
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
+<script lang="ts" setup>
   import { useSizeSetting } from '@/hooks/setting/UseSizeSetting';
+  import { SmartTable, useSmartTable } from '@/components/SmartTable';
 
-  /**
-   * 数据库字段信息
-   */
-  export default defineComponent({
-    name: 'TableFieldTable',
-    setup() {
-      const sizeConfigHoops = useSizeSetting();
-      return {
-        ...sizeConfigHoops,
-      };
-    },
-    data() {
-      return {
-        columns: [
-          {
-            field: 'columnName',
-            title: '{generator.views.tableField.title.columnName}',
-            width: 160,
-            align: 'left',
-            headerAlign: 'center',
-          },
-          {
-            field: 'typeName',
-            title: '{generator.views.tableField.title.typeName}',
-            width: 120,
-          },
-          {
-            field: 'columnSize',
-            title: '{generator.views.tableField.title.columnSize}',
-            width: 120,
-          },
-          {
-            field: 'decimalDigits',
-            title: '{generator.views.tableField.title.decimalDigits}',
-            width: 120,
-          },
-          {
-            field: 'columnDef',
-            title: '{generator.views.tableField.title.columnDef}',
-            width: 120,
-          },
-          {
-            field: 'nullable',
-            title: '{generator.views.tableField.title.nullable}',
-            width: 120,
-            slots: {
-              default: 'table-nullable',
-            },
-          },
-          {
-            field: 'remarks',
-            title: '{generator.views.tableField.title.remarks}',
-            minWidth: 120,
-            align: 'left',
-            headerAlign: 'center',
-          },
-          {
-            field: 'primaryKey',
-            title: '{generator.views.tableField.title.primaryKey}',
-            width: 120,
-            slots: {
-              default: 'table-primaryKey',
-            },
-          },
-          {
-            field: 'indexed',
-            title: '{generator.views.tableField.title.indexed}',
-            width: 120,
-            slots: {
-              default: 'table-indexed',
-            },
-          },
-        ],
-      };
+  import { getTableFiledColumns } from '../../CodeDesignPage.config';
+
+  const { tableSizeConfig } = useSizeSetting();
+
+  const [register] = useSmartTable({
+    columns: getTableFiledColumns(),
+    border: true,
+    align: 'center',
+    stripe: true,
+    rowConfig: {
+      isHover: true,
     },
   });
 </script>