t-ui-plus
Version:
Page level components developed based on Element Plus.
186 lines (183 loc) • 6.58 kB
JavaScript
import { defineComponent, useAttrs, computed, reactive, onMounted, watch, resolveComponent, createBlock, openBlock, withCtx, createVNode, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, createElementBlock, createCommentVNode, unref, withModifiers } from 'vue';
import Draggable from '../../../../node_modules/.pnpm/vuedraggable@2.24.3/node_modules/vuedraggable/dist/vuedraggable.umd.mjs';
const _hoisted_1 = {
key: 0,
class: "title"
};
var _sfc_main = /* @__PURE__ */ 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 $attrs = useAttrs();
const columnBind = computed(() => {
const columnSetBind = { btnTxt: "\u5217\u8BBE\u7F6E", title: "\u5217\u8BBE\u7F6E", ...props.columnSetBind };
return { size: "default", icon: "Setting", isShowTitle: true, ...$attrs, ...columnSetBind };
});
const getColumnSetCache = () => {
let value = localStorage.getItem(`t-ui-plus:TTable.columnSet-${props.name || props.title}`) || "[]";
let columnOption = initColumnSet();
let valueArr = JSON.parse(value) || [];
columnOption.map((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) => {
return {
label: col.label,
prop: col.prop,
checkBoxDisabled: false,
hidden: false
};
});
};
const emits = __emit;
const state = reactive({
columnSet: []
});
onMounted(() => {
state.columnSet = getColumnSetCache();
emits("columnSetting", state.columnSet);
});
watch(
() => state.columnSet,
(val) => {
emits("columnSetting", val);
localStorage.setItem(
`t-ui-plus:TTable.columnSet-${props.name || props.title}`,
JSON.stringify(val)
);
},
{ deep: true }
);
const reSetColumnSet = () => {
let value = localStorage.getItem(`t-ui-plus:TTable.columnSet-${props.name || props.title}`);
state.columnSet = JSON.parse(value);
emits("columnSetting", state.columnSet);
};
const checkChanged = (checked, index) => {
state.columnSet[index].hidden = !checked;
let obj = {};
state.columnSet.map((val) => {
val.hidden in obj || (obj[val.hidden] = []);
obj[val.hidden].push(val.hidden);
});
if (obj.false.length < 2) {
state.columnSet.map((val, key) => {
if (!val.hidden) {
state.columnSet[key].checkBoxDisabled = true;
}
});
} else {
state.columnSet.map((val, key) => {
if (!val.hidden) {
state.columnSet[key].checkBoxDisabled = false;
}
});
}
};
__expose({
reSetColumnSet
});
return (_ctx, _cache) => {
const _component_el_button = resolveComponent("el-button");
const _component_el_checkbox = resolveComponent("el-checkbox");
const _component_el_dropdown_item = resolveComponent("el-dropdown-item");
const _component_el_dropdown_menu = resolveComponent("el-dropdown-menu");
const _component_el_dropdown = resolveComponent("el-dropdown");
return openBlock(), createBlock(_component_el_dropdown, {
trigger: "click",
"popper-class": "column_set"
}, {
dropdown: withCtx(() => [
columnBind.value.isShowTitle ? (openBlock(), createElementBlock(
"div",
_hoisted_1,
toDisplayString(columnBind.value.title || "\u5217\u8BBE\u7F6E"),
1
/* TEXT */
)) : createCommentVNode("v-if", true),
createVNode(_component_el_dropdown_menu, null, {
default: withCtx(() => [
createVNode(_component_el_dropdown_item, {
divided: columnBind.value.isShowTitle
}, {
default: withCtx(() => [
createVNode(unref(Draggable), {
class: "t_table_column_setting_dropdown",
modelValue: state.columnSet,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => state.columnSet = $event),
"item-key": "prop"
}, {
item: withCtx(({ element, index }) => [
createVNode(_component_el_checkbox, {
checked: !element.hidden,
onClick: _cache[0] || (_cache[0] = withModifiers(() => {
}, ["stop"])),
disabled: element.checkBoxDisabled,
onChange: (checked) => checkChanged(checked, index)
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(element.label),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["checked", "disabled", "onChange"])
]),
_: 1
/* STABLE */
}, 8, ["modelValue"])
]),
_: 1
/* STABLE */
}, 8, ["divided"])
]),
_: 1
/* STABLE */
})
]),
default: withCtx(() => [
createVNode(
_component_el_button,
normalizeProps(guardReactiveProps(columnBind.value)),
{
default: withCtx(() => [
createTextVNode(
toDisplayString(columnBind.value.btnTxt || "\u5217\u8BBE\u7F6E"),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
},
16
/* FULL_PROPS */
)
]),
_: 1
/* STABLE */
});
};
}
});
export { _sfc_main as default };