yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
280 lines (279 loc) • 9.05 kB
JavaScript
;
const vue = require("vue");
const elementPlus = require("element-plus");
const icons = require("../../icons");
const core = require("../../utils/core");
const EleTooltip = require("../../ele-tooltip/index");
const EleTool = require("../../ele-tool/index");
const util = require("../util");
const ToolColumnList = require("./tool-column-list");
const _sfc_main = vue.defineComponent({
name: "ToolColumn",
components: {
ElCheckbox: elementPlus.ElCheckbox,
ElIcon: elementPlus.ElIcon,
SettingOutlined: icons.SettingOutlined,
EleTooltip,
EleTool,
ToolColumnList
},
props: {
/** 提示位置 */
placement: String,
/** 表格国际化 */
locale: {
type: Object,
required: true
},
/** 列数据 */
columns: Array,
/** 是否开启列拖拽排序 */
sortable: Boolean,
/** 是否开启开关固定列 */
allowFixed: Boolean,
/** 列配置缓存本地的名称 */
cacheKey: String
},
emits: {
"update:columns": (_columns, _tableColumns, _isReset) => true
},
setup(props, { emit }) {
const toolRef = vue.ref(null);
const colItems = vue.ref([]);
const isCheckAll = vue.ref(false);
const isIndeterminate = vue.ref(false);
const initColItems = () => {
const { cols, checkAll, indeterminate } = util.getColItems(
props.columns,
props.locale,
util.columnsSettingFilter,
util.getCacheCols(util.getColsCacheKey(props.cacheKey))
);
colItems.value = cols;
isCheckAll.value = checkAll;
isIndeterminate.value = indeterminate;
};
const updateColumns = (isReset) => {
const colsWidth = util.getCacheColsWidth(props.cacheKey);
const columns = util.getCheckedColumns(
props.columns,
colItems.value,
props.sortable,
(item) => item.hideInSetting,
void 0,
false,
colsWidth
);
const tableColumns = util.getCheckedColumns(
props.columns,
colItems.value,
props.sortable,
(item) => item.hideInSetting,
void 0,
true,
colsWidth
);
emit("update:columns", columns, tableColumns, !!isReset);
};
const cacheSettingCols = () => {
if (props.cacheKey) {
localStorage.setItem(
util.getColsCacheKey(props.cacheKey),
JSON.stringify(colItems.value)
);
}
};
const cleanSettingCols = () => {
if (props.cacheKey) {
localStorage.removeItem(util.getColsCacheKey(props.cacheKey));
}
};
const handleCheckedChange = (item, checked) => {
let checkAll = true;
let indeterminate = false;
core.eachTree(colItems.value, (d) => {
if (d.uid === item.uid) {
d.checked = checked;
}
if (!d.checked && checkAll) {
checkAll = false;
}
if (d.checked && !indeterminate) {
indeterminate = true;
}
if (d.uid === item.uid && !checkAll && indeterminate) {
return false;
}
});
isCheckAll.value = colItems.value.length > 0 && checkAll;
isIndeterminate.value = !checkAll && indeterminate;
cacheSettingCols();
updateColumns();
};
const handleCheckAllChange = (checked) => {
isCheckAll.value = checked;
isIndeterminate.value = false;
core.eachTree(colItems.value, (d) => {
if (d.checked !== checked) {
d.checked = checked;
}
});
cacheSettingCols();
updateColumns();
};
const handleSortChange = (items, parent) => {
if (!parent) {
colItems.value = items;
} else {
core.eachTree(colItems.value, (d) => {
if (d.uid === parent.uid) {
d.children = items;
return false;
}
});
}
cacheSettingCols();
updateColumns();
};
const handleFixedLeft = (colItem) => {
core.eachTree(colItems.value, (d) => {
if (d.uid === colItem.uid) {
d.fixed = d.fixed === true || d.fixed === "left" ? false : "left";
return false;
}
});
cacheSettingCols();
updateColumns();
};
const handleFixedRight = (colItem) => {
core.eachTree(colItems.value, (d) => {
if (d.uid === colItem.uid) {
d.fixed = d.fixed === "right" ? false : "right";
return false;
}
});
cacheSettingCols();
updateColumns();
};
const handleFixedLeftTooltip = (el) => {
toolRef.value && toolRef.value.showTooltip(props.locale.columnFixedLeft ?? "", el);
};
const handleFixedRightTooltip = (el) => {
toolRef.value && toolRef.value.showTooltip(props.locale.columnFixedRight ?? "", el);
};
const handleReset = () => {
cleanSettingCols();
initColItems();
updateColumns(true);
};
vue.watch(
[() => props.columns, () => props.locale],
() => {
initColItems();
},
{ immediate: true, deep: true }
);
return {
toolRef,
colItems,
isCheckAll,
isIndeterminate,
handleCheckedChange,
handleCheckAllChange,
handleReset,
handleSortChange,
handleFixedLeft,
handleFixedRight,
handleFixedLeftTooltip,
handleFixedRightTooltip
};
}
});
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _hoisted_1 = { class: "ele-tool-column-header" };
const _hoisted_2 = { class: "ele-tool-column-label" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_SettingOutlined = vue.resolveComponent("SettingOutlined");
const _component_ElIcon = vue.resolveComponent("ElIcon");
const _component_ElCheckbox = vue.resolveComponent("ElCheckbox");
const _component_ToolColumnList = vue.resolveComponent("ToolColumnList");
const _component_EleTooltip = vue.resolveComponent("EleTooltip");
const _component_EleTool = vue.resolveComponent("EleTool");
return vue.openBlock(), vue.createBlock(_component_EleTool, {
ref: "toolRef",
title: _ctx.locale.columns,
placement: _ctx.placement,
clickHideTooltip: true
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_EleTooltip, {
trigger: "click",
placement: "bottom-end",
popperClass: "ele-tool-column-popover",
transition: "el-zoom-in-top",
gpuAcceleration: false,
effect: "light",
isPopover: true,
popperOptions: {
strategy: "fixed",
modifiers: [{ name: "offset", options: { offset: [20, 10] } }]
}
}, {
body: vue.withCtx(() => [
vue.createElementVNode("div", {
class: vue.normalizeClass([
"ele-popover-body",
"ele-tool-column",
{ "is-sortable": _ctx.sortable }
])
}, [
vue.createElementVNode("div", _hoisted_1, [
vue.createElementVNode("div", _hoisted_2, [
vue.createVNode(_component_ElCheckbox, {
label: _ctx.locale.columnTitle,
modelValue: _ctx.isCheckAll,
indeterminate: _ctx.isIndeterminate,
"onUpdate:modelValue": _ctx.handleCheckAllChange
}, null, 8, ["label", "modelValue", "indeterminate", "onUpdate:modelValue"])
]),
vue.createElementVNode("div", {
class: "ele-tool-column-link",
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleReset && _ctx.handleReset(...args))
}, vue.toDisplayString(_ctx.locale.columnReset), 1)
]),
_ctx.colItems.length ? (vue.openBlock(), vue.createBlock(_component_ToolColumnList, {
key: 0,
data: _ctx.colItems,
sortable: _ctx.sortable,
allowFixed: _ctx.allowFixed,
onSortChange: _ctx.handleSortChange,
onCheckedChange: _ctx.handleCheckedChange,
onFixedLeft: _ctx.handleFixedLeft,
onFixedRight: _ctx.handleFixedRight,
onFixedLeftTooltip: _ctx.handleFixedLeftTooltip,
onFixedRightTooltip: _ctx.handleFixedRightTooltip
}, null, 8, ["data", "sortable", "allowFixed", "onSortChange", "onCheckedChange", "onFixedLeft", "onFixedRight", "onFixedLeftTooltip", "onFixedRightTooltip"])) : vue.createCommentVNode("", true)
], 2)
]),
default: vue.withCtx(() => [
vue.createVNode(_component_ElIcon, null, {
default: vue.withCtx(() => [
vue.createVNode(_component_SettingOutlined)
]),
_: 1
})
]),
_: 1
})
]),
_: 1
}, 8, ["title", "placement"]);
}
const toolColumn = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = toolColumn;