From b1abcf83d5d57a111f09535191937c7ffda93f3f Mon Sep 17 00:00:00 2001
From: lzq <2495532633@qq.com>
Date: Tue, 3 Mar 2026 16:25:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AD=97=E5=85=B8=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/a-drop-table/ADropTable.vue    |   1 +
 .../a-page/a-table-page/ATablePage.tsx        |  26 +-
 .../fin/expense-item/ExpenseItemForm.vue      |   2 +-
 src/pages/gds/goods/GoodsDropTable.vue        |   2 +
 src/pages/sys/dict/Dict.vue                   |  18 +-
 src/pages/sys/dict/DictCategory.vue           | 268 ++++++------------
 src/pages/sys/dict/DictForm.vue               | 146 +++++-----
 src/pages/sys/dict/DictItem.vue               | 266 +++++++----------
 src/pages/sys/dict/DictItemForm.vue           | 179 ++++++------
 9 files changed, 373 insertions(+), 535 deletions(-)

diff --git a/src/components/a-drop-table/ADropTable.vue b/src/components/a-drop-table/ADropTable.vue
index 007cdd3..712ac38 100644
--- a/src/components/a-drop-table/ADropTable.vue
+++ b/src/components/a-drop-table/ADropTable.vue
@@ -225,6 +225,7 @@ const displayData = computed(() => {
 <style lang="stylus" scoped>
 .drop-table {
   width 100%;
+  display inline-block
 }
 
 .clear-btn {
diff --git a/src/components/a-page/a-table-page/ATablePage.tsx b/src/components/a-page/a-table-page/ATablePage.tsx
index ccc4c8b..e76e80c 100644
--- a/src/components/a-page/a-table-page/ATablePage.tsx
+++ b/src/components/a-page/a-table-page/ATablePage.tsx
@@ -55,7 +55,7 @@ interface TableActionType<T> {
   tooltip: string | ((data: ColumnScopeType<T>) => string)
   loading?: boolean
   show?: (data: ColumnScopeType<T>) => boolean
-  action: (data: ColumnScopeType<T>) => Promise<boolean> | void
+  action?: (data: ColumnScopeType<T>) => Promise<boolean> | void
   confirm?: {
     title: string | ((data: ColumnScopeType<T>) => string)
     width?: string
@@ -81,6 +81,7 @@ interface ToolType {
   type?: 'text' | 'default' | 'primary' | 'success' | 'warning' | 'info' | 'danger'
   label?: string
   action: () => void
+  disabled: boolean
 }
 
 interface ToolBarType {
@@ -94,6 +95,7 @@ interface TablePropsType<T extends DefaultRow, F extends object> extends Omit<Ta
    * 操作列配置
    */
   actionColumn: ActionColumnType<T>
+  rowClickHandle?: (row: T) => void
 }
 
 interface FormPropsType<P, T extends DefaultRow> {
@@ -103,6 +105,7 @@ interface FormPropsType<P, T extends DefaultRow> {
    */
   paging: (param: P) => Promise<R<G.PageResult<T>>>
   list?: (param: P) => Promise<R<T[]>>
+  resetForm?: (param?: P) => P | null | undefined
   /**
    * 导出函数
    * @param param 查询条件
@@ -289,9 +292,12 @@ function buildToolBar(toolBar: DeepPartial<ToolBarType> = {}) {
     if (leftTool.type == null) {
       leftTool.type = 'primary'
     }
+    if (leftTool.disabled == null) leftTool.disabled = false
   }
   if (toolBar.rightTools == null) toolBar.rightTools = []
-
+  for (let rightTool of toolBar.rightTools) {
+    if (rightTool.disabled == null) rightTool.disabled = false
+  }
   return toolBar
 }
 
@@ -342,7 +348,7 @@ const component = defineComponent(
         return
       }
     }
-    expose({doSearch, tableData})
+    expose({doSearch, tableData, formData})
     const showHighFormHandle = () => {
       showHighForm.value = !showHighForm.value
       formData.$reset()
@@ -361,7 +367,7 @@ const component = defineComponent(
       if (action.loading != null) {
         action.loading = true
       }
-      const result = action.action(data)
+      const result = action.action?.(data)
       if (result instanceof Promise) {
         result
           .then(reload => {
@@ -378,7 +384,9 @@ const component = defineComponent(
     }
 
     function doReset() {
-      formData.$reset()
+      const resetFormData = props.searchForm.resetForm?.()
+      if (resetFormData == null) formData.$reset()
+      else formData.$reset(resetFormData as any)
       doSearch()
     }
 
@@ -567,6 +575,7 @@ const component = defineComponent(
             {
               props.toolBar.leftTools.map((tool, i) => (
                 <ElButton key={'tool-bar-left-' + i}
+                  disabled={tool.disabled}
                   icon={Strings.isBlank(tool.icon) ? undefined : elIcons[tool.icon!]}
                   type={tool.type}
                   onClick={tool.action}>
@@ -604,6 +613,7 @@ const component = defineComponent(
                 props.toolBar.rightTools.map((tool, i) => (
                   <ElButton key={'tool-bar-right-' + i}
                     icon={elIcons[tool.icon]}
+                    disabled={tool.disabled}
                     onClick={tool.action}/>
                 ))
               }
@@ -636,6 +646,9 @@ const component = defineComponent(
             onSort-change={sortChangeHandler}
             summary-method={props.table.summaryMethod}
             show-summary={props.table.summaryMethod != null}
+            highlightCurrentRow={props.table.highlightCurrentRow}
+            currentRowKey={props.table.currentRowKey}
+            onRow-click={props.table.rowClickHandle}
           >
             {
               slots.columns?.()
@@ -669,9 +682,10 @@ const component = defineComponent(
   },
 )
 
-export interface ATablePageInstance<T extends DefaultRow = DefaultRow> extends InstanceType<typeof component> {
+export interface ATablePageInstance<P extends G.PageParam = any, T extends DefaultRow = DefaultRow> extends InstanceType<typeof component> {
   doSearch: () => void
   tableData: T[]
+  formData: ResetAble<P>
 }
 
 export default component
diff --git a/src/pages/fin/expense-item/ExpenseItemForm.vue b/src/pages/fin/expense-item/ExpenseItemForm.vue
index df75764..983c656 100644
--- a/src/pages/fin/expense-item/ExpenseItemForm.vue
+++ b/src/pages/fin/expense-item/ExpenseItemForm.vue
@@ -15,7 +15,7 @@
         </ElFormItem>
 
         <ElFormItem v-if="formData.expenseItemCategory === 'ChanPin'" label="产品" prop="goodsId">
-          <GoodsDropTable v-model="formData.goodsId"/>
+          <GoodsDropTable v-model="formData.goodsId" :placeholder="formData.goodsName"/>
         </ElFormItem>
         <ElFormItem v-else label="项目名称" prop="expenseItemName">
           <ElInput v-model="formData.expenseItemName" placeholder="项目名称"/>
diff --git a/src/pages/gds/goods/GoodsDropTable.vue b/src/pages/gds/goods/GoodsDropTable.vue
index 6c8399a..cc19c40 100644
--- a/src/pages/gds/goods/GoodsDropTable.vue
+++ b/src/pages/gds/goods/GoodsDropTable.vue
@@ -5,6 +5,7 @@ import { bizType } from '@/pages/gds/goods-category/constants.ts'
 
 const props = defineProps<{
   defaultBizType?: typeof bizType[number]['val']
+  placeholder?: string
 }>()
 
 const model = defineModel<string | undefined | null>()
@@ -29,5 +30,6 @@ const dropTableLoader = (param: GoodsTypes.SearchGoodsParam) => {
   <ADropTable v-model="model"
     :columns="dropTableColumns"
     :loader="dropTableLoader"
+    :placeholder="placeholder"
     display-field="goodsName"/>
 </template>
diff --git a/src/pages/sys/dict/Dict.vue b/src/pages/sys/dict/Dict.vue
index ac0feed..49d5383 100644
--- a/src/pages/sys/dict/Dict.vue
+++ b/src/pages/sys/dict/Dict.vue
@@ -1,10 +1,7 @@
 <template>
-  <APage>
-    <div class="dict-page">
-      <DictCategory @search-dict="searchDict"/>
-      <ElDivider direction="vertical"/>
-      <DictItem ref="dictItem"/>
-    </div>
+  <APage class="dict-page">
+    <DictCategory :current-dict @search-dict="searchDict"/>
+    <DictItem ref="dictItem"/>
   </APage>
 </template>
 <script lang="ts" setup>
@@ -13,8 +10,10 @@ import DictCategory from '@/pages/sys/dict/DictCategory.vue'
 import DictItem from '@/pages/sys/dict/DictItem.vue'
 
 const dictItemIns = useTemplateRef<InstanceType<typeof DictItem>>('dictItem')
+const currentDict = ref<string | undefined>(undefined)
 
 function searchDict(data: DictTypes.SearchDictResult) {
+  currentDict.value = data.id
   dictItemIns.value?.reload(data)
 }
 
@@ -24,15 +23,10 @@ function searchDict(data: DictTypes.SearchDictResult) {
   display flex
   justify-content space-between
   flex-direction: row;
-  gap: 50px;
 
-  & > div:not(:nth-child(2)) {
+  & > div {
     width 50%
     box-sizing border-box
   }
-
-  & > div:nth-child(2) {
-    height: 100%;
-  }
 }
 </style>
diff --git a/src/pages/sys/dict/DictCategory.vue b/src/pages/sys/dict/DictCategory.vue
index 6979028..30e5aed 100644
--- a/src/pages/sys/dict/DictCategory.vue
+++ b/src/pages/sys/dict/DictCategory.vue
@@ -1,193 +1,109 @@
 <template>
-  <div>
-    <div class="tool-bar">
-      <ElForm inline @submit.prevent="paging">
-        <ElFormItem>
-          <ElInput
-            v-model="searchForm.dictName"
-            clearable
-            placeholder="请输入要搜索的文字"
-            @clear="reset"/>
-        </ElFormItem>
-        <ElFormItem>
-          <ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
-          <ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
-        </ElFormItem>
-      </ElForm>
-    </div>
-    <ElTable v-loading="searching" :data="tableData"
-      cell-class-name="table-cell"
-      class="table-list"
-      empty-text="暂无数据"
-      header-row-class-name="table-header"
-      row-key="id">
+  <ATablePage
+    ref="tablePage"
+    v-bind="tablePageProps">
+    <template #simpleFormItem="formData">
+      <ElFormItem>
+        <ElInput
+          v-model="formData.dictName"
+          clearable
+          placeholder="请输入要搜索的文字"
+          @clear="research"/>
+      </ElFormItem>
+    </template>
+    <template #columns>
       <ElTableColumn label="字典标识" prop="dictKey" width="180"/>
 
       <ElTableColumn label="字典名称" prop="dictName"/>
 
-      <ElTableColumn label="备注" prop="memo"/>
-
-      <ElTableColumn label="操作" width="180">
-        <template #default="scope">
-          <div class="action-btn">
-            <ElPopconfirm
-              cancel-button-text="否"
-              cancel-button-type="primary"
-              confirm-button-text="是"
-              confirm-button-type="danger"
-              placement="top"
-              title="是否删除当前数据?"
-              width="180"
-              @confirm="delHandler(scope)">
-              <template #reference>
-                <ElButton :loading="deling" text type="danger">删除</ElButton>
-              </template>
-            </ElPopconfirm>
-            <ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton>
-            <ElButton text type="primary" @click="selectDictHandle(scope)">字典项</ElButton>
-          </div>
-        </template>
-      </ElTableColumn>
-    </ElTable>
-    <ElPagination
-      v-model:current-page="searchForm.current"
-      v-model:page-size="searchForm.size"
-      :hide-on-single-page="false"
-      :page-sizes="[10, 20, 50, 100, 500]"
-      :teleported="false"
-      :total="totalCount"
-      background layout="total, prev, pager, next, sizes, jumper"
-      @change="paging"/>
-    <DictForm ref="dictForm" @edit-succ="paging"/>
-  </div>
+      <!-- <ElTableColumn label="备注" prop="memo"/> -->
+    </template>
+    <DictForm ref="dictForm" :research="research"/>
+  </ATablePage>
 </template>
 <script lang="ts" setup>
 import DictApi from '@/pages/sys/dict/dict-api.ts'
-import { elIcons } from '@/common/element/element.ts'
 import DictForm from '@/pages/sys/dict/DictForm.vue'
+import ATablePage, {
+  type ATablePageInstance,
+  buildTablePageProps,
+} from '@/components/a-page/a-table-page/ATablePage.tsx'
 
-const totalCount = ref(0)
-const tableData = ref<DictTypes.SearchDictResult[]>([])
-const searchForm = ref<DictTypes.SearchDictParam>({
-  orders: 'dict_key,id',
-  current: 1,
-  size: 20,
-})
-const searching = ref(false)
-const deling = ref(false)
-const dictFormIns = useTemplateRef<InstanceType<typeof DictForm>>('dictForm')
-
-function showDialog(data?: DictTypes.SearchDictResult) {
-  dictFormIns.value?.open(data)
-}
-
-function delHandler({row}: { row: DictTypes.SearchDictResult }) {
-  deling.value = true
-  DictApi.del([ row.id! ])
-    .then(() => {
-      ElMessage.success('删除成功')
-      paging()
-    })
-    .finally(() => {
-      deling.value = false
-    })
-}
-
-function modifyHandler({row}: { row: DictTypes.SearchDictResult }) {
-  showDialog(row)
-}
-
-function addHandler() {
-  showDialog()
-}
-
+const props = defineProps<{
+  currentDict?: string
+}>()
 const emits = defineEmits([ 'searchDict' ])
+const dictFormIns = useTemplateRef<InstanceType<typeof DictForm>>('dictForm')
+const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
 
-function selectDictHandle({row}: { row: DictTypes.SearchDictResult }) {
-  emits('searchDict', row)
+function research() {
+  tablePageIns.value?.doSearch()
 }
 
-function reset() {
-  searchForm.value = {
-    orders: 'dict_key,id',
-    current: 1,
-    size: 20,
+const tablePageProps = buildTablePageProps<DictTypes.SearchDictParam, DictTypes.SearchDictResult>({
+  pageLayout: {
+    enableHighForm: false,
+  },
+  searchForm: {
+    paging: DictApi.paging,
+  },
+  toolBar: {
+    leftTools: [
+      {
+        icon: 'Plus',
+        label: '新建',
+        action() {
+          dictFormIns.value?.open()
+        },
+      },
+    ],
+  },
+  table: {
+    highlightCurrentRow: true,
+    actionColumn: {
+      tableActions: [
+        {
+          tooltip: '字典项',
+          icon: 'Postcard',
+          type: 'primary',
+          action() {
+            // emits('searchDict', row)
+          },
+        },
+        {
+          tooltip: '编辑',
+          icon: 'Edit',
+          type: 'success',
+          action({row}) {
+            dictFormIns.value?.open(row)
+          },
+        },
+        {
+          icon: 'Delete',
+          loading: false,
+          type: 'danger',
+          tooltip: '删除',
+          confirm: {
+            title: '是否删除当前数据',
+          },
+          action({row}) {
+            return DictApi.del([ row.id! ])
+              .then(() => {
+                ElMessage.success('删除成功')
+                return true
+              })
+          },
+        },
+      ],
+    },
+    rowClickHandle(row) {
+      emits('searchDict', row)
+    },
+  },
+})
+watchEffect(() => {
+  if (props.currentDict != null) {
+    tablePageProps.table.currentRowKey = props.currentDict
   }
-  paging()
-}
-
-function paging() {
-  searching.value = true
-  DictApi.paging(searchForm.value)
-    .then(res => {
-      totalCount.value = res.data?.total ?? 0
-      tableData.value = res.data?.records ?? []
-    })
-    .finally(() => {
-      searching.value = false
-    })
-}
-
-onMounted(() => {
-  paging()
 })
 </script>
-<style lang="stylus" scoped>
-.table-list {
-  flex 1;
-  margin 0 0 20px 0
-  width 100%
-
-  :deep(.table-header) {
-    color #454C59
-
-    th {
-      background-color #EDF1F7
-      font-weight 500
-      position relative
-
-      & > div {
-        display flex
-        gap 5px
-        align-items center
-      }
-
-      &:not(:first-child) > div::before {
-        position: absolute;
-        top: 50%;
-        left: 1px;
-        width: 1px;
-        background-color: #D3D7DE;
-        transform: translateY(-50%);
-        content: "";
-        height 50%
-      }
-    }
-  }
-
-  :deep(.table-cell) {
-    color #2F3540
-  }
-
-  .action-btn {
-    width 100%
-    display flex
-    flex-wrap wrap
-
-    & > button {
-      margin 0
-    }
-  }
-}
-
-.tool-bar {
-  display flex
-  justify-content space-between
-  margin 0 0 20px 0
-}
-
-.pagination {
-  justify-content: end;
-  margin: 8px;
-}
-</style>
diff --git a/src/pages/sys/dict/DictForm.vue b/src/pages/sys/dict/DictForm.vue
index 8fd0db6..8f0990c 100644
--- a/src/pages/sys/dict/DictForm.vue
+++ b/src/pages/sys/dict/DictForm.vue
@@ -1,93 +1,81 @@
 <template>
-  <ElDialog v-model="showDialog"
-    :close-on-click-modal="false"
-    destroy-on-close
-    @close="dialogCloseHandler"
-    width="25vw">
-    <ElForm :model="dictFormData"
-      class="sys_dict-form"
-    >
-      <ElFormItem label="字典标识">
-        <ElInput
-          v-model="dictFormData.dictKey"
-          placeholder="字典标识"/>
-      </ElFormItem>
-      <ElFormItem label="字典名称">
-        <ElInput
-          v-model="dictFormData.dictName"
-          placeholder="字典名称"/>
-      </ElFormItem>
-      <ElFormItem label="备注">
-        <ElInput
-          v-model="dictFormData.memo"
-          placeholder="备注"/>
-      </ElFormItem>
-    </ElForm>
-    <template #footer>
-      <ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
-      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
+  <AFormPanel
+    ref="formPanel"
+    v-bind="formPanelProps">
+    <template #default="formData">
+      <div class="form-items">
+        <ElFormItem label="字典标识" prop="dictKey">
+          <ElInput
+            v-model="formData.dictKey"
+            placeholder="字典标识"/>
+        </ElFormItem>
+        <ElFormItem label="字典名称" prop="dictName">
+          <ElInput
+            v-model="formData.dictName"
+            placeholder="字典名称"/>
+        </ElFormItem>
+        <ElFormItem label="备注">
+          <ElInput
+            v-model="formData.memo"
+            placeholder="备注"/>
+        </ElFormItem>
+      </div>
     </template>
-  </ElDialog>
+  </AFormPanel>
 </template>
 <script lang="ts" setup>
 import DictApi from '@/pages/sys/dict/dict-api.ts'
 import Strings from '@/common/utils/strings.ts'
-import { ElMessage } from 'element-plus'
+import AFormPanel, {
+  type AFormPanelInstance,
+  buildFormPanelProps,
+} from '@/components/a-form-panel/AFormPanel.tsx'
 
-const emits = defineEmits([ 'editSucc' ])
-const showDialog = ref(false)
-const submiting = ref(false)
-const status = ref<'add' | 'view' | 'modify'>('add')
-const dictFormData = ref<DictTypes.SearchDictResult>({})
-
-function dialogCloseHandler() {
-  dictFormData.value = {}
-}
-
-function submitHandler() {
-  if (status.value === 'view') return
-  submiting.value = true
-  if (dictFormData.value.id != null) {
-    DictApi.modify(dictFormData.value)
-      .then(() => {
-        ElMessage.success('修改成功')
-        emits('editSucc')
-        showDialog.value = false
-      })
-      .finally(() => {
-        submiting.value = false
-      })
-  } else {
-    DictApi.add(dictFormData.value)
-      .then(() => {
-        ElMessage.success('添加成功')
-        emits('editSucc')
-        showDialog.value = false
-      })
-      .finally(() => {
-        submiting.value = false
-      })
-  }
-}
-
-defineExpose({
-  open(data: DictTypes.SearchDictResult = {}) {
-    showDialog.value = true
-    if (!Strings.isBlank(data.id)) {
-      status.value = 'modify'
-      DictApi.detail(data.id!)
-        .then(res => {
-          dictFormData.value = res.data
-        })
-    } else {
+const props = withDefaults(defineProps<{
+  research?: () => void
+}>(), {
+  research: () => {
+  },
+})
+const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
+const status = ref<'add' | 'modify'>('add')
+const formPanelProps = buildFormPanelProps<DictTypes.SearchDictResult>({
+  detailsLoader(id?: string) {
+    if (Strings.isBlank(id)) {
       status.value = 'add'
-      dictFormData.value = data
+      return Promise.resolve({})
+    } else {
+      status.value = 'modify'
+      return DictApi
+        .detail(id!)
+        .then((res) => {
+          return res.data
+        })
     }
   },
+  doSubmit(data) {
+    if (status.value === 'add') {
+      return DictApi.add(data)
+        .then(props.research)
+    } else {
+      return DictApi.modify(data)
+        .then(props.research)
+    }
+  },
+  rules: {
+    dictName: [ {required: true, message: '请填写字典名称', trigger: 'blur'} ],
+    dictKey: [ {required: true, message: '请填写字典标识', trigger: 'blur'} ],
+  },
+})
+watchEffect(() => {
+  formPanelProps.title = status.value === 'add' ? '新建字典分类' : '修改字典分类'
+})
+defineExpose({
+  open(data?: DictTypes.SearchDictResult) {
+    formPanelIns.value?.open(data?.id)
+  },
 })
 </script>
 <style lang="stylus" scoped>
-.sys_dict-form {
-  padding 20px
-}
+
 </style>
diff --git a/src/pages/sys/dict/DictItem.vue b/src/pages/sys/dict/DictItem.vue
index 031af1b..7c23217 100644
--- a/src/pages/sys/dict/DictItem.vue
+++ b/src/pages/sys/dict/DictItem.vue
@@ -1,35 +1,24 @@
 <template>
-  <div>
-    <div class="tool-bar">
-      <ElForm inline @submit.prevent="paging">
-        <ElFormItem>
-          <ElInput
-            v-model="searchForm.dictKey"
-            placeholder="请选择左侧的字典"
-            readonly/>
-        </ElFormItem>
-        <ElFormItem>
-          <ElInput
-            v-model="searchForm.txt"
-            clearable
-            placeholder="请输入要搜索的文字"
-            @clear="reset"/>
-        </ElFormItem>
-        <ElFormItem>
-          <ElButton :disabled="Strings.isBlank(currentDict.dictKey)" :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
-          <ElButton :disabled="Strings.isBlank(currentDict.dictKey)" :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
-        </ElFormItem>
-      </ElForm>
-    </div>
-    <ElTable v-loading="searching" :data="tableData"
-      cell-class-name="table-cell"
-      class="table-list"
-      empty-text="暂无数据"
-      header-row-class-name="table-header"
-      row-key="id">
-      <!-- <ElTableColumn label="字典 Id" prop="dictId"/> -->
-
-      <ElTableColumn label="字典标识" prop="dictKey" width="180"/>
+  <ATablePage
+    ref="tablePage"
+    v-bind="tablePageProps">
+    <template #simpleFormItem="formData">
+      <ElFormItem>
+        <ElInput
+          v-model="formData.dictKey"
+          placeholder="请选择左侧的字典"
+          readonly/>
+      </ElFormItem>
+      <ElFormItem>
+        <ElInput
+          v-model="formData.txt"
+          clearable
+          placeholder="请输入要搜索的文字"
+          @clear="research"/>
+      </ElFormItem>
+    </template>
+    <template #columns>
+      <!-- <ElTableColumn label="字典标识" prop="dictKey" width="180"/> -->
 
       <ElTableColumn label="值" prop="val"/>
 
@@ -37,155 +26,104 @@
 
       <ElTableColumn label="排序" prop="sort"/>
 
-      <ElTableColumn label="备注" prop="memo"/>
-
-      <ElTableColumn label="操作" width="180">
-        <template #default="scope">
-          <div class="action-btn">
-            <ElPopconfirm
-              cancel-button-text="否"
-              cancel-button-type="primary"
-              confirm-button-text="是"
-              confirm-button-type="danger"
-              placement="top"
-              title="是否删除当前数据?"
-              width="180"
-              @confirm="delHandler(scope)">
-              <template #reference>
-                <ElButton :loading="deling" text type="danger">删除</ElButton>
-              </template>
-            </ElPopconfirm>
-            <ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton>
-          </div>
-        </template>
-      </ElTableColumn>
-    </ElTable>
-    <DictItemForm ref="dictItemForm" @edit-succ="paging"/>
-  </div>
+      <!-- <ElTableColumn label="备注" prop="memo"/> -->
+    </template>
+    <DictItemForm ref="dictItemForm" :dict-id="currentDict.id" :dict-key="currentDict.dictKey" :research="research"/>
+  </ATablePage>
 </template>
 <script lang="ts" setup>
 import DictApi from '@/pages/sys/dict/dict-api.ts'
 import DictItemApi from '@/pages/sys/dict/dict-item-api.ts'
-import { elIcons } from '@/common/element/element.ts'
 import DictItemForm from '@/pages/sys/dict/DictItemForm.vue'
-import Strings from '@/common/utils/strings.ts'
+import ATablePage, {
+  type ATablePageInstance,
+  buildTablePageProps,
+} from '@/components/a-page/a-table-page/ATablePage.tsx'
 
-const tableData = ref<DictItemTypes.SearchDictItemResult[]>([])
-const searchForm = reactive<DictItemTypes.SearchDictItemParam>({
-  current: 1,
-  size: 20,
-})
-const searching = ref(false)
-const deling = ref(false)
-const currentDict = reactive<DictTypes.SearchDictResult>({})
 const dictItemFormIns = useTemplateRef<InstanceType<typeof DictItemForm>>('dictItemForm')
+const tablePageIns = useTemplateRef<ATablePageInstance<DictItemTypes.SearchDictItemParam, DictItemTypes.SearchDictItemResult>>('tablePage')
+const currentDict = reactive<DictTypes.SearchDictResult>({})
 
-function showDialog(data?: any) {
-  dictItemFormIns.value?.open(data)
+function research() {
+  tablePageIns.value?.doSearch()
 }
 
-function delHandler({row}: { row: DictItemTypes.SearchDictItemResult }) {
-  deling.value = true
-  DictItemApi.del([ row.id! ])
-    .then(() => {
-      ElMessage.success('删除成功')
-      paging()
-    })
-    .finally(() => {
-      deling.value = false
-    })
-}
+const tablePageProps = buildTablePageProps<DictItemTypes.SearchDictItemParam, DictItemTypes.SearchDictItemResult>({
+  pageLayout: {
+    enableHighForm: false,
+  },
+  searchForm: {
+    list(param) {
+      if (currentDict.dictKey == null) {
+        return Promise.resolve({
+          code: 0, msg: '',
+          message: '',
+          success: false,
+          data: [],
+        })
+      }
+      return DictApi.obtainDictData({...param, dictKey: currentDict.dictKey})
+    },
+    resetForm() {
+      return {dictId: currentDict.id, dictKey: currentDict.dictKey}
+    },
+    simpleForm: {
+      colCount: 2,
+    },
+  },
+  toolBar: {
+    leftTools: [
+      {
+        icon: 'Plus',
+        label: '新建',
+        action() {
+          dictItemFormIns.value?.open({dictId: currentDict.id, dictKey: currentDict.dictKey})
+        },
+      },
+    ],
+  },
+  table: {
+    actionColumn: {
+      tableActions: [
+        {
+          tooltip: '编辑',
+          icon: 'Edit',
+          type: 'success',
+          action({row}) {
+            dictItemFormIns.value?.open(row)
+          },
+        },
+        {
+          icon: 'Delete',
+          loading: false,
+          type: 'danger',
+          tooltip: '删除',
+          confirm: {
+            title: '是否删除当前数据',
+          },
+          action({row}) {
+            return DictItemApi.del([ row.id! ])
+              .then(() => {
+                ElMessage.success('删除成功')
+                return true
+              })
+          },
+        },
+      ],
+    },
+  },
 
-function modifyHandler({row}: { row: DictItemTypes.SearchDictItemResult }) {
-  showDialog(row)
-}
+})
 
-function addHandler() {
-  if (Strings.isBlank(searchForm.dictKey)) {
-    ElMessage.error('请选择左侧的字典')
-    return
-  }
-  showDialog({dictId: currentDict.id, dictKey: currentDict.dictKey})
-}
-
-function reset() {
-  searchForm.txt = ''
-  paging()
-}
-
-function paging() {
-  if (Strings.isBlank(searchForm.dictKey)) {
-    ElMessage.error('请选择左侧的字典')
-    return
-  }
-  searching.value = true
-  DictApi.obtainDictData(searchForm)
-    .then(res => {
-      tableData.value = res.data ?? []
-    })
-    .finally(() => {
-      searching.value = false
-    })
-}
+watchEffect(() => {
+  tablePageProps.toolBar.leftTools![0].disabled = currentDict.dictKey == null
+})
 
 defineExpose({
   reload(data: DictTypes.SearchDictResult) {
-    searchForm.dictKey = data.dictKey
     Object.assign(currentDict, data)
-    paging()
+    tablePageIns.value?.formData.$reset({dictId: currentDict.id, dictKey: currentDict.dictKey})
+    research()
   },
 })
 </script>
-<style lang="stylus" scoped>
-.table-list {
-  flex 1;
-  width 100%
-
-  :deep(.table-header) {
-    color #454C59
-
-    th {
-      background-color #EDF1F7
-      font-weight 500
-      position relative
-
-      & > div {
-        display flex
-        gap 5px
-        align-items center
-      }
-
-      &:not(:first-child) > div::before {
-        position: absolute;
-        top: 50%;
-        left: 1px;
-        width: 1px;
-        background-color: #D3D7DE;
-        transform: translateY(-50%);
-        content: "";
-        height 50%
-      }
-    }
-  }
-
-  :deep(.table-cell) {
-    color #2F3540
-  }
-
-  .action-btn {
-    width 100%
-    display flex
-    flex-wrap wrap
-
-    & > button {
-      margin 0
-    }
-  }
-}
-
-.tool-bar {
-  display flex
-  justify-content space-between
-  margin 0 0 20px 0
-}
-</style>
diff --git a/src/pages/sys/dict/DictItemForm.vue b/src/pages/sys/dict/DictItemForm.vue
index 4585acc..c501c27 100644
--- a/src/pages/sys/dict/DictItemForm.vue
+++ b/src/pages/sys/dict/DictItemForm.vue
@@ -1,110 +1,95 @@
 <template>
-  <ElDialog v-model="showDialog"
-    :close-on-click-modal="false"
-    destroy-on-close
-    @close="dialogCloseHandler"
-    width="25vw">
-    <ElForm :model="dictItemFormData"
-      class="sys_dict_item-form"
-    >
-      <ElFormItem label="值">
-        <ElInput
-          v-model="dictItemFormData.val"
-
-          placeholder="值"/>
-      </ElFormItem>
-      <ElFormItem label="文本">
-        <ElInput
-          v-model="dictItemFormData.txt"
-
-          placeholder="文本"/>
-      </ElFormItem>
-      <ElFormItem label="排序">
-        <ElInputNumber
-          v-model="dictItemFormData.sort"
-
-          :min="1"
-          placeholder="排序"
-          style="width: 100%"/>
-      </ElFormItem>
-      <ElFormItem label="备注">
-        <ElInput
-          v-model="dictItemFormData.memo"
-
-          placeholder="备注"/>
-      </ElFormItem>
-    </ElForm>
-    <template #footer>
-      <ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
-      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
+  <AFormPanel
+    ref="formPanel"
+    v-bind="formPanelProps">
+    <template #default="formData">
+      <div class="form-items">
+        <ElFormItem label="值" prop="val">
+          <ElInput
+            v-model="formData.val"
+            placeholder="值"/>
+        </ElFormItem>
+        <ElFormItem label="文本" prop="txt">
+          <ElInput
+            v-model="formData.txt"
+            placeholder="文本"/>
+        </ElFormItem>
+        <ElFormItem label="排序" prop="sort">
+          <ElInputNumber
+            v-model="formData.sort"
+            :min="1"
+            placeholder="排序"
+            style="width: 100%"/>
+        </ElFormItem>
+        <!-- <ElFormItem label="备注">
+          <ElInput
+            v-model="formData.memo"
+            placeholder="备注"/>
+        </ElFormItem> -->
+      </div>
     </template>
-  </ElDialog>
+  </AFormPanel>
 </template>
 <script lang="ts" setup>
 import DictItemApi from '@/pages/sys/dict/dict-item-api.ts'
 import Strings from '@/common/utils/strings.ts'
 import { ElMessage } from 'element-plus'
+import AFormPanel, {
+  type AFormPanelInstance,
+  buildFormPanelProps,
+} from '@/components/a-form-panel/AFormPanel.tsx'
 
-const emits = defineEmits([ 'editSucc' ])
-const showDialog = ref(false)
-const submiting = ref(false)
-const status = ref<'add' | 'view' | 'modify'>('add')
-// const dictItemFormData = ref<DictItemTypes.SearchDictItemResult>({})
-const dictItemFormData = ref<any>({})
-
-function dialogCloseHandler() {
-  dictItemFormData.value = {}
-}
-
-function submitHandler() {
-  if (status.value === 'view') return
-  submiting.value = true
-  if (dictItemFormData.value.id != null) {
-    DictItemApi.modify(dictItemFormData.value)
-      .then(() => {
-        ElMessage.success('修改成功')
-        emits('editSucc')
-        showDialog.value = false
-      })
-      .finally(() => {
-        submiting.value = false
-      })
-  } else {
-    if (Strings.isBlank(dictItemFormData.value.dictId) || Strings.isBlank(dictItemFormData.value.dictKey)) {
-      ElMessage.error('未指定字典')
-      return
-    }
-    DictItemApi.add(dictItemFormData.value)
-      .then(() => {
-        ElMessage.success('添加成功')
-        emits('editSucc')
-        showDialog.value = false
-      })
-      .finally(() => {
-        submiting.value = false
-      })
-  }
-}
-
-defineExpose({
-  // open(data: DictItemTypes.SearchDictItemResult = {}) {
-  open(data: any = {}) {
-    showDialog.value = true
-    if (!Strings.isBlank(data.id)) {
-      status.value = 'modify'
-      DictItemApi.detail(data.id!)
-        .then(res => {
-          dictItemFormData.value = res.data
-        })
-    } else {
+const props = withDefaults(defineProps<{
+  research?: () => void
+  // 字典 Id
+  dictId?: string
+  // 字典标识
+  dictKey?: string
+}>(), {
+  research: () => {
+  },
+})
+const status = ref<'add' | 'modify'>('add')
+const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
+const formPanelProps = buildFormPanelProps<DictItemTypes.SearchDictItemResult>({
+  detailsLoader(id?: string) {
+    if (Strings.isBlank(id)) {
       status.value = 'add'
-      dictItemFormData.value = data
+      return Promise.resolve()
+    } else {
+      status.value = 'modify'
+      return DictItemApi
+        .detail(id!)
+        .then((res) => {
+          return res.data
+        })
     }
   },
+  doSubmit(data) {
+    if (status.value === 'add') {
+      if (Strings.isBlank(props.dictId) || Strings.isBlank(props.dictKey)) {
+        ElMessage.error('未指定字典')
+        return Promise.reject()
+      }
+      return DictItemApi.add({...data, dictKey: props.dictKey, dictId: props.dictId})
+        .then(props.research)
+    } else {
+      return DictItemApi.modify(data)
+        .then(props.research)
+    }
+  },
+  rules: {
+    val: [ {required: true, message: '请填写值', trigger: 'blur'} ],
+    txt: [ {required: true, message: '请填写文本', trigger: 'blur'} ],
+    sort: [ {required: true, message: '请填写排序', trigger: 'blur'} ],
+  },
+})
+watchEffect(() => {
+  formPanelProps.title = status.value === 'add' ? '新建字典项' : '修改字典项'
+})
+defineExpose({
+  open(data: any = {}) {
+    formPanelIns.value?.open(data?.id)
+  },
 })
 </script>
-<style lang="stylus" scoped>
-.sys_dict_item-form {
-  padding 20px
-}
-</style>