@wocwin/t-ui-plus
Version:
Page level components developed based on Element Plus.
201 lines (196 loc) • 7.19 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
const _hoisted_1 = {
key: 0,
class: "title"
};
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "ColumnSet"
},
__name: "ColumnSet",
props: {
columns: { default: () => [] },
title: { default: "" },
name: { default: "" },
columnSetBind: { default: () => ({}) }
},
emits: ["columnSetting"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const treeRef = vue.ref();
const $attrs = vue.useAttrs();
const columnBind = vue.computed(() => {
const columnSetBind = { btnTxt: "\u5217\u8BBE\u7F6E", title: "\u5217\u8BBE\u7F6E", ...props.columnSetBind };
return { size: "default", icon: "Setting", isShowTitle: true, ...$attrs, ...columnSetBind };
});
const emits = __emit;
const state = vue.reactive({
columnSet: []
});
const defaultCheckedKeys = vue.ref([]);
const getColumnSetCache = () => {
let value = localStorage.getItem(`t-ui-plus:TTable.columnSet-${props.name || props.title}`) || "[]";
let columnOption = initColumnSet();
let valueArr = JSON.parse(value) || [];
columnOption.forEach((item) => {
let findEle = valueArr.find(
(ele) => ele.label === item.label && ele.prop === item.prop
);
item.hidden = findEle ? findEle.hidden : false;
});
value = JSON.stringify(valueArr.length ? valueArr : columnOption);
return value ? JSON.parse(value) : initColumnSet();
};
const initColumnSet = () => {
return props.columns.map((col) => ({
label: col.label,
prop: col.prop,
checkBoxDisabled: false,
hidden: false
}));
};
vue.onMounted(() => {
state.columnSet = getColumnSetCache();
defaultCheckedKeys.value = state.columnSet.filter((c) => !c.hidden).map((c) => c.prop);
emits("columnSetting", state.columnSet);
});
vue.watch(
() => state.columnSet,
(val) => {
emits("columnSetting", val);
localStorage.setItem(
`t-ui-plus:TTable.columnSet-${props.name || props.title}`,
JSON.stringify(val)
);
defaultCheckedKeys.value = state.columnSet.filter((c) => !c.hidden).map((c) => c.prop);
},
{ deep: true }
);
const reSetColumnSet = () => {
let value = localStorage.getItem(`t-ui-plus:TTable.columnSet-${props.name || props.title}`);
state.columnSet = JSON.parse(value);
defaultCheckedKeys.value = state.columnSet.filter((c) => !c.hidden).map((c) => c.prop);
emits("columnSetting", state.columnSet);
};
const onTreeCheck = () => {
var _a;
const checkedKeys = ((_a = treeRef.value) == null ? void 0 : _a.getCheckedKeys()) || [];
state.columnSet.forEach((col) => {
col.hidden = !checkedKeys.includes(col.prop);
});
const visibleCols = state.columnSet.filter((col) => !col.hidden);
if (visibleCols.length < 2) {
visibleCols.forEach((col) => col.checkBoxDisabled = true);
} else {
state.columnSet.forEach((col) => col.checkBoxDisabled = false);
}
};
const allowDrag = () => {
return true;
};
const allowDrop = (draggingNode, dropNode, type) => {
if (draggingNode.level !== dropNode.level) {
return false;
}
if (type !== "prev" && type !== "next") {
return false;
}
return true;
};
const handleDrop = (draggingNode, dropNode, dropType, ev) => {
if (dropType === "inner") {
ev.preventDefault();
return;
}
const draggingIndex = state.columnSet.findIndex((col) => col.prop === draggingNode.data.prop);
const dropIndex = state.columnSet.findIndex((col) => col.prop === dropNode.data.prop);
if (draggingIndex === -1 || dropIndex === -1) return;
const item = state.columnSet.splice(draggingIndex, 1)[0];
if (dropType === "before") {
const insertIndex = draggingIndex < dropIndex ? dropIndex - 1 : dropIndex;
state.columnSet.splice(insertIndex, 0, item);
} else if (dropType === "after") {
state.columnSet.splice(dropIndex + 1, 0, item);
}
};
__expose({
reSetColumnSet
});
return (_ctx, _cache) => {
const _component_el_button = vue.resolveComponent("el-button");
const _component_el_tree = vue.resolveComponent("el-tree");
const _component_el_dropdown_item = vue.resolveComponent("el-dropdown-item");
const _component_el_dropdown_menu = vue.resolveComponent("el-dropdown-menu");
const _component_el_dropdown = vue.resolveComponent("el-dropdown");
return vue.openBlock(), vue.createBlock(_component_el_dropdown, {
trigger: "click",
"popper-class": "column_set"
}, {
dropdown: vue.withCtx(() => [
columnBind.value.isShowTitle ? (vue.openBlock(), vue.createElementBlock(
"div",
_hoisted_1,
vue.toDisplayString(columnBind.value.title || "\u5217\u8BBE\u7F6E"),
1
/* TEXT */
)) : vue.createCommentVNode("v-if", true),
vue.createVNode(_component_el_dropdown_menu, null, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_dropdown_item, {
divided: columnBind.value.isShowTitle
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_tree, {
ref_key: "treeRef",
ref: treeRef,
class: "t_table_column_setting_dropdown",
data: state.columnSet,
"node-key": "prop",
props: { label: "label", children: "children", disabled: "checkBoxDisabled" },
"show-checkbox": "",
draggable: "",
"default-expand-all": "",
"check-strictly": "",
"allow-drag": allowDrag,
"allow-drop": allowDrop,
"default-checked-keys": defaultCheckedKeys.value,
onCheck: onTreeCheck,
onNodeDrop: handleDrop
}, null, 8, ["data", "default-checked-keys"])
]),
_: 1
/* STABLE */
}, 8, ["divided"])
]),
_: 1
/* STABLE */
})
]),
default: vue.withCtx(() => [
vue.createVNode(
_component_el_button,
vue.normalizeProps(vue.guardReactiveProps(columnBind.value)),
{
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(columnBind.value.btnTxt || "\u5217\u8BBE\u7F6E"),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
},
16
/* FULL_PROPS */
)
]),
_: 1
/* STABLE */
});
};
}
});
exports.default = _sfc_main;