|
@@ -1,102 +1,110 @@
|
|
|
<template>
|
|
|
- <el-select v-model="selectValue" :remote-method="methodStaff"
|
|
|
- :style="{width: props.width}" :clearable="props.clearable" filterable
|
|
|
- remote @change="changeStaff" @clear="clear"
|
|
|
- ref="selectRef">
|
|
|
- <el-option v-for="item in staffList" :key="item.code" :label="item.name"
|
|
|
- :value="item.code ">
|
|
|
+ <el-select
|
|
|
+ v-model="selectValue"
|
|
|
+ :remote-method="methodStaff"
|
|
|
+ :style="{ width: props.width }"
|
|
|
+ :clearable="props.clearable"
|
|
|
+ filterable
|
|
|
+ remote
|
|
|
+ @change="changeStaff"
|
|
|
+ @clear="clear"
|
|
|
+ ref="selectRef"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in staffList"
|
|
|
+ :key="item.code"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.code"
|
|
|
+ >
|
|
|
<span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
- <span style="color:#67C23A">{{ item.name }}</span>
|
|
|
+ <span style="color: #67c23a">{{ item.name }}</span>
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
- <span style="color:#E6A23C">{{ item.deptName }}</span>
|
|
|
+ <span style="color: #e6a23c">{{ item.deptName }}</span>
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
- <span style="color:#a5673f">{{ item.empTitName }}</span>
|
|
|
+ <span style="color: #a5673f">{{ item.empTitName }}</span>
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
- <span style="color:#a5673f">{{ item.ybCode }}</span>
|
|
|
+ <span style="color: #a5673f">{{ item.ybCode }}</span>
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import {getRenYuan} from "@/api/public-api";
|
|
|
-import {stringNotBlank} from "@/utils/blank-utils";
|
|
|
-import {useUserStore} from "@/pinia/user-store";
|
|
|
+import { getRenYuan } from "@/api/public-api";
|
|
|
+import { stringNotBlank } from "@/utils/blank-utils";
|
|
|
+import { useUserStore } from "@/pinia/user-store";
|
|
|
|
|
|
const props = defineProps({
|
|
|
modelValue: {
|
|
|
type: Object,
|
|
|
- default: ''
|
|
|
+ default: "",
|
|
|
},
|
|
|
name: {
|
|
|
type: Array,
|
|
|
- default: ['code', 'name']
|
|
|
+ default: ["code", "name"],
|
|
|
},
|
|
|
width: {
|
|
|
type: String,
|
|
|
- default: '220px'
|
|
|
+ default: "220px",
|
|
|
},
|
|
|
clearable: {
|
|
|
type: Boolean,
|
|
|
- default: true
|
|
|
+ default: true,
|
|
|
},
|
|
|
deptCode: {
|
|
|
type: Boolean,
|
|
|
- default: false
|
|
|
- }
|
|
|
-})
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+});
|
|
|
|
|
|
-const staffList = ref([])
|
|
|
-const selectValue = ref()
|
|
|
+const staffList = ref([]);
|
|
|
+const selectValue = ref();
|
|
|
|
|
|
const modelChange = () => {
|
|
|
- selectValue.value = props.modelValue[props.name[0]]
|
|
|
+ selectValue.value = props.modelValue[props.name[0]];
|
|
|
if (stringNotBlank(selectValue.value)) {
|
|
|
for (let i = 0, len = staffList.value.length; i < len; i++) {
|
|
|
if (selectValue.value === staffList.value[i].code) {
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
}
|
|
|
getRenYuan(selectValue.value).then(res => {
|
|
|
- staffList.value = res
|
|
|
- })
|
|
|
+ staffList.value = res;
|
|
|
+ });
|
|
|
}
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
onMounted(() => {
|
|
|
- modelChange()
|
|
|
-})
|
|
|
+ modelChange();
|
|
|
+});
|
|
|
|
|
|
+watch(
|
|
|
+ () => props.modelValue[props.name[0]],
|
|
|
+ () => {
|
|
|
+ modelChange();
|
|
|
+ }
|
|
|
+);
|
|
|
|
|
|
-watch(() => props.modelValue[props.name[0]], () => {
|
|
|
- modelChange()
|
|
|
-})
|
|
|
-
|
|
|
-let deptCode = props.deptCode ? useUserStore().userInfo.deptCode : ''
|
|
|
-const methodStaff = (val) => {
|
|
|
+let deptCode = props.deptCode ? useUserStore().userInfo.deptCode : "";
|
|
|
+const methodStaff = val => {
|
|
|
if (val.length === 0) {
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
getRenYuan(val, deptCode).then(res => {
|
|
|
- staffList.value = res
|
|
|
+ staffList.value = res;
|
|
|
});
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
-const selectRef = ref()
|
|
|
+const selectRef = ref();
|
|
|
const changeStaff = async () => {
|
|
|
- await nextTick()
|
|
|
- props.modelValue[props.name[0]] = selectRef.value?.selected?.value
|
|
|
- props.modelValue[props.name[1]] = selectRef.value?.selected?.currentLabel
|
|
|
-}
|
|
|
+ await nextTick();
|
|
|
+ props.modelValue[props.name[0]] = selectRef.value?.selected?.value;
|
|
|
+ props.modelValue[props.name[1]] = selectRef.value?.selected?.currentLabel;
|
|
|
+};
|
|
|
|
|
|
const clear = () => {
|
|
|
- selectValue.value = ''
|
|
|
- props.modelValue[props.name[0]] = ''
|
|
|
- props.modelValue[props.name[1]] = ''
|
|
|
-}
|
|
|
-
|
|
|
+ selectValue.value = "";
|
|
|
+ props.modelValue[props.name[0]] = "";
|
|
|
+ props.modelValue[props.name[1]] = "";
|
|
|
+};
|
|
|
</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-
|
|
|
-</style>
|