43f28a4225
- 新增MutiSelect组件支持下拉多选和复选框两种模式 - 重构异常管理界面，支持直接在表格中编辑异常记录 - 优化钢卷信息展示，增加刷新功能 - 修改AbnormalForm组件，使用MutiSelect替代原有单选组件 - 确保异常记录列表始终显示至少10行，方便快速添加
152 lines
3.4 KiB
Vue
152 lines
3.4 KiB
Vue
<template>
|
||
<div class="muti-select">
|
||
<!-- 下拉选择模式 -->
|
||
<el-select
|
||
v-if="type === 'select'"
|
||
v-model="innerValue"
|
||
multiple
|
||
:placeholder="placeholder"
|
||
:filterable="filterable"
|
||
:clearable="clearable"
|
||
:allow-create="allowAdd"
|
||
:disabled="disabled"
|
||
:size="size"
|
||
@change="handleChange"
|
||
>
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
|
||
<!-- 复选框模式 -->
|
||
<div v-else-if="type === 'checkbox'" class="checkbox-group">
|
||
<el-checkbox-group v-model="innerValue" @change="handleCheckboxChange">
|
||
<el-checkbox
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.value"
|
||
:disabled="disabled"
|
||
>
|
||
{{ item.label }}
|
||
</el-checkbox>
|
||
</el-checkbox-group>
|
||
<!-- <el-button
|
||
v-if="showSelectAll && options.length > 0"
|
||
type="text"
|
||
size="small"
|
||
@click="toggleSelectAll"
|
||
>
|
||
{{ isAllSelected ? '取消全选' : '全选' }}
|
||
</el-button> -->
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- v-model 绑定逗号分隔的字符串，可以 props 配置是否允许新增 -->
|
||
<script>
|
||
export default {
|
||
name: 'MutiSelect',
|
||
props: {
|
||
value: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
options: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
allowAdd: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
type: {
|
||
type: String,
|
||
default: 'select' // select or checkbox
|
||
},
|
||
placeholder: {
|
||
type: String,
|
||
default: '请选择'
|
||
},
|
||
filterable: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
clearable: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
size: {
|
||
type: String,
|
||
default: 'default' // large, default, small
|
||
},
|
||
showSelectAll: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
// 计算属性捕获实现双向绑定
|
||
computed: {
|
||
innerValue: {
|
||
get() {
|
||
if (!this.value) {
|
||
return [];
|
||
}
|
||
return this.value?.split(',');
|
||
},
|
||
set(val) {
|
||
const newValue = val?.join(',') ?? '';
|
||
this.$emit('input', newValue);
|
||
this.$emit('change', newValue);
|
||
}
|
||
},
|
||
// 是否全选
|
||
isAllSelected() {
|
||
return this.options.length > 0 && this.innerValue.length === this.options.length;
|
||
}
|
||
},
|
||
methods: {
|
||
// 处理选择变化
|
||
handleChange(val) {
|
||
this.$emit('change', val.join(','));
|
||
},
|
||
// 处理复选框变化
|
||
handleCheckboxChange(val) {
|
||
const newValue = val.join(',');
|
||
this.$emit('input', newValue);
|
||
this.$emit('change', newValue);
|
||
},
|
||
// 切换全选/取消全选
|
||
toggleSelectAll() {
|
||
if (this.isAllSelected) {
|
||
this.innerValue = [];
|
||
} else {
|
||
this.innerValue = this.options.map(item => item.value);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.muti-select {
|
||
width: 100%;
|
||
}
|
||
|
||
.checkbox-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
.checkbox-group .el-checkbox {
|
||
margin-right: 10px;
|
||
}
|
||
</style> |