yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
326 lines (325 loc) • 14.1 kB
JavaScript
;
const vue = require("vue");
const icons = require("../../icons");
const objectUtils = require("yuang-framework-ui-common/lib/utils/objectUtils");
const iconsVue = require("@element-plus/icons-vue");
const uimsOrganization = require("yuang-framework-ui-common/lib/hooks/uims/uimsOrganization");
const uuidUtils = require("yuang-framework-ui-common/lib/utils/uuidUtils");
const httpConfig = require("yuang-framework-ui-common/lib/config/httpConfig");
const _hoisted_1 = { style: { "padding": "0 16px 12px 0" } };
const _hoisted_2 = { class: "yu-dialog-tag" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{ name: "UimsUserV2" },
__name: "organization-dialog",
props: /* @__PURE__ */ vue.mergeModels({
param: {}
}, {
"modelValue": { type: Boolean },
"modelModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["change"], ["update:modelValue"]),
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const isOpenDialog = vue.useModel(__props, "modelValue");
const splitRef = vue.ref(null);
const treeRef = vue.ref(null);
const treeId = vue.ref(`tree-${uuidUtils.getShortUuid()}`);
const isLoading = vue.ref(true);
const isShowTree = vue.ref(true);
const selections = vue.ref([]);
const checkedKeys = vue.ref([]);
const orgName = vue.ref("");
vue.onMounted(async () => {
vue.nextTick(() => {
const infoList = props.param.initList;
for (let index in infoList) {
let info = infoList[index];
selections.value.push({
id: info.id,
code: info.code,
name: info.name
});
checkedKeys.value.push(info.id);
uimsOrganization.handleUimsOrganizationTreeDefaultExpandNode({ id: info.id, treeId: treeId.value });
}
});
});
const loadTreeNode = async (node, resolve) => {
var _a, _b;
let data = {};
if (!queryCondition) {
data = { parentIdForEqual: ((_a = node == null ? void 0 : node.data) == null ? void 0 : _a.id) || "0" };
} else {
data = objectUtils.deepClone(queryCondition);
data.parentId = ((_b = node == null ? void 0 : node.data) == null ? void 0 : _b.id) || "0";
}
if (node.level == 0) {
isLoading.value = true;
}
const res = await httpConfig.http.post(`/uims-api/admin/uims-organization/selectPage`, data);
if (node.level == 0) {
isLoading.value = false;
}
let listData = res.data.data.records;
listData.forEach((organization) => {
organization.isLeaf = !organization.isHasChildren;
});
vue.nextTick(() => {
if (listData.length == 1 && listData[0].isHasChildren) {
vue.nextTick(() => {
const nodeList = document.querySelectorAll(`#${treeId.value}.el-tree [data-key='${listData[0].id}'] .el-tree-node__expand-icon`);
for (let i = 0; i < nodeList.length; i++) {
if (!nodeList[i].classList.contains("expanded")) {
nodeList[i] && nodeList[i].click();
} else {
if (queryCondition) {
queryCondition.parentId = listData[0].id || "0";
queryCondition.levelNum = listData[0].levelNum + 1;
httpConfig.http.post(`/uims-api/admin/uims-organization/selectPage`, queryCondition).then((res2) => {
var _a2;
(_a2 = treeRef == null ? void 0 : treeRef.value) == null ? void 0 : _a2.updateKeyChildren(queryCondition == null ? void 0 : queryCondition.parentId, res2.data.data.records);
});
}
}
}
});
}
});
return resolve(listData);
};
const handleCheck = (data, checkedData, checked) => {
if (props.param.isMultiple) {
return;
}
if (typeof checked == "undefined") {
checked = false;
let checkedKeys2 = checkedData.checkedKeys;
checkedKeys2.forEach((id) => {
if (data.id == id) {
checked = true;
} else {
treeRef.value.setChecked(id, false, false);
}
});
}
selections.value.forEach((item) => {
handleDeleteTag(item);
});
if (checked) {
selections.value.push({
id: data.id,
code: data.code,
name: data.name
});
treeRef.value.setChecked(data.id, checked, false);
}
};
const handleCheckChange = (data, checked, indeterminate) => {
if (!props.param.isMultiple) {
return;
}
selections.value = selections.value.filter((item) => {
return item.id !== data.id;
});
if (checked) {
selections.value.push({
id: data.id,
code: data.code,
name: data.name
});
treeRef.value.setChecked(data.id, checked, false);
}
};
const handleNodeClick = (row, node) => {
let checked = !node.checked;
if (!props.param.isMultiple) {
handleCheck(row, { checkedKeys: [row.id] }, checked);
if (checked) {
treeRef.value.setChecked(row.id, checked, false);
}
} else {
handleCheckChange(row, checked);
treeRef.value.setChecked(row.id, checked, false);
}
};
let queryCondition = null;
const initQueryPage = async () => {
queryCondition = orgName.value ? { queryForMode: "treePart", parentIdForEqual: "0", nameForLike: orgName.value } : null;
reloadTree();
};
const reloadTree = () => {
isShowTree.value = false;
vue.nextTick(() => {
isShowTree.value = true;
});
};
const handleDeleteTag = (item) => {
selections.value = selections.value.filter((organization) => organization.code !== item.code);
treeRef.value.setChecked(item.id, false, false);
};
const handleCancel = () => {
isOpenDialog.value = false;
};
const handleSure = () => {
handleCancel();
emit("change", selections.value);
};
return (_ctx, _cache) => {
const _component_el_input = vue.resolveComponent("el-input");
const _component_el_icon = vue.resolveComponent("el-icon");
const _component_el_tree = vue.resolveComponent("el-tree");
const _component_ele_loading = vue.resolveComponent("ele-loading");
const _component_el_tag = vue.resolveComponent("el-tag");
const _component_ele_split_panel = vue.resolveComponent("ele-split-panel");
const _component_ele_card = vue.resolveComponent("ele-card");
const _component_ele_page = vue.resolveComponent("ele-page");
const _component_el_button = vue.resolveComponent("el-button");
const _component_ele_dialog = vue.resolveComponent("ele-dialog");
return vue.openBlock(), vue.createBlock(_component_ele_dialog, {
form: "",
width: "50%",
modelValue: isOpenDialog.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isOpenDialog.value = $event),
title: "选择机构",
class: "yu-big-dialog"
}, {
footer: vue.withCtx(() => [
vue.createVNode(_component_el_button, {
icon: vue.unref(iconsVue.Close),
onClick: handleCancel
}, {
default: vue.withCtx(() => _cache[2] || (_cache[2] = [
vue.createTextVNode("取消")
])),
_: 1,
__: [2]
}, 8, ["icon"]),
vue.createVNode(_component_el_button, {
type: "primary",
icon: vue.unref(iconsVue.Check),
loading: isLoading.value,
onClick: handleSure
}, {
default: vue.withCtx(() => _cache[3] || (_cache[3] = [
vue.createTextVNode(" 确认 ")
])),
_: 1,
__: [3]
}, 8, ["icon", "loading"])
]),
default: vue.withCtx(() => [
vue.createVNode(_component_ele_page, {
"flex-table": "",
"multi-card": false,
"hide-footer": "",
style: { "min-height": "600px", "padding": "0px !important" }
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_ele_card, {
"flex-table": "",
"body-style": { padding: "0 0 0 16px", overflow: "hidden" }
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_ele_split_panel, {
ref_key: "splitRef",
ref: splitRef,
"flex-table": "",
size: "256px",
"allow-collapse": "",
"custom-style": { borderWidth: "0 1px 0 0", padding: "16px 0" },
"body-style": { padding: "16px 16px 0 0", overflow: "hidden" },
style: { height: "100%", overflow: "visible" }
}, {
body: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_2, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(selections.value, (item, index) => {
return vue.openBlock(), vue.createBlock(_component_el_tag, {
type: "success",
size: "large",
"disable-transitions": true,
closable: "",
key: index,
onClick: ($event) => handleDeleteTag(item),
onClose: ($event) => handleDeleteTag(item)
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(item.name), 1)
]),
_: 2
}, 1032, ["onClick", "onClose"]);
}), 128))
])
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_1, [
vue.createVNode(_component_el_input, {
modelValue: orgName.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => orgName.value = $event),
placeholder: "输入机构名称后按回车搜索",
"prefix-icon": vue.unref(icons.SearchOutlined),
clearable: "",
maxlength: 20,
onKeyup: vue.withKeys(initQueryPage, ["enter"]),
onClear: initQueryPage
}, null, 8, ["modelValue", "prefix-icon"])
]),
vue.createVNode(_component_ele_loading, {
loading: isLoading.value,
style: { flex: 1, paddingRight: "16px", overflow: "auto" }
}, {
default: vue.withCtx(() => [
isShowTree.value ? (vue.openBlock(), vue.createBlock(_component_el_tree, {
key: 0,
ref_key: "treeRef",
ref: treeRef,
id: treeId.value,
"node-key": "id",
lazy: "",
load: loadTreeNode,
"show-checkbox": "",
"check-strictly": true,
"highlight-current": "",
props: { label: "name", children: "children", isLeaf: "isLeaf" },
"default-checked-keys": checkedKeys.value,
"expand-on-click-node": false,
style: { "--ele-tree-item-height": "34px" },
onCheck: handleCheck,
onCheckChange: handleCheckChange,
onNodeClick: handleNodeClick
}, {
default: vue.withCtx(({ data }) => [
vue.createElementVNode("span", null, [
vue.createVNode(_component_el_icon, {
size: 15,
style: { "margin-right": "8px", "vertical-align": "-2px" }
}, {
default: vue.withCtx(() => [
data.parentId == "0" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(icons.ClusterOutlined)), { key: 0 })) : data.type == "org" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(icons.OrganizationOrg)), { key: 1 })) : data.type == "unit" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(icons.OrganizationUnit)), { key: 2 })) : data.type == "dept" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(icons.OrganizationDept)), { key: 3 })) : vue.createCommentVNode("", true)
]),
_: 2
}, 1024),
vue.createElementVNode("span", null, vue.toDisplayString(data.name), 1)
])
]),
_: 1
}, 8, ["id", "default-checked-keys"])) : vue.createCommentVNode("", true)
]),
_: 1
}, 8, ["loading"])
]),
_: 1
}, 512)
]),
_: 1
})
]),
_: 1
})
]),
_: 1
}, 8, ["modelValue"]);
};
}
});
module.exports = _sfc_main;