From edb9e3f9ff72a96e43a4172ac38614b9968ed363 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期四, 04 一月 2024 14:23:07 +0800
Subject: [PATCH] 用户管理、用户等级列表页页面开发、新增/编辑用户等级弹窗页面开发
---
src/views/unifiedManage/userLevel/index.vue | 343 +++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 311 insertions(+), 32 deletions(-)
diff --git a/src/views/unifiedManage/userLevel/index.vue b/src/views/unifiedManage/userLevel/index.vue
index e2cffce..9c0aebb 100644
--- a/src/views/unifiedManage/userLevel/index.vue
+++ b/src/views/unifiedManage/userLevel/index.vue
@@ -1,56 +1,72 @@
<template>
<div class="user-level">
- 鐢ㄦ埛绛夌骇
- <!-- <div v-if="isDetail" class="detail-top">
- <DetailListCommonBtn :query-class-options="queryClassOptions" />
- </div>
-
- <div v-else class="filter">
- <div class="filter-card">
- <CommonSearch :show-add="false" :amount-view="false" placeholder="璇疯緭鍏ュ崟鎹紪鍙�" @searchClick="onFilterSearch">
- <template slot="leftButton">
- <el-button size="small" type="primary" @click="addBtnClick">鏂板缓</el-button>
- </template>
- </CommonSearch>
- </div>
+ <div class="top-card">
+ <CommonSearch
+ :add-title="'鏂板绛夌骇'"
+ :total-object="totalObject"
+ :other-options="otherOptions"
+ :placeholder="'璇疯緭鍏ョ瓑绾у悕绉�'"
+ @addCommonClick="addBtnClick"
+ @searchClick="searchClick"
+ ></CommonSearch>
</div>
<div class="body">
- <div class="body-card">
+ <div class="content-top">
<div class="list-view">
<TableCommonView
ref="tableListRef"
:table-list="tableList"
- :show-summary="showSummary"
- @selClientClick="selClientClick"
- @selMasterClick="selMasterClick"
- @selCommonClick="selCommonClick"
- @getSelectArray="getSelectArray"
@selTableCol="selTableCol"
+ @tableRowClick="tableRowClick"
+ :selectClassRow="selectRow"
>
<template slot="tableButton">
- <el-table-column label="鎿嶄綔" width="90">
+ <el-table-column label="鎿嶄綔" width="120">
<template slot-scope="scope">
- <el-button @click="handleClick(scope.row)" type="text" size="small">缂栬緫</el-button>
- <el-button @click="deleteItem(scope.row.id)" type="text" size="small">鍒犻櫎</el-button>
+ <el-button v-if="scope.row.status" type="text" size="small" @click.stop="changeStatusClick(scope.row)"
+ >鍋滅敤</el-button
+ >
+ <el-button v-else @click.stop="getRoleChange(scope.row)" type="text" size="small">鍚敤</el-button>
+ <el-button @click.stop="handleClick(scope.row)" type="text" size="small">缂栬緫</el-button>
+ <el-button @click.stop="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="pagerOptions" v-on="pagerEvents" />
</div>
- </div> -->
- <!-- </div> -->
+ </div>
+ <div class="content-bottom">
+ <div class="bottom-tabs bgcGrey">
+ <div
+ class="tab-pane"
+ @click="getTab(0)"
+ :style="{
+ background: TabsIndex == 0 ? '#2a78fb' : '#F1F3F8',
+ color: TabsIndex == 0 ? '#fff' : '#666'
+ }"
+ >
+ 绠＄悊鍛�
+ </div>
+ </div>
+ <div class="list-view">
+ <TableCommonView :loading="loading" :table-list="bottomTableList" @selTableCol="selBottomTableCol">
+ </TableCommonView>
+ </div>
+ </div>
+ </div>
<!-- 鏂板缓/缂栬緫 -->
- <!-- <AddSubOrderDialog v-if="editConfig.visible" :edit-common-config="editConfig" /> -->
+ <AddUserLevel v-if="editConfig.visible" :edit-common-config="editConfig" />
</div>
</template>
<script>
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
-
+import AddUserLevel from "@/views/unifiedManage/userLevel/components/AddUserLevel"
export default {
name: "UserLevel",
props: {
@@ -66,27 +82,290 @@
}
},
mixins: [pageMixin],
- components: {},
+ components: { AddUserLevel },
computed: {},
data() {
return {
- tableList: {}
+ totalObject: {
+ value: 0,
+ label: "鍏ㄩ儴"
+ },
+ otherOptions: [
+ {
+ value: 0,
+ label: "鍚敤",
+ status: "success"
+ },
+ {
+ value: 0,
+ label: "鍋滅敤",
+ status: "error"
+ }
+ ],
+ tableList: {},
+ tableColumn: [
+ { label: "绛夌骇鍚嶇О", prop: "name", default: true },
+ { label: "绛夌骇鎻忚堪", prop: "comment", default: true },
+ { label: "鍛樺伐鏁�", prop: "count" },
+ { label: "鐘舵��", prop: "status", isCallMethod: true, getCallMethod: this.getRoleStatus }
+ ],
+ showCol: ["绛夌骇鍚嶇О", "绛夌骇鎻忚堪", "鍛樺伐鏁�", "鐘舵��"],
+ selectRow: {},
+ TabsIndex: 0,
+ bottomTableList: {},
+ loading: false,
+ tableBottomColumn: [
+ { label: "鐢ㄦ埛鍚�", prop: "username", default: true },
+ { label: "濮撳悕", prop: "nickName", default: true },
+ { label: "鎵嬫満鍙�", prop: "phone" },
+ { label: "宀椾綅鑱屽姟", prop: "dutyNames" },
+ { label: "鐘舵��", prop: "status", isCallMethod: true, getCallMethod: this.getUserStatus }
+ ],
+ showBottomCol: ["鐢ㄦ埛鍚�", "濮撳悕", "鎵嬫満鍙�", "宀椾綅鑱屽姟", "鐘舵��"],
+ isopen: false,
+ editConfig: {
+ visible: false,
+ title: "鏂板缓",
+ infomation: {}
+ },
+ data: {
+ keyword: "",
+ page: 1,
+ pageSize: 15,
+ useType: 1
+ }
}
},
created() {
this.setTable()
},
methods: {
- setTable() {}
+ // 鏂板缓
+ addBtnClick() {
+ this.editConfig.title = "鏂板缓"
+ this.editConfig.infomation = { ...this.addConfig, currency: "浜烘皯甯�" }
+ this.editConfig.visible = true
+ },
+ // 鎼滅储
+ searchClick(val) {
+ this.data.keyword = val
+ this.pagerOptions.currPage = 1
+ // this.getData();
+ },
+ // 鍋滅敤
+ changeStatusClick(row) {
+ this.$confirm("鏄惁鍋滅敤姝ょ瓑绾�?", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning"
+ })
+ .then(() => {
+ this.getRoleChange(row)
+ })
+ .catch(() => {})
+ },
+ // 鍚敤 鍋滅敤璇锋眰
+ async getRoleChange(row) {
+ console.log(row)
+ // await roleChange({
+ // id: row.id,
+ // status: !row.status,
+ // }).then((reply) => {
+ // if (reply && reply.code == 200) {
+ // let tips = row.status ? "鍋滅敤鎴愬姛" : "鍚敤鎴愬姛";
+ // this.getData();
+ // this.$message({
+ // type: "success",
+ // message: tips,
+ // });
+ // }
+ // });
+ },
+ // 缂栬緫
+ handleClick(val) {
+ this.editRow = val
+ this.isopen = true
+ },
+ // 鍒犻櫎绛夌骇
+ delClick(row) {
+ console.log(row)
+ this.$confirm("鍒犻櫎鍚庢暟鎹笉鑳芥仮澶嶏紝纭畾鏄惁鍒犻櫎?", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning"
+ })
+ .then(() => {
+ // deleteRole(row.id).then((reply) => {
+ // if (reply && reply.code == 200) {
+ // this.getData();
+ // this.$message({
+ // type: "success",
+ // message: "鍒犻櫎鎴愬姛",
+ // });
+ // }
+ // });
+ })
+ .catch(() => {})
+ },
+ // 琛岀偣鍑�
+ tableRowClick(row) {
+ console.log(row)
+ this.selectRow = row
+ // this.getUserList(row.id);
+ },
+ // 绛夌骇鐘舵��
+ getRoleStatus(val) {
+ return val ? "鍚敤" : "鍋滅敤"
+ },
+ //鑾峰彇褰撳墠閫変腑绛夌骇鐨刬d
+ getTab(tab) {
+ this.TabsIndex = tab
+ if (this.TabsIndex == 0) {
+ // 浜у搧淇℃伅鍒楄〃
+ this.showBottomCol = this.showProductCol
+ this.setBottomList()
+ this.getProductInventoryInfo(this.selectRow)
+ }
+ },
+ // 鐢ㄦ埛鐘舵��
+ getUserStatus(val) {
+ return val === 0 ? "绂佺敤" : val === 1 ? "姝ｅ父" : "瀹℃牳涓�"
+ },
+ // 鍒濆鍖栧垪琛�
+ setTable() {
+ this.tableList = {
+ selectIndex: true,
+ tableInfomation: [],
+ allcol: [],
+ showcol: this.showCol,
+ tableColumn: this.setColumnVisible(this.showCol, this.tableColumn)
+ }
+ this.setTableList(this.tableList)
+ // bottom
+ this.setBottomList()
+ },
+ // 绛夌骇鍒楄〃
+ setTableList(tableList) {
+ tableList.allcol = tableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label)
+ this.searchOptions = []
+ for (let i = 0; i < tableList.tableColumn.length; i++) {
+ const label = tableList.tableColumn[i].label
+ const value = tableList.tableColumn[i].prop
+ this.searchOptions.push({ value: value, label: label })
+ }
+ },
+ // bom 鍒楄〃
+ setBottomList() {
+ this.bottomTableList = {
+ selectIndex: true,
+ tableInfomation: [],
+ allcol: [],
+ showcol: this.showBottomCol,
+ tableColumn: this.setColumnVisible(this.showBottomCol, this.tableBottomColumn)
+ }
+ this.setTableList(this.bottomTableList)
+ },
+ // 绛夌骇
+ selTableCol(val) {
+ this.showcol = val
+ this.tableList.tableColumn = this.setColumnVisible(val)
+ },
+ // bottom
+ selBottomTableCol(val) {
+ this.showcol = val
+ this.bottomTableList.tableColumn = this.setColumnVisible(val, this.tableBottomColumn)
+ },
+ setColumnVisible(showCol, tableColumn) {
+ return tableColumn.map((ele) => {
+ return {
+ ...ele,
+ isShowColumn: showCol.includes(ele.label)
+ }
+ })
+ }
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
-::v-deep {
-}
-
.user-level {
+ height: 100%;
+ .top-card {
+ height: 80px;
+ display: flex;
+ align-items: center;
+ margin: 12px 20px 0 20px;
+ border-radius: 12px;
+ background-color: #fff;
+ padding-left: 20px;
+ }
+ .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;
+ }
+ .content-top {
+ background-color: #fff;
+ border-radius: 12px;
+ min-height: 70px;
+ height: 48%;
+ position: relative;
+ .list-view {
+ height: calc(100% - 60px);
+ }
+ }
+ .content-bottom {
+ .bottom-tabs {
+ height: 40px;
+ line-height: 40px;
+ background: #e6ecf2;
+ display: flex;
+ .tab-pane {
+ width: 100px;
+ margin-right: 20px;
+ font-size: 14px !important;
+ text-align: center;
+ cursor: pointer;
+ background: #2a78fb;
+ border-top-left-radius: 20px;
+ border-top-right-radius: 20px;
+ }
+ }
+ .lable-view {
+ background: #e6ecf2;
+ height: 40px;
+ line-height: 40px;
+ .name {
+ border-left: 4px solid #2a78fb;
+ padding-left: 10px;
+ }
+ }
+ background-color: #fff;
+ border-radius: 12px;
+ min-height: 70px;
+ height: calc(52% - 60px);
+ margin-top: 10px;
+ // padding: 10px 20px;
+ .list-view {
+ height: calc(100% - 10px);
+ }
+ }
+ .btn-pager {
+ display: flex;
+ margin-top: 10px;
+ .page {
+ margin-left: auto;
+ }
+ }
+ }
+}
+::v-deep {
}
</style>
--
Gitblit v1.8.0