From 3e9b34e0fdb8a4ad5485be0ad7cd0286c6c60373 Mon Sep 17 00:00:00 2001
From: wuweihua <wuweihua@lionquexpress.com>
Date: Fri, 28 Aug 2026 11:35:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B0=81=E8=A3=85=E5=85=AC=E5=85=B1?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95/=E8=A1=A8=E6=A0=BC=E7=BB=84=E4=BB=B6=20Basic?=
 =?UTF-8?q?Form/BasicTable=EF=BC=8C=E5=B9=B6=E6=9B=BF=E6=8D=A2=E4=B8=9A?=
 =?UTF-8?q?=E5=8A=A1=E9=A1=B5=E9=9D=A2=E8=A1=A8=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 BasicForm 配置驱动表单组件，支持多种控件、字典自动加载、校验、插槽扩展
- 新增 BasicTable 公共表格组件，集成搜索栏+工具栏+表格+分页，基于 columns/searchColumns 配置驱动
- 替换 18 个业务页面 el-table 为 BasicTable（post/user/role/dict/config/notice/job/log/logininfor/operlog/online/gen 等）
- 全局注册 BasicForm、BasicTable 组件
- 项目标题由若依管理系统改为 BMS
---
 .env.development                         |    4 +-
 .env.production                          |    4 +-
 .env.staging                             |    4 +-
 package.json                             |    2 +-
 src/components/BasicForm/FormControl.vue |  182 ++++
 src/components/BasicForm/index.vue       |  234 +++++
 src/components/BasicTable/index.vue      |  440 +++++++++
 src/main.js                              |    6 +
 src/views/index.vue                      |    2 +-
 src/views/monitor/job/index.vue          |  796 ++++++++--------
 src/views/monitor/job/log.vue            |  409 ++++-----
 src/views/monitor/logininfor/index.vue   |  377 +++-----
 src/views/monitor/online/index.vue       |  173 ++--
 src/views/monitor/operlog/index.vue      |  403 +++-----
 src/views/system/config/index.vue        |  546 +++++------
 src/views/system/dict/data.vue           |  638 ++++++-------
 src/views/system/dict/index.vue          |  601 ++++++------
 src/views/system/notice/ReadUsers.vue    |  147 ++-
 src/views/system/notice/index.vue        |  531 +++++------
 src/views/system/post/index.vue          |  497 +++++-----
 src/views/system/role/authUser.vue       |  304 +++---
 src/views/system/role/index.vue          | 1069 ++++++++++------------
 src/views/system/role/selectUser.vue     |  243 ++---
 src/views/system/user/authRole.vue       |  274 +++---
 src/views/system/user/index.vue          |  847 ++++++++---------
 src/views/tool/gen/importTable.vue       |  218 ++---
 src/views/tool/gen/index.vue             |  558 +++++------
 27 files changed, 4593 insertions(+), 4916 deletions(-)
 create mode 100644 src/components/BasicForm/FormControl.vue
 create mode 100644 src/components/BasicForm/index.vue
 create mode 100644 src/components/BasicTable/index.vue

diff --git a/.env.development b/.env.development
index 2744ed2..0002d63 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
-VITE_APP_TITLE = 若依管理系统
+VITE_APP_TITLE = BMS
 
 # 开发环境配置
 VITE_APP_ENV = 'development'
 
-# 若依管理系统/开发环境
+# BMS/开发环境
 VITE_APP_BASE_API = '/dev-api'
diff --git a/.env.production b/.env.production
index d857bba..5ee625b 100644
--- a/.env.production
+++ b/.env.production
@@ -1,10 +1,10 @@
 # 页面标题
-VITE_APP_TITLE = 若依管理系统
+VITE_APP_TITLE = BMS
 
 # 生产环境配置
 VITE_APP_ENV = 'production'
 
-# 若依管理系统/生产环境
+# BMS/生产环境
 VITE_APP_BASE_API = '/prod-api'
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli
diff --git a/.env.staging b/.env.staging
index fa7c357..b80d954 100644
--- a/.env.staging
+++ b/.env.staging
@@ -1,10 +1,10 @@
 # 页面标题
-VITE_APP_TITLE = 若依管理系统
+VITE_APP_TITLE = BMS
 
 # 生产环境配置
 VITE_APP_ENV = 'staging'
 
-# 若依管理系统/生产环境
+# BMS/生产环境
 VITE_APP_BASE_API = '/stage-api'
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli
diff --git a/package.json b/package.json
index e5e4ec3..e9f6be3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ruoyi",
   "version": "3.9.2",
-  "description": "若依管理系统",
+  "description": "BMS",
   "author": "若依",
   "license": "MIT",
   "type": "module",
