From c2dde74cf1067543999993b397475a5f6f32852e Mon Sep 17 00:00:00 2001 From: songshankun <songshankun@foxmail.com> Date: 星期一, 25 九月 2023 14:40:54 +0800 Subject: [PATCH] style: 客户管理模块样式调整; 分页组件样式调整 --- src/views/client/client/index.vue | 194 ++++++++++++++++++++++++++++-------------------- 1 files changed, 112 insertions(+), 82 deletions(-) diff --git a/src/views/client/client/index.vue b/src/views/client/client/index.vue index 5aaf4b2..50d9c17 100644 --- a/src/views/client/client/index.vue +++ b/src/views/client/client/index.vue @@ -15,47 +15,57 @@ </div> </div> --> </div> - <div class="top"> - <SearchCommonView - ref="searchCommonView" - :query-class-options="queryClassOptions" - :search-options="searchOptions" - @searchClick="searchClick" - @resetClick="resetClick" - /> - <div class="btn-pager"> - <PublicFunctionBtnView - :list-button="true" - :map-button="true" - :statistics="true" - :operates-list="operatesList" - @batchDelete="delClick" - /> - <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> + + <div class="filter"> + <div class="filter-card"> + <CommonSearch + :show-add="false" + :show-download="false" + :amount-view="false" + :show-action-btn="false" + placeholder="璇疯緭鍏ュ鎴峰悕绉�" + @searchClick="onFilterSearch" + > + <template slot="leftButton"> + <el-button size="small" type="primary" @click="addBtnClick">鏂板缓</el-button> + <el-button size="small" @click="delClick">鍒犻櫎</el-button> + </template> + </CommonSearch> </div> </div> - <TableCommonView - ref="tableListRef" - v-loading="loading" - :table-list="tableList" - @selClientClick="selClientClick" - @selContactsClick="selContactsClick" - @getSelectArray="getSelectArray" - > - <template slot="tableButton"> - <el-table-column label="鎿嶄綔" width="150"> - <template slot-scope="scope"> - <el-button v-if="activeName === 'first'" type="text" size="small" @click="allocationBtnClick(scope.row)" - >鍒嗛厤</el-button - > - <el-button v-else type="text" size="small" @click="changeHighSeasClick(scope.row)">鍙樻洿鍏捣</el-button> - <el-button @click="handleClick(scope.row)" type="text" size="small">缂栬緫</el-button> - <el-button @click="followupClick(scope.row)" type="text" size="small">璺熻繘</el-button> - <!-- <el-button @click="delClick(scope.row.id)" type="text" size="small">鍒犻櫎</el-button> --> - </template> - </el-table-column> - </template> - </TableCommonView> + + <div class="body"> + <div class="body-card"> + <div class="list-view"> + <TableCommonView + ref="tableListRef" + v-loading="loading" + :table-list="tableList" + @selClientClick="selClientClick" + @selContactsClick="selContactsClick" + @getSelectArray="getSelectArray" + > + <template slot="tableButton"> + <el-table-column label="鎿嶄綔" width="150"> + <template slot-scope="scope"> + <el-button v-if="activeName === 'first'" type="text" size="small" @click="allocationBtnClick(scope.row)" + >鍒嗛厤</el-button + > + <el-button v-else type="text" size="small" @click="changeHighSeasClick(scope.row)">鍙樻洿鍏捣</el-button> + <el-button @click="handleClick(scope.row)" type="text" size="small">缂栬緫</el-button> + <el-button @click="followupClick(scope.row)" type="text" size="small">璺熻繘</el-button> + <!-- <el-button @click="delClick(scope.row.id)" 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> + <!-- 鏂板缓/缂栬緫瀹㈡埛绠$悊 --> <AddClientManageDialog v-if="editConfig.visible" :edit-client-manage-config="editConfig" /> <!-- 瀹㈡埛璇︽儏 --> @@ -238,21 +248,19 @@ } else { this.not_admin = 1 } - this.resetClick() - }, - // 鎼滅储 - searchClick(val, content) { - console.log(val, content) - this.search_map = { - not_admin: this.not_admin, - [val.value]: content - } - this.getData() - }, - resetClick() { this.search_map = { not_admin: this.not_admin } + this.pagerOptions.currPage = 1 + this.getData() + }, + // 鎼滅储 + onFilterSearch(searchText){ + this.search_map = { + not_admin: this.not_admin, + name: searchText + } + this.pagerOptions.currPage = 1 this.getData() }, // 鏂板缓 @@ -371,37 +379,6 @@ <!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="scss" scoped> -.custom-manage { - .tab-view { - position: relative; - .sel-gonghai { - display: flex; - position: absolute; - top: 5px; - left: 660px; - height: 35px; - line-height: 35px; - .query-class-sel { - width: 165px; - margin-left: 10px; - } - .query-class-btn { - font-size: 16px; - margin-left: 10px; - color: #bebebe; - } - } - } - .top { - margin-bottom: 20px; - .btn-pager { - display: flex; - .page { - margin-left: auto; - } - } - } -} ::v-deep { .el-tabs--top .el-tabs__item.is-top:nth-child(2) { padding-left: 25px; @@ -411,4 +388,57 @@ height: 45px; } } + +.custom-manage{ + height: 100%; + overflow: hidden; + .filter{ + height: 80px; + display: flex; + align-items: center; + padding: 0 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; + } + } + .body{ + box-sizing: border-box; + padding: 10px 20px; + border-radius: 12px; + height: calc(100% - 139px); + .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; + margin-top: 10px; + .page { + margin-left: auto; + } + } + } +} </style> -- Gitblit v1.8.0