@fangzhongya/fang-ui 0.0.14 → 0.0.16

package/dist/components/tables/common/pagin.ts

@@ -0,0 +1,538 @@
+import {
+	computed,
+	ref,
+	reactive,
+	watch,
+	type Ref,
+	type Component,
+	type ExtractPropTypes,
+} from 'vue';
+
+import {
+	firstLower,
+	lineToSmallHump,
+	executionMethod,
+	getObjValue,
+	setObjValue,
+} from '../../../utils/index';
+
+import { props, comHandle } from '../../common/urls';
+
+export const dataProps = {
+	...props,
+	// 总表格的配置
+	configs: {
+		type: Object as () => Config,
+	},
+	// 表格的配置
+	config: {
+		type: Object as () => TableConfig,
+		default() {
+			return {};
+		},
+	},
+	list: {
+		type: Array<ListObj>,
+		default() {
+			return [];
+		},
+	},
+	load: {
+		type: Boolean,
+		default: true,
+	},
+
+	/**
+	 * @props { Object } options 选择数据集合
+	 */
+	options: {
+		type: Object,
+		default() {
+			return {};
+		},
+	},
+	/**
+	 * @props { Object } compons 外部组件集合
+	 */
+	compons: {
+		type: Object as () => { [key: string]: Component },
+		default() {
+			return {};
+		},
+	},
+};
+
+export const dataEmit = ['list-events', 'selection'];
+
+export const useInit = (
+	props: ExtractPropTypes<typeof dataProps>,
+	emit: Function,
+	refTable: Ref,
+	isEl?: boolean,
+) => {
+	const loading = ref(false);
+
+	const mpagconfig = {
+		pageSize: 10,
+		pageSizes: [10, 20, 30, 40, 50, 100],
+		layout: 'total, slot,  ->, prev, pager, next, sizes, jumper',
+		// sizes, prev, pager, next, jumper, ->, total, slot
+		data: {
+			// 列表数据字段
+			list: 'items',
+			// 总数据字段
+			total: 'totalCount',
+
+			current: 'pageNum',
+			pageSize: 'pageSize',
+			prop: 'sortField',
+			order: 'sortType',
+		},
+	};
+
+	const pagconfig = ref(mpagconfig);
+
+	// 分页的配置
+	const paginat = reactive<PaginatType>({
+		current: 1,
+		pageSize: mpagconfig.pageSize,
+		order: '',
+		prop: '',
+	});
+
+	type TableData = {
+		total: number;
+		list: ObjAny[];
+	};
+
+	// table 数据
+	const data = reactive<TableData>({
+		total: 0,
+		list: [],
+	});
+
+	const orderMap: ObjStr = {
+		asc: 'asc',
+		ascending: 'asc',
+		desc: 'desc',
+		descending: 'desc',
+	};
+
+	const tableList = ref<ListObj[]>(props.configs?.list ?? props.list);
+	const tableConfig = ref<TableConfig>(props.configs?.config ?? props.config);
+	const width = {
+		index: 66,
+		selection: 46,
+	};
+
+	const setList = () => {
+		const configs = props.configs;
+		const list: ListObj[] = configs?.list ?? props.list;
+		const config: TableConfig = configs?.config ?? props.config;
+
+		if (config.config?.ischecked || config.config?.isserial) {
+			let isx = config.config?.ischecked;
+			let iss = config.config?.isserial;
+			let i = -1;
+			for (let t = 0; t < list.length; t++) {
+				const obj = list[t];
+				if (obj?.type == 'selection') {
+					if (!obj.width) {
+						obj.width = width.selection;
+					}
+					if (!obj.selectable) {
+						obj.selectable = config.config?.selectable;
+					}
+					i = t;
+					isx = false;
+				}
+				if (obj?.type == 'index') {
+					if (!obj.width) {
+						obj.width = width.index;
+					}
+					iss = false;
+				}
+				if (!isx && !iss) {
+					break;
+				}
+			}
+			if (iss) {
+				if (i != -1) {
+					list.splice(i + 1, 0, {
+						type: 'index',
+						width: width.index,
+						label: '序号',
+						fixed: true,
+					});
+				} else {
+					list.unshift({
+						type: 'index',
+						width: width.index,
+						label: '序号',
+						fixed: true,
+					});
+				}
+			}
+			if (isx) {
+				list.unshift({
+					type: 'selection',
+					width: width.selection,
+					selectable: config.config?.selectable,
+					fixed: true,
+				});
+			}
+		}
+
+		// if (c.config?.isserial) {
+		//   list.unshift({
+		//     type: 'index',
+		//     width: width.index,
+		//     label: '序号',
+		//   })
+		// }
+		// if (c.config?.isradio || c.config?.ischecked) {
+		//   list.unshift({
+		//     type: 'selection',
+		//     width: width.selection,
+		//     radio: c.config?.isradio,
+		//     selectable: c.config?.selectable,
+		//   })
+		// }
+
+		tableList.value = list;
+	};
+
+	const setConfig = () => {
+		const configs = props.configs;
+		const config: TableConfig = configs?.config ?? props.config;
+		// 排序
+		if (config.config?.defaultSort) {
+			const v = config.config.defaultSort;
+			paginat.order = orderMap[v.order] ?? '';
+			paginat.prop = v.prop;
+		}
+
+		// 分页
+		const pagin = config.paginat ?? {};
+		paginat.pageSize = pagin.size || mpagconfig.pageSize;
+		pagconfig.value = Object.assign({}, mpagconfig, pagin.config || {});
+
+		tableConfig.value = config;
+	};
+
+	watch(
+		[() => props.configs, () => props.config, () => props.list],
+		() => {
+			setList();
+			setConfig();
+		},
+		{ immediate: true },
+	);
+
+	const formEvent = computed(() => {
+		const obj: {
+			[key: string]: Function;
+		} = {};
+		const es = tableConfig.value.events || ({} as ObjStr);
+		Object.keys(es).forEach((key) => {
+			let ml = key;
+			if (/on[A-Z]/.test(key)) {
+				ml = firstLower(key.replace(/^on/, ''));
+			}
+			ml = lineToSmallHump(ml);
+			obj[ml] = (...data: any[]) => {
+				executionMethod(es[key], ...data);
+			};
+		});
+		return obj;
+	});
+
+	const istype = computed(() => {
+		if (isEl) {
+			return true;
+		} else {
+			return tableConfig.value.type == 1;
+		}
+	});
+
+	function onChange(arr: ObjStr[]) {
+		if (!tableConfig.value.config?.isradio) {
+			console.log('onChange');
+			emit('selection', arr);
+		}
+	}
+	function onRowClick(row: ObjAny, obj: ObjAny) {
+		if (!tableConfig.value.config?.noRowSelect) {
+			const selectable = tableConfig.value.config?.selectable;
+			if (selectable) {
+				const index = data.list.findIndex((obj) => {
+					obj === row;
+				});
+				if (selectable(row, index)) {
+					if (tableConfig.value.config?.isradio) {
+						refTable.value.clearSelection();
+						refTable.value.toggleRowSelection(row, true);
+						console.log('onRowClick');
+						emit('selection', [row]);
+					} else {
+						refTable.value.toggleRowSelection(row);
+					}
+				}
+			} else {
+				if (tableConfig.value.config?.isradio) {
+					refTable.value.clearSelection();
+					refTable.value.toggleRowSelection(row, true);
+					console.log('onRowClick');
+					emit('selection', [row]);
+				} else {
+					refTable.value.toggleRowSelection(row);
+				}
+			}
+		}
+	}
+
+	function empty() {
+		if (istype.value && tableConfig.value.config?.isradio) {
+			refTable.value?.clearRadioRow();
+		}
+		refTable.value?.clearSelection();
+		console.log('empty');
+		emit('selection', []);
+	}
+
+	function onSelect(s: ObjAny, row: ObjStr) {
+		if (tableConfig.value.config?.isradio) {
+			refTable.value.clearSelection();
+			refTable.value.toggleRowSelection(row, true);
+			console.log('onSelect');
+			emit('selection', [row]);
+		}
+	}
+
+	function onRadioChange(obj: ObjAny) {
+		if (tableConfig.value.config?.isradio) {
+			console.log('onRadioChange');
+			emit('selection', [obj.row]);
+		}
+	}
+
+	// 前端默认排序
+	function defaultSort(arr: ObjStr[]) {
+		if (!tableConfig.value.config?.sort) {
+			return arr;
+		} else {
+			const prop = tableConfig.value.config?.defaultSort?.prop;
+			const order =
+				orderMap[tableConfig.value.config?.defaultSort?.order] || '';
+			if (prop && order) {
+				const vs = arr.sort((ao, bo) => {
+					const a = ao[prop];
+					const b = bo[prop];
+					const c = Number(a) - Number(b);
+					if (isNaN(c)) {
+						return (a + '').length - (b + '').length;
+					} else {
+						return c;
+					}
+				});
+				if (order == 'asc') {
+					return vs;
+				} else {
+					return vs.reverse();
+				}
+			} else {
+				return arr;
+			}
+		}
+	}
+
+	/**
+	 * 排序显示数据
+	 * @param obj
+	 */
+	function onSortChange(obj: ObjAny) {
+		if (!tableConfig.value.config?.sort) {
+			paginat.order = orderMap[obj.order] || '';
+			paginat.prop = obj.field || obj.prop;
+			paginat.current = 1;
+			getData();
+		}
+	}
+
+	function onSizeChange() {
+		paginat.current = 1;
+		getData();
+	}
+	function onCurrentChange() {
+		getData();
+	}
+
+	function onListEvents(...arr: any) {
+		console.log('onListEvents', arr);
+		emit('list-events', ...arr);
+	}
+
+	/**
+	 * 初次加载数据
+	 */
+	function initData(callback?: () => void) {
+		paginat.current = 1;
+		getData({}, callback);
+	}
+	/**
+	 * 清除缓存数据
+	 */
+	function clean() {
+		refTable.value?.clearSelection();
+		console.log('clean');
+		emit('selection', []);
+	}
+
+	function getParam(param: ObjAny) {
+		const arr: Array<keyof PaginatType> = [
+			'current',
+			'pageSize',
+			'prop',
+			'order',
+		];
+		let data: ObjAny = {};
+		if (typeof tableConfig.value.ajax === 'object') {
+			data = tableConfig.value.ajax?.data ?? {};
+		}
+		for (const key of arr) {
+			const current = data[key] ?? mpagconfig.data[key];
+			setObjValue(param, current, paginat[key]);
+		}
+
+		return param;
+	}
+
+	/**
+	 * 获取接口数据
+	 * @param p
+	 * @param callback
+	 */
+	function getData(p: ObjAny = {}, callback?: (d?: ObjAny) => void) {
+		clean();
+		loading.value = true;
+		let ajaxConfig = props.ajaxConfig;
+		let ajax = props.ajax;
+		if (typeof tableConfig.value.ajax === 'object') {
+			ajaxConfig = ajaxConfig ?? tableConfig.value.ajax?.config;
+			ajax = ajax ?? tableConfig.value.ajax?.url;
+		} else {
+			ajax = ajax ?? tableConfig.value.ajax;
+		}
+		comHandle(
+			{
+				onRequestBefore: inParamFilter,
+				onRequestAfter: inDataFilter,
+				ajax,
+				ajaxConfig,
+				value: props.value,
+				param: {},
+			},
+			getParam({
+				...props.param,
+				...p,
+			}),
+		)
+			.then((list: TableData) => {
+				let dlist = list?.list || [];
+				if (dlist instanceof Array === false) {
+					dlist = [dlist];
+				}
+				if (
+					tableConfig.value.paginat?.is &&
+					dlist.length > paginat.pageSize
+				) {
+					dlist = dlist.slice(0, paginat.pageSize);
+				}
+				data.list = defaultSort(dlist);
+				data.total = list?.total || dlist.length;
+				loading.value = false;
+				if (callback) {
+					callback(data);
+				}
+			})
+			.catch(() => {
+				loading.value = false;
+				if (callback) {
+					callback();
+				}
+			});
+	}
+
+	/**
+	 * 请求前过滤数据
+	 * @param obj
+	 */
+	function inParamFilter(obj: ObjStr): ObjStr {
+		let before: string | Function | undefined = props.onRequestBefore;
+		if (typeof tableConfig.value.ajax === 'object') {
+			before = before ?? tableConfig.value.ajax?.onRequestBefore;
+		}
+		if (before) {
+			return executionMethod(before, obj);
+		} else {
+			return obj;
+		}
+	}
+
+	/**
+	 * 请求成功后过滤数据
+	 * @param data
+	 * @param obj
+	 */
+	function inDataFilter(data: ObjAny, obj: ObjAny) {
+		let after: string | Function | undefined = props.onRequestAfter;
+		let ajaxData: ObjAny = {};
+		if (typeof tableConfig.value.ajax === 'object') {
+			ajaxData = tableConfig.value.ajax?.data ?? {};
+			after = after ?? tableConfig.value.ajax?.onRequestAfter;
+		}
+		if (after) {
+			return executionMethod(after, data, obj);
+		} else {
+			const l = ajaxData?.list ?? mpagconfig.data.list;
+			const t = ajaxData?.total ?? mpagconfig.data.total;
+			const list = (getObjValue(l, data) ?? data) as ObjAny[];
+			const total = t == '' ? list.length : getObjValue(t, data);
+			return {
+				list: list,
+				total: total,
+			};
+		}
+	}
+
+	if (props.load || tableConfig.value.load) {
+		initData();
+	}
+
+	const height = computed(() => {
+		return tableConfig.value.config?.height ?? 'auto';
+	});
+
+	return {
+		height,
+		tableConfig,
+		tableList,
+		onRadioChange,
+		getSelection,
+		initData,
+		getData,
+		empty,
+		loading,
+		onSortChange,
+		onListEvents,
+		onSelect,
+		onRowClick,
+		onChange,
+		pagconfig,
+		formEvent,
+		onSizeChange,
+		onCurrentChange,
+		paginat,
+		data,
+	};
+};

