提交相关代码

fhKeeper/formulahousekeeper/customerBuler-crm/src/components/translationComponent/personnelSearch/personnelSearch.vue

@@ -11,27 +11,63 @@ 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 personnelArray = ref<optionsType>([]);
 const { userInfo, personnelList } = storeToRefs(useStore());
-const { setValue, getPersonnelListItems } = 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 的值
 
+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) {
+    if (!keyword) {
       setValue((res.data || []), 'personnelList')
     }
   }).finally(() => {
@@ -45,7 +81,7 @@ function visibleChange(visible: boolean) { // 下拉框出现/隐藏时触发
 
 const filterMethod = debounce(filterMethods, 500)
 function filterMethods(val: string) {
-  if(val == '') {
+  if (val == '') {
     personnelArray.value = personnelList.value
     selectLoading.value = false
     return
@@ -59,7 +95,7 @@ function updateValue(val: any) { // 值改变的时候触发
 }
 
 onMounted(() => {
-  if(personnelList.value.length == 0) {
+  if (personnelList.value.length == 0) {
     getUserList()
   } else {
     personnelArray.value = personnelList.value
@@ -70,11 +106,58 @@ console.log(props, userInfo.value, '<==== 看看数据')
 </script>
 
 <template>
-  <!-- <el-select v-model="selectedValue" :ref="`selectRef${timeRef}`" :multiple="multiple" :size="size" :loading="selectLoading"
-    :placeholder="placeholder" :disabled="disabled" clearable collapse-tags filterable @change="updateValue"
-    @visible-change="visibleChange" :filter-method="(val: string) => {selectLoading = true, filterMethod(val)}">
+  <el-select v-model="selectedValue" :ref="`selectRef${timeRef}`" :multiple="multiple" :size="size"
+    :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> -->
+  </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>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/analysis/index.vue

@@ -17,10 +17,15 @@ import {
   SummaryData
 } from './api';
 
-const selectVal = ref<string | number>('')
+const selectVal = ref<Array<string | number>>([])
+const selectVals = ref<string | number>('')
 const selectChange = (val: any) => {
-  console.log(val, '<===== 当前的数据')
-  console.log(selectVal.value, '<===== 双向绑定的数据')
+  console.log(val, '<===== 当前的数据 selectVal')
+  console.log(selectVal.value, '<===== 双向绑定的数据 selectVal')
+}
+const selectChange2 = (val: any) => {
+  console.log(val, '<===== 当前的数据 selectVals')
+  console.log(selectVals.value, '<===== 双向绑定的数据 selectVals')
 }
 const permissionOptions = [
   {
@@ -187,7 +192,8 @@ watchEffect(() => {
           </el-select>
         </div>
         <div class="w-40">
-          <personnel-search v-model="selectVal" placeholder="你好世界" @change="selectChange"></personnel-search>
+          <personnel-search v-model="selectVal" :size="'small'" multiple placeholder="你好世界" @change="selectChange"></personnel-search>
+          <personnel-search v-model="selectVals" :size="'small'" placeholder="你好世界" @change="selectChange2"></personnel-search>
           <el-select
             ref="select1"
             size="small"

fhKeeper/formulahousekeeper/customerBuler-crm/src/store/Store.d.ts

@@ -7,7 +7,6 @@ type SotreState = {
 type SoreGetters = {
   getRoutersList: () => RouteRecordRaw[];
   getToken: () => string;
-  getPersonnelListItems: (val: any) => any;
 };
 type SotreActions = {
   setRouters(arr: any): void;

fhKeeper/formulahousekeeper/customerBuler-crm/src/store/index.ts

@@ -18,14 +18,7 @@ export const useStore = defineStore<
     },
     getToken() {
       return this.userInfo?.id || "";
-    },
-    getPersonnelListItems(val) {
-      let value = val;
-      if(Array.isArray(val)) {
-        value = val[0]
-      }
-      return this.personnelList.find(item => item.value == value)
-    },
+    }
   },
   actions: {
     // 方法