@fecp/mobile
Version:
555 lines (554 loc) • 20.5 kB
JavaScript
/* empty css */
/* empty css */
/* empty css */
/* empty css */
import { computed, ref, onMounted, createVNode, render, watch, nextTick, createBlock, openBlock, normalizeStyle, normalizeClass, unref, withCtx, isRef, createSlots, createElementBlock, createCommentVNode, Fragment, createElementVNode, renderList, renderSlot } from "vue";
import { VxeGrid } from "vxe-table";
import { useDataSource } from "../../../utils/dataSourceUtil.mjs";
/* empty css */
import { textFormatter, dateFormatter, cascadeFormatter, multipleFormatter, selectFormatter } from "../../../utils/formatterUtil.mjs";
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.mjs";
import { SwipeCell } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/swipe-cell/index.mjs";
import { Button } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/button/index.mjs";
import { showConfirmDialog } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/dialog/function-call.mjs";
import { CellGroup } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/cell-group/index.mjs";
import { List } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/list/index.mjs";
const _hoisted_1 = {
key: 0,
class: "van-list__finished-text"
};
const _hoisted_2 = {
key: 1,
class: "van-list__loading"
};
const _sfc_main = {
__name: "Table",
props: {
modelValue: {
//数据
type: Array,
default: []
},
columns: {
//列配置
type: Array,
default: []
},
size: {
//大小尺寸: medium / small / mini
type: String,
default: "medium"
},
isFixedHead: {
//固定表头
type: Boolean,
default: true
},
autoHeight: {
//高度自适应
type: Boolean,
default: true
},
height: {
//高度
type: String,
default: "300"
},
border: {
//default:默认边框， full:完整边框,outer 显示外边框,inner 显示内边框,none 隐藏边框
type: String,
default: "default"
},
round: {
//显示圆角
type: Boolean,
default: false
},
stripe: {
//斑马线样式
type: Boolean,
default: false
},
showHeader: {
//显示表头
type: Boolean,
default: true
},
scrollLoad: {
//是否滚动加载
type: Boolean,
default: false
},
dataSource: {
type: String,
default: ""
},
params: {
type: Object,
default: {}
},
pageSize: {
type: String,
default: "10"
},
isCard: {
//卡片风格
type: Boolean,
default: false
},
isShadow: {
//卡片阴影
type: Boolean,
default: true
},
swipeDelete: {
//左滑删除
type: Boolean,
default: false
},
swipeEdit: {
//左滑编辑
type: Boolean,
default: false
}
},
emits: [
"update:modelValue",
"deleteRow",
"editRow",
"clickCell"
],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
function cellClickEvent({ row, column }) {
emit("clickCell", { row, column });
}
const compHeight = computed(() => {
if (props.autoHeight) {
return "100%";
} else {
return props.height + "px";
}
});
const columnOptions = computed(() => {
const columns = [...props.columns];
columns.forEach((col) => {
switch (col.dataType) {
case "select":
col.formatter = ({ cellValue }) => {
if (isEmpty(cellValue)) {
return emptyHandler(col.emptyFormatter);
}
return selectFormatter(cellValue, col.options);
};
break;
case "multiple":
col.formatter = ({ cellValue }) => {
if (isEmpty(cellValue)) {
return emptyHandler(col.emptyFormatter);
}
return multipleFormatter(cellValue, col.options);
};
break;
case "cascade":
col.formatter = ({ cellValue }) => {
if (isEmpty(cellValue)) {
return emptyHandler(col.emptyFormatter);
}
return cascadeFormatter(cellValue, col.treeOptions);
};
break;
case "date":
col.formatter = ({ cellValue }) => {
if (isEmpty(cellValue)) {
return emptyHandler(col.emptyFormatter);
}
return dateFormatter(cellValue, col.dateType, col.dateFormatter);
};
break;
default:
col.formatter = ({ cellValue }) => {
if (isEmpty(cellValue)) {
return emptyHandler(col.emptyFormatter);
}
return textFormatter(cellValue, col.dataFormatter);
};
break;
}
col.showOverflow = true;
col.showHeaderOverflow = true;
col.showFooterOverflow = true;
});
return columns;
});
function isEmpty(cellValue) {
return !cellValue && cellValue !== 0;
}
function emptyHandler(emptyFormatter) {
if (isEmpty(emptyFormatter)) {
return "";
} else {
return emptyFormatter;
}
}
const gridRef = ref();
const listRef = ref();
let isDesigner = false;
onMounted(() => {
var _a, _b;
const uid = (_b = (_a = listRef.value) == null ? void 0 : _a.$el) == null ? void 0 : _b.getAttribute("data-uid");
if (uid) {
isDesigner = true;
}
setTimeout(() => {
initSwipeCells();
}, 500);
});
const initSwipeCells = () => {
if (props.swipeDelete || props.swipeEdit) {
const tableBody = gridRef.value.getEl().querySelector(".vxe-table--body");
tableBody.offsetWidth;
const tableRows = tableBody.querySelectorAll(".vxe-body--row");
tableRows.forEach((row, index) => {
if (!row.parentElement.classList.contains("van-swipe-cell__wrapper")) {
const swipeCell = createVNode(
SwipeCell,
{
class: `fec-table-row-swipe`,
// style: `width:${offsetWidth}px`,
style: `width:100%`
// beforeClose: ({ position }) => {
// switch (position) {
// case "left":
// case "cell":
// case "outside":
// return true;
// case "right":
// return new Promise(resolve => {
// showConfirmDialog({
// title: "确定删除吗？",
// })
// .then(() => {
// emit("delete");
// resolve(true);
// })
// .catch(() => resolve(false));
// });
// }
// },
},
{
right: () => [
createVNode(Button, {
square: true,
type: "primary",
text: "编辑",
style: `height:100%;display:${props.swipeEdit ? "inline-block" : "none"}`,
onClick: () => {
const rowData = gridRef.value.getData(index);
emit("editRow", rowData, index);
}
}),
createVNode(Button, {
square: true,
type: "danger",
text: "删除",
style: `height:100%;display:${props.swipeDelete ? "inline-block" : "none"}`,
onClick: () => {
showConfirmDialog({
title: "确定删除吗？"
}).then(() => {
const rowData = gridRef.value.getData(index);
emit("deleteRow", rowData, index);
}).catch(() => {
});
}
})
]
}
);
const container = document.createElement("div");
render(swipeCell, container);
const swipeCellElement = container.firstElementChild;
const colgroupElement = row.parentNode.parentNode.querySelector("colgroup");
const cloneColgroupElement = colgroupElement.cloneNode(true);
swipeCellElement.appendChild(cloneColgroupElement);
row.parentNode.replaceChild(swipeCellElement, row);
swipeCellElement.querySelector(".van-swipe-cell__wrapper").appendChild(row);
}
});
}
};
const virtualYConfig = {
enabled: false,
gt: 0,
threshold: 0
};
const tableData = computed({
get: () => {
return props.modelValue;
},
set: (val) => {
emit("update:modelValue", val);
}
});
const dataSource = useDataSource(props.dataSource);
let pageNo = 1;
const initLoading = ref(false);
const loading = ref(false);
const finished = ref(false);
const listFinished = ref(false);
const error = ref(false);
const listError = ref(false);
if (dataSource && !isDesigner) {
tableData.value = [];
if (props.isFixedHead) {
initLoading.value = true;
call();
} else if (!props.scrollLoad) {
call();
} else {
pageNo = 0;
}
} else {
loading.value = false;
}
function onScrollLoads({ direction }) {
const isBottom = direction == "bottom";
if (finished.value || loading.value || error.value) {
return;
}
if (props.scrollLoad && isBottom && dataSource) {
pageNo++;
loading.value = true;
error.value = false;
call();
}
}
watch(
() => props.params,
(newParams, oldParams) => {
const isParamsChanged = Object.keys(newParams).some(
(key) => newParams[key] !== oldParams[key]
);
if (isParamsChanged) {
tableData.value = [];
loading.value = false;
finished.value = false;
listFinished.value = false;
error.value = false;
listError.value = false;
pageNo = 1;
if (props.isFixedHead) {
initLoading.value = true;
call();
} else if (!props.scrollLoad) {
call();
}
}
},
{ deep: true }
);
function call() {
dataSource == null ? void 0 : dataSource.load({ ...props.params, pageNo, pageSize: props.pageSize }).then((res) => {
var _a;
const data = ((_a = res == null ? void 0 : res.data) == null ? void 0 : _a.records) || (res == null ? void 0 : res.data) || res || [];
tableData.value.push(...data);
if (data.length < props.pageSize) {
if (props.isFixedHead) {
finished.value = true;
} else {
listFinished.value = true;
}
}
loading.value = false;
initLoading.value = false;
setTimeout(() => {
nextTick(() => {
checkHasScroll();
});
}, 300);
setTimeout(() => {
initSwipeCells();
}, 500);
}).catch((err) => {
console.error(err);
if (props.isFixedHead) {
error.value = isDesigner ? false : true;
} else {
listError.value = isDesigner ? false : true;
}
loading.value = false;
initLoading.value = false;
});
}
function errReload() {
call();
}
function checkHasScroll() {
if (!props.isFixedHead) {
return;
}
if (finished.value) {
return;
}
const scrollHeight = gridRef.value.getEl().querySelector(".vxe-table--body").scrollHeight;
const clientHeight = gridRef.value.getEl().querySelector(".vxe-table--body-inner-wrapper").clientHeight;
if (scrollHeight < clientHeight) {
onScrollLoads({ direction: "bottom" });
}
}
function onLoad() {
console.log("onload");
if (!props.isFixedHead) {
loading.value = true;
pageNo++;
if (pageNo == 1) {
initLoading.value = false;
} else {
loading.value = true;
}
listError.value = false;
call();
}
}
return (_ctx, _cache) => {
const _component_van_list = List;
const _component_van_cell_group = CellGroup;
return openBlock(), createBlock(_component_van_cell_group, {
class: normalizeClass(["mTableContent", {
notAutoHeight: !__props.autoHeight,
isShadow: __props.isCard && __props.isShadow,
isCard: __props.isCard
}]),
style: normalizeStyle("height:" + unref(compHeight)),
ref_key: "listRef",
ref: listRef,
inset: __props.isCard
}, {
default: withCtx(() => [
createVNode(_component_van_list, {
class: normalizeClass({ fixedHead: __props.isFixedHead }),
loading: unref(loading),
"onUpdate:loading": _cache[0] || (_cache[0] = ($event) => isRef(loading) ? loading.value = $event : null),
error: unref(listError),
"onUpdate:error": _cache[1] || (_cache[1] = ($event) => isRef(listError) ? listError.value = $event : null),
finished: unref(listFinished),
disabled: !__props.scrollLoad || __props.isFixedHead,
offset: 0,
"finished-text": "没有更多了",
"error-text": "请求失败，点击重新加载",
onLoad
}, {
default: withCtx(() => [
createVNode(unref(VxeGrid), {
ref_key: "gridRef",
ref: gridRef,
class: "fec-table",
width: "100%",
"auto-resize": "",
data: unref(tableData),
columns: unref(columnOptions),
size: __props.size,
headerAlign: "center",
footerAlign: "center",
align: "center",
border: __props.border,
round: __props.round || __props.isCard,
stripe: __props.stripe,
height: __props.isFixedHead ? unref(compHeight) : "",
minHeight: 200,
loading: unref(initLoading),
showHeader: __props.showHeader,
onScrollBoundary: onScrollLoads,
virtualYConfig,
onCellClick: cellClickEvent
}, createSlots({
loading: withCtx(() => [
_cache[2] || (_cache[2] = createElementVNode("div", {
class: "custom-loading van-loading van-loading--circular van-list__loading-icon",
"aria-live": "polite",
"aria-busy": "true"
}, [
createElementVNode("span", { class: "van-loading__spinner van-loading__spinner--circular" }, [
createElementVNode("svg", {
class: "van-loading__circular",
viewBox: "25 25 50 50"
}, [
createElementVNode("circle", {
cx: "50",
cy: "50",
r: "20",
fill: "none"
})
])
]),
createElementVNode("span", { class: "van-loading__text" }, "加载中...")
], -1))
]),
bottom: withCtx(() => [
__props.scrollLoad && __props.isFixedHead ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
unref(finished) ? (openBlock(), createElementBlock("div", _hoisted_1, " 没有更多了 ")) : createCommentVNode("", true),
unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_2, _cache[3] || (_cache[3] = [
createElementVNode("div", {
class: "van-loading van-loading--circular van-list__loading-icon",
"aria-live": "polite",
"aria-busy": "true"
}, [
createElementVNode("span", { class: "van-loading__spinner van-loading__spinner--circular" }, [
createElementVNode("svg", {
class: "van-loading__circular",
viewBox: "25 25 50 50"
}, [
createElementVNode("circle", {
cx: "50",
cy: "50",
r: "20",
fill: "none"
})
])
]),
createElementVNode("span", { class: "van-loading__text" }, "加载中...")
], -1)
]))) : createCommentVNode("", true),
unref(error) ? (openBlock(), createElementBlock("div", {
key: 2,
class: "van-list__error-text",
onClick: errReload
}, " 请求失败，点击重新加载 ")) : createCommentVNode("", true)
], 64)) : createCommentVNode("", true)
]),
_: 2
}, [
renderList(_ctx.$slots, (item, key) => {
return {
name: key,
fn: withCtx(() => [
key != "bottom" ? renderSlot(_ctx.$slots, key, { key: 0 }, void 0, true) : createCommentVNode("", true)
])
};
})
]), 1032, ["data", "columns", "size", "border", "round", "stripe", "height", "loading", "showHeader"])
]),
_: 3
}, 8, ["class", "loading", "error", "finished", "disabled"])
]),
_: 3
}, 8, ["class", "style", "inset"]);
};
}
};
const _Table = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-82cfdaef"]]);
export {
_Table as default
};