package/dist/components/tables/common/table-but.cjs

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const require$$0 = require("vue");
+const vue = require("vue");
 const elementPlus = require("element-plus");
 const util = require("./util.cjs");
 const isObject = require("@fangzhongya/utils/basic/object/isObject");
 const isArray = require("@fangzhongya/utils/basic/array/isArray");
 const _hoisted_1 = { class: "table-but" };
-const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "table-but",
   props: {
     /**
@@ -72,7 +72,7 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
       );
       emit("scope-click", obj, props.tableScope, props.tableListObj, "but");
     }
-    const valueArr = require$$0.computed(() => {
+    const valueArr = vue.computed(() => {
       var _a;
       const prop = props.tableListObj.prop || "";
       const row = props.tableScope.row || {};
@@ -89,19 +89,19 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return require$$0.openBlock(), require$$0.createElementBlock("span", _hoisted_1, [
-        (require$$0.openBlock(true), require$$0.createElementBlock(require$$0.Fragment, null, require$$0.renderList(valueArr.value, (item, index) => {
-          return require$$0.openBlock(), require$$0.createBlock(require$$0.unref(elementPlus.ElButton), {
-            class: require$$0.normalizeClass(["table-but-li", item.class]),
+      return vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(valueArr.value, (item, index) => {
+          return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElButton), {
+            class: vue.normalizeClass(["table-but-li", item.class]),
             key: index,
-            style: require$$0.normalizeStyle(item.style),
+            style: vue.normalizeStyle(item.style),
             onClick: ($event) => onClick(item, $event),
             type: item.type,
             round: item.round,
             text: typeof item.text == "undefined" ? true : item.text
           }, {
-            default: require$$0.withCtx(() => [
-              require$$0.createTextVNode(require$$0.toDisplayString(item.value), 1)
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(item.value), 1)
             ]),
             _: 2
           }, 1032, ["class", "style", "onClick", "type", "round", "text"]);

package/dist/components/tables/common/table-but.d.ts

@@ -1,4 +1,5 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<ExtractPropTypes<{
     /**
      * table列表
      * {
@@ -21,9 +22,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: ObjectConstructor;
         default(): {};
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     "scope-click": (...args: any[]) => void;
-}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, string, PublicProps, Readonly< ExtractPropTypes<{
     /**
      * table列表
      * {
@@ -51,5 +52,5 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }>, {
     tableListObj: Record<string, any>;
     tableScope: Record<string, any>;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLSpanElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLSpanElement>;
 export default _default;