From 282e0017a1eab4a2f1bb954091aab4a520f7e751 Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期五, 22 九月 2023 19:29:53 +0800
Subject: [PATCH] style: 供应商管理模块样式调整
---
src/components/layout/components/appsidebar/index.scss | 6
src/views/supplierManage/supplier/index.vue | 309 ++++++++++++++++++++++++++++++++++----------------
src/components/makepager/CommonSearch.vue | 3
src/views/supplierManage/index.vue | 3
4 files changed, 216 insertions(+), 105 deletions(-)
diff --git a/src/components/layout/components/appsidebar/index.scss b/src/components/layout/components/appsidebar/index.scss
index 635faed..efc7c8c 100644
--- a/src/components/layout/components/appsidebar/index.scss
+++ b/src/components/layout/components/appsidebar/index.scss
@@ -3,7 +3,7 @@
// height: 100%;
background-color: #314255;
.box {
- width: 200px;
+ width: 187px;
.logo-view {
margin: 40px 20px 10px;
}
@@ -27,8 +27,8 @@
}
.el-submenu .el-menu-item {
- width: 178px;
- min-width: 178px;
+ width: 166px;
+ min-width: 166px;
height: 38px;
display: flex;
align-items: center;
diff --git a/src/components/makepager/CommonSearch.vue b/src/components/makepager/CommonSearch.vue
index d8502d3..7e83725 100644
--- a/src/components/makepager/CommonSearch.vue
+++ b/src/components/makepager/CommonSearch.vue
@@ -98,6 +98,9 @@
@click="inspectionConfigClick"
></i>
</div>
+ <div class="right">
+ <slot name="rightButton"></slot>
+ </div>
</div>
</div>
</template>
diff --git a/src/views/supplierManage/index.vue b/src/views/supplierManage/index.vue
index adc8766..2d40ad0 100644
--- a/src/views/supplierManage/index.vue
+++ b/src/views/supplierManage/index.vue
@@ -15,7 +15,6 @@
<style lang="scss" scoped>
.content {
width: 100%;
- background-color: #fff;
- height: calc(100vh - 70px);
+ height: 100%;
}
</style>
diff --git a/src/views/supplierManage/supplier/index.vue b/src/views/supplierManage/supplier/index.vue
index b67deb7..c99e643 100644
--- a/src/views/supplierManage/supplier/index.vue
+++ b/src/views/supplierManage/supplier/index.vue
@@ -1,92 +1,104 @@
<template>
- <div class="rightContent">
+ <div class="supplier">
<div class="top">
- <div class="supplier-search">
- <SearchCommonView
- ref="searchCommonView"
- :search-options="searchOptions"
- @searchClick="searchClick"
- @resetClick="resetClick"
- />
- <div class="add-view">
- <el-button type="primary" size="mini" @click="addBtnClick">鏂板缓</el-button>
- </div>
- </div>
- <template>
- <div class="list-view">
- <TableCommonView
- ref="tableSupplier"
- :table-list="tableList"
- @selCommonClick="selCommonClick"
- @tableRowClick="tableRowClick"
- >
- <template slot="tableButton">
- <el-table-column label="鎿嶄綔" width="100">
- <template slot-scope="scope">
- <el-button
- v-if="scope.row.status === 0"
- @click="enableClick(scope.row, '鍚敤')"
- type="text"
- size="small"
- >鍚敤</el-button
- >
- <el-button v-else @click="enableClick(scope.row, '鍋滅敤')" type="text" size="small">鍋滅敤</el-button>
- <el-button @click="modifyClick(scope.row)" type="text" size="small">淇敼</el-button>
- </template>
- </el-table-column>
- </template>
- </TableCommonView>
- </div>
- <div class="btn-pager">
- <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
- </div>
- </template>
- </div>
- <div class="bottom">
- <div class="product-search">
- <div style="margin-left: 10px">鍙彁渚涚殑浜у搧</div>
- <div style="margin-left: 20px">
- <el-button type="primary" size="mini">鍒涘缓閲囪喘鍗�</el-button>
- </div>
- <SearchCommonView
- class="search"
- ref="searchCommonView"
- :search-options="searchProductOptions"
- @searchClick="searchProductClick"
- @resetClick="resetProductClick"
- />
- <div class="add-view">
- <el-button type="primary" size="mini" @click="addNewProductClick">娣诲姞鏂颁骇鍝�</el-button>
- </div>
- </div>
- <template>
- <div class="list-view">
- <TableCommonView
- ref="tableListProduct"
- :table-list="productTableList"
- @selCommonClick="selCommonClick"
- @getSelectArray="getSelectArray"
- >
- <template slot="tableButton">
- <el-table-column label="鎿嶄綔" width="170">
- <template slot-scope="scope">
- <el-button @click="raleteClick(scope.row)" type="text" size="small">鐩稿叧渚涘簲鍟�</el-button>
- <el-button @click="editClick(scope.row)" type="text" size="small">淇敼</el-button>
- <el-button @click="delClick(scope.row)" type="text" size="small">鍒犻櫎</el-button>
- </template>
- </el-table-column>
- </template>
- </TableCommonView>
- </div>
- <div class="btn-pager">
- <PagerView
- class="page"
- :pager-options="productPagerOptions"
- @size-change="productChangeHandler"
- @current-change="currentProductHandler"
+ <div class="filter">
+ <div class="filter-card">
+ <CommonSearch
+ :show-add="true"
+ add-title="鏂板缓"
+ @addCommonClick="addBtnClick"
+ :show-download="false"
+ :amount-view="false"
+ :show-action-btn="false"
+ :placeholder="'璇疯緭鍏ヤ緵搴斿晢鍚嶇О'"
+ @searchClick="onFilterSearch"
/>
</div>
- </template>
+ </div>
+ <div class="body">
+ <div class="body-card">
+ <div class="list-view">
+ <TableCommonView
+ ref="tableSupplier"
+ :table-list="tableList"
+ @selCommonClick="selCommonClick"
+ @tableRowClick="tableRowClick"
+ >
+ <template slot="tableButton">
+ <el-table-column label="鎿嶄綔" width="100">
+ <template slot-scope="scope">
+ <el-button
+ v-if="scope.row.status === 0"
+ @click="enableClick(scope.row, '鍚敤')"
+ type="text"
+ size="small"
+ >鍚敤</el-button
+ >
+ <el-button v-else @click="enableClick(scope.row, '鍋滅敤')" type="text" size="small">鍋滅敤</el-button>
+ <el-button @click="modifyClick(scope.row)" type="text" size="small">淇敼</el-button>
+ </template>
+ </el-table-column>
+ </template>
+ </TableCommonView>
+ </div>
+ <div class="btn-pager">
+ <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
+ </div>
+ </div>
+ </div>
+
+ </div>
+ <div class="bottom">
+ <div class="simple-filter">
+ <div class="simple-filter-card">
+ <CommonSearch
+ :show-add="false"
+ :show-download="false"
+ :amount-view="false"
+ :show-action-btn="false"
+ :placeholder="'璇疯緭鍏ヤ骇鍝佸悕绉�'"
+ @searchClick="onProductFilterSearch"
+ >
+ <template slot="leftButton">
+ <div class="sub-title"><span class="sub-title-decorator"></span>鍙彁渚涚殑浜у搧</div>
+ <el-button type="primary" size="mini">鍒涘缓閲囪喘鍗�</el-button>
+ </template>
+ <template slot="rightButton">
+ <el-button type="primary" size="mini" @click="addNewProductClick">娣诲姞鏂颁骇鍝�</el-button>
+ </template>
+ </CommonSearch>
+ </div>
+ </div>
+ <div class="body">
+ <div class="body-card">
+ <div class="list-view">
+ <TableCommonView
+ ref="tableListProduct"
+ :table-list="productTableList"
+ @selCommonClick="selCommonClick"
+ @getSelectArray="getSelectArray"
+ >
+ <template slot="tableButton">
+ <el-table-column label="鎿嶄綔" width="170">
+ <template slot-scope="scope">
+ <el-button @click="raleteClick(scope.row)" type="text" size="small">鐩稿叧渚涘簲鍟�</el-button>
+ <el-button @click="editClick(scope.row)" type="text" size="small">淇敼</el-button>
+ <el-button @click="delClick(scope.row)" type="text" size="small">鍒犻櫎</el-button>
+ </template>
+ </el-table-column>
+ </template>
+ </TableCommonView>
+ </div>
+ <div class="btn-pager">
+ <PagerView
+ class="page"
+ :pager-options="productPagerOptions"
+ @size-change="productChangeHandler"
+ @current-change="currentProductHandler"
+ />
+ </div>
+ </div>
+ </div>
</div>
<!-- 鏂板缓/缂栬緫閿�鍞嚎绱� -->
<AddSupplier v-if="editConfig.visible" :add-common-config="editConfig" />
@@ -116,6 +128,7 @@
computed: {},
data() {
return {
+ searchSupplierName: '',
tableList: {}, // 渚涘簲鍟嗗垪琛�
productTableList: {}, // 浜у搧鍒楄〃
selValueList: [],
@@ -200,13 +213,13 @@
}
},
// 璇锋眰鏁版嵁
- async getData(val, content) {
- this.getSupplierList(val, content)
+ getData() {
+ this.getSupplierList()
},
// 渚涘簲鍟嗗垪琛�
- async getSupplierList(val, content) {
+ async getSupplierList() {
await getSupplierList({
- [val]: content,
+ name: this.searchSupplierName,
page: this.pagerOptions.currPage,
pageSize: this.pagerOptions.pageSize
}).then((res) => {
@@ -252,20 +265,13 @@
})
},
// 鎼滅储渚涘簲鍟�
- searchClick(val, content) {
- console.log(val, content)
- this.getSupplierList(val.value, content)
- },
- resetClick() {
+ onFilterSearch(searchText){
+ this.searchSupplierName = searchText ??''
this.getSupplierList()
},
// 鎼滅储浜у搧
- searchProductClick(val, content) {
- console.log(val, content)
- this.getProductList(val.value, content)
- },
- resetProductClick() {
- this.getProductList()
+ onProductFilterSearch(searchText){
+ this.getProductList('name', searchText)
},
// 鏂板缓渚涘簲鍟�
addBtnClick() {
@@ -416,4 +422,107 @@
}
}
}
+
+
+
+.supplier{
+ height: 100%;
+ overflow: hidden;
+ .top{
+ position: relative;
+ height: 55%;
+ .body{
+ position: relative;
+ height: calc(100% - 92px);
+ }
+ }
+ .bottom{
+ position: relative;
+ height: 45%;
+ .body{
+ position: relative;
+ height: calc(100% - 40px);
+ padding-top: 0;
+ }
+ }
+ .filter{
+ height: 80px;
+ display: flex;
+ align-items: center;
+ padding: 12px 20px 0 20px;
+ &-card{
+ height: 80px;
+ display: flex;
+ align-items: center;
+ box-sizing: border-box;
+ padding: 10px 20px;
+ flex: 1;
+ border-radius: 12px;
+ background-color: #fff;
+ }
+ }
+ .simple-filter{
+ height: 40px;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ &-card{
+ height: 80px;
+ display: flex;
+ align-items: center;
+ box-sizing: border-box;
+ flex: 1;
+ }
+ }
+ .body{
+ box-sizing: border-box;
+ padding: 10px 20px;
+ border-radius: 12px;
+ .body-card {
+ background-color: #fff;
+ border-radius: 12px;
+ height: 100%;
+ overflow: hidden;
+ }
+
+ .supplier-search {
+ display: flex;
+ align-items: center;
+ .add-view {
+ margin-left: auto;
+ margin-right: 20px;
+ }
+ }
+ .list-view {
+ height: calc(100% - 60px);
+ overflow: hidden;
+ }
+ .btn-pager {
+ display: flex;
+ .page {
+ margin-left: auto;
+ }
+ }
+ }
+}
+.sub-title{
+ flex-shrink: 0;
+ margin-right: 20px;
+ font-size: 16px;
+ font-weight: bold;
+ height: 28px;
+ line-height: 28px;
+ position: relative;
+ padding-left: 12px;
+ &-decorator{
+ position: absolute;
+ height: 100%;
+ width: 4px;
+ background-color: #2a78fb;
+ top: 0;
+ left: 0;
+ }
+}
+
</style>
--
Gitblit v1.8.0