tav-ui
Version:
409 lines (406 loc) • 15.2 kB
JavaScript
import { defineComponent, ref, reactive, provide, computed, nextTick, watch, toRefs, createTextVNode, resolveComponent, openBlock, createElementBlock, createBlock, withCtx, createVNode, withModifiers, toDisplayString, createElementVNode, Fragment, createCommentVNode } from 'vue';
import { Tooltip, Tag, Select, TreeSelect } from 'ant-design-vue';
import { pull, isEqual } from 'lodash-es';
import pinyin from 'js-pinyin';
import { TaButton } from '../../button/index2.mjs';
import { TaModal } from '../../modal/index2.mjs';
import { useModal } from '../../modal/src/hooks/useModal2.mjs';
import { useGlobalConfig } from '../../../hooks/global/useGlobalConfig2.mjs';
import '../../../locales/index2.mjs';
import '../../../utils/index2.mjs';
import MemberModal from './components/member-modal2.mjs';
import { memberSelectProps } from './types2.mjs';
import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
import { isNullOrUnDef } from '../../../utils/is2.mjs';
import { tavI18n } from '../../../locales/transfer2.mjs';
const _sfc_main = defineComponent({
name: "TaMemberSelect",
components: {
VNodes: (_, { attrs }) => {
return attrs.vnodes;
},
Tooltip,
Tag,
BasicModal: TaModal,
MemberModal,
Button: TaButton,
Select,
TreeSelect
},
props: memberSelectProps,
emits: ["change", "update:value", "blur"],
setup(props, { emit }) {
const memberSelectElRef = ref();
const userSelectRef = ref(null);
const state = reactive({
modalIsShow: false,
searchValue: "",
selectedData: [],
catchData: [],
userList: [],
orgList: [],
orgExpandedKey: [],
orgFileds: { label: "name", value: "id" }
});
provide("propsData", computed(() => props));
provide("userList", computed(() => state.userList));
provide("orgList", computed(() => state.orgList));
const globalConfig = useGlobalConfig("components");
const orgApi = globalConfig.value?.TaMemberSelect?.orgApi || props.orgApi;
const allUserList = globalConfig.value?.TaMemberSelect?.allUserList || [];
const userListApi = props.userListApi || globalConfig.value?.TaMemberSelect?.userListApi;
const [registerMemberModal, { openModal: openMemberModal, closeModal: closeMemberModal }] = useModal();
const showModal = () => {
if (props.type == "user") {
getUserList();
if (!props.noOrg) {
getOrgList();
}
}
if (props.type == "org") {
getOrgList();
}
if (userSelectRef.value) {
userSelectRef.value.blur();
}
setBaseData();
openMemberModal();
state.modalIsShow = true;
};
const hideModal = () => {
state.modalIsShow = false;
nextTick(() => {
closeMemberModal();
});
};
const getTrueUserList = (userList = []) => {
const list = userList.filter((v) => !props.ignoreUser.includes(v.id)).map((v) => {
const fullCharts = pinyin.getFullChars(v.name).toLowerCase();
const obj = { ...v, label: v.name, value: v.id, fullCharts };
if (!Reflect.has(obj, "disabled")) {
obj.disabled = props.useDisabledUser ? false : obj.status === 0;
}
return obj;
}).sort((a) => {
if (isNullOrUnDef(a.status)) {
return -1;
} else {
return a.status === 1 ? -1 : 1;
}
});
return list;
};
const getUserList = async () => {
if (Array.isArray(props.options)) {
state.userList = getTrueUserList(props.options);
} else {
userListApi(props.userListParams).then((res) => {
state.userList = getTrueUserList(res.data);
});
}
checkUserIsExist();
};
const getOrgList = () => {
orgApi({}).then((res) => {
state.orgList = res.data;
});
};
const modalChange = (value) => {
state.catchData = value;
};
const modalSubmit = () => {
const data = state.catchData;
const submit = () => {
state.selectedData[0] = data;
emitHandle();
hideModal();
};
if (props.modalSubmit) {
props.modalSubmit(data, submit);
} else {
submit();
}
};
const emitHandle = () => {
const userMap = allUserList.filter((v) => {
if (props.multiple) {
return state.selectedData[0].includes(v.id);
} else {
return state.selectedData[0] == v.id;
}
});
emit("update:value", state.selectedData[0]);
emit("change", state.selectedData[0], userMap);
};
const handleBlur = () => {
emit("blur", state.selectedData[0]);
};
const setBaseData = () => {
if (props.multiple) {
if (!Array.isArray(props.value)) {
console.warn("\u591A\u9009\u9ED8\u8BA4\u503C\u8BF7\u4F20\u5165\u6570\u7EC4");
state.selectedData = [[]];
} else {
state.selectedData = [[...props.value]];
checkUserIsExist();
}
} else {
state.selectedData = props.value ? [props.value] : [null];
checkUserIsExist();
}
};
const checkUserIsExist = () => {
if (props.multiple) {
state.selectedData[0].forEach((userId) => {
getUserItem(userId);
});
} else {
getUserItem(state.selectedData[0]);
}
function getUserItem(userId) {
if (!state.userList.some((v) => v.id == userId)) {
const item = allUserList.find((v) => v.id === userId);
if (item) {
state.userList.push(item);
}
}
}
};
const filterHandle = (keyword, user) => {
if (!keyword) {
return true;
} else {
return user.fullCharts.indexOf(keyword) > -1 || user.name.indexOf(keyword) > -1 || user.userOrgs[0]?.organizationName.indexOf(keyword) > -1;
}
};
const userShowMore = () => {
setTimeout(() => {
showModal();
}, 200);
};
const orgVisibleChange = () => {
};
const removeItem = (item) => {
pull(state.selectedData[0], item.id);
emitHandle();
};
watch(() => state.orgList, (newData) => {
if (props.multiple) {
state.orgExpandedKey = state.selectedData[0].length > 0 ? state.selectedData[0] : [newData[0].id];
} else {
state.orgExpandedKey = state.selectedData[0] ? state.selectedData : [newData[0].id];
}
}, {
deep: true
});
watch(() => props.ignoreUser, (a, b) => {
if (!isEqual(a, b)) {
getUserList();
}
});
watch(() => props.options, (data) => {
if (data) {
getUserList();
}
}, {
deep: true
});
watch(() => props.value, () => {
setBaseData();
});
const pageInit = () => {
setBaseData();
if (props.type == "user") {
if (props.noSelect) {
return;
}
getUserList();
} else {
getOrgList();
}
};
pageInit();
return {
...toRefs(state),
memberSelectElRef,
userSelectRef,
removeItem,
filterHandle,
tavI18n,
userShowMore,
orgVisibleChange,
showModal,
hideModal,
modalChange,
modalSubmit,
emitHandle,
handleBlur,
registerMemberModal
};
}
});
const _hoisted_1 = {
ref: "memberSelectElRef",
class: "ta-member-select"
};
const _hoisted_2 = { key: 0 };
const _hoisted_3 = { class: "ta-member-select-option-item" };
const _hoisted_4 = /* @__PURE__ */ createTextVNode(" - ");
const _hoisted_5 = ["title"];
const _hoisted_6 = { href: "javascript:;" };
const _hoisted_7 = { style: { "min-height": "360px" } };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_Tag = resolveComponent("Tag");
const _component_Tooltip = resolveComponent("Tooltip");
const _component_v_nodes = resolveComponent("v-nodes");
const _component_Select = resolveComponent("Select");
const _component_TreeSelect = resolveComponent("TreeSelect");
const _component_MemberModal = resolveComponent("MemberModal");
const _component_Button = resolveComponent("Button");
const _component_BasicModal = resolveComponent("BasicModal");
return openBlock(), createElementBlock("div", _hoisted_1, [
!_ctx.noSelect ? (openBlock(), createElementBlock("div", _hoisted_2, [
_ctx.type == "user" ? (openBlock(), createBlock(_component_Select, {
key: 0,
ref: "userSelectRef",
value: _ctx.selectedData[0],
"onUpdate:value": _cache[2] || (_cache[2] = ($event) => _ctx.selectedData[0] = $event),
"show-search": "",
"dropdown-class-name": "ta-member-select-option",
"option-filter-prop": "label",
"allow-clear": _ctx.allowClear,
options: _ctx.userList,
"filter-option": _ctx.filterHandle,
"max-tag-count": _ctx.maxTagCount,
"max-tag-placeholder": _ctx.maxTagPlaceholder,
disabled: _ctx.disabled,
placeholder: _ctx.placeholder,
mode: _ctx.multiple ? "multiple" : void 0,
autofocus: _ctx.autofocus,
"default-open": _ctx.defaultOpen,
"get-popup-container": _ctx.getPopupContainer,
onChange: _ctx.emitHandle,
onBlur: _ctx.handleBlur
}, {
tagRender: withCtx(({ label, option }) => [
createVNode(_component_Tag, {
color: "blue",
closable: "",
onClose: withModifiers(($event) => _ctx.removeItem(option), ["prevent"])
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(label), 1)
]),
_: 2
}, 1032, ["onClose"])
]),
option: withCtx((item) => [
createElementVNode("div", _hoisted_3, [
createElementVNode("span", null, [
createTextVNode(toDisplayString(item.label) + " ", 1),
item.status === 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
createTextVNode(" (" + toDisplayString(_ctx.tavI18n("Tav.member.4")) + ") ", 1)
], 2112)) : createCommentVNode("v-if", true)
]),
createElementVNode("span", null, [
item.userOrgs && item.userOrgs.length > 0 ? (openBlock(), createBlock(_component_Tooltip, { key: 0 }, {
title: withCtx(() => [
createElementVNode("span", null, toDisplayString(item.userOrgs.map((v) => v.organizationName).join("\u3001")), 1)
]),
default: withCtx(() => [
createTextVNode(" " + toDisplayString(item.userOrgs[0]?.organizationName), 1)
]),
_: 2
}, 1024)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
_hoisted_4
], 2112))
]),
createElementVNode("span", {
title: item.phone
}, toDisplayString(item.phone), 9, _hoisted_5)
])
]),
dropdownRender: withCtx(({ menuNode: menu }) => [
createVNode(_component_v_nodes, { vnodes: menu }, null, 8, ["vnodes"]),
_ctx.userList.length > 0 ? (openBlock(), createElementBlock("div", {
key: 0,
class: "ta-member-select-option-more",
onMousedown: _cache[0] || (_cache[0] = (e) => e.preventDefault()),
onClick: _cache[1] || (_cache[1] = (...args) => _ctx.userShowMore && _ctx.userShowMore(...args))
}, [
createElementVNode("a", _hoisted_6, toDisplayString(_ctx.tavI18n("Tav.common.moreText")), 1)
], 32)) : createCommentVNode("v-if", true)
]),
_: 1
}, 8, ["value", "allow-clear", "options", "filter-option", "max-tag-count", "max-tag-placeholder", "disabled", "placeholder", "mode", "autofocus", "default-open", "get-popup-container", "onChange", "onBlur"])) : (openBlock(), createBlock(_component_TreeSelect, {
key: 1,
value: _ctx.selectedData[0],
"onUpdate:value": _cache[3] || (_cache[3] = ($event) => _ctx.selectedData[0] = $event),
"dropdown-class-name": "ta-member-select-tree",
"tree-node-filter-prop": "title",
"show-search": "",
"tree-icon": "",
"tree-default-expanded-keys": _ctx.orgExpandedKey,
"allow-clear": _ctx.allowClear,
"max-tag-count": _ctx.maxTagCount,
"max-tag-placeholder": _ctx.maxTagPlaceholder,
disabled: _ctx.disabled,
placeholder: _ctx.placeholder,
multiple: _ctx.multiple,
"tree-data": _ctx.orgList,
"field-names": _ctx.orgFileds,
autofocus: _ctx.autofocus,
"default-open": _ctx.defaultOpen,
"get-popup-container": _ctx.getPopupContainer,
"show-checked-strategy": "SHOW_ALL",
onChange: _ctx.emitHandle
}, {
default: withCtx(() => [
createCommentVNode(' @inputKeyDown="preventInnerKeydownTriggerOuterKeydown" '),
createCommentVNode(' :treeDefaultExpandedKeys="orgExpandedKey" '),
createCommentVNode(" \u81EA\u5DF1\u5FAA\u73AF\u5F97\u9012\u5F52\uFF0C\u6682\u65F6\u4E0D\u8FD9\u6837\u5199 "),
createCommentVNode(' <TreeSelectNode v-for="item in orgList" :key="item.id">\n {{item.name}}\n </TreeSelectNode> ')
]),
_: 1
}, 8, ["value", "tree-default-expanded-keys", "allow-clear", "max-tag-count", "max-tag-placeholder", "disabled", "placeholder", "multiple", "tree-data", "field-names", "autofocus", "default-open", "get-popup-container", "onChange"]))
])) : createCommentVNode("v-if", true),
createVNode(_component_BasicModal, {
title: _ctx.title || _ctx.tavI18n("Tav.member.3"),
width: 850,
"destroy-on-close": true,
"get-container": _ctx.getPopupContainer,
onRegister: _ctx.registerMemberModal
}, {
footer: withCtx(() => [
createVNode(_component_Button, {
type: "primary",
onClick: _ctx.modalSubmit
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(_ctx.tavI18n("Tav.common.okText")), 1)
]),
_: 1
}, 8, ["onClick"]),
createVNode(_component_Button, { onClick: _ctx.hideModal }, {
default: withCtx(() => [
createTextVNode(toDisplayString(_ctx.tavI18n("Tav.common.cancelText")), 1)
]),
_: 1
}, 8, ["onClick"])
]),
default: withCtx(() => [
createElementVNode("div", _hoisted_7, [
_ctx.modalIsShow ? (openBlock(), createBlock(_component_MemberModal, {
key: 0,
"selected-data": _ctx.selectedData,
onChange: _ctx.modalChange
}, null, 8, ["selected-data", "onChange"])) : createCommentVNode("v-if", true)
])
]),
_: 1
}, 8, ["title", "get-container", "onRegister"])
], 512);
}
var MemberSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/tav-ui/tav-ui/packages/components/member-select/src/member-select.vue"]]);
export { MemberSelect as default };
//# sourceMappingURL=member-select2.mjs.map