diff --git a/kicc-ui/src/assets/styles/kicc.less b/kicc-ui/src/assets/styles/kicc.less
index afcf0af2..59d94809 100644
--- a/kicc-ui/src/assets/styles/kicc.less
+++ b/kicc-ui/src/assets/styles/kicc.less
@@ -17,13 +17,252 @@
   }
 }
 
-.table-title {
-  position: relative;
-  display: flex;
-  padding-left: 7px;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 24px;
-  color: rgba(0, 0, 0, 0.85);
-  cursor: pointer;
+
+// 基础表格样式
+[data-theme='dark'] {
+  .ant-table-tbody > tr:hover.ant-table-row-selected > td,
+  .ant-table-tbody > tr.ant-table-row-selected td {
+    background-color: #262626;
+  }
+
+  .@{basic-table-prefix-cls} {
+    // [黑暗模式]table顶部插槽多选栏样式
+    .alert {
+      background-color: #323232;
+      border-color: #424242;
+    }
+  }
+}
+
+.@{basic-table-prefix-cls} {
+  max-width: 100%;
+
+  &-row__striped {
+    td {
+      background-color: @app-content-background;
+    }
+  }
+
+  &-form-container {
+    padding: 16px;
+
+    .ant-form {
+      padding: 12px 10px 6px 10px;
+      margin-bottom: 16px;
+      background-color: @component-background;
+      border-radius: 2px;
+    }
+  }
+
+  .ant-tag {
+    margin-right: 0;
+  }
+
+  .ant-table-wrapper {
+    padding: 6px;
+    background-color: @component-background;
+    border-radius: 2px;
+
+    .ant-table-title {
+      min-height: 40px;
+      padding: 0 0 8px 0 !important;
+    }
+
+    .ant-table.ant-table-bordered .ant-table-title {
+      border: none !important;
+    }
+  }
+
+  .ant-table {
+    width: 100%;
+    overflow-x: hidden;
+
+    &-title {
+      display: flex;
+      padding: 8px 6px;
+      border-bottom: none;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .ant-table-tbody > tr.ant-table-row-selected td {
+      background-color: fade(@primary-color, 8%) !important;
+    }
+  }
+
+  .ant-pagination {
+    margin: 10px 0 0 0;
+  }
+
+  .ant-table-footer {
+    padding: 0;
+
+    .ant-table-wrapper {
+      padding: 0;
+    }
+
+    table {
+      border: none !important;
+    }
+
+    .ant-table-body {
+      overflow-x: hidden !important;
+      overflow-y: scroll !important;
+    }
+
+    td {
+      padding: 12px 8px;
+    }
+
+    // [明亮模式]table顶部插槽多选栏样式
+    .alert {
+      height: 38px;
+      background-color: #f3f3f3;
+      border-color: #e3e3e3;
+    }
+
+    &--inset {
+      .ant-table-wrapper {
+        padding: 0;
+      }
+    }
+  }
+
+  // 表格头部样式
+  .@{basic-table-header-prefix-cls} {
+    &__toolbar {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      > * {
+        margin-right: 8px;
+      }
+    }
+  }
+
+  // 表格动作样式
+  .@{basic-table-action-prefix-cls} {
+    display: flex;
+    align-items: center;
+
+    .action-divider {
+      display: table;
+    }
+
+    &.left {
+      justify-content: flex-start;
+    }
+
+    &.center {
+      justify-content: center;
+    }
+
+    &.right {
+      justify-content: flex-end;
+    }
+
+    button {
+      display: flex;
+      align-items: center;
+
+      span {
+        margin-left: 0 !important;
+      }
+    }
+
+    button.ant-btn-circle {
+      span {
+        margin: auto !important;
+      }
+    }
+
+    .ant-divider,
+    .ant-divider-vertical {
+      margin: 0 2px;
+    }
+
+    .icon-more {
+      transform: rotate(90deg);
+
+      svg {
+        font-size: 1.1em;
+        font-weight: 700;
+      }
+    }
+  }
+
+  // 表格设置样式
+  .table-coulmn-drag-icon {
+    margin: 0 5px;
+    cursor: move;
+  }
+  .@{basic-column-setting-prefix-cls} {
+    &__popover-title {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    &__check-item {
+      display: flex;
+      align-items: center;
+      min-width: 100%;
+      padding: 4px 16px 8px 0;
+
+      .ant-checkbox-wrapper {
+        width: 100%;
+
+        &:hover {
+          color: @primary-color;
+        }
+      }
+    }
+
+    &__fixed-left,
+    &__fixed-right {
+      color: rgba(0, 0, 0, 0.45);
+      cursor: pointer;
+
+      &.active,
+      &:hover {
+        color: @primary-color;
+      }
+
+      &.disabled {
+        color: @disabled-color;
+        cursor: not-allowed;
+      }
+    }
+
+    &__fixed-right {
+      transform: rotate(180deg);
+    }
+
+    &__cloumn-list {
+      svg {
+        width: 1em !important;
+        height: 1em !important;
+      }
+
+      .ant-popover-inner-content {
+        // max-height: 360px;
+        padding-right: 0;
+        padding-left: 0;
+        // overflow: auto;
+      }
+
+      .ant-checkbox-group {
+        width: 100%;
+        min-width: 260px;
+        // flex-wrap: wrap;
+      }
+
+      .scrollbar {
+        height: 220px;
+      }
+    }
+  }
 }
diff --git a/kicc-ui/src/assets/styles/var/index.less b/kicc-ui/src/assets/styles/var/index.less
index bc3e3c6a..53d69e00 100644
--- a/kicc-ui/src/assets/styles/var/index.less
+++ b/kicc-ui/src/assets/styles/var/index.less
@@ -8,6 +8,7 @@
 @import (reference) '../color.less';
 @import 'easing';
 @import 'breakpoint';
+@import 'kicc';
 
 @namespace: kicc;
 
diff --git a/kicc-ui/src/assets/styles/var/kicc.less b/kicc-ui/src/assets/styles/var/kicc.less
new file mode 100644
index 00000000..3f1527f6
--- /dev/null
+++ b/kicc-ui/src/assets/styles/var/kicc.less
@@ -0,0 +1,13 @@
+/**
+ * @program: kicc-ui
+ * @description: kicc系统相关变量定义
+ * 在kicc系统中全局调用的变量全部在这里配置
+ * @author: entfrm开发团队-王翔
+ * @create: 2022/4/7
+ */
+
+// 基础表格变量
+@basic-table-prefix-cls: ~'@{namespace}-basic-table';
+@basic-table-header-prefix-cls: ~'@{namespace}-basic-table-header';
+@basic-table-action-prefix-cls: ~'@{namespace}-basic-table-action';
+@basic-column-setting-prefix-cls: ~'@{namespace}-basic-column-setting';
diff --git a/kicc-ui/src/components/Table/src/BasicTable.vue b/kicc-ui/src/components/Table/src/BasicTable.vue
index 2dca16e1..8ede45c9 100644
--- a/kicc-ui/src/components/Table/src/BasicTable.vue
+++ b/kicc-ui/src/components/Table/src/BasicTable.vue
@@ -318,118 +318,3 @@
     },
   });
 </script>
