编码配置

src/pages/sys/sn-config/SnConfig.vue

@@ -1,15 +1,13 @@
 <template>
-  <FormPage
-    ref="formPage"
-    :action-column="actionColumn"
-    :left-tools="leftTools"
-    :paging="searchHandler">
-    <template #searchFormItem="{searchForm}">
-      <ElFormItem label="规则名称">
-        <ElInput v-model="searchForm.snname" clearable placeholder="请输入规则名称"/>
+  <ATablePage
+    ref="tablePage"
+    v-bind="tablePageProps">
+    <template #simpleFormItem="formData">
+      <ElFormItem>
+        <ElInput v-model="formData.snname" clearable placeholder="请输入规则名称"/>
       </ElFormItem>
-      <ElFormItem label="规则代码">
-        <ElInput v-model="searchForm.sncode" clearable placeholder="请输入规则代码"/>
+      <ElFormItem>
+        <ElInput v-model="formData.sncode" clearable placeholder="请输入规则代码"/>
       </ElFormItem>
     </template>
     <template #columns>
@@ -27,29 +25,59 @@
       <ElTableColumn label="备注" prop="memo" width="200"/>
     </template>
     <SnConfigForm ref="snConfigForm" @close="research"/>
-  </FormPage>
+  </ATablePage>
 </template>
 
 <script lang="ts" setup>
 import SnConfigApi from '@/pages/sys/sn-config/sn-config-api.ts'
 import SnConfigForm from '@/pages/sys/sn-config/SnConfigForm.vue'
 import Strings from '@/common/utils/strings.ts'
-import FormPage from '@/components/page/FormPage.vue'
-import type {
-  ActionColumnType,
-  ToolType,
-} from '@/components/page/a-page-type.ts'
-import type { ComponentExposed } from 'vue-component-type-helpers'
+import ATablePage, {
+  type ATablePageInstance,
+  buildTablePageProps,
+} from '@/components/a-page/a-table-page/ATablePage.tsx'
+import { descConfig } from '@/pages/sys/sn-config/sn-config-util.ts'
 
 const snConfigFormIns = useTemplateRef<InstanceType<typeof SnConfigForm>>('snConfigForm')
-const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
+const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
 
-
-function searchHandler(param: SnConfigTypes.SearchSnConfigParam) {
-  return SnConfigApi.paging(param)
+function research() {
+  tablePageIns.value?.doSearch()
 }
 
-const actionColumn = reactive<ActionColumnType<SnConfigTypes.SnConfigDetail>>({
+const tablePageProps = buildTablePageProps<SnConfigTypes.SearchSnConfigParam, SnConfigTypes.SnConfigDetail>({
+  pageLayout: {
+    enableHighForm: false,
+  },
+  searchForm: {
+    paging(param) {
+      return SnConfigApi.paging(param)
+        .then((res) => {
+          res.data.records = res.data.records.map((it) => ({
+            key: it.id,
+            ...it,
+            configDesc: descConfig(it.config).join('\n'),
+          }))
+          return res
+        })
+    },
+    simpleForm: {
+      colCount: 2,
+    },
+  },
+  toolBar: {
+    leftTools: [
+      {
+        icon: 'Plus',
+        label: '新建',
+        action() {
+          snConfigFormIns.value?.open()
+        },
+      },
+    ],
+  },
+  table: {
+    actionColumn: {
       tableActions: [
         {
           tooltip: '编辑',
@@ -76,20 +104,9 @@ const actionColumn = reactive<ActionColumnType<SnConfigTypes.SnConfigDetail>>({
           },
         },
       ],
+    },
+  },
 })
-const leftTools: ToolType[] = [
-  {
-    icon: 'Plus',
-    label: '新建',
-    action() {
-      snConfigFormIns.value?.open()
-    },
-  },
-]
-
-function research() {
-  formPageIns.value?.doSearch()
-}
 
 
 </script>

src/pages/sys/sn-config/SnConfigForm.vue

@@ -12,6 +12,7 @@ import {
 } from '@/pages/sys/sn-config/contant.ts'
 import Colls from '@/common/utils/colls.ts'
 import { elIcons } from '@/common/element/element.ts'
+import ADialog from '@/components/a-dialog/ADialog.vue'
 
 defineOptions({name: 'SnConfigForm'})
 const emits = defineEmits([ 'close' ])
@@ -203,9 +204,9 @@ defineExpose({
 </script>
 
 <template>
-  <ElDialog v-model="visible"
+  <ADialog v-model:show="visible"
     :title="Strings.isBlank(snConfig.id) ? '新增编码配置' : '修改编码配置'" class="config-dialog" footer-class="panel-footer" width="950px"
-    @close="onCloseHandler">
+    :closed="onCloseHandler">
     <div class="config-panel">
       <div class="config-title">
         <div>
@@ -351,7 +352,7 @@ defineExpose({
         </template>
       </ElDropdown>
     </template>
-  </ElDialog>
+  </ADialog>
 </template>
 
 <style lang="stylus" scoped>