@fangzhongya/fang-ui 0.0.14 → 0.0.16

package/dist/components/page/src/index.vue

@@ -0,0 +1,868 @@
+<script lang="ts" setup>
+	import {
+		ref,
+		reactive,
+		computed,
+		watch,
+		useSlots,
+		type Component,
+	} from 'vue';
+	import { useCssName } from '../../../hooks/cssname';
+	import Forms from '../../forms/index';
+	import TablePagin from '../../tables-pagin/index';
+	import Lists from '../../lists/index';
+	import Dialog from '../../dialog/index';
+	import { ElButton, ElMessageBox, ElMessage } from 'element-plus';
+	import SetColumn from './set-column.vue';
+	import type { Slots } from 'vue';
+	import { comHandle, type UrlProps } from '../../common/urls';
+	type Ajax =
+		| {
+				url?: string | Function;
+				// 请求前过滤数据
+				onRequestBefore?: Function;
+				// 请求成功后过滤数据
+				onRequestAfter?: Function;
+				config?: {
+					[key: string]: any;
+				};
+				[key: string]: any;
+		  }
+		| Function
+		| string;
+	type Configs = {
+		name: string;
+		// 是否显示列设置功能
+		setColumn?: boolean;
+		query?: {
+			is?: boolean;
+			// 高级搜索
+			senior?: boolean;
+			// 重置是否调用接口
+			reset?: boolean;
+			config?: ObjAny;
+			list?: Array<ListObj | string>;
+		};
+		form?: ObjAny;
+		add?: {
+			is?: boolean;
+			ajax?: Ajax;
+			// 默认值
+			value?: ObjAny;
+			list?: Array<ListObj | string>;
+		};
+		edit?: {
+			is?: boolean;
+			ajax?: Ajax;
+			list?: Array<ListObj | string>;
+		};
+		details?: {
+			is?: boolean;
+			ajax?: Ajax;
+			config?: ObjAny;
+			list?: Array<ListObj | string>;
+		};
+		delete?: {
+			is?: boolean;
+			ajax?: Ajax;
+			// 删除时传递的字段名称
+			name?: string;
+			// 删除对应的值
+			prop?: string;
+			// 删除时展示的值
+			label?: string;
+		};
+		table?: TableConfig & {
+			// 是否显示操作列
+			operation?: boolean;
+		};
+	};
+
+	const props = defineProps({
+		config: {
+			type: Object as () => Configs,
+			default() {
+				return {};
+			},
+		},
+		value: {
+			type: Object as () => ObjAny,
+			default() {
+				return {};
+			},
+		},
+		list: {
+			type: Array<ListObj>,
+			default() {
+				return [];
+			},
+		},
+		/**
+		 * @props { Object } options 选择数据集合
+		 */
+		options: {
+			type: Object,
+			default() {
+				return {};
+			},
+		},
+		/**
+		 * @props { Object } compons 外部组件集合
+		 */
+		compons: {
+			type: Object as () => { [key: string]: Component },
+			default() {
+				return {};
+			},
+		},
+	});
+	const emit = defineEmits(['delete', 'add', 'edit']);
+	const cs = useCssName('page');
+	const slots: Slots = useSlots();
+	const tableRef = ref();
+
+	let listObj: {
+		[key: string]: ListObj;
+	} = {};
+
+	const getListObj = () => {
+		const value: {
+			[key: string]: ListObj;
+		} = {};
+
+		const filtration = (arr: ListObj[], listobj?: ListObj) => {
+			arr.forEach((obj) => {
+				if (listobj) {
+					obj.father = obj.father ?? listobj;
+				}
+				if (obj.prop) {
+					value[obj.prop] = obj;
+				}
+				if (obj.children) {
+					filtration(obj.children, obj);
+				}
+			});
+		};
+		filtration(props.list);
+		return value;
+	};
+
+	const getColumnList = <T extends ListObj | string>(
+		array: T[],
+		callback?: (obj: ListObj) => boolean,
+	) => {
+		const filtration = (value: ListObj[], arr: T[]) => {
+			arr.forEach((item) => {
+				let obj: ListObj = {};
+				if (typeof item === 'string') {
+					const v = listObj[item] || {
+						prop: item,
+						label: item,
+					};
+					obj = { ...v };
+				} else {
+					obj = { ...item };
+				}
+				const is = callback ? callback(obj) : true;
+				if (is) {
+					if (obj.children) {
+						const children: ListObj[] = [];
+						filtration(children, obj.children as T[]);
+						obj.children = children;
+					}
+					if (obj.prop) {
+						obj = Object.assign({}, listObj[obj.prop] || {}, obj);
+					}
+					value.push(obj);
+				}
+			});
+		};
+		const value: ListObj[] = [];
+		filtration(value, array);
+		return value;
+	};
+
+	const query = ref<ObjAny>(props.value);
+	// const queryRef = ref();
+	const isSenior = ref(false);
+
+	const getListQuery = () => {
+		const v = props.config.query?.list;
+		if (v && Array.isArray(v) && v.length > 0) {
+			return getColumnList(v);
+		} else {
+			return getColumnList(props.list, (obj) => {
+				obj.required = false;
+				obj.whole = false;
+				return Boolean(obj.query);
+			});
+		}
+	};
+	const listQuery = ref<ListObj[]>([]);
+	const setListQuery = () => {
+		const list = getListQuery();
+		if (props.config.query?.senior) {
+			let i = 0;
+			list.forEach((obj) => {
+				if (obj.querybasis) {
+					i++;
+				} else {
+					obj.hide = () => {
+						return !isSenior.value;
+					};
+				}
+			});
+			if (i == 0) {
+				list[0].hide = undefined;
+			}
+		}
+		listQuery.value = list;
+	};
+
+	const onRefresh = () => {
+		tableRef.value?.getList();
+	};
+
+	const onQuery = (data: ObjAny) => {
+		console.log('onQuery', data);
+
+		query.value = data;
+
+		onRefresh();
+	};
+
+	const onReset = (data: ObjAny) => {
+		console.log('onReset', data);
+
+		if (props.config.query?.reset) {
+			query.value = data;
+			onRefresh();
+		}
+	};
+
+	const onSenior = (obj: ObjAny) => {
+		isSenior.value = !isSenior.value;
+		// butQuery 必须是 响应式对象，否则无法更新
+		if (isSenior.value) {
+			obj.label = '收起';
+		} else {
+			obj.label = '高级';
+		}
+		setListQuery();
+	};
+
+	const butQuery = ref<ObjAny[]>([]);
+
+	const getButQuery = () => {
+		const arr = [
+			{
+				_id: '1',
+				label: '查询',
+				type: 'primary',
+			},
+			{
+				_id: '2',
+				label: '重置',
+				type: 'default',
+			},
+		];
+		if (props.config.query?.senior) {
+			const obj = {
+				_id: '3',
+				label: '高级',
+				type: 'primary',
+				click: onSenior,
+			};
+			arr.push(obj);
+		}
+		return arr;
+	};
+
+	const tableConfig = ref<TableConfig>({});
+
+	const getTableConfig = () => {
+		const config: TableConfig = props.config.table || {};
+		config.config = {
+			height: '100%',
+			adaptive: true,
+			isserial: true,
+			ischecked: true,
+			...config.config,
+		};
+		return config;
+	};
+
+	const getList = () => {
+		return getColumnList(props.list, (obj) => {
+			if (obj.componform === true) {
+				obj.compon = undefined;
+			}
+			return true;
+		});
+	};
+
+	const setList = ref<ListObj[]>([]);
+
+	const setSetList = () => {
+		setList.value = getList();
+	};
+
+	const tableList = computed(() => {
+		const arr: ListObj[] = [];
+		if (props.config.table?.operation !== false) {
+			arr.push({
+				prop: 'operation',
+				label: '操作',
+				width: 156,
+				fixed: true,
+			});
+		}
+		arr.push(...setList.value);
+		return arr;
+	});
+
+	let operationColumn: ObjAny[] = [];
+	const getOperationColumn = () => {
+		const array = [];
+		if (props.config.edit?.is !== false) {
+			array.push({
+				prop: 2,
+				label: '编辑',
+				type: 'primary',
+				text: true,
+			});
+		}
+		if (props.config.delete?.is !== false) {
+			array.push({
+				prop: 4,
+				label: '删除',
+				type: 'danger',
+				text: true,
+			});
+		}
+		if (props.config.details?.is !== false) {
+			array.push({
+				prop: 9,
+				label: '详情',
+				type: 'info',
+				text: true,
+			});
+		}
+		return array;
+	};
+
+	let operationTop: ObjAny[] = [];
+	const getOperationTop = () => {
+		const array = [];
+		if (props.config.add?.is !== false) {
+			array.push({
+				prop: 1,
+				label: '添加',
+				type: 'primary',
+			});
+		}
+		if (
+			props.config.delete?.is !== false &&
+			tableConfig.value.config?.ischecked
+		) {
+			array.push({
+				prop: 8,
+				label: '批量删除',
+				type: 'danger',
+			});
+		}
+		return array;
+	};
+
+	const onDelete = (array: Array<ObjAny>) => {
+		const ts = ['是否删除所选' + props.config.name + '？'];
+		const label = props.config.delete?.label || 'name';
+		const prop = props.config.delete?.prop || 'id';
+		const name = listObj[label]?.label || '内容';
+		array.forEach((obj) => {
+			ts.push(name + '：' + (obj[label] ?? ''));
+		});
+		ElMessageBox.confirm(ts.join('<br>'), '提示', {
+			confirmButtonText: '确认',
+			cancelButtonText: '取消',
+			type: 'warning',
+			dangerouslyUseHTMLString: true,
+		})
+			.then(() => {
+				const name = props.config.delete?.name || 'ids';
+				const value = { [name]: array.map((o) => o[prop]) };
+				console.log('onDelete', value);
+				const ajax = props.config.delete?.ajax;
+				if (ajax) {
+					const param: UrlProps = {
+						param: props.value,
+					};
+					if (typeof ajax === 'object') {
+						param.onRequestBefore = ajax?.onRequestBefore;
+						param.onRequestAfter = ajax?.onRequestAfter;
+						param.ajax = ajax?.url;
+						param.ajaxConfig = ajax?.config;
+					} else {
+						param.ajax = ajax;
+					}
+					comHandle(param, value)
+						.then((res: any) => {
+							if (res.result) {
+								ElMessage.success(res.info || '删除成功');
+								onRefresh();
+							} else {
+								ElMessage.error(res.info || '删除失败');
+							}
+						})
+						.catch((err: any) => {
+							console.error('删除失败', err);
+						});
+				} else {
+					emit('delete', value, () => {
+						onRefresh();
+					});
+				}
+			})
+			.catch(() => {});
+	};
+
+	const onOperation = (item: ObjAny, row: ListObj = {}) => {
+		if (item.prop === 1) {
+			// 添加操作
+			// formRef.value?.resetFields();
+			dialog.value = {
+				...props.config.add?.value,
+			};
+			dialog.type = 'add';
+			dialog.visible = true;
+		} else if (item.prop === 2) {
+			// 编辑操作
+			// formRef.value?.resetFields();
+			dialog.value = { ...row };
+			dialog.type = 'edit';
+			dialog.visible = true;
+		} else if (item.prop === 4) {
+			// 删除操作
+			console.log('删除', row);
+			onDelete([row]);
+		} else if (item.prop === 8) {
+			// 批量删除
+			console.log('批量删除', selection.value);
+			if (selection.value.length === 0) {
+				ElMessage.warning('请至少选择一条记录');
+				return;
+			}
+			onDelete(selection.value);
+		} else if (item.prop === 9) {
+			details.value = row;
+			details.visible = true;
+			const ajax = props.config.details?.ajax;
+			if (ajax) {
+				const param: UrlProps = {
+					param: props.value,
+				};
+				if (typeof ajax === 'object') {
+					param.onRequestBefore = ajax?.onRequestBefore;
+					param.onRequestAfter = ajax?.onRequestAfter;
+					param.ajax = ajax?.url;
+					param.ajaxConfig = ajax?.config;
+				} else {
+					param.ajax = ajax;
+				}
+				comHandle(param, row)
+					.then((res: any) => {
+						if (res.result) {
+							details.value = res.data || row;
+							details.visible = true;
+						} else {
+							ElMessage.error(res.info || '查询详情失败');
+						}
+					})
+					.catch((err: any) => {
+						console.error('查询详情失败', err);
+					});
+			} else {
+				details.value = row;
+				details.visible = true;
+			}
+		}
+	};
+	const selection = ref<ObjAny[]>([]);
+	const onRowClick = (row: ListObj) => {
+		// emit('select', row);
+		console.log('点击列表行', row);
+	};
+
+	const formRef = ref();
+
+	// 定义数据插槽
+	// 这些插槽用于在不同位置插入自定义内容
+	const dataSlot = {
+		top: 'top',
+		footer: 'footer',
+		main: 'main',
+		header: 'header',
+		operation: 'operation',
+	};
+	const formSlots: string[] = [];
+	const listSlots: string[] = [];
+	const tableSlots: string[] = [];
+	const querySlots: string[] = [];
+	const setSlots = () => {
+		const ds = Object.values(dataSlot);
+		Object.keys(slots || {}).forEach((key) => {
+			if (!ds.includes(key)) {
+				if (key.startsWith('query-')) {
+					querySlots.push(key.replace(/^query-/, ''));
+				} else if (key.startsWith('form-')) {
+					formSlots.push(key.replace(/^form-/, ''));
+				} else if (key.startsWith('list-')) {
+					listSlots.push(key.replace(/^list-/, ''));
+				} else if (key.startsWith('table-')) {
+					tableSlots.push(key.replace(/^table-/, ''));
+				} else {
+					querySlots.push(key);
+					formSlots.push(key);
+					listSlots.push(key);
+					tableSlots.push(key);
+				}
+			}
+		});
+	};
+	setSlots();
+
+	const dialog = reactive({
+		visible: false,
+		type: 'add', // or 'edit'
+		value: {},
+	});
+
+	const onConfirm = () => {
+		if (formRef.value) {
+			formRef.value
+				.validate()
+				.then((data: ObjAny) => {
+					if (dialog.type === 'add') {
+						// 添加操作
+						console.log('添加', data);
+						const ajax = props.config.add?.ajax;
+						if (ajax) {
+							const param: UrlProps = {
+								param: props.value,
+							};
+							if (typeof ajax === 'object') {
+								param.onRequestBefore = ajax?.onRequestBefore;
+								param.onRequestAfter = ajax?.onRequestAfter;
+								param.ajax = ajax?.url;
+								param.ajaxConfig = ajax?.config;
+							} else {
+								param.ajax = ajax;
+							}
+							comHandle(param, data)
+								.then((res: any) => {
+									if (res.result) {
+										ElMessage.success(
+											res.info || '添加成功',
+										);
+										dialog.visible = false;
+										onRefresh();
+									} else {
+										ElMessage.error(res.info || '添加失败');
+									}
+								})
+								.catch((err: any) => {
+									console.error('添加失败', err);
+								});
+						} else {
+							emit('add', data, () => {
+								dialog.visible = false;
+								onRefresh();
+							});
+						}
+					} else if (dialog.type === 'edit') {
+						// 编辑操作
+						console.log('编辑', data);
+						const ajax = props.config.edit?.ajax;
+						if (ajax) {
+							const param: UrlProps = {
+								param: props.value,
+							};
+							if (typeof ajax === 'object') {
+								param.onRequestBefore = ajax?.onRequestBefore;
+								param.onRequestAfter = ajax?.onRequestAfter;
+								param.ajax = ajax?.url;
+								param.ajaxConfig = ajax?.config;
+							} else {
+								param.ajax = ajax;
+							}
+							comHandle(param, data)
+								.then((res: any) => {
+									if (res.result) {
+										ElMessage.success(
+											res.info || '编辑成功',
+										);
+										dialog.visible = false;
+										onRefresh();
+									} else {
+										ElMessage.error(res.info || '编辑失败');
+									}
+								})
+								.catch((err: any) => {
+									console.error('编辑失败', err);
+								});
+						} else {
+							emit('edit', data, () => {
+								dialog.visible = false;
+								onRefresh();
+							});
+						}
+					}
+				})
+				.catch((err: any) => {
+					console.error('表单验证失败', err);
+				});
+		}
+	};
+
+	const getListForm = () => {
+		if (dialog.type === 'edit') {
+			const v = props.config.edit?.list;
+			if (v && Array.isArray(v) && v.length > 0) {
+				return getColumnList(v);
+			} else {
+				return getColumnList(props.list, (obj) => {
+					return obj.form && obj.noedit !== false;
+				});
+			}
+		} else {
+			const v = props.config.add?.list;
+			if (v && Array.isArray(v) && v.length > 0) {
+				return getColumnList(v);
+			} else {
+				return getColumnList(props.list, (obj) => {
+					return Boolean(obj.form);
+				});
+			}
+		}
+	};
+
+	const listForm = ref<ListObj[]>([]);
+	const setListForm = () => {
+		listForm.value = getListForm();
+	};
+
+	const details = reactive({
+		visible: false,
+		value: {},
+	});
+	const getListDetails = () => {
+		const v = props.config.details?.list;
+		if (v && Array.isArray(v) && v.length > 0) {
+			return getColumnList(v);
+		} else {
+			return getList();
+		}
+	};
+
+	const list = ref<ListObj[]>([]);
+	const setListDetails = () => {
+		list.value = getListDetails();
+	};
+
+	watch(
+		() => props.config,
+		(newValue) => {
+			if (newValue) {
+				if (props.config.table) {
+					tableConfig.value = getTableConfig();
+				}
+				if (props.config.query?.is !== false) {
+					setListQuery();
+					butQuery.value = getButQuery();
+				}
+				if (props.config.details?.is !== false) {
+					setListDetails();
+				}
+				if (
+					props.config.add?.is !== false ||
+					props.config.edit?.is !== false
+				) {
+					setListForm();
+				}
+
+				operationColumn = getOperationColumn();
+				operationTop = getOperationTop();
+			}
+		},
+		{
+			immediate: true,
+			deep: true,
+		},
+	);
+
+	watch(
+		() => props.list,
+		() => {
+			listObj = getListObj();
+
+			setSetList();
+
+			if (props.config.query?.is !== false) {
+				setListQuery();
+			}
+
+			if (props.config.details?.is !== false) {
+				setListDetails();
+			}
+			if (
+				props.config.add?.is !== false ||
+				props.config.edit?.is !== false
+			) {
+				setListForm();
+			}
+		},
+		{
+			immediate: true,
+			deep: true,
+		},
+	);
+</script>
+<template>
+	<div :class="cs.z()">
+		<Dialog
+			:title="
+				(dialog.type == 'add' ? '添加' : '编辑') + props.config.name
+			"
+			v-model="dialog.visible"
+			@confirm="onConfirm"
+		>
+			<Forms
+				v-if="dialog.visible"
+				v-bind="props.config.form"
+				ref="formRef"
+				v-model="dialog.value"
+				:options="props.options"
+				:compons="props.compons"
+				:list="listForm"
+				:buts="[]"
+			>
+				<template v-for="k of formSlots" #[k]="scope" :key="k">
+					<slot
+						v-if="slots['form-' + k]"
+						:name="'form-' + k"
+						v-bind="scope"
+					></slot>
+					<slot v-else :name="k" v-bind="scope"></slot>
+				</template>
+			</Forms>
+		</Dialog>
+		<Dialog
+			:title="props.config.name + '详情'"
+			v-model="details.visible"
+			no-footer
+		>
+			<Lists
+				v-bind="props.config.details?.config"
+				:value="details.value"
+				:options="props.options"
+				:compons="props.compons"
+				:list="list"
+			>
+				<template v-for="k of listSlots" #[k]="scope" :key="k">
+					<slot
+						v-if="slots['list-' + k]"
+						:name="'list-' + k"
+						v-bind="scope"
+					></slot>
+					<slot v-else :name="k" v-bind="scope"></slot>
+				</template>
+			</Lists>
+		</Dialog>
+		<div :class="cs.z('header')">
+			<slot :name="dataSlot.header"></slot>
+			<div v-if="props.config.query?.is !== false" :class="cs.z('query')">
+				<Forms
+					v-bind="props.config.query?.config"
+					query
+					label-position="auto"
+					:model-value="props.value"
+					:options="props.options"
+					:compons="props.compons"
+					:list="listQuery"
+					:buts="butQuery"
+					@submit="onQuery"
+					@cancel="onReset"
+				>
+					<template v-for="k of querySlots" #[k]="scope" :key="k">
+						<slot
+							v-if="slots['query-' + k]"
+							:name="'query-' + k"
+							v-bind="scope"
+						></slot>
+						<slot v-else :name="k" v-bind="scope"></slot>
+					</template>
+				</Forms>
+			</div>
+		</div>
+		<div :class="cs.z('main')">
+			<slot :name="dataSlot.main"> </slot>
+			<div :class="cs.z('table')">
+				<div :class="cs.z('table-top')">
+					<div :class="cs.z('top-operation')">
+						<ElButton
+							v-for="(item, index) in operationTop"
+							:key="index"
+							:type="item.type as any"
+							@click.stop="onOperation(item)"
+						>
+							{{ item.label }}
+						</ElButton>
+						<slot :name="dataSlot.top"></slot>
+					</div>
+					<SetColumn
+						v-if="props.config.setColumn"
+						v-model="setList"
+						:list="props.list"
+					></SetColumn>
+				</div>
+				<TablePagin
+					ref="tableRef"
+					:load="props.config.query?.is === false"
+					:config="tableConfig"
+					:param="query"
+					:options="props.options"
+					:compons="props.compons"
+					:list="tableList"
+					@selection="(array: Array<ObjAny>) => (selection = array)"
+					@change="onRowClick"
+				>
+					<template #operation="{ row }">
+						<div :class="cs.z('operations')">
+							<ElButton
+								v-for="(item, index) in operationColumn"
+								:key="index"
+								:type="item.type as any"
+								:text="item.text"
+								@click.stop="onOperation(item, row)"
+							>
+								{{ item.label }}
+							</ElButton>
+							<slot :name="dataSlot.operation" :row="row"></slot>
+						</div>
+					</template>
+					<template v-for="k of tableSlots" #[k]="scope" :key="k">
+						<slot
+							v-if="slots['table-' + k]"
+							:name="'table-' + k"
+							v-bind="scope"
+						></slot>
+						<slot v-else :name="k" v-bind="scope"></slot>
+					</template>
+				</TablePagin>
+			</div>
+		</div>
+		<div :class="cs.z('footer')">
+			<slot :name="dataSlot.footer"> </slot>
+		</div>
+	</div>
+</template>