-<style lang="less">
-  @border-color: #cecece4d;
-
-  @prefix-cls: ~'@{namespace}-basic-table';
-
-  [data-theme='dark'] {
-    .ant-table-tbody > tr:hover.ant-table-row-selected > td,
-    .ant-table-tbody > tr.ant-table-row-selected td {
-      background-color: #262626;
-    }
-
-    .@{prefix-cls} {
-      // [黑暗模式]table顶部插槽多选栏样式
-      .alert {
-        background-color: #323232;
-        border-color: #424242;
-      }
-    }
-  }
-
-  .@{prefix-cls} {
-    max-width: 100%;
-
-    &-row__striped {
-      td {
-        background-color: @app-content-background;
-      }
-    }
-
-    &-form-container {
-      padding: 16px;
-
-      .ant-form {
-        padding: 12px 10px 6px 10px;
-        margin-bottom: 16px;
-        background-color: @component-background;
-        border-radius: 2px;
-      }
-    }
-
-    .ant-tag {
-      margin-right: 0;
-    }
-
-    .ant-table-wrapper {
-      padding: 6px;
-      background-color: @component-background;
-      border-radius: 2px;
-
-      .ant-table-title {
-        min-height: 40px;
-        padding: 0 0 8px 0 !important;
-      }
-
-      .ant-table.ant-table-bordered .ant-table-title {
-        border: none !important;
-      }
-    }
-
-    .ant-table {
-      width: 100%;
-      overflow-x: hidden;
-
-      &-title {
-        display: flex;
-        padding: 8px 6px;
-        border-bottom: none;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      .ant-table-tbody > tr.ant-table-row-selected td {
-        background-color: fade(@primary-color, 8%) !important;
-      }
-    }
-
-    .ant-pagination {
-      margin: 10px 0 0 0;
-    }
-
-    .ant-table-footer {
-      padding: 0;
-
-      .ant-table-wrapper {
-        padding: 0;
-      }
-
-      table {
-        border: none !important;
-      }
-
-      .ant-table-body {
-        overflow-x: hidden !important;
-        overflow-y: scroll !important;
-      }
-
-      td {
-        padding: 12px 8px;
-      }
-
-      // [明亮模式]table顶部插槽多选栏样式
-      .alert {
-        height: 38px;
-        background-color: #f3f3f3;
-        border-color: #e3e3e3;
-      }
-
-      &--inset {
-        .ant-table-wrapper {
-          padding: 0;
-        }
-      }
-    }
-  }
-</style>
diff --git a/kicc-ui/src/components/Table/src/components/TableAction.vue b/kicc-ui/src/components/Table/src/components/TableAction.vue
index 8de9a4e0..875ec33d 100644
--- a/kicc-ui/src/components/Table/src/components/TableAction.vue
+++ b/kicc-ui/src/components/Table/src/components/TableAction.vue
@@ -148,56 +148,3 @@
     },
   });
 </script>
