From 5ecb7958c96d3f0b6d47b79aff7eb306c2cf690f Mon Sep 17 00:00:00 2001
From: charles <981744753@qq.com>
Date: 星期二, 06 八月 2024 11:16:58 +0800
Subject: [PATCH] gitlab上面的wms转移到公司git
---
src/components/makepager/SearchCommonView.vue | 704 ++++++++++++++++++++++++++++-----------------------------
1 files changed, 345 insertions(+), 359 deletions(-)
diff --git a/src/components/makepager/SearchCommonView.vue b/src/components/makepager/SearchCommonView.vue
index c44e993..4d3be9a 100644
--- a/src/components/makepager/SearchCommonView.vue
+++ b/src/components/makepager/SearchCommonView.vue
@@ -2,16 +2,12 @@
<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" />
+ <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>
+ <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">
@@ -42,19 +38,11 @@
<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"
- >
+ <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 }}</span>
+ <span style="margin-left: 5px">{{ val?.title ?? val }}</span>
<i @click="delSelectClick(val)" class="el-icon-close" style="margint: 0 5px"></i>
</div>
</div>
@@ -67,32 +55,13 @@
<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="switchStatusKeywords($event, selList)"
- >
+ <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 taskStatusMap"
- :key="key"
- :command="item.title"
- :class="{ selected: status == item.title }"
- >
+ <el-dropdown-item v-for="(item, key) in screenArray" :key="key" :command="item" :class="{ selected: status == item.title }">
<div class="dropdown-view">
<i v-show="getClass(selList, item)" class="el-icon-check icon-view"></i>
{{ item.title }}
@@ -118,358 +87,375 @@
</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"
+ 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: '鍏ㄩ儴鐗╂枡',
+ }
},
- {
- value: 12,
- label: "娆犳枡",
- status: "error"
+ },
+ 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: '',
+ }
},
- {
- value: 2,
- label: "瀹夊叏搴撳瓨",
- status: "success"
+ },
+ twoTotalAmount: {
+ type: Boolean,
+ default: false,
+ },
+ twoObject: {
+ type: Object,
+ default: () => {
+ return {
+ value: 0,
+ label: '杞﹂棿鎬婚噺',
+ }
},
- {
- value: 12,
- label: "娆犳枡",
- status: "error"
- }
- ]
+ },
+ 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: () => [],
+ },
},
- searchSel: {
- type: Object,
- default: () => {
- return {
- value: "name",
- label: ""
+ 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: [],
}
},
- twoTotalAmount: {
- type: Boolean,
- default: false
+ mounted() {
+ this.searchTaskMap.forEach((ele) => {
+ this.selList.push(ele)
+ })
+ this.selectArr = this.searchTaskMap
+ this.searchInput = this.inputName
},
- twoObject: {
- type: Object,
- default: () => {
- return {
- value: 0,
- label: "杞﹂棿鎬婚噺"
+ 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) {
+ this.status = command
+ const oldValue = item
+ this.selectArr = oldValue
+ // 妫�鏌ユ暟缁勪腑鏄惁鍖呭惈鐗瑰畾鐨勫��
+ const containsValue = item.some((obj) => {
+ // 浣跨敤Object.values鑾峰彇瀵硅薄鍊肩殑鏁扮粍
+ const values = Object.values(obj)
+ // 浣跨敤includes妫�鏌ユ暟缁勪腑鏄惁鍖呭惈瑕佹煡鎵剧殑鍊�
+ return values.includes(command.id)
+ })
+ if (containsValue) {
+ oldValue.splice(
+ oldValue.findIndex((e) => e === command),
+ 1,
+ )
+ } else {
+ oldValue.push(command)
}
- }
- },
- amountView: {
- type: Boolean,
- default: true
- },
- isSearchForm: {
- type: Boolean,
- default: true
- },
- showSet: {
- type: Boolean,
- default: false
- },
- inputName: {
- type: String,
- default: ""
- },
- showSreen: {
- type: Boolean,
- default: true
- }
- },
- 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: "",
- taskStatusMap: [
- { value: "0", type: "default", title: "瀹屾垚" },
- { value: "1", type: "default", title: "灏辩窉" }
- ],
- selList: [],
- selectArr: []
- }
- },
- 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")
- },
- switchStatusKeywords(command, item) {
- console.log("index", command)
- this.status = command
- const oldValue = item
- console.log(oldValue)
- this.selectArr = oldValue
- if (item.includes(command)) {
- oldValue.splice(
- oldValue.findIndex((e) => e === command),
- 1
+ this.$emit('switchKeywords', item)
+ },
+ // 鍒犻櫎绛涢�夊唴瀹�
+ delSelectClick(item) {
+ this.selectArr.splice(
+ this.selectArr.findIndex((e) => e === item),
+ 1,
)
- } else {
- oldValue.push(command)
- }
+ this.$emit('delSelectClick', item)
+ },
},
- // 鍒犻櫎绛涢�夊唴瀹�
- delSelectClick(item) {
- console.log(item)
- this.selectArr.splice(
- this.selectArr.findIndex((e) => e === item),
- 1
- )
- }
}
-}
</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 {
+ .search-list {
+ font-size: 13px;
+ color: #333;
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 {
+ .search-top {
+ width: 100%;
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 {
+ .left {
display: flex;
- margin-left: 40px;
- background: #f3f3f3;
- height: 30px;
- border-radius: 4px;
- align-items: center;
- .common {
- width: 50px;
+ min-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;
}
}
- .pre-views {
- border: 1px solid #ccc;
- font-size: 12px;
- margin-right: 5px;
- border-radius: 3px;
- background: #f0f0f0;
- &:last-child {
- margin-right: 0px;
+ .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;
+ }
}
- .success {
- background: #06c062;
+ .selected {
+ color: #606266;
}
- .yellow {
- background: #e6a23c;
+ .dropdown-view {
+ position: relative;
+ .icon-view {
+ position: absolute;
+ left: -15px;
+ top: 11px;
+ }
}
-}
-.selected {
- color: #409eff;
-}
-.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;
+ ::v-deep {
+ .el-input__inner {
+ height: 30px;
+ color: #2765e1;
}
- .input-with-select .el-input-group__prepend {
- padding: 0 10px;
- background-color: #ffffff;
+ .el-input__prefix,
+ .el-input__suffix {
+ height: 30px;
}
- // .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;
+ .el-input__icon {
+ line-height: 30px;
}
- .search-sel .el-input--suffix .el-input__inner {
- padding-left: 5px;
- padding-right: 20px;
+ .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;
}
}
- .el-dropdown-menu__item {
- padding-left: 20px;
- }
-}
</style>
--
Gitblit v1.8.0