@sdata/web-vue 3.14.0 → 3.15.0

package/es/basic-crud-table/basic-crud-table.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,510 @@
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { isPromise } from "../_utils/is.js";
+import { _asyncToGenerator } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/asyncToGenerator.js";
+import Button from "../button/index.js";
+import Spin from "../spin/index.js";
+import Link from "../link/index.js";
+import Popconfirm from "../popconfirm/index.js";
+import Space from "../space/index.js";
+import Table from "../table/index.js";
+import Toolbar from "../toolbar/index.js";
+import basic_crud_modal_default from "./basic-crud-modal.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, onMounted, openBlock, ref, renderList, renderSlot, shallowRef, toDisplayString, unref, useModel, useSlots, withCtx } from "vue";
+import { isFunction, isNil, isString, omitBy } from "es-toolkit";
+//#region components/basic-crud-table/basic-crud-table.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-busy"];
+var basic_crud_table_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
+	name: "BasicCrudTable",
+	inheritAttrs: false
+}), {}, {
+	__name: "basic-crud-table",
+	props: /*@__PURE__*/ mergeModels({
+		title: {},
+		columns: {},
+		tableProps: { default: () => ({}) },
+		toolbarProps: { default: () => ({}) },
+		modalProps: { default: () => ({}) },
+		modalFormProps: { default: () => ({ schemas: [] }) },
+		showCreate: {
+			type: Boolean,
+			default: true
+		},
+		openCreateModal: {
+			type: Boolean,
+			default: true
+		},
+		showEdit: {
+			type: Boolean,
+			default: true
+		},
+		showDelete: {
+			type: Boolean,
+			default: true
+		},
+		showToolbar: {
+			type: Boolean,
+			default: true
+		},
+		showHeader: {
+			type: Boolean,
+			default: true
+		},
+		showTitle: {
+			type: Boolean,
+			default: true
+		},
+		showActionColumn: {
+			type: Boolean,
+			default: true
+		},
+		fetchExcludeEmptyValues: {
+			type: Boolean,
+			default: false
+		},
+		fetchTableOnMounted: {
+			type: Boolean,
+			default: true
+		},
+		actionWidth: { default: 120 },
+		fetchTableApi: { type: Function },
+		tableDataTransformer: { type: Function },
+		createApi: { type: Function },
+		updateApi: { type: Function },
+		detailApi: { type: Function },
+		valueTransformer: { type: Function },
+		beforeModalSubmit: { type: Function },
+		deleteContent: { type: [String, Function] },
+		deleteApi: { type: Function },
+		beforeDelete: { type: Function },
+		deleteNameKey: {}
+	}, {
+		"loading": _objectSpread2({ type: Boolean }, { default: false }),
+		"loadingModifiers": {},
+		"toolbarModel": { default: () => ({}) },
+		"toolbarModelModifiers": {},
+		"tableData": { default: () => [] },
+		"tableDataModifiers": {},
+		"modalModel": { default: () => ({}) },
+		"modalModelModifiers": {},
+		"modalVisible": _objectSpread2({ type: Boolean }, { default: false }),
+		"modalVisibleModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"create",
+		"edit",
+		"delete",
+		"reset",
+		"search",
+		"tableFetched",
+		"modalSuccess",
+		"modalClose",
+		"error"
+	], [
+		"update:loading",
+		"update:toolbarModel",
+		"update:tableData",
+		"update:modalModel",
+		"update:modalVisible"
+	]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const loading = useModel(__props, "loading");
+		const toolbarModel = useModel(__props, "toolbarModel");
+		const tableData = useModel(__props, "tableData");
+		const modalModel = useModel(__props, "modalModel");
+		const modalVisible = useModel(__props, "modalVisible");
+		const slots = useSlots();
+		const toolbarRef = shallowRef();
+		const modalRef = shallowRef();
+		const current = shallowRef(resolvePaginationNumber("current", "defaultCurrent", 1));
+		const pageSize = shallowRef(resolvePaginationNumber("pageSize", "defaultPageSize", 10));
+		const total = shallowRef(0);
+		const sorter = shallowRef({});
+		const fetchData = shallowRef();
+		const prefixCls = getPrefixCls("basic-crud-table");
+		const cls = computed(() => [prefixCls, { [`${prefixCls}-loading`]: loading.value }]);
+		const toolbarSlotNames = computed(() => getForwardedSlotNames("toolbar__", [
+			"default",
+			"action_prepend",
+			"action_append"
+		]));
+		const tableSlotNames = computed(() => getForwardedSlotNames("table__", ["action_prepend", "action_append"]));
+		const modalSlotNames = computed(() => getForwardedSlotNames("modal__"));
+		const resolvedColumns = computed(() => __props.showActionColumn ? [...__props.columns, {
+			title: "操作",
+			dataIndex: "__basic_crud_action__",
+			slotName: "basic-crud-action",
+			width: __props.actionWidth,
+			fixed: "right"
+		}] : __props.columns);
+		const resolvedPagination = computed(() => __props.tableProps.pagination === false ? false : _objectSpread2(_objectSpread2({}, typeof __props.tableProps.pagination === "object" ? __props.tableProps.pagination : {}), {}, {
+			current: current.value,
+			pageSize: pageSize.value,
+			total: total.value
+		}));
+		const params = computed(() => _objectSpread2(_objectSpread2({
+			current: current.value,
+			pageSize: pageSize.value
+		}, sorter.value), toolbarModel.value));
+		onMounted(() => {
+			if (__props.fetchTableOnMounted) handleFetchData();
+		});
+		function getForwardedSlotNames(prefix, excluded = []) {
+			return Object.keys(slots).filter((name) => name.startsWith(prefix)).map((name) => name.slice(prefix.length)).filter((name) => !excluded.includes(name));
+		}
+		function resolvePaginationNumber(controlled, initial, fallback) {
+			var _ref, _pagination$controlle;
+			const pagination = __props.tableProps.pagination;
+			return typeof pagination === "object" ? Number((_ref = (_pagination$controlle = pagination[controlled]) !== null && _pagination$controlle !== void 0 ? _pagination$controlle : pagination[initial]) !== null && _ref !== void 0 ? _ref : fallback) : fallback;
+		}
+		function isObjectResult(value) {
+			return !!value && typeof value === "object" && Array.isArray(value.data);
+		}
+		function handleFetchData() {
+			return _handleFetchData.apply(this, arguments);
+		}
+		function _handleFetchData() {
+			_handleFetchData = _asyncToGenerator(function* (fetchParams = params.value) {
+				if (isNil(__props.fetchTableApi)) return;
+				loading.value = true;
+				try {
+					const requestParams = __props.fetchExcludeEmptyValues ? omitBy(fetchParams, (value) => value === "" || value === null || value === void 0) : fetchParams;
+					const response = yield __props.fetchTableApi(requestParams);
+					fetchData.value = response;
+					const result = isFunction(__props.tableDataTransformer) ? yield __props.tableDataTransformer(response) : response;
+					if (Array.isArray(result)) {
+						tableData.value = result;
+						total.value = result.length;
+					} else if (isObjectResult(result)) {
+						var _ref2, _result$total;
+						tableData.value = result.data;
+						total.value = (_ref2 = (_result$total = result.total) !== null && _result$total !== void 0 ? _result$total : result.count) !== null && _ref2 !== void 0 ? _ref2 : result.data.length;
+					} else return;
+					emit("tableFetched", tableData.value, result);
+				} catch (error) {
+					emit("error", error);
+				} finally {
+					loading.value = false;
+				}
+			});
+			return _handleFetchData.apply(this, arguments);
+		}
+		function handleSearch() {
+			return _handleSearch.apply(this, arguments);
+		}
+		function _handleSearch() {
+			_handleSearch = _asyncToGenerator(function* () {
+				current.value = 1;
+				yield handleFetchData();
+				emit("search", toolbarModel.value);
+			});
+			return _handleSearch.apply(this, arguments);
+		}
+		function handleReset() {
+			return _handleReset.apply(this, arguments);
+		}
+		function _handleReset() {
+			_handleReset = _asyncToGenerator(function* () {
+				current.value = 1;
+				sorter.value = {};
+				yield nextTick();
+				yield handleFetchData();
+				emit("reset");
+			});
+			return _handleReset.apply(this, arguments);
+		}
+		/** 仅重置工具栏筛选项，不触发列表请求。 */
+		function resetToolbar() {
+			var _toolbarRef$value;
+			(_toolbarRef$value = toolbarRef.value) === null || _toolbarRef$value === void 0 || _toolbarRef$value.reset(false);
+		}
+		/** 重置工具栏筛选、分页与排序，并重新请求列表。 */
+		function reset() {
+			return _reset.apply(this, arguments);
+		}
+		function _reset() {
+			_reset = _asyncToGenerator(function* () {
+				resetToolbar();
+				yield handleReset();
+			});
+			return _reset.apply(this, arguments);
+		}
+		function handleCreate() {
+			var _modalRef$value;
+			if (__props.openCreateModal) (_modalRef$value = modalRef.value) === null || _modalRef$value === void 0 || _modalRef$value.open();
+			emit("create");
+		}
+		function handleEdit(_x, _x2) {
+			return _handleEdit.apply(this, arguments);
+		}
+		function _handleEdit() {
+			_handleEdit = _asyncToGenerator(function* (row, context) {
+				var _modalRef$value2;
+				yield (_modalRef$value2 = modalRef.value) === null || _modalRef$value2 === void 0 ? void 0 : _modalRef$value2.open(row);
+				emit("edit", row, context);
+			});
+			return _handleEdit.apply(this, arguments);
+		}
+		const deleteConfirmContent = ref("确定要删除此条记录吗？");
+		const pendingDeleteRow = shallowRef();
+		function resolveDeleteContent(row) {
+			if (isString(__props.deleteContent)) return __props.deleteContent;
+			if (isFunction(__props.deleteContent)) return __props.deleteContent(row);
+			const name = __props.deleteNameKey ? row[__props.deleteNameKey] : void 0;
+			return name ? `确定删除【${String(name)}】吗？` : "确定要删除此条记录吗？";
+		}
+		function handleDeletePopupChange(visible, row) {
+			if (!visible) return;
+			pendingDeleteRow.value = row;
+			const resolved = resolveDeleteContent(row);
+			if (isPromise(resolved)) resolved.then((content) => {
+				if (pendingDeleteRow.value === row) deleteConfirmContent.value = content;
+			});
+			else deleteConfirmContent.value = resolved;
+		}
+		function executeDelete(_x3, _x4) {
+			return _executeDelete.apply(this, arguments);
+		}
+		function _executeDelete() {
+			_executeDelete = _asyncToGenerator(function* (row, context) {
+				if (__props.beforeDelete && (yield __props.beforeDelete(row)) === false) return false;
+				emit("delete", row, context);
+				try {
+					if (__props.deleteApi) yield __props.deleteApi(row);
+					yield handleFetchData();
+					return true;
+				} catch (error) {
+					emit("error", error);
+					return false;
+				}
+			});
+			return _executeDelete.apply(this, arguments);
+		}
+		function handleDeleteConfirm() {
+			const row = pendingDeleteRow.value;
+			if (!row) return Promise.resolve(false);
+			return executeDelete(row);
+		}
+		function handleModalSuccess(_x5, _x6) {
+			return _handleModalSuccess.apply(this, arguments);
+		}
+		function _handleModalSuccess() {
+			_handleModalSuccess = _asyncToGenerator(function* (result, context) {
+				yield handleFetchData();
+				emit("modalSuccess", result, context);
+			});
+			return _handleModalSuccess.apply(this, arguments);
+		}
+		function handlePageChange(_x7) {
+			return _handlePageChange.apply(this, arguments);
+		}
+		function _handlePageChange() {
+			_handlePageChange = _asyncToGenerator(function* (value) {
+				current.value = value;
+				yield handleFetchData();
+			});
+			return _handlePageChange.apply(this, arguments);
+		}
+		function handlePageSizeChange(_x8) {
+			return _handlePageSizeChange.apply(this, arguments);
+		}
+		function _handlePageSizeChange() {
+			_handlePageSizeChange = _asyncToGenerator(function* (value) {
+				pageSize.value = value;
+				current.value = 1;
+				yield handleFetchData();
+			});
+			return _handlePageSizeChange.apply(this, arguments);
+		}
+		function handleTableChange(_x9, _x10) {
+			return _handleTableChange.apply(this, arguments);
+		}
+		function _handleTableChange() {
+			_handleTableChange = _asyncToGenerator(function* (_data, extra) {
+				var _extra$sorter;
+				if (extra.type !== "sorter") return;
+				sorter.value = ((_extra$sorter = extra.sorter) === null || _extra$sorter === void 0 ? void 0 : _extra$sorter.field) && extra.sorter.direction ? { sort_by: extra.sorter.direction === "descend" ? `-${extra.sorter.field}` : extra.sorter.field } : {};
+				current.value = 1;
+				yield handleFetchData();
+			});
+			return _handleTableChange.apply(this, arguments);
+		}
+		__expose({
+			fetchTableData: handleFetchData,
+			search: handleSearch,
+			/** 重置工具栏筛选 + 分页/排序并刷新（全量重置）。 */
+			reset,
+			/** 仅重置工具栏筛选项，不刷新。 */
+			resetToolbar,
+			/** 仅重置分页/排序并刷新，不动工具栏。 */
+			resetTable: handleReset,
+			create: handleCreate,
+			edit: handleEdit,
+			delete: executeDelete,
+			tableData: computed(() => tableData.value),
+			fetchData: computed(() => fetchData.value),
+			isCreate: computed(() => {
+				var _modalRef$value3;
+				return ((_modalRef$value3 = modalRef.value) === null || _modalRef$value3 === void 0 ? void 0 : _modalRef$value3.type) === "create";
+			}),
+			modalRef
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("section", {
+				class: normalizeClass(cls.value),
+				"aria-busy": loading.value
+			}, [
+				__props.showHeader ? (openBlock(), createElementBlock("header", {
+					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}-header`)
+				}, [
+					renderSlot(_ctx.$slots, "header__title", { title: __props.title }, () => [__props.showTitle && __props.title ? (openBlock(), createElementBlock("h3", {
+						key: 0,
+						class: normalizeClass(`${unref(prefixCls)}-title`)
+					}, toDisplayString(__props.title), 3)) : createCommentVNode("", true)]),
+					renderSlot(_ctx.$slots, "header__extra"),
+					!__props.showToolbar && __props.showCreate ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(`${unref(prefixCls)}-header-actions`)
+					}, [createVNode(unref(Button), {
+						type: "primary",
+						onClick: handleCreate
+					}, {
+						default: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode("新建", -1)])]),
+						_: 1
+					})], 2)) : createCommentVNode("", true),
+					__props.showToolbar ? (openBlock(), createBlock(unref(Toolbar), mergeProps({
+						key: 1,
+						ref_key: "toolbarRef",
+						ref: toolbarRef,
+						modelValue: toolbarModel.value,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => toolbarModel.value = $event)
+					}, __props.toolbarProps, {
+						loading: loading.value,
+						onSearch: handleSearch,
+						onReset: handleReset
+					}), createSlots({
+						"action-append": withCtx(() => [renderSlot(_ctx.$slots, "toolbar__action_append"), __props.showCreate ? (openBlock(), createBlock(unref(Button), {
+							key: 0,
+							type: "primary",
+							onClick: handleCreate
+						}, {
+							default: withCtx(() => [..._cache[6] || (_cache[6] = [createTextVNode("新建", -1)])]),
+							_: 1
+						})) : createCommentVNode("", true)]),
+						_: 2
+					}, [
+						_ctx.$slots.toolbar__default ? {
+							name: "default",
+							fn: withCtx(() => [renderSlot(_ctx.$slots, "toolbar__default")]),
+							key: "0"
+						} : void 0,
+						_ctx.$slots.toolbar__action_prepend ? {
+							name: "action-prepend",
+							fn: withCtx(() => [renderSlot(_ctx.$slots, "toolbar__action_prepend")]),
+							key: "1"
+						} : void 0,
+						renderList(toolbarSlotNames.value, (name) => {
+							return {
+								name,
+								fn: withCtx((data) => [renderSlot(_ctx.$slots, `toolbar__${name}`, normalizeProps(guardReactiveProps(data)))])
+							};
+						})
+					]), 1040, ["modelValue", "loading"])) : createCommentVNode("", true)
+				], 2)) : createCommentVNode("", true),
+				createVNode(unref(Spin), {
+					loading: loading.value,
+					class: normalizeClass(`${unref(prefixCls)}-body`)
+				}, {
+					default: withCtx(() => [createVNode(unref(Table), mergeProps(__props.tableProps, {
+						columns: resolvedColumns.value,
+						data: tableData.value,
+						pagination: resolvedPagination.value,
+						onPageChange: handlePageChange,
+						onPageSizeChange: handlePageSizeChange,
+						onChange: handleTableChange
+					}), createSlots({
+						"basic-crud-action": withCtx((data) => [createVNode(unref(Space), null, {
+							default: withCtx(() => [
+								renderSlot(_ctx.$slots, "table__action_prepend", normalizeProps(guardReactiveProps(data))),
+								__props.showEdit ? (openBlock(), createBlock(unref(Link), {
+									key: 0,
+									ellipsis: false,
+									onClick: ($event) => handleEdit(data.record, data)
+								}, {
+									default: withCtx(() => [..._cache[7] || (_cache[7] = [createTextVNode(" 编辑 ", -1)])]),
+									_: 1
+								}, 8, ["onClick"])) : createCommentVNode("", true),
+								__props.showDelete ? (openBlock(), createBlock(unref(Popconfirm), {
+									key: 1,
+									content: deleteConfirmContent.value,
+									type: "warning",
+									"on-before-ok": handleDeleteConfirm,
+									onPopupVisibleChange: (visible) => handleDeletePopupChange(visible, data.record)
+								}, {
+									default: withCtx(() => [createVNode(unref(Link), {
+										ellipsis: false,
+										status: "danger"
+									}, {
+										default: withCtx(() => [..._cache[8] || (_cache[8] = [createTextVNode("删除", -1)])]),
+										_: 1
+									})]),
+									_: 1
+								}, 8, ["content", "onPopupVisibleChange"])) : createCommentVNode("", true),
+								renderSlot(_ctx.$slots, "table__action_append", normalizeProps(guardReactiveProps(data)))
+							]),
+							_: 2
+						}, 1024)]),
+						_: 2
+					}, [renderList(tableSlotNames.value, (name) => {
+						return {
+							name,
+							fn: withCtx((data) => [renderSlot(_ctx.$slots, `table__${name}`, normalizeProps(guardReactiveProps(data)))])
+						};
+					})]), 1040, [
+						"columns",
+						"data",
+						"pagination"
+					])]),
+					_: 3
+				}, 8, ["loading", "class"]),
+				createVNode(basic_crud_modal_default, {
+					ref_key: "modalRef",
+					ref: modalRef,
+					visible: modalVisible.value,
+					"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => modalVisible.value = $event),
+					model: modalModel.value,
+					"onUpdate:model": _cache[2] || (_cache[2] = ($event) => modalModel.value = $event),
+					"modal-props": __props.modalProps,
+					"modal-form-props": __props.modalFormProps,
+					"create-api": __props.createApi,
+					"update-api": __props.updateApi,
+					"detail-api": __props.detailApi,
+					"value-transformer": __props.valueTransformer,
+					"before-submit": __props.beforeModalSubmit,
+					onSuccess: handleModalSuccess,
+					onClose: _cache[3] || (_cache[3] = ($event) => emit("modalClose")),
+					onError: _cache[4] || (_cache[4] = ($event) => emit("error", $event))
+				}, createSlots({ _: 2 }, [renderList(modalSlotNames.value, (name) => {
+					return {
+						name,
+						fn: withCtx((data) => [renderSlot(_ctx.$slots, `modal__${name}`, normalizeProps(guardReactiveProps(data)))])
+					};
+				})]), 1032, [
+					"visible",
+					"model",
+					"modal-props",
+					"modal-form-props",
+					"create-api",
+					"update-api",
+					"detail-api",
+					"value-transformer",
+					"before-submit"
+				])
+			], 10, _hoisted_1);
+		};
+	}
+}));
+//#endregion
+export { basic_crud_table_vue_vue_type_script_setup_true_lang_default as default };