From 33dd4cb476136dbcb57ac71c9bb441d3418a507f Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期四, 21 九月 2023 20:24:31 +0800
Subject: [PATCH] style: 产品管理模块样式调整,迁移搜索组件
---
src/views/productManage/product/index.vue | 84 ++++++--
package-lock.json | 10
src/components/index.js | 3
src/components/layout/components/appHeader/index.vue | 17
src/components/makepager/CommonSearch.vue | 379 +++++++++++++++++++++++++++++++++++++
src/views/productManage/index.vue | 14
public/images/download.png | 0
src/components/layout/index.vue | 2
src/components/makepager/TableCommonView.vue | 17 +
src/assets/style/index.scss | 21 ++
src/assets/style/variable.scss | 2
package.json | 2
public/images/filter.png | 0
src/components/layout/components/AppMain.vue | 6
14 files changed, 510 insertions(+), 47 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 2c51123..8f0335e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,8 @@
"docx-preview": "^0.1.18",
"downloadjs": "^1.4.7",
"element-ui": "^2.15.13",
+ "faker": "^5.5.3",
+ "lodash": "^4.17.21",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
@@ -5826,6 +5828,11 @@
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
"dev": true
},
+ "node_modules/faker": {
+ "version": "5.5.3",
+ "resolved": "https://registry.npmmirror.com/faker/-/faker-5.5.3.tgz",
+ "integrity": "sha512-wLTv2a28wjUyWkbnX7u/ABZBkUkIF2fCd73V6P2oFqEGEktDfzWx4UxrSqtPRw0xPRAcjeAOIiJWqZm3pP4u3g=="
+ },
"node_modules/fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -7396,8 +7403,7 @@
"node_modules/lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
- "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
- "dev": true
+ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/lodash.debounce": {
"version": "4.0.8",
diff --git a/package.json b/package.json
index c408a92..306b480 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
"docx-preview": "^0.1.18",
"downloadjs": "^1.4.7",
"element-ui": "^2.15.13",
+ "faker": "^5.5.3",
+ "lodash": "^4.17.21",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
diff --git a/public/images/download.png b/public/images/download.png
new file mode 100644
index 0000000..8dd6e61
--- /dev/null
+++ b/public/images/download.png
Binary files differ
diff --git a/public/images/filter.png b/public/images/filter.png
new file mode 100644
index 0000000..ab3dd53
--- /dev/null
+++ b/public/images/filter.png
Binary files differ
diff --git a/src/assets/style/index.scss b/src/assets/style/index.scss
index d4cf06e..b5a740a 100644
--- a/src/assets/style/index.scss
+++ b/src/assets/style/index.scss
@@ -135,3 +135,24 @@
margin-left: auto;
}
}
+
+.border_radius_12{
+ border-radius: 12px;
+}
+
+::-webkit-scrollbar {
+ width: 8px !important;
+ height: 8px !important;
+ -webkit-appearance: none;
+ background-color: #00000040;
+}
+::-webkit-scrollbar-thumb {
+ box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
+ background: #e1e1e1;
+}
+::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
+ // border-radius: 10px;
+ background: #ffffff;
+ // background:#2c60c5;
+}
diff --git a/src/assets/style/variable.scss b/src/assets/style/variable.scss
index 3f1ad83..af239e6 100644
--- a/src/assets/style/variable.scss
+++ b/src/assets/style/variable.scss
@@ -20,4 +20,4 @@
$color-border-4: #f2f6fc;
// 鑳屾櫙
-$color-bg: #f8f8f9;
+$color-bg: #E6ECF2;
diff --git a/src/components/index.js b/src/components/index.js
index 14771f4..a6a8abc 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -4,8 +4,9 @@
import PagerView from "@/components/makepager/pager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import DetailListCommonBtn from "@/components/makepager/DetailListCommonBtn"
+import CommonSearch from "@/components/makepager/CommonSearch"
-const components = [SearchCommonView, PublicFunctionBtnView, PagerView, TableCommonView, DetailListCommonBtn]
+const components = [SearchCommonView, PublicFunctionBtnView, PagerView, TableCommonView, DetailListCommonBtn, CommonSearch]
components.forEach((component) => {
Vue.component(component.name, component)
})
diff --git a/src/components/layout/components/AppMain.vue b/src/components/layout/components/AppMain.vue
index 1572948..4c4dbb1 100644
--- a/src/components/layout/components/AppMain.vue
+++ b/src/components/layout/components/AppMain.vue
@@ -24,16 +24,16 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.app-main {
- margin-left: 10px;
box-sizing: border-box;
display: flex;
flex: 1;
flex-direction: column;
- // height: 100%;
- width: calc(100% - 210px);
+ width: calc(100% - 200px);
+
.app-main-content {
width: 100%;
overflow-y: hidden;
+ height: calc(100% - 50px);
}
}
</style>
diff --git a/src/components/layout/components/appHeader/index.vue b/src/components/layout/components/appHeader/index.vue
index e83742e..f918be6 100644
--- a/src/components/layout/components/appHeader/index.vue
+++ b/src/components/layout/components/appHeader/index.vue
@@ -37,15 +37,16 @@
<style lang="scss" scoped>
.sales-lead {
display: flex;
- height: 55px;
- line-height: 55px;
- background-color: #fff;
- margin-bottom: 10px;
- margin-left: -10px;
+ height: 50px;
+ box-sizing: border-box;
+ line-height: 50px;
+ background-color: $color-bg;
+ border: 1px solid #ccc;
.header-title {
- margin-left: 16px;
- font-size: 16px;
- color: #475059;
+ padding-left: 16px;
+ font-size: 18px;
+ font-weight: bold;
+ color: #171718;
}
.header-user-info {
margin-left: auto;
diff --git a/src/components/layout/index.vue b/src/components/layout/index.vue
index 9fe09d1..19cb95a 100644
--- a/src/components/layout/index.vue
+++ b/src/components/layout/index.vue
@@ -19,10 +19,12 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
+
.app-content {
display: flex;
box-sizing: border-box;
height: 100%;
width: 100%;
+ background-color: $color-bg;
}
</style>
diff --git a/src/components/makepager/CommonSearch.vue b/src/components/makepager/CommonSearch.vue
new file mode 100644
index 0000000..5850cc3
--- /dev/null
+++ b/src/components/makepager/CommonSearch.vue
@@ -0,0 +1,379 @@
+<template>
+ <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>
+ <div
+ class="download"
+ v-if="showDownload"
+ @click="downloadClick"
+ :style="{ cursor: showDownload ? 'pointer' : 'no-drop' }"
+ >
+ <img
+ src="../../../public/images/download.png"
+ style="width: 13px"
+ alt="涓嬭浇"
+ />
+ </div>
+ <slot name="leftButton" />
+ </div>
+ <div v-if="amountView" class="amount">
+ <div
+ v-if="twoTotalAmount"
+ class="top_left"
+ style="width: 8%; border: 0"
+ >
+ <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.label">
+ <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" v-if="showActionBtn">
+ <div class="common">
+ <img
+ src="../../../public/images/filter.png"
+ style="width: 10px"
+ alt="绛涢��"
+ />
+ <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: rgb(128,128,128)"
+ @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>
diff --git a/src/components/makepager/TableCommonView.vue b/src/components/makepager/TableCommonView.vue
index ad1f787..fbf5c69 100644
--- a/src/components/makepager/TableCommonView.vue
+++ b/src/components/makepager/TableCommonView.vue
@@ -9,8 +9,9 @@
:height="'calc(100% - 0px)'"
:max-height="tableList.maxHeight"
:lazy="tableList.lazy"
+ size="mini"
@selection-change="handleSelectionChange"
- :header-cell-style="{ background: '#f1f3f8', color: '#000009' }"
+ :header-cell-style="{ background: '#f1f3f8', color: '#000009' , 'font-size': '14px'}"
:highlight-current-row="tableList.highlight"
:row-class-name="tableRowClassName"
@row-click="tableRowClick"
@@ -18,9 +19,9 @@
:default-expand-all="tableList.isDefaultExpandAll"
:tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
>
- <el-table-column v-if="tableList.selectBox" type="selection" width="40"> </el-table-column>
- <el-table-column v-if="tableList.selectIndex" type="index" label="搴忓彿" width="50"> </el-table-column>
- <el-table-column
+ <el-table-column align="center" v-if="tableList.selectBox" type="selection" width="40"> </el-table-column>
+ <el-table-column align="center" v-if="tableList.selectIndex" type="index" label="搴忓彿" width="50"> </el-table-column>
+ <el-table-column align="center"
v-for="(item, i) in tableList.tableColumn"
:key="i"
:prop="item.prop"
@@ -344,4 +345,12 @@
// }
}
}
+
+::v-deep {
+ .el-table {
+ border-top-left-radius: 12px;
+ border-top-right-radius: 12px;
+ overflow: auto;
+ }
+}
</style>
diff --git a/src/views/productManage/index.vue b/src/views/productManage/index.vue
index adc8766..08dd95e 100644
--- a/src/views/productManage/index.vue
+++ b/src/views/productManage/index.vue
@@ -1,7 +1,5 @@
<template>
- <div class="content">
- <router-view />
- </div>
+ <router-view />
</template>
<script>
@@ -13,9 +11,9 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
-.content {
- width: 100%;
- background-color: #fff;
- height: calc(100vh - 70px);
-}
+//.content {
+// width: 100%;
+// background-color: #fff;
+// height: calc(100vh - 70px);
+//}
</style>
diff --git a/src/views/productManage/product/index.vue b/src/views/productManage/product/index.vue
index 60844cb..d6a3029 100644
--- a/src/views/productManage/product/index.vue
+++ b/src/views/productManage/product/index.vue
@@ -1,18 +1,30 @@
<template>
- <div class="rightContent">
- <div class="top">
- <div class="supplier-search">
- <SearchCommonView
- ref="searchCommonView"
- :search-options="searchOptions"
- @searchClick="searchClick"
- @resetClick="resetClick"
+ <div class="product-manage">
+ <div class="filter">
+ <div class="filter-card">
+<!-- <SearchCommonView-->
+<!-- ref="searchCommonView"-->
+<!-- :search-options="searchOptions"-->
+<!-- @searchClick="searchClick"-->
+<!-- @resetClick="resetClick"-->
+<!-- />-->
+
+ <CommonSearch
+ :show-add="false"
+ :show-download="false"
+ :amount-view="false"
+ :show-action-btn="false"
+ :placeholder="'璇疯緭鍏ヤ骇鍝佸悕绉�/渚涘簲鍟�'"
+ @searchClick="onFilterSearch"
/>
+
<div class="add-view">
- <!-- <el-button type="primary" size="mini" @click="addBtnClick">鏂板缓</el-button> -->
+ <!-- <el-button type="primary" size="mini" @click="addBtnClick">鏂板缓</el-button>-->
</div>
</div>
- <template>
+ </div>
+ <div class="body">
+ <div class="body-card">
<div class="list-view">
<TableCommonView ref="tableListRef" :table-list="tableList" @selCommonClick="selCommonClick">
<!-- <template slot="tableButton">
@@ -25,11 +37,11 @@
</template> -->
</TableCommonView>
</div>
-
<div class="btn-pager">
<PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
</div>
- </template>
+ </div>
+
</div>
<!-- 鏂板缓/缂栬緫浜у搧 -->
<AddProduct v-if="editConfig.visible" :add-common-config="editConfig" />
@@ -52,6 +64,7 @@
computed: {},
data() {
return {
+ searchText:'',
tableList: {},
searchOptions: [],
commonDetail: {
@@ -119,6 +132,15 @@
console.log(val, content)
this.getData(val.value, content)
},
+
+ onFilterSearch(val){
+ this.searchText = val ?? ''
+ console.log(this.searchText)
+
+ // TODO: 闇�瑕佹帴鍙ｆ敮鎸�
+ throw new Error("鍔熻兘鏈疄鐜�")
+ },
+
resetClick() {
this.getData()
},
@@ -165,14 +187,35 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
-.rightContent {
+.product-manage{
height: 100%;
- background: #f0f2f5;
- padding: 10px;
- .top {
- margin-bottom: 20px;
- height: calc(100% - 30px);
- background: #fff;
+ overflow: hidden;
+ .filter{
+ height: 80px;
+ display: flex;
+ align-items: center;
+ padding: 12px 20px 0 20px;
+ &-card{
+ height: 80px;
+ display: flex;
+ align-items: center;
+ flex: 1;
+ border-radius: 12px;
+ background-color: #fff;
+ }
+ }
+ .body{
+ box-sizing: border-box;
+ padding: 10px 20px;
+ border-radius: 12px;
+ height: calc(100% - 92px);
+ .body-card {
+ background-color: #fff;
+ border-radius: 12px;
+ height: 100%;
+ overflow: hidden;
+ }
+
.supplier-search {
display: flex;
align-items: center;
@@ -182,7 +225,8 @@
}
}
.list-view {
- height: calc(100% - 120px);
+ height: calc(100% - 60px);
+ overflow: hidden;
}
.btn-pager {
display: flex;
--
Gitblit v1.8.0