-<style lang="less">
-  @prefix-cls: ~'@{namespace}-basic-table-action';
-
-  .@{prefix-cls} {
-    display: flex;
-    align-items: center;
-
-    .action-divider {
-      display: table;
-    }
-
-    &.left {
-      justify-content: flex-start;
-    }
-
-    &.center {
-      justify-content: center;
-    }
-
-    &.right {
-      justify-content: flex-end;
-    }
-
-    button {
-      display: flex;
-      align-items: center;
-
-      span {
-        margin-left: 0 !important;
-      }
-    }
-
-    button.ant-btn-circle {
-      span {
-        margin: auto !important;
-      }
-    }
-
-    .ant-divider,
-    .ant-divider-vertical {
-      margin: 0 2px;
-    }
-
-    .icon-more {
-      transform: rotate(90deg);
-
-      svg {
-        font-size: 1.1em;
-        font-weight: 700;
-      }
-    }
-  }
-</style>
diff --git a/kicc-ui/src/components/Table/src/components/TableHeader.vue b/kicc-ui/src/components/Table/src/components/TableHeader.vue
index 2c37d58b..d918b49e 100644
--- a/kicc-ui/src/components/Table/src/components/TableHeader.vue
+++ b/kicc-ui/src/components/Table/src/components/TableHeader.vue
@@ -102,19 +102,3 @@
     },
   });
 </script>
-<style lang="less">
-  @prefix-cls: ~'@{namespace}-basic-table-header';
-
-  .@{prefix-cls} {
-    &__toolbar {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-
-      > * {
-        margin-right: 8px;
-      }
-    }
-  }
-</style>
diff --git a/kicc-ui/src/components/Table/src/components/settings/ColumnSetting.vue b/kicc-ui/src/components/Table/src/components/settings/ColumnSetting.vue
index 94f4d6ef..3f6cac78 100644
--- a/kicc-ui/src/components/Table/src/components/settings/ColumnSetting.vue
+++ b/kicc-ui/src/components/Table/src/components/settings/ColumnSetting.vue
@@ -387,79 +387,3 @@
     },
   });
 </script>
-<style lang="less">
-  @prefix-cls: ~'@{namespace}-basic-column-setting';
-
-  .table-coulmn-drag-icon {
-    margin: 0 5px;
-    cursor: move;
-  }
-
-  .@{prefix-cls} {
-    &__popover-title {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    &__check-item {
-      display: flex;
-      align-items: center;
-      min-width: 100%;
-      padding: 4px 16px 8px 0;
-
-      .ant-checkbox-wrapper {
-        width: 100%;
-
-        &:hover {
-          color: @primary-color;
-        }
-      }
-    }
-
-    &__fixed-left,
-    &__fixed-right {
-      color: rgba(0, 0, 0, 0.45);
-      cursor: pointer;
-
-      &.active,
-      &:hover {
-        color: @primary-color;
-      }
-
-      &.disabled {
-        color: @disabled-color;
-        cursor: not-allowed;
-      }
-    }
-
-    &__fixed-right {
-      transform: rotate(180deg);
-    }
-
-    &__cloumn-list {
-      svg {
-        width: 1em !important;
-        height: 1em !important;
-      }
-
-      .ant-popover-inner-content {
-        // max-height: 360px;
-        padding-right: 0;
-        padding-left: 0;
-        // overflow: auto;
-      }
-
-      .ant-checkbox-group {
-        width: 100%;
-        min-width: 260px;
-        // flex-wrap: wrap;
-      }
-
-      .scrollbar {
-        height: 220px;
-      }
-    }
-  }
-</style>
diff --git a/kicc-ui/src/utils/dateUtil.ts b/kicc-ui/src/utils/dateUtil.ts
index 3ce5a1c5..c45b5b6d 100644
--- a/kicc-ui/src/utils/dateUtil.ts
+++ b/kicc-ui/src/utils/dateUtil.ts
@@ -22,13 +22,15 @@ export function formatToDate(date: moment.MomentInput = undefined, format = DATE
 }
 
 /** 添加日期范围 */
-export function convertDateRange(params: Recordable, dateRangeField: string): Recordable {
-  const search = params, dateRange = search[dateRangeField];
-  if (null != dateRange && dateRange?.length > 0) {
+export function convertDateRange(params: Recordable, dateRange: string[]): Recordable {
+  const search = params;
+  search.beginTime = '';
+  search.endTime = '';
+  if (dateRange && dateRange?.length > 0) {
     search.beginTime = dateRange[0];
     search.endTime = dateRange[1];
   }
-  return search;
+  return params;
 }
 
 export const dateUtil = moment;
diff --git a/kicc-ui/src/views/system/config/config.data.ts b/kicc-ui/src/views/system/config/config.data.ts
index ad2f750c..b9e98022 100644
--- a/kicc-ui/src/views/system/config/config.data.ts
+++ b/kicc-ui/src/views/system/config/config.data.ts
@@ -1,143 +1,43 @@
 /**
  * @program: kicc-ui
- * @description: 角色模块动态渲染配置
+ * @description: 配置参数模块动态渲染配置
  * @author: entfrm开发团队-王翔
  * @create: 2022/4/21
  */
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+import { ColumnProps } from "ant-design-vue/lib/table/interface";
 
-import {BasicColumn} from '/@/components/Table';
-import {FormSchema} from '/@/components/Table';
-import {h} from 'vue';
-import {Tag} from 'ant-design-vue';
-
-export const columns: BasicColumn[] = [
-    {
-        title: '参数名称',
-        dataIndex: 'name',
-        width: 200
-    },
-    {
-        title: '参数键名',
-        dataIndex: 'key',
-        width: 200
-    },
-    {
-        title: '参数键值',
-        dataIndex: 'value',
-        width: 200
-    },
-    {
-        title: '系统内置',
-        dataIndex: 'isSys',
-        width: 120,
-        customRender: ({record}) => {
-            let text = '';
-            if (record.isSys === '0'){
-                text = '是';
-            }else {
-                text = '否';
-            }
-            return h(Tag, ()=> text);
-        }
-    },
-    {
-        title: '备注',
-        dataIndex: 'remarks',
-        customRender: ({record}) => {
-            return record.remarks || h(Tag, {color: 'red'}, () => '暂无数据');
-        }
-    },
-    {
-        title: '创建时间',
-        dataIndex: 'createTime'
-    }
-];
-
-export const searchFormSchema: FormSchema[] = [
-    {
-        field: 'name',
-        label: '参数名称',
-        component: 'Input',
-        componentProps: {
-            placeholder: '请输入角色名称',
-        },
-        colProps: {span: 8}
-    },
-    {
-        field: 'key',
-        label: '参数键名',
-        component: 'Input',
-        componentProps: {
-            placeholder: '请输入参数键名',
-        },
-        colProps: {span: 8}
-    },
-    {
-        field: 'isSys',
-        label: '系统内置',
-        component: 'Select',
-        componentProps: {
-            options: [
-                {label: '是', value: '0'},
-                {label: '否', value: '1'}
-            ]
-        },
-        colProps: {span: 7}
+/** 表格列配置 */
+export const columns: ColumnProps[] = [
+  {
+    title: '参数名称',
+    dataIndex: 'name'
+  },
+  {
+    title: '参数键名',
+    dataIndex: 'key'
+  },
+  {
+    title: '参数键值',
+    dataIndex: 'value'
+  },
+  {
+    title: '系统内置',
+    dataIndex: 'isSys',
+    customRender: ({record}) => {
+      return record.isSys  == '0' ? h(Tag, { color: 'success' }, '是') : h(Tag, { color: 'red' }, '否');
     }
-];
-
-export const formSchema: FormSchema[] = [
-    {
-        field: 'id',
-        label: 'ID',
-        component: 'Input',
-        show: false
-    },
-    {
-        field: 'name',
-        label: '参数名称',
-        required: true,
-        component: 'Input',
-        colProps: {
-            span: 12
-        }
-    },
-    {
-        field: 'key',
-        label: '参数键名',
-        component: 'Input',
-        required: true,
-        colProps: {
-            span: 12
-        }
-    },
-    {
-        field: 'value',
-        label: '参数键值',
-        component: 'Input',
-        required: true,
-        colProps: {
-            span: 12
-        }
-    },
-    {
-        field: 'isSys',
-        label: '系统内置',
-        component: 'RadioButtonGroup',
-        defaultValue: '0',
-        componentProps: {
-            options: [
-                {label: '是', value: '0'},
-                {label: '否', value: '1'}
-            ],
-        },
-        colProps: {
-            span: 12
-        }
-    },
-    {
-        label: '备注',
-        field: 'remarks',
-        component: 'InputTextArea',
+  },
+  {
+    title: '备注',
+    dataIndex: 'remarks',
+    customRender: ({record}) => {
+      return record.remarks || h(Tag, {color: 'red'},'暂无数据');
     }
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime'
+  }
 ];
diff --git a/kicc-ui/src/views/system/config/index.vue b/kicc-ui/src/views/system/config/index.vue
index f0c6c8a0..0e356e64 100644
--- a/kicc-ui/src/views/system/config/index.vue
+++ b/kicc-ui/src/views/system/config/index.vue
@@ -1,186 +1,184 @@
 <template>
-  <div>
-    <div :class="[prefixCls, [`${prefixCls}-form-container`]]">
-      <AForm ref="formElRef"
-             layout="inline"
-             :colon="false"
-             :labelCol="{ style: { width:'50px', 'margin-bottom': '5px' } }"
-             :wrapperCol="{ style: { width: '300px', 'margin-bottom': '5px' } }"
-      >
-        <AFormItem label="标题" name="newPassword">
-          <a-input placeholder="请输入重置密码"/>
-        </AFormItem>
-        <AFormItem label="姓名"  name="newPassword">
-          <a-input placeholder="请输入重置密码"/>
-        </AFormItem>
-        <AFormItem label="格式" name="newPassword">
-          <a-input placeholder="请输入重置密码"/>
-        </AFormItem>
-        <AFormItem>
-          <a-button type="primary"
-                    class="mr-2">搜索</a-button>
-          <a-button type="primary"
-                    class="mr-2">重置</a-button>
-        </AFormItem>
-      </AForm>
-      <ATable :dataSource="dataSource" :columns="columns">
-        <template #title>
-          <div style="width: 100%">
-            <div class="flex items-center">
-              <BasicTitle>{{ '参数配置列表' }}</BasicTitle>
-              <div :class="`${headerPrefixCls}__toolbar`">
-                <a-button type="primary">新增</a-button>
-                <a-button type="primary">编辑</a-button>
-                <Divider type="vertical"/>
-                <div class="table-settings">
-                  <!--重做-->
-                  <Tooltip placement="top">
-                    <template #title>
-                      <span>{{ t('common.redo') }}</span>
+  <div ref="wrapRef" :class="[prefixCls, [`${prefixCls}-form-container`]]">
+    <AForm ref="formElRef"
+           layout="inline"
+           :colon="false"
+           :labelCol="{ style: { width:'50px', 'margin-bottom': '5px' } }"
+           :wrapperCol="{ style: { width: '300px', 'margin-bottom': '5px' } }"
+    >
+      <AFormItem label="标题" name="newPassword">
+        <a-input placeholder="请输入重置密码"/>
+      </AFormItem>
+      <AFormItem label="姓名"  name="newPassword">
+        <a-input placeholder="请输入重置密码"/>
+      </AFormItem>
+      <AFormItem label="格式" name="newPassword">
+        <a-input placeholder="请输入重置密码"/>
+      </AFormItem>
+      <AFormItem>
+        <a-button type="primary"
+                  class="mr-2">搜索</a-button>
+        <a-button type="primary"
+                  class="mr-2">重置</a-button>
+      </AFormItem>
+    </AForm>
+    <ATable ref="tableElRef"
+            :size="state.selectedKeys[0]"
+            :dataSource="state.dataSource"
+            :columns="columns"
+            :scroll="{
+              x: '100%',
+              y: state.tableHeight,
+              scrollToFirstRowOnChange: true
+            }"
+            :pagination="{
+              current: 1,
+              pageSize: 10,
+              size: 'small',
+              defaultPageSize: 10,
+              showTotal: (total) => t('component.table.total', { total }),
+              showSizeChanger: true,
+              showQuickJumper: true,
+            }"
+    >
+      <template #title>
+        <div style="width: 100%">
+          <div class="flex items-center">
+            <BasicTitle>{{ '参数配置列表' }}</BasicTitle>
+            <div :class="`${headerPrefixCls}__toolbar`">
+              <a-button type="primary">新增</a-button>
+              <a-button type="primary">编辑</a-button>
+              <a-button type="primary">删除</a-button>
+              <ADivider type="vertical"/>
+              <div class="table-settings">
+                <!--重做-->
+                <ATooltip placement="top">
+                  <template #title>
+                    <span>{{ t('common.redo') }}</span>
+                  </template>
+                  <RedoOutlined @click="handleQuery"/>
+                </ATooltip>
+                <!--尺寸-->
+                <ATooltip placement="top">
+                  <template #title>
+                    <span>{{ t('component.table.settingDens') }}</span>
+                  </template>
+                  <ADropdown :trigger="['click']"
+                             :getPopupContainer="getPopupContainer"
+                             placement="bottomCenter"
+                  >
+                    <ColumnHeightOutlined/>
+                    <template #overlay>
+                      <AMenu v-model:selectedKeys="state.selectedKeys" selectable>
+                        <AMenuItem key="default">
+                          <span>{{ t('component.table.settingDensDefault') }}</span>
+                        </AMenuItem>
+                        <AMenuItem key="middle">
+                          <span>{{ t('component.table.settingDensMiddle') }}</span>
+                        </AMenuItem>
+                        <AMenuItem key="small">
+                          <span>{{ t('component.table.settingDensSmall') }}</span>
+                        </AMenuItem>
+                      </AMenu>
                     </template>
-                    <RedoOutlined @click="() => { console.log(1) }"/>
-                  </Tooltip>
-                  <!--尺寸-->
-                  <Tooltip placement="top">
-                    <template #title>
-                      <span>{{ t('component.table.settingDens') }}</span>
-                    </template>
-                    <Dropdown placement="bottomCenter" :trigger="['click']" :getPopupContainer="getPopupContainer">
-                      <ColumnHeightOutlined />
-                      <template #overlay>
-                        <Menu @click="()=>{console.log(2)}" selectable :selectedKeys="[]">
-                          <MenuItem key="default">
-                            <span>{{ t('component.table.settingDensDefault') }}</span>
-                          </MenuItem>
-                          <MenuItem key="middle">
-                            <span>{{ t('component.table.settingDensMiddle') }}</span>
-                          </MenuItem>
-                          <MenuItem key="small">
-                            <span>{{ t('component.table.settingDensSmall') }}</span>
-                          </MenuItem>
-                        </Menu>
-                      </template>
-                    </Dropdown>
-                  </Tooltip>
-                  <!--全屏-->
-                  <Tooltip placement="top">
-                    <template #title>
-                      <span>{{ t('component.table.settingFullScreen') }}</span>
-                    </template>
-                    <FullscreenOutlined @click="() => {console.log(3)}" />
-                    <!--<FullscreenExitOutlined @click="toggle" v-else />-->
-                  </Tooltip>
-                </div>
+                  </ADropdown>
+                </ATooltip>
+                <!--全屏-->
+                <ATooltip placement="top">
+                  <template #title>
+                    <span>{{ t('component.table.settingFullScreen') }}</span>
+                  </template>
+                  <FullscreenOutlined v-if="!isFullscreen" @click="toggle"/>
+                  <FullscreenExitOutlined v-else @click="toggle"/>
+                </ATooltip>
               </div>
             </div>
           </div>
-        </template>
-      </ATable>
-    </div>
+        </div>
+      </template>
+    </ATable>
   </div>
 </template>
 <script lang="ts" setup>
   /**
    * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
    * 采用ant-design-vue表格表单组件编写,采用 setup 写法
+   * 当vben的BasicTable跟BasicForm组件不能满足一些特殊需求时,需要写原生ant-design-vue组件时,请严格参考此处代码
+   * 当前原生ant-design-vue表格表单组件模板,目前已经与系统项目配置高度集成,系统配置发生修改时组件也会产生对应的变化
+   * 目前是基于vben的BasicTable跟BasicForm组件重写出一套ant-design-vue原生表格表单组件模板
    * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
    * author entfrm开发团队-王翔
    */
   import { BasicTitle } from '/@/components/Basic';
-  import { RedoOutlined, ColumnHeightOutlined, FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue';
-  import { computed, ComputedRef, ref, useSlots } from 'vue';
-  import { Table, Form, Row, Col, Divider, Tooltip, Dropdown, Menu  } from 'ant-design-vue';
-  const  MenuItem = Menu.Item;
-  import { default as TableTitle } from '/@/components/Table/src/components/TableTitle.vue';
-  import {
-    BasicTable,
-    useTable,
-    TableAction,
-    InnerHandlers,
-    ColumnChangeParam,
-    BasicTableProps,
-  } from '/@/components/Table';
-  import { getPopupContainer } from '/@/utils';
-  //import { list, remove } from '/@/api/platform/system/controller/config';
+  import { RedoOutlined, ColumnHeightOutlined, FullscreenOutlined, FullscreenExitOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
+  import { ref, onMounted } from 'vue';
+  import { Table, Form, Row, Col, Divider, Tooltip, Dropdown, Menu } from 'ant-design-vue';
+  import { SizeType } from '/@/components/Table';
+  import { listConfig, delConfig } from '/@/api/platform/system/controller/config';
   import ConfigModal from './ConfigModal.vue';
-  import { searchFormSchema } from './config.data';
+  import { columns } from './config.data';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import {reactive, toRaw, unref} from 'vue';
+  import { reactive, toRaw, unref } from 'vue';
   import {useModal} from "/@/components/Modal";
   import {useDesign} from "/@/hooks/web/useDesign";
-  import { t } from '/@/hooks/web/useI18n';
+  import { useI18n } from '/@/hooks/web/useI18n';
   import { createFormContext } from "/@/components/Form/src/hooks/useFormContext";
   import {useTableHeader} from "/@/components/Table/src/hooks/useTableHeader";
   import {basicProps} from "/@/components/Table/src/props";
+  import { convertDateRange } from "/@/utils/dateUtil";
 
-  const { createConfirm } = useMessage();
-  const { createMessage } = useMessage();
-  const { prefixCls } = useDesign('basic-table');
-  const { prefixCls: headerPrefixCls } = useDesign('basic-table-header');
+  import { useFullscreen } from "@vueuse/core";
+  import { getPopupContainer } from '/@/utils';
+  import {useTimeoutFn} from "/@/hooks/core/useTimeout";
+
+  interface ItemRender {
+    page: number;
+    type: 'page' | 'prev' | 'next';
+    originalElement: any;
+  }
+
+  /** 类型规范统一声明定义区域 */
+  interface TableState {
+    ids: string[];
+    single: boolean;
+    multiple: boolean;
+    total: number;
+    tableHeight: number;
+    tableInstance: ComponentRef;
+    selectedKeys: SizeType[];
+    queryParams: Recordable;
+    dataSource: any[];
+    dateRange: string[];
+  }
 
+  /** 通用变量统一声明区域 */
   const ATable = Table;
   const AForm = Form;
+  const AMenu = Menu;
   const AFormItem = Form.Item;
-  const ACol = Col;
+  const AMenuItem = Menu.Item;
+  const ADivider = Divider;
+  const ATooltip = Tooltip;
+  const ADropdown = Dropdown;
   const ARow = Row;
+  const ACol = Col;
 
-  const handlers: InnerHandlers = {
-    onColumnsChange: (data: ColumnChangeParam[]) => {
-      console.log(1111);
-    },
-  };
-
-  const dataSource = [
-        {
-          key: '1',
-          name: '胡彦斌',
-          age: 32,
-          address: '西湖区湖底公园1号',
-        },
-        {
-          key: '2',
-          name: '胡彦祖',
-          age: 42,
-          address: '西湖区湖底公园1号',
-        },
-      ];
-
-  const columns = [
-        {
-          title: '姓名',
-          dataIndex: 'name',
-          key: 'name',
-        },
-        {
-          title: '年龄',
-          dataIndex: 'age',
-          key: 'age',
-        },
-        {
-          title: '住址',
-          dataIndex: 'address',
-          key: 'address',
-        },
-      ];
-
-  const state = reactive({
-    // 选中数组
-    ids: [],
-    // 非单个禁用
-    single: true,
-    // 非多个禁用
-    multiple: true
-  });
+  const { t } = useI18n();
+  const wrapRef = ref(null);
+  const tableElRef = ref<ComponentRef>(null);
 
+  const { createConfirm } = useMessage();
+  const { createMessage } = useMessage();
+
+  const { prefixCls } = useDesign('basic-table');
+  const { prefixCls: headerPrefixCls } = useDesign('basic-table-header');
+
+  const { toggle, isFullscreen } = useFullscreen(wrapRef);
   const [registerModal, { openModal }] = useModal();
-  const [registerTable, { reload }] = useTable({
+  /*const [registerTable, { reload }] = useTable({
     title: '角色列表',
     //api: list,
     columns,
-    formConfig: {
-      labelWidth: 120,
-      schemas: searchFormSchema
-    },
     useSearchForm: true,
     showTableSetting: true,
     bordered: true,
@@ -194,8 +192,59 @@
       slots: { customRender: 'action' },
       fixed: false
     }
+  });*/
+  const state = reactive<TableState>({
+    // 选中数组
+    ids: [],
+    // 非单个禁用
+    single: true,
+    // 非多个禁用
+    multiple: true,
+    // 总条数
+    total: 0,
+    // 手动设置表格高度
+    tableHeight: 650,
+    // a-table表格实例
+    tableInstance: null,
+    // 尺寸大小选择
+    selectedKeys: [ 'middle' ],
+    // 查询参数
+    queryParams: {
+      current: 1,
+      size: 10
+    },
+    // 数据列表
+    dataSource: [],
+    // 日期范围
+    dateRange: []
+  });
+
+
+
+  /** 生命周期钩子回调处理区域 */
+  onMounted(() => {
+    state.tableInstance = unref(tableElRef);
+    if (! state.tableInstance?.$el) return;
+    // 设置表格高度,BasicTable内部采用ref元素动态计算,降低复杂度,由手动设置
+    const bodyEl: HTMLElement | null =  state.tableInstance.$el.querySelector('.ant-table-body');
+    bodyEl && (bodyEl.style.height = `${state.tableHeight}px`);
+    useTimeoutFn(() => getList() , 16);
   });
 
+  /** 搜索按钮操作 */
+  function handleQuery() {
+    state.queryParams.current = 1;
+    getList();
+  }
+
+  /** 查询列表数据 */
+  function getList() {
+    listConfig(convertDateRange(state.queryParams, state.dateRange)).then(response => {
+      state.dataSource = response.data;
+      state.total = response.total;
+    });
+  }
+
   /** 处理多选框选中数据 */
   function handleSelectionChange(selection?: Recordable) {
     const rawRows = toRaw(selection?.rows) || [];