Browse Source

👣 重构底层

master
wangxiang 3 years ago
parent
commit
d0a84f4833
  1. 92
      kicc-ui/src/views/system/config/index.vue

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

@ -46,7 +46,7 @@ @@ -46,7 +46,7 @@
</AFormItem>
</AForm>
<ATable ref="tableElRef"
rowKey="id"
v-bind="state.tableProps"
:loading="state.loading"
:size="state.selectedKeys[0]"
:dataSource="state.dataSource"
@ -57,19 +57,7 @@ @@ -57,19 +57,7 @@
y: state.tableHeight,
scrollToFirstRowOnChange: true
}"
:rowSelection="{
type: 'checkbox',
onChange: handleSelectionChange
}"
:pagination="{
current: 1,
pageSize: 10,
size: 'small',
defaultPageSize: 10,
showTotal: (total) => t('component.table.total', { total }),
showSizeChanger: true,
showQuickJumper: true,
}"
:rowSelection="getRowSelectionRef"
>
<template #title>
<div style="width: 100%">
@ -152,9 +140,9 @@ @@ -152,9 +140,9 @@
*/
import { BasicTitle } from '/@/components/Basic';
import { RedoOutlined, ColumnHeightOutlined, FullscreenOutlined, FullscreenExitOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
import { ref, onMounted, watchEffect } from 'vue';
import {ref, onMounted, watchEffect, ComputedRef, computed, watch} from 'vue';
import { Table, Form, Row, Col, Divider, Tooltip, Dropdown, Menu, Select, DatePicker } from 'ant-design-vue';
import { SizeType } from '/@/components/Table';
import {BasicTableProps, SizeType} from '/@/components/Table';
import { listConfig, delConfig } from '/@/api/platform/system/controller/config';
import ConfigModal from './ConfigModal.vue';
import { columns } from './config.data';
@ -165,13 +153,14 @@ @@ -165,13 +153,14 @@
import { useI18n } from '/@/hooks/web/useI18n';
import { convertDateRange } from "/@/utils/dateUtil";
import { useFullscreen } from "@vueuse/core";
import { getPopupContainer } from '/@/utils';
import { getPopupContainer, noop } from '/@/utils';
import { useTimeoutFn } from "/@/hooks/core/useTimeout";
import {useRowSelection} from "/@/components/Table/src/hooks/useRowSelection";
import {basicProps} from "/@/components/Table/src/props";
/** 类型规范统一声明定义区域 */
interface TableState {
loading: boolean;
ids: string[];
single: boolean;
multiple: boolean;
total: number;
@ -188,6 +177,7 @@ @@ -188,6 +177,7 @@
};
dataSource: any[];
dateRange: string[];
tableProps: Recordable;
}
/** 通用变量统一声明区域 */
@ -219,8 +209,6 @@ @@ -219,8 +209,6 @@
const state = reactive<TableState>({
//
loading: true,
//
ids: [],
//
single: true,
//
@ -246,8 +234,41 @@ @@ -246,8 +234,41 @@
//
dataSource: [],
//
dateRange: []
dateRange: [],
// api
tableProps: {
// ID
rowKey: 'id',
//
rowSelection: { type: 'checkbox' },
//
pagination: {
current: 1,
pageSize: 10,
size: 'small',
defaultPageSize: 10,
showTotal: (total) => t('component.table.total', { total }),
showSizeChanger: true,
showQuickJumper: true,
}
}
});
// vben-tablerowSelection,
const basicTableProps = computed(() => {
return {
...basicProps,
...state.tableProps
} as unknown as BasicTableProps;
});
const {
getRowSelection,
getRowSelectionRef,
getSelectRows,
clearSelectedRowKeys,
getSelectRowKeys,
deleteSelectRowByKey,
setSelectedRowKeys
} = useRowSelection(basicTableProps, ref(state.dataSource), noop);
/** 生命周期钩子回调处理区域 */
onMounted(() => {
@ -259,6 +280,12 @@ @@ -259,6 +280,12 @@
//
handleTableHeightSetting(state.dataSource.length > 0 ? false : true);
});
watch(getRowSelectionRef, ()=> {
handleSelectionChange(getSelectRowKeys());
},{
immediate: true,
deep: true
});
/** 处理表格高度设置 */
function handleTableHeightSetting(clean?: boolean) {
@ -267,12 +294,6 @@ @@ -267,12 +294,6 @@
bodyEl && (bodyEl.style.height = `${ clean ? 'unset' : state.tableHeight+'px' }`);
}
/** 搜索按钮操作 */
function handleQuery() {
state.queryParams.current = 1;
getList();
}
/** 查询列表数据 */
function getList() {
state.loading = true;
@ -283,19 +304,34 @@ @@ -283,19 +304,34 @@
});
}
/** 搜索按钮操作 */
function handleQuery() {
state.queryParams.current = 1;
clearSelectedRowKeys();
getList();
}
/** 重置按钮操作 */
function resetQuery() {
state.dateRange = [];
state.queryFormInstance?.resetFields();
handleQuery();
}
/** 处理多选框选中数据 */
function handleSelectionChange(selectedRowKeys: string[]) {
state.ids = selectedRowKeys;
state.single = selectedRowKeys.length != 1;
state.multiple = !selectedRowKeys.length;
}
/** 新增按钮操作,行内新增与工具栏局域新增通用 */
function handleAdd() {
openModal(true,{isUpdate: false });

Loading…
Cancel
Save