vue-admin-core
Version:
A Component Library for Vue 3
628 lines (625 loc) • 21.3 kB
JavaScript
import { h, defineComponent, computed, toRef, withDirectives } from 'vue';
import { RecursionField as RecursionField$1, useFieldSchema, FragmentComponent, useField, useForm } from '@formily/vue';
import { observer } from '@formily/reactive-vue';
import { isArr, isBool } from '@formily/shared';
import { ElPagination, ElTableColumn, ElTable, ElLoading } from 'element-plus';
import { Space } from '../../space/src/index.mjs';
import { ArrayBase } from '../../array-base/src/index.mjs';
import { stylePrefix } from '../../__builtins__/configs/index.mjs';
import '../../__builtins__/shared/index.mjs';
import '../../preview-text/index.mjs';
import { model, batch } from '@formily/reactive';
import eachTree from 'xe-utils/eachTree.js';
import { get, each } from 'lodash-es';
import defaultProps from 'element-plus/es/components/table/src/table/defaults';
import { isVueOptions, composeExport } from '../../__builtins__/shared/utils.mjs';
import { resolveComponent } from '../../__builtins__/shared/resolve-component.mjs';
import { PreviewText } from '../../preview-text/src/index.mjs';
const arrayTableProps = {
...defaultProps,
loading: {
type: Boolean
},
table: {
type: Object
},
pagination: {
type: [Boolean, Object],
default: false
}
};
const RecursionField = RecursionField$1;
const isColumnComponent = (schema) => {
var _a;
if (typeof schema["x-component"] !== "string")
return false;
return ((_a = schema["x-component"]) == null ? void 0 : _a.indexOf("Column")) > -1;
};
const isOperationsComponent = (schema) => {
var _a;
if (typeof schema["x-component"] !== "string")
return false;
return ((_a = schema["x-component"]) == null ? void 0 : _a.indexOf("Operation")) > -1;
};
const isAdditionComponent = (schema) => {
var _a;
if (typeof schema["x-component"] !== "string")
return false;
return ((_a = schema["x-component"]) == null ? void 0 : _a.indexOf("Addition")) > -1;
};
const getDefaultRender = (schema) => {
const content = schema["x-render"];
if (typeof content === "string")
return content;
if (typeof content === "function")
return content;
if (typeof content === "object" && !isVueOptions(content) && content["default"])
return content["default"];
return void 0;
};
const getArrayTableSources = (arrayFieldRef, schemaRef) => {
const arrayField = arrayFieldRef.value;
const parseSources = (schema) => {
var _a, _b, _c;
if (isColumnComponent(schema) || isOperationsComponent(schema) || isAdditionComponent(schema)) {
if (!((_a = schema["x-component-props"]) == null ? void 0 : _a["prop"]) && !schema["name"])
return [];
const name = ((_b = schema["x-component-props"]) == null ? void 0 : _b["prop"]) || schema["name"];
const field = arrayField.query(arrayField.address.concat(name)).take();
const fieldProps = (field == null ? void 0 : field.props) || schema.toFieldProps();
const columnProps = ((_c = field == null ? void 0 : field.component) == null ? void 0 : _c[1]) || schema["x-component-props"] || {};
const display = (field == null ? void 0 : field.display) || schema["x-display"] || "visible";
const required = schema.reduceProperties((required2, property) => {
if (required2) {
return required2;
}
return !!property.required;
}, false);
return [
{
name,
display,
required,
field,
fieldProps,
schema,
columnProps,
children: schema["x-table-header"] ? schema.reduceProperties((buf, schema2) => {
return buf.concat(parseSources(schema2));
}, []) : void 0
}
];
} else if (schema.properties) {
return schema.reduceProperties((buf, schema2) => {
return buf.concat(parseSources(schema2));
}, []);
} else {
return [];
}
};
const parseArrayTable = (schema) => {
if (!schema)
return [];
const sources = [];
const items = isArr(schema) ? schema : [schema];
return items.reduce((columns, schema2) => {
const item = parseSources(schema2);
if (item) {
return columns.concat(item);
}
return columns;
}, sources);
};
if (!schemaRef.value)
throw new Error("can not found schema object");
return parseArrayTable(schemaRef.value.items);
};
const getArrayTableColumns = (sources) => {
return sources.reduce(
(buf, { name, columnProps, schema, display, required, field, children }, key) => {
const { title, asterisk, ...props } = columnProps;
if (display !== "visible")
return buf;
if (!isColumnComponent(schema) && !isOperationsComponent(schema))
return buf;
if (isOperationsComponent(schema) && (field == null ? void 0 : field.pattern) !== "editable")
return buf;
const render = (startIndex) => {
return (columnProps == null ? void 0 : columnProps.type) && (columnProps == null ? void 0 : columnProps.type) !== "default" && (columnProps == null ? void 0 : columnProps.type) !== "expand" ? void 0 : (props2) => {
var _a;
const index = ((_a = startIndex == null ? void 0 : startIndex.value) != null ? _a : 0) + props2.$index;
const children2 = h(
ArrayBase.Item,
{ index, record: props2.row, key: `${key}${index}` },
{
default: () => {
const defaultRender = getDefaultRender(schema);
if (defaultRender) {
return resolveComponent(defaultRender, props2);
}
if (!schema.properties) {
if (columnProps.valueType === "date") {
return h(PreviewText.DatePicker, {
value: get(props2.row, name),
format: columnProps.format || "YYYY-MM-DD"
});
} else if (columnProps.valueType === "dateTime") {
return h(PreviewText.DatePicker, {
value: get(props2.row, name)
});
} else if (columnProps.valueType === "time") {
return h(PreviewText.TimePicker, {
value: get(props2.row, name),
format: columnProps.format
});
} else if (columnProps.valueType === "currency") {
return h(PreviewText, {
value: get(props2.row, name),
format: columnProps.format || "$0,0.00"
});
} else if (columnProps.valueType === "bytes") {
return h(PreviewText, {
value: get(props2.row, name),
format: columnProps.format || "0b"
});
} else if (columnProps.valueType === "percent") {
return h(PreviewText, {
value: get(props2.row, name),
format: columnProps.format || "0%"
});
} else if (columnProps.valueType === "address") {
return h(PreviewText.Cascader, { value: get(props2.row, name) });
}
if (schema.enum) {
return h(PreviewText.Select, {
value: get(props2.row, name),
options: schema.enum,
multiple: columnProps.multiple
});
}
return h(PreviewText, {
value: get(props2.row, name),
format: columnProps.format
});
}
return h(
RecursionField,
{
schema,
name: index,
onlyRenderProperties: true
},
{}
);
}
}
);
return children2;
};
};
const item = {
label: title,
...props,
key,
prop: name,
asterisk: asterisk != null ? asterisk : required,
schema
};
if (children && children.length > 0) {
item.children = getArrayTableColumns(children);
} else {
item.render = render;
}
return buf.concat(item);
},
[]
);
};
const renderAddition = () => {
const schema = useFieldSchema();
return schema.value.reduceProperties((addition, schema2) => {
if (isAdditionComponent(schema2) || schema2["x-addition"]) {
return h(
RecursionField,
{
schema: schema2,
name: "addition"
},
{}
);
}
return addition;
}, null);
};
const createPagination = (options) => {
const pagination = model({
current: (options == null ? void 0 : options.current) || 1,
pageSize: (options == null ? void 0 : options.pageSize) || 10,
pageSizes: (options == null ? void 0 : options.pageSizes) || [10, 20, 50, 100],
total: (options == null ? void 0 : options.total) || 0,
align: (options == null ? void 0 : options.align) || "right",
onChange: options == null ? void 0 : options.onChange,
setCurrent(current) {
pagination.current = current;
},
setPageSize(pageSize) {
pagination.pageSize = pageSize;
},
setPageSizes(pageSizes) {
pagination.pageSizes = pageSizes;
},
setTotal(total) {
pagination.total = total;
},
setAlign(align) {
pagination.align = align;
}
});
return pagination;
};
const createTable = () => {
const table = {
instance: null,
expandRows: [],
onInit(tableRef) {
table.instance = tableRef;
},
setExpandRow(row, expandedRows) {
if (typeof expandedRows === "boolean") {
if (expandedRows) {
table.expandRows.push(row);
} else {
table.expandRows.splice(table.expandRows.indexOf(row), 1);
}
} else {
table.expandRows = expandedRows;
}
},
clearSelection() {
var _a;
(_a = table.instance) == null ? void 0 : _a.clearSelection();
},
getSelectionRows() {
var _a;
return (_a = table.instance) == null ? void 0 : _a.getSelectionRows();
},
toggleRowSelection(row, selected) {
var _a;
(_a = table.instance) == null ? void 0 : _a.toggleRowSelection(row, selected);
},
toggleAllSelection() {
var _a;
(_a = table.instance) == null ? void 0 : _a.toggleAllSelection();
},
toggleRowExpansion(row, expanded) {
var _a;
(_a = table.instance) == null ? void 0 : _a.toggleRowExpansion(row, expanded);
},
expandAll(isTree) {
var _a, _b, _c;
const rows = [];
if (isTree) {
const { children, hasChildren } = (_a = table.instance) == null ? void 0 : _a.treeProps;
eachTree(
(_b = table.instance) == null ? void 0 : _b.data,
(item) => {
if (item[children] && item[children].length > 0 || item[hasChildren]) {
rows.push(item);
table.toggleRowExpansion(item, true);
}
},
{ children }
);
} else {
each((_c = table.instance) == null ? void 0 : _c.data, (item) => {
rows.push(item);
table.toggleRowExpansion(item, true);
});
}
table.expandRows = rows;
return rows;
},
clearExpand() {
each([...table.expandRows], (item) => {
table.toggleRowExpansion(item, false);
});
table.expandRows = [];
},
setCurrentRow(row) {
var _a;
(_a = table.instance) == null ? void 0 : _a.setCurrentRow(row);
},
clearSort() {
var _a;
(_a = table.instance) == null ? void 0 : _a.clearSort();
},
clearFilter(columnKeys) {
var _a;
(_a = table.instance) == null ? void 0 : _a.clearFilter(columnKeys);
},
doLayout() {
var _a;
(_a = table.instance) == null ? void 0 : _a.doLayout();
},
sort(prop, order) {
var _a;
(_a = table.instance) == null ? void 0 : _a.sort(prop, order);
},
scrollTo(options, yCoord) {
var _a;
(_a = table.instance) == null ? void 0 : _a.scrollTo(options, yCoord);
},
setScrollTop(top) {
var _a;
(_a = table.instance) == null ? void 0 : _a.setScrollTop(top);
},
setScrollLeft(left) {
var _a;
(_a = table.instance) == null ? void 0 : _a.setScrollLeft(left);
}
};
return table;
};
const ArrayTablePagination = defineComponent({
inheritAttrs: false,
props: ["dataSource", "pagination"],
setup(props, { attrs, slots }) {
const prefixCls = `${stylePrefix}-array-table`;
const dataSource = computed(() => props.dataSource);
const paginationRef = computed(() => {
var _a;
return (_a = props.pagination) != null ? _a : createPagination();
});
const renderPagination = function() {
var _a;
const pagination = paginationRef.value;
const current = pagination.current;
const pageSize = pagination.pageSize;
const pageSizes = pagination.pageSizes;
const total = props.pagination ? pagination.total : (_a = dataSource.value) == null ? void 0 : _a.length;
const totalPage = Math.ceil(total / pageSize);
const align = pagination.align;
if (totalPage <= 1)
return;
return h(
"div",
{
class: [`${prefixCls}-pagination`],
style: {
justifyContent: align
}
},
h(
Space,
{},
{
default: () => [
h(
ElPagination,
{
background: true,
layout: "total, sizes, prev, pager, next, jumper",
...attrs,
pageSize,
pageSizes,
pageCount: totalPage,
currentPage: current,
total,
small: true,
onCurrentChange: (val) => {
pagination.setCurrent(val);
},
onSizeChange: (val) => {
batch(() => {
pagination.setCurrent(1);
pagination.setPageSize(val);
});
}
},
{}
)
]
}
)
);
};
return () => {
const pagination = paginationRef.value;
const startIndex = (pagination.current - 1) * pagination.pageSize;
const endIndex = startIndex + pagination.pageSize - 1;
return h(
FragmentComponent,
{},
{
default: () => {
var _a, _b;
return (_b = slots == null ? void 0 : slots.default) == null ? void 0 : _b.call(
slots,
props.pagination ? dataSource.value : (_a = dataSource.value) == null ? void 0 : _a.slice(startIndex, endIndex + 1),
renderPagination,
props.pagination ? null : toRef(startIndex)
);
}
}
);
};
}
});
const ArrayTableInner = observer(
defineComponent({
name: "FArrayTable",
inheritAttrs: false,
props: arrayTableProps,
setup(props, { attrs, slots }) {
const fieldRef = useField();
const schemaRef = useFieldSchema();
const formRef = useForm();
const prefixCls = `${stylePrefix}-array-table`;
const { getKey, keyMap } = ArrayBase.useKey(schemaRef.value);
const defaultRowKey = (record, index) => {
return getKey(record, index);
};
const tableRef = computed(() => {
var _a;
return (_a = props.table) != null ? _a : createTable();
});
return () => {
const field = fieldRef.value;
const form = formRef.value;
const dataSource = Array.isArray(field.value) ? field.value.slice() : [];
const pagination = props.pagination;
const sources = getArrayTableSources(fieldRef, schemaRef);
const columns = getArrayTableColumns(sources);
const renderColumns = (startIndex) => {
const renderColumn = (columns2) => {
return columns2.map(
({ key, render, asterisk, schema, children: headerChildren, ...props2 }) => {
if (headerChildren) {
return h(
ElTableColumn,
{
...props2,
key
},
{
default: () => renderColumn(headerChildren)
}
);
}
const children = {};
if (render) {
children.default = render(startIndex);
}
if (asterisk) {
children.header = ({
column,
$index
}) => h("span", {}, [
h("span", { class: `${prefixCls}-inner-asterisk` }, "*"),
schema["x-render"] && schema["x-render"]["header"] ? resolveComponent(schema["x-render"]["header"], { column, $index }) : column.label
]);
} else {
if (schema["x-render"] && schema["x-render"]["header"]) {
children.header = ({
column,
$index
}) => resolveComponent(schema["x-render"]["header"], { column, $index });
}
}
return h(
ElTableColumn,
{
...props2,
key
},
children
);
}
);
};
return renderColumn(columns);
};
const renderStateManager = () => sources.map((column, key) => {
if (!isColumnComponent(column.schema) && !isOperationsComponent(column.schema))
return;
return h(
RecursionField,
{
name: column.name,
schema: column.schema,
onlyRenderSelf: true,
key
},
{}
);
});
const renderTable = (dataSource2, pager, startIndex) => {
return h(
"div",
{ class: prefixCls },
h(
ArrayBase,
{
keyMap
},
{
default: () => [
withDirectives(
h(
ElTable,
{
...props,
...attrs,
rowKey: props.rowKey ? props.rowKey : defaultRowKey,
data: dataSource2,
ref: (inst) => {
tableRef.value.onInit(inst);
field.inject({
getRef: () => inst
});
},
onExpandChange: (row, expandedRows) => {
var _a;
tableRef.value.setExpandRow(row, expandedRows);
(_a = attrs == null ? void 0 : attrs.onExpandChange) == null ? void 0 : _a.call(attrs, row, expandedRows);
}
},
{
...slots,
default: () => renderColumns(startIndex)
}
),
[
[
ElLoading.directive,
props.loading !== void 0 ? props.loading : (field == null ? void 0 : field.loading) || (form == null ? void 0 : form.submitting)
]
]
),
pager == null ? void 0 : pager(),
renderStateManager(),
renderAddition()
]
}
)
);
};
if (!pagination) {
return renderTable(dataSource);
}
return h(
ArrayTablePagination,
{
pagination: isBool(pagination) ? null : pagination,
dataSource
},
{ default: renderTable }
);
};
}
})
);
const ArrayTableColumn = {
name: "FArrayTableColumn",
render() {
return null;
}
};
const ArrayTable = composeExport(ArrayTableInner, {
Column: ArrayTableColumn,
Index: ArrayBase.Index,
SortHandle: ArrayBase.SortHandle,
Addition: ArrayBase.Addition,
Remove: ArrayBase.Remove,
MoveDown: ArrayBase.MoveDown,
MoveUp: ArrayBase.MoveUp,
useArray: ArrayBase.useArray,
useIndex: ArrayBase.useIndex,
useRecord: ArrayBase.useRecord,
ButtonGroup: ArrayBase.ButtonGroup,
Button: ArrayBase.Button,
createPagination,
createTable
});
export { ArrayTable, arrayTableProps, ArrayTable as default };
//# sourceMappingURL=index.mjs.map