erp-el-element/CommonInput/MoreClass.vue

211 lines
5.0 KiB
Vue
Raw Normal View History

2024-05-06 14:57:20 +08:00
<template>
<div class="machinemore">
<el-popover
placement="bottom"
:offset="90"
:width="width"
v-model="classvisible"
trigger="manual"
popper-class="machine-box"
>
<el-form label-position="top" :inline="true">
<el-row :gutter="10">
<el-col :span="12" v-for="(item, index) in ClassData" :key="index">
<el-form-item
:label="item.lable"
:prop="item.prop"
v-show="item.show"
>
<el-select
v-model="formLabelAlign[item.enName]"
:size="item.size"
:placeholder="item.placeholder"
:clearable="item.clearable"
:filterable="item.filterable"
:disabled="item.disabled"
v-loading="item.loading"
@change="SelectChange(item, formLabelAlign[item.enName])"
@clear="Selectclear()"
>
<el-option
v-for="item in item.options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="btnbox1">
<el-button size="mini" plain @click="CancelClass">取消</el-button>
<el-button size="mini" type="primary" plain @click="SearchClass"
>查询</el-button
>
</div>
<el-input
readonly
slot="reference"
v-model="classval"
:placeholder="Title"
:size="size"
:disabled="disabled"
clearable
@focus="FocusInput"
@change="changeInput"
></el-input>
</el-popover>
</div>
</template>
<script>
export default {
name:'MoreClass',
props: {
disabled: {
type: Boolean,
default: false,
},
size: {
type: String,
default: "small",
},
width: {
type: String,
default: "450",
},
Title: {
type: String,
default: "请选择分类/品牌/型号",
},
data: {
type: Array,
default: () => {
return [];
},
},
formLabelAlign: {
type: Object,
default: () => {
return {};
},
},
},
components: {},
data() {
return {
classvisible: false, //机器分类更多弹出框
classval: "", //分类-input回显文本
result: [],
};
},
computed: {
//分类-需要合并的
ClassData() {
if (!this.data) return;
return this.data.filter((item) => item.classifiable);
},
},
methods: {
//———————————————————————— 分类input
// 获取焦点
FocusInput() {
this.classvisible = true;
},
// 改变值
changeInput() {},
//清空
ClearInput() {
this.classval = "";
this.classvisible = false;
this.$emit("resetfrom");
},
//———————————————————————— 分类select
//选择
SelectChange(item, val) {
this.$emit("SelectChange", item);
this.result = this.result.filter((e) => e);
const selectedOption = item.options.find((i) => i.value === val);
if (selectedOption) {
selectedOption.enName = item.enName;
}
const index = this.result.findIndex((e) => e.enName === item.enName);
if (index >= 0) {
if (this.ClassData.every((e) => e.options.length)) {
this.result.splice(index, 1, selectedOption);
} else {
this.result.splice(index, this.ClassData.length, selectedOption);
}
} else {
this.result.push(selectedOption);
}
this.classval = this.result
.filter((e) => e)
.map((e) => e.label)
.join("/");
},
//清空
Selectclear() {},
//———————————————————————— 分类弹出框
//分类查询
SearchClass() {
this.$emit("SearchClass");
},
//取消
CancelClass() {
this.classvisible = false;
},
},
};
</script>
<style scoped lang='scss'>
.machinemore {
width: 230px;
}
.machine-box {
height: 275px !important;
display: flex;
flex-wrap: wrap;
.machine {
margin-bottom: 5px;
}
.btnbox1 {
width: 100%;
display: flex;
justify-content: flex-end;
}
.el-form {
width: 100%;
}
.el-form-item {
width: 100%;
margin: 0px;
}
.el-select {
width: 100%;
}
}
::v-deep .el-form-item__label {
padding: 0px !important;
height: 20px;
line-height: 20px;
}
::v-deep .el-form-item__content {
line-height: 32px;
}
::v-deep .el-loading-spinner {
height: 32px;
margin-top: -15px;
.circular {
height: 26px !important;
width: 26px !important;
}
}
</style>