diff --git a/src/components/BasicForm/FormControl.vue b/src/components/BasicForm/FormControl.vue
new file mode 100644
index 0000000..ba4a5c5
--- /dev/null
+++ b/src/components/BasicForm/FormControl.vue
@@ -0,0 +1,182 @@
+<template>
+  <!-- 输入框 -->
+  <el-input
+    v-if="comp === 'input'"
+    v-model="model[item.prop]"
+    :placeholder="placeholder"
+    :disabled="item.disabled"
+    :style="controlStyle"
+    v-bind="item.props"
+  />
+  <!-- 文本域 -->
+  <el-input
+    v-else-if="comp === 'textarea'"
+    v-model="model[item.prop]"
+    type="textarea"
+    :placeholder="placeholder"
+    :disabled="item.disabled"
+    :style="controlStyle"
+    v-bind="item.props"
+  />
+  <!-- 数字输入 -->
+  <el-input-number
+    v-else-if="comp === 'inputNumber'"
+    v-model="model[item.prop]"
+    :disabled="item.disabled"
+    :style="controlStyle"
+    v-bind="item.props"
+  />
+  <!-- 下拉选择 -->
+  <el-select
+    v-else-if="comp === 'select'"
+    v-model="model[item.prop]"
+    :placeholder="placeholder || '请选择'"
+    :disabled="item.disabled"
+    :style="controlStyle"
+    v-bind="item.props"
+  >
+    <el-option
+      v-for="opt in options"
+      :key="opt[valueKey]"
+      :label="opt[labelKey]"
+      :value="opt[valueKey]"
+    />
+  </el-select>
+  <!-- 单选组 -->
+  <el-radio-group
+    v-else-if="comp === 'radio'"
+    v-model="model[item.prop]"
+    :disabled="item.disabled"
+    v-bind="item.props"
+  >
+    <el-radio v-for="opt in options" :key="opt[valueKey]" :value="opt[valueKey]">{{ opt[labelKey] }}</el-radio>
+  </el-radio-group>
+  <!-- 复选组 -->
+  <el-checkbox-group
+    v-else-if="comp === 'checkbox'"
+    v-model="model[item.prop]"
+    :disabled="item.disabled"
+    v-bind="item.props"
+  >
+    <el-checkbox v-for="opt in options" :key="opt[valueKey]" :value="opt[valueKey]">{{ opt[labelKey] }}</el-checkbox>
+  </el-checkbox-group>
+  <!-- 开关 -->
+  <el-switch
+    v-else-if="comp === 'switch'"
+    v-model="model[item.prop]"
+    :disabled="item.disabled"
+    v-bind="item.props"
+  />
+  <!-- 日期 -->
+  <el-date-picker
+    v-else-if="comp === 'date'"
+    v-model="model[item.prop]"
+    type="date"
+    :placeholder="placeholder || '请选择日期'"
+    :disabled="item.disabled"
+    :style="controlStyle"
+    value-format="YYYY-MM-DD"
+    v-bind="item.props"
+  />
+  <!-- 日期时间 -->
+  <el-date-picker
+    v-else-if="comp === 'datetime'"
+    v-model="model[item.prop]"
+    type="datetime"
+    :placeholder="placeholder || '请选择日期时间'"
+    :disabled="item.disabled"
+    :style="controlStyle"
+    value-format="YYYY-MM-DD HH:mm:ss"
+    v-bind="item.props"
+  />
+  <!-- 日期范围 -->
+  <el-date-picker
+    v-else-if="comp === 'daterange'"
+    v-model="model[item.prop]"
+    type="daterange"
+    range-separator="至"
+    start-placeholder="开始日期"
+    end-placeholder="结束日期"
+    :disabled="item.disabled"
+    :style="controlStyle"
+    value-format="YYYY-MM-DD"
+    v-bind="item.props"
+  />
+  <!-- 日期时间范围 -->
+  <el-date-picker
+    v-else-if="comp === 'datetimerange'"
+    v-model="model[item.prop]"
+    type="datetimerange"
+    range-separator="至"
+    start-placeholder="开始时间"
+    end-placeholder="结束时间"
+    :disabled="item.disabled"
+    :style="controlStyle"
+    value-format="YYYY-MM-DD HH:mm:ss"
+    v-bind="item.props"
+  />
+  <!-- 时间 -->
+  <el-time-picker
+    v-else-if="comp === 'time'"
+    v-model="model[item.prop]"
+    :disabled="item.disabled"
+    :style="controlStyle"
+    value-format="HH:mm:ss"
+    v-bind="item.props"
+  />
+  <!-- 级联 -->
+  <el-cascader
+    v-else-if="comp === 'cascader'"
+    v-model="model[item.prop]"
+    :options="options"
+    :placeholder="placeholder || '请选择'"
+    :disabled="item.disabled"
+    :style="controlStyle"
+    v-bind="item.props"
+  />
+  <!-- 未知控件回退到 input -->
+  <el-input
+    v-else
+    v-model="model[item.prop]"
+    :placeholder="placeholder"
+    :disabled="item.disabled"
+    :style="controlStyle"
+    v-bind="item.props"
+  />
+</template>
+
+<script setup>
+/**
+ * 表单控件渲染器（BasicForm 内部使用）
+ * 根据 item.component 渲染对应的 Element Plus 控件，支持字典自动加载选项。
+ * 控件直接双向绑定 model[item.prop]（引用修改，与 el-form 一致）。
+ */
+defineOptions({ name: 'FormControl' })
+
+const props = defineProps({
+  // 表单数据对象（引用，控件原地修改其字段）
+  model: { type: Object, required: true },
+  // schema 项配置
+  item: { type: Object, required: true },
+  // 字典映射表（来自父级 BasicForm）
+  dictMap: { type: Object, default: () => ({}) }
+})
+
+const comp = computed(() => props.item.component || 'input')
+const placeholder = computed(() => props.item.placeholder)
+const valueKey = computed(() => props.item.valueKey || 'value')
+const labelKey = computed(() => props.item.labelKey || 'label')
+
+// 控件宽度样式
+const controlStyle = computed(() => (props.item.width ? { width: props.item.width } : null))
+
+// 选项：静态 options 优先，其次字典
+const options = computed(() => {
+  if (props.item.options) return props.item.options
+  if (props.item.dict) {
+    const d = props.dictMap[props.item.dict]
+    return isRef(d) ? d.value : d || []
+  }
+  return []
+})
+</script>
diff --git a/src/components/BasicForm/index.vue b/src/components/BasicForm/index.vue
new file mode 100644
index 0000000..bd9ed28
--- /dev/null
+++ b/src/components/BasicForm/index.vue
@@ -0,0 +1,234 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="modelValue"
+    :rules="mergedRules"
+    :inline="inline"
+    :label-width="labelWidth"
+    :label-position="labelPosition"
+    :disabled="disabled"
+    :size="size"
+    :class="['basic-form', { 'basic-form--grid': !inline }]"
+  >
+    <!-- 行内布局：直接平铺 -->
+    <template v-if="inline">
+      <template v-for="item in visibleSchemas" :key="item.prop">
+        <el-form-item
+          :label="item.label"
+          :prop="item.prop"
+          :label-width="item.labelWidth"
+          v-bind="item.formItemProps"
+        >
+          <slot :name="`form-${item.prop}`" :model="modelValue" :item="item">
+            <form-control :model="modelValue" :item="item" :dict-map="dictMap" />
+          </slot>
+        </el-form-item>
+      </template>
+      <el-form-item v-if="$slots.default">
+        <slot />
+      </el-form-item>
+    </template>
+
+    <!-- 栅格布局：el-row + el-col -->
+    <template v-else>
+      <el-row :gutter="gutter">
+        <el-col
+          v-for="item in visibleSchemas"
+          :key="item.prop"
+          :span="item.span || 24"
+          v-bind="item.colProps"
+        >
+          <el-form-item
+            :label="item.label"
+            :prop="item.prop"
+            :label-width="item.labelWidth"
+            v-bind="item.formItemProps"
+          >
+            <slot :name="`form-${item.prop}`" :model="modelValue" :item="item">
+              <form-control :model="modelValue" :item="item" :dict-map="dictMap" />
+            </slot>
+          </el-form-item>
+        </el-col>
+        <el-col :span="actionSpan" v-if="$slots.default">
+          <el-form-item :label-width="actionLabelWidth">
+            <slot />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </template>
+  </el-form>
+</template>
+
+<script setup>
+/**
+ * 公共表单组件 BasicForm
+ * 基于 schema 配置驱动，支持常见控件、字典自动加载、校验、插槽扩展。
+ *
+ * 数据流：与 Element Plus el-form 一致，传入的对象为引用传递，控件直接修改其字段属性。
+ * 用法：v-model 或 :model-value 均可（两者等价，组件内部不替换对象，而是原地修改字段）。
+ *
+ * 用法示例：
+ * <basic-form ref="formRef" v-model="form" :schemas="schemas" :rules="rules" label-width="100px" />
+ *
+ * schema 项结构：
+ * {
+ *   label: '岗位名称',          // 标签
+ *   prop: 'postName',           // 字段名
+ *   component: 'input',         // 控件类型：input/textarea/inputNumber/select/radio/checkbox/switch/date/datetime/daterange/datetimerange/time/cascader
+ *   placeholder: '请输入',       // 占位文本
+ *   options: [],                 // 静态选项（select/radio/checkbox）
+ *   dict: 'sys_normal_disable',  // 字典类型，自动加载选项
+ *   valueKey: 'value',           // 选项值字段（默认 value）
+ *   labelKey: 'label',           // 选项标签字段（默认 label）
+ *   span: 12,                    // 栅格占位（grid 布局，默认 24）
+ *   width: '200px',               // 控件宽度
+ *   show: true,                   // 是否显示
+ *   disabled: false,
+ *   rules: [],                    // 该项校验规则
+ *   defaultValue: undefined,      // resetToDefault 时该项的默认值
+ *   props: {},                    // 透传给底层控件的属性
+ *   formItemProps: {},            // 透传给 el-form-item 的属性
+ *   colProps: {}                  // 透传给 el-col 的属性
+ * }
+ */
+
+defineOptions({ name: 'BasicForm' })
+
+const props = defineProps({
+  // 表单数据对象（引用传递，控件原地修改其字段）
+  modelValue: {
+    type: Object,
+    required: true
+  },
+  // 表单项配置数组
+  schemas: {
+    type: Array,
+    default: () => []
+  },
+  // 校验规则（可与 schema 内 rules 合并，schema 优先）
+  rules: {
+    type: Object,
+    default: () => ({})
+  },
+  // 是否行内布局（搜索场景）
+  inline: {
+    type: Boolean,
+    default: false
+  },
+  // 标签宽度
+  labelWidth: {
+    type: [String, Number],
+    default: '80px'
+  },
+  // 标签位置
+  labelPosition: {
+    type: String,
+    default: 'right'
+  },
+  // 整体禁用
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  // 表单尺寸（large/default/small）
+  size: {
+    type: String,
+    default: undefined
+  },
+  // 栅格间距（grid 布局）
+  gutter: {
+    type: Number,
+    default: 16
+  },
+  // 操作区栅格占位（grid 布局）
+  actionSpan: {
+    type: Number,
+    default: 24
+  },
+  // 操作区 label-width（grid 布局）
+  actionLabelWidth: {
+    type: [String, Number],
+    default: '0'
+  }
+})
+
+const { proxy } = getCurrentInstance()
+const formRef = ref()
+
+// 收集所有 schema 中用到的字典类型，统一加载
+const dictMap = reactive({})
+const dictTypes = computed(() => {
+  const set = new Set()
+  props.schemas.forEach((s) => s.dict && set.add(s.dict))
+  return [...set]
+})
+
+watch(
+  dictTypes,
+  (types) => {
+    if (!types.length) return
+    const dictRefs = proxy.useDict(...types)
+    types.forEach((t) => {
+      // useDict 返回的是 toRefs，每项是 ref
+      const d = dictRefs[t]
+      dictMap[t] = isRef(d) ? d : ref(d)
+    })
+  },
+  { immediate: true }
+)
+
+// 合并 schema 内 rules 与外部 rules（schema 优先）
+const mergedRules = computed(() => {
+  const result = { ...props.rules }
+  props.schemas.forEach((s) => {
+    if (s.rules) result[s.prop] = s.rules
+  })
+  return result
+})
+
+// 过滤出可见的 schema
+const visibleSchemas = computed(() => props.schemas.filter((s) => s.show !== false))
+
+// ====== 暴露 el-form 方法 ======
+function validate(callback) {
+  return formRef.value?.validate(callback)
+}
+function validateField(p, callback) {
+  return formRef.value?.validateField(p, callback)
+}
+function resetFields(p) {
+  return formRef.value?.resetFields(p)
+}
+function clearValidate(p) {
+  return formRef.value?.clearValidate(p)
+}
+function scrollToField(prop) {
+  return formRef.value?.scrollToField(prop)
+}
+function getFormRef() {
+  return formRef.value
+}
+// 重置为 schema defaultValue 定义的状态
+function resetToDefault() {
+  props.schemas.forEach((s) => {
+    props.modelValue[s.prop] = s.defaultValue !== undefined ? s.defaultValue : undefined
+  })
+  nextTick(() => clearValidate())
+}
+
+defineExpose({
+  validate,
+  validateField,
+  resetFields,
+  clearValidate,
+  scrollToField,
+  getFormRef,
+  resetToDefault
+})
+</script>
+
+<style scoped>
+.basic-form--grid :deep(.el-form-item) {
+  margin-bottom: 18px;
+}
+</style>
diff --git a/src/components/BasicTable/index.vue b/src/components/BasicTable/index.vue
new file mode 100644
index 0000000..c96c02c
--- /dev/null
+++ b/src/components/BasicTable/index.vue
@@ -0,0 +1,440 @@
+<template>
+  <div class="basic-table">
+    <!-- 搜索栏 -->
+    <basic-form
+      v-if="searchColumns.length"
+      ref="searchFormRef"
+      :model-value="queryParams"
+      :schemas="searchColumns"
+      :rules="searchRules"
+      :label-width="searchLabelWidth"
+      :size="size"
+      inline
+      v-show="showSearch"
+    >
+      <template v-for="name in searchSlotNames" :key="name" #[toFormSlot(name)]>
+        <slot :name="name" />
+      </template>
+      <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+      <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      <slot name="search-extra" />
+    </basic-form>
+
+    <!-- 工具栏 -->
+    <el-row v-if="showToolbar" :gutter="10" class="mb8">
+      <slot name="toolbar" :selection="selectionList" :ids="selectionIds" />
+      <el-col :span="1.5" v-if="!$slots.toolbar">
+        <el-button type="primary" plain icon="Plus" @click="$emit('add')" v-if="showAdd">新增</el-button>
+      </el-col>
+      <right-toolbar
+        v-model:showSearch="showSearchInternal"
+        :columns="toolbarColumns"
+        :search="searchColumns.length > 0"
+        @query-table="getList"
+      />
+    </el-row>
+
+    <!-- 表格 -->
+    <el-table
+      ref="tableRef"
+      v-loading="loading"
+      :data="tableData"
+      :row-key="rowKey"
+      :border="border"
+      :stripe="stripe"
+      :size="size"
+      :height="height"
+      :max-height="maxHeight"
+      :default-sort="defaultSort"
+      @selection-change="handleSelectionChange"
+      @row-click="(row, col, e) => $emit('row-click', row, col, e)"
+      @sort-change="(c) => $emit('sort-change', c)"
+    >
+      <!-- 多选列 -->
+      <el-table-column v-if="selection" type="selection" width="55" align="center" />
+
+      <!-- 序号列 -->
+      <el-table-column v-if="showIndex" type="index" label="序号" width="55" align="center" />
+
+      <!-- 动态列 -->
+      <el-table-column
+        v-for="col in visibleColumns"
+        :key="col.key"
+        :prop="col.prop"
+        :label="col.label"
+        :width="col.width"
+        :min-width="col.minWidth"
+        :align="col.align || 'center'"
+        :fixed="col.fixed"
+        :sortable="col.sortable"
+        :show-overflow-tooltip="col.showOverflowTooltip !== false"
+      >
+        <template #header="scope">
+          <slot :name="`header-${col.prop}`" v-bind="scope">{{ col.label }}</slot>
+        </template>
+        <template #default="scope">
+          <slot :name="`col-${col.prop}`" v-bind="scope" :row="scope.row">
+            <!-- 字典列 -->
+            <dict-tag
+              v-if="col.dict"
+              :options="getDictOptions(col.dict)"
+              :value="scope.row[col.prop]"
+            />
+            <!-- 时间格式化 -->
+            <span v-else-if="col.parseTime">{{ parseTime(scope.row[col.prop], col.parseTime === true ? undefined : col.parseTime) }}</span>
+            <!-- 自定义格式化 -->
+            <span v-else-if="col.formatter">{{ col.formatter(scope.row, col, scope.row[col.prop], scope.$index) }}</span>
+            <!-- 默认显示 -->
+            <span v-else>{{ scope.row[col.prop] }}</span>
+          </slot>
+        </template>
+      </el-table-column>
+
+      <!-- 空数据 -->
+      <template #empty>
+        <slot name="empty"><el-empty /></slot>
+      </template>
+    </el-table>
+
+    <!-- 分页 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      :page-sizes="pageSizes"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script setup>
+/**
+ * 公共表格组件 BasicTable
+ * 集成搜索栏 + 工具栏 + 表格 + 分页，基于 columns/searchColumns 配置驱动，内置复用 BasicForm、RightToolbar、Pagination、DictTag。
+ *
+ * 用法示例：
+ * <basic-table
+ *   ref="tableRef"
+ *   :columns="columns"
+ *   :search-columns="searchColumns"
+ *   :query="listPost"
+ *   @add="handleAdd"
+ * >
+ *   <template #toolbar="{ selection, ids }">
+ *     <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
+ *   </template>
+ *   <template #col-status="{ row }">
+ *     <dict-tag :options="sys_normal_disable" :value="row.status" />
+ *   </template>
+ * </basic-table>
+ *
+ * column 配置：
+ * {
+ *   label: '岗位名称',           // 列标题
+ *   prop: 'postName',            // 字段名
+ *   width: 120,                  // 列宽
+ *   minWidth: 120,
+ *   align: 'center',             // 对齐（默认 center）
+ *   fixed: 'left'|'right',
+ *   sortable: true,
+ *   showOverflowTooltip: true,    // 默认 true
+ *   dict: 'sys_normal_disable',   // 用字典标签渲染
+ *   parseTime: true | 'YYYY-MM-DD', // 时间格式化（true 用默认格式）
+ *   formatter: (row,col,val,index)=> ..., // 自定义格式化
+ *   show: true,                    // 是否显示（参与显隐列）
+ *   showInToolbar: true,           // 是否在显隐列工具栏中显示（默认 true）
+ *   visible: true                  // 初始是否可见（显隐列控制）
+ * }
+ *
+ * searchColumns 配置：同 BasicForm 的 schemas。
+ */
+
+defineOptions({ name: 'BasicTable' })
+
+const props = defineProps({
+  // 列配置数组
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  // 搜索表单配置（同 BasicForm schemas）
+  searchColumns: {
+    type: Array,
+    default: () => []
+  },
+  // 搜索表单校验规则
+  searchRules: {
+    type: Object,
+    default: () => ({})
+  },
+  // 搜索表单标签宽度
+  searchLabelWidth: {
+    type: [String, Number],
+    default: 'auto'
+  },
+  // 列表加载函数：(params) => Promise<{rows, total}> | {rows, total}
+  query: {
+    type: Function,
+    required: true
+  },
+  // 额外固定查询参数（每次请求合并传入，不参与搜索表单重置）
+  extraParams: {
+    type: Object,
+    default: () => ({})
+  },
+  // 初始查询参数（搜索字段的默认值）
+  defaultParams: {
+    type: Object,
+    default: () => ({})
+  },
+  // 是否显示多选列
+  selection: {
+    type: Boolean,
+    default: true
+  },
+  // 是否显示序号列
+  showIndex: {
+    type: Boolean,
+    default: false
+  },
+  // 是否显示工具栏
+  showToolbar: {
+    type: Boolean,
+    default: true
+  },
+  // 是否显示默认新增按钮（无 toolbar 插槽时生效）
+  showAdd: {
+    type: Boolean,
+    default: false
+  },
+  // 是否显示搜索栏（可双向控制）
+  showSearch: {
+    type: Boolean,
+    default: true
+  },
+  // 行 key
+  rowKey: {
+    type: [String, Function],
+    default: undefined
+  },
+  // 边框
+  border: {
+    type: Boolean,
+    default: false
+  },
+  // 斑马纹
+  stripe: {
+    type: Boolean,
+    default: false
+  },
+  // 表格/表单尺寸（large/default/small）
+  size: {
+    type: String,
+    default: undefined
+  },
+  // 表格高度
+  height: { type: [String, Number], default: undefined },
+  maxHeight: { type: [String, Number], default: undefined },
+  // 默认排序（透传 el-table default-sort，如 { prop: 'createTime', order: 'descending' }）
+  defaultSort: {
+    type: Object,
+    default: undefined
+  },
+  // 每页条数可选项
+  pageSizes: {
+    type: Array,
+    default: () => [10, 20, 30, 50]
+  },
+  // 默认每页条数
+  pageSize: {
+    type: Number,
+    default: 10
+  },
+  // 是否在挂载后自动加载
+  autoLoad: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['add', 'update:showSearch', 'row-click', 'sort-change', 'selection-change'])
+
+const { proxy } = getCurrentInstance()
+const tableRef = ref()
+const searchFormRef = ref()
+
+const loading = ref(false)
+const tableData = ref([])
+const total = ref(0)
+const selectionList = ref([])
+const showSearchInternal = ref(props.showSearch)
+
+// 查询参数：搜索字段 + 分页
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: props.pageSize,
+  ...props.defaultParams
+})
+
+watch(() => props.showSearch, (v) => (showSearchInternal.value = v))
+watch(showSearchInternal, (v) => emit('update:showSearch', v))
+
+// ====== 列显隐状态 ======
+// 内部维护列状态（带 key/visible），供 RightToolbar 控制显隐
+const tableColumns = ref([])
+function initColumns() {
+  tableColumns.value = props.columns.map((col, index) => ({
+    ...col,
+    key: col.key || col.prop || index,
+    visible: col.visible !== false && col.show !== false
+  }))
+}
+initColumns()
+watch(
+  () => props.columns,
+  () => initColumns(),
+  { deep: false }
+)
+
+// 实际渲染的列（visible !== false）
+const visibleColumns = computed(() => tableColumns.value.filter((c) => c.visible !== false))
+
+// 参与显隐工具栏的列（有 label 且未禁用工具栏显示）
+const toolbarColumns = computed(() =>
+  tableColumns.value.filter((c) => c.label && c.showInToolbar !== false)
+)
+
+// ====== 字典加载（用于表格列 dict 渲染） ======
+const dictMap = reactive({})
+const dictTypes = computed(() => {
+  const set = new Set()
+  props.columns.forEach((c) => c.dict && set.add(c.dict))
+  props.searchColumns.forEach((c) => c.dict && set.add(c.dict))
+  return [...set]
+})
+watch(
+  dictTypes,
+  (types) => {
+    if (!types.length) return
+    const dictRefs = proxy.useDict(...types)
+    types.forEach((t) => {
+      const d = dictRefs[t]
+      dictMap[t] = isRef(d) ? d : ref(d)
+    })
+  },
+  { immediate: true }
+)
+function getDictOptions(type) {
+  const d = dictMap[type]
+  return isRef(d) ? d.value : d || []
+}
+
+// ====== 搜索栏插槽透传：search-xxx -> form-xxx ======
+const slots = useSlots()
+const searchSlotNames = computed(() =>
+  Object.keys(slots).filter((n) => n.startsWith('search-') && n !== 'search-extra')
+)
+function toFormSlot(name) {
+  return 'form-' + name.slice('search-'.length)
+}
+
+// ====== 数据加载 ======
+async function getList() {
+  loading.value = true
+  try {
+    const params = { ...queryParams, ...props.extraParams }
+    const res = await props.query(params)
+    tableData.value = res?.rows || []
+    total.value = res?.total || 0
+  } catch (e) {
+    console.error('BasicTable 加载失败', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索
+function handleQuery() {
+  queryParams.pageNum = 1
+  getList()
+}
+
+// 重置搜索
+function resetQuery() {
+  searchFormRef.value?.resetFields()
+  Object.keys(props.defaultParams || {}).forEach((k) => {
+    queryParams[k] = props.defaultParams[k]
+  })
+  queryParams.pageNum = 1
+  getList()
+}
+
+// 选中变化
+function handleSelectionChange(val) {
+  selectionList.value = val
+  emit('selection-change', val)
+}
+const selectionIds = computed(() =>
+  selectionList.value.map((r) => (props.rowKey ? r[props.rowKey] : r.id)).filter((v) => v !== undefined)
+)
+
+// ====== 暴露方法 ======
+function refresh() {
+  getList()
+}
+function reload() {
+  queryParams.pageNum = 1
+  getList()
+}
+function getSelection() {
+  return selectionList.value
+}
+function getSelectionIds() {
+  return selectionIds.value
+}
+function clearSelection() {
+  tableRef.value?.clearSelection()
+}
+function toggleRowSelection(row, selected) {
+  tableRef.value?.toggleRowSelection(row, selected)
+}
+function getTableRef() {
+  return tableRef.value
+}
+function getSearchFormRef() {
+  return searchFormRef.value
+}
+function getQueryParams() {
+  return { ...queryParams, ...props.extraParams }
+}
+function setQueryParams(p) {
+  Object.assign(queryParams, p)
+}
+
+defineExpose({
+  refresh,
+  reload,
+  getList,
+  handleQuery,
+  resetQuery,
+  getSelection,
+  getSelectionIds,
+  clearSelection,
+  toggleRowSelection,
+  getTableRef,
+  getSearchFormRef,
+  getQueryParams,
+  setQueryParams
+})
+
+if (props.autoLoad) {
+  onMounted(getList)
+}
+</script>
+
+<style scoped>
+.basic-table {
+  width: 100%;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 96cd5eb..31078f0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -43,6 +43,10 @@ import ImageUpload from "@/components/ImageUpload"
 import ImagePreview from "@/components/ImagePreview"
 // 字典标签组件
 import DictTag from '@/components/DictTag'
+// 公共表单组件
+import BasicForm from '@/components/BasicForm'
+// 公共表格组件
+import BasicTable from '@/components/BasicTable'
 
 const app = createApp(App)
 
@@ -65,6 +69,8 @@ app.component('ImageUpload', ImageUpload)
 app.component('ImagePreview', ImagePreview)
 app.component('RightToolbar', RightToolbar)
 app.component('Editor', Editor)
+app.component('BasicForm', BasicForm)
+app.component('BasicTable', BasicTable)
 
 app.use(router)
 app.use(store)
diff --git a/src/views/index.vue b/src/views/index.vue
index 2b2bd7d..348a9f2 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -4,7 +4,7 @@
       <el-col :sm="24" :lg="12" style="padding-left: 20px">
         <h2>若依后台管理框架</h2>
         <p>
-          一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
+          一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了BMS，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
         </p>
         <p>
           <b>当前版本:</b> <span>v{{ version }}</span>
diff --git a/src/views/monitor/job/index.vue b/src/views/monitor/job/index.vue
index 17f5dc7..229236b 100644
--- a/src/views/monitor/job/index.vue
+++ b/src/views/monitor/job/index.vue
@@ -1,435 +1,361 @@
-<template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
-         <el-form-item label="任务名称" prop="jobName">
-            <el-input
-               v-model="queryParams.jobName"
-               placeholder="请输入任务名称"
-               clearable
-               style="width: 200px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="任务组名" prop="jobGroup">
-            <el-select v-model="queryParams.jobGroup" placeholder="请选择任务组名" clearable style="width: 200px">
-               <el-option
-                  v-for="dict in sys_job_group"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item label="任务状态" prop="status">
-            <el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable style="width: 200px">
-               <el-option
-                  v-for="dict in sys_job_status"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
-
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Plus"
-               @click="handleAdd"
-               v-hasPermi="['monitor:job:add']"
-            >新增</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="success"
-               plain
-               icon="Edit"
-               :disabled="single"
-               @click="handleUpdate"
-               v-hasPermi="['monitor:job:edit']"
-            >修改</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               :disabled="multiple"
-               @click="handleDelete"
-               v-hasPermi="['monitor:job:remove']"
-            >删除</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="warning"
-               plain
-               icon="Download"
-               @click="handleExport"
-               v-hasPermi="['monitor:job:export']"
-            >导出</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="info"
-               plain
-               icon="Operation"
-               @click="handleJobLog"
-               v-hasPermi="['monitor:job:query']"
-            >日志</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
-
-      <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange">
-         <el-table-column type="selection" width="55" align="center" />
-         <el-table-column label="任务编号" width="100" align="center" prop="jobId" />
-         <el-table-column label="任务名称" align="center" :show-overflow-tooltip="true">
-            <template #default="scope">
-               <a class="link-type" style="cursor:pointer" @click="handleView(scope.row)">{{ scope.row.jobName }}</a>
-            </template>
-         </el-table-column>
-         <el-table-column label="任务组名" align="center" prop="jobGroup">
-            <template #default="scope">
-               <dict-tag :options="sys_job_group" :value="scope.row.jobGroup" />
-            </template>
-         </el-table-column>
-         <el-table-column label="调用目标字符串" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
-         <el-table-column label="cron执行表达式" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
-         <el-table-column label="状态" align="center">
-            <template #default="scope">
-               <el-switch
-                  v-model="scope.row.status"
-                  active-value="0"
-                  inactive-value="1"
-                  @change="handleStatusChange(scope.row)"
-               ></el-switch>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
-            <template #default="scope">
-               <el-tooltip content="修改" placement="top">
-                  <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['monitor:job:edit']"></el-button>
-               </el-tooltip>
-               <el-tooltip content="删除" placement="top">
-                  <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['monitor:job:remove']"></el-button>
-               </el-tooltip>
-               <el-tooltip content="执行一次" placement="top">
-                  <el-button link type="primary" icon="CaretRight" @click="handleRun(scope.row)" v-hasPermi="['monitor:job:changeStatus']"></el-button>
-               </el-tooltip>
-               <el-tooltip content="调度日志" placement="top">
-                  <el-button link type="primary" icon="Operation" @click="handleJobLog(scope.row)" v-hasPermi="['monitor:job:query']"></el-button>
-               </el-tooltip>
-            </template>
-         </el-table-column>
-      </el-table>
-
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
-
-      <!-- 添加或修改定时任务对话框 -->
-      <el-dialog :title="title" v-model="open" width="820px" append-to-body>
-         <el-form ref="jobRef" :model="form" :rules="rules" label-width="120px">
-            <el-row>
-               <el-col :span="12">
-                  <el-form-item label="任务名称" prop="jobName">
-                     <el-input v-model="form.jobName" placeholder="请输入任务名称" />
-                  </el-form-item>
-               </el-col>
-               <el-col :span="12">
-                  <el-form-item label="任务分组" prop="jobGroup">
-                     <el-select v-model="form.jobGroup" placeholder="请选择">
-                        <el-option
-                           v-for="dict in sys_job_group"
-                           :key="dict.value"
-                           :label="dict.label"
-                           :value="dict.value"
-                        ></el-option>
-                     </el-select>
-                  </el-form-item>
-               </el-col>
-               <el-col :span="24">
-                  <el-form-item prop="invokeTarget">
-                     <template #label>
-                        <span>
-                           调用方法
-                           <el-tooltip placement="top">
-                              <template #content>
-                                 <div>
-                                    Bean调用示例：ryTask.ryParams('ry')
-                                    <br />Class类调用示例：com.ruoyi.quartz.task.RyTask.ryParams('ry')
-                                    <br />参数说明：支持字符串，布尔类型，长整型，浮点型，整型
-                                 </div>
-                              </template>
-                              <el-icon><question-filled /></el-icon>
-                           </el-tooltip>
-                        </span>
-                     </template>
-                     <el-input v-model="form.invokeTarget" placeholder="请输入调用目标字符串" />
-                  </el-form-item>
-               </el-col>
-               <el-col :span="24">
-                  <el-form-item label="cron表达式" prop="cronExpression">
-                     <el-input v-model="form.cronExpression" placeholder="请输入cron执行表达式">
-                        <template #append>
-                           <el-button type="primary" @click="handleShowCron">
-                              生成表达式
-                              <i class="el-icon-time el-icon--right"></i>
-                           </el-button>
-                        </template>
-                     </el-input>
-                  </el-form-item>
-               </el-col>
-               <el-col :span="24" v-if="form.jobId !== undefined">
-                  <el-form-item label="状态">
-                     <el-radio-group v-model="form.status">
-                        <el-radio
-                           v-for="dict in sys_job_status"
-                           :key="dict.value"
-                           :value="dict.value"
-                        >{{ dict.label }}</el-radio>
-                     </el-radio-group>
-                  </el-form-item>
-               </el-col>
-               <el-col :span="12">
-                  <el-form-item label="执行策略" prop="misfirePolicy">
-                     <el-radio-group v-model="form.misfirePolicy">
-                        <el-radio-button value="1">立即执行</el-radio-button>
-                        <el-radio-button value="2">执行一次</el-radio-button>
-                        <el-radio-button value="3">放弃执行</el-radio-button>
-                     </el-radio-group>
-                  </el-form-item>
-               </el-col>
-               <el-col :span="12">
-                  <el-form-item label="是否并发" prop="concurrent">
-                     <el-radio-group v-model="form.concurrent">
-                        <el-radio-button value="0">允许</el-radio-button>
-                        <el-radio-button value="1">禁止</el-radio-button>
-                     </el-radio-group>
-                  </el-form-item>
-               </el-col>
-            </el-row>
-         </el-form>
-         <template #footer>
-            <div class="dialog-footer">
-               <el-button type="primary" @click="submitForm">确 定</el-button>
-               <el-button @click="cancel">取 消</el-button>
-            </div>
-         </template>
-      </el-dialog>
-
-     <el-dialog title="Cron表达式生成器" v-model="openCron" append-to-body destroy-on-close>
-       <crontab ref="crontabRef" @hide="openCron=false" @fill="crontabFill" :expression="expression"></crontab>
-     </el-dialog>
-
-      <!-- 任务详细 -->
-      <job-detail v-model:visible="openView" :row="form" type="job" />
-   </div>
-</template>
-
-<script setup name="Job">
-import Crontab from '@/components/Crontab'
-import JobDetail from './detail'
-import { listJob, getJob, delJob, addJob, updateJob, runJob, changeJobStatus } from "@/api/monitor/job"
-
-const router = useRouter()
-const { proxy } = getCurrentInstance()
-const { sys_job_group, sys_job_status } = useDict("sys_job_group", "sys_job_status")
-
-const jobList = ref([])
-const open = ref(false)
-const loading = ref(true)
-const showSearch = ref(true)
-const ids = ref([])
-const single = ref(true)
-const multiple = ref(true)
-const total = ref(0)
-const title = ref("")
-const openView = ref(false)
-const openCron = ref(false)
-const expression = ref("")
-
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    jobName: undefined,
-    jobGroup: undefined,
-    status: undefined
-  },
-  rules: {
-    jobName: [{ required: true, message: "任务名称不能为空", trigger: "blur" }],
-    invokeTarget: [{ required: true, message: "调用目标字符串不能为空", trigger: "blur" }],
-    cronExpression: [{ required: true, message: "cron执行表达式不能为空", trigger: "change" }]
-  }
-})
-
-const { queryParams, form, rules } = toRefs(data)
-
-/** 查询定时任务列表 */
-function getList() {
-  loading.value = true
-  listJob(queryParams.value).then(response => {
-    jobList.value = response.rows
-    total.value = response.total
-    loading.value = false
-  })
-}
-
-/** 取消按钮 */
-function cancel() {
-  open.value = false
-  reset()
-}
-
-/** 表单重置 */
-function reset() {
-  form.value = {
-    jobId: undefined,
-    jobName: undefined,
-    jobGroup: undefined,
-    invokeTarget: undefined,
-    cronExpression: undefined,
-    misfirePolicy: '1',
-    concurrent: '1',
-    status: "0"
-  }
-  proxy.resetForm("jobRef")
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  proxy.resetForm("queryRef")
-  handleQuery()
-}
-
-// 多选框选中数据
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.jobId)
-  single.value = selection.length != 1
-  multiple.value = !selection.length
-}
-
-// 任务状态修改
-function handleStatusChange(row) {
-  let text = row.status === "0" ? "启用" : "停用"
-  proxy.$modal.confirm('确认要"' + text + '""' + row.jobName + '"任务吗?').then(function () {
-    return changeJobStatus(row.jobId, row.status)
-  }).then(() => {
-    proxy.$modal.msgSuccess(text + "成功")
-  }).catch(function () {
-    row.status = row.status === "0" ? "1" : "0"
-  })
-}
-
-/* 立即执行一次 */
-function handleRun(row) {
-  proxy.$modal.confirm('确认要立即执行一次"' + row.jobName + '"任务吗?').then(function () {
-    return runJob(row.jobId, row.jobGroup)
-  }).then(() => {
-    proxy.$modal.msgSuccess("执行成功")
-  }).catch(() => {})
-}
-
-/** 任务详细信息 */
-function handleView(row) {
-  getJob(row.jobId).then(response => {
-    form.value = response.data
-    openView.value = true
-  })
-}
-
-/** cron表达式按钮操作 */
-function handleShowCron() {
-  expression.value = form.value.cronExpression
-  openCron.value = true
-}
-
-/** 确定后回传值 */
-function crontabFill(value) {
-  form.value.cronExpression = value
-}
-
-/** 任务日志列表查询 */
-function handleJobLog(row) {
-  const jobId = row.jobId || 0
-  router.push('/monitor/job-log/index/' + jobId)
-}
-
-/** 新增按钮操作 */
-function handleAdd() {
-  reset()
-  open.value = true
-  title.value = "添加任务"
-}
-
-/** 修改按钮操作 */
-function handleUpdate(row) {
-  reset()
-  const jobId = row.jobId || ids.value
-  getJob(jobId).then(response => {
-    form.value = response.data
-    open.value = true
-    title.value = "修改任务"
-  })
-}
-
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["jobRef"].validate(valid => {
-    if (valid) {
-      if (form.value.jobId != undefined) {
-        updateJob(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功")
-          open.value = false
-          getList()
-        })
-      } else {
-        addJob(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功")
-          open.value = false
-          getList()
-        })
-      }
-    }
-  })
-}
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const jobIds = row.jobId || ids.value
-  proxy.$modal.confirm('是否确认删除定时任务编号为"' + jobIds + '"的数据项?').then(function () {
-    return delJob(jobIds)
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => {})
-}
-
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download("monitor/job/export", {
-    ...queryParams.value,
-  }, `job_${new Date().getTime()}.xlsx`)
-}
-
-getList()
-</script>
+<template>
+   <div class="app-container">
+      <basic-table
+         ref="tableRef"
+         :columns="columns"
+         :search-columns="searchColumns"
+         :query="queryList"
+         row-key="jobId"
+      >
+         <template #toolbar="{ selection, ids }">
+            <el-col :span="1.5">
+               <el-button
+                  type="primary"
+                  plain
+                  icon="Plus"
+                  @click="handleAdd"
+                  v-hasPermi="['monitor:job:add']"
+               >新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="success"
+                  plain
+                  icon="Edit"
+                  :disabled="selection.length !== 1"
+                  @click="handleUpdate(selection[0])"
+                  v-hasPermi="['monitor:job:edit']"
+               >修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="danger"
+                  plain
+                  icon="Delete"
+                  :disabled="!selection.length"
+                  @click="handleDelete(ids)"
+                  v-hasPermi="['monitor:job:remove']"
+               >删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="warning"
+                  plain
+                  icon="Download"
+                  @click="handleExport"
+                  v-hasPermi="['monitor:job:export']"
+               >导出</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="info"
+                  plain
+                  icon="Operation"
+                  @click="handleJobLog()"
+                  v-hasPermi="['monitor:job:query']"
+               >日志</el-button>
+            </el-col>
+         </template>
+
+         <template #col-jobName="{ row }">
+            <a class="link-type" style="cursor:pointer" @click="handleView(row)">{{ row.jobName }}</a>
+         </template>
+
+         <template #col-status="{ row }">
+            <el-switch
+               v-model="row.status"
+               active-value="0"
+               inactive-value="1"
+               @change="handleStatusChange(row)"
+            ></el-switch>
+         </template>
+
+         <template #col-action="{ row }">
+            <el-tooltip content="修改" placement="top">
+               <el-button link type="primary" icon="Edit" @click="handleUpdate(row)" v-hasPermi="['monitor:job:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+               <el-button link type="primary" icon="Delete" @click="handleDelete(row.jobId)" v-hasPermi="['monitor:job:remove']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="执行一次" placement="top">
+               <el-button link type="primary" icon="CaretRight" @click="handleRun(row)" v-hasPermi="['monitor:job:changeStatus']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="调度日志" placement="top">
+               <el-button link type="primary" icon="Operation" @click="handleJobLog(row)" v-hasPermi="['monitor:job:query']"></el-button>
+            </el-tooltip>
+         </template>
+      </basic-table>
+
+      <!-- 添加或修改定时任务对话框 -->
+      <el-dialog :title="title" v-model="open" width="820px" append-to-body>
+         <el-form ref="jobRef" :model="form" :rules="rules" label-width="120px">
+            <el-row>
+               <el-col :span="12">
+                  <el-form-item label="任务名称" prop="jobName">
+                     <el-input v-model="form.jobName" placeholder="请输入任务名称" />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="任务分组" prop="jobGroup">
+                     <el-select v-model="form.jobGroup" placeholder="请选择">
+                        <el-option
+                           v-for="dict in sys_job_group"
+                           :key="dict.value"
+                           :label="dict.label"
+                           :value="dict.value"
+                        ></el-option>
+                     </el-select>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="24">
+                  <el-form-item prop="invokeTarget">
+                     <template #label>
+                        <span>
+                           调用方法
+                           <el-tooltip placement="top">
+                              <template #content>
+                                 <div>
+                                    Bean调用示例：ryTask.ryParams('ry')
+                                    <br />Class类调用示例：com.ruoyi.quartz.task.RyTask.ryParams('ry')
+                                    <br />参数说明：支持字符串，布尔类型，长整型，浮点型，整型
+                                 </div>
+                              </template>
+                              <el-icon><question-filled /></el-icon>
+                           </el-tooltip>
+                        </span>
+                     </template>
+                     <el-input v-model="form.invokeTarget" placeholder="请输入调用目标字符串" />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="24">
+                  <el-form-item label="cron表达式" prop="cronExpression">
+                     <el-input v-model="form.cronExpression" placeholder="请输入cron执行表达式">
+                        <template #append>
+                           <el-button type="primary" @click="handleShowCron">
+                              生成表达式
+                              <i class="el-icon-time el-icon--right"></i>
+                           </el-button>
+                        </template>
+                     </el-input>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="24" v-if="form.jobId !== undefined">
+                  <el-form-item label="状态">
+                     <el-radio-group v-model="form.status">
+                        <el-radio
+                           v-for="dict in sys_job_status"
+                           :key="dict.value"
+                           :value="dict.value"
+                        >{{ dict.label }}</el-radio>
+                     </el-radio-group>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="执行策略" prop="misfirePolicy">
+                     <el-radio-group v-model="form.misfirePolicy">
+                        <el-radio-button value="1">立即执行</el-radio-button>
+                        <el-radio-button value="2">执行一次</el-radio-button>
+                        <el-radio-button value="3">放弃执行</el-radio-button>
+                     </el-radio-group>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="是否并发" prop="concurrent">
+                     <el-radio-group v-model="form.concurrent">
+                        <el-radio-button value="0">允许</el-radio-button>
+                        <el-radio-button value="1">禁止</el-radio-button>
+                     </el-radio-group>
+                  </el-form-item>
+               </el-col>
+            </el-row>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" @click="submitForm">确 定</el-button>
+               <el-button @click="cancel">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
+
+     <el-dialog title="Cron表达式生成器" v-model="openCron" append-to-body destroy-on-close>
+       <crontab ref="crontabRef" @hide="openCron=false" @fill="crontabFill" :expression="expression"></crontab>
+     </el-dialog>
+
+      <!-- 任务详细 -->
+      <job-detail v-model:visible="openView" :row="form" type="job" />
+   </div>
+</template>
+
+<script setup name="Job">
+import Crontab from '@/components/Crontab'
+import JobDetail from './detail'
+import { listJob, getJob, delJob, addJob, updateJob, runJob, changeJobStatus } from "@/api/monitor/job"
+
+const router = useRouter()
+const { proxy } = getCurrentInstance()
+const { sys_job_group, sys_job_status } = useDict("sys_job_group", "sys_job_status")
+
+const tableRef = ref()
+const open = ref(false)
+const title = ref("")
+const openView = ref(false)
+const openCron = ref(false)
+const expression = ref("")
+
+// 搜索项配置
+const searchColumns = [
+  { label: "任务名称", prop: "jobName", component: "input", placeholder: "请输入任务名称", width: "200px" },
+  { label: "任务组名", prop: "jobGroup", component: "select", dict: "sys_job_group", placeholder: "请选择任务组名", width: "200px" },
+  { label: "任务状态", prop: "status", component: "select", dict: "sys_job_status", placeholder: "请选择任务状态", width: "200px" }
+]
+
+// 表格列配置
+const columns = [
+  { label: "任务编号", prop: "jobId", align: "center", width: 100 },
+  { label: "任务名称", prop: "jobName", align: "center" },
+  { label: "任务组名", prop: "jobGroup", align: "center", dict: "sys_job_group" },
+  { label: "调用目标字符串", prop: "invokeTarget", align: "center" },
+  { label: "cron执行表达式", prop: "cronExpression", align: "center" },
+  { label: "状态", prop: "status", align: "center" },
+  { label: "操作", prop: "action", align: "center", width: 200, showInToolbar: false }
+]
+
+// 查询函数
+function queryList(params) {
+  return listJob(params)
+}
+
+const data = reactive({
+  form: {},
+  rules: {
+    jobName: [{ required: true, message: "任务名称不能为空", trigger: "blur" }],
+    invokeTarget: [{ required: true, message: "调用目标字符串不能为空", trigger: "blur" }],
+    cronExpression: [{ required: true, message: "cron执行表达式不能为空", trigger: "change" }]
+  }
+})
+
+const { form, rules } = toRefs(data)
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false
+  reset()
+}
+
+/** 表单重置 */
+function reset() {
+  form.value = {
+    jobId: undefined,
+    jobName: undefined,
+    jobGroup: undefined,
+    invokeTarget: undefined,
+    cronExpression: undefined,
+    misfirePolicy: '1',
+    concurrent: '1',
+    status: "0"
+  }
+  proxy.resetForm("jobRef")
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加任务"
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const jobId = row.jobId
+  getJob(jobId).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改任务"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["jobRef"].validate(valid => {
+    if (valid) {
+      if (form.value.jobId != undefined) {
+        updateJob(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          tableRef.value.refresh()
+        })
+      } else {
+        addJob(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          tableRef.value.refresh()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(jobIds) {
+  proxy.$modal.confirm('是否确认删除定时任务编号为"' + jobIds + '"的数据项?').then(function () {
+    return delJob(jobIds)
+  }).then(() => {
+    tableRef.value.refresh()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+// 任务状态修改
+function handleStatusChange(row) {
+  let text = row.status === "0" ? "启用" : "停用"
+  proxy.$modal.confirm('确认要"' + text + '""' + row.jobName + '"任务吗?').then(function () {
+    return changeJobStatus(row.jobId, row.status)
+  }).then(() => {
+    proxy.$modal.msgSuccess(text + "成功")
+  }).catch(function () {
+    row.status = row.status === "0" ? "1" : "0"
+  })
+}
+
+/* 立即执行一次 */
+function handleRun(row) {
+  proxy.$modal.confirm('确认要立即执行一次"' + row.jobName + '"任务吗?').then(function () {
+    return runJob(row.jobId, row.jobGroup)
+  }).then(() => {
+    proxy.$modal.msgSuccess("执行成功")
+  }).catch(() => {})
+}
+
+/** 任务详细信息 */
+function handleView(row) {
+  getJob(row.jobId).then(response => {
+    form.value = response.data
+    openView.value = true
+  })
+}
+
+/** cron表达式按钮操作 */
+function handleShowCron() {
+  expression.value = form.value.cronExpression
+  openCron.value = true
+}
+
+/** 确定后回传值 */
+function crontabFill(value) {
+  form.value.cronExpression = value
+}
+
+/** 任务日志列表查询 */
+function handleJobLog(row) {
+  const jobId = row?.jobId || 0
+  router.push('/monitor/job-log/index/' + jobId)
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("monitor/job/export", {
+    ...tableRef.value.getQueryParams()
+  }, `job_${new Date().getTime()}.xlsx`)
+}
+</script>
diff --git a/src/views/monitor/job/log.vue b/src/views/monitor/job/log.vue
index 5b2c108..a47b3df 100644
--- a/src/views/monitor/job/log.vue
+++ b/src/views/monitor/job/log.vue
@@ -1,251 +1,158 @@
-<template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-         <el-form-item label="任务名称" prop="jobName">
-            <el-input
-               v-model="queryParams.jobName"
-               placeholder="请输入任务名称"
-               clearable
-               style="width: 240px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="任务组名" prop="jobGroup">
-            <el-select
-               v-model="queryParams.jobGroup"
-               placeholder="请选择任务组名"
-               clearable
-               style="width: 240px"
-            >
-               <el-option
-                  v-for="dict in sys_job_group"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item label="执行状态" prop="status">
-            <el-select
-               v-model="queryParams.status"
-               placeholder="请选择执行状态"
-               clearable
-               style="width: 240px"
-            >
-               <el-option
-                  v-for="dict in sys_common_status"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item label="执行时间" style="width: 308px">
-            <el-date-picker
-               v-model="dateRange"
-               value-format="YYYY-MM-DD"
-               type="daterange"
-               range-separator="-"
-               start-placeholder="开始日期"
-               end-placeholder="结束日期"
-            ></el-date-picker>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
-
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               :disabled="multiple"
-               @click="handleDelete"
-               v-hasPermi="['monitor:job:remove']"
-            >删除</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               @click="handleClean"
-               v-hasPermi="['monitor:job:remove']"
-            >清空</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="warning"
-               plain
-               icon="Download"
-               @click="handleExport"
-               v-hasPermi="['monitor:job:export']"
-            >导出</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button 
-               type="warning" 
-               plain 
-               icon="Close"
-               @click="handleClose"
-            >关闭</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
-
-      <el-table v-loading="loading" :data="jobLogList" @selection-change="handleSelectionChange">
-         <el-table-column type="selection" width="55" align="center" />
-         <el-table-column label="日志编号" width="80" align="center" prop="jobLogId" />
-         <el-table-column label="任务名称" align="center" prop="jobName" :show-overflow-tooltip="true" />
-         <el-table-column label="任务组名" align="center" prop="jobGroup" :show-overflow-tooltip="true">
-            <template #default="scope">
-               <dict-tag :options="sys_job_group" :value="scope.row.jobGroup" />
-            </template>
-         </el-table-column>
-         <el-table-column label="调用目标字符串" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
-         <el-table-column label="日志信息" align="center" prop="jobMessage" :show-overflow-tooltip="true" />
-         <el-table-column label="执行状态" align="center" prop="status">
-            <template #default="scope">
-               <dict-tag :options="sys_common_status" :value="scope.row.status" />
-            </template>
-         </el-table-column>
-         <el-table-column label="执行时间" align="center" prop="createTime" width="180">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template #default="scope">
-               <el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['monitor:job:query']">详细</el-button>
-            </template>
-         </el-table-column>
-      </el-table>
-
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
-
-      <!-- 调度日志详细 -->
-      <job-detail v-model:visible="open" :row="form" type="log" />
-   </div>
-</template>
-
-<script setup name="JobLog">
-import JobDetail from './detail'
-import { getJob } from "@/api/monitor/job"
-import { listJobLog, delJobLog, cleanJobLog } from "@/api/monitor/jobLog"
-
-const { proxy } = getCurrentInstance()
-const { sys_common_status, sys_job_group } = useDict("sys_common_status", "sys_job_group")
-
-const jobLogList = ref([])
-const open = ref(false)
-const loading = ref(true)
-const showSearch = ref(true)
-const ids = ref([])
-const multiple = ref(true)
-const total = ref(0)
-const dateRange = ref([])
-const route = useRoute()
-
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    dictName: undefined,
-    dictType: undefined,
-    status: undefined
-  }
-})
-
-const { queryParams, form, rules } = toRefs(data)
-
-/** 查询调度日志列表 */
-function getList() {
-  loading.value = true
-  listJobLog(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
-    jobLogList.value = response.rows
-    total.value = response.total
-    loading.value = false
-  })
-}
-
-// 返回按钮
-function handleClose() {
-  const obj = { path: "/monitor/job" }
-  proxy.$tab.closeOpenPage(obj)
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  dateRange.value = []
-  proxy.resetForm("queryRef")
-  handleQuery()
-}
-
-// 多选框选中数据
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.jobLogId)
-  multiple.value = !selection.length
-}
-
-/** 详细按钮操作 */
-function handleView(row) {
-  open.value = true
-  form.value = row
-}
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  proxy.$modal.confirm('是否确认删除调度日志编号为"' + ids.value + '"的数据项?').then(function () {
-    return delJobLog(ids.value)
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => {})
-}
-
-/** 清空按钮操作 */
-function handleClean() {
-  proxy.$modal.confirm("是否确认清空所有调度日志数据项?").then(function () {
-    return cleanJobLog()
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("清空成功")
-  }).catch(() => {})
-}
-
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download("monitor/jobLog/export", {
-    ...queryParams.value,
-  }, `job_log_${new Date().getTime()}.xlsx`)
-}
-
-(() => {
-  const jobId = route.params && route.params.jobId
-  if (jobId !== undefined && jobId != 0) {
-    getJob(jobId).then(response => {
-      queryParams.value.jobName = response.data.jobName
-      queryParams.value.jobGroup = response.data.jobGroup
-      getList()
-    })
-  } else {
-    getList()
-  }
-})()
-</script>
+<template>
+   <div class="app-container">
+      <basic-table
+         ref="tableRef"
+         :columns="columns"
+         :search-columns="searchColumns"
+         :query="queryList"
+         row-key="jobLogId"
+         :auto-load="false"
+      >
+         <template #toolbar="{ selection, ids }">
+            <el-col :span="1.5">
+               <el-button
+                  type="danger"
+                  plain
+                  icon="Delete"
+                  :disabled="!selection.length"
+                  @click="handleDelete(ids)"
+                  v-hasPermi="['monitor:job:remove']"
+               >删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="danger"
+                  plain
+                  icon="Delete"
+                  @click="handleClean"
+                  v-hasPermi="['monitor:job:remove']"
+               >清空</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="warning"
+                  plain
+                  icon="Download"
+                  @click="handleExport"
+                  v-hasPermi="['monitor:job:export']"
+               >导出</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="warning"
+                  plain
+                  icon="Close"
+                  @click="handleClose"
+               >关闭</el-button>
+            </el-col>
+         </template>
+
+         <template #col-action="{ row }">
+            <el-button link type="primary" icon="View" @click="handleView(row)" v-hasPermi="['monitor:job:query']">详细</el-button>
+         </template>
+      </basic-table>
+
+      <!-- 调度日志详细 -->
+      <job-detail v-model:visible="open" :row="form" type="log" />
+   </div>
+</template>
+
+<script setup name="JobLog">
+import JobDetail from './detail'
+import { getJob } from "@/api/monitor/job"
+import { listJobLog, delJobLog, cleanJobLog } from "@/api/monitor/jobLog"
+
+const { proxy } = getCurrentInstance()
+const { sys_common_status, sys_job_group } = useDict("sys_common_status", "sys_job_group")
+
+const route = useRoute()
+const tableRef = ref()
+const open = ref(false)
+
+const data = reactive({
+  form: {}
+})
+const { form } = toRefs(data)
+
+// 搜索项配置
+const searchColumns = [
+  { label: "任务名称", prop: "jobName", component: "input", placeholder: "请输入任务名称", width: "240px" },
+  { label: "任务组名", prop: "jobGroup", component: "select", dict: "sys_job_group", placeholder: "请选择任务组名", width: "240px" },
+  { label: "执行状态", prop: "status", component: "select", dict: "sys_common_status", placeholder: "请选择执行状态", width: "240px" },
+  { label: "执行时间", prop: "dateRange", component: "daterange", width: "308px" }
+]
+
+// 表格列配置
+const columns = [
+  { label: "日志编号", prop: "jobLogId", align: "center", width: 80 },
+  { label: "任务名称", prop: "jobName", align: "center" },
+  { label: "任务组名", prop: "jobGroup", align: "center", dict: "sys_job_group" },
+  { label: "调用目标字符串", prop: "invokeTarget", align: "center" },
+  { label: "日志信息", prop: "jobMessage", align: "center" },
+  { label: "执行状态", prop: "status", align: "center", dict: "sys_common_status" },
+  { label: "执行时间", prop: "createTime", align: "center", width: 180, parseTime: true },
+  { label: "操作", prop: "action", align: "center", showInToolbar: false }
+]
+
+// 查询函数
+function queryList(params) {
+  const p = proxy.addDateRange({ ...params }, params.dateRange)
+  delete p.dateRange
+  return listJobLog(p)
+}
+
+// 返回按钮
+function handleClose() {
+  const obj = { path: "/monitor/job" }
+  proxy.$tab.closeOpenPage(obj)
+}
+
+/** 详细按钮操作 */
+function handleView(row) {
+  open.value = true
+  form.value = row
+}
+
+/** 删除按钮操作 */
+function handleDelete(jobIds) {
+  proxy.$modal.confirm('是否确认删除调度日志编号为"' + jobIds + '"的数据项?').then(function () {
+    return delJobLog(jobIds)
+  }).then(() => {
+    tableRef.value.refresh()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 清空按钮操作 */
+function handleClean() {
+  proxy.$modal.confirm("是否确认清空所有调度日志数据项?").then(function () {
+    return cleanJobLog()
+  }).then(() => {
+    tableRef.value.refresh()
+    proxy.$modal.msgSuccess("清空成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("monitor/jobLog/export", {
+    ...tableRef.value.getQueryParams()
+  }, `job_log_${new Date().getTime()}.xlsx`)
+}
+
+// 初始化：从路由参数接收 jobId，异步获取任务名称/组名后加载列表
+onMounted(() => {
+  const jobId = route.params?.jobId || route.query?.jobId
+  if (jobId !== undefined && jobId != 0) {
+    getJob(jobId).then(response => {
+      tableRef.value.setQueryParams({
+        jobName: response.data.jobName,
+        jobGroup: response.data.jobGroup
+      })
+      tableRef.value.reload()
+    })
+  } else {
+    tableRef.value.reload()
+  }
+})
+</script>
diff --git a/src/views/monitor/logininfor/index.vue b/src/views/monitor/logininfor/index.vue
index 807fd05..90585fe 100644
--- a/src/views/monitor/logininfor/index.vue
+++ b/src/views/monitor/logininfor/index.vue
@@ -1,233 +1,144 @@
-<template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-         <el-form-item label="登录地址" prop="ipaddr">
-            <el-input
-               v-model="queryParams.ipaddr"
-               placeholder="请输入登录地址"
-               clearable
-               style="width: 240px;"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="用户名称" prop="userName">
-            <el-input
-               v-model="queryParams.userName"
-               placeholder="请输入用户名称"
-               clearable
-               style="width: 240px;"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="状态" prop="status">
-            <el-select
-               v-model="queryParams.status"
-               placeholder="登录状态"
-               clearable
-               style="width: 240px"
-            >
-               <el-option
-                  v-for="dict in sys_common_status"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item label="登录时间" style="width: 308px">
-            <el-date-picker
-               v-model="dateRange"
-               value-format="YYYY-MM-DD HH:mm:ss"
-               type="daterange"
-               range-separator="-"
-               start-placeholder="开始日期"
-               end-placeholder="结束日期"
-               :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
-            ></el-date-picker>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
-
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               :disabled="multiple"
-               @click="handleDelete"
-               v-hasPermi="['monitor:logininfor:remove']"
-            >删除</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               @click="handleClean"
-               v-hasPermi="['monitor:logininfor:remove']"
-            >清空</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Unlock"
-               :disabled="single"
-               @click="handleUnlock"
-               v-hasPermi="['monitor:logininfor:unlock']"
-            >解锁</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="warning"
-               plain
-               icon="Download"
-               @click="handleExport"
-               v-hasPermi="['monitor:logininfor:export']"
-            >导出</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
-
-      <el-table ref="logininforRef" v-loading="loading" :data="logininforList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
-         <el-table-column type="selection" width="55" align="center" />
-         <el-table-column label="访问编号" align="center" prop="infoId" />
-         <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
-         <el-table-column label="地址" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
-         <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
-         <el-table-column label="操作系统" align="center" prop="os" :show-overflow-tooltip="true" />
-         <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
-         <el-table-column label="登录状态" align="center" prop="status">
-            <template #default="scope">
-               <dict-tag :options="sys_common_status" :value="scope.row.status" />
-            </template>
-         </el-table-column>
-         <el-table-column label="描述" align="center" prop="msg" :show-overflow-tooltip="true" />
-         <el-table-column label="访问时间" align="center" prop="loginTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.loginTime) }}</span>
-            </template>
-         </el-table-column>
-      </el-table>
-
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
-   </div>
-</template>
-
-<script setup name="Logininfor">
-import { list, delLogininfor, cleanLogininfor, unlockLogininfor } from "@/api/monitor/logininfor"
-
-const { proxy } = getCurrentInstance()
-const { sys_common_status } = useDict("sys_common_status")
-
-const logininforList = ref([])
-const loading = ref(true)
-const showSearch = ref(true)
-const ids = ref([])
-const single = ref(true)
-const multiple = ref(true)
-const selectName = ref("")
-const total = ref(0)
-const dateRange = ref([])
-const defaultSort = ref({ prop: "loginTime", order: "descending" })
-
-// 查询参数
-const queryParams = ref({
-  pageNum: 1,
-  pageSize: 10,
-  ipaddr: undefined,
-  userName: undefined,
-  status: undefined,
-  orderByColumn: undefined,
-  isAsc: undefined
-})
-
-/** 查询登录日志列表 */
-function getList() {
-  loading.value = true
-  list(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
-    logininforList.value = response.rows
-    total.value = response.total
-    loading.value = false
-  })
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  dateRange.value = []
-  proxy.resetForm("queryRef")
-  queryParams.value.pageNum = 1
-  proxy.$refs["logininforRef"].sort(defaultSort.value.prop, defaultSort.value.order)
-}
-
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.infoId)
-  multiple.value = !selection.length
-  single.value = selection.length != 1
-  selectName.value = selection.map(item => item.userName)
-}
-
-/** 排序触发事件 */
-function handleSortChange(column, prop, order) {
-  queryParams.value.orderByColumn = column.prop
-  queryParams.value.isAsc = column.order
-  getList()
-}
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const infoIds = row.infoId || ids.value
-  proxy.$modal.confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?').then(function () {
-    return delLogininfor(infoIds)
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => {})
-}
-
-/** 清空按钮操作 */
-function handleClean() {
-  proxy.$modal.confirm("是否确认清空所有登录日志数据项?").then(function () {
-    return cleanLogininfor()
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("清空成功")
-  }).catch(() => {})
-}
-
-/** 解锁按钮操作 */
-function handleUnlock() {
-  const username = selectName.value
-  proxy.$modal.confirm('是否确认解锁用户"' + username + '"数据项?').then(function () {
-    return unlockLogininfor(username)
-  }).then(() => {
-    proxy.$modal.msgSuccess("用户" + username + "解锁成功")
-  }).catch(() => {})
-}
-
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download("monitor/logininfor/export", {
-    ...queryParams.value,
-  }, `logininfor_${new Date().getTime()}.xlsx`)
-}
-
-getList()
-</script>
+<template>
+   <div class="app-container">
+      <basic-table
+         ref="tableRef"
+         :columns="columns"
+         :search-columns="searchColumns"
+         :query="queryList"
+         row-key="infoId"
+         :default-sort="defaultSort"
+         :default-params="defaultParams"
+         @sort-change="handleSortChange"
+      >
+         <template #toolbar="{ selection, ids }">
+            <el-col :span="1.5">
+               <el-button
+                  type="danger"
+                  plain
+                  icon="Delete"
+                  :disabled="!selection.length"
+                  @click="handleDelete(ids)"
+                  v-hasPermi="['monitor:logininfor:remove']"
+               >删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="danger"
+                  plain
+                  icon="Delete"
+                  @click="handleClean"
+                  v-hasPermi="['monitor:logininfor:remove']"
+               >清空</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="primary"
+                  plain
+                  icon="Unlock"
+                  :disabled="selection.length !== 1"
+                  @click="handleUnlock(selection)"
+                  v-hasPermi="['monitor:logininfor:unlock']"
+               >解锁</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="warning"
+                  plain
+                  icon="Download"
+                  @click="handleExport"
+                  v-hasPermi="['monitor:logininfor:export']"
+               >导出</el-button>
+            </el-col>
+         </template>
+      </basic-table>
+   </div>
+</template>
+
+<script setup name="Logininfor">
+import { list, delLogininfor, cleanLogininfor, unlockLogininfor } from "@/api/monitor/logininfor"
+
+const { proxy } = getCurrentInstance()
+const { sys_common_status } = useDict("sys_common_status")
+
+const tableRef = ref()
+
+// 默认排序
+const defaultSort = { prop: "loginTime", order: "descending" }
+
+// 默认查询参数（含排序初始值，重置时由 BasicTable 自动恢复）
+const defaultParams = {
+  orderByColumn: "loginTime",
+  isAsc: "descending"
+}
+
+// 搜索项配置
+const searchColumns = [
+  { label: "登录地址", prop: "ipaddr", component: "input", placeholder: "请输入登录地址", width: "240px" },
+  { label: "用户名称", prop: "userName", component: "input", placeholder: "请输入用户名称", width: "240px" },
+  { label: "状态", prop: "status", component: "select", dict: "sys_common_status", placeholder: "登录状态", width: "240px" },
+  { label: "登录时间", prop: "dateRange", component: "daterange", width: "308px" }
+]
+
+// 表格列配置
+const columns = [
+  { label: "访问编号", prop: "infoId", align: "center" },
+  { label: "用户名称", prop: "userName", align: "center", sortable: "custom" },
+  { label: "地址", prop: "ipaddr", align: "center" },
+  { label: "登录地点", prop: "loginLocation", align: "center" },
+  { label: "操作系统", prop: "os", align: "center" },
+  { label: "浏览器", prop: "browser", align: "center" },
+  { label: "登录状态", prop: "status", align: "center", dict: "sys_common_status" },
+  { label: "描述", prop: "msg", align: "center" },
+  { label: "访问时间", prop: "loginTime", align: "center", width: 180, sortable: "custom", parseTime: true }
+]
+
+// 查询函数
+function queryList(params) {
+  const p = proxy.addDateRange({ ...params }, params.dateRange)
+  delete p.dateRange
+  return list(p)
+}
+
+/** 排序触发事件 */
+function handleSortChange(column) {
+  tableRef.value.setQueryParams({ orderByColumn: column.prop, isAsc: column.order })
+  tableRef.value.reload()
+}
+
+/** 删除按钮操作 */
+function handleDelete(infoIds) {
+  proxy.$modal.confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?').then(function () {
+    return delLogininfor(infoIds)
+  }).then(() => {
+    tableRef.value.refresh()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 清空按钮操作 */
+function handleClean() {
+  proxy.$modal.confirm("是否确认清空所有登录日志数据项?").then(function () {
+    return cleanLogininfor()
+  }).then(() => {
+    tableRef.value.refresh()
+    proxy.$modal.msgSuccess("清空成功")
+  }).catch(() => {})
+}
+
+/** 解锁按钮操作 */
+function handleUnlock(selection) {
+  const username = selection.map(item => item.userName)
+  proxy.$modal.confirm('是否确认解锁用户"' + username + '"数据项?').then(function () {
+    return unlockLogininfor(username)
+  }).then(() => {
+    proxy.$modal.msgSuccess("用户" + username + "解锁成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("monitor/logininfor/export", {
+    ...tableRef.value.getQueryParams()
+  }, `logininfor_${new Date().getTime()}.xlsx`)
+}
+</script>
diff --git a/src/views/monitor/online/index.vue b/src/views/monitor/online/index.vue
index fcfee24..2712b01 100644
--- a/src/views/monitor/online/index.vue
+++ b/src/views/monitor/online/index.vue
@@ -1,109 +1,64 @@
-<template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true">
-         <el-form-item label="登录地址" prop="ipaddr">
-            <el-input
-               v-model="queryParams.ipaddr"
-               placeholder="请输入登录地址"
-               clearable
-               style="width: 200px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="用户名称" prop="userName">
-            <el-input
-               v-model="queryParams.userName"
-               placeholder="请输入用户名称"
-               clearable
-               style="width: 200px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
-      <el-table
-         v-loading="loading"
-         :data="onlineList.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
-         style="width: 100%;"
-      >
-         <el-table-column label="序号" width="50" type="index" align="center">
-            <template #default="scope">
-               <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="会话编号" align="center" prop="tokenId" :show-overflow-tooltip="true" />
-         <el-table-column label="登录名称" align="center" prop="userName" :show-overflow-tooltip="true" />
-         <el-table-column label="所属部门" align="center" prop="deptName" :show-overflow-tooltip="true" />
-         <el-table-column label="主机" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
-         <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
-         <el-table-column label="操作系统" align="center" prop="os" :show-overflow-tooltip="true" />
-         <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
-         <el-table-column label="登录时间" align="center" prop="loginTime" width="180">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.loginTime) }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template #default="scope">
-               <el-button link type="primary" icon="Delete" @click="handleForceLogout(scope.row)" v-hasPermi="['monitor:online:forceLogout']">强退</el-button>
-            </template>
-         </el-table-column>
-      </el-table>
-
-      <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" />
-   </div>
-</template>
-
-<script setup name="Online">
-import { forceLogout, list as initData } from "@/api/monitor/online"
-
-const { proxy } = getCurrentInstance()
-
-const onlineList = ref([])
-const loading = ref(true)
-const total = ref(0)
-const pageNum = ref(1)
-const pageSize = ref(10)
-
-const queryParams = ref({
-  ipaddr: undefined,
-  userName: undefined
-})
-
-/** 查询登录日志列表 */
-function getList() {
-  loading.value = true
-  initData(queryParams.value).then(response => {
-    onlineList.value = response.rows
-    total.value = response.total
-    loading.value = false
-  })
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  pageNum.value = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  proxy.resetForm("queryRef")
-  handleQuery()
-}
-
-/** 强退按钮操作 */
-function handleForceLogout(row) {
-  proxy.$modal.confirm('是否确认强退名称为"' + row.userName + '"的用户?').then(function () {
-    return forceLogout(row.tokenId)
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => {})
-}
-
-getList()
-</script>
+<template>
+  <div class="app-container">
+    <basic-table
+      ref="tableRef"
+      :columns="columns"
+      :search-columns="searchColumns"
+      :query="queryList"
+      :selection="false"
+      :show-toolbar="false"
+      show-index
+    >
+      <template #col-action="{ row }">
+        <el-button link type="primary" icon="Delete" @click="handleForceLogout(row)" v-hasPermi="['monitor:online:forceLogout']">强退</el-button>
+      </template>
+    </basic-table>
+  </div>
+</template>
+
+<script setup name="Online">
+import { forceLogout, list as initData } from "@/api/monitor/online"
+
+const { proxy } = getCurrentInstance()
+const tableRef = ref()
+
+// 搜索项配置
+const searchColumns = [
+  { label: "登录地址", prop: "ipaddr", component: "input", placeholder: "请输入登录地址", width: "200px" },
+  { label: "用户名称", prop: "userName", component: "input", placeholder: "请输入用户名称", width: "200px" }
+]
+
+// 表格列配置
+const columns = [
+  { label: "会话编号", prop: "tokenId", align: "center" },
+  { label: "登录名称", prop: "userName", align: "center" },
+  { label: "所属部门", prop: "deptName", align: "center" },
+  { label: "主机", prop: "ipaddr", align: "center" },
+  { label: "登录地点", prop: "loginLocation", align: "center" },
+  { label: "操作系统", prop: "os", align: "center" },
+  { label: "浏览器", prop: "browser", align: "center" },
+  { label: "登录时间", prop: "loginTime", align: "center", width: 180, parseTime: true },
+  { label: "操作", prop: "action", align: "center", showInToolbar: false }
+]
+
+// 查询函数（在线用户接口返回全量数据，前端分页切片）
+function queryList(params) {
+  return initData({ ipaddr: params.ipaddr, userName: params.userName }).then(res => {
+    const start = (params.pageNum - 1) * params.pageSize
+    return {
+      rows: res.rows.slice(start, start + params.pageSize),
+      total: res.total
+    }
+  })
+}
+
+/** 强退按钮操作 */
+function handleForceLogout(row) {
+  proxy.$modal.confirm('是否确认强退名称为"' + row.userName + '"的用户?').then(function () {
+    return forceLogout(row.tokenId)
+  }).then(() => {
+    tableRef.value.refresh()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+</script>
diff --git a/src/views/monitor/operlog/index.vue b/src/views/monitor/operlog/index.vue
index eb4a8cc..2bdb41f 100644
--- a/src/views/monitor/operlog/index.vue
+++ b/src/views/monitor/operlog/index.vue
@@ -1,262 +1,141 @@
-<template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-         <el-form-item label="操作地址" prop="operIp">
-            <el-input
-               v-model="queryParams.operIp"
-               placeholder="请输入操作地址"
-               clearable
-               style="width: 240px;"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="系统模块" prop="title">
-            <el-input
-               v-model="queryParams.title"
-               placeholder="请输入系统模块"
-               clearable
-               style="width: 240px;"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="操作人员" prop="operName">
-            <el-input
-               v-model="queryParams.operName"
-               placeholder="请输入操作人员"
-               clearable
-               style="width: 240px;"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="类型" prop="businessType">
-            <el-select
-               v-model="queryParams.businessType"
-               placeholder="操作类型"
-               clearable
-               style="width: 240px"
-            >
-               <el-option
-                  v-for="dict in sys_oper_type"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item label="状态" prop="status">
-            <el-select
-               v-model="queryParams.status"
-               placeholder="操作状态"
-               clearable
-               style="width: 240px"
-            >
-               <el-option
-                  v-for="dict in sys_common_status"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item label="操作时间" style="width: 308px">
-            <el-date-picker
-               v-model="dateRange"
-               value-format="YYYY-MM-DD HH:mm:ss"
-               type="daterange"
-               range-separator="-"
-               start-placeholder="开始日期"
-               end-placeholder="结束日期"
-               :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
-            ></el-date-picker>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
-
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               :disabled="multiple"
-               @click="handleDelete"
-               v-hasPermi="['monitor:operlog:remove']"
-            >删除</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               @click="handleClean"
-               v-hasPermi="['monitor:operlog:remove']"
-            >清空</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="warning"
-               plain
-               icon="Download"
-               @click="handleExport"
-               v-hasPermi="['monitor:operlog:export']"
-            >导出</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
-
-      <el-table ref="operlogRef" v-loading="loading" :data="operlogList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
-         <el-table-column type="selection" width="50" align="center" />
-         <el-table-column label="日志编号" align="center" prop="operId" />
-         <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
-         <el-table-column label="操作类型" align="center" prop="businessType">
-            <template #default="scope">
-               <dict-tag :options="sys_oper_type" :value="scope.row.businessType" />
-            </template>
-         </el-table-column>
-         <el-table-column label="操作人员" align="center" width="110" prop="operName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
-         <el-table-column label="操作地址" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
-         <el-table-column label="操作状态" align="center" prop="status">
-            <template #default="scope">
-               <dict-tag :options="sys_common_status" :value="scope.row.status" />
-            </template>
-         </el-table-column>
-         <el-table-column label="操作日期" align="center" prop="operTime" width="180" sortable="custom" :sort-orders="['descending', 'ascending']">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.operTime) }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="消耗时间" align="center" prop="costTime" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']">
-            <template #default="scope">
-               <span>{{ scope.row.costTime }}毫秒</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template #default="scope">
-               <el-button link type="primary" icon="View" @click="handleDetail(scope.row, scope.index)" v-hasPermi="['monitor:operlog:query']">详细</el-button>
-            </template>
-         </el-table-column>
-      </el-table>
-
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
-
-      <operlog-detail v-model:visible="detailVisible" :row="detailRow" />
-   </div>
-</template>
-
-<script setup name="Operlog">
-import OperlogDetail from './detail'
-import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog"
-
-const { proxy } = getCurrentInstance()
-const { sys_oper_type, sys_common_status } = useDict("sys_oper_type", "sys_common_status")
-
-const operlogList = ref([])
-const detailVisible = ref(false)
-const loading = ref(true)
-const detailRow = ref({})
-const showSearch = ref(true)
-const ids = ref([])
-const single = ref(true)
-const multiple = ref(true)
-const total = ref(0)
-const title = ref("")
-const dateRange = ref([])
-const defaultSort = ref({ prop: "operTime", order: "descending" })
-
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    operIp: undefined,
-    title: undefined,
-    operName: undefined,
-    businessType: undefined,
-    status: undefined
-  }
-})
-
-const { queryParams, form } = toRefs(data)
-
-/** 查询登录日志 */
-function getList() {
-  loading.value = true
-  list(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
-    operlogList.value = response.rows
-    total.value = response.total
-    loading.value = false
-  })
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  dateRange.value = []
-  proxy.resetForm("queryRef")
-  queryParams.value.pageNum = 1
-  proxy.$refs["operlogRef"].sort(defaultSort.value.prop, defaultSort.value.order)
-}
-
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.operId)
-  multiple.value = !selection.length
-}
-
-/** 排序触发事件 */
-function handleSortChange(column, prop, order) {
-  queryParams.value.orderByColumn = column.prop
-  queryParams.value.isAsc = column.order
-  getList()
-}
-
-/** 详细按钮操作 */
-function handleDetail(row) {
-  detailRow.value = row
-  detailVisible.value = true
-}
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const operIds = row.operId || ids.value
-  proxy.$modal.confirm('是否确认删除日志编号为"' + operIds + '"的数据项?').then(function () {
-    return delOperlog(operIds)
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => {})
-}
-
-/** 清空按钮操作 */
-function handleClean() {
-  proxy.$modal.confirm("是否确认清空所有操作日志数据项?").then(function () {
-    return cleanOperlog()
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("清空成功")
-  }).catch(() => {})
-}
-
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download("monitor/operlog/export",{
-    ...queryParams.value,
-  }, `config_${new Date().getTime()}.xlsx`)
-}
-
-getList()
-</script>
+<template>
+   <div class="app-container">
+      <basic-table
+         ref="tableRef"
+         :columns="columns"
+         :search-columns="searchColumns"
+         :query="queryList"
+         row-key="operId"
+         :default-sort="defaultSort"
+         :default-params="defaultParams"
+         @sort-change="handleSortChange"
+      >
+         <template #toolbar="{ selection, ids }">
+            <el-col :span="1.5">
+               <el-button
+                  type="danger"
+                  plain
+                  icon="Delete"
+                  :disabled="!selection.length"
+                  @click="handleDelete(ids)"
+                  v-hasPermi="['monitor:operlog:remove']"
+               >删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="danger"
+                  plain
+                  icon="Delete"
+                  @click="handleClean"
+                  v-hasPermi="['monitor:operlog:remove']"
+               >清空</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="warning"
+                  plain
+                  icon="Download"
+                  @click="handleExport"
+                  v-hasPermi="['monitor:operlog:export']"
+               >导出</el-button>
+            </el-col>
+         </template>
+
+         <template #col-action="{ row }">
+            <el-button link type="primary" icon="View" @click="handleDetail(row)" v-hasPermi="['monitor:operlog:query']">详细</el-button>
+         </template>
+      </basic-table>
+
+      <operlog-detail v-model:visible="detailVisible" :row="detailRow" />
+   </div>
+</template>
+
+<script setup name="Operlog">
+import OperlogDetail from './detail'
+import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog"
+
+const { proxy } = getCurrentInstance()
+const { sys_oper_type, sys_common_status } = useDict("sys_oper_type", "sys_common_status")
+
+const tableRef = ref()
+const detailVisible = ref(false)
+const detailRow = ref({})
+
+// 默认排序
+const defaultSort = { prop: "operTime", order: "descending" }
+
+// 默认查询参数（含排序初始值，重置时由 BasicTable 自动恢复）
+const defaultParams = {
+  orderByColumn: "operTime",
+  isAsc: "descending"
+}
+
+// 搜索项配置
+const searchColumns = [
+  { label: "操作地址", prop: "operIp", component: "input", placeholder: "请输入操作地址", width: "240px" },
+  { label: "系统模块", prop: "title", component: "input", placeholder: "请输入系统模块", width: "240px" },
+  { label: "操作人员", prop: "operName", component: "input", placeholder: "请输入操作人员", width: "240px" },
+  { label: "类型", prop: "businessType", component: "select", dict: "sys_oper_type", placeholder: "操作类型", width: "240px" },
+  { label: "状态", prop: "status", component: "select", dict: "sys_common_status", placeholder: "操作状态", width: "240px" },
+  { label: "操作时间", prop: "dateRange", component: "daterange", width: "308px" }
+]
+
+// 表格列配置
+const columns = [
+  { label: "日志编号", prop: "operId", align: "center" },
+  { label: "系统模块", prop: "title", align: "center" },
+  { label: "操作类型", prop: "businessType", align: "center", dict: "sys_oper_type" },
+  { label: "操作人员", prop: "operName", align: "center", width: 110, sortable: "custom" },
+  { label: "操作地址", prop: "operIp", align: "center", width: 130 },
+  { label: "操作状态", prop: "status", align: "center", dict: "sys_common_status" },
+  { label: "操作日期", prop: "operTime", align: "center", width: 180, sortable: "custom", parseTime: true },
+  { label: "消耗时间", prop: "costTime", align: "center", width: 110, sortable: "custom", formatter: (row, col, val) => val + '毫秒' },
+  { label: "操作", prop: "action", align: "center", showInToolbar: false }
+]
+
+// 查询函数
+function queryList(params) {
+  const p = proxy.addDateRange({ ...params }, params.dateRange)
+  delete p.dateRange
+  return list(p)
+}
+
+/** 排序触发事件 */
+function handleSortChange(column) {
+  tableRef.value.setQueryParams({ orderByColumn: column.prop, isAsc: column.order })
+  tableRef.value.reload()
+}
+
+/** 详细按钮操作 */
+function handleDetail(row) {
+  detailRow.value = row
+  detailVisible.value = true
+}
+
+/** 删除按钮操作 */
+function handleDelete(operIds) {
+  proxy.$modal.confirm('是否确认删除日志编号为"' + operIds + '"的数据项?').then(function () {
+    return delOperlog(operIds)
+  }).then(() => {
+    tableRef.value.refresh()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 清空按钮操作 */
+function handleClean() {
+  proxy.$modal.confirm("是否确认清空所有操作日志数据项?").then(function () {
+    return cleanOperlog()
+  }).then(() => {
+    tableRef.value.refresh()
+    proxy.$modal.msgSuccess("清空成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("monitor/operlog/export", {
+    ...tableRef.value.getQueryParams()
+  }, `config_${new Date().getTime()}.xlsx`)
+}
+</script>
diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue
index 01db3ca..2489160 100644
--- a/src/views/system/config/index.vue
+++ b/src/views/system/config/index.vue
@@ -1,316 +1,230 @@
-<template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-         <el-form-item label="参数名称" prop="configName">
-            <el-input
-               v-model="queryParams.configName"
-               placeholder="请输入参数名称"
-               clearable
-               style="width: 240px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="参数键名" prop="configKey">
-            <el-input
-               v-model="queryParams.configKey"
-               placeholder="请输入参数键名"
-               clearable
-               style="width: 240px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="系统内置" prop="configType">
-            <el-select v-model="queryParams.configType" placeholder="系统内置" clearable style="width: 240px">
-               <el-option
-                  v-for="dict in sys_yes_no"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item label="创建时间" style="width: 308px;">
-            <el-date-picker
-               v-model="dateRange"
-               value-format="YYYY-MM-DD"
-               type="daterange"
-               range-separator="-"
-               start-placeholder="开始日期"
-               end-placeholder="结束日期"
-            ></el-date-picker>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
-
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Plus"
-               @click="handleAdd"
-               v-hasPermi="['system:config:add']"
-            >新增</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="success"
-               plain
-               icon="Edit"
-               :disabled="single"
-               @click="handleUpdate"
-               v-hasPermi="['system:config:edit']"
-            >修改</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               :disabled="multiple"
-               @click="handleDelete"
-               v-hasPermi="['system:config:remove']"
-            >删除</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="warning"
-               plain
-               icon="Download"
-               @click="handleExport"
-               v-hasPermi="['system:config:export']"
-            >导出</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Refresh"
-               @click="handleRefreshCache"
-               v-hasPermi="['system:config:remove']"
-            >刷新缓存</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
-
-      <el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
-         <el-table-column type="selection" width="55" align="center" />
-         <el-table-column label="参数主键" align="center" prop="configId" />
-         <el-table-column label="参数名称" align="center" prop="configName" :show-overflow-tooltip="true" />
-         <el-table-column label="参数键名" align="center" prop="configKey" :show-overflow-tooltip="true" />
-         <el-table-column label="参数键值" align="center" prop="configValue" :show-overflow-tooltip="true" />
-         <el-table-column label="系统内置" align="center" prop="configType">
-            <template #default="scope">
-               <dict-tag :options="sys_yes_no" :value="scope.row.configType" />
-            </template>
-         </el-table-column>
-         <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
-         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
-            <template #default="scope">
-               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:config:edit']" >修改</el-button>
-               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:config:remove']">删除</el-button>
-            </template>
-         </el-table-column>
-      </el-table>
-
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
-
-      <!-- 添加或修改参数配置对话框 -->
-      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-         <el-form ref="configRef" :model="form" :rules="rules" label-width="80px">
-            <el-form-item label="参数名称" prop="configName">
-               <el-input v-model="form.configName" placeholder="请输入参数名称" />
-            </el-form-item>
-            <el-form-item label="参数键名" prop="configKey">
-               <el-input v-model="form.configKey" placeholder="请输入参数键名" />
-            </el-form-item>
-            <el-form-item label="参数键值" prop="configValue">
-               <el-input v-model="form.configValue" type="textarea" placeholder="请输入参数键值" />
-            </el-form-item>
-            <el-form-item label="系统内置" prop="configType">
-               <el-radio-group v-model="form.configType">
-                  <el-radio
-                     v-for="dict in sys_yes_no"
-                     :key="dict.value"
-                     :value="dict.value"
-                  >{{ dict.label }}</el-radio>
-               </el-radio-group>
-            </el-form-item>
-            <el-form-item label="备注" prop="remark">
-               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-            </el-form-item>
-         </el-form>
-         <template #footer>
-            <div class="dialog-footer">
-               <el-button type="primary" @click="submitForm">确 定</el-button>
-               <el-button @click="cancel">取 消</el-button>
-            </div>
-         </template>
-      </el-dialog>
-   </div>
-</template>
-
-<script setup name="Config">
-import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config"
-
-const { proxy } = getCurrentInstance()
-const { sys_yes_no } = useDict("sys_yes_no")
-
-const configList = ref([])
-const open = ref(false)
-const loading = ref(true)
-const showSearch = ref(true)
-const ids = ref([])
-const single = ref(true)
-const multiple = ref(true)
-const total = ref(0)
-const title = ref("")
-const dateRange = ref([])
-
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    configName: undefined,
-    configKey: undefined,
-    configType: undefined
-  },
-  rules: {
-    configName: [{ required: true, message: "参数名称不能为空", trigger: "blur" }],
-    configKey: [{ required: true, message: "参数键名不能为空", trigger: "blur" }],
-    configValue: [{ required: true, message: "参数键值不能为空", trigger: "blur" }]
-  }
-})
-
-const { queryParams, form, rules } = toRefs(data)
-
-/** 查询参数列表 */
-function getList() {
-  loading.value = true
-  listConfig(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
-    configList.value = response.rows
-    total.value = response.total
-    loading.value = false
-  })
-}
-
-/** 取消按钮 */
-function cancel() {
-  open.value = false
-  reset()
-}
-
-/** 表单重置 */
-function reset() {
-  form.value = {
-    configId: undefined,
-    configName: undefined,
-    configKey: undefined,
-    configValue: undefined,
-    configType: "Y",
-    remark: undefined
-  }
-  proxy.resetForm("configRef")
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  dateRange.value = []
-  proxy.resetForm("queryRef")
-  handleQuery()
-}
-
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.configId)
-  single.value = selection.length != 1
-  multiple.value = !selection.length
-}
-
-/** 新增按钮操作 */
-function handleAdd() {
-  reset()
-  open.value = true
-  title.value = "添加参数"
-}
-
-/** 修改按钮操作 */
-function handleUpdate(row) {
-  reset()
-  const configId = row.configId || ids.value
-  getConfig(configId).then(response => {
-    form.value = response.data
-    open.value = true
-    title.value = "修改参数"
-  })
-}
-
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["configRef"].validate(valid => {
-    if (valid) {
-      if (form.value.configId != undefined) {
-        updateConfig(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功")
-          open.value = false
-          getList()
-        })
-      } else {
-        addConfig(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功")
-          open.value = false
-          getList()
-        })
-      }
-    }
-  })
-}
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const configIds = row.configId || ids.value
-  proxy.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？').then(function () {
-    return delConfig(configIds)
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => {})
-}
-
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download("system/config/export", {
-    ...queryParams.value
-  }, `config_${new Date().getTime()}.xlsx`)
-}
-
-/** 刷新缓存按钮操作 */
-function handleRefreshCache() {
-  refreshCache().then(() => {
-    proxy.$modal.msgSuccess("刷新缓存成功")
-  })
-}
-
-getList()
-</script>
+<template>
+   <div class="app-container">
+      <basic-table
+         ref="tableRef"
+         :columns="columns"
+         :search-columns="searchColumns"
+         :query="queryList"
+         row-key="configId"
+      >
+         <template #toolbar="{ selection, ids }">
+            <el-col :span="1.5">
+               <el-button
+                  type="primary"
+                  plain
+                  icon="Plus"
+                  @click="handleAdd"
+                  v-hasPermi="['system:config:add']"
+               >新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="success"
+                  plain
+                  icon="Edit"
+                  :disabled="selection.length !== 1"
+                  @click="handleUpdate(selection[0])"
+                  v-hasPermi="['system:config:edit']"
+               >修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="danger"
+                  plain
+                  icon="Delete"
+                  :disabled="!selection.length"
+                  @click="handleDelete(ids)"
+                  v-hasPermi="['system:config:remove']"
+               >删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="warning"
+                  plain
+                  icon="Download"
+                  @click="handleExport"
+                  v-hasPermi="['system:config:export']"
+               >导出</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="danger"
+                  plain
+                  icon="Refresh"
+                  @click="handleRefreshCache"
+                  v-hasPermi="['system:config:remove']"
+               >刷新缓存</el-button>
+            </el-col>
+         </template>
+
+         <template #col-action="{ row }">
+            <el-button link type="primary" icon="Edit" @click="handleUpdate(row)" v-hasPermi="['system:config:edit']">修改</el-button>
+            <el-button link type="primary" icon="Delete" @click="handleDelete(row.configId)" v-hasPermi="['system:config:remove']">删除</el-button>
+         </template>
+      </basic-table>
+
+      <!-- 添加或修改参数配置对话框 -->
+      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+         <el-form ref="configRef" :model="form" :rules="rules" label-width="80px">
+            <el-form-item label="参数名称" prop="configName">
+               <el-input v-model="form.configName" placeholder="请输入参数名称" />
+            </el-form-item>
+            <el-form-item label="参数键名" prop="configKey">
+               <el-input v-model="form.configKey" placeholder="请输入参数键名" />
+            </el-form-item>
+            <el-form-item label="参数键值" prop="configValue">
+               <el-input v-model="form.configValue" type="textarea" placeholder="请输入参数键值" />
+            </el-form-item>
+            <el-form-item label="系统内置" prop="configType">
+               <el-radio-group v-model="form.configType">
+                  <el-radio
+                     v-for="dict in sys_yes_no"
+                     :key="dict.value"
+                     :value="dict.value"
+                  >{{ dict.label }}</el-radio>
+               </el-radio-group>
+            </el-form-item>
+            <el-form-item label="备注" prop="remark">
+               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+            </el-form-item>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" @click="submitForm">确 定</el-button>
+               <el-button @click="cancel">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
+   </div>
+</template>
+
+<script setup name="Config">
+import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config"
+
+const { proxy } = getCurrentInstance()
+const { sys_yes_no } = useDict("sys_yes_no")
+
+const tableRef = ref()
+const open = ref(false)
+const title = ref("")
+
+// 搜索项配置
+const searchColumns = [
+  { label: "参数名称", prop: "configName", component: "input", placeholder: "请输入参数名称", width: "240px" },
+  { label: "参数键名", prop: "configKey", component: "input", placeholder: "请输入参数键名", width: "240px" },
+  { label: "系统内置", prop: "configType", component: "select", dict: "sys_yes_no", placeholder: "系统内置", width: "240px" },
+  { label: "创建时间", prop: "dateRange", component: "daterange", width: "320px" }
+]
+
+// 表格列配置
+const columns = [
+  { label: "参数主键", prop: "configId", align: "center" },
+  { label: "参数名称", prop: "configName", align: "center" },
+  { label: "参数键名", prop: "configKey", align: "center" },
+  { label: "参数键值", prop: "configValue", align: "center" },
+  { label: "系统内置", prop: "configType", align: "center", dict: "sys_yes_no" },
+  { label: "备注", prop: "remark", align: "center" },
+  { label: "创建时间", prop: "createTime", align: "center", width: 180, parseTime: true },
+  { label: "操作", prop: "action", align: "center", width: 150, showInToolbar: false }
+]
+
+// 查询函数（BasicTable 调用，返回 { rows, total }）
+function queryList(params) {
+  const p = proxy.addDateRange({ ...params }, params.dateRange)
+  delete p.dateRange
+  return listConfig(p)
+}
+
+const data = reactive({
+  form: {},
+  rules: {
+    configName: [{ required: true, message: "参数名称不能为空", trigger: "blur" }],
+    configKey: [{ required: true, message: "参数键名不能为空", trigger: "blur" }],
+    configValue: [{ required: true, message: "参数键值不能为空", trigger: "blur" }]
+  }
+})
+
+const { form, rules } = toRefs(data)
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false
+  reset()
+}
+
+/** 表单重置 */
+function reset() {
+  form.value = {
+    configId: undefined,
+    configName: undefined,
+    configKey: undefined,
+    configValue: undefined,
+    configType: "Y",
+    remark: undefined
+  }
+  proxy.resetForm("configRef")
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加参数"
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const configId = row.configId
+  getConfig(configId).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改参数"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["configRef"].validate(valid => {
+    if (valid) {
+      if (form.value.configId != undefined) {
+        updateConfig(form.value).then(() => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          tableRef.value.refresh()
+        })
+      } else {
+        addConfig(form.value).then(() => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          tableRef.value.refresh()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(configIds) {
+  proxy.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？').then(function () {
+    return delConfig(configIds)
+  }).then(() => {
+    tableRef.value.refresh()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("system/config/export", {
+    ...tableRef.value.getQueryParams()
+  }, `config_${new Date().getTime()}.xlsx`)
+}
+
+/** 刷新缓存按钮操作 */
+function handleRefreshCache() {
+  refreshCache().then(() => {
+    proxy.$modal.msgSuccess("刷新缓存成功")
+  })
+}
+</script>
diff --git a/src/views/system/dict/data.vue b/src/views/system/dict/data.vue
index 410be6f..0ec660b 100644
--- a/src/views/system/dict/data.vue
+++ b/src/views/system/dict/data.vue
@@ -1,362 +1,276 @@
-<template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
-         <el-form-item label="字典名称" prop="dictType">
-            <el-select v-model="queryParams.dictType" style="width: 200px">
-               <el-option
-                  v-for="item in typeOptions"
-                  :key="item.dictId"
-                  :label="item.dictName"
-                  :value="item.dictType"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item label="字典标签" prop="dictLabel">
-            <el-input
-               v-model="queryParams.dictLabel"
-               placeholder="请输入字典标签"
-               clearable
-               style="width: 200px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="状态" prop="status">
-            <el-select v-model="queryParams.status" placeholder="数据状态" clearable style="width: 200px">
-               <el-option
-                  v-for="dict in sys_normal_disable"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
-
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Plus"
-               @click="handleAdd"
-               v-hasPermi="['system:dict:add']"
-            >新增</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="success"
-               plain
-               icon="Edit"
-               :disabled="single"
-               @click="handleUpdate"
-               v-hasPermi="['system:dict:edit']"
-            >修改</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               :disabled="multiple"
-               @click="handleDelete"
-               v-hasPermi="['system:dict:remove']"
-            >删除</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="warning"
-               plain
-               icon="Download"
-               @click="handleExport"
-               v-hasPermi="['system:dict:export']"
-            >导出</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="warning"
-               plain
-               icon="Close"
-               @click="handleClose"
-            >关闭</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
-
-      <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-         <el-table-column type="selection" width="55" align="center" />
-         <el-table-column label="字典编码" align="center" prop="dictCode" />
-         <el-table-column label="字典标签" align="center" prop="dictLabel">
-            <template #default="scope">
-               <span v-if="(scope.row.listClass == '' || scope.row.listClass == 'default') && (scope.row.cssClass == '' || scope.row.cssClass == null)">{{ scope.row.dictLabel }}</span>
-               <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass" :class="scope.row.cssClass">{{ scope.row.dictLabel }}</el-tag>
-            </template>
-         </el-table-column>
-         <el-table-column label="字典键值" align="center" prop="dictValue" />
-         <el-table-column label="字典排序" align="center" prop="dictSort" />
-         <el-table-column label="状态" align="center" prop="status">
-            <template #default="scope">
-               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
-            </template>
-         </el-table-column>
-         <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
-         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
-            <template #default="scope">
-               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']">修改</el-button>
-               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']">删除</el-button>
-            </template>
-         </el-table-column>
-      </el-table>
-
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
-
-      <!-- 添加或修改参数配置对话框 -->
-      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-         <el-form ref="dataRef" :model="form" :rules="rules" label-width="80px">
-            <el-form-item label="字典类型">
-               <el-input v-model="form.dictType" :disabled="true" />
-            </el-form-item>
-            <el-form-item label="数据标签" prop="dictLabel">
-               <el-input v-model="form.dictLabel" placeholder="请输入数据标签" />
-            </el-form-item>
-            <el-form-item label="数据键值" prop="dictValue">
-               <el-input v-model="form.dictValue" placeholder="请输入数据键值" />
-            </el-form-item>
-            <el-form-item label="样式属性" prop="cssClass">
-               <el-input v-model="form.cssClass" placeholder="请输入样式属性" />
-            </el-form-item>
-            <el-form-item label="显示排序" prop="dictSort">
-               <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
-            </el-form-item>
-            <el-form-item label="回显样式" prop="listClass">
-               <el-select v-model="form.listClass">
-                  <el-option
-                     v-for="item in listClassOptions"
-                     :key="item.value"
-                     :label="item.label + '(' + item.value + ')'"
-                     :value="item.value"
-                  ></el-option>
-               </el-select>
-            </el-form-item>
-            <el-form-item label="状态" prop="status">
-               <el-radio-group v-model="form.status">
-                  <el-radio
-                     v-for="dict in sys_normal_disable"
-                     :key="dict.value"
-                     :value="dict.value"
-                  >{{ dict.label }}</el-radio>
-               </el-radio-group>
-            </el-form-item>
-            <el-form-item label="备注" prop="remark">
-               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-            </el-form-item>
-         </el-form>
-         <template #footer>
-            <div class="dialog-footer">
-               <el-button type="primary" @click="submitForm">确 定</el-button>
-               <el-button @click="cancel">取 消</el-button>
-            </div>
-         </template>
-      </el-dialog>
-   </div>
-</template>
-
-<script setup name="Data">
-import useDictStore from '@/store/modules/dict'
-import { optionselect as getDictOptionselect, getType } from "@/api/system/dict/type"
-import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data"
-
-const { proxy } = getCurrentInstance()
-const { sys_normal_disable } = useDict("sys_normal_disable")
-
-const dataList = ref([])
-const open = ref(false)
-const loading = ref(true)
-const showSearch = ref(true)
-const ids = ref([])
-const single = ref(true)
-const multiple = ref(true)
-const total = ref(0)
-const title = ref("")
-const defaultDictType = ref("")
-const typeOptions = ref([])
-const route = useRoute()
-// 数据标签回显样式
-const listClassOptions = ref([
-  { value: "default", label: "默认" }, 
-  { value: "primary", label: "主要" }, 
-  { value: "success", label: "成功" },
-  { value: "info", label: "信息" },
-  { value: "warning", label: "警告" },
-  { value: "danger", label: "危险" }
-])
-
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    dictType: undefined,
-    dictLabel: undefined,
-    status: undefined
-  },
-  rules: {
-    dictLabel: [{ required: true, message: "数据标签不能为空", trigger: "blur" }],
-    dictValue: [{ required: true, message: "数据键值不能为空", trigger: "blur" }],
-    dictSort: [{ required: true, message: "数据顺序不能为空", trigger: "blur" }]
-  }
-})
-
-const { queryParams, form, rules } = toRefs(data)
-
-/** 查询字典类型详细 */
-function getTypes(dictId) {
-  getType(dictId).then(response => {
-    queryParams.value.dictType = response.data.dictType
-    defaultDictType.value = response.data.dictType
-    getList()
-  })
-}
-
-/** 查询字典类型列表 */
-function getTypeList() {
-  getDictOptionselect().then(response => {
-    typeOptions.value = response.data
-  })
-}
-
-/** 查询字典数据列表 */
-function getList() {
-  loading.value = true
-  listData(queryParams.value).then(response => {
-    dataList.value = response.rows
-    total.value = response.total
-    loading.value = false
-  })
-}
-
-/** 取消按钮 */
-function cancel() {
-  open.value = false
-  reset()
-}
-
-/** 表单重置 */
-function reset() {
-  form.value = {
-    dictCode: undefined,
-    dictLabel: undefined,
-    dictValue: undefined,
-    cssClass: undefined,
-    listClass: "default",
-    dictSort: 0,
-    status: "0",
-    remark: undefined
-  }
-  proxy.resetForm("dataRef")
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1
-  getList()
-}
-
-/** 返回按钮操作 */
-function handleClose() {
-  const obj = { path: "/system/dict" }
-  proxy.$tab.closeOpenPage(obj)
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  proxy.resetForm("queryRef")
-  queryParams.value.dictType = defaultDictType.value
-  handleQuery()
-}
-
-/** 新增按钮操作 */
-function handleAdd() {
-  reset()
-  open.value = true
-  title.value = "添加字典数据"
-  form.value.dictType = queryParams.value.dictType
-}
-
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.dictCode)
-  single.value = selection.length != 1
-  multiple.value = !selection.length
-}
-
-/** 修改按钮操作 */
-function handleUpdate(row) {
-  reset()
-  const dictCode = row.dictCode || ids.value
-  getData(dictCode).then(response => {
-    form.value = response.data
-    open.value = true
-    title.value = "修改字典数据"
-  })
-}
-
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["dataRef"].validate(valid => {
-    if (valid) {
-      if (form.value.dictCode != undefined) {
-        updateData(form.value).then(response => {
-          useDictStore().removeDict(queryParams.value.dictType)
-          proxy.$modal.msgSuccess("修改成功")
-          open.value = false
-          getList()
-        })
-      } else {
-        addData(form.value).then(response => {
-          useDictStore().removeDict(queryParams.value.dictType)
-          proxy.$modal.msgSuccess("新增成功")
-          open.value = false
-          getList()
-        })
-      }
-    }
-  })
-}
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const dictCodes = row.dictCode || ids.value
-  proxy.$modal.confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项？').then(function() {
-    return delData(dictCodes)
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("删除成功")
-    useDictStore().removeDict(queryParams.value.dictType)
-  }).catch(() => {})
-}
-
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download("system/dict/data/export", {
-    ...queryParams.value
-  }, `dict_data_${new Date().getTime()}.xlsx`)
-}
-
-getTypes(route.params && route.params.dictId)
-getTypeList()
-</script>
+<template>
+   <div class="app-container">
+      <basic-table
+         ref="tableRef"
+         :columns="columns"
+         :search-columns="searchColumns"
+         :query="queryList"
+         :extra-params="extraParams"
+         :auto-load="false"
+         row-key="dictCode"
+      >
+         <template #toolbar="{ selection, ids }">
+            <el-col :span="1.5">
+               <el-button
+                  type="primary"
+                  plain
+                  icon="Plus"
+                  @click="handleAdd"
+                  v-hasPermi="['system:dict:add']"
+               >新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="success"
+                  plain
+                  icon="Edit"
+                  :disabled="selection.length !== 1"
+                  @click="handleUpdate(selection[0])"
+                  v-hasPermi="['system:dict:edit']"
+               >修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="danger"
+                  plain
+                  icon="Delete"
+                  :disabled="!selection.length"
+                  @click="handleDelete(ids)"
+                  v-hasPermi="['system:dict:remove']"
+               >删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="warning"
+                  plain
+                  icon="Download"
+                  @click="handleExport"
+                  v-hasPermi="['system:dict:export']"
+               >导出</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="warning"
+                  plain
+                  icon="Close"
+                  @click="handleClose"
+               >关闭</el-button>
+            </el-col>
+         </template>
+
+         <template #col-dictLabel="{ row }">
+            <span v-if="(row.listClass == '' || row.listClass == 'default') && (row.cssClass == '' || row.cssClass == null)">{{ row.dictLabel }}</span>
+            <el-tag v-else :type="row.listClass == 'primary' ? '' : row.listClass" :class="row.cssClass">{{ row.dictLabel }}</el-tag>
+         </template>
+
+         <template #col-action="{ row }">
+            <el-button link type="primary" icon="Edit" @click="handleUpdate(row)" v-hasPermi="['system:dict:edit']">修改</el-button>
+            <el-button link type="primary" icon="Delete" @click="handleDelete(row.dictCode)" v-hasPermi="['system:dict:remove']">删除</el-button>
+         </template>
+      </basic-table>
+
+      <!-- 添加或修改参数配置对话框 -->
+      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+         <el-form ref="dataRef" :model="form" :rules="rules" label-width="80px">
+            <el-form-item label="字典类型">
+               <el-input v-model="form.dictType" :disabled="true" />
+            </el-form-item>
+            <el-form-item label="数据标签" prop="dictLabel">
+               <el-input v-model="form.dictLabel" placeholder="请输入数据标签" />
+            </el-form-item>
+            <el-form-item label="数据键值" prop="dictValue">
+               <el-input v-model="form.dictValue" placeholder="请输入数据键值" />
+            </el-form-item>
+            <el-form-item label="样式属性" prop="cssClass">
+               <el-input v-model="form.cssClass" placeholder="请输入样式属性" />
+            </el-form-item>
+            <el-form-item label="显示排序" prop="dictSort">
+               <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
+            </el-form-item>
+            <el-form-item label="回显样式" prop="listClass">
+               <el-select v-model="form.listClass">
+                  <el-option
+                     v-for="item in listClassOptions"
+                     :key="item.value"
+                     :label="item.label + '(' + item.value + ')'"
+                     :value="item.value"
+                  ></el-option>
+               </el-select>
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+               <el-radio-group v-model="form.status">
+                  <el-radio
+                     v-for="dict in sys_normal_disable"
+                     :key="dict.value"
+                     :value="dict.value"
+                  >{{ dict.label }}</el-radio>
+               </el-radio-group>
+            </el-form-item>
+            <el-form-item label="备注" prop="remark">
+               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+            </el-form-item>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" @click="submitForm">确 定</el-button>
+               <el-button @click="cancel">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
+   </div>
+</template>
+
+<script setup name="Data">
+import useDictStore from '@/store/modules/dict'
+import { getType } from "@/api/system/dict/type"
+import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data"
+
+const { proxy } = getCurrentInstance()
+const { sys_normal_disable } = useDict("sys_normal_disable")
+
+const tableRef = ref()
+const open = ref(false)
+const title = ref("")
+const route = useRoute()
+// 上级字典类型（来自路由，固定参数，不随搜索重置）
+const extraParams = reactive({ dictType: "" })
+// 数据标签回显样式
+const listClassOptions = ref([
+  { value: "default", label: "默认" },
+  { value: "primary", label: "主要" },
+  { value: "success", label: "成功" },
+  { value: "info", label: "信息" },
+  { value: "warning", label: "警告" },
+  { value: "danger", label: "危险" }
+])
+
+// 搜索项配置
+const searchColumns = [
+  { label: "字典标签", prop: "dictLabel", component: "input", placeholder: "请输入字典标签", width: "200px" },
+  { label: "状态", prop: "status", component: "select", dict: "sys_normal_disable", placeholder: "数据状态", width: "200px" }
+]
+
+// 表格列配置
+const columns = [
+  { label: "字典编码", prop: "dictCode", align: "center" },
+  { label: "字典标签", prop: "dictLabel", align: "center" },
+  { label: "字典键值", prop: "dictValue", align: "center" },
+  { label: "字典排序", prop: "dictSort", align: "center" },
+  { label: "状态", prop: "status", align: "center", dict: "sys_normal_disable" },
+  { label: "备注", prop: "remark", align: "center" },
+  { label: "创建时间", prop: "createTime", align: "center", width: 180, parseTime: true },
+  { label: "操作", prop: "action", align: "center", width: 160, showInToolbar: false }
+]
+
+// 查询函数（BasicTable 调用，返回 { rows, total }）
+function queryList(params) {
+  return listData(params)
+}
+
+const data = reactive({
+  form: {},
+  rules: {
+    dictLabel: [{ required: true, message: "数据标签不能为空", trigger: "blur" }],
+    dictValue: [{ required: true, message: "数据键值不能为空", trigger: "blur" }],
+    dictSort: [{ required: true, message: "数据顺序不能为空", trigger: "blur" }]
+  }
+})
+
+const { form, rules } = toRefs(data)
+
+/** 查询字典类型详细（从路由参数获取上级 dictType） */
+onMounted(() => {
+  const dictId = route.params && route.params.dictId
+  getType(dictId).then(response => {
+    extraParams.dictType = response.data.dictType
+    tableRef.value.reload()
+  })
+})
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false
+  reset()
+}
+
+/** 表单重置 */
+function reset() {
+  form.value = {
+    dictCode: undefined,
+    dictLabel: undefined,
+    dictValue: undefined,
+    cssClass: undefined,
+    listClass: "default",
+    dictSort: 0,
+    status: "0",
+    remark: undefined
+  }
+  proxy.resetForm("dataRef")
+}
+
+/** 返回按钮操作 */
+function handleClose() {
+  const obj = { path: "/system/dict" }
+  proxy.$tab.closeOpenPage(obj)
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加字典数据"
+  form.value.dictType = extraParams.dictType
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const dictCode = row.dictCode
+  getData(dictCode).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改字典数据"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["dataRef"].validate(valid => {
+    if (valid) {
+      if (form.value.dictCode != undefined) {
+        updateData(form.value).then(() => {
+          useDictStore().removeDict(extraParams.dictType)
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          tableRef.value.refresh()
+        })
+      } else {
+        addData(form.value).then(() => {
+          useDictStore().removeDict(extraParams.dictType)
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          tableRef.value.refresh()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(dictCodes) {
+  proxy.$modal.confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项？').then(function() {
+    return delData(dictCodes)
+  }).then(() => {
+    tableRef.value.refresh()
+    proxy.$modal.msgSuccess("删除成功")
+    useDictStore().removeDict(extraParams.dictType)
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("system/dict/data/export", {
+    ...tableRef.value.getQueryParams()
+  }, `dict_data_${new Date().getTime()}.xlsx`)
+}
+</script>
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 721c956..db4232a 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -1,346 +1,255 @@
-<template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-         <el-form-item label="字典名称" prop="dictName">
-            <el-input
-               v-model="queryParams.dictName"
-               placeholder="请输入字典名称"
-               clearable
-               style="width: 240px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="字典类型" prop="dictType">
-            <el-input
-               v-model="queryParams.dictType"
-               placeholder="请输入字典类型"
-               clearable
-               style="width: 240px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="状态" prop="status">
-            <el-select
-               v-model="queryParams.status"
-               placeholder="字典状态"
-               clearable
-               style="width: 240px"
-            >
-               <el-option
-                  v-for="dict in sys_normal_disable"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item label="创建时间" style="width: 308px">
-            <el-date-picker
-               v-model="dateRange"
-               value-format="YYYY-MM-DD"
-               type="daterange"
-               range-separator="-"
-               start-placeholder="开始日期"
-               end-placeholder="结束日期"
-            ></el-date-picker>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
-
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Plus"
-               @click="handleAdd"
-               v-hasPermi="['system:dict:add']"
-            >新增</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="success"
-               plain
-               icon="Edit"
-               :disabled="single"
-               @click="handleUpdate"
-               v-hasPermi="['system:dict:edit']"
-            >修改</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               :disabled="multiple"
-               @click="handleDelete"
-               v-hasPermi="['system:dict:remove']"
-            >删除</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="warning"
-               plain
-               icon="Download"
-               @click="handleExport"
-               v-hasPermi="['system:dict:export']"
-            >导出</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Refresh"
-               @click="handleRefreshCache"
-               v-hasPermi="['system:dict:remove']"
-            >刷新缓存</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
-
-      <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
-         <el-table-column type="selection" width="55" align="center" />
-         <el-table-column label="字典编号" align="center" prop="dictId" />
-         <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true"/>
-         <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
-            <template #default="scope">
-               <a class="link-type" style="cursor:pointer" @click="handleViewData(scope.row)">{{ scope.row.dictType }}</a>
-            </template>
-         </el-table-column>
-         <el-table-column label="状态" align="center" prop="status">
-            <template #default="scope">
-               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
-            </template>
-         </el-table-column>
-         <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
-         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" width="280" class-name="small-padding fixed-width">
-            <template #default="scope">
-               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']">修改</el-button>
-               <el-button link type="primary" icon="Operation" @click="handleDataList(scope.row)" v-hasPermi="['system:dict:edit']">列表</el-button>
-               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']">删除</el-button>
-            </template>
-         </el-table-column>
-      </el-table>
-
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
-
-      <!-- 添加或修改参数配置对话框 -->
-      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-         <el-form ref="dictRef" :model="form" :rules="rules" label-width="100px">
-            <el-form-item label="字典名称" prop="dictName">
-               <el-input v-model="form.dictName" placeholder="请输入字典名称" />
-            </el-form-item>
-            <el-form-item prop="dictType">
-               <el-input v-model="form.dictType" placeholder="请输入字典类型" />
-               <template #label>
-                 <span>
-                   <el-tooltip content='数据存储中的Key值，如：sys_user_sex' placement="top">
-                     <el-icon><question-filled /></el-icon>
-                   </el-tooltip>
-                   字典类型
-                 </span>
-               </template>
-            </el-form-item>
-            <el-form-item label="状态" prop="status">
-               <el-radio-group v-model="form.status">
-                  <el-radio
-                     v-for="dict in sys_normal_disable"
-                     :key="dict.value"
-                     :value="dict.value"
-                  >{{ dict.label }}</el-radio>
-               </el-radio-group>
-            </el-form-item>
-            <el-form-item label="备注" prop="remark">
-               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-            </el-form-item>
-         </el-form>
-         <template #footer>
-            <div class="dialog-footer">
-               <el-button type="primary" @click="submitForm">确 定</el-button>
-               <el-button @click="cancel">取 消</el-button>
-            </div>
-         </template>
-      </el-dialog>
-
-      <dict-data-drawer v-model:visible="drawerVisible" :row="drawerRow" />
-   </div>
-</template>
-
-<script setup name="Dict">
-import DictDataDrawer from './detail'
-import useDictStore from '@/store/modules/dict'
-import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type"
-
-const { proxy } = getCurrentInstance()
-const { sys_normal_disable } = useDict("sys_normal_disable")
-
-const typeList = ref([])
-const open = ref(false)
-const loading = ref(true)
-const showSearch = ref(true)
-const ids = ref([])
-const single = ref(true)
-const multiple = ref(true)
-const total = ref(0)
-const title = ref("")
-const dateRange = ref([])
-const drawerVisible = ref(false)
-const drawerRow = ref({})
-
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    dictName: undefined,
-    dictType: undefined,
-    status: undefined
-  },
-  rules: {
-    dictName: [{ required: true, message: "字典名称不能为空", trigger: "blur" }],
-    dictType: [{ required: true, message: "字典类型不能为空", trigger: "blur" }]
-  },
-})
-
-const { queryParams, form, rules } = toRefs(data)
-
-/** 查询字典类型列表 */
-function getList() {
-  loading.value = true
-  listType(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
-    typeList.value = response.rows
-    total.value = response.total
-    loading.value = false
-  })
-}
-
-/** 取消按钮 */
-function cancel() {
-  open.value = false
-  reset()
-}
-
-/** 表单重置 */
-function reset() {
-  form.value = {
-    dictId: undefined,
-    dictName: undefined,
-    dictType: undefined,
-    status: "0",
-    remark: undefined
-  }
-  proxy.resetForm("dictRef")
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  dateRange.value = []
-  proxy.resetForm("queryRef")
-  handleQuery()
-}
-
-/** 新增按钮操作 */
-function handleAdd() {
-  reset()
-  open.value = true
-  title.value = "添加字典类型"
-}
-
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.dictId)
-  single.value = selection.length != 1
-  multiple.value = !selection.length
-}
-
-/** 字典数据抽屉 */
-function handleViewData(row) {
-  drawerRow.value = row
-  drawerVisible.value = true
-}
-
-/** 字典数据列表页面 */
-function handleDataList(row) {
-  proxy.$tab.openPage("字典数据", '/system/dict-data/index/' + row.dictId)
-}
-
-/** 修改按钮操作 */
-function handleUpdate(row) {
-  reset()
-  const dictId = row.dictId || ids.value
-  getType(dictId).then(response => {
-    form.value = response.data
-    open.value = true
-    title.value = "修改字典类型"
-  })
-}
-
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["dictRef"].validate(valid => {
-    if (valid) {
-      if (form.value.dictId != undefined) {
-        updateType(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功")
-          open.value = false
-          getList()
-        })
-      } else {
-        addType(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功")
-          open.value = false
-          getList()
-        })
-      }
-    }
-  })
-}
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const dictIds = row.dictId || ids.value
-  proxy.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？').then(function() {
-    return delType(dictIds)
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => {})
-}
-
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download("system/dict/type/export", {
-    ...queryParams.value
-  }, `dict_${new Date().getTime()}.xlsx`)
-}
-
-/** 刷新缓存按钮操作 */
-function handleRefreshCache() {
-  refreshCache().then(() => {
-    proxy.$modal.msgSuccess("刷新成功")
-    useDictStore().cleanDict()
-  })
-}
-
-getList()
-</script>
+<template>
+   <div class="app-container">
+      <basic-table
+         ref="tableRef"
+         :columns="columns"
+         :search-columns="searchColumns"
+         :query="queryList"
+         row-key="dictId"
+      >
+         <template #toolbar="{ selection, ids }">
+            <el-col :span="1.5">
+               <el-button
+                  type="primary"
+                  plain
+                  icon="Plus"
+                  @click="handleAdd"
+                  v-hasPermi="['system:dict:add']"
+               >新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="success"
+                  plain
+                  icon="Edit"
+                  :disabled="selection.length !== 1"
+                  @click="handleUpdate(selection[0])"
+                  v-hasPermi="['system:dict:edit']"
+               >修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="danger"
+                  plain
+                  icon="Delete"
+                  :disabled="!selection.length"
+                  @click="handleDelete(ids)"
+                  v-hasPermi="['system:dict:remove']"
+               >删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="warning"
+                  plain
+                  icon="Download"
+                  @click="handleExport"
+                  v-hasPermi="['system:dict:export']"
+               >导出</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="danger"
+                  plain
+                  icon="Refresh"
+                  @click="handleRefreshCache"
+                  v-hasPermi="['system:dict:remove']"
+               >刷新缓存</el-button>
+            </el-col>
+         </template>
+
+         <template #col-dictType="{ row }">
+            <a class="link-type" style="cursor:pointer" @click="handleViewData(row)">{{ row.dictType }}</a>
+         </template>
+
+         <template #col-action="{ row }">
+            <el-button link type="primary" icon="Edit" @click="handleUpdate(row)" v-hasPermi="['system:dict:edit']">修改</el-button>
+            <el-button link type="primary" icon="Operation" @click="handleDataList(row)" v-hasPermi="['system:dict:edit']">列表</el-button>
+            <el-button link type="primary" icon="Delete" @click="handleDelete(row.dictId)" v-hasPermi="['system:dict:remove']">删除</el-button>
+         </template>
+      </basic-table>
+
+      <!-- 添加或修改参数配置对话框 -->
+      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+         <el-form ref="dictRef" :model="form" :rules="rules" label-width="100px">
+            <el-form-item label="字典名称" prop="dictName">
+               <el-input v-model="form.dictName" placeholder="请输入字典名称" />
+            </el-form-item>
+            <el-form-item prop="dictType">
+               <el-input v-model="form.dictType" placeholder="请输入字典类型" />
+               <template #label>
+                 <span>
+                   <el-tooltip content='数据存储中的Key值，如：sys_user_sex' placement="top">
+                     <el-icon><question-filled /></el-icon>
+                   </el-tooltip>
+                   字典类型
+                 </span>
+               </template>
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+               <el-radio-group v-model="form.status">
+                  <el-radio
+                     v-for="dict in sys_normal_disable"
+                     :key="dict.value"
+                     :value="dict.value"
+                  >{{ dict.label }}</el-radio>
+               </el-radio-group>
+            </el-form-item>
+            <el-form-item label="备注" prop="remark">
+               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+            </el-form-item>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" @click="submitForm">确 定</el-button>
+               <el-button @click="cancel">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
+
+      <dict-data-drawer v-model:visible="drawerVisible" :row="drawerRow" />
+   </div>
+</template>
+
+<script setup name="Dict">
+import DictDataDrawer from './detail'
+import useDictStore from '@/store/modules/dict'
+import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type"
+
+const { proxy } = getCurrentInstance()
+const { sys_normal_disable } = useDict("sys_normal_disable")
+
+const tableRef = ref()
+const open = ref(false)
+const title = ref("")
+const drawerVisible = ref(false)
+const drawerRow = ref({})
+
+// 搜索项配置
+const searchColumns = [
+  { label: "字典名称", prop: "dictName", component: "input", placeholder: "请输入字典名称", width: "240px" },
+  { label: "字典类型", prop: "dictType", component: "input", placeholder: "请输入字典类型", width: "240px" },
+  { label: "状态", prop: "status", component: "select", dict: "sys_normal_disable", placeholder: "字典状态", width: "240px" },
+  { label: "创建时间", prop: "dateRange", component: "daterange", width: "320px" }
+]
+
+// 表格列配置
+const columns = [
+  { label: "字典编号", prop: "dictId", align: "center" },
+  { label: "字典名称", prop: "dictName", align: "center" },
+  { label: "字典类型", prop: "dictType", align: "center" },
+  { label: "状态", prop: "status", align: "center", dict: "sys_normal_disable" },
+  { label: "备注", prop: "remark", align: "center" },
+  { label: "创建时间", prop: "createTime", align: "center", width: 180, parseTime: true },
+  { label: "操作", prop: "action", align: "center", width: 280, showInToolbar: false }
+]
+
+// 查询函数（BasicTable 调用，返回 { rows, total }）
+function queryList(params) {
+  const p = proxy.addDateRange({ ...params }, params.dateRange)
+  delete p.dateRange
+  return listType(p)
+}
+
+const data = reactive({
+  form: {},
+  rules: {
+    dictName: [{ required: true, message: "字典名称不能为空", trigger: "blur" }],
+    dictType: [{ required: true, message: "字典类型不能为空", trigger: "blur" }]
+  }
+})
+
+const { form, rules } = toRefs(data)
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false
+  reset()
+}
+
+/** 表单重置 */
+function reset() {
+  form.value = {
+    dictId: undefined,
+    dictName: undefined,
+    dictType: undefined,
+    status: "0",
+    remark: undefined
+  }
+  proxy.resetForm("dictRef")
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加字典类型"
+}
+
+/** 字典数据抽屉 */
+function handleViewData(row) {
+  drawerRow.value = row
+  drawerVisible.value = true
+}
+
+/** 字典数据列表页面 */
+function handleDataList(row) {
+  proxy.$tab.openPage("字典数据", '/system/dict-data/index/' + row.dictId)
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const dictId = row.dictId
+  getType(dictId).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改字典类型"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["dictRef"].validate(valid => {
+    if (valid) {
+      if (form.value.dictId != undefined) {
+        updateType(form.value).then(() => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          tableRef.value.refresh()
+        })
+      } else {
+        addType(form.value).then(() => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          tableRef.value.refresh()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(dictIds) {
+  proxy.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？').then(function() {
+    return delType(dictIds)
+  }).then(() => {
+    tableRef.value.refresh()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("system/dict/type/export", {
+    ...tableRef.value.getQueryParams()
+  }, `dict_${new Date().getTime()}.xlsx`)
+}
+
+/** 刷新缓存按钮操作 */
+function handleRefreshCache() {
+  refreshCache().then(() => {
+    proxy.$modal.msgSuccess("刷新成功")
+    useDictStore().cleanDict()
+  })
+}
+</script>
diff --git a/src/views/system/notice/ReadUsers.vue b/src/views/system/notice/ReadUsers.vue
index 7590bef..2d5dd3b 100644
--- a/src/views/system/notice/ReadUsers.vue
+++ b/src/views/system/notice/ReadUsers.vue
@@ -1,47 +1,24 @@
 <template>
   <el-dialog v-model="visible" :title="`「${noticeTitle}」已读用户`" width="760px" top="6vh" append-to-body @close="handleClose">
-    <el-form ref="queryRef" :model="queryParams" size="small" :inline="true" style="margin-bottom: 4px;">
-      <el-form-item prop="searchValue">
-        <el-input
-          v-model="queryParams.searchValue"
-          placeholder="登录名称 / 用户名称"
-          clearable
-          :prefix-icon="Search"
-          style="width: 220px;"
-          @keyup.enter="handleQuery"
-          @clear="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="Search" size="small" @click="handleQuery">搜索</el-button>
-        <el-button icon="Refresh" size="small" @click="resetQuery">重置</el-button>
-      </el-form-item>
-      <el-form-item style="float: right; margin-right: 0;">
-        <span class="read-stat">
-          共 <strong>{{ total }}</strong> 人已读
-        </span>
-      </el-form-item>
-    </el-form>
-    <el-table v-loading="loading" :data="userList" size="small" stripe height="340px">
-      <el-table-column type="index" label="序号" width="55" align="center" />
-      <el-table-column label="登录名称" prop="userName" align="center" :show-overflow-tooltip="true" />
-      <el-table-column label="用户名称" prop="nickName" align="center" :show-overflow-tooltip="true" />
-      <el-table-column label="所属部门" prop="deptName" align="center" :show-overflow-tooltip="true" />
-      <el-table-column label="手机号码" prop="phonenumber" align="center" width="120" />
-      <el-table-column label="阅读时间" prop="readTime" align="center" width="160">
-        <template #default="scope">
-          <span>{{ parseTime(scope.row.readTime) }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-      style="padding: 6px 0px;"
-    />
+    <basic-table
+      ref="tableRef"
+      :columns="columns"
+      :search-columns="searchColumns"
+      :query="queryList"
+      :extra-params="extraParams"
+      row-key="userId"
+      size="small"
+      height="340px"
+      stripe
+      :show-toolbar="false"
+      :selection="false"
+      :show-index="true"
+      :auto-load="false"
+    >
+      <template #search-extra>
+        <span class="read-stat">共 <strong>{{ readTotal }}</strong> 人已读</span>
+      </template>
+    </basic-table>
   </el-dialog>
 </template>
 
@@ -51,52 +28,64 @@ import { listNoticeReadUsers } from "@/api/system/notice"
 
 const { proxy } = getCurrentInstance()
 
+const tableRef = ref()
 const visible = ref(false)
-const loading = ref(false)
 const noticeTitle = ref("")
-const total = ref(0)
-const userList = ref([])
+const readTotal = ref(0)
 
-const queryParams = reactive({
-  pageNum: 1,
-  pageSize: 10,
-  noticeId: undefined,
-  searchValue: undefined
-})
+// 固定参数：公告 ID（每次请求合并，不参与搜索重置）
+const extraParams = reactive({ noticeId: undefined })
 
-function open(row) {
-  queryParams.noticeId = row.noticeId
-  noticeTitle.value = row.noticeTitle
-  queryParams.searchValue = undefined
-  queryParams.pageNum = 1
-  visible.value = true
-  getList()
-}
+// 搜索项配置
+const searchColumns = [
+  {
+    label: "",
+    prop: "searchValue",
+    component: "input",
+    placeholder: "登录名称 / 用户名称",
+    width: "220px",
+    formItemProps: { labelWidth: "0px" },
+    props: {
+      prefixIcon: Search,
+      clearable: true,
+      onKeyup: (e) => { if (e.key === "Enter") tableRef.value?.handleQuery() },
+      onClear: () => tableRef.value?.handleQuery()
+    }
+  }
+]
 
-function getList() {
-  loading.value = true
-  listNoticeReadUsers(queryParams).then(res => {
-    userList.value = res.rows
-    total.value = res.total
-  }).finally(() => {
-    loading.value = false
+// 表格列配置
+const columns = [
+  { label: "登录名称", prop: "userName", align: "center" },
+  { label: "用户名称", prop: "nickName", align: "center" },
+  { label: "所属部门", prop: "deptName", align: "center" },
+  { label: "手机号码", prop: "phonenumber", align: "center", width: 120 },
+  { label: "阅读时间", prop: "readTime", align: "center", width: 160, parseTime: true }
+]
+
+// 查询函数（BasicTable 调用，返回 { rows, total }）；同时记录已读总数用于统计
+function queryList(params) {
+  return listNoticeReadUsers(params).then(res => {
+    readTotal.value = res.total
+    return res
   })
 }
 
-function handleQuery() {
-  queryParams.pageNum = 1
-  getList()
-}
-
-function resetQuery() {
-  proxy.resetForm("queryRef")
-  handleQuery()
+/** 打开弹框 */
+function open(row) {
+  extraParams.noticeId = row.noticeId
+  noticeTitle.value = row.noticeTitle
+  visible.value = true
+  nextTick(() => {
+    tableRef.value?.setQueryParams({ searchValue: undefined })
+    tableRef.value?.reload()
+  })
 }
 
+/** 关闭弹框 */
 function handleClose() {
-  userList.value = []
-  total.value = 0
-  queryParams.searchValue = undefined
+  tableRef.value?.clearSelection()
+  tableRef.value?.setQueryParams({ searchValue: undefined })
 }
 
 defineExpose({
@@ -115,4 +104,8 @@ defineExpose({
   font-size: 15px;
   margin: 0 2px;
 }
+/* 将搜索栏操作区（搜索/重置 + 已读统计）浮动到右侧 */
+:deep(.basic-form > .el-form-item:last-of-type) {
+  float: right;
+}
 </style>
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
index f0c3316..c4a4ec7 100644
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -1,306 +1,225 @@
-<template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
-         <el-form-item label="公告标题" prop="noticeTitle">
-            <el-input
-               v-model="queryParams.noticeTitle"
-               placeholder="请输入公告标题"
-               clearable
-               style="width: 200px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="操作人员" prop="createBy">
-            <el-input
-               v-model="queryParams.createBy"
-               placeholder="请输入操作人员"
-               clearable
-               style="width: 200px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="类型" prop="noticeType">
-            <el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable style="width: 200px">
-               <el-option
-                  v-for="dict in sys_notice_type"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
-
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Plus"
-               @click="handleAdd"
-               v-hasPermi="['system:notice:add']"
-            >新增</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="success"
-               plain
-               icon="Edit"
-               :disabled="single"
-               @click="handleUpdate"
-               v-hasPermi="['system:notice:edit']"
-            >修改</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               :disabled="multiple"
-               @click="handleDelete"
-               v-hasPermi="['system:notice:remove']"
-            >删除</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
-
-      <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
-         <el-table-column type="selection" width="55" align="center" />
-         <el-table-column label="序号" align="center" prop="noticeId" width="100" />
-         <el-table-column label="公告标题" align="center" :show-overflow-tooltip="true">
-            <template #default="scope">
-               <a class="link-type" style="cursor:pointer" @click="handleViewData(scope.row)">{{ scope.row.noticeTitle }}</a>
-            </template>
-         </el-table-column>
-         <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
-            <template #default="scope">
-               <dict-tag :options="sys_notice_type" :value="scope.row.noticeType" />
-            </template>
-         </el-table-column>
-         <el-table-column label="状态" align="center" prop="status" width="100">
-            <template #default="scope">
-               <dict-tag :options="sys_notice_status" :value="scope.row.status" />
-            </template>
-         </el-table-column>
-         <el-table-column label="创建者" align="center" prop="createBy" width="100" />
-         <el-table-column label="创建时间" align="center" prop="createTime" width="100">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template #default="scope">
-               <el-button link type="primary" icon="User" @click="handleReadUsers(scope.row)" v-hasPermi="['system:notice:list']">阅读用户</el-button>
-               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:notice:edit']">修改</el-button>
-               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:notice:remove']" >删除</el-button>
-            </template>
-         </el-table-column>
-      </el-table>
-
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
-
-      <!-- 添加或修改公告对话框 -->
-      <el-dialog :title="title" v-model="open" width="780px" append-to-body>
-         <el-form ref="noticeRef" :model="form" :rules="rules" label-width="80px">
-            <el-row>
-               <el-col :span="12">
-                  <el-form-item label="公告标题" prop="noticeTitle">
-                     <el-input v-model="form.noticeTitle" placeholder="请输入公告标题" />
-                  </el-form-item>
-               </el-col>
-               <el-col :span="12">
-                  <el-form-item label="公告类型" prop="noticeType">
-                     <el-select v-model="form.noticeType" placeholder="请选择">
-                        <el-option
-                           v-for="dict in sys_notice_type"
-                           :key="dict.value"
-                           :label="dict.label"
-                           :value="dict.value"
-                        ></el-option>
-                     </el-select>
-                  </el-form-item>
-               </el-col>
-               <el-col :span="24">
-                  <el-form-item label="状态">
-                     <el-radio-group v-model="form.status">
-                        <el-radio
-                           v-for="dict in sys_notice_status"
-                           :key="dict.value"
-                           :value="dict.value"
-                        >{{ dict.label }}</el-radio>
-                     </el-radio-group>
-                  </el-form-item>
-               </el-col>
-               <el-col :span="24">
-                  <el-form-item label="内容">
-                    <editor v-model="form.noticeContent" :min-height="192"/>
-                  </el-form-item>
-               </el-col>
-            </el-row>
-         </el-form>
-         <template #footer>
-            <div class="dialog-footer">
-               <el-button type="primary" @click="submitForm">确 定</el-button>
-               <el-button @click="cancel">取 消</el-button>
-            </div>
-         </template>
-      </el-dialog>
-      <notice-detail-view ref="noticeViewRef" />
-      <read-users-dialog ref="readUsersRef" />
-   </div>
-</template>
-
-<script setup name="Notice">
-import NoticeDetailView from "@/layout/components/HeaderNotice/DetailView"
-import ReadUsersDialog from "./ReadUsers"
-import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice"
-
-const { proxy } = getCurrentInstance()
-const { sys_notice_status, sys_notice_type } = useDict("sys_notice_status", "sys_notice_type")
-
-const noticeList = ref([])
-const open = ref(false)
-const loading = ref(true)
-const showSearch = ref(true)
-const ids = ref([])
-const single = ref(true)
-const multiple = ref(true)
-const total = ref(0)
-const title = ref("")
-
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    noticeTitle: undefined,
-    createBy: undefined,
-    status: undefined
-  },
-  rules: {
-    noticeTitle: [{ required: true, message: "公告标题不能为空", trigger: "blur" }],
-    noticeType: [{ required: true, message: "公告类型不能为空", trigger: "change" }]
-  },
-})
-
-const { queryParams, form, rules } = toRefs(data)
-
-/** 查询公告列表 */
-function getList() {
-  loading.value = true
-  listNotice(queryParams.value).then(response => {
-    noticeList.value = response.rows
-    total.value = response.total
-    loading.value = false
-  })
-}
-
-/** 取消按钮 */
-function cancel() {
-  open.value = false
-  reset()
-}
-
-/** 表单重置 */
-function reset() {
-  form.value = {
-    noticeId: undefined,
-    noticeTitle: undefined,
-    noticeType: undefined,
-    noticeContent: undefined,
-    status: "0"
-  }
-  proxy.resetForm("noticeRef")
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  proxy.resetForm("queryRef")
-  handleQuery()
-}
-
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.noticeId)
-  single.value = selection.length != 1
-  multiple.value = !selection.length
-}
-
-/** 新增按钮操作 */
-function handleAdd() {
-  reset()
-  open.value = true
-  title.value = "添加公告"
-}
-
-/**修改按钮操作 */
-function handleUpdate(row) {
-  reset()
-  const noticeId = row.noticeId || ids.value
-  getNotice(noticeId).then(response => {
-    form.value = response.data
-    open.value = true
-    title.value = "修改公告"
-  })
-}
-
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["noticeRef"].validate(valid => {
-    if (valid) {
-      if (form.value.noticeId != undefined) {
-        updateNotice(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功")
-          open.value = false
-          getList()
-        })
-      } else {
-        addNotice(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功")
-          open.value = false
-          getList()
-        })
-      }
-    }
-  })
-}
-
-/** 查看公告详情 */
-function handleViewData(row) {
-  proxy.$refs["noticeViewRef"].open(row)
-}
-
-/** 查看已读用户 */
-function handleReadUsers(row) {
-   proxy.$refs["readUsersRef"].open(row)
-}
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const noticeIds = row.noticeId || ids.value
-  proxy.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？').then(function() {
-    return delNotice(noticeIds)
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => {})
-}
-
-getList()
-</script>
+<template>
+   <div class="app-container">
+      <basic-table
+         ref="tableRef"
+         :columns="columns"
+         :search-columns="searchColumns"
+         :query="queryList"
+         row-key="noticeId"
+      >
+         <template #toolbar="{ selection, ids }">
+            <el-col :span="1.5">
+               <el-button
+                  type="primary"
+                  plain
+                  icon="Plus"
+                  @click="handleAdd"
+                  v-hasPermi="['system:notice:add']"
+               >新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="success"
+                  plain
+                  icon="Edit"
+                  :disabled="selection.length !== 1"
+                  @click="handleUpdate(selection[0])"
+                  v-hasPermi="['system:notice:edit']"
+               >修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="danger"
+                  plain
+                  icon="Delete"
+                  :disabled="!selection.length"
+                  @click="handleDelete(ids)"
+                  v-hasPermi="['system:notice:remove']"
+               >删除</el-button>
+            </el-col>
+         </template>
+
+         <template #col-noticeTitle="{ row }">
+            <a class="link-type" style="cursor:pointer" @click="handleViewData(row)">{{ row.noticeTitle }}</a>
+         </template>
+
+         <template #col-action="{ row }">
+            <el-button link type="primary" icon="User" @click="handleReadUsers(row)" v-hasPermi="['system:notice:list']">阅读用户</el-button>
+            <el-button link type="primary" icon="Edit" @click="handleUpdate(row)" v-hasPermi="['system:notice:edit']">修改</el-button>
+            <el-button link type="primary" icon="Delete" @click="handleDelete(row.noticeId)" v-hasPermi="['system:notice:remove']">删除</el-button>
+         </template>
+      </basic-table>
+
+      <!-- 添加或修改公告对话框 -->
+      <el-dialog :title="title" v-model="open" width="780px" append-to-body>
+         <el-form ref="noticeRef" :model="form" :rules="rules" label-width="80px">
+            <el-row>
+               <el-col :span="12">
+                  <el-form-item label="公告标题" prop="noticeTitle">
+                     <el-input v-model="form.noticeTitle" placeholder="请输入公告标题" />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="公告类型" prop="noticeType">
+                     <el-select v-model="form.noticeType" placeholder="请选择">
+                        <el-option
+                           v-for="dict in sys_notice_type"
+                           :key="dict.value"
+                           :label="dict.label"
+                           :value="dict.value"
+                        ></el-option>
+                     </el-select>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="24">
+                  <el-form-item label="状态">
+                     <el-radio-group v-model="form.status">
+                        <el-radio
+                           v-for="dict in sys_notice_status"
+                           :key="dict.value"
+                           :value="dict.value"
+                        >{{ dict.label }}</el-radio>
+                     </el-radio-group>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="24">
+                  <el-form-item label="内容">
+                    <editor v-model="form.noticeContent" :min-height="192"/>
+                  </el-form-item>
+               </el-col>
+            </el-row>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" @click="submitForm">确 定</el-button>
+               <el-button @click="cancel">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
+      <notice-detail-view ref="noticeViewRef" />
+      <read-users-dialog ref="readUsersRef" />
+   </div>
+</template>
+
+<script setup name="Notice">
+import NoticeDetailView from "@/layout/components/HeaderNotice/DetailView"
+import ReadUsersDialog from "./ReadUsers"
+import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice"
+
+const { proxy } = getCurrentInstance()
+const { sys_notice_status, sys_notice_type } = useDict("sys_notice_status", "sys_notice_type")
+
+const tableRef = ref()
+const open = ref(false)
+const title = ref("")
+
+// 搜索项配置
+const searchColumns = [
+  { label: "公告标题", prop: "noticeTitle", component: "input", placeholder: "请输入公告标题", width: "200px" },
+  { label: "操作人员", prop: "createBy", component: "input", placeholder: "请输入操作人员", width: "200px" },
+  { label: "类型", prop: "noticeType", component: "select", dict: "sys_notice_type", placeholder: "公告类型", width: "200px" }
+]
+
+// 表格列配置
+const columns = [
+  { label: "序号", prop: "noticeId", align: "center", width: 100 },
+  { label: "公告标题", prop: "noticeTitle", align: "center" },
+  { label: "公告类型", prop: "noticeType", align: "center", width: 100, dict: "sys_notice_type" },
+  { label: "状态", prop: "status", align: "center", width: 100, dict: "sys_notice_status" },
+  { label: "创建者", prop: "createBy", align: "center", width: 100 },
+  { label: "创建时间", prop: "createTime", align: "center", width: 100, parseTime: "{y}-{m}-{d}" },
+  { label: "操作", prop: "action", align: "center", width: 220, showInToolbar: false }
+]
+
+// 查询函数（BasicTable 调用，返回 { rows, total }）
+function queryList(params) {
+  return listNotice(params)
+}
+
+const data = reactive({
+  form: {},
+  rules: {
+    noticeTitle: [{ required: true, message: "公告标题不能为空", trigger: "blur" }],
+    noticeType: [{ required: true, message: "公告类型不能为空", trigger: "change" }]
+  }
+})
+
+const { form, rules } = toRefs(data)
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false
+  reset()
+}
+
+/** 表单重置 */
+function reset() {
+  form.value = {
+    noticeId: undefined,
+    noticeTitle: undefined,
+    noticeType: undefined,
+    noticeContent: undefined,
+    status: "0"
+  }
+  proxy.resetForm("noticeRef")
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加公告"
+}
+
+/**修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const noticeId = row.noticeId
+  getNotice(noticeId).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改公告"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["noticeRef"].validate(valid => {
+    if (valid) {
+      if (form.value.noticeId != undefined) {
+        updateNotice(form.value).then(() => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          tableRef.value.refresh()
+        })
+      } else {
+        addNotice(form.value).then(() => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          tableRef.value.refresh()
+        })
+      }
+    }
+  })
+}
+
+/** 查看公告详情 */
+function handleViewData(row) {
+  proxy.$refs["noticeViewRef"].open(row)
+}
+
+/** 查看已读用户 */
+function handleReadUsers(row) {
+  proxy.$refs["readUsersRef"].open(row)
+}
+
+/** 删除按钮操作 */
+function handleDelete(noticeIds) {
+  proxy.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？').then(function() {
+    return delNotice(noticeIds)
+  }).then(() => {
+    tableRef.value.refresh()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+</script>
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
index 67bbdc0..e127d81 100644
--- a/src/views/system/post/index.vue
+++ b/src/views/system/post/index.vue
@@ -1,287 +1,210 @@
-<template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
-         <el-form-item label="岗位编码" prop="postCode">
-            <el-input
-               v-model="queryParams.postCode"
-               placeholder="请输入岗位编码"
-               clearable
-               style="width: 200px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="岗位名称" prop="postName">
-            <el-input
-               v-model="queryParams.postName"
-               placeholder="请输入岗位名称"
-               clearable
-               style="width: 200px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="状态" prop="status">
-            <el-select v-model="queryParams.status" placeholder="岗位状态" clearable style="width: 200px">
-               <el-option
-                  v-for="dict in sys_normal_disable"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
-
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Plus"
-               @click="handleAdd"
-               v-hasPermi="['system:post:add']"
-            >新增</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="success"
-               plain
-               icon="Edit"
-               :disabled="single"
-               @click="handleUpdate"
-               v-hasPermi="['system:post:edit']"
-            >修改</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               :disabled="multiple"
-               @click="handleDelete"
-               v-hasPermi="['system:post:remove']"
-            >删除</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="warning"
-               plain
-               icon="Download"
-               @click="handleExport"
-               v-hasPermi="['system:post:export']"
-            >导出</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
-
-      <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
-         <el-table-column type="selection" width="55" align="center" />
-         <el-table-column label="岗位编号" align="center" prop="postId" />
-         <el-table-column label="岗位编码" align="center" prop="postCode" />
-         <el-table-column label="岗位名称" align="center" prop="postName" />
-         <el-table-column label="岗位排序" align="center" prop="postSort" />
-         <el-table-column label="状态" align="center" prop="status">
-            <template #default="scope">
-               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
-            </template>
-         </el-table-column>
-         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
-            <template #default="scope">
-               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button>
-               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button>
-            </template>
-         </el-table-column>
-      </el-table>
-
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
-
-      <!-- 添加或修改岗位对话框 -->
-      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-         <el-form ref="postRef" :model="form" :rules="rules" label-width="80px">
-            <el-form-item label="岗位名称" prop="postName">
-               <el-input v-model="form.postName" placeholder="请输入岗位名称" />
-            </el-form-item>
-            <el-form-item label="岗位编码" prop="postCode">
-               <el-input v-model="form.postCode" placeholder="请输入编码名称" />
-            </el-form-item>
-            <el-form-item label="岗位顺序" prop="postSort">
-               <el-input-number v-model="form.postSort" controls-position="right" :min="0" />
-            </el-form-item>
-            <el-form-item label="岗位状态" prop="status">
-               <el-radio-group v-model="form.status">
-                  <el-radio
-                     v-for="dict in sys_normal_disable"
-                     :key="dict.value"
-                     :value="dict.value"
-                  >{{ dict.label }}</el-radio>
-               </el-radio-group>
-            </el-form-item>
-            <el-form-item label="备注" prop="remark">
-               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-            </el-form-item>
-         </el-form>
-         <template #footer>
-            <div class="dialog-footer">
-               <el-button type="primary" @click="submitForm">确 定</el-button>
-               <el-button @click="cancel">取 消</el-button>
-            </div>
-         </template>
-      </el-dialog>
-   </div>
-</template>
-
-<script setup name="Post">
-import { listPost, addPost, delPost, getPost, updatePost } from "@/api/system/post"
-
-const { proxy } = getCurrentInstance()
-const { sys_normal_disable } = useDict("sys_normal_disable")
-
-const postList = ref([])
-const open = ref(false)
-const loading = ref(true)
-const showSearch = ref(true)
-const ids = ref([])
-const single = ref(true)
-const multiple = ref(true)
-const total = ref(0)
-const title = ref("")
-
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    postCode: undefined,
-    postName: undefined,
-    status: undefined
-  },
-  rules: {
-    postName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],
-    postCode: [{ required: true, message: "岗位编码不能为空", trigger: "blur" }],
-    postSort: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],
-  }
-})
-
-const { queryParams, form, rules } = toRefs(data)
-
-/** 查询岗位列表 */
-function getList() {
-  loading.value = true
-  listPost(queryParams.value).then(response => {
-    postList.value = response.rows
-    total.value = response.total
-    loading.value = false
-  })
-}
-
-/** 取消按钮 */
-function cancel() {
-  open.value = false
-  reset()
-}
-
-/** 表单重置 */
-function reset() {
-  form.value = {
-    postId: undefined,
-    postCode: undefined,
-    postName: undefined,
-    postSort: 0,
-    status: "0",
-    remark: undefined
-  }
-  proxy.resetForm("postRef")
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  proxy.resetForm("queryRef")
-  handleQuery()
-}
-
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.postId)
-  single.value = selection.length != 1
-  multiple.value = !selection.length
-}
-
-/** 新增按钮操作 */
-function handleAdd() {
-  reset()
-  open.value = true
-  title.value = "添加岗位"
-}
-
-/** 修改按钮操作 */
-function handleUpdate(row) {
-  reset()
-  const postId = row.postId || ids.value
-  getPost(postId).then(response => {
-    form.value = response.data
-    open.value = true
-    title.value = "修改岗位"
-  })
-}
-
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["postRef"].validate(valid => {
-    if (valid) {
-      if (form.value.postId != undefined) {
-        updatePost(form.value).then(() => {
-          proxy.$modal.msgSuccess("修改成功")
-          open.value = false
-          getList()
-        })
-      } else {
-        addPost(form.value).then(() => {
-          proxy.$modal.msgSuccess("新增成功")
-          open.value = false
-          getList()
-        })
-      }
-    }
-  })
-}
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const postIds = row.postId || ids.value
-  proxy.$modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？').then(function() {
-    return delPost(postIds)
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => {})
-}
-
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download("system/post/export", {
-    ...queryParams.value
-  }, `post_${new Date().getTime()}.xlsx`)
-}
-
-getList()
-</script>
+<template>
+   <div class="app-container">
+      <basic-table
+         ref="tableRef"
+         :columns="columns"
+         :search-columns="searchColumns"
+         :query="queryList"
+         row-key="postId"
+      >
+         <template #toolbar="{ selection, ids }">
+            <el-col :span="1.5">
+               <el-button
+                  type="primary"
+                  plain
+                  icon="Plus"
+                  @click="handleAdd"
+                  v-hasPermi="['system:post:add']"
+               >新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="success"
+                  plain
+                  icon="Edit"
+                  :disabled="selection.length !== 1"
+                  @click="handleUpdate(selection[0])"
+                  v-hasPermi="['system:post:edit']"
+               >修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="danger"
+                  plain
+                  icon="Delete"
+                  :disabled="!selection.length"
+                  @click="handleDelete(ids)"
+                  v-hasPermi="['system:post:remove']"
+               >删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="warning"
+                  plain
+                  icon="Download"
+                  @click="handleExport"
+                  v-hasPermi="['system:post:export']"
+               >导出</el-button>
+            </el-col>
+         </template>
+
+         <template #col-action="{ row }">
+            <el-button link type="primary" icon="Edit" @click="handleUpdate(row)" v-hasPermi="['system:post:edit']">修改</el-button>
+            <el-button link type="primary" icon="Delete" @click="handleDelete(row.postId)" v-hasPermi="['system:post:remove']">删除</el-button>
+         </template>
+      </basic-table>
+
+      <!-- 添加或修改岗位对话框 -->
+      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+         <el-form ref="postRef" :model="form" :rules="rules" label-width="80px">
+            <el-form-item label="岗位名称" prop="postName">
+               <el-input v-model="form.postName" placeholder="请输入岗位名称" />
+            </el-form-item>
+            <el-form-item label="岗位编码" prop="postCode">
+               <el-input v-model="form.postCode" placeholder="请输入编码名称" />
+            </el-form-item>
+            <el-form-item label="岗位顺序" prop="postSort">
+               <el-input-number v-model="form.postSort" controls-position="right" :min="0" />
+            </el-form-item>
+            <el-form-item label="岗位状态" prop="status">
+               <el-radio-group v-model="form.status">
+                  <el-radio
+                     v-for="dict in sys_normal_disable"
+                     :key="dict.value"
+                     :value="dict.value"
+                  >{{ dict.label }}</el-radio>
+               </el-radio-group>
+            </el-form-item>
+            <el-form-item label="备注" prop="remark">
+               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+            </el-form-item>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" @click="submitForm">确 定</el-button>
+               <el-button @click="cancel">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
+   </div>
+</template>
+
+<script setup name="Post">
+import { listPost, addPost, delPost, getPost, updatePost } from "@/api/system/post"
+
+const { proxy } = getCurrentInstance()
+const { sys_normal_disable } = useDict("sys_normal_disable")
+
+const tableRef = ref()
+const open = ref(false)
+const title = ref("")
+
+// 搜索项配置
+const searchColumns = [
+  { label: "岗位编码", prop: "postCode", component: "input", placeholder: "请输入岗位编码", width: "200px" },
+  { label: "岗位名称", prop: "postName", component: "input", placeholder: "请输入岗位名称", width: "200px" },
+  { label: "状态", prop: "status", component: "select", dict: "sys_normal_disable", placeholder: "岗位状态", width: "200px" }
+]
+
+// 表格列配置
+const columns = [
+  { label: "岗位编号", prop: "postId", align: "center" },
+  { label: "岗位编码", prop: "postCode", align: "center" },
+  { label: "岗位名称", prop: "postName", align: "center" },
+  { label: "岗位排序", prop: "postSort", align: "center" },
+  { label: "状态", prop: "status", align: "center", dict: "sys_normal_disable" },
+  { label: "创建时间", prop: "createTime", align: "center", width: 180, parseTime: true },
+  { label: "操作", prop: "action", align: "center", width: 180, showInToolbar: false }
+]
+
+// 查询函数（BasicTable 调用，返回 { rows, total }）
+function queryList(params) {
+  return listPost(params)
+}
+
+const data = reactive({
+  form: {},
+  rules: {
+    postName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],
+    postCode: [{ required: true, message: "岗位编码不能为空", trigger: "blur" }],
+    postSort: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],
+  }
+})
+
+const { form, rules } = toRefs(data)
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false
+  reset()
+}
+
+/** 表单重置 */
+function reset() {
+  form.value = {
+    postId: undefined,
+    postCode: undefined,
+    postName: undefined,
+    postSort: 0,
+    status: "0",
+    remark: undefined
+  }
+  proxy.resetForm("postRef")
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加岗位"
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const postId = row.postId
+  getPost(postId).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改岗位"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["postRef"].validate(valid => {
+    if (valid) {
+      if (form.value.postId != undefined) {
+        updatePost(form.value).then(() => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          tableRef.value.refresh()
+        })
+      } else {
+        addPost(form.value).then(() => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          tableRef.value.refresh()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(postIds) {
+  proxy.$modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？').then(function() {
+    return delPost(postIds)
+  }).then(() => {
+    tableRef.value.refresh()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("system/post/export", {
+    ...tableRef.value.getQueryParams()
+  }, `post_${new Date().getTime()}.xlsx`)
+}
+</script>
diff --git a/src/views/system/role/authUser.vue b/src/views/system/role/authUser.vue
index c9f7d30..0ffa078 100644
--- a/src/views/system/role/authUser.vue
+++ b/src/views/system/role/authUser.vue
@@ -1,179 +1,125 @@
-
-<template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true">
-         <el-form-item label="用户名称" prop="userName">
-            <el-input
-               v-model="queryParams.userName"
-               placeholder="请输入用户名称"
-               clearable
-               style="width: 240px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="手机号码" prop="phonenumber">
-            <el-input
-               v-model="queryParams.phonenumber"
-               placeholder="请输入手机号码"
-               clearable
-               style="width: 240px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
-
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Plus"
-               @click="openSelectUser"
-               v-hasPermi="['system:role:add']"
-            >添加用户</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="CircleClose"
-               :disabled="multiple"
-               @click="cancelAuthUserAll"
-               v-hasPermi="['system:role:remove']"
-            >批量取消授权</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button 
-               type="warning" 
-               plain 
-               icon="Close"
-               @click="handleClose"
-            >关闭</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
-
-      <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
-         <el-table-column type="selection" width="55" align="center" />
-         <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
-         <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
-         <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
-         <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
-         <el-table-column label="状态" align="center" prop="status">
-            <template #default="scope">
-               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
-            </template>
-         </el-table-column>
-         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template #default="scope">
-               <el-button link type="primary" icon="CircleClose" @click="cancelAuthUser(scope.row)" v-hasPermi="['system:role:remove']">取消授权</el-button>
-            </template>
-         </el-table-column>
-      </el-table>
-
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
-      <select-user ref="selectRef" :roleId="queryParams.roleId" @ok="handleQuery" />
-   </div>
-</template>
-
-<script setup name="AuthUser">
-import selectUser from "./selectUser"
-import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role"
-
-const route = useRoute()
-const { proxy } = getCurrentInstance()
-const { sys_normal_disable } = useDict("sys_normal_disable")
-
-const userList = ref([])
-const loading = ref(true)
-const showSearch = ref(true)
-const multiple = ref(true)
-const total = ref(0)
-const userIds = ref([])
-
-const queryParams = reactive({
-  pageNum: 1,
-  pageSize: 10,
-  roleId: route.params.roleId,
-  userName: undefined,
-  phonenumber: undefined,
-})
-
-/** 查询授权用户列表 */
-function getList() {
-  loading.value = true
-  allocatedUserList(queryParams).then(response => {
-    userList.value = response.rows
-    total.value = response.total
-    loading.value = false
-  })
-}
-
-/** 返回按钮 */
-function handleClose() {
-  const obj = { path: "/system/role" }
-  proxy.$tab.closeOpenPage(obj)
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.pageNum = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  proxy.resetForm("queryRef")
-  handleQuery()
-}
-
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  userIds.value = selection.map(item => item.userId)
-  multiple.value = !selection.length
-}
-
-/** 打开授权用户表弹窗 */
-function openSelectUser() {
-  proxy.$refs["selectRef"].show()
-}
-
-/** 取消授权按钮操作 */
-function cancelAuthUser(row) {
-  proxy.$modal.confirm('确认要取消该用户"' + row.userName + '"角色吗？').then(function () {
-    return authUserCancel({ userId: row.userId, roleId: queryParams.roleId })
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("取消授权成功")
-  }).catch(() => {})
-}
-
-/** 批量取消授权按钮操作 */
-function cancelAuthUserAll() {
-  const roleId = queryParams.roleId
-  const uIds = userIds.value.join(",")
-  proxy.$modal.confirm("是否取消选中用户授权数据项?").then(function () {
-    return authUserCancelAll({ roleId: roleId, userIds: uIds })
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("取消授权成功")
-  }).catch(() => {})
-}
-
-getList()
-</script>
+<template>
+   <div class="app-container">
+      <basic-table
+         ref="tableRef"
+         :columns="columns"
+         :search-columns="searchColumns"
+         :query="queryList"
+         :extra-params="{ roleId: route.params.roleId }"
+         row-key="userId"
+         @selection-change="handleSelectionChange"
+      >
+         <template #toolbar="{ selection }">
+            <el-col :span="1.5">
+               <el-button
+                  type="primary"
+                  plain
+                  icon="Plus"
+                  @click="openSelectUser"
+                  v-hasPermi="['system:role:add']"
+               >添加用户</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="danger"
+                  plain
+                  icon="CircleClose"
+                  :disabled="!selection.length"
+                  @click="cancelAuthUserAll"
+                  v-hasPermi="['system:role:remove']"
+               >批量取消授权</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="warning"
+                  plain
+                  icon="Close"
+                  @click="handleClose"
+               >关闭</el-button>
+            </el-col>
+         </template>
+
+         <template #col-action="{ row }">
+            <el-button link type="primary" icon="CircleClose" @click="cancelAuthUser(row)" v-hasPermi="['system:role:remove']">取消授权</el-button>
+         </template>
+      </basic-table>
+
+      <select-user ref="selectRef" :role-id="route.params.roleId" @ok="handleSelectOk" />
+   </div>
+</template>
+
+<script setup name="AuthUser">
+import selectUser from "./selectUser"
+import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role"
+
+const route = useRoute()
+const { proxy } = getCurrentInstance()
+
+const tableRef = ref()
+const userIds = ref([])
+
+// 搜索项配置
+const searchColumns = [
+  { label: "用户名称", prop: "userName", component: "input", placeholder: "请输入用户名称", width: "200px" },
+  { label: "手机号码", prop: "phonenumber", component: "input", placeholder: "请输入手机号码", width: "200px" }
+]
+
+// 表格列配置
+const columns = [
+  { label: "用户名称", prop: "userName", align: "center" },
+  { label: "用户昵称", prop: "nickName", align: "center" },
+  { label: "邮箱", prop: "email", align: "center" },
+  { label: "手机", prop: "phonenumber", align: "center" },
+  { label: "状态", prop: "status", align: "center", dict: "sys_normal_disable" },
+  { label: "创建时间", prop: "createTime", align: "center", width: 180, parseTime: true },
+  { label: "操作", prop: "action", align: "center", width: 120, showInToolbar: false }
+]
+
+// 查询函数（BasicTable 调用，返回 { rows, total }）
+function queryList(params) {
+  return allocatedUserList(params)
+}
+
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  userIds.value = selection.map(item => item.userId)
+}
+
+/** 打开授权用户表弹窗 */
+function openSelectUser() {
+  proxy.$refs["selectRef"].show()
+}
+
+/** 选择用户回调：刷新列表（回到第一页） */
+function handleSelectOk() {
+  tableRef.value?.reload()
+}
+
+/** 取消授权按钮操作 */
+function cancelAuthUser(row) {
+  proxy.$modal.confirm('确认要取消该用户"' + row.userName + '"角色吗？').then(function () {
+    return authUserCancel({ userId: row.userId, roleId: route.params.roleId })
+  }).then(() => {
+    tableRef.value?.refresh()
+    proxy.$modal.msgSuccess("取消授权成功")
+  }).catch(() => {})
+}
+
+/** 批量取消授权按钮操作 */
+function cancelAuthUserAll() {
+  const roleId = route.params.roleId
+  const uIds = userIds.value.join(",")
+  proxy.$modal.confirm("是否取消选中用户授权数据项?").then(function () {
+    return authUserCancelAll({ roleId: roleId, userIds: uIds })
+  }).then(() => {
+    tableRef.value?.refresh()
+    proxy.$modal.msgSuccess("取消授权成功")
+  }).catch(() => {})
+}
+
+/** 关闭按钮 */
+function handleClose() {
+  const obj = { path: "/system/role" }
+  proxy.$tab.closeOpenPage(obj)
+}
+</script>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index b6beae6..f7f3317 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,584 +1,485 @@
-<template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px">
-         <el-form-item label="角色名称" prop="roleName">
-            <el-input
-               v-model="queryParams.roleName"
-               placeholder="请输入角色名称"
-               clearable
-               style="width: 240px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="权限字符" prop="roleKey">
-            <el-input
-               v-model="queryParams.roleKey"
-               placeholder="请输入权限字符"
-               clearable
-               style="width: 240px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="状态" prop="status">
-            <el-select
-               v-model="queryParams.status"
-               placeholder="角色状态"
-               clearable
-               style="width: 240px"
-            >
-               <el-option
-                  v-for="dict in sys_normal_disable"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item label="创建时间" style="width: 308px">
-            <el-date-picker
-               v-model="dateRange"
-               value-format="YYYY-MM-DD"
-               type="daterange"
-               range-separator="-"
-               start-placeholder="开始日期"
-               end-placeholder="结束日期"
-            ></el-date-picker>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Plus"
-               @click="handleAdd"
-               v-hasPermi="['system:role:add']"
-            >新增</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="success"
-               plain
-               icon="Edit"
-               :disabled="single"
-               @click="handleUpdate"
-               v-hasPermi="['system:role:edit']"
-            >修改</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               :disabled="multiple"
-               @click="handleDelete"
-               v-hasPermi="['system:role:remove']"
-            >删除</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="warning"
-               plain
-               icon="Download"
-               @click="handleExport"
-               v-hasPermi="['system:role:export']"
-            >导出</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
-
-      <!-- 表格数据 -->
-      <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
-         <el-table-column type="selection" width="55" align="center" />
-         <el-table-column label="角色编号" prop="roleId" width="120" />
-         <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
-         <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
-         <el-table-column label="显示顺序" prop="roleSort" width="100" />
-         <el-table-column label="状态" align="center" width="100">
-            <template #default="scope">
-               <el-switch
-                  v-model="scope.row.status"
-                  active-value="0"
-                  inactive-value="1"
-                  @change="handleStatusChange(scope.row)"
-               ></el-switch>
-            </template>
-         </el-table-column>
-         <el-table-column label="创建时间" align="center" prop="createTime">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template #default="scope">
-              <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
-                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
-              </el-tooltip>
-              <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
-                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']"></el-button>
-              </el-tooltip>
-              <el-tooltip content="数据权限" placement="top" v-if="scope.row.roleId !== 1">
-                <el-button link type="primary" icon="CircleCheck" @click="handleDataScope(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
-              </el-tooltip>
-              <el-tooltip content="分配用户" placement="top" v-if="scope.row.roleId !== 1">
-                <el-button link type="primary" icon="User" @click="handleAuthUser(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
-              </el-tooltip>
-            </template>
-         </el-table-column>
-      </el-table>
-
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
-
-      <!-- 添加或修改角色配置对话框 -->
-      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-         <el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
-            <el-form-item label="角色名称" prop="roleName">
-               <el-input v-model="form.roleName" placeholder="请输入角色名称" />
-            </el-form-item>
-            <el-form-item prop="roleKey">
-               <template #label>
-                  <span>
-                     <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
-                        <el-icon><question-filled /></el-icon>
-                     </el-tooltip>
-                     权限字符
-                  </span>
-               </template>
-               <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
-            </el-form-item>
-            <el-form-item label="角色顺序" prop="roleSort">
-               <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
-            </el-form-item>
-            <el-form-item label="状态">
-               <el-radio-group v-model="form.status">
-                  <el-radio
-                     v-for="dict in sys_normal_disable"
-                     :key="dict.value"
-                     :value="dict.value"
-                  >{{ dict.label }}</el-radio>
-               </el-radio-group>
-            </el-form-item>
-            <el-form-item label="菜单权限">
-               <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
-               <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
-               <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
-               <el-tree
-                  class="tree-border"
-                  :data="menuOptions"
-                  show-checkbox
-                  ref="menuRef"
-                  node-key="id"
-                  :check-strictly="!form.menuCheckStrictly"
-                  empty-text="加载中，请稍候"
-                  :props="{ label: 'label', children: 'children' }"
-               ></el-tree>
-            </el-form-item>
-            <el-form-item label="备注">
-               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-            </el-form-item>
-         </el-form>
-         <template #footer>
-            <div class="dialog-footer">
-               <el-button type="primary" @click="submitForm">确 定</el-button>
-               <el-button @click="cancel">取 消</el-button>
-            </div>
-         </template>
-      </el-dialog>
-
-      <!-- 分配角色数据权限对话框 -->
-      <el-dialog :title="title" v-model="openDataScope" width="500px" append-to-body>
-         <el-form :model="form" label-width="80px">
-            <el-form-item label="角色名称">
-               <el-input v-model="form.roleName" :disabled="true" />
-            </el-form-item>
-            <el-form-item label="权限字符">
-               <el-input v-model="form.roleKey" :disabled="true" />
-            </el-form-item>
-            <el-form-item label="权限范围">
-               <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
-                  <el-option
-                     v-for="item in dataScopeOptions"
-                     :key="item.value"
-                     :label="item.label"
-                     :value="item.value"
-                  ></el-option>
-               </el-select>
-            </el-form-item>
-            <el-form-item label="数据权限" v-show="form.dataScope == 2">
-               <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
-               <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
-               <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
-               <el-tree
-                  class="tree-border"
-                  :data="deptOptions"
-                  show-checkbox
-                  default-expand-all
-                  ref="deptRef"
-                  node-key="id"
-                  :check-strictly="!form.deptCheckStrictly"
-                  empty-text="加载中，请稍候"
-                  :props="{ label: 'label', children: 'children' }"
-               ></el-tree>
-            </el-form-item>
-         </el-form>
-         <template #footer>
-            <div class="dialog-footer">
-               <el-button type="primary" @click="submitDataScope">确 定</el-button>
-               <el-button @click="cancelDataScope">取 消</el-button>
-            </div>
-         </template>
-      </el-dialog>
-   </div>
-</template>
-
-<script setup name="Role">
-import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from "@/api/system/role"
-import { roleMenuTreeselect, treeselect as menuTreeselect } from "@/api/system/menu"
-
-const router = useRouter()
-const { proxy } = getCurrentInstance()
-const { sys_normal_disable } = useDict("sys_normal_disable")
-
-const roleList = ref([])
-const open = ref(false)
-const loading = ref(true)
-const showSearch = ref(true)
-const ids = ref([])
-const single = ref(true)
-const multiple = ref(true)
-const total = ref(0)
-const title = ref("")
-const dateRange = ref([])
-const menuOptions = ref([])
-const menuExpand = ref(false)
-const menuNodeAll = ref(false)
-const deptExpand = ref(true)
-const deptNodeAll = ref(false)
-const deptOptions = ref([])
-const openDataScope = ref(false)
-const menuRef = ref(null)
-const deptRef = ref(null)
-
-/** 数据范围选项*/
-const dataScopeOptions = ref([
-  { value: "1", label: "全部数据权限" },
-  { value: "2", label: "自定数据权限" },
-  { value: "3", label: "本部门数据权限" },
-  { value: "4", label: "本部门及以下数据权限" },
-  { value: "5", label: "仅本人数据权限" }
-])
-
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    roleName: undefined,
-    roleKey: undefined,
-    status: undefined
-  },
-  rules: {
-    roleName: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
-    roleKey: [{ required: true, message: "权限字符不能为空", trigger: "blur" }],
-    roleSort: [{ required: true, message: "角色顺序不能为空", trigger: "blur" }]
-  },
-})
-
-const { queryParams, form, rules } = toRefs(data)
-
-/** 查询角色列表 */
-function getList() {
-  loading.value = true
-  listRole(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
-    roleList.value = response.rows
-    total.value = response.total
-    loading.value = false
-  })
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  dateRange.value = []
-  proxy.resetForm("queryRef")
-  handleQuery()
-}
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const roleIds = row.roleId || ids.value
-  proxy.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?').then(function () {
-    return delRole(roleIds)
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => {})
-}
-
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download("system/role/export", {
-    ...queryParams.value,
-  }, `role_${new Date().getTime()}.xlsx`)
-}
-
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.roleId)
-  single.value = selection.length != 1
-  multiple.value = !selection.length
-}
-
-/** 角色状态修改 */
-function handleStatusChange(row) {
-  let text = row.status === "0" ? "启用" : "停用"
-  proxy.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗?').then(function () {
-    return changeRoleStatus(row.roleId, row.status)
-  }).then(() => {
-    proxy.$modal.msgSuccess(text + "成功")
-  }).catch(function () {
-    row.status = row.status === "0" ? "1" : "0"
-  })
-}
-
-/** 更多操作 */
-function handleCommand(command, row) {
-  switch (command) {
-    case "handleDataScope":
-      handleDataScope(row)
-      break
-    case "handleAuthUser":
-      handleAuthUser(row)
-      break
-    default:
-      break
-  }
-}
-
-/** 分配用户 */
-function handleAuthUser(row) {
-  router.push("/system/role-auth/user/" + row.roleId)
-}
-
-/** 查询菜单树结构 */
-function getMenuTreeselect() {
-  menuTreeselect().then(response => {
-    menuOptions.value = response.data
-  })
-}
-
-/** 所有部门节点数据 */
-function getDeptAllCheckedKeys() {
-  // 目前被选中的部门节点
-  let checkedKeys = deptRef.value.getCheckedKeys()
-  // 半选中的部门节点
-  let halfCheckedKeys = deptRef.value.getHalfCheckedKeys()
-  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
-  return checkedKeys
-}
-
-/** 重置新增的表单以及其他数据  */
-function reset() {
-  if (menuRef.value != undefined) {
-    menuRef.value.setCheckedKeys([])
-  }
-  menuExpand.value = false
-  menuNodeAll.value = false
-  deptExpand.value = true
-  deptNodeAll.value = false
-  form.value = {
-    roleId: undefined,
-    roleName: undefined,
-    roleKey: undefined,
-    roleSort: 0,
-    status: "0",
-    menuIds: [],
-    deptIds: [],
-    menuCheckStrictly: true,
-    deptCheckStrictly: true,
-    remark: undefined
-  }
-  proxy.resetForm("roleRef")
-}
-
-/** 添加角色 */
-function handleAdd() {
-  reset()
-  getMenuTreeselect()
-  open.value = true
-  title.value = "添加角色"
-}
-
-/** 修改角色 */
-function handleUpdate(row) {
-  reset()
-  const roleId = row.roleId || ids.value
-  const roleMenu = getRoleMenuTreeselect(roleId)
-  getRole(roleId).then(response => {
-    form.value = response.data
-    form.value.roleSort = Number(form.value.roleSort)
-    open.value = true
-    nextTick(() => {
-      roleMenu.then((res) => {
-        let checkedKeys = res.checkedKeys
-        checkedKeys.forEach((v) => {
-          nextTick(() => {
-            menuRef.value.setChecked(v, true, false)
-          })
-        })
-      })
-    })
-  })
-  title.value = "修改角色"
-}
-
-/** 根据角色ID查询菜单树结构 */
-function getRoleMenuTreeselect(roleId) {
-  return roleMenuTreeselect(roleId).then(response => {
-    menuOptions.value = response.menus
-    return response
-  })
-}
-
-/** 根据角色ID查询部门树结构 */
-function getDeptTree(roleId) {
-  return deptTreeSelect(roleId).then(response => {
-    deptOptions.value = response.depts
-    return response
-  })
-}
-
-/** 树权限（展开/折叠）*/
-function handleCheckedTreeExpand(value, type) {
-  if (type == "menu") {
-    let treeList = menuOptions.value
-    for (let i = 0; i < treeList.length; i++) {
-      menuRef.value.store.nodesMap[treeList[i].id].expanded = value
-    }
-  } else if (type == "dept") {
-    let treeList = deptOptions.value
-    for (let i = 0; i < treeList.length; i++) {
-      deptRef.value.store.nodesMap[treeList[i].id].expanded = value
-    }
-  }
-}
-
-/** 树权限（全选/全不选） */
-function handleCheckedTreeNodeAll(value, type) {
-  if (type == "menu") {
-    menuRef.value.setCheckedNodes(value ? menuOptions.value : [])
-  } else if (type == "dept") {
-    deptRef.value.setCheckedNodes(value ? deptOptions.value : [])
-  }
-}
-
-/** 树权限（父子联动） */
-function handleCheckedTreeConnect(value, type) {
-  if (type == "menu") {
-    form.value.menuCheckStrictly = value ? true : false
-  } else if (type == "dept") {
-    form.value.deptCheckStrictly = value ? true : false
-  }
-}
-
-/** 所有菜单节点数据 */
-function getMenuAllCheckedKeys() {
-  // 目前被选中的菜单节点
-  let checkedKeys = menuRef.value.getCheckedKeys()
-  // 半选中的菜单节点
-  let halfCheckedKeys = menuRef.value.getHalfCheckedKeys()
-  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
-  return checkedKeys
-}
-
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["roleRef"].validate(valid => {
-    if (valid) {
-      if (form.value.roleId != undefined) {
-        form.value.menuIds = getMenuAllCheckedKeys()
-        updateRole(form.value).then(() => {
-          proxy.$modal.msgSuccess("修改成功")
-          open.value = false
-          getList()
-        })
-      } else {
-        form.value.menuIds = getMenuAllCheckedKeys()
-        addRole(form.value).then(() => {
-          proxy.$modal.msgSuccess("新增成功")
-          open.value = false
-          getList()
-        })
-      }
-    }
-  })
-}
-
-/** 取消按钮 */
-function cancel() {
-  open.value = false
-  reset()
-}
-
-/** 选择角色权限范围触发 */
-function dataScopeSelectChange(value) {
-  if (value !== "2") {
-    deptRef.value.setCheckedKeys([])
-  }
-}
-
-/** 分配数据权限操作 */
-function handleDataScope(row) {
-  reset()
-  const deptTreeSelect = getDeptTree(row.roleId)
-  getRole(row.roleId).then(response => {
-    form.value = response.data
-    openDataScope.value = true
-    nextTick(() => {
-      deptTreeSelect.then(res => {
-        nextTick(() => {
-          if (deptRef.value) {
-            deptRef.value.setCheckedKeys(res.checkedKeys)
-          }
-        })
-      })
-    })
-  })
-  title.value = "分配数据权限"
-}
-
-/** 提交按钮（数据权限） */
-function submitDataScope() {
-  if (form.value.roleId != undefined) {
-    form.value.deptIds = getDeptAllCheckedKeys()
-    dataScope(form.value).then(() => {
-      proxy.$modal.msgSuccess("修改成功")
-      openDataScope.value = false
-      getList()
-    })
-  }
-}
-
-/** 取消按钮（数据权限）*/
-function cancelDataScope() {
-  openDataScope.value = false
-  reset()
-}
-
-getList()
-</script>
+<template>
+   <div class="app-container">
+      <basic-table
+         ref="tableRef"
+         :columns="columns"
+         :search-columns="searchColumns"
+         :query="queryList"
+         row-key="roleId"
+         :search-label-width="'68px'"
+      >
+         <template #toolbar="{ selection, ids }">
+            <el-col :span="1.5">
+               <el-button
+                  type="primary"
+                  plain
+                  icon="Plus"
+                  @click="handleAdd"
+                  v-hasPermi="['system:role:add']"
+               >新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="success"
+                  plain
+                  icon="Edit"
+                  :disabled="selection.length !== 1"
+                  @click="handleUpdate(selection[0])"
+                  v-hasPermi="['system:role:edit']"
+               >修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="danger"
+                  plain
+                  icon="Delete"
+                  :disabled="!selection.length"
+                  @click="handleDelete(ids)"
+                  v-hasPermi="['system:role:remove']"
+               >删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button
+                  type="warning"
+                  plain
+                  icon="Download"
+                  @click="handleExport"
+                  v-hasPermi="['system:role:export']"
+               >导出</el-button>
+            </el-col>
+         </template>
+
+         <template #col-status="{ row }">
+            <el-switch
+               v-model="row.status"
+               active-value="0"
+               inactive-value="1"
+               @change="handleStatusChange(row)"
+            ></el-switch>
+         </template>
+
+         <template #col-action="{ row }">
+            <el-tooltip content="修改" placement="top" v-if="row.roleId !== 1">
+               <el-button link type="primary" icon="Edit" @click="handleUpdate(row)" v-hasPermi="['system:role:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top" v-if="row.roleId !== 1">
+               <el-button link type="primary" icon="Delete" @click="handleDelete(row.roleId)" v-hasPermi="['system:role:remove']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="数据权限" placement="top" v-if="row.roleId !== 1">
+               <el-button link type="primary" icon="CircleCheck" @click="handleDataScope(row)" v-hasPermi="['system:role:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="分配用户" placement="top" v-if="row.roleId !== 1">
+               <el-button link type="primary" icon="User" @click="handleAuthUser(row)" v-hasPermi="['system:role:edit']"></el-button>
+            </el-tooltip>
+         </template>
+      </basic-table>
+
+      <!-- 添加或修改角色配置对话框 -->
+      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+         <el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
+            <el-form-item label="角色名称" prop="roleName">
+               <el-input v-model="form.roleName" placeholder="请输入角色名称" />
+            </el-form-item>
+            <el-form-item prop="roleKey">
+               <template #label>
+                  <span>
+                     <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
+                        <el-icon><question-filled /></el-icon>
+                     </el-tooltip>
+                     权限字符
+                  </span>
+               </template>
+               <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
+            </el-form-item>
+            <el-form-item label="角色顺序" prop="roleSort">
+               <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
+            </el-form-item>
+            <el-form-item label="状态">
+               <el-radio-group v-model="form.status">
+                  <el-radio
+                     v-for="dict in sys_normal_disable"
+                     :key="dict.value"
+                     :value="dict.value"
+                  >{{ dict.label }}</el-radio>
+               </el-radio-group>
+            </el-form-item>
+            <el-form-item label="菜单权限">
+               <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
+               <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
+               <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
+               <el-tree
+                  class="tree-border"
+                  :data="menuOptions"
+                  show-checkbox
+                  ref="menuRef"
+                  node-key="id"
+                  :check-strictly="!form.menuCheckStrictly"
+                  empty-text="加载中，请稍候"
+                  :props="{ label: 'label', children: 'children' }"
+               ></el-tree>
+            </el-form-item>
+            <el-form-item label="备注">
+               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+            </el-form-item>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" @click="submitForm">确 定</el-button>
+               <el-button @click="cancel">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
+
+      <!-- 分配角色数据权限对话框 -->
+      <el-dialog :title="title" v-model="openDataScope" width="500px" append-to-body>
+         <el-form :model="form" label-width="80px">
+            <el-form-item label="角色名称">
+               <el-input v-model="form.roleName" :disabled="true" />
+            </el-form-item>
+            <el-form-item label="权限字符">
+               <el-input v-model="form.roleKey" :disabled="true" />
+            </el-form-item>
+            <el-form-item label="权限范围">
+               <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
+                  <el-option
+                     v-for="item in dataScopeOptions"
+                     :key="item.value"
+                     :label="item.label"
+                     :value="item.value"
+                  ></el-option>
+               </el-select>
+            </el-form-item>
+            <el-form-item label="数据权限" v-show="form.dataScope == 2">
+               <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
+               <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
+               <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
+               <el-tree
+                  class="tree-border"
+                  :data="deptOptions"
+                  show-checkbox
+                  default-expand-all
+                  ref="deptRef"
+                  node-key="id"
+                  :check-strictly="!form.deptCheckStrictly"
+                  empty-text="加载中，请稍候"
+                  :props="{ label: 'label', children: 'children' }"
+               ></el-tree>
+            </el-form-item>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" @click="submitDataScope">确 定</el-button>
+               <el-button @click="cancelDataScope">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
+   </div>
+</template>
+
+<script setup name="Role">
+import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from "@/api/system/role"
+import { roleMenuTreeselect, treeselect as menuTreeselect } from "@/api/system/menu"
+
+const router = useRouter()
+const { proxy } = getCurrentInstance()
+const { sys_normal_disable } = useDict("sys_normal_disable")
+
+const tableRef = ref()
+const open = ref(false)
+const title = ref("")
+const dateRange = ref([])
+const menuOptions = ref([])
+const menuExpand = ref(false)
+const menuNodeAll = ref(false)
+const deptExpand = ref(true)
+const deptNodeAll = ref(false)
+const deptOptions = ref([])
+const openDataScope = ref(false)
+const menuRef = ref(null)
+const deptRef = ref(null)
+
+// 搜索项配置
+const searchColumns = [
+  { label: "角色名称", prop: "roleName", component: "input", placeholder: "请输入角色名称", width: "240px" },
+  { label: "权限字符", prop: "roleKey", component: "input", placeholder: "请输入权限字符", width: "240px" },
+  { label: "状态", prop: "status", component: "select", dict: "sys_normal_disable", placeholder: "角色状态", width: "240px" },
+  { label: "创建时间", prop: "dateRange", component: "daterange", width: "308px" }
+]
+
+// 表格列配置
+const columns = [
+  { label: "角色编号", prop: "roleId", width: 120 },
+  { label: "角色名称", prop: "roleName", width: 150, showOverflowTooltip: true },
+  { label: "权限字符", prop: "roleKey", width: 150, showOverflowTooltip: true },
+  { label: "显示顺序", prop: "roleSort", width: 100 },
+  { label: "状态", prop: "status" },
+  { label: "创建时间", prop: "createTime", parseTime: true },
+  { label: "操作", prop: "action", showInToolbar: false }
+]
+
+// 查询函数
+function queryList(params) {
+  const p = proxy.addDateRange({ ...params }, params.dateRange)
+  delete p.dateRange
+  return listRole(p)
+}
+
+/** 数据范围选项*/
+const dataScopeOptions = ref([
+  { value: "1", label: "全部数据权限" },
+  { value: "2", label: "自定数据权限" },
+  { value: "3", label: "本部门数据权限" },
+  { value: "4", label: "本部门及以下数据权限" },
+  { value: "5", label: "仅本人数据权限" }
+])
+
+const data = reactive({
+  form: {},
+  rules: {
+    roleName: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
+    roleKey: [{ required: true, message: "权限字符不能为空", trigger: "blur" }],
+    roleSort: [{ required: true, message: "角色顺序不能为空", trigger: "blur" }]
+  },
+})
+
+const { form, rules } = toRefs(data)
+
+/** 删除按钮操作 */
+function handleDelete(roleIds) {
+  proxy.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?').then(function () {
+    return delRole(roleIds)
+  }).then(() => {
+    tableRef.value.refresh()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("system/role/export", {
+    ...tableRef.value.getQueryParams()
+  }, `role_${new Date().getTime()}.xlsx`)
+}
+
+/** 角色状态修改 */
+function handleStatusChange(row) {
+  let text = row.status === "0" ? "启用" : "停用"
+  proxy.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗?').then(function () {
+    return changeRoleStatus(row.roleId, row.status)
+  }).then(() => {
+    proxy.$modal.msgSuccess(text + "成功")
+  }).catch(function () {
+    row.status = row.status === "0" ? "1" : "0"
+  })
+}
+
+/** 分配用户 */
+function handleAuthUser(row) {
+  router.push("/system/role-auth/user/" + row.roleId)
+}
+
+/** 查询菜单树结构 */
+function getMenuTreeselect() {
+  menuTreeselect().then(response => {
+    menuOptions.value = response.data
+  })
+}
+
+/** 所有部门节点数据 */
+function getDeptAllCheckedKeys() {
+  // 目前被选中的部门节点
+  let checkedKeys = deptRef.value.getCheckedKeys()
+  // 半选中的部门节点
+  let halfCheckedKeys = deptRef.value.getHalfCheckedKeys()
+  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
+  return checkedKeys
+}
+
+/** 重置新增的表单以及其他数据  */
+function reset() {
+  if (menuRef.value != undefined) {
+    menuRef.value.setCheckedKeys([])
+  }
+  menuExpand.value = false
+  menuNodeAll.value = false
+  deptExpand.value = true
+  deptNodeAll.value = false
+  form.value = {
+    roleId: undefined,
+    roleName: undefined,
+    roleKey: undefined,
+    roleSort: 0,
+    status: "0",
+    menuIds: [],
+    deptIds: [],
+    menuCheckStrictly: true,
+    deptCheckStrictly: true,
+    remark: undefined
+  }
+  proxy.resetForm("roleRef")
+}
+
+/** 添加角色 */
+function handleAdd() {
+  reset()
+  getMenuTreeselect()
+  open.value = true
+  title.value = "添加角色"
+}
+
+/** 修改角色 */
+function handleUpdate(row) {
+  reset()
+  const roleId = row.roleId
+  const roleMenu = getRoleMenuTreeselect(roleId)
+  getRole(roleId).then(response => {
+    form.value = response.data
+    form.value.roleSort = Number(form.value.roleSort)
+    open.value = true
+    title.value = "修改角色"
+    nextTick(() => {
+      roleMenu.then((res) => {
+        let checkedKeys = res.checkedKeys
+        checkedKeys.forEach((v) => {
+          nextTick(() => {
+            menuRef.value.setChecked(v, true, false)
+          })
+        })
+      })
+    })
+  })
+}
+
+/** 根据角色ID查询菜单树结构 */
+function getRoleMenuTreeselect(roleId) {
+  return roleMenuTreeselect(roleId).then(response => {
+    menuOptions.value = response.menus
+    return response
+  })
+}
+
+/** 根据角色ID查询部门树结构 */
+function getDeptTree(roleId) {
+  return deptTreeSelect(roleId).then(response => {
+    deptOptions.value = response.depts
+    return response
+  })
+}
+
+/** 树权限（展开/折叠）*/
+function handleCheckedTreeExpand(value, type) {
+  if (type == "menu") {
+    let treeList = menuOptions.value
+    for (let i = 0; i < treeList.length; i++) {
+      menuRef.value.store.nodesMap[treeList[i].id].expanded = value
+    }
+  } else if (type == "dept") {
+    let treeList = deptOptions.value
+    for (let i = 0; i < treeList.length; i++) {
+      deptRef.value.store.nodesMap[treeList[i].id].expanded = value
+    }
+  }
+}
+
+/** 树权限（全选/全不选） */
+function handleCheckedTreeNodeAll(value, type) {
+  if (type == "menu") {
+    menuRef.value.setCheckedNodes(value ? menuOptions.value : [])
+  } else if (type == "dept") {
+    deptRef.value.setCheckedNodes(value ? deptOptions.value : [])
+  }
+}
+
+/** 树权限（父子联动） */
+function handleCheckedTreeConnect(value, type) {
+  if (type == "menu") {
+    form.value.menuCheckStrictly = value ? true : false
+  } else if (type == "dept") {
+    form.value.deptCheckStrictly = value ? true : false
+  }
+}
+
+/** 所有菜单节点数据 */
+function getMenuAllCheckedKeys() {
+  // 目前被选中的菜单节点
+  let checkedKeys = menuRef.value.getCheckedKeys()
+  // 半选中的菜单节点
+  let halfCheckedKeys = menuRef.value.getHalfCheckedKeys()
+  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
+  return checkedKeys
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["roleRef"].validate(valid => {
+    if (valid) {
+      if (form.value.roleId != undefined) {
+        form.value.menuIds = getMenuAllCheckedKeys()
+        updateRole(form.value).then(() => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          tableRef.value.refresh()
+        })
+      } else {
+        form.value.menuIds = getMenuAllCheckedKeys()
+        addRole(form.value).then(() => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          tableRef.value.refresh()
+        })
+      }
+    }
+  })
+}
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false
+  reset()
+}
+
+/** 选择角色权限范围触发 */
+function dataScopeSelectChange(value) {
+  if (value !== "2") {
+    deptRef.value.setCheckedKeys([])
+  }
+}
+
+/** 分配数据权限操作 */
+function handleDataScope(row) {
+  reset()
+  const deptTreeSelect = getDeptTree(row.roleId)
+  getRole(row.roleId).then(response => {
+    form.value = response.data
+    openDataScope.value = true
+    title.value = "分配数据权限"
+    nextTick(() => {
+      deptTreeSelect.then(res => {
+        nextTick(() => {
+          if (deptRef.value) {
+            deptRef.value.setCheckedKeys(res.checkedKeys)
+          }
+        })
+      })
+    })
+  })
+}
+
+/** 提交按钮（数据权限） */
+function submitDataScope() {
+  if (form.value.roleId != undefined) {
+    form.value.deptIds = getDeptAllCheckedKeys()
+    dataScope(form.value).then(() => {
+      proxy.$modal.msgSuccess("修改成功")
+      openDataScope.value = false
+      tableRef.value.refresh()
+    })
+  }
+}
+
+/** 取消按钮（数据权限）*/
+function cancelDataScope() {
+  openDataScope.value = false
+  reset()
+}
+</script>
diff --git a/src/views/system/role/selectUser.vue b/src/views/system/role/selectUser.vue
index 3f48530..3b641b1 100644
--- a/src/views/system/role/selectUser.vue
+++ b/src/views/system/role/selectUser.vue
@@ -1,144 +1,99 @@
-<template>
-   <!-- 授权用户 -->
-   <el-dialog title="选择用户" v-model="visible" width="800px" top="5vh" append-to-body>
-      <el-form :model="queryParams" ref="queryRef" :inline="true">
-         <el-form-item label="用户名称" prop="userName">
-            <el-input
-               v-model="queryParams.userName"
-               placeholder="请输入用户名称"
-               clearable
-               style="width: 180px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="手机号码" prop="phonenumber">
-            <el-input
-               v-model="queryParams.phonenumber"
-               placeholder="请输入手机号码"
-               clearable
-               style="width: 180px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
-      <el-row>
-         <el-table @row-click="clickRow" ref="refTable" :data="userList" @selection-change="handleSelectionChange" height="260px">
-            <el-table-column type="selection" width="55"></el-table-column>
-            <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
-            <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
-            <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
-            <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
-            <el-table-column label="状态" align="center" prop="status">
-               <template #default="scope">
-                  <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
-               </template>
-            </el-table-column>
-            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-               <template #default="scope">
-                  <span>{{ parseTime(scope.row.createTime) }}</span>
-               </template>
-            </el-table-column>
-         </el-table>
-         <pagination
-            v-show="total > 0"
-            :total="total"
-            v-model:page="queryParams.pageNum"
-            v-model:limit="queryParams.pageSize"
-            @pagination="getList"
-         />
-      </el-row>
-      <template #footer>
-         <div class="dialog-footer">
-            <el-button type="primary" @click="handleSelectUser">确 定</el-button>
-            <el-button @click="visible = false">取 消</el-button>
-         </div>
-      </template>
-   </el-dialog>
-</template>
-
-<script setup name="SelectUser">
-import { authUserSelectAll, unallocatedUserList } from "@/api/system/role"
-
-const props = defineProps({
-  roleId: {
-    type: [Number, String]
-  }
-})
-
-const { proxy } = getCurrentInstance()
-const { sys_normal_disable } = useDict("sys_normal_disable")
-
-const userList = ref([])
-const visible = ref(false)
-const total = ref(0)
-const userIds = ref([])
-
-const queryParams = reactive({
-  pageNum: 1,
-  pageSize: 10,
-  roleId: undefined,
-  userName: undefined,
-  phonenumber: undefined
-})
-
-// 显示弹框
-function show() {
-  queryParams.roleId = props.roleId
-  getList()
-  visible.value = true
-}
-
-/**选择行 */
-function clickRow(row) {
-  proxy.$refs["refTable"].toggleRowSelection(row)
-}
-
-// 多选框选中数据
-function handleSelectionChange(selection) {
-  userIds.value = selection.map(item => item.userId)
-}
-
-// 查询表数据
-function getList() {
-  unallocatedUserList(queryParams).then(res => {
-    userList.value = res.rows
-    total.value = res.total
-  })
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.pageNum = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  proxy.resetForm("queryRef")
-  handleQuery()
-}
-
-const emit = defineEmits(["ok"])
-/** 选择授权用户操作 */
-function handleSelectUser() {
-  const roleId = queryParams.roleId
-  const uIds = userIds.value.join(",")
-  if (uIds == "") {
-    proxy.$modal.msgError("请选择要分配的用户")
-    return
-  }
-  authUserSelectAll({ roleId: roleId, userIds: uIds }).then(res => {
-    proxy.$modal.msgSuccess(res.msg)
-    visible.value = false
-    emit("ok")
-  })
-}
-
-defineExpose({
-  show,
-})
-</script>
+<template>
+   <!-- 授权用户 -->
+   <el-dialog title="选择用户" v-model="visible" width="800px" top="5vh" append-to-body>
+      <basic-table
+         ref="tableRef"
+         :columns="columns"
+         :search-columns="searchColumns"
+         :query="queryList"
+         :extra-params="{ roleId: props.roleId }"
+         row-key="userId"
+         size="small"
+         height="260px"
+         :show-toolbar="false"
+         :auto-load="false"
+         @row-click="clickRow"
+         @selection-change="handleSelectionChange"
+      />
+      <template #footer>
+         <div class="dialog-footer">
+            <el-button type="primary" @click="handleSelectUser">确 定</el-button>
+            <el-button @click="visible = false">取 消</el-button>
+         </div>
+      </template>
+   </el-dialog>
+</template>
+
+<script setup name="SelectUser">
+import { authUserSelectAll, unallocatedUserList } from "@/api/system/role"
+
+const props = defineProps({
+  roleId: {
+    type: [Number, String]
+  }
+})
+
+const { proxy } = getCurrentInstance()
+
+const tableRef = ref()
+const visible = ref(false)
+const userIds = ref([])
+
+// 搜索项配置
+const searchColumns = [
+  { label: "用户名称", prop: "userName", component: "input", placeholder: "请输入用户名称", width: "200px" },
+  { label: "手机号码", prop: "phonenumber", component: "input", placeholder: "请输入手机号码", width: "200px" }
+]
+
+// 表格列配置
+const columns = [
+  { label: "用户名称", prop: "userName", align: "center" },
+  { label: "用户昵称", prop: "nickName", align: "center" },
+  { label: "邮箱", prop: "email", align: "center" },
+  { label: "手机", prop: "phonenumber", align: "center" },
+  { label: "状态", prop: "status", align: "center", dict: "sys_normal_disable" },
+  { label: "创建时间", prop: "createTime", align: "center", width: 180, parseTime: true }
+]
+
+// 查询函数（BasicTable 调用，返回 { rows, total }）
+function queryList(params) {
+  return unallocatedUserList(params)
+}
+
+// 显示弹框
+function show() {
+  visible.value = true
+  nextTick(() => {
+    tableRef.value?.reload()
+  })
+}
+
+/** 选择行 */
+function clickRow(row) {
+  tableRef.value?.getTableRef()?.toggleRowSelection(row)
+}
+
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  userIds.value = selection.map(item => item.userId)
+}
+
+const emit = defineEmits(["ok"])
+/** 选择授权用户操作 */
+function handleSelectUser() {
+  const uIds = tableRef.value?.getSelection().map(u => u.userId).join(",") || ""
+  if (uIds === "") {
+    proxy.$modal.msgError("请选择要分配的用户")
+    return
+  }
+  authUserSelectAll({ roleId: props.roleId, userIds: uIds }).then(res => {
+    proxy.$modal.msgSuccess(res.msg)
+    visible.value = false
+    emit("ok")
+  })
+}
+
+defineExpose({
+  show,
+})
+</script>
diff --git a/src/views/system/user/authRole.vue b/src/views/system/user/authRole.vue
index 8293fb3..d73a064 100644
--- a/src/views/system/user/authRole.vue
+++ b/src/views/system/user/authRole.vue
@@ -1,123 +1,151 @@
-<template>
-   <div class="app-container">
-      <h4 class="form-header h4">基本信息</h4>
-      <el-form :model="form" label-width="80px">
-         <el-row>
-            <el-col :span="8" :offset="2">
-               <el-form-item label="用户昵称" prop="nickName">
-                  <el-input v-model="form.nickName" disabled />
-               </el-form-item>
-            </el-col>
-            <el-col :span="8" :offset="2">
-               <el-form-item label="登录账号" prop="userName">
-                  <el-input v-model="form.userName" disabled />
-               </el-form-item>
-            </el-col>
-         </el-row>
-      </el-form>
-
-      <h4 class="form-header h4">角色信息</h4>
-      <el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="roleRef" @selection-change="handleSelectionChange" :data="roles.slice((pageNum - 1) * pageSize, pageNum * pageSize)">
-         <el-table-column label="序号" width="55" type="index" align="center">
-            <template #default="scope">
-               <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column type="selection" :reserve-selection="true" :selectable="checkSelectable" width="55"></el-table-column>
-         <el-table-column label="角色编号" align="center" prop="roleId" />
-         <el-table-column label="角色名称" align="center" prop="roleName" />
-         <el-table-column label="权限字符" align="center" prop="roleKey" />
-         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-         </el-table-column>
-      </el-table>
-
-      <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" />
-
-      <el-form label-width="100px">
-         <div style="text-align: center;margin-left:-120px;margin-top:30px;">
-            <el-button type="primary" @click="submitForm()">提交</el-button>
-            <el-button @click="close()">返回</el-button>
-         </div>
-      </el-form>
-   </div>
-</template>
-
-<script setup name="AuthRole">
-import { getAuthRole, updateAuthRole } from "@/api/system/user"
-
-const route = useRoute()
-const { proxy } = getCurrentInstance()
-
-const loading = ref(true)
-const total = ref(0)
-const pageNum = ref(1)
-const pageSize = ref(10)
-const roleIds = ref([])
-const roles = ref([])
-const form = ref({
-  nickName: undefined,
-  userName: undefined,
-  userId: undefined
-})
-
-/** 单击选中行数据 */
-function clickRow(row) {
-  if (checkSelectable(row)) {
-    proxy.$refs["roleRef"].toggleRowSelection(row)
-  }
-}
-
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  roleIds.value = selection.map(item => item.roleId)
-}
-
-/** 保存选中的数据编号 */
-function getRowKey(row) {
-  return row.roleId
-}
-
-// 检查角色状态
-function checkSelectable(row) {
-  return row.status === "0" ? true : false
-}
-
-/** 关闭按钮 */
-function close() {
-  const obj = { path: "/system/user" }
-  proxy.$tab.closeOpenPage(obj)
-}
-
-/** 提交按钮 */
-function submitForm() {
-  const userId = form.value.userId
-  const rIds = roleIds.value.join(",")
-  updateAuthRole({ userId: userId, roleIds: rIds }).then(() => {
-    proxy.$modal.msgSuccess("授权成功")
-    close()
-  })
-}
-
-(() => {
-  const userId = route.params && route.params.userId
-  if (userId) {
-    loading.value = true
-    getAuthRole(userId).then(response => {
-      form.value = response.user
-      roles.value = response.roles
-      total.value = roles.value.length
-      nextTick(() => {
-        roles.value.forEach(row => {
-          if (row.flag) {
-            proxy.$refs["roleRef"].toggleRowSelection(row)
-          }
-        })
-      })
-      loading.value = false
-    })
-  }
-})()
-</script>
+<template>
+   <div class="app-container">
+      <h4 class="form-header h4">基本信息</h4>
+      <el-form :model="form" label-width="80px">
+         <el-row>
+            <el-col :span="8" :offset="2">
+               <el-form-item label="用户昵称" prop="nickName">
+                  <el-input v-model="form.nickName" disabled />
+               </el-form-item>
+            </el-col>
+            <el-col :span="8" :offset="2">
+               <el-form-item label="登录账号" prop="userName">
+                  <el-input v-model="form.userName" disabled />
+               </el-form-item>
+            </el-col>
+         </el-row>
+      </el-form>
+
+      <h4 class="form-header h4">角色信息</h4>
+      <basic-table
+         ref="tableRef"
+         :columns="columns"
+         :query="queryList"
+         :extra-params="extraParams"
+         row-key="roleId"
+         :show-index="true"
+         :show-toolbar="false"
+         @row-click="clickRow"
+         @selection-change="handleSelectionChange"
+      />
+
+      <el-form label-width="100px">
+         <div style="text-align: center;margin-left:-120px;margin-top:30px;">
+            <el-button type="primary" @click="submitForm()">提交</el-button>
+            <el-button @click="close()">返回</el-button>
+         </div>
+      </el-form>
+   </div>
+</template>
+
+<script setup name="AuthRole">
+import { getAuthRole, updateAuthRole } from "@/api/system/user"
+
+const route = useRoute()
+const { proxy } = getCurrentInstance()
+
+const tableRef = ref()
+const form = ref({
+  nickName: undefined,
+  userName: undefined,
+  userId: undefined
+})
+const allRoles = ref([])
+const currentPageRows = ref([])
+const selectedRoleIds = ref(new Set())
+
+// 固定参数：用户 ID（每次请求合并传入）
+const extraParams = reactive({ userId: route.params.userId })
+
+// 表格列配置
+const columns = [
+  { label: "角色编号", prop: "roleId", align: "center" },
+  { label: "角色名称", prop: "roleName", align: "center" },
+  { label: "权限字符", prop: "roleKey", align: "center" },
+  { label: "创建时间", prop: "createTime", align: "center", width: 180, parseTime: true }
+]
+
+/**
+ * 查询函数：本页数据由 getAuthRole 一次性返回（user + roles），
+ * BasicTable 走服务端分页机制，这里改为缓存全部角色后按页切片（客户端分页）。
+ * 跨页选择通过 selectedRoleIds 集合维护（BasicTable 内置 selection 列不支持 reserve-selection）。
+ */
+function queryList(params) {
+  const pageNum = params.pageNum || 1
+  const pageSize = params.pageSize || 10
+  if (!params.userId) {
+    return Promise.resolve({ rows: [], total: 0 })
+  }
+  if (!allRoles.value.length) {
+    return getAuthRole(params.userId).then(res => {
+      form.value = res.user
+      allRoles.value = res.roles || []
+      // 初始化已选中集合：原 flag 为 true 的角色
+      selectedRoleIds.value = new Set(
+        allRoles.value.filter(r => r.flag).map(r => r.roleId)
+      )
+      const total = allRoles.value.length
+      const rows = allRoles.value.slice((pageNum - 1) * pageSize, pageNum * pageSize)
+      currentPageRows.value = rows
+      nextTick(() => applySelection())
+      return { rows, total }
+    })
+  } else {
+    const total = allRoles.value.length
+    const rows = allRoles.value.slice((pageNum - 1) * pageSize, pageNum * pageSize)
+    currentPageRows.value = rows
+    nextTick(() => applySelection())
+    return Promise.resolve({ rows, total })
+  }
+}
+
+/** 按当前页回显选中状态（仅当前页可见行可被 toggleRowSelection） */
+function applySelection() {
+  const tableEl = tableRef.value?.getTableRef()
+  currentPageRows.value.forEach(row => {
+    if (selectedRoleIds.value.has(row.roleId)) {
+      tableEl?.toggleRowSelection(row, true)
+    }
+  })
+}
+
+/** 角色状态可选：仅正常（status==="0"）角色可勾选 */
+function checkSelectable(row) {
+  return row.status === "0"
+}
+
+/** 单击选中行数据 */
+function clickRow(row) {
+  if (checkSelectable(row)) {
+    tableRef.value?.getTableRef()?.toggleRowSelection(row)
+  }
+}
+
+/** 多选框选中数据：按当前页回填/移除，维护跨页选中集合 */
+function handleSelectionChange(selection) {
+  const pageSelected = new Set(selection.map(r => r.roleId))
+  currentPageRows.value.forEach(row => {
+    if (pageSelected.has(row.roleId)) {
+      selectedRoleIds.value.add(row.roleId)
+    } else {
+      selectedRoleIds.value.delete(row.roleId)
+    }
+  })
+}
+
+/** 关闭按钮 */
+function close() {
+  const obj = { path: "/system/user" }
+  proxy.$tab.closeOpenPage(obj)
+}
+
+/** 提交按钮 */
+function submitForm() {
+  const userId = form.value.userId
+  const rIds = [...selectedRoleIds.value].join(",")
+  updateAuthRole({ userId: userId, roleIds: rIds }).then(() => {
+    proxy.$modal.msgSuccess("授权成功")
+    close()
+  })
+}
+</script>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 5b80c74..1c491ad 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,459 +1,388 @@
-<template>
-  <div class="app-container tree-sidebar-manage-wrap">
-    <tree-panel title="组织机构" :tree-data="deptOptions" search-placeholder="请输入部门名称" storage-key="dept-sidebar-width" :defaultExpandAll="true" @node-click="handleNodeClick" @refresh="getDeptTree" ref="deptTreeRef" />
-    <div class="tree-sidebar-content">
-      <div class="content-inner">
-        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-          <el-form-item label="用户名称" prop="userName">
-            <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
-          </el-form-item>
-          <el-form-item label="手机号码" prop="phonenumber">
-            <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter="handleQuery" />
-          </el-form-item>
-          <el-form-item label="状态" prop="status">
-            <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
-              <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="创建时间" style="width: 308px">
-            <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-          </el-form-item>
-        </el-form>
-
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']">修改</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']">删除</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="['system:user:import']">导入</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button>
-          </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns" storageKey="xxxxxxxx"></right-toolbar>
-        </el-row>
-
-        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
-          <el-table-column type="selection" width="50" align="center" />
-          <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns.userId.visible" />
-          <el-table-column label="用户名称" align="center" key="userName" v-if="columns.userName.visible" :show-overflow-tooltip="true">
-            <template #default="scope">
-              <a class="link-type" style="cursor:pointer" @click="handleViewData(scope.row)">{{ scope.row.userName }}</a>
-            </template>
-         </el-table-column>
-          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns.nickName.visible" :show-overflow-tooltip="true" />
-          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns.deptName.visible" :show-overflow-tooltip="true" />
-          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns.phonenumber.visible" width="120" />
-          <el-table-column label="状态" align="center" key="status" v-if="columns.status.visible">
-            <template #default="scope">
-              <el-switch
-                v-model="scope.row.status"
-                active-value="0"
-                inactive-value="1"
-                @change="handleStatusChange(scope.row)"
-              ></el-switch>
-            </template>
-          </el-table-column>
-          <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns.createTime.visible" width="160">
-            <template #default="scope">
-              <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
-            <template #default="scope">
-              <el-tooltip content="修改" placement="top" v-if="scope.row.userId !== 1">
-                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']"></el-button>
-              </el-tooltip>
-              <el-tooltip content="删除" placement="top" v-if="scope.row.userId !== 1">
-                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']"></el-button>
-              </el-tooltip>
-              <el-tooltip content="重置密码" placement="top" v-if="scope.row.userId !== 1">
-                <el-button link type="primary" icon="Key" @click="handleResetPwd(scope.row)" v-hasPermi="['system:user:resetPwd']"></el-button>
-              </el-tooltip>
-              <el-tooltip content="分配角色" placement="top" v-if="scope.row.userId !== 1">
-                <el-button link type="primary" icon="CircleCheck" @click="handleAuthRole(scope.row)" v-hasPermi="['system:user:edit']"></el-button>
-              </el-tooltip>
-            </template>
-          </el-table-column>
-        </el-table>
-        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
-      </div>
-    </div>
-
-    <!-- 添加或修改用户配置对话框 -->
-    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
-      <el-form :model="form" :rules="rules" ref="userRef" label-width="80px">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="用户昵称" prop="nickName">
-              <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="归属部门" prop="deptId">
-              <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="手机号码" prop="phonenumber">
-              <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="邮箱" prop="email">
-              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
-              <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password" :rules="pwdValidator">
-              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="用户性别">
-              <el-select v-model="form.sex" placeholder="请选择">
-                <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="状态">
-              <el-radio-group v-model="form.status">
-                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="岗位">
-              <el-select v-model="form.postIds" multiple placeholder="请选择">
-                <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="角色">
-              <el-select v-model="form.roleIds" multiple placeholder="请选择">
-                <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="备注">
-              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-
-    <!-- 用户详情抽屉 -->
-    <user-view-drawer ref="userViewRef" />
-    <!-- 用户导入对话框 -->
-    <excel-import-dialog ref="importUserRef" title="用户导入" action="/system/user/importData" template-action="/system/user/importTemplate" template-file-name="user_template" update-support-label="是否更新已经存在的用户数据" @success="getList" />
-  </div>
-</template>
-
-<script setup name="User">
-import TreePanel from "@/components/TreePanel"
-import ExcelImportDialog from "@/components/ExcelImportDialog"
-import UserViewDrawer from "./view"
-import { usePasswordRule } from "@/utils/passwordRule"
-import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user"
-
-const router = useRouter()
-const { proxy } = getCurrentInstance()
-const { pwdValidator, pwdPromptValidator } = usePasswordRule()
-const { sys_normal_disable, sys_user_sex } = useDict("sys_normal_disable", "sys_user_sex")
-
-const userList = ref([])
-const open = ref(false)
-const loading = ref(true)
-const showSearch = ref(true)
-const ids = ref([])
-const single = ref(true)
-const multiple = ref(true)
-const total = ref(0)
-const title = ref("")
-const dateRange = ref([])
-const deptOptions = ref(undefined)
-const enabledDeptOptions = ref(undefined)
-const initPassword = ref(undefined)
-const postOptions = ref([])
-const roleOptions = ref([])
-// 列显隐信息
-const columns = ref({
-  userId: { label: '用户编号', visible: true },
-  userName: { label: '用户名称', visible: true },
-  nickName: { label: '用户昵称', visible: true },
-  deptName: { label: '部门', visible: true },
-  phonenumber: { label: '手机号码', visible: true },
-  status: { label: '状态', visible: true },
-  createTime: { label: '创建时间', visible: true }
-})
-
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    userName: undefined,
-    phonenumber: undefined,
-    status: undefined,
-    deptId: undefined
-  },
-  rules: {
-    userName: [{ required: true, message: "用户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
-    nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
-    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
-    phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
-  }
-})
-
-const { queryParams, form, rules } = toRefs(data)
-
-/** 查询用户列表 */
-function getList() {
-  loading.value = true
-  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
-    loading.value = false
-    userList.value = res.rows
-    total.value = res.total
-  })
-}
-
-/** 查询部门下拉树结构 */
-function getDeptTree() {
-  deptTreeSelect().then(response => {
-    deptOptions.value = response.data
-    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
-  })
-}
-
-/** 过滤禁用的部门 */
-function filterDisabledDept(deptList) {
-  return deptList.filter(dept => {
-    if (dept.disabled) {
-      return false
-    }
-    if (dept.children && dept.children.length) {
-      dept.children = filterDisabledDept(dept.children)
-    }
-    return true
-  })
-}
-
-/** 节点单击事件 */
-function handleNodeClick(data) {
-  queryParams.value.deptId = data.id
-  handleQuery()
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  dateRange.value = []
-  proxy.resetForm("queryRef")
-  queryParams.value.deptId = undefined
-  proxy.$refs.deptTreeRef.setCurrentKey(null)
-  handleQuery()
-}
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const userIds = row.userId || ids.value
-  proxy.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
-    return delUser(userIds)
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => {})
-}
-
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download("system/user/export", {
-    ...queryParams.value,
-  },`user_${new Date().getTime()}.xlsx`)
-}
-
-/** 用户状态修改  */
-function handleStatusChange(row) {
-  let text = row.status === "0" ? "启用" : "停用"
-  proxy.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () {
-    return changeUserStatus(row.userId, row.status)
-  }).then(() => {
-    proxy.$modal.msgSuccess(text + "成功")
-  }).catch(function () {
-    row.status = row.status === "0" ? "1" : "0"
-  })
-}
-
-/** 更多操作 */
-function handleCommand(command, row) {
-  switch (command) {
-    case "handleResetPwd":
-      handleResetPwd(row)
-      break
-    case "handleAuthRole":
-      handleAuthRole(row)
-      break
-    default:
-      break
-  }
-}
-
-/** 跳转角色分配 */
-function handleAuthRole(row) {
-  const userId = row.userId
-  router.push("/system/user-auth/role/" + userId)
-}
-
-/** 重置密码按钮操作 */
-function handleResetPwd(row) {
-  proxy.$prompt(`请输入「${row.userName}」的新密码`, "重置密码", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    closeOnClickModal: false,
-    inputValidator: pwdPromptValidator
-  }).then(({ value }) => {
-    resetUserPwd(row.userId, value).then(() => {
-      proxy.$modal.msgSuccess("修改成功，新密码是：" + value)
-    })
-  }).catch(() => {})
-}
-
-/** 选择条数  */
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.userId)
-  single.value = selection.length != 1
-  multiple.value = !selection.length
-}
-
-/** 详情按钮操作 */
-function handleViewData(row) {
-  proxy.$refs["userViewRef"].open(row.userId)
-}
-
-/** 导入按钮操作 */
-function handleImport() {
-  proxy.$refs["importUserRef"].open()
-}
-
-/** 重置操作表单 */
-function reset() {
-  form.value = {
-    userId: undefined,
-    deptId: undefined,
-    userName: undefined,
-    nickName: undefined,
-    password: undefined,
-    phonenumber: undefined,
-    email: undefined,
-    sex: undefined,
-    status: "0",
-    remark: undefined,
-    postIds: [],
-    roleIds: []
-  }
-  proxy.resetForm("userRef")
-}
-
-/** 取消按钮 */
-function cancel() {
-  open.value = false
-  reset()
-}
-
-/** 新增按钮操作 */
-function handleAdd() {
-  reset()
-  getUser().then(response => {
-    postOptions.value = response.posts
-    roleOptions.value = response.roles
-    open.value = true
-    title.value = "添加用户"
-    form.value.password = initPassword.value
-  })
-}
-
-/** 修改按钮操作 */
-function handleUpdate(row) {
-  reset()
-  const userId = row.userId || ids.value
-  getUser(userId).then(response => {
-    form.value = response.data
-    postOptions.value = response.posts
-    roleOptions.value = response.roles
-    form.value.postIds = response.postIds
-    form.value.roleIds = response.roleIds
-    open.value = true
-    title.value = "修改用户"
-    form.value.password = ""
-  })
-}
-
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["userRef"].validate(valid => {
-    if (valid) {
-      if (form.value.userId != undefined) {
-        updateUser(form.value).then(() => {
-          proxy.$modal.msgSuccess("修改成功")
-          open.value = false
-          getList()
-        })
-      } else {
-        addUser(form.value).then(() => {
-          proxy.$modal.msgSuccess("新增成功")
-          open.value = false
-          getList()
-        })
-      }
-    }
-  })
-}
-
-onMounted(() => {
-  getDeptTree()
-  getList()
-  proxy.getConfigKey("sys.user.initPassword").then(response => {
-    initPassword.value = response.msg
-  })
-})
-</script>
+<template>
+  <div class="app-container tree-sidebar-manage-wrap">
+    <tree-panel title="组织机构" :tree-data="deptOptions" search-placeholder="请输入部门名称" storage-key="dept-sidebar-width" :defaultExpandAll="true" @node-click="handleNodeClick" @refresh="getDeptTree" ref="deptTreeRef" />
+    <div class="tree-sidebar-content">
+      <div class="content-inner">
+        <basic-table
+          ref="tableRef"
+          :columns="columns"
+          :search-columns="searchColumns"
+          :query="queryList"
+          :extra-params="extraParams"
+          row-key="userId"
+          :search-label-width="'68px'"
+        >
+          <template #toolbar="{ selection, ids }">
+            <el-col :span="1.5">
+              <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button type="success" plain icon="Edit" :disabled="selection.length !== 1" @click="handleUpdate(selection[0])" v-hasPermi="['system:user:edit']">修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button type="danger" plain icon="Delete" :disabled="!selection.length" @click="handleDelete(ids)" v-hasPermi="['system:user:remove']">删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="['system:user:import']">导入</el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button>
+            </el-col>
+          </template>
+
+          <template #col-userName="{ row }">
+            <a class="link-type" style="cursor:pointer" @click="handleViewData(row)">{{ row.userName }}</a>
+          </template>
+
+          <template #col-status="{ row }">
+            <el-switch
+              v-model="row.status"
+              active-value="0"
+              inactive-value="1"
+              @change="handleStatusChange(row)"
+            ></el-switch>
+          </template>
+
+          <template #col-action="{ row }">
+            <el-tooltip content="修改" placement="top" v-if="row.userId !== 1">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(row)" v-hasPermi="['system:user:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top" v-if="row.userId !== 1">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(row.userId)" v-hasPermi="['system:user:remove']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="重置密码" placement="top" v-if="row.userId !== 1">
+              <el-button link type="primary" icon="Key" @click="handleResetPwd(row)" v-hasPermi="['system:user:resetPwd']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="分配角色" placement="top" v-if="row.userId !== 1">
+              <el-button link type="primary" icon="CircleCheck" @click="handleAuthRole(row)" v-hasPermi="['system:user:edit']"></el-button>
+            </el-tooltip>
+          </template>
+        </basic-table>
+      </div>
+    </div>
+
+    <!-- 添加或修改用户配置对话框 -->
+    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
+      <el-form :model="form" :rules="rules" ref="userRef" label-width="80px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="用户昵称" prop="nickName">
+              <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="归属部门" prop="deptId">
+              <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="手机号码" prop="phonenumber">
+              <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="邮箱" prop="email">
+              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
+              <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password" :rules="pwdValidator">
+              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="用户性别">
+              <el-select v-model="form.sex" placeholder="请选择">
+                <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="状态">
+              <el-radio-group v-model="form.status">
+                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="岗位">
+              <el-select v-model="form.postIds" multiple placeholder="请选择">
+                <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="角色">
+              <el-select v-model="form.roleIds" multiple placeholder="请选择">
+                <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="备注">
+              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 用户详情抽屉 -->
+    <user-view-drawer ref="userViewRef" />
+    <!-- 用户导入对话框 -->
+    <excel-import-dialog ref="importUserRef" title="用户导入" action="/system/user/importData" template-action="/system/user/importTemplate" template-file-name="user_template" update-support-label="是否更新已经存在的用户数据" @success="() => tableRef.refresh()" />
+  </div>
+</template>
+
+<script setup name="User">
+import TreePanel from "@/components/TreePanel"
+import ExcelImportDialog from "@/components/ExcelImportDialog"
+import UserViewDrawer from "./view"
+import { usePasswordRule } from "@/utils/passwordRule"
+import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user"
+
+const router = useRouter()
+const { proxy } = getCurrentInstance()
+const { pwdValidator, pwdPromptValidator } = usePasswordRule()
+const { sys_normal_disable, sys_user_sex } = useDict("sys_normal_disable", "sys_user_sex")
+
+const tableRef = ref()
+const open = ref(false)
+const title = ref("")
+const deptId = ref(undefined)
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const initPassword = ref(undefined)
+const postOptions = ref([])
+const roleOptions = ref([])
+
+// 部门联动参数（不参与搜索重置，由树点击控制）
+const extraParams = computed(() => ({ deptId: deptId.value }))
+
+// 搜索项配置
+const searchColumns = [
+  { label: "用户名称", prop: "userName", component: "input", placeholder: "请输入用户名称", width: "240px" },
+  { label: "手机号码", prop: "phonenumber", component: "input", placeholder: "请输入手机号码", width: "240px" },
+  { label: "状态", prop: "status", component: "select", dict: "sys_normal_disable", placeholder: "用户状态", width: "240px" },
+  { label: "创建时间", prop: "dateRange", component: "daterange", width: "308px" }
+]
+
+// 表格列配置
+const columns = [
+  { label: "用户编号", prop: "userId" },
+  { label: "用户名称", prop: "userName", showOverflowTooltip: true },
+  { label: "用户昵称", prop: "nickName", showOverflowTooltip: true },
+  { label: "部门", prop: "deptName", showOverflowTooltip: true, formatter: (row) => row.dept ? row.dept.deptName : "" },
+  { label: "手机号码", prop: "phonenumber", width: 120 },
+  { label: "状态", prop: "status" },
+  { label: "创建时间", prop: "createTime", width: 160, parseTime: true },
+  { label: "操作", prop: "action", width: 150, showInToolbar: false }
+]
+
+// 查询函数
+function queryList(params) {
+  const p = proxy.addDateRange({ ...params }, params.dateRange)
+  delete p.dateRange
+  return listUser(p)
+}
+
+const data = reactive({
+  form: {},
+  rules: {
+    userName: [{ required: true, message: "用户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
+    nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
+    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
+    phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
+  }
+})
+
+const { form, rules } = toRefs(data)
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+/** 节点单击事件 */
+function handleNodeClick(data) {
+  deptId.value = data.id
+  tableRef.value.reload()
+}
+
+/** 删除按钮操作 */
+function handleDelete(userIds) {
+  proxy.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
+    return delUser(userIds)
+  }).then(() => {
+    tableRef.value.refresh()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("system/user/export", {
+    ...tableRef.value.getQueryParams()
+  }, `user_${new Date().getTime()}.xlsx`)
+}
+
+/** 用户状态修改  */
+function handleStatusChange(row) {
+  let text = row.status === "0" ? "启用" : "停用"
+  proxy.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () {
+    return changeUserStatus(row.userId, row.status)
+  }).then(() => {
+    proxy.$modal.msgSuccess(text + "成功")
+  }).catch(function () {
+    row.status = row.status === "0" ? "1" : "0"
+  })
+}
+
+/** 跳转角色分配 */
+function handleAuthRole(row) {
+  const userId = row.userId
+  router.push("/system/user-auth/role/" + userId)
+}
+
+/** 重置密码按钮操作 */
+function handleResetPwd(row) {
+  proxy.$prompt(`请输入「${row.userName}」的新密码`, "重置密码", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    closeOnClickModal: false,
+    inputValidator: pwdPromptValidator
+  }).then(({ value }) => {
+    resetUserPwd(row.userId, value).then(() => {
+      proxy.$modal.msgSuccess("修改成功，新密码是：" + value)
+    })
+  }).catch(() => {})
+}
+
+/** 详情按钮操作 */
+function handleViewData(row) {
+  proxy.$refs["userViewRef"].open(row.userId)
+}
+
+/** 导入按钮操作 */
+function handleImport() {
+  proxy.$refs["importUserRef"].open()
+}
+
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false
+  reset()
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    open.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const userId = row.userId
+  getUser(userId).then(response => {
+    form.value = response.data
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    form.value.postIds = response.postIds
+    form.value.roleIds = response.roleIds
+    open.value = true
+    title.value = "修改用户"
+    form.value.password = ""
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["userRef"].validate(valid => {
+    if (valid) {
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then(() => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          tableRef.value.refresh()
+        })
+      } else {
+        addUser(form.value).then(() => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          tableRef.value.refresh()
+        })
+      }
+    }
+  })
+}
+
+onMounted(() => {
+  getDeptTree()
+  proxy.getConfigKey("sys.user.initPassword").then(response => {
+    initPassword.value = response.msg
+  })
+})
+</script>
diff --git a/src/views/tool/gen/importTable.vue b/src/views/tool/gen/importTable.vue
index 34e0916..7100458 100644
--- a/src/views/tool/gen/importTable.vue
+++ b/src/views/tool/gen/importTable.vue
@@ -1,126 +1,92 @@
-<template>
-  <!-- 导入表 -->
-  <el-dialog title="导入表" v-model="visible" width="800px" top="5vh" append-to-body>
-    <el-form :model="queryParams" ref="queryRef" :inline="true">
-      <el-form-item label="表名称" prop="tableName">
-        <el-input
-          v-model="queryParams.tableName"
-          placeholder="请输入表名称"
-          clearable
-          style="width: 180px"
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="表描述" prop="tableComment">
-        <el-input
-          v-model="queryParams.tableComment"
-          placeholder="请输入表描述"
-          clearable
-          style="width: 180px"
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-    <el-row>
-      <el-table @row-click="clickRow" ref="table" :data="dbTableList" @selection-change="handleSelectionChange" height="260px">
-        <el-table-column type="selection" width="55"></el-table-column>
-        <el-table-column prop="tableName" label="表名称" :show-overflow-tooltip="true"></el-table-column>
-        <el-table-column prop="tableComment" label="表描述" :show-overflow-tooltip="true"></el-table-column>
-        <el-table-column prop="createTime" label="创建时间"></el-table-column>
-        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
-      </el-table>
-      <pagination
-        v-show="total>0"
-        :total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getList"
-      />
-    </el-row>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button type="primary" @click="handleImportTable">确 定</el-button>
-        <el-button @click="visible = false">取 消</el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<script setup>
-import { listDbTable, importTable } from "@/api/tool/gen"
-
-const total = ref(0)
-const visible = ref(false)
-const tables = ref([])
-const dbTableList = ref([])
-const { proxy } = getCurrentInstance()
-
-const queryParams = reactive({
-  pageNum: 1,
-  pageSize: 10,
-  tableName: undefined,
-  tableComment: undefined
-})
-
-const emit = defineEmits(["ok"])
-
-/** 查询参数列表 */
-function show() {
-  getList()
-  visible.value = true
-}
-
-/** 单击选择行 */
-function clickRow(row) {
-  proxy.$refs.table.toggleRowSelection(row)
-}
-
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  tables.value = selection.map(item => item.tableName)
-}
-
-/** 查询表数据 */
-function getList() {
-  listDbTable(queryParams).then(res => {
-    dbTableList.value = res.rows
-    total.value = res.total
-  })
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.pageNum = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  proxy.resetForm("queryRef")
-  handleQuery()
-}
-
-/** 导入按钮操作 */
-function handleImportTable() {
-  const tableNames = tables.value.join(",")
-  if (tableNames == "") {
-    proxy.$modal.msgError("请选择要导入的表")
-    return
-  }
-  importTable({ tables: tableNames, tplWebType: 'element-plus' }).then(res => {
-    proxy.$modal.msgSuccess(res.msg)
-    if (res.code === 200) {
-      visible.value = false
-      emit("ok")
-    }
-  })
-}
-
-defineExpose({
-  show,
-})
-</script>
+<template>
+  <!-- 导入表 -->
+  <el-dialog title="导入表" v-model="visible" width="800px" top="5vh" append-to-body>
+    <basic-table
+      ref="tableRef"
+      :columns="columns"
+      :search-columns="searchColumns"
+      :query="queryList"
+      row-key="tableName"
+      size="small"
+      height="260px"
+      :show-toolbar="false"
+      :auto-load="false"
+      @row-click="clickRow"
+      @selection-change="handleSelectionChange"
+    />
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="handleImportTable">确 定</el-button>
+        <el-button @click="visible = false">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDbTable, importTable } from "@/api/tool/gen"
+
+const tableRef = ref()
+const visible = ref(false)
+const tables = ref([])
+const { proxy } = getCurrentInstance()
+
+// 搜索项配置
+const searchColumns = [
+  { label: "表名称", prop: "tableName", component: "input", placeholder: "请输入表名称", width: "200px" },
+  { label: "表描述", prop: "tableComment", component: "input", placeholder: "请输入表描述", width: "200px" }
+]
+
+// 表格列配置
+const columns = [
+  { label: "表名称", prop: "tableName", align: "center" },
+  { label: "表描述", prop: "tableComment", align: "center" },
+  { label: "创建时间", prop: "createTime", align: "center" },
+  { label: "更新时间", prop: "updateTime", align: "center" }
+]
+
+// 查询函数（BasicTable 调用，返回 { rows, total }）
+function queryList(params) {
+  return listDbTable(params)
+}
+
+const emit = defineEmits(["ok"])
+
+/** 显示弹框 */
+function show() {
+  visible.value = true
+  nextTick(() => {
+    tableRef.value?.reload()
+  })
+}
+
+/** 单击选择行 */
+function clickRow(row) {
+  tableRef.value?.getTableRef()?.toggleRowSelection(row)
+}
+
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  tables.value = selection.map(item => item.tableName)
+}
+
+/** 导入按钮操作 */
+function handleImportTable() {
+  const tableNames = tableRef.value?.getSelection().map(t => t.tableName).join(",") || ""
+  if (tableNames === "") {
+    proxy.$modal.msgError("请选择要导入的表")
+    return
+  }
+  importTable({ tables: tableNames, tplWebType: 'element-plus' }).then(res => {
+    proxy.$modal.msgSuccess(res.msg)
+    if (res.code === 200) {
+      visible.value = false
+      emit("ok")
+    }
+  })
+}
+
+defineExpose({
+  show,
+})
+</script>
diff --git a/src/views/tool/gen/index.vue b/src/views/tool/gen/index.vue
index 5a16582..3ab6e7c 100644
--- a/src/views/tool/gen/index.vue
+++ b/src/views/tool/gen/index.vue
@@ -1,309 +1,249 @@
-<template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
-      <el-form-item label="表名称" prop="tableName">
-        <el-input
-          v-model="queryParams.tableName"
-          placeholder="请输入表名称"
-          clearable
-          style="width: 200px"
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="表描述" prop="tableComment">
-        <el-input
-          v-model="queryParams.tableComment"
-          placeholder="请输入表描述"
-          clearable
-          style="width: 200px"
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="创建时间" style="width: 308px">
-        <el-date-picker
-          v-model="dateRange"
-          value-format="YYYY-MM-DD"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        ></el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="Download"
-          :disabled="multiple"
-          @click="handleGenTable"
-          v-hasPermi="['tool:gen:code']"
-        >生成</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="Plus"
-          @click="openCreateTable"
-          v-hasRole="['admin']"
-        >创建</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="info"
-          plain
-          icon="Upload"
-          @click="openImportTable"
-          v-hasPermi="['tool:gen:import']"
-        >导入</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="Edit"
-          :disabled="single"
-          @click="handleEditTable"
-          v-hasPermi="['tool:gen:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['tool:gen:remove']"
-        >删除</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table ref="genRef" v-loading="loading" :data="tableList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
-      <el-table-column type="selection" align="center" width="55"></el-table-column>
-      <el-table-column label="序号" type="index" width="50" align="center">
-        <template #default="scope">
-          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="表名称" align="center" prop="tableName" :show-overflow-tooltip="true" />
-      <el-table-column label="表描述" align="center" prop="tableComment" :show-overflow-tooltip="true" />
-      <el-table-column label="实体" align="center" prop="className" :show-overflow-tooltip="true" />
-      <el-table-column label="创建时间" align="center" prop="createTime" width="160" sortable="custom" :sort-orders="['descending', 'ascending']" />
-      <el-table-column label="更新时间" align="center" prop="updateTime" width="160" sortable="custom" :sort-orders="['descending', 'ascending']" />
-      <el-table-column label="操作" align="center" width="330" class-name="small-padding fixed-width">
-        <template #default="scope">
-          <el-tooltip content="预览" placement="top">
-            <el-button link type="primary" icon="View" @click="handlePreview(scope.row)" v-hasPermi="['tool:gen:preview']"></el-button>
-          </el-tooltip>
-          <el-tooltip content="编辑" placement="top">
-            <el-button link type="primary" icon="Edit" @click="handleEditTable(scope.row)" v-hasPermi="['tool:gen:edit']"></el-button>
-          </el-tooltip>
-          <el-tooltip content="删除" placement="top">
-            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['tool:gen:remove']"></el-button>
-          </el-tooltip>
-          <el-tooltip content="同步" placement="top">
-            <el-button link type="primary" icon="Refresh" @click="handleSynchDb(scope.row)" v-hasPermi="['tool:gen:edit']"></el-button>
-          </el-tooltip>
-          <el-tooltip content="生成代码" placement="top">
-            <el-button link type="primary" icon="Download" @click="handleGenTable(scope.row)" v-hasPermi="['tool:gen:code']"></el-button>
-          </el-tooltip>
-        </template>
-      </el-table-column>
-    </el-table>
-    <pagination
-      v-show="total>0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-    <!-- 预览界面 -->
-    <el-dialog :title="preview.title" v-model="preview.open" width="80%" top="5vh" append-to-body class="scrollbar">
-      <el-tabs v-model="preview.activeName">
-        <el-tab-pane
-          v-for="(value, key) in preview.data"
-          :label="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
-          :name="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
-          :key="value"
-        >
-          <el-link underline="never" icon="DocumentCopy" v-copyText="value" v-copyText:callback="copyTextSuccess" style="float:right">&nbsp;复制</el-link>
-          <pre>{{ value }}</pre>
-        </el-tab-pane>
-      </el-tabs>
-    </el-dialog>
-    <import-table ref="importRef" @ok="handleQuery" />
-    <create-table ref="createRef" @ok="handleQuery" />
-  </div>
-</template>
-
-<script setup name="Gen">
-import { listTable, previewTable, delTable, genCode, synchDb } from "@/api/tool/gen"
-import router from "@/router"
-import importTable from "./importTable"
-import createTable from "./createTable"
-
-const route = useRoute()
-const { proxy } = getCurrentInstance()
-
-const tableList = ref([])
-const loading = ref(true)
-const showSearch = ref(true)
-const ids = ref([])
-const single = ref(true)
-const multiple = ref(true)
-const total = ref(0)
-const tableNames = ref([])
-const dateRange = ref([])
-const uniqueId = ref("")
-const defaultSort = ref({ prop: "createTime", order: "descending" })
-
-const data = reactive({
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    tableName: undefined,
-    tableComment: undefined,
-    orderByColumn: defaultSort.value.prop,
-    isAsc: defaultSort.value.order
-  },
-  preview: {
-    open: false,
-    title: "代码预览",
-    data: {},
-    activeName: "domain.java"
-  }
-})
-
-const { queryParams, preview } = toRefs(data)
-
-onActivated(() => {
-  const time = route.query.t
-  if (time != null && time != uniqueId.value) {
-    uniqueId.value = time
-    queryParams.value.pageNum = Number(route.query.pageNum)
-    dateRange.value = []
-    proxy.resetForm("queryForm")
-    getList()
-  }
-})
-
-/** 查询表集合 */
-function getList() {
-  loading.value = true
-  listTable(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
-    tableList.value = response.rows
-    total.value = response.total
-    loading.value = false
-  })
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1
-  getList()
-}
-
-/** 生成代码操作 */
-function handleGenTable(row) {
-  const tbNames = row.tableName || tableNames.value
-  if (tbNames == "") {
-    proxy.$modal.msgError("请选择要生成的数据")
-    return
-  }
-  if (row.genType === "1") {
-    genCode(row.tableName).then(response => {
-      proxy.$modal.msgSuccess("成功生成到自定义路径：" + row.genPath)
-    })
-  } else {
-    const zipName = Array.isArray(tbNames) ? "ruoyi.zip" : tbNames + ".zip"
-    proxy.$download.zip("/tool/gen/batchGenCode?tables=" + tbNames, zipName)
-  }
-}
-
-/** 同步数据库操作 */
-function handleSynchDb(row) {
-  const tableName = row.tableName
-  proxy.$modal.confirm('确认要强制同步"' + tableName + '"表结构吗？').then(function () {
-    return synchDb(tableName)
-  }).then(() => {
-    proxy.$modal.msgSuccess("同步成功")
-  }).catch(() => {})
-}
-
-/** 打开导入表弹窗 */
-function openImportTable() {
-  proxy.$refs["importRef"].show()
-}
-
-/** 打开创建表弹窗 */
-function openCreateTable() {
-  proxy.$refs["createRef"].show()
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  dateRange.value = []
-  proxy.resetForm("queryRef")
-  queryParams.value.pageNum = 1
-  proxy.$refs["genRef"].sort(defaultSort.value.prop, defaultSort.value.order)
-}
-
-/** 预览按钮 */
-function handlePreview(row) {
-  previewTable(row.tableId).then(response => {
-    preview.value.data = response.data
-    preview.value.open = true
-    preview.value.activeName = "domain.java"
-  })
-}
-
-/** 复制代码成功 */
-function copyTextSuccess() {
-  proxy.$modal.msgSuccess("复制成功")
-}
-
-// 多选框选中数据
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.tableId)
-  tableNames.value = selection.map(item => item.tableName)
-  single.value = selection.length != 1
-  multiple.value = !selection.length
-}
-
-/** 排序触发事件 */
-function handleSortChange(column, prop, order) {
-  queryParams.value.orderByColumn = column.prop
-  queryParams.value.isAsc = column.order
-  getList()
-}
-
-/** 修改按钮操作 */
-function handleEditTable(row) {
-  const tableId = row.tableId || ids.value[0]
-  const tableName = row.tableName || tableNames.value[0]
-  const params = { pageNum: queryParams.value.pageNum }
-  proxy.$tab.openPage("修改[" + tableName + "]生成配置", '/tool/gen-edit/index/' + tableId, params)
-}
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const tableIds = row.tableId || ids.value
-  proxy.$modal.confirm('是否确认删除表编号为"' + tableIds + '"的数据项？').then(function () {
-    return delTable(tableIds)
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => {})
-}
-
-getList()
-</script>
+<template>
+  <div class="app-container">
+    <basic-table
+      ref="tableRef"
+      :columns="columns"
+      :search-columns="searchColumns"
+      :query="queryList"
+      row-key="tableId"
+      show-index
+      :default-sort="defaultSort"
+      :default-params="defaultParams"
+      @sort-change="handleSortChange"
+      @selection-change="handleSelectionChange"
+    >
+      <template #toolbar="{ selection, ids }">
+        <el-col :span="1.5">
+          <el-button
+            type="primary"
+            plain
+            icon="Download"
+            :disabled="!selection.length"
+            @click="handleGenTable()"
+            v-hasPermi="['tool:gen:code']"
+          >生成</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="primary"
+            plain
+            icon="Plus"
+            @click="openCreateTable"
+            v-hasRole="['admin']"
+          >创建</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="info"
+            plain
+            icon="Upload"
+            @click="openImportTable"
+            v-hasPermi="['tool:gen:import']"
+          >导入</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="success"
+            plain
+            icon="Edit"
+            :disabled="selection.length !== 1"
+            @click="handleEditTable(selection[0])"
+            v-hasPermi="['tool:gen:edit']"
+          >修改</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="danger"
+            plain
+            icon="Delete"
+            :disabled="!selection.length"
+            @click="handleDelete(ids)"
+            v-hasPermi="['tool:gen:remove']"
+          >删除</el-button>
+        </el-col>
+      </template>
+
+      <template #col-action="{ row }">
+        <el-tooltip content="预览" placement="top">
+          <el-button link type="primary" icon="View" @click="handlePreview(row)" v-hasPermi="['tool:gen:preview']"></el-button>
+        </el-tooltip>
+        <el-tooltip content="编辑" placement="top">
+          <el-button link type="primary" icon="Edit" @click="handleEditTable(row)" v-hasPermi="['tool:gen:edit']"></el-button>
+        </el-tooltip>
+        <el-tooltip content="删除" placement="top">
+          <el-button link type="primary" icon="Delete" @click="handleDelete(row.tableId)" v-hasPermi="['tool:gen:remove']"></el-button>
+        </el-tooltip>
+        <el-tooltip content="同步" placement="top">
+          <el-button link type="primary" icon="Refresh" @click="handleSynchDb(row)" v-hasPermi="['tool:gen:edit']"></el-button>
+        </el-tooltip>
+        <el-tooltip content="生成代码" placement="top">
+          <el-button link type="primary" icon="Download" @click="handleGenTable(row)" v-hasPermi="['tool:gen:code']"></el-button>
+        </el-tooltip>
+      </template>
+    </basic-table>
+
+    <!-- 预览界面 -->
+    <el-dialog :title="preview.title" v-model="preview.open" width="80%" top="5vh" append-to-body class="scrollbar">
+      <el-tabs v-model="preview.activeName">
+        <el-tab-pane
+          v-for="(value, key) in preview.data"
+          :label="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
+          :name="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
+          :key="value"
+        >
+          <el-link underline="never" icon="DocumentCopy" v-copyText="value" v-copyText:callback="copyTextSuccess" style="float:right">&nbsp;复制</el-link>
+          <pre>{{ value }}</pre>
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+    <import-table ref="importRef" @ok="handleQuery" />
+    <create-table ref="createRef" @ok="handleQuery" />
+  </div>
+</template>
+
+<script setup name="Gen">
+import { listTable, previewTable, delTable, genCode, synchDb } from "@/api/tool/gen"
+import importTable from "./importTable"
+import createTable from "./createTable"
+
+const route = useRoute()
+const { proxy } = getCurrentInstance()
+
+const tableRef = ref()
+const importRef = ref()
+const createRef = ref()
+const uniqueId = ref("")
+const selectedTableNames = ref([])
+
+// 默认排序
+const defaultSort = { prop: "createTime", order: "descending" }
+const defaultParams = {
+  orderByColumn: "createTime",
+  isAsc: "descending"
+}
+
+const preview = reactive({
+  open: false,
+  title: "代码预览",
+  data: {},
+  activeName: "domain.java"
+})
+
+// 搜索项配置
+const searchColumns = [
+  { label: "表名称", prop: "tableName", component: "input", placeholder: "请输入表名称", width: "200px" },
+  { label: "表描述", prop: "tableComment", component: "input", placeholder: "请输入表描述", width: "200px" },
+  { label: "创建时间", prop: "dateRange", component: "daterange", width: "308px" }
+]
+
+// 表格列配置
+const columns = [
+  { label: "表名称", prop: "tableName", align: "center" },
+  { label: "表描述", prop: "tableComment", align: "center" },
+  { label: "实体", prop: "className", align: "center" },
+  { label: "创建时间", prop: "createTime", align: "center", width: 160, sortable: "custom" },
+  { label: "更新时间", prop: "updateTime", align: "center", width: 160, sortable: "custom" },
+  { label: "操作", prop: "action", align: "center", width: 330, showInToolbar: false }
+]
+
+// 查询函数
+function queryList(params) {
+  const p = proxy.addDateRange({ ...params }, params.dateRange)
+  delete p.dateRange
+  return listTable(p)
+}
+
+/** 搜索按钮操作（供子组件 @ok 回调） */
+function handleQuery() {
+  tableRef.value.reload()
+}
+
+/** 排序触发事件 */
+function handleSortChange(column) {
+  tableRef.value.setQueryParams({ orderByColumn: column.prop, isAsc: column.order })
+  tableRef.value.reload()
+}
+
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  selectedTableNames.value = selection.map(item => item.tableName)
+}
+
+// keep-alive 页面重新激活时，从路由参数恢复分页并重置搜索
+onActivated(() => {
+  const time = route.query.t
+  if (time != null && time != uniqueId.value) {
+    uniqueId.value = time
+    tableRef.value.getSearchFormRef()?.resetFields()
+    tableRef.value.setQueryParams({ pageNum: Number(route.query.pageNum) || 1 })
+    tableRef.value.refresh()
+  }
+})
+
+/** 生成代码操作 */
+function handleGenTable(row) {
+  const tbNames = row?.tableName || selectedTableNames.value
+  if (!tbNames || (Array.isArray(tbNames) && tbNames.length === 0)) {
+    proxy.$modal.msgError("请选择要生成的数据")
+    return
+  }
+  if (row?.genType === "1") {
+    genCode(row.tableName).then(response => {
+      proxy.$modal.msgSuccess("成功生成到自定义路径：" + row.genPath)
+    })
+  } else {
+    const zipName = Array.isArray(tbNames) ? "ruoyi.zip" : tbNames + ".zip"
+    proxy.$download.zip("/tool/gen/batchGenCode?tables=" + tbNames, zipName)
+  }
+}
+
+/** 同步数据库操作 */
+function handleSynchDb(row) {
+  const tableName = row.tableName
+  proxy.$modal.confirm('确认要强制同步"' + tableName + '"表结构吗？').then(function () {
+    return synchDb(tableName)
+  }).then(() => {
+    proxy.$modal.msgSuccess("同步成功")
+  }).catch(() => {})
+}
+
+/** 打开导入表弹窗 */
+function openImportTable() {
+  importRef.value.show()
+}
+
+/** 打开创建表弹窗 */
+function openCreateTable() {
+  createRef.value.show()
+}
+
+/** 预览按钮 */
+function handlePreview(row) {
+  previewTable(row.tableId).then(response => {
+    preview.data = response.data
+    preview.open = true
+    preview.activeName = "domain.java"
+  })
+}
+
+/** 复制代码成功 */
+function copyTextSuccess() {
+  proxy.$modal.msgSuccess("复制成功")
+}
+
+/** 修改按钮操作 */
+function handleEditTable(row) {
+  const params = { pageNum: tableRef.value.getQueryParams().pageNum }
+  proxy.$tab.openPage("修改[" + row.tableName + "]生成配置", '/tool/gen-edit/index/' + row.tableId, params)
+}
+
+/** 删除按钮操作 */
+function handleDelete(tableIds) {
+  proxy.$modal.confirm('是否确认删除表编号为"' + tableIds + '"的数据项？').then(function () {
+    return delTable(tableIds)
+  }).then(() => {
+    tableRef.value.refresh()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+</script>