tav-ui
Version:
417 lines (410 loc) • 15.8 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var antDesignVue = require('ant-design-vue');
var lodashEs = require('lodash-es');
var pinyin = require('js-pinyin');
var index$1 = require('../../button/index2.js');
var index = require('../../modal/index2.js');
var useModal = require('../../modal/src/hooks/useModal2.js');
var useGlobalConfig = require('../../../hooks/global/useGlobalConfig2.js');
require('../../../locales/index2.js');
require('../../../utils/index2.js');
var memberModal = require('./components/member-modal2.js');
var types = require('./types2.js');
var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
var is = require('../../../utils/is2.js');
var transfer = require('../../../locales/transfer2.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var pinyin__default = /*#__PURE__*/_interopDefaultLegacy(pinyin);
const _sfc_main = vue.defineComponent({
name: "TaMemberSelect",
components: {
VNodes: (_, { attrs }) => {
return attrs.vnodes;
},
Tooltip: antDesignVue.Tooltip,
Tag: antDesignVue.Tag,
BasicModal: index.TaModal,
MemberModal: memberModal["default"],
Button: index$1.TaButton,
Select: antDesignVue.Select,
TreeSelect: antDesignVue.TreeSelect
},
props: types.memberSelectProps,
emits: ["change", "update:value", "blur"],
setup(props, { emit }) {
const memberSelectElRef = vue.ref();
const userSelectRef = vue.ref(null);
const state = vue.reactive({
modalIsShow: false,
searchValue: "",
selectedData: [],
catchData: [],
userList: [],
orgList: [],
orgExpandedKey: [],
orgFileds: { label: "name", value: "id" }
});
vue.provide("propsData", vue.computed(() => props));
vue.provide("userList", vue.computed(() => state.userList));
vue.provide("orgList", vue.computed(() => state.orgList));
const globalConfig = useGlobalConfig.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.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;
vue.nextTick(() => {
closeMemberModal();
});
};
const getTrueUserList = (userList = []) => {
const list = userList.filter((v) => !props.ignoreUser.includes(v.id)).map((v) => {
const fullCharts = pinyin__default["default"].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 (is.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) => {
lodashEs.pull(state.selectedData[0], item.id);
emitHandle();
};
vue.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
});
vue.watch(() => props.ignoreUser, (a, b) => {
if (!lodashEs.isEqual(a, b)) {
getUserList();
}
});
vue.watch(() => props.options, (data) => {
if (data) {
getUserList();
}
}, {
deep: true
});
vue.watch(() => props.value, () => {
setBaseData();
});
const pageInit = () => {
setBaseData();
if (props.type == "user") {
if (props.noSelect) {
return;
}
getUserList();
} else {
getOrgList();
}
};
pageInit();
return {
...vue.toRefs(state),
memberSelectElRef,
userSelectRef,
removeItem,
filterHandle,
tavI18n: transfer.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__ */ vue.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 = vue.resolveComponent("Tag");
const _component_Tooltip = vue.resolveComponent("Tooltip");
const _component_v_nodes = vue.resolveComponent("v-nodes");
const _component_Select = vue.resolveComponent("Select");
const _component_TreeSelect = vue.resolveComponent("TreeSelect");
const _component_MemberModal = vue.resolveComponent("MemberModal");
const _component_Button = vue.resolveComponent("Button");
const _component_BasicModal = vue.resolveComponent("BasicModal");
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
!_ctx.noSelect ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
_ctx.type == "user" ? (vue.openBlock(), vue.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: vue.withCtx(({ label, option }) => [
vue.createVNode(_component_Tag, {
color: "blue",
closable: "",
onClose: vue.withModifiers(($event) => _ctx.removeItem(option), ["prevent"])
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(label), 1)
]),
_: 2
}, 1032, ["onClose"])
]),
option: vue.withCtx((item) => [
vue.createElementVNode("div", _hoisted_3, [
vue.createElementVNode("span", null, [
vue.createTextVNode(vue.toDisplayString(item.label) + " ", 1),
item.status === 0 ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
vue.createTextVNode(" (" + vue.toDisplayString(_ctx.tavI18n("Tav.member.4")) + ") ", 1)
], 2112)) : vue.createCommentVNode("v-if", true)
]),
vue.createElementVNode("span", null, [
item.userOrgs && item.userOrgs.length > 0 ? (vue.openBlock(), vue.createBlock(_component_Tooltip, { key: 0 }, {
title: vue.withCtx(() => [
vue.createElementVNode("span", null, vue.toDisplayString(item.userOrgs.map((v) => v.organizationName).join("\u3001")), 1)
]),
default: vue.withCtx(() => [
vue.createTextVNode(" " + vue.toDisplayString(item.userOrgs[0]?.organizationName), 1)
]),
_: 2
}, 1024)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
_hoisted_4
], 2112))
]),
vue.createElementVNode("span", {
title: item.phone
}, vue.toDisplayString(item.phone), 9, _hoisted_5)
])
]),
dropdownRender: vue.withCtx(({ menuNode: menu }) => [
vue.createVNode(_component_v_nodes, { vnodes: menu }, null, 8, ["vnodes"]),
_ctx.userList.length > 0 ? (vue.openBlock(), vue.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))
}, [
vue.createElementVNode("a", _hoisted_6, vue.toDisplayString(_ctx.tavI18n("Tav.common.moreText")), 1)
], 32)) : vue.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"])) : (vue.openBlock(), vue.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: vue.withCtx(() => [
vue.createCommentVNode(' @inputKeyDown="preventInnerKeydownTriggerOuterKeydown" '),
vue.createCommentVNode(' :treeDefaultExpandedKeys="orgExpandedKey" '),
vue.createCommentVNode(" \u81EA\u5DF1\u5FAA\u73AF\u5F97\u9012\u5F52\uFF0C\u6682\u65F6\u4E0D\u8FD9\u6837\u5199 "),
vue.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"]))
])) : vue.createCommentVNode("v-if", true),
vue.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: vue.withCtx(() => [
vue.createVNode(_component_Button, {
type: "primary",
onClick: _ctx.modalSubmit
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.tavI18n("Tav.common.okText")), 1)
]),
_: 1
}, 8, ["onClick"]),
vue.createVNode(_component_Button, { onClick: _ctx.hideModal }, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.tavI18n("Tav.common.cancelText")), 1)
]),
_: 1
}, 8, ["onClick"])
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_7, [
_ctx.modalIsShow ? (vue.openBlock(), vue.createBlock(_component_MemberModal, {
key: 0,
"selected-data": _ctx.selectedData,
onChange: _ctx.modalChange
}, null, 8, ["selected-data", "onChange"])) : vue.createCommentVNode("v-if", true)
])
]),
_: 1
}, 8, ["title", "get-container", "onRegister"])
], 512);
}
var MemberSelect = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/tav-ui/tav-ui/packages/components/member-select/src/member-select.vue"]]);
exports["default"] = MemberSelect;
//# sourceMappingURL=member-select2.js.map