From 03cfba0f636b42417070fc8caef44bcdd792a085 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期二, 07 五月 2024 17:34:37 +0800
Subject: [PATCH] 概述 出库模块 编辑的时候循环处理对应产品调用接口获取在库数量的逻辑处理
---
src/components/makepager/SearchCommonView.vue | 141 ++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 133 insertions(+), 8 deletions(-)
diff --git a/src/components/makepager/SearchCommonView.vue b/src/components/makepager/SearchCommonView.vue
index 66c8f07..fc3e2ea 100644
--- a/src/components/makepager/SearchCommonView.vue
+++ b/src/components/makepager/SearchCommonView.vue
@@ -2,7 +2,9 @@
<div class="search-list">
<div class="search-top">
<div class="left">
- <el-button v-if="showAdd" type="primary" size="mini" @click="addBtn">{{ addTitle }}</el-button>
+ <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" />
@@ -49,19 +51,60 @@
@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 class="common">
+ <div v-if="showSreen" class="common no-cursor">
<img src="@/assets/img/shaixuan.png" style="width: 10px" />
<span>绛涢��</span>
</div>
- <div class="common">
+ <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">
+ <div class="common no-cursor">
<i class="el-icon-star-on"></i>
<span>鏀惰棌</span>
</div>
@@ -82,6 +125,10 @@
showAdd: {
type: Boolean,
default: true
+ },
+ isDisabled: {
+ type: Boolean,
+ default: false
},
showDiscard: {
default: false
@@ -173,6 +220,18 @@
inputName: {
type: String,
default: ""
+ },
+ showSreen: {
+ type: Boolean,
+ default: true
+ },
+ searchTaskMap: {
+ type: Array,
+ default: () => []
+ },
+ screenArray: {
+ type: Array,
+ default: () => []
}
},
watch: {
@@ -180,11 +239,28 @@
this.searchInput = val
}
},
+ computed: {
+ getClass() {
+ return function (row, i) {
+ return row.includes(i.title) ? "selected" : null
+ }
+ }
+ },
data() {
return {
searchInput: "",
- searchSelValue: this.searchSel
+ 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: {
// 鎼滅储
@@ -214,6 +290,31 @@
// 妯″叿-妫�鏌ラ厤缃�
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)
}
}
}
@@ -297,7 +398,7 @@
margin-right: 20px;
margin-left: 20px;
.el-icon-search {
- margin-top: 22px;
+ margin-top: 10px;
}
.search-Btn {
display: flex;
@@ -309,7 +410,16 @@
.common {
width: 50px;
text-align: center;
- cursor: no-drop;
+ }
+ }
+ .pre-views {
+ border: 1px solid #c0c0c0;
+ font-size: 12px;
+ margin-right: 5px;
+ border-radius: 3px;
+ background: #f0f0f0;
+ &:last-child {
+ margin-right: 0px;
}
}
}
@@ -319,6 +429,17 @@
}
.yellow {
background: #e6a23c;
+ }
+}
+.selected {
+ color: #606266;
+}
+.dropdown-view {
+ position: relative;
+ .icon-view {
+ position: absolute;
+ left: -15px;
+ top: 11px;
}
}
@@ -339,7 +460,8 @@
width: 130px;
}
.input-with-select .el-input-group__prepend {
- background-color: #da2323;
+ padding: 0 10px;
+ background-color: #ffffff;
}
// .el-input__suffix {
// // 澶勭悊鍓嶇紑鍥炬爣涓嶅瀭鐩村眳涓殑闂
@@ -359,5 +481,8 @@
padding-right: 20px;
}
}
+ .el-dropdown-menu__item {
+ padding-left: 20px;
+ }
}
</style>
--
Gitblit v1.8.0