({
setter: TreeSelect,
diff --git a/src/components/AnForm/setters/index.ts b/src/components/AnForm/setters/index.ts
index e08c10d..dbb460f 100644
--- a/src/components/AnForm/setters/index.ts
+++ b/src/components/AnForm/setters/index.ts
@@ -1,5 +1,4 @@
import cascader from './Cascader';
-import custom from './Custom';
import date from './Date';
import dateRange from './DateRange';
import input from './Input';
@@ -24,6 +23,5 @@ export default {
cascader,
date,
submit,
- custom,
dateRange,
};
diff --git a/src/components/AnForm/setters/util.ts b/src/components/AnForm/setters/util.ts
index abbbbda..c9ce455 100644
--- a/src/components/AnForm/setters/util.ts
+++ b/src/components/AnForm/setters/util.ts
@@ -31,7 +31,7 @@ export interface ItemSetter {
/**
* 初始化钩子
*/
- onSetup?: (model: Recordable, item: IAnFormItemBase, items: IAnFormItemBase[]) => void;
+ onSetup?: (args: { model: Recordable; item: IAnFormItemBase; items: IAnFormItemBase[] }) => void;
}
export function defineSetter
(setter: ItemSetter) {
diff --git a/src/components/AnForm/utils/initOptions.ts b/src/components/AnForm/utils/initOptions.ts
index 39860c8..2d8c4aa 100644
--- a/src/components/AnForm/utils/initOptions.ts
+++ b/src/components/AnForm/utils/initOptions.ts
@@ -1,30 +1,28 @@
-export function initOptions({ item, model }: any, key = "options") {
- if (Array.isArray(item.options)) {
- item.nodeProps[key] = item.options;
+import { IAnFormItemFnProps } from '../components/FormItem';
+
+export function initOptions({ item, model }: IAnFormItemFnProps, key: string = 'options') {
+ const setterProps: Recordable = item.setterProps!;
+ if (Array.isArray(item.options) && item.setterProps) {
+ setterProps[key] = item.options;
return;
}
- if (item.options && typeof item.options === "object") {
- const { value, source } = item.options;
- item._updateOptions = async () => {};
- return;
- }
- if (typeof item.options === "function") {
- const loadData = item.options;
- item.nodeProps[key] = reactive([]);
- item._updateOptions = async () => {
- let data = await loadData({ item, model });
- if (Array.isArray(data?.data?.data)) {
- data = data.data.data.map((i: any) => ({
- ...i,
- label: i.name,
- value: i.id,
- }));
+ if (typeof item.options === 'function') {
+ setterProps[key] = reactive([]);
+ item.$init = async () => {
+ const res = await (item as any).options({ item, model });
+ if (Array.isArray(res)) {
+ setterProps[key].splice(0);
+ setterProps[key].push(...res);
+ return;
}
+ const data = res?.data?.data;
if (Array.isArray(data)) {
- item.nodeProps[key].splice(0);
- item.nodeProps[key].push(...data);
+ const maped = data.map((i: any) => ({ ...i, value: i.id, label: i.name }));
+ setterProps[key].splice(0);
+ setterProps[key].push(...maped);
+ return;
}
};
- item._updateOptions();
+ item.$init();
}
}
diff --git a/src/components/AnTable/components/Table.tsx b/src/components/AnTable/components/Table.tsx
index 1956ed3..c0eb635 100644
--- a/src/components/AnTable/components/Table.tsx
+++ b/src/components/AnTable/components/Table.tsx
@@ -1,59 +1,58 @@
-import { AnForm, IAnForm, IAnFormProps } from "@/components/AnForm";
-import { AnFormModal } from "@/components/AnForm/components/FormModal";
-import AniEmpty from "@/components/empty/AniEmpty.vue";
-import { FormModalProps } from "@/components/form";
+import { IAnForm } from '@/components/AnForm';
+import AniEmpty from '@/components/empty/AniEmpty.vue';
+import { FormModalProps } from '@/components/form';
import {
TableColumnData as BaseColumn,
TableData as BaseData,
Table as BaseTable,
+ Button,
PaginationProps,
-} from "@arco-design/web-vue";
-import { isObject, merge } from "lodash-es";
-import { PropType, computed, defineComponent, ref } from "vue";
+} from '@arco-design/web-vue';
+import { isObject, merge } from 'lodash-es';
+import { PropType, defineComponent, ref } from 'vue';
-type DataFn = (search: Record, paging: { page: number; size: number }) => Promise;
+type DataFn = (filter: { page: number; size: number; [key: string]: any }) => any | Promise;
/**
* 表格组件
- * @see src/components/table/table.tsx
*/
export const AnTable = defineComponent({
- name: "AnTable",
+ name: 'AnTable',
props: {
/**
* 表格数据
- * @description 可以是数组或者函数
+ * @description 数组或者函数
*/
data: {
type: [Array, Function] as PropType,
},
/**
- * 表格列设置
+ * 表格列
*/
columns: {
type: Array as PropType,
default: () => [],
},
/**
- * 分页参数配置
+ * 分页配置
*/
pagination: {
- type: Object as PropType,
+ type: Object as PropType,
},
/**
- * 搜索表单配置
+ * 搜索表单
*/
search: {
type: Object as PropType,
},
/**
- * 新建弹窗配置
+ * 新建弹窗
*/
create: {
type: Object as PropType,
},
/**
- * 修改弹窗配置
+ * 修改弹窗
*/
modify: {
type: Object as PropType,
@@ -62,33 +61,25 @@ export const AnTable = defineComponent({
* 传递给 Table 组件的属性
*/
tableProps: {
- type: Object as PropType["$props"]>,
+ type: Object as PropType['$props']>,
},
},
setup(props) {
const loading = ref(false);
const tableRef = ref>();
- const searchRef = ref();
- const createRef = ref();
- const modifyRef = ref();
const renderData = ref([]);
- const inlined = computed(() => (props.search?.items?.length ?? 0) <= config.searchInlineCount);
- const reloadData = () => loadData({ current: 1, pageSize: 10 });
- const openModifyModal = (data: any) => modifyRef.value?.open(data);
+ const reloadData = () => loadData();
const useTablePaging = () => {
const getPaging = () => {
- if (isObject(props.pagination)) {
- return {
- page: props.pagination.current,
- size: props.pagination.pageSize,
- };
- }
- return {};
+ return {
+ page: props.pagination?.current ?? 1,
+ size: props.pagination?.pageSize ?? 10,
+ };
};
const setPaging = (paging: PaginationProps) => {
- if (isObject(props.pagination)) {
+ if (props.pagination) {
merge(props.pagination, paging);
}
};
@@ -112,28 +103,10 @@ export const AnTable = defineComponent({
*/
const loadData = async () => {
const paging = getPaging();
- const model = searchRef.value?.getModel() ?? {};
-
- // 本地加载
- if (Array.isArray(props.data)) {
- const filters = Object.entries(model);
- const data = props.data.filter((item) => {
- return filters.every(([key, value]) => {
- if (typeof value === "string") {
- return item[key].includes(value);
- }
- return item[key] === value;
- });
- });
- renderData.value = data;
- setPaging({ total: renderData.value.length, current: 1 });
- }
-
- // 远程加载
- if (typeof props.data === "function") {
+ if (typeof props.data === 'function') {
try {
loading.value = true;
- const resData = await props.data(model, paging);
+ const resData = await props.data({ ...paging });
const { data = [], total = 0 } = resData?.data || {};
renderData.value = data;
setPaging({ total });
@@ -156,24 +129,27 @@ export const AnTable = defineComponent({
loadData();
});
- if (props.search) {
- merge(props.search, { formProps: { layout: "inline" } });
- }
+ const onPageChange = (page: number) => {
+ setPaging({ current: page });
+ loadData();
+ };
+
+ const onPageSizeChange = (size: number) => {
+ setPaging({ current: 1, pageSize: size });
+ loadData();
+ };
const state = {
loading,
- inlined,
tableRef,
- searchRef,
- createRef,
- modifyRef,
renderData,
loadData,
reloadData,
- openModifyModal,
+ onPageChange,
+ onPageSizeChange,
};
- provide("ref:table", { ...state, ...props });
+ provide('ref:table', { ...state, ...props });
return state;
},
@@ -181,53 +157,30 @@ export const AnTable = defineComponent({
(this.columns as any).instance = this;
return (
- {!this.inlined && this.search && (
-
-
+
+
TODO
+
+
+
+
+
- )}
-
-
-
- {this.create && (
-
- )}
- {this.modify && (
-
- )}
- {this.$slots.action?.()}
-
-
{this.inlined && }
设置表格列
+
+
+
+
+
+
+ 全选
+
+
+ ({{ items.filter(i => i.enable).length }}/{{ items.length }})
+
+
+
+
AR K056
+
+
{{ formatModel(emodel) }}