👣 提供原生模板

kicc-ui/src/views/system/config/index.vue

@@ -1,31 +1,50 @@
 <template>
   <div ref="wrapRef" :class="[prefixCls, [`${prefixCls}-form-container`]]">
-    <AForm ref="formElRef"
+    <AForm ref="queryFormElRef"
+           :model="state.queryParams"
            layout="inline"
            :colon="false"
-           :labelCol="{ style: { width:'50px', 'margin-bottom': '5px' } }"
+           :labelCol="{ style: { width: '80px', 'margin-bottom': '5px' } }"
            :wrapperCol="{ style: { width: '300px', 'margin-bottom': '5px' } }"
     >
-      <AFormItem label="标题" name="newPassword">
-        <a-input placeholder="请输入重置密码"/>
+      <AFormItem label="参数名称" name="name">
+        <a-input v-model:value="state.queryParams.name" placeholder="请输入参数名称"/>
       </AFormItem>
-      <AFormItem label="姓名"  name="newPassword">
-        <a-input placeholder="请输入重置密码"/>
+      <AFormItem label="参数键" name="key">
+        <a-input v-model:value="state.queryParams.key" placeholder="请输入参数键"/>
       </AFormItem>
-      <AFormItem label="格式" name="newPassword">
-        <a-input placeholder="请输入重置密码"/>
+      <AFormItem label="系统内置" name="isSys">
+        <ASelect v-model:value="state.queryParams.isSys"
+                 placeholder="请选择"
+                 allowClear
+        >
+          <ASelectOption key="0">是</ASelectOption>
+          <ASelectOption key="1">否</ASelectOption>
+        </ASelect>
+      </AFormItem>
+      <AFormItem label="创建时间">
+        <ARangePicker v-model:value="state.dateRange"
+                      style="width: '100%'"
+                      valueFormat="YYYY-MM-DD"
+                      :placeholder="['开始日期', '结束日期']"
+        />
       </AFormItem>
       <AFormItem>
         <a-button type="primary"
-                  class="mr-2">搜索</a-button>
-        <a-button type="primary"
-                  class="mr-2">重置</a-button>
+                  class="mr-2"
+                  @click="handleQuery"
+        >搜索</a-button>
+        <a-button type="default"
+                  class="mr-2"
+                  @click="resetQuery"
+        >重置</a-button>
       </AFormItem>
     </AForm>
     <ATable ref="tableElRef"
             :size="state.selectedKeys[0]"
             :dataSource="state.dataSource"
             :columns="columns"
+            :bordered="true"
             :scroll="{
               x: '100%',
               y: state.tableHeight,
@@ -111,25 +130,21 @@
    */
   import { BasicTitle } from '/@/components/Basic';
   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 { ref, onMounted, watchEffect } from 'vue';
+  import { Table, Form, Row, Col, Divider, Tooltip, Dropdown, Menu, Select, DatePicker } from 'ant-design-vue';
   import { SizeType } from '/@/components/Table';
   import { listConfig, delConfig } from '/@/api/platform/system/controller/config';
   import ConfigModal from './ConfigModal.vue';
   import { columns } from './config.data';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { reactive, toRaw, unref } from 'vue';
-  import {useModal} from "/@/components/Modal";
-  import {useDesign} from "/@/hooks/web/useDesign";
+  import { useModal } from "/@/components/Modal";
+  import { useDesign } from "/@/hooks/web/useDesign";
   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";
-
   import { useFullscreen } from "@vueuse/core";
   import { getPopupContainer } from '/@/utils';
-  import {useTimeoutFn} from "/@/hooks/core/useTimeout";
+  import { useTimeoutFn } from "/@/hooks/core/useTimeout";
 
   interface ItemRender {
     page: number;
@@ -145,8 +160,15 @@
     total: number;
     tableHeight: number;
     tableInstance: ComponentRef;
+    queryFormInstance: ComponentRef | any;
     selectedKeys: SizeType[];
-    queryParams: Recordable;
+    queryParams: {
+      current: number;
+      size: number;
+      name: string | undefined;
+      key: string | undefined;
+      isSys: string | undefined;
+    };
     dataSource: any[];
     dateRange: string[];
   }
@@ -162,10 +184,14 @@
   const ADropdown = Dropdown;
   const ARow = Row;
   const ACol = Col;
+  const ASelect = Select;
+  const ASelectOption = Select.Option;
+  const ARangePicker = DatePicker.RangePicker;
 
   const { t } = useI18n();
   const wrapRef = ref(null);
-  const tableElRef = ref<ComponentRef>(null);
+  const tableElRef = ref(null);
+  const queryFormElRef = ref(null);
 
   const { createConfirm } = useMessage();
   const { createMessage } = useMessage();
@@ -175,24 +201,6 @@
 
   const { toggle, isFullscreen } = useFullscreen(wrapRef);
   const [registerModal, { openModal }] = useModal();
-  /*const [registerTable, { reload }] = useTable({
-    title: '角色列表',
-    //api: list,
-    columns,
-    useSearchForm: true,
-    showTableSetting: true,
-    bordered: true,
-    rowSelection: { type: 'checkbox' },
-    showIndexColumn: false,
-    clickToRowSelect: false,
-    actionColumn: {
-      width: 220,
-      title: '操作',
-      dataIndex: 'action',
-      slots: { customRender: 'action' },
-      fixed: false
-    }
-  });*/
   const state = reactive<TableState>({
     // 选中数组
     ids: [],
@@ -203,15 +211,20 @@
     // 总条数
     total: 0,
     // 手动设置表格高度
-    tableHeight: 650,
+    tableHeight: 630,
     // a-table表格实例
     tableInstance: null,
+    // a-form表单实例
+    queryFormInstance: null,
     // 尺寸大小选择
-    selectedKeys: [ 'middle' ],
+    selectedKeys: ['middle'],
     // 查询参数
     queryParams: {
       current: 1,
-      size: 10
+      size: 10,
+      name: undefined,
+      key: undefined,
+      isSys: undefined
     },
     // 数据列表
     dataSource: [],
@@ -219,17 +232,23 @@
     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`);
+    state.queryFormInstance = unref(queryFormElRef);
     useTimeoutFn(() => getList() , 16);
   });
+  watchEffect(() => {
+    // 当数据不存在时清理表格高度
+    handleTableHeightSetting(state.dataSource.length > 0 ? false : true);
+  });
+
+  /** 处理表格高度设置 */
+  function handleTableHeightSetting(clean?: boolean) {
+    if (!state.tableInstance?.$el) return;
+    const bodyEl: HTMLElement | null =  state.tableInstance.$el.querySelector('.ant-table-body');
+    bodyEl && (bodyEl.style.height = `${ clean ? 'unset' : state.tableHeight+'px' }`);
+  }
 
   /** 搜索按钮操作 */
   function handleQuery() {
@@ -245,6 +264,12 @@
     });
   }
 
+  /** 重置按钮操作 */
+  function resetQuery() {
+    state.dateRange = [];
+    state.queryFormInstance?.resetFields();
+  }
+
   /** 处理多选框选中数据 */
   function handleSelectionChange(selection?: Recordable) {
     const rawRows = toRaw(selection?.rows) || [];