<template>
|
<div class="search-list">
|
<div class="search-top">
|
<div class="left">
|
<el-button v-if="showAdd" :disabled="isDisabled" type="primary" size="mini" @click="addBtn">{{
|
addTitle
|
}}</el-button>
|
<el-button v-if="showDiscard" size="mini" @click="discardBtn" style="margin-left: 0px">{{ "取消" }}</el-button>
|
<div class="download" @click="downloadClick" :style="{ cursor: showDownload ? 'pointer' : 'no-drop' }">
|
<img src="@/assets/img/xiazai.png" style="width: 13px" />
|
</div>
|
<el-button v-if="showApply" type="text" size="mini" @click="addBtn" style="margin-left: 10px">{{
|
"应用全部"
|
}}</el-button>
|
<slot name="leftButton" />
|
</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, index) in otherOptions" :key="index">
|
<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"
|
>
|
<template v-if="selectArr?.length > 0" slot="prepend">
|
<div style="display: flex">
|
<div v-for="(val, i) in selectArr" :key="i" class="pre-views">
|
<span style="margin-left: 5px">{{ val?.title ?? val }}</span>
|
<i @click="delSelectClick(val)" class="el-icon-close" style="margint: 0 5px"></i>
|
</div>
|
</div>
|
</template>
|
<i slot="suffix" class="el-icon-search" style="cursor: pointer" @click="searchClick"></i>
|
</el-input>
|
</template>
|
<div class="search-Btn">
|
<div v-if="showSreen" class="common no-cursor">
|
<img src="@/assets/img/shaixuan.png" style="width: 10px" />
|
<span>筛选</span>
|
</div>
|
<el-dropdown
|
v-else
|
style="
|
cursor: pointer;
|
font-weight: 500;
|
font-size: 16px;
|
line-height: 1;
|
letter-spacing: 0.09px;
|
color: #202224;
|
"
|
trigger="click"
|
:hide-on-click="false"
|
placement="bottom"
|
@command="switchKeywords($event, selList)"
|
>
|
<div class="common yes-cursor">
|
<img src="@/assets/img/shaixuan.png" style="width: 10px" />
|
<span>筛选</span>
|
</div>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item
|
v-for="(item, key) in screenArray"
|
:key="key"
|
:command="item.title"
|
:class="{ selected: status == item.title }"
|
>
|
<div class="dropdown-view">
|
<i v-show="getClass(selList, item)" class="el-icon-check icon-view"></i>
|
{{ item.title }}
|
</div>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
<div class="common no-cursor">
|
<i class="el-icon-s-fold"></i>
|
<span>分组</span>
|
</div>
|
<div class="common no-cursor">
|
<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: "SearchCommonView",
|
components: {},
|
props: {
|
showAdd: {
|
type: Boolean,
|
default: true
|
},
|
isDisabled: {
|
type: Boolean,
|
default: false
|
},
|
showDiscard: {
|
default: false
|
},
|
showDownload: {
|
type: Boolean,
|
default: false
|
},
|
showApply: {
|
type: Boolean,
|
default: false
|
},
|
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: ""
|
},
|
showSreen: {
|
type: Boolean,
|
default: true
|
},
|
searchTaskMap: {
|
type: Array,
|
default: () => []
|
},
|
screenArray: {
|
type: Array,
|
default: () => []
|
}
|
},
|
watch: {
|
inputName(val) {
|
this.searchInput = val
|
}
|
},
|
computed: {
|
getClass() {
|
return function (row, i) {
|
return row.includes(i.title) ? "selected" : null
|
}
|
}
|
},
|
data() {
|
return {
|
searchInput: "",
|
searchSelValue: this.searchSel,
|
status: "",
|
selList: [],
|
selectArr: []
|
}
|
},
|
mounted() {
|
this.searchTaskMap.forEach((ele) => {
|
this.selList.push(ele.title)
|
})
|
this.selectArr = this.searchTaskMap
|
this.searchInput = this.inputName
|
},
|
methods: {
|
// 搜索
|
searchClick() {
|
this.$emit("searchClick", this.searchInput)
|
},
|
// 清除
|
clearClick() {
|
this.$emit("clearClick", 1)
|
},
|
// 添加
|
addBtn() {
|
this.$emit("addCommonClick")
|
},
|
// 丢弃
|
discardBtn() {
|
this.$emit("discardBtnClick")
|
},
|
// 下载
|
downloadClick() {
|
this.$emit("downloadClick")
|
},
|
// 丢弃
|
applyBtn() {
|
this.$emit("applyBtnClick")
|
},
|
// 模具-检查配置
|
inspectionConfigClick() {
|
this.$emit("inspectionConfigClick")
|
},
|
switchKeywords(command, item) {
|
console.log("index", command, item)
|
this.status = command
|
const oldValue = item
|
console.log(oldValue)
|
this.selectArr = oldValue
|
if (item.includes(command)) {
|
oldValue.splice(
|
oldValue.findIndex((e) => e === command),
|
1
|
)
|
} else {
|
oldValue.push(command)
|
}
|
this.$emit("switchKeywords", item)
|
},
|
// 删除筛选内容
|
delSelectClick(item) {
|
console.log(item)
|
this.selectArr.splice(
|
this.selectArr.findIndex((e) => e === item),
|
1
|
)
|
this.$emit("delSelectClick", item)
|
}
|
}
|
}
|
</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: 210px;
|
margin-left: 20px;
|
.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";
|
}
|
.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";
|
}
|
.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: 10px;
|
}
|
.search-Btn {
|
display: flex;
|
margin-left: 40px;
|
background: #f3f3f3;
|
height: 30px;
|
border-radius: 4px;
|
align-items: center;
|
.common {
|
width: 50px;
|
text-align: center;
|
}
|
}
|
.pre-views {
|
border: 1px solid #c0c0c0;
|
font-size: 12px;
|
margin-right: 5px;
|
border-radius: 3px;
|
background: #f0f0f0;
|
&:last-child {
|
margin-right: 0px;
|
}
|
}
|
}
|
}
|
.success {
|
background: #06c062;
|
}
|
.yellow {
|
background: #e6a23c;
|
}
|
}
|
.selected {
|
color: #606266;
|
}
|
.dropdown-view {
|
position: relative;
|
.icon-view {
|
position: absolute;
|
left: -15px;
|
top: 11px;
|
}
|
}
|
|
::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 {
|
padding: 0 10px;
|
background-color: #ffffff;
|
}
|
// .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;
|
}
|
}
|
.el-dropdown-menu__item {
|
padding-left: 20px;
|
}
|
}
|
</style>
|
