@fangzhongya/fang-ui 0.0.21 → 0.0.22

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

@@ -1,868 +0,0 @@
-<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>