@fmdevui/fm-dev
Version:
Page level components developed based on Element Plus.
274 lines (269 loc) • 11.2 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var svg = require('@element-plus/icons-vue');
var index = require('../../../api/base/index.js');
const _hoisted_1 = { style: { "padding": "5px" } };
const _hoisted_2 = { style: { "display": "flex", "align-items": "center", "gap": "8px", "flex-wrap": "nowrap", "overflow": "hidden" } };
const _hoisted_3 = { style: { "flex": "1 1 200px", "min-width": "0", "overflow": "hidden" } };
const _hoisted_4 = { style: { "display": "flex", "align-items": "center", "flex-shrink": "0", "white-space": "nowrap" } };
const _hoisted_5 = { style: { "margin-bottom": "45px" } };
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "FmTree"
},
__name: "index",
props: /* @__PURE__ */ vue.mergeModels({
checkStrictly: { type: Boolean, default: true },
/**
* api service name
*/
apiService: {
type: String,
default: "planOrder"
},
/**
* api service 下的方法
*/
apiAction: {
type: String,
default: "autoQuerySearch"
},
paras: {
type: Object,
default: null
},
nodeKey: {
type: String,
default: "id"
},
defaultProps: {
type: Object,
default: { children: "children", label: "name" }
},
placeholder: {
type: String,
default: "\u7C7B\u578B\u540D\u79F0"
}
}, {
"modelValue": {},
"modelModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["node-click"], ["update:modelValue"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const modeValue = vue.useModel(__props, "modelValue");
const filterText = vue.ref("");
const treeRef = vue.ref();
const state = vue.reactive({
loading: false,
folderData: [],
isShowCheckbox: false,
strictly: false
});
vue.onMounted(async () => {
await fetchTreeData();
});
vue.watch(filterText, (val) => {
treeRef.value.filter(val);
});
const fetchTreeData = async (showLoading = true) => {
if (showLoading) state.loading = true;
var res = await index.useBaseApi(props.apiService).get(props.paras, props.apiAction);
state.folderData = res.data.result ?? [];
if (showLoading) state.loading = false;
const rtreeData = res.data.result ?? [];
modeValue.value = rtreeData.length > 0 ? rtreeData[0] : { id: 0, name: "" };
return rtreeData;
};
const getCheckedKeys = () => {
return treeRef.value.getCheckedKeys();
};
const filterNode = (value, data) => {
if (!value) return true;
return data.name.includes(value);
};
const handleCommand = async (command) => {
if ("expandAll" == command) {
for (let i = 0; i < treeRef.value.store._getAllNodes().length; i++) {
treeRef.value.store._getAllNodes()[i].expanded = true;
}
} else if ("collapseAll" == command) {
for (let i = 0; i < treeRef.value.store._getAllNodes().length; i++) {
treeRef.value.store._getAllNodes()[i].expanded = false;
}
} else if ("refresh" == command) {
fetchTreeData();
} else if ("rootNode" == command) {
treeRef.value?.setCurrentKey();
modeValue.value = { id: 0, name: "" };
emit("node-click", { id: 0, name: "" });
}
};
const emit = __emit;
const nodeClick = (node) => {
modeValue.value = { id: node.id, name: node.name };
emit("node-click", { id: node.id, name: node.name });
};
const setCurrentKey = (key, shouldAutoExpandParent) => {
treeRef.value?.setCurrentKey(key, shouldAutoExpandParent);
};
__expose({ fetchTreeData, getCheckedKeys, setCurrentKey });
return (_ctx, _cache) => {
const _component_el_input = vue.resolveComponent("el-input");
const _component_el_checkbox = vue.resolveComponent("el-checkbox");
const _component_el_icon = vue.resolveComponent("el-icon");
const _component_el_button = vue.resolveComponent("el-button");
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");
const _component_el_tree = vue.resolveComponent("el-tree");
const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
const _component_el_card = vue.resolveComponent("el-card");
const _directive_loading = vue.resolveDirective("loading");
return vue.openBlock(), vue.createBlock(_component_el_card, {
shadow: "hover",
"body-style": "height:100%;overflow:auto;padding:5px;width:100%;",
style: { "height": "100%" }
}, {
header: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_1, [
vue.createElementVNode("div", _hoisted_2, [
vue.createElementVNode("div", _hoisted_3, [
vue.createVNode(_component_el_input, {
"prefix-icon": vue.unref(svg.Search),
modelValue: filterText.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filterText.value = $event),
modelModifiers: { lazy: true },
clearable: "",
placeholder: __props.placeholder
}, null, 8, ["prefix-icon", "modelValue", "placeholder"])
]),
vue.createElementVNode("div", _hoisted_4, [
!props.checkStrictly && state.isShowCheckbox ? (vue.openBlock(), vue.createBlock(_component_el_checkbox, {
key: 0,
modelValue: state.strictly,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => state.strictly = $event),
label: "\u8054\u52A8",
style: { "margin-left": "8px" },
border: ""
}, null, 8, ["modelValue"])) : vue.createCommentVNode("v-if", true),
vue.createVNode(_component_el_dropdown, { onCommand: handleCommand }, {
dropdown: vue.withCtx(() => [
vue.createVNode(_component_el_dropdown_menu, null, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_dropdown_item, { command: "expandAll" }, {
default: vue.withCtx(() => [..._cache[2] || (_cache[2] = [
vue.createTextVNode(
"\u5168\u90E8\u5C55\u5F00",
-1
/* CACHED */
)
])]),
_: 1
/* STABLE */
}),
vue.createVNode(_component_el_dropdown_item, { command: "collapseAll" }, {
default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
vue.createTextVNode(
"\u5168\u90E8\u6298\u53E0",
-1
/* CACHED */
)
])]),
_: 1
/* STABLE */
}),
vue.createVNode(_component_el_dropdown_item, { command: "rootNode" }, {
default: vue.withCtx(() => [..._cache[4] || (_cache[4] = [
vue.createTextVNode(
"\u6839\u8282\u70B9",
-1
/* CACHED */
)
])]),
_: 1
/* STABLE */
}),
vue.createVNode(_component_el_dropdown_item, { command: "refresh" }, {
default: vue.withCtx(() => [..._cache[5] || (_cache[5] = [
vue.createTextVNode(
"\u5237\u65B0",
-1
/* CACHED */
)
])]),
_: 1
/* STABLE */
})
]),
_: 1
/* STABLE */
})
]),
default: vue.withCtx(() => [
vue.createVNode(_component_el_button, { style: { "margin-left": "8px", "width": "34px" } }, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_icon, { class: "el-icon--center" }, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(svg.MoreFilled))
]),
_: 1
/* STABLE */
})
]),
_: 1
/* STABLE */
})
]),
_: 1
/* STABLE */
})
])
])
])
]),
default: vue.withCtx(() => [
vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
vue.createVNode(_component_el_scrollbar, null, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_tree, {
ref_key: "treeRef",
ref: treeRef,
class: "filter-tree",
data: state.folderData,
"node-key": __props.nodeKey,
props: __props.defaultProps,
"filter-node-method": filterNode,
onNodeClick: nodeClick,
"show-checkbox": state.isShowCheckbox,
"default-expand-all": "",
"highlight-current": "",
"check-strictly": !state.strictly
}, {
default: vue.withCtx(({ node }) => [
vue.createCommentVNode(' <el-icon v-if="node.level < 4" size="16" style="margin-right: 3px; display: inline; vertical-align: middle"><ele-FolderOpened /></el-icon>\r\n <el-icon v-else size="16" style="margin-right: 3px; display: inline; vertical-align: middle"><ele-Folder /></el-icon> '),
vue.createTextVNode(
" " + vue.toDisplayString(node.label),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["data", "node-key", "props", "show-checkbox", "check-strictly"])
]),
_: 1
/* STABLE */
})
])), [
[_directive_loading, state.loading]
])
]),
_: 1
/* STABLE */
});
};
}
});
exports.default = _sfc_main;