|
|
@@ -1,5 +1,6 @@
|
|
|
<script lang="ts" setup>
|
|
|
import { ref, reactive, onMounted, inject, watchEffect, computed } from 'vue';
|
|
|
+import { debounce } from 'lodash';
|
|
|
import { storeToRefs } from 'pinia';
|
|
|
import { Emits, optionsType } from './type';
|
|
|
import { useStore } from '@/store/index'
|
|
|
@@ -10,46 +11,153 @@ const props = defineProps({
|
|
|
modelValue: { type: [String, Number, Array, Object, Boolean], required: true },
|
|
|
multiple: { type: Boolean, required: false, default: false },
|
|
|
size: { type: String as () => assemblySize, required: true, default: () => 'small' },
|
|
|
- placeholder: { type: String, required: false, default: () => '请填写' },
|
|
|
+ placeholder: { type: String, required: false, default: () => '请选择' },
|
|
|
disabled: { type: Boolean, required: false, default: false },
|
|
|
options: { type: Array as () => optionsType, required: false, default: () => [] },
|
|
|
+ width: { type: String, required: false, default: () => '100%' },
|
|
|
});
|
|
|
const emit = defineEmits<Emits>();
|
|
|
-const { userInfo } = storeToRefs(useStore());
|
|
|
+const personnelArray = ref<optionsType>([]);
|
|
|
+const { userInfo, personnelList } = storeToRefs(useStore());
|
|
|
+const { setValue } = useStore()
|
|
|
|
|
|
const timeRef = generateUniqueId()
|
|
|
+const selectLoading = ref(false);
|
|
|
const controlTranslation = reactive({
|
|
|
- visibleFlag: false
|
|
|
+ visibleFlag: false // 下拉框出现隐藏
|
|
|
})
|
|
|
|
|
|
const selectedValue = ref(props.modelValue); // 响应式绑定 v-model 的值
|
|
|
|
|
|
-// function getUserList(keyword: string = '', flag: boolean = true) {
|
|
|
-// post(`/user/getEmployeeList`, {
|
|
|
-// keyword,
|
|
|
-// status: 3,
|
|
|
-// matchingType: 0,
|
|
|
-// })
|
|
|
-// }
|
|
|
+const getSelectedLabel = computed(() => {
|
|
|
+ if (!props.multiple) {
|
|
|
+ const item = getPersonnelListItems(selectedValue.value);
|
|
|
+ return item ? item.label : props.placeholder
|
|
|
+ }
|
|
|
+
|
|
|
+ if(props.multiple) {
|
|
|
+ if(Array.isArray(selectedValue.value)) {
|
|
|
+ if(selectedValue.value.length <= 0) {
|
|
|
+ return props.placeholder
|
|
|
+ }
|
|
|
+ const item = getPersonnelListItems(selectedValue.value);
|
|
|
+ return item ? item.label : props.placeholder
|
|
|
+ } else {
|
|
|
+ return props.placeholder
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return props.placeholder
|
|
|
+})
|
|
|
+
|
|
|
+function tagClose(_evt: MouseEvent) {
|
|
|
+ if(Array.isArray(selectedValue.value)) {
|
|
|
+ selectedValue.value.shift()
|
|
|
+ updateValue(selectedValue.value)
|
|
|
+ }
|
|
|
+}
|
|
|
+function getPersonnelListItems(val: any) {
|
|
|
+ let value = val;
|
|
|
+ if (Array.isArray(val) && val.length > 0) {
|
|
|
+ value = val[0]
|
|
|
+ }
|
|
|
+ return personnelList.value.find((item: any) => item.value == value)
|
|
|
+}
|
|
|
+
|
|
|
+function getUserList(keyword: string = '') {
|
|
|
+ post(`/user/getSimpleActiveUserListNew`, { keyword }).then(res => {
|
|
|
+ personnelArray.value = res.data
|
|
|
+ if (!keyword) {
|
|
|
+ setValue((res.data || []), 'personnelList')
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ selectLoading.value = false
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
function visibleChange(visible: boolean) { // 下拉框出现/隐藏时触发
|
|
|
- console.log(visible, '<==== visible')
|
|
|
controlTranslation.visibleFlag = visible
|
|
|
}
|
|
|
+
|
|
|
+const filterMethod = debounce(filterMethods, 500)
|
|
|
+function filterMethods(val: string) {
|
|
|
+ if (val == '') {
|
|
|
+ personnelArray.value = personnelList.value
|
|
|
+ selectLoading.value = false
|
|
|
+ return
|
|
|
+ }
|
|
|
+ getUserList(val)
|
|
|
+}
|
|
|
+
|
|
|
function updateValue(val: any) { // 值改变的时候触发
|
|
|
emit('update:modelValue', selectedValue.value)
|
|
|
emit('change', val)
|
|
|
}
|
|
|
|
|
|
-console.log(props, userInfo, '<==== 看看数据')
|
|
|
+onMounted(() => {
|
|
|
+ if (personnelList.value.length == 0) {
|
|
|
+ getUserList()
|
|
|
+ } else {
|
|
|
+ personnelArray.value = personnelList.value
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+console.log(props, userInfo.value, '<==== 看看数据')
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<el-select v-model="selectedValue" :ref="`selectRef${timeRef}`" :multiple="multiple" :size="size"
|
|
|
- :placeholder="placeholder" :disabled="disabled" clearable collapse-tags @change="updateValue"
|
|
|
- @visible-change="visibleChange">
|
|
|
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ :loading="selectLoading" :placeholder="placeholder" :disabled="disabled" clearable filterable collapse-tags
|
|
|
+ :style="`width: ${width}`"
|
|
|
+ :class="`custom-select ${userInfo.userNameNeedTranslate != 1 && !controlTranslation.visibleFlag ? 'setUpInput' : ''}`"
|
|
|
+ @change="updateValue" @visible-change="visibleChange"
|
|
|
+ :filter-method="(val: string) => { selectLoading = true, filterMethod(val) }">
|
|
|
+ <!-- 搜索内容显示 -->
|
|
|
+ <template #prefix v-if="!multiple">
|
|
|
+ <div style="height: 100%;display: flex;align-items: center;">
|
|
|
+ <!-- 单选 -->
|
|
|
+ <div v-if="!controlTranslation.visibleFlag" class="selectSingleChoice">
|
|
|
+ <template v-if="getSelectedLabel == placeholder">
|
|
|
+ {{ placeholder }}
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span style="color: #303133;">
|
|
|
+ <TextTranslation translationTypes="userName" :translationValue="getSelectedLabel"></TextTranslation>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #tag v-if="multiple">
|
|
|
+ <!-- 多选 -->
|
|
|
+ <template v-if="Array.isArray(selectedValue) && selectedValue.length > 0">
|
|
|
+ <el-tag type="info" :size="size" closable @close="tagClose">
|
|
|
+ <TextTranslation translationTypes="userName" :translationValue="getSelectedLabel"></TextTranslation>
|
|
|
+ </el-tag>
|
|
|
+ <el-tag type="info" :size="size" v-if="selectedValue.length > 1">+{{ selectedValue.length }}</el-tag>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span style="color: #A8ABB2">{{ placeholder }}</span>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <!-- 主题内容显示 -->
|
|
|
+ <el-option v-for="item in personnelArray" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
</el-select>
|
|
|
</template>
|
|
|
|
|
|
-<style lang="scss" scoped></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.custom-select {
|
|
|
+ :deep(.el-select__placeholder.is-transparent) {
|
|
|
+ color: transparent !important;
|
|
|
+ }
|
|
|
+ :deep(.el-select__placeholder) {
|
|
|
+ span {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.setUpInput :deep(.el-input__inner) {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+</style>
|
yusm