erp-el-element/CommonInput/Compound.vue

248 lines
5.3 KiB
Vue
Raw Normal View History

2024-05-06 14:57:20 +08:00
<template>
<div>
<el-form label-position="top" :inline="true" class="popover">
2024-05-06 15:14:21 +08:00
<el-select
v-model="select"
placeholder="请选择"
class="dateselect"
:size="size"
@keydown.enter.native="search"
@change="changeText"
>
<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"
2024-05-06 14:57:20 +08:00
>
2024-05-06 15:14:21 +08:00
</el-option>
</el-select>
2024-05-06 14:57:20 +08:00
<el-popover
placement="bottom"
trigger="manual"
ref="popover"
popper-class="popperOptions"
v-model="popBox"
>
<el-input
v-model="textarea"
type="textarea"
:rows="12"
placeholder="一行一项最多支持200行"
resize="none"
@input="changeText('textarea')"
/>
<el-divider class="divider"></el-divider>
<div class="btnbox">
<div>
<el-button size="mini" @click="close">关闭</el-button>
</div>
<div>
<el-button size="mini" @click="clear">清空</el-button>
2024-05-06 15:14:21 +08:00
<el-button size="mini" type="primary" plain @click="search"
2024-05-06 14:57:20 +08:00
>查询</el-button
>
</div>
</div>
<el-input
slot="reference"
v-model="value"
:size="size"
class="compound-input"
:placeholder="placeholder"
@input="changeText('value')"
2024-05-06 15:14:21 +08:00
@keydown.enter.native="search"
2024-05-06 14:57:20 +08:00
>
<i
slot="suffix"
class="iconfont iconicon-piliangcaozuo imeiicondefault"
:class="popBox ? 'imeiiconActive' : 'imeiicon'"
style="font-size: 12px; margin-top: 4px"
@click.prevent="eject"
></i>
</el-input>
</el-popover>
</el-form>
</div>
</template>
<script>
export default {
2024-05-06 17:25:34 +08:00
name:"erpCompound",
2024-05-06 14:57:20 +08:00
props: {
size: {
type: String,
default: "small",
},
default: {
2024-05-06 15:14:21 +08:00
default: null,
2024-05-06 14:57:20 +08:00
},
data: {
type: Array,
default: () => {
return [];
},
},
},
components: {},
data() {
return {
select: this.default,
value: "",
textarea: "",
values: "",
popBox: false,
placeholder: "请输入内容",
};
},
computed: {
// 带弹出框
PopUp() {
if (!this.data) return;
2024-05-06 15:14:21 +08:00
let arr = [];
arr = this.data.filter((item) => item.isPopUp && item.show);
if (arr && arr.length) {
arr.findIndex((e) => e.enName == this.select) == -1
? this.$set(this, "select", arr[0].enName)
: "";
}
return arr;
2024-05-06 14:57:20 +08:00
},
},
methods: {
changeText(mark) {
2024-05-06 15:14:21 +08:00
if (mark) {
const rep = /[^\s]+/g;
let values = "";
if (mark == "textarea") {
this.value = "";
values = this._.words(this.textarea, rep).join();
} else {
this.textarea = "";
values = this.value;
}
this.values = values;
2024-05-06 14:57:20 +08:00
}
2024-05-06 15:14:21 +08:00
this.$emit("CompoundSearch", this.select, this.values);
2024-05-06 14:57:20 +08:00
},
//弹出层
eject() {
this.popBox = !this.popBox;
},
//清除
clear() {
2024-05-06 15:14:21 +08:00
this.$set(this, "textarea", "");
this.$set(this, "value", "");
this.$set(this, "values", "");
2024-05-06 14:57:20 +08:00
this.disable = false;
},
//关闭弹出层
close() {
this.popBox = false;
},
//回车事件
2024-05-06 15:14:21 +08:00
search() {
this.close();
this.$emit("SearchCompound");
2024-05-06 14:57:20 +08:00
},
},
};
</script>
<style scoped lang='scss'>
.popover {
width: 330px;
display: flex;
line-height: 0;
span {
width: 100%;
}
}
::v-deep .dateselect {
flex-grow: 0;
flex-shrink: 0;
min-width: 105px;
max-width: 155px;
color: #fff;
text-align: start;
.el-input__prefix {
position: relative;
top: 0;
left: 0;
padding: 0 35px 0 18px;
box-sizing: border-box;
color: #606266;
visibility: hidden;
}
.el-input {
height: 100%;
}
.el-input__inner {
padding: 0 15px;
border-radius: 4px 0 0 4px;
z-index: 1;
}
.el-input__inner:hover {
z-index: 1;
}
.el-input__suffix {
display: flex;
align-items: flex-start;
z-index: 50;
}
.el-input__inner {
position: absolute;
left: 0;
}
}
::v-deep .compound-input {
flex-grow: 1;
margin-left: -1px;
.imeiicondefault {
padding: 5px;
border-radius: 4px;
background: #f0f2f5;
cursor: pointer;
}
.imeiiconActive {
color: #409eff;
background: #e9f1fc;
}
.el-input__inner {
position: relative;
border-radius: 0 4px 4px 0 !important;
}
.el-input__inner:hover {
position: relative;
z-index: 1;
}
.el-input.is-active .el-input__inner,
.el-input__inner:focus {
position: relative;
z-index: 1;
}
.el-input__suffix {
display: flex;
align-items: center;
z-index: 50;
}
}
.btnbox {
padding: 5px;
display: flex;
justify-content: space-between;
border: none;
}
.divider {
margin: 0;
}
::v-deep .el-textarea__inner {
border: none;
}
</style>