yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
237 lines (236 loc) • 9.91 kB
JavaScript
;
const vue = require("vue");
const iconsVue = require("@element-plus/icons-vue");
const RoleList = require("./role-list");
const core = require("../../utils/core");
const httpConfig = require("yuang-framework-ui-common/lib/config/httpConfig");
const icons = require("../../icons");
const objectUtils = require("yuang-framework-ui-common/lib/utils/objectUtils");
const _hoisted_1 = { style: { "padding": "0 16px 12px 0" } };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{ name: "UimsRoleV2" },
__name: "role-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 treeData = vue.ref([]);
const roleListRef = vue.ref(null);
const isLoading = vue.ref(true);
const isShowTree = vue.ref(true);
const selectedApplication = vue.ref(null);
const applicationName = vue.ref("");
const selectionList = vue.ref([]);
vue.onMounted(() => {
selectionList.value = objectUtils.deepClone(props.param.initList ?? []);
});
const queryPage = async () => {
let data = { parentIdForEqual: "0", nameForLike: applicationName.value };
isLoading.value = true;
const res = await httpConfig.http.post(`/uims-api/admin/uims-application/selectPage`, data);
isLoading.value = false;
const listData = [
{
id: "0",
name: "全部应用",
isHasChildren: true,
isLeaf: false,
levelNum: 0,
parentId: ""
},
...res.data.data.records
];
treeData.value = core.toTree({
data: listData,
idField: "id",
parentIdField: "parentId"
});
vue.nextTick(() => {
handleNodeClick(listData[0] || { id: "0" });
});
};
const handleNodeClick = (row) => {
var _a, _b;
if (row && row.id) {
selectedApplication.value = row;
(_b = (_a = treeRef.value) == null ? void 0 : _a.setCurrentKey) == null ? void 0 : _b.call(_a, row.id);
} else {
selectedApplication.value = null;
}
};
const initQueryPage = async () => {
applicationName.value ? { queryForMode: "treePart", parentIdForEqual: "0", nameForLike: applicationName.value } : null;
reloadTree();
};
const reloadTree = () => {
isShowTree.value = false;
vue.nextTick(() => {
isShowTree.value = true;
});
};
const handleCancel = () => {
isOpenDialog.value = false;
};
const handleSure = () => {
handleCancel();
emit("change", selectionList.value);
};
queryPage();
vue.watch(
() => selectionList.value,
() => {
console.log("selectionList.value", selectionList.value);
},
{ deep: true }
);
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_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: "85%",
modelValue: isOpenDialog.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($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[3] || (_cache[3] = [
vue.createTextVNode("取消")
])),
_: 1,
__: [3]
}, 8, ["icon"]),
vue.createVNode(_component_el_button, {
type: "primary",
icon: vue.unref(iconsVue.Check),
loading: isLoading.value,
onClick: handleSure
}, {
default: vue.withCtx(() => _cache[4] || (_cache[4] = [
vue.createTextVNode(" 确认 ")
])),
_: 1,
__: [4]
}, 8, ["icon", "loading"])
]),
default: vue.withCtx(() => [
vue.createVNode(_component_ele_page, {
"flex-table": "",
"multi-card": false,
"hide-footer": "",
style: { "min-height": "720px" }
}, {
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(() => [
selectedApplication.value && selectedApplication.value.id ? (vue.openBlock(), vue.createBlock(RoleList, {
key: 0,
ref_key: "roleListRef",
ref: roleListRef,
uimsApplication: selectedApplication.value,
param: props.param,
selectionList: selectionList.value,
"onUpdate:selectionList": _cache[1] || (_cache[1] = ($event) => selectionList.value = $event)
}, null, 8, ["uimsApplication", "param", "selectionList"])) : vue.createCommentVNode("", true)
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_1, [
vue.createVNode(_component_el_input, {
modelValue: applicationName.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => applicationName.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,
"node-key": "id",
data: treeData.value,
"highlight-current": "",
props: { label: "name", children: "children", isLeaf: "isLeaf" },
"expand-on-click-node": false,
style: { "--ele-tree-item-height": "34px" },
"default-expand-all": true,
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.id == "0" ? (vue.openBlock(), vue.createBlock(vue.unref(icons.ApplicationOutlined), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(iconsVue.Monitor), { key: 1 }))
]),
_: 2
}, 1024),
vue.createElementVNode("span", null, vue.toDisplayString(data.name), 1)
])
]),
_: 1
}, 8, ["data"])) : vue.createCommentVNode("", true)
]),
_: 1
}, 8, ["loading"])
]),
_: 1
}, 512)
]),
_: 1
})
]),
_: 1
})
]),
_: 1
}, 8, ["modelValue"]);
};
}
});
module.exports = _sfc_main;