|
|
@@ -1,26 +1,33 @@
|
|
|
<template>
|
|
|
- <el-select v-model="modelObj"
|
|
|
- :clearable="props.clearable"
|
|
|
- :remote="props.remote"
|
|
|
- :id="props.id"
|
|
|
- :remote-method="xcMethod"
|
|
|
- :style="{width: props.width + 'px'}"
|
|
|
- ref="selectRef"
|
|
|
- filterable
|
|
|
- @change="(el) => changeStaff(el)"
|
|
|
- @clear="clear"
|
|
|
- @focus="getFocus">
|
|
|
- <el-option v-for="(item,index) in props.data"
|
|
|
- :key="item.index"
|
|
|
- :label="item.name"
|
|
|
- :value="item.code">
|
|
|
- <template v-for="(opitem,index) in optionList" v-if="optionList.length > 0">
|
|
|
- <el-divider v-if="index !== 0" direction='vertical'></el-divider>
|
|
|
+ <el-select
|
|
|
+ v-model="modelObj"
|
|
|
+ :clearable="props.clearable"
|
|
|
+ :remote="props.remote"
|
|
|
+ :id="props.id"
|
|
|
+ :remote-method="xcMethod"
|
|
|
+ :style="{ width: props.width + 'px' }"
|
|
|
+ ref="selectRef"
|
|
|
+ filterable
|
|
|
+ @change="el => changeStaff(el)"
|
|
|
+ @clear="clear"
|
|
|
+ @focus="getFocus"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in props.data"
|
|
|
+ :key="item.index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.code"
|
|
|
+ >
|
|
|
+ <template
|
|
|
+ v-for="(opitem, index) in optionList"
|
|
|
+ v-if="optionList.length > 0"
|
|
|
+ >
|
|
|
+ <el-divider v-if="index !== 0" direction="vertical"></el-divider>
|
|
|
<span :style="opitem.style">{{ item[opitem.label] }}</span>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<span>{{ item.code }}</span>
|
|
|
- <el-divider direction='vertical'></el-divider>
|
|
|
+ <el-divider direction="vertical"></el-divider>
|
|
|
<span>{{ item.name }}</span>
|
|
|
</template>
|
|
|
</el-option>
|
|
|
@@ -28,11 +35,11 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import {debounce} from "@/utils/debounce";
|
|
|
-import {stringNotBlank} from "@/utils/blank-utils";
|
|
|
-import {onMounted, watch} from 'vue'
|
|
|
+import { debounce } from "@/utils/debounce";
|
|
|
+import { stringNotBlank } from "@/utils/blank-utils";
|
|
|
+import { onMounted, watch } from "vue";
|
|
|
import useCompRef from "@/utils/useCompRef";
|
|
|
-import {ElSelect} from "element-plus";
|
|
|
+import { ElSelect } from "element-plus";
|
|
|
|
|
|
const props = defineProps({
|
|
|
modelValue: {
|
|
|
@@ -40,65 +47,69 @@ const props = defineProps({
|
|
|
},
|
|
|
name: {
|
|
|
type: Array,
|
|
|
- default: ['code', 'name']
|
|
|
+ default: ["code", "name"],
|
|
|
},
|
|
|
width: {
|
|
|
type: Number,
|
|
|
- default: 120
|
|
|
+ default: 120,
|
|
|
},
|
|
|
data: {
|
|
|
type: Array,
|
|
|
- default: []
|
|
|
+ default: [],
|
|
|
},
|
|
|
remote: {
|
|
|
type: Boolean,
|
|
|
- default: false
|
|
|
+ default: false,
|
|
|
},
|
|
|
clearable: {
|
|
|
type: Boolean,
|
|
|
- default: false
|
|
|
+ default: false,
|
|
|
},
|
|
|
id: {
|
|
|
- type: String
|
|
|
- }
|
|
|
-})
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+});
|
|
|
|
|
|
-const emit = defineEmits(['method', 'change', 'focus'])
|
|
|
+const emit = defineEmits(["method", "change", "focus"]);
|
|
|
|
|
|
-const modelObj = ref(null)
|
|
|
-const selectRef = useCompRef(ElSelect)
|
|
|
-const optionList = ref([])
|
|
|
+const modelObj = ref(null);
|
|
|
+const selectRef = useCompRef(ElSelect);
|
|
|
+const optionList = ref([]);
|
|
|
const colorList = {
|
|
|
- 'primary': '#409eff',
|
|
|
- 'danger': '#f56c6c',
|
|
|
- 'info': '#8492a6',
|
|
|
- 'success': '#67C23A',
|
|
|
- 'warning': '#E6A23C'
|
|
|
-}
|
|
|
-
|
|
|
-const changeStaff = (el) => {
|
|
|
+ primary: "#409eff",
|
|
|
+ danger: "#f56c6c",
|
|
|
+ info: "#8492a6",
|
|
|
+ success: "#67C23A",
|
|
|
+ warning: "#E6A23C",
|
|
|
+};
|
|
|
+
|
|
|
+const changeStaff = el => {
|
|
|
nextTick(() => {
|
|
|
- props.modelValue[props.name[0]] = el
|
|
|
- props.modelValue[props.name[1]] = selectRef.value?.states.selected?.currentLabel
|
|
|
- })
|
|
|
- emit('change', props.data.find((i) => i.code === modelObj.value))
|
|
|
-}
|
|
|
+ props.modelValue[props.name[0]] = el;
|
|
|
+ props.modelValue[props.name[1]] =
|
|
|
+ selectRef.value?.states.selected?.currentLabel;
|
|
|
+ });
|
|
|
+ emit(
|
|
|
+ "change",
|
|
|
+ props.data.find(i => i.code === modelObj.value)
|
|
|
+ );
|
|
|
+};
|
|
|
|
|
|
const clear = () => {
|
|
|
- modelObj.value = null
|
|
|
- props.modelValue[props.name[0]] = null
|
|
|
- props.modelValue[props.name[1]] = null
|
|
|
-}
|
|
|
+ modelObj.value = null;
|
|
|
+ props.modelValue[props.name[0]] = null;
|
|
|
+ props.modelValue[props.name[1]] = null;
|
|
|
+};
|
|
|
|
|
|
const xcMethod = debounce(value => {
|
|
|
if (stringNotBlank(value) && value.length > 1) {
|
|
|
- method(value)
|
|
|
+ method(value);
|
|
|
}
|
|
|
-}, 400)
|
|
|
+}, 400);
|
|
|
|
|
|
const getFocus = () => {
|
|
|
- emit('focus')
|
|
|
-}
|
|
|
+ emit("focus");
|
|
|
+};
|
|
|
|
|
|
/**
|
|
|
* 监听父组件的值是否改变
|
|
|
@@ -107,67 +118,66 @@ const getFocus = () => {
|
|
|
* props.data 里面没有值对得上那就需要执行查询动作了
|
|
|
*
|
|
|
*/
|
|
|
-watch(() => props.modelValue[props.name[0]], () => {
|
|
|
- modelObj.value = props.modelValue[props.name[0]]
|
|
|
- let len = props.data.length
|
|
|
- if (len === 0) {
|
|
|
- method(modelObj.value)
|
|
|
- }
|
|
|
- for (let i = 0; i < len; i++) {
|
|
|
- if (modelObj.value === props.data[i].code) {
|
|
|
- return
|
|
|
+watch(
|
|
|
+ () => props.modelValue[props.name[0]],
|
|
|
+ () => {
|
|
|
+ modelObj.value = props.modelValue[props.name[0]];
|
|
|
+ let len = props.data.length;
|
|
|
+ if (len === 0) {
|
|
|
+ method(modelObj.value);
|
|
|
+ }
|
|
|
+ for (let i = 0; i < len; i++) {
|
|
|
+ if (modelObj.value === props.data[i].code) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
}
|
|
|
+ method(modelObj.value);
|
|
|
}
|
|
|
- method(modelObj.value)
|
|
|
-})
|
|
|
+);
|
|
|
|
|
|
-const method = (value) => {
|
|
|
- emit('method', value)
|
|
|
-}
|
|
|
+const method = value => {
|
|
|
+ emit("method", value);
|
|
|
+};
|
|
|
|
|
|
const focus = () => {
|
|
|
- selectRef.value.focus()
|
|
|
-}
|
|
|
+ selectRef.value.focus();
|
|
|
+};
|
|
|
|
|
|
const blur = () => {
|
|
|
- selectRef.value.blur()
|
|
|
-}
|
|
|
+ selectRef.value.blur();
|
|
|
+};
|
|
|
|
|
|
-defineExpose({focus, blur})
|
|
|
+defineExpose({ focus, blur });
|
|
|
|
|
|
onMounted(() => {
|
|
|
-
|
|
|
nextTick(() => {
|
|
|
- modelObj.value = props.modelValue[props.name[0]]
|
|
|
- })
|
|
|
+ modelObj.value = props.modelValue[props.name[0]];
|
|
|
+ });
|
|
|
|
|
|
// 判断组件是否使用了 slot
|
|
|
if (!!useSlots().default) {
|
|
|
// 判断 slot 有没有想要的值
|
|
|
for (let item of useSlots().default()) {
|
|
|
if (item.props !== null) {
|
|
|
- let style = {}
|
|
|
- if (typeof item.props.style === 'undefined') {
|
|
|
- if (typeof item.props.type === 'undefined') {
|
|
|
- style = {'color': '#8492a6'}
|
|
|
+ let style = {};
|
|
|
+ if (typeof item.props.style === "undefined") {
|
|
|
+ if (typeof item.props.type === "undefined") {
|
|
|
+ style = { color: "#8492a6" };
|
|
|
} else {
|
|
|
- style = {'color': colorList[item.props.type]}
|
|
|
+ style = { color: colorList[item.props.type] };
|
|
|
}
|
|
|
} else {
|
|
|
- style = item.props.style
|
|
|
+ style = item.props.style;
|
|
|
}
|
|
|
let data = {
|
|
|
label: item.props.label,
|
|
|
style: style,
|
|
|
- }
|
|
|
- optionList.value.push(data)
|
|
|
+ };
|
|
|
+ optionList.value.push(data);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-})
|
|
|
-
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-
|
|
|
-</style>
|
|
|
+<style scoped></style>
|
