asp-smart-ui-plus-test
Version:
A Component Library for Vue 3
433 lines (430 loc) • 16.7 kB
JavaScript
import { defineComponent, ref, onMounted, resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, mergeProps, createCommentVNode, createElementVNode, renderSlot, withDirectives, createSlots, withCtx, renderList, normalizeProps, createVNode, toDisplayString } from 'vue';
import { ajax } from '../../../../../utils/ajax.mjs';
import { aspDeepClone } from '../../../../../utils/common.mjs';
import _export_sfc from '../../../../../_virtual/plugin-vue_export-helper.mjs';
const _hoisted_1 = {
key: 1,
class: "query-table-divider"
};
const _hoisted_2 = { class: "middle-tools" };
const _hoisted_3 = {
key: 0,
class: "count-detail"
};
const _hoisted_4 = { class: "popover-content" };
const _sfc_main = defineComponent({
__name: "query-table",
props: {
tools: { type: Function, required: true, default: () => [] },
formFields: { type: Function, required: true, default: () => [] },
formTools: { type: Function, required: true, default: () => [] },
tables: { type: Object, required: true, default: () => ({ url: "", options: {}, columns: [] }) },
labelWidth: { type: [String, Number], required: true },
showReset: { type: Boolean, required: true, default: true },
showSubmit: { type: Boolean, required: true, default: true },
formAttributes: { type: Object, required: true },
submitBtnIcon: { type: String, required: true },
resetBtnIcon: { type: String, required: true }
},
emits: [
"sortChange",
"filterChange",
"filterConfirm",
"filterReset",
"reset"
],
setup(__props, { expose, emit }) {
const props = __props;
const loading = ref(false);
const tableData = ref([]);
const tableDataTemp = ref([]);
const currentPage = ref(1);
const pageSize = ref(15);
const total = ref(0);
const timeStamp = ref(0);
let queryModel = {};
const queryForm = ref(null);
onMounted(() => {
timeStamp.value = Date.now();
if (props.tables.options && (props.tables.options.initHttp || props.tables.options.initHttp === void 0)) {
if (props.formFields.length > 0) {
queryModel = Object.assign({}, queryModel, queryForm.value.getModel());
}
fetchTable(queryModel);
}
});
const initTables = (callback) => {
fetchTable(queryModel, callback);
};
const loadTable = (model = {}, callback) => {
currentPage.value = model.currentPage ? currentPage.value : 1;
queryModel = Object.assign({}, queryModel, model);
fetchTable(queryModel, callback);
};
const setQueryFormOptions = (columnName, options) => {
queryForm.value.setOptions(columnName, options);
};
const setQueryFormDisabled = (columnName, state) => {
queryForm.value.setDisabled(columnName, state);
};
const setQueryFormValue = (columnName, state) => {
queryForm.value.setValue(columnName, state);
};
const formSubmit = (model) => {
if (model) {
currentPage.value = model.currentPage ? currentPage.value : 1;
queryModel = Object.assign({}, queryModel, model);
fetchTable(queryModel);
} else {
fetchTable(queryModel);
}
};
const reset = (model) => {
emit("reset", model);
};
const fetchTable = async (model = {}, callback) => {
var _a, _b, _c, _d, _e;
try {
if (!props.tables.options)
return;
loading.value = props.tables.options.loading === void 0 ? true : props.tables.options.loading;
const obj = props.tables.http && (props.tables.http.obj || {});
if (model.order === null) {
delete model.order;
delete model.prop;
}
const params = {};
if (props.tables.options.page || props.tables.options.page === void 0) {
pageSize.value = props.tables.http && props.tables.http.pageSize || 15;
if (props.tables.http && props.tables.http.pageSet && props.tables.http.pageSet.length > 0) {
params[props.tables.http.pageSet[0]] = currentPage.value;
params[props.tables.http.pageSet[1]] = pageSize.value;
} else {
params.page = currentPage.value;
params.rows = pageSize.value;
}
}
Object.assign(params, obj, model);
if (typeof props.tables.options.beforeHttp === "function") {
props.tables.options.beforeHttp(params);
}
let data;
try {
if (typeof props.tables.options.httpRequest === "function") {
data = await props.tables.options.httpRequest(params);
} else {
data = await ajax({
method: ((_a = props.tables.http) == null ? void 0 : _a.method) || "POST",
url: (_b = props.tables.http) == null ? void 0 : _b.url,
data: params,
dataType: (_c = props.tables.http) == null ? void 0 : _c.dataType,
async: (_d = props.tables.http) == null ? void 0 : _d.async,
requestHeader: (_e = props.tables.http) == null ? void 0 : _e.requestHeader
});
}
} catch (e) {
console.log(e);
}
if (typeof props.tables.options.afterHttp === "function") {
props.tables.options.afterHttp(data);
}
total.value = (data == null ? void 0 : data.count) || 0;
if (!(data == null ? void 0 : data.data)) {
tableData.value = [];
tableDataTemp.value = [];
loading.value = false;
return false;
}
tableData.value = data == null ? void 0 : data.data;
tableDataTemp.value = aspDeepClone(data == null ? void 0 : data.data);
if (props.tables.options.pageType === "static") {
tableData.value = tableDataTemp.value.slice(
(currentPage.value - 1) * pageSize.value,
currentPage.value * pageSize.value
);
total.value = tableDataTemp.value.length || 0;
}
formatter();
if (typeof props.tables.options.lastHttp === "function") {
props.tables.options.lastHttp(tableData.value, data);
}
if (typeof props.tables.options.asyncAfterHttp === "function") {
const res = await props.tables.options.asyncAfterHttp(
tableData.value,
data
);
tableData.value = res;
tableDataTemp.value = aspDeepClone(res);
}
if (callback) {
callback(tableData.value);
}
loading.value = false;
} catch (e) {
console.log(e);
loading.value = false;
}
};
const formatter = () => {
const { editor, formatter: formatter2 } = props.tables.options;
const formatterKeys = formatter2 ? Object.keys(formatter2) : [];
tableData.value = tableData.value.map((item, index) => {
const newItem = {
...item,
index: (currentPage.value - 1) * pageSize.value + (1 + index),
isEdit: !!editor
};
if (formatterKeys.length > 0) {
formatterKeys.forEach((key) => {
if (key in item) {
newItem[key] = formatter2[key](item);
}
});
}
return newItem;
});
};
const setTableData = (data, isResetCurrentPage = true) => {
if (isResetCurrentPage) {
currentPage.value = 1;
}
tableData.value = data;
tableDataTemp.value = aspDeepClone(data);
if (props.tables.options.pageType === "static") {
tableData.value = tableDataTemp.value.slice(
(currentPage.value - 1) * pageSize.value,
currentPage.value * pageSize.value
);
total.value = data.length || 0;
}
formatter();
};
const getTableData = () => {
return tableData.value;
};
const handleSizeChange = (val) => {
if (props.tables.options && typeof props.tables.options.sizeChange === "function") {
props.tables.options.sizeChange(tableData.value, next);
} else {
handleSizeChangeNext(val);
}
function next(state) {
if (state === void 0 || state) {
handleSizeChangeNext(val);
}
}
if (props.tables.options && props.tables.options.pageType === "static") {
tableData.value = tableDataTemp.value.slice(
(currentPage.value - 1) * pageSize.value,
currentPage.value * pageSize.value
);
formatter();
}
};
const handleSizeChangeNext = (val) => {
pageSize.value = val;
if (props.tables.http && props.tables.http.pageSize) {
props.tables.http.pageSize = val;
}
formSubmit();
};
const handleCurrentChange = (val) => {
if (props.tables.options && props.tables.options.pageType === "static") {
tableData.value = tableDataTemp.value.slice(
(currentPage.value - 1) * pageSize.value,
currentPage.value * pageSize.value
);
formatter();
return;
}
if (props.tables.options && typeof props.tables.options.currentChange === "function") {
props.tables.options.currentChange(tableData.value, next);
} else {
handleCurrentChangeNext(val);
}
if (props.tables.options && typeof props.tables.options.afterCurrentChange === "function") {
props.tables.options.afterCurrentChange();
}
function next(state) {
if (state === void 0 || state) {
handleCurrentChangeNext(val);
}
}
};
const handleCurrentChangeNext = (val) => {
currentPage.value = val;
formSubmit();
};
const sortChange = (val) => {
try {
if (props.tables.options && !props.tables.options.sortDefault)
formSubmit(val);
} catch (e) {
}
};
const resetQueryFrom = () => {
queryForm.value.onReset();
};
const setTableColumn = (key, keys, value) => {
if (!props.tables.columns)
return;
props.tables.columns.forEach((item, i) => {
if (item.key === key) {
props.tables.columns[i][keys] = value;
}
});
};
const setTableEdit = (state) => {
tableData.value.forEach((item) => {
item.isEdit = state;
});
if (!props.tables.options)
return;
props.tables.options.editor = state;
};
const setTableOperationShow = (state) => {
if (!props.tables.operation)
return;
props.tables.operation.show = state;
};
const filterChange = ({
columnName,
filterKey,
filteredList,
filteredIdList
}) => {
const filteredParams = {};
if (!queryModel.filteredParams) {
queryModel.filteredParams = filteredParams;
}
filteredParams[filterKey] = filteredIdList;
Object.assign(queryModel.filteredParams, filteredParams);
};
const filterConfirm = () => {
loadTable();
};
const filterReset = () => {
loadTable();
};
expose({
initTables,
setQueryFormOptions,
setQueryFormDisabled,
setQueryFormValue,
setTableData,
getTableData,
setTableColumn,
setTableEdit,
setTableOperationShow,
resetQueryFrom
});
return (_ctx, _cache) => {
const _component_asp_query_form = resolveComponent("asp-query-form");
const _component_asp_button_list = resolveComponent("asp-button-list");
const _component_asp_table_list = resolveComponent("asp-table-list");
const _component_asp_pagination = resolveComponent("asp-pagination");
const _component_asp_popover = resolveComponent("asp-popover");
const _directive_loading = resolveDirective("loading");
return openBlock(), createElementBlock("div", {
id: "query-table",
class: normalizeClass(["asp-query-table", `asp-query-table`])
}, [
__props.formFields.length > 0 ? (openBlock(), createBlock(_component_asp_query_form, mergeProps({
key: 0,
ref_key: "queryForm",
ref: queryForm,
class: "query-form",
"show-reset": __props.showReset,
"show-submit": __props.showSubmit,
"label-width": __props.labelWidth,
"submit-btn-icon": __props.submitBtnIcon,
"reset-btn-icon": __props.resetBtnIcon,
"button-list": __props.formTools,
"form-fields": __props.formFields
}, __props.formAttributes, {
onFormSubmit: formSubmit,
onReset: reset
}), null, 16, ["show-reset", "show-submit", "label-width", "submit-btn-icon", "reset-btn-icon", "button-list", "form-fields"])) : createCommentVNode("v-if", true),
createCommentVNode(" \u5206\u5272\u7EBF "),
__props.formFields.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("v-if", true),
createElementVNode("div", _hoisted_2, [
renderSlot(_ctx.$slots, "middle-tools")
]),
__props.tools && __props.tools.length > 0 ? (openBlock(), createBlock(_component_asp_button_list, {
key: 2,
class: "asp-tool-list",
"button-list": __props.tools
}, null, 8, ["button-list"])) : createCommentVNode("v-if", true),
withDirectives((openBlock(), createBlock(_component_asp_table_list, {
ref: "tableList",
attributes: __props.tables.attributes,
class: "table-list",
"time-stamp": timeStamp.value,
columns: __props.tables.columns,
operation: __props.tables.operation,
options: __props.tables.options,
"table-data": tableData.value,
"table-data-temp": tableDataTemp.value,
onSortChange: sortChange,
onFilterChange: filterChange,
onFilterConfirm: filterConfirm,
onFilterReset: filterReset
}, createSlots({
expand: withCtx(({ data }) => [
renderSlot(_ctx.$slots, "expand", { data })
]),
_: 2
}, [
renderList(__props.tables.columns, (column) => {
return {
name: `${column.key}`,
fn: withCtx((scope) => [
column.type === "slot" ? renderSlot(_ctx.$slots, column.key, normalizeProps(mergeProps({ key: 0 }, scope))) : createCommentVNode("v-if", true),
createCommentVNode(" \u63D2\u69FD\u5185\u5BB9 ")
])
};
})
]), 1032, ["attributes", "time-stamp", "columns", "operation", "options", "table-data", "table-data-temp"])), [
[_directive_loading, loading.value]
]),
__props.tables.options.page ? (openBlock(), createElementBlock("div", {
key: 3,
class: normalizeClass(["asp-pagination", `asp-pagination-${timeStamp.value}`])
}, [
createVNode(_component_asp_pagination, mergeProps({
"current-page": currentPage.value,
"onUpdate:currentPage": _cache[0] || (_cache[0] = ($event) => currentPage.value = $event),
background: "",
"page-sizes": __props.tables.http && __props.tables.http.pageSizes || [15, 30, 50],
"page-size": pageSize.value,
layout: __props.tables.paginations ? __props.tables.paginations.layout : "total, sizes, prev, pager, next, jumper",
total: total.value
}, __props.tables.paginations, {
onSizeChange: handleSizeChange,
onCurrentChange: handleCurrentChange
}), null, 16, ["current-page", "page-sizes", "page-size", "layout", "total"]),
__props.tables.options.showCountIcon ? (openBlock(), createElementBlock("span", _hoisted_3, [
createVNode(_component_asp_popover, {
placement: "right",
width: "270",
trigger: "click"
}, {
reference: withCtx(() => [
createElementVNode("i", {
class: normalizeClass(["iconfont", __props.tables.options.iconClass || "iconwenjian"])
}, null, 2)
]),
default: withCtx(() => [
createElementVNode("div", _hoisted_4, toDisplayString(__props.tables.options.countDetail), 1)
]),
_: 1
})
])) : createCommentVNode("v-if", true)
], 2)) : createCommentVNode("v-if", true),
renderSlot(_ctx.$slots, "bottom-tools")
]);
};
}
});
var QueryTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "E:\\code\\SmartUIPlus\\asp-packages\\components\\pc\\advanced\\query-table\\src\\query-table.vue"]]);
export { QueryTable as default };