erp-el-element/CommonInput/Composite.vue

304 lines
5.9 KiB
Vue

<template>
<div>
<el-input
:placeholder="content"
v-model="form.value"
class="input-with-select"
:size="size"
@input="input"
@keydown.enter.native="Enter"
>
<el-select
v-model="form.select"
slot="prepend"
:placeholder="name"
class="dateselect"
:style="width"
@change="input"
@keydown.enter.native="Enter"
>
<template slot="prefix">
{{ (data.find((e) => e.value == form.select) || {}).label }}
</template>
<el-option
v-for="item in data"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-input>
</div>
</template>
<script>
export default {
name: "erpComposite",
props: {
size: {
type: String,
default: "small",
},
width: {
type: Number,
default: 50,
},
name: {
type: String,
default: "",
},
default: {
default: null,
},
content: {
type: String,
default: "",
},
data: {
type: Array,
default: () => {
return [];
},
},
enName: {
type: String,
default: "",
},
},
components: {},
data() {
return {
form: {
value: "",
select: this.default,
enName: this.enName,
},
};
},
methods: {
// 输入事件
input() {
this.$emit("CompositeVal", this.form);
},
//回车事件
Enter() {
// this.$emit("select", this.form);
},
},
};
</script>
<style scoped lang='scss'>
::v-deep .input-with-select .el-input-group__prepend {
background-color: #fff;
border: none !important;
}
::v-deep .el-input--prefix .el-input__inner {
padding-left: 15px;
}
::v-deep .dateselect {
color: #606266;
text-align: start;
.el-input__prefix {
position: relative;
left: 0;
padding: 0 20px 0 18px;
box-sizing: border-box;
color: #606266;
visibility: hidden;
}
.el-input__inner {
padding: 0 0 0 15px;
border-radius: 4px 0 0 4px;
z-index: 1;
}
.el-input__suffix {
display: flex;
align-items: flex-start;
z-index: 50;
margin-top: 1px;
}
.el-input__inner {
position: relative;
left: 0;
border: 1px solid #dcdfe6 !important;
}
}
::v-deep .el-select {
margin: 0 -21px !important;
box-sizing: border-box;
}
::v-deep .el-input__inner:hover {
position: relative;
z-index: 99 !important;
border: 1px solid #c0c4cc !important;
}
::v-deep .el-input__inner:focus {
position: relative;
z-index: 99 !important;
border: 1px solid #1890ff !important;
}
</style>
<!-- 两个select下拉框联动 -->
<!-- <template>
<div>
<el-input
placeholder="请输入内容"
v-model="value"
class="input-with-select"
:size="size"
>
<el-select
v-model="select"
slot="prepend"
placeholder="请选择"
class="dateselect"
>
<template slot="prefix">
{{ (PopUp.find((e) => e.enName == select) || {}).lable }}
</template>
<el-option
v-for="item in PopUp"
:key="item.enName"
:label="item.lable"
:value="item.enName"
>
</el-option>
</el-select>
<el-select
v-model="select"
slot="prepend"
placeholder="请选择"
class="dateselect dateselect-two"
>
<template slot="prefix">
{{ (PopUp.find((e) => e.enName == select) || {}).lable }}
</template>
<el-option
v-for="item in PopUp"
:key="item.enName"
:label="item.lable"
:value="item.enName"
>
</el-option>
</el-select>
</el-input>
</div>
</template>
<script>
export default {
props: {
size: {
type: String,
default: "small",
},
data: {
type: Array,
default: () => {
return [];
},
},
formLabelAlign: {
type: Object,
default: () => {
return {};
},
},
},
components: {},
data() {
return {
value: "",
select: "",
};
},
computed: {
// 带弹出框
PopUp() {
if (!this.data) return;
return this.data.filter((item) => item.isPopUp);
},
},
methods: {},
};
</script>
<style scoped lang='scss'>
::v-deep .el-select .el-input {
// flex: 1;
width: 100px;
}
::v-deep .input-with-select .el-input-group__prepend {
background-color: #fff;
border: none !important;
padding: 0;
}
::v-deep .el-input--prefix .el-input__inner {
padding-left: 15px;
}
::v-deep .dateselect {
// min-width: 105px;
color: #606266;
text-align: start;
.el-input__prefix {
position: relative;
left: 0;
padding: 0 10px 0 30px;
box-sizing: border-box;
color: #606266;
visibility: hidden;
}
.el-input__inner {
padding: 0 0 0 15px;
border-radius: 4px 0 0 4px;
z-index: 1;
}
.el-input__suffix {
display: flex;
align-items: flex-start;
z-index: 50;
margin-top: 1px;
}
.el-input__inner {
position: relative;
margin-left: 2px;
left: 0;
border: 1px solid #dcdfe6 !important;
}
}
::v-deep .el-select {
margin: 0 0px !important;
box-sizing: border-box;
}
::v-deep .el-input__inner:hover {
position: relative;
z-index: 50;
border: 1px solid #c0c4cc !important;
}
::v-deep .el-input__inner:focus {
position: relative;
z-index: 55;
border: 1px solid #1890ff !important;
}
::v-deep .dateselect-two {
.el-input__inner {
border-radius: 0px;
margin-left: 1px;
}
}
::v-deep .dateselect-two:hover {
.el-input__inner {
z-index: 999;
}
}
</style> -->