You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
201 lines
3.5 KiB
201 lines
3.5 KiB
8 months ago
|
<template>
|
||
|
<div class="additem-item-select-root">
|
||
|
<div class="label" :class="labelWidth" v-if="isShowLabel">
|
||
|
<span v-if="props.require" class="require">*</span>
|
||
|
{{ props.label }}
|
||
|
</div>
|
||
|
<el-select
|
||
|
v-model="localValue"
|
||
|
:placeholder="placeholder"
|
||
|
class="selecter"
|
||
|
popper-class="additem-window-select"
|
||
|
:disabled="disabled"
|
||
|
:value-key="valueTag ? '' : keyTag"
|
||
|
@change="selectChange"
|
||
|
>
|
||
|
<el-option
|
||
|
v-for="item in options"
|
||
|
:key="item[keyTag]"
|
||
|
:label="item[labelTag]"
|
||
|
:value="valueTag ? item[valueTag] : item"
|
||
|
:disabled="item.disable"
|
||
|
class="item"
|
||
|
/>
|
||
|
</el-select>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script setup lang="ts">
|
||
|
// interface OptionItem {
|
||
|
// code: string
|
||
|
// label: string
|
||
|
// }
|
||
|
|
||
|
interface Props {
|
||
|
require?: boolean
|
||
|
label?: string
|
||
|
modelValue?: any
|
||
|
canEdit?: boolean
|
||
|
widthType?: number
|
||
|
placeholder?: string
|
||
|
options: any[]
|
||
|
keyTag: string
|
||
|
labelTag: string
|
||
|
valueTag?: string
|
||
|
disabled?: boolean
|
||
|
isShowLabel?: boolean
|
||
|
}
|
||
|
|
||
|
const props = withDefaults(defineProps<Props>(), {
|
||
|
require: false,
|
||
|
label: '',
|
||
|
modelValue: '',
|
||
|
canEdit: true,
|
||
|
widthType: 0,
|
||
|
options: () => [{}],
|
||
|
keyTag: 'value',
|
||
|
labelTag: 'label',
|
||
|
valueTag: 'value',
|
||
|
disabled: false,
|
||
|
isShowLabel: true,
|
||
|
})
|
||
|
|
||
|
const emit = defineEmits(['update:modelValue'])
|
||
|
const localValue = ref<string | number>('')
|
||
|
|
||
|
const labelWidth = computed(() => {
|
||
|
switch (props.widthType) {
|
||
|
case 0:
|
||
|
return 'width-normal'
|
||
|
case 1:
|
||
|
return ''
|
||
|
case 3:
|
||
|
return 'width-bzj'
|
||
|
case 4:
|
||
|
return 'width-psk'
|
||
|
case 5:
|
||
|
return 'width-pipe'
|
||
|
case 6:
|
||
|
return 'width-clc'
|
||
|
default:
|
||
|
return 'width-normal'
|
||
|
}
|
||
|
})
|
||
|
const selectChange = (val: any) => {
|
||
|
emit('update:modelValue', val)
|
||
|
}
|
||
|
|
||
|
watch(
|
||
|
() => props.modelValue,
|
||
|
modelValue => {
|
||
|
localValue.value = modelValue
|
||
|
},
|
||
|
{ immediate: true }
|
||
|
)
|
||
|
</script>
|
||
|
|
||
|
<style lang="scss">
|
||
|
// .additem-window-select {
|
||
|
// .el-select-dropdown__list {
|
||
|
// padding: 8px 0;
|
||
|
// }
|
||
|
// .el-select-dropdown__item {
|
||
|
// height: 44px;
|
||
|
// line-height: 44px;
|
||
|
// font-size: inherit;
|
||
|
// }
|
||
|
// // :deep()
|
||
|
// }
|
||
|
// .el-icon svg {
|
||
|
// width: inherit;
|
||
|
// height: inherit;
|
||
|
// }
|
||
|
</style>
|
||
|
|
||
|
<style lang="scss" scoped>
|
||
|
.additem-item-select-root {
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
box-sizing: border-box;
|
||
|
|
||
|
.label {
|
||
|
color: var(--label-text);
|
||
|
line-height: 100%;
|
||
|
text-align: right;
|
||
|
// font-size: 0.18rem;
|
||
|
// margin-right: 24px;
|
||
|
|
||
|
.require {
|
||
|
color: red;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.selecter {
|
||
|
flex-grow: 1;
|
||
|
width: 0;
|
||
|
height: 100%;
|
||
|
line-height: 100%;
|
||
|
// font-size: 0.18rem;
|
||
|
}
|
||
|
|
||
|
.width-normal {
|
||
|
width: 110px;
|
||
|
}
|
||
|
|
||
|
.width-ysk {
|
||
|
width: 270px;
|
||
|
}
|
||
|
|
||
|
.width-jcj {
|
||
|
width: 180px;
|
||
|
}
|
||
|
|
||
|
.width-bzj {
|
||
|
width: 210px;
|
||
|
}
|
||
|
|
||
|
.width-psk {
|
||
|
width: 150px;
|
||
|
}
|
||
|
|
||
|
.width-pipe {
|
||
|
width: 180px;
|
||
|
}
|
||
|
|
||
|
.width-clc {
|
||
|
width: 150px;
|
||
|
}
|
||
|
|
||
|
:deep(.el-input__inner) {
|
||
|
color: #4d4d4d;
|
||
|
background-color: transparent;
|
||
|
// @include border_color("ws_dialog_input");
|
||
|
}
|
||
|
:deep(.el-select__wrapper) {
|
||
|
min-height: auto;
|
||
|
height: 100%;
|
||
|
font-size: inherit;
|
||
|
}
|
||
|
|
||
|
:deep(.el-input__inner::-webkit-input-placeholder) {
|
||
|
color: #4d4d4d;
|
||
|
// font-size: 14px;
|
||
|
}
|
||
|
|
||
|
:deep(.el-input__inner),
|
||
|
:deep(.el-select .el-input),
|
||
|
:deep(.select-trigger) {
|
||
|
height: 100%;
|
||
|
font-size: 100%;
|
||
|
color: #4d4d4d;
|
||
|
}
|
||
|
|
||
|
:deep(.el-select .el-input .el-select__caret) {
|
||
|
font-size: 100%;
|
||
|
color: #006cff;
|
||
|
}
|
||
|
}
|
||
|
</style>
|