<template>
|
<div class="search-list">
|
<div class="search-top">
|
<div class="left">
|
<el-button v-if="showAdd" type="primary" size="mini" @click="addBtn">
|
<div style="display: flex">
|
<!-- <img
|
v-if="ishumanResource"
|
src="../../../assets/DingDing/index.png"
|
style="width: 15px; height: 15px; margin-right: 5px; background-color: #ffffff; border-radius: 50%"
|
alt=""
|
/> -->
|
<slot name="buttonIcon" />
|
<p style="margin-top: 1px; line-height: 15px">{{ addTitle }}</p>
|
</div>
|
</el-button>
|
<slot name="leftButton" />
|
<div class="download" @click="downloadClick" :style="{ cursor: showDownload ? 'pointer' : 'no-drop' }">
|
<img src="@/assets/img/xiazai.png" style="width: 13px" />
|
</div>
|
</div>
|
<div v-if="amountView" class="amount">
|
<div v-if="twoTotalAmount" class="top_left" style="width: 8%; border: 0px">
|
<dl>
|
<dd class="font_weight">{{ twoObject.value }}</dd>
|
<dd class="top_right_bottom">{{ twoObject.label }}</dd>
|
</dl>
|
</div>
|
<div class="top_left" style="width: 10%">
|
<dl>
|
<dd class="font_weight">{{ totalObject.value }}</dd>
|
<dd class="top_right_bottom">{{ totalObject.label }}</dd>
|
</dl>
|
</div>
|
<div class="top_right" style="width: 50%; margin-right: 15px">
|
<dl v-for="item in otherOptions" :key="item.value">
|
<dd class="font_weight">
|
{{ item.value }}
|
</dd>
|
<dd class="top_right_bottom">
|
<span v-if="item.status" class="Badge" :class="item.status"></span>
|
<span>{{ item.label }}</span>
|
</dd>
|
</dl>
|
</div>
|
</div>
|
<div v-else class="amount"></div>
|
<div class="search">
|
<template v-if="isSearchForm">
|
<el-input
|
:placeholder="placeholder"
|
v-model.trim="searchInput"
|
class="input-with-select"
|
style="width: 410px"
|
clearable
|
@change="searchClick"
|
@clear="clearClick"
|
>
|
<i slot="suffix" class="el-icon-search" style="cursor: pointer" @click="searchClick"></i>
|
</el-input>
|
</template>
|
<div class="search-Btn">
|
<div class="common">
|
<img src="@/assets/img/shaixuan.png" style="width: 10px" />
|
<span>筛选</span>
|
</div>
|
<div class="common">
|
<i class="el-icon-s-fold"></i>
|
<span>分组</span>
|
</div>
|
<div class="common">
|
<i class="el-icon-star-on"></i>
|
<span>收藏</span>
|
</div>
|
</div>
|
</div>
|
<div v-if="showSet">
|
<i class="el-icon-setting cursor_pointer font_size_30" style="color: gray" @click="inspectionConfigClick"></i>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "CommonSearch",
|
components: {},
|
props: {
|
showAdd: {
|
type: Boolean,
|
default: true
|
},
|
showDownload: {
|
type: Boolean,
|
default: false
|
},
|
showActionBtn: {
|
type: Boolean,
|
default: true
|
},
|
placeholder: {
|
type: String,
|
default: "请输入内容"
|
},
|
addTitle: {
|
type: String,
|
default: "添加"
|
},
|
totalObject: {
|
type: Object,
|
default: () => {
|
return {
|
value: 0,
|
label: "全部物料"
|
}
|
}
|
},
|
otherOptions: {
|
type: Array,
|
default: () => [
|
{
|
value: 2,
|
label: "安全库存",
|
status: "success"
|
},
|
{
|
value: 12,
|
label: "欠料",
|
status: "error"
|
},
|
{
|
value: 2,
|
label: "安全库存",
|
status: "success"
|
},
|
{
|
value: 12,
|
label: "欠料",
|
status: "error"
|
}
|
]
|
},
|
searchSel: {
|
type: Object,
|
default: () => {
|
return {
|
value: "name",
|
label: ""
|
}
|
}
|
},
|
twoTotalAmount: {
|
type: Boolean,
|
default: false
|
},
|
twoObject: {
|
type: Object,
|
default: () => {
|
return {
|
value: 0,
|
label: "车间总量"
|
}
|
}
|
},
|
amountView: {
|
type: Boolean,
|
default: true
|
},
|
isSearchForm: {
|
type: Boolean,
|
default: true
|
},
|
showSet: {
|
type: Boolean,
|
default: false
|
},
|
inputName: {
|
type: String,
|
default: ""
|
}
|
},
|
watch: {
|
inputName(val) {
|
this.searchInput = val
|
}
|
},
|
data() {
|
return {
|
searchInput: "",
|
searchSelValue: this.searchSel
|
}
|
},
|
methods: {
|
// 搜索
|
searchClick() {
|
this.$emit("searchClick", this.searchInput)
|
},
|
// 清除
|
clearClick() {
|
this.$emit("clearClick", 1)
|
},
|
// 添加
|
addBtn() {
|
this.$emit("addCommonClick")
|
},
|
// 下载
|
downloadClick() {
|
this.$emit("downloadClick")
|
},
|
// 模具-检查配置
|
inspectionConfigClick() {
|
this.$emit("inspectionConfigClick")
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.search-list {
|
font-size: 13px;
|
color: #333;
|
width: 100%;
|
.search-top {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
.left {
|
display: flex;
|
width: 150px;
|
.download {
|
width: 30px;
|
height: 30px;
|
line-height: 35px;
|
text-align: center;
|
border: 1px solid #b1b1b1;
|
border-radius: 4px;
|
cursor: pointer;
|
}
|
}
|
.amount {
|
flex: 1;
|
display: flex;
|
justify-content: right;
|
.top_left {
|
width: 10%;
|
border-right: 1px solid #ccc;
|
display: flex;
|
padding-right: 2%;
|
flex-wrap: nowrap;
|
flex-direction: row;
|
align-content: center;
|
justify-content: center;
|
align-items: center;
|
text-align: center;
|
.font_weight {
|
font-weight: 500;
|
font-size: 18px;
|
font-family: "DIN Alternate", serif;
|
}
|
.top_right_bottom {
|
font-size: 12px;
|
}
|
}
|
.top_right {
|
display: flex;
|
flex-direction: row;
|
flex-wrap: nowrap;
|
align-content: center;
|
align-items: center;
|
justify-content: space-around;
|
width: calc(90% - 197px);
|
text-align: center;
|
color: #666;
|
margin-left: 10px;
|
.font_weight {
|
font-weight: 500;
|
font-size: 18px;
|
font-family: "DIN Alternate", serif;
|
}
|
.top_right_bottom {
|
font-size: 12px;
|
}
|
}
|
}
|
.search {
|
display: flex;
|
align-items: center;
|
width: auto;
|
height: 60px;
|
line-height: 60px;
|
margin-right: 20px;
|
margin-left: 20px;
|
.el-icon-search {
|
margin-top: 22px;
|
}
|
.search-Btn {
|
display: flex;
|
margin-left: 40px;
|
background: #f3f3f3;
|
height: 30px;
|
border-radius: 4px;
|
align-items: center;
|
.common {
|
width: 50px;
|
text-align: center;
|
cursor: no-drop;
|
}
|
}
|
}
|
}
|
.success {
|
background: #06c062;
|
}
|
.yellow {
|
background: #e6a23c;
|
}
|
}
|
|
::v-deep {
|
.el-input__inner {
|
height: 30px;
|
//color: #2765e1;
|
}
|
.el-input__prefix,
|
.el-input__suffix {
|
height: 30px;
|
}
|
.el-input__icon {
|
line-height: 30px;
|
}
|
.search {
|
.el-select .el-input {
|
width: 130px;
|
}
|
.input-with-select .el-input-group__prepend {
|
background-color: #da2323;
|
}
|
// .el-input__suffix {
|
// // 处理前缀图标不垂直居中的问题
|
// height: auto;
|
// font-size: 15px;
|
// &-inner {
|
// flex-direction: row-reverse;
|
// -webkit-flex-direction: row-reverse;
|
// display: flex;
|
// }
|
// }
|
.el-input--suffix .el-input__inner {
|
padding-right: 45px;
|
}
|
.search-sel .el-input--suffix .el-input__inner {
|
padding-left: 5px;
|
padding-right: 20px;
|
}
|
}
|
}
|
</style>
|
