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/components/AddUserLevel.vue | 394 ++++++++++++++++++++++++++++
src/components/makepager/CommonSearch.vue | 16
src/views/unifiedManage/userManage/index.vue | 43 +-
src/views/unifiedManage/userLevel/index.vue | 343 ++++++++++++++++++++++--
4 files changed, 729 insertions(+), 67 deletions(-)
diff --git a/src/components/makepager/CommonSearch.vue b/src/components/makepager/CommonSearch.vue
index e66ff33..d9a1bd1 100644
--- a/src/components/makepager/CommonSearch.vue
+++ b/src/components/makepager/CommonSearch.vue
@@ -2,18 +2,7 @@
<div class="search-list">
<div class="search-top">
<div class="left">
- <el-button v-if="showAdd" type="primary" size="mini" @click="addBtn">
- <div style="display: flex">
- <!-- <img
- v-if="ishumanResource"
- src="../../../assets/DingDing/index.png"
- style="width: 15px; height: 15px; margin-right: 5px; background-color: #ffffff; border-radius: 50%"
- alt=""
- /> -->
- <slot name="buttonIcon" />
- <p style="margin-top: 1px; line-height: 15px">{{ addTitle }}</p>
- </div>
- </el-button>
+ <el-button v-if="showAdd" type="primary" size="mini" @click="addBtn">{{ addTitle }}</el-button>
<slot name="leftButton" />
<div class="download" @click="downloadClick" :style="{ cursor: showDownload ? 'pointer' : 'no-drop' }">
<img src="@/assets/img/xiazai.png" style="width: 13px" />
@@ -227,7 +216,8 @@
align-items: center;
.left {
display: flex;
- width: 150px;
+ width: 250px;
+
.download {
width: 30px;
height: 30px;
diff --git a/src/views/unifiedManage/userLevel/components/AddUserLevel.vue b/src/views/unifiedManage/userLevel/components/AddUserLevel.vue
new file mode 100644
index 0000000..62c46f3
--- /dev/null
+++ b/src/views/unifiedManage/userLevel/components/AddUserLevel.vue
@@ -0,0 +1,394 @@
+<template>
+ <div class="add-quotation">
+ <el-dialog
+ :title="editCommonConfig.title + '绛夌骇'"
+ :visible.sync="editConfig.visible"
+ :width="dialogWidth"
+ :before-close="handleClose"
+ append-to-body
+ custom-class="iframe-dialog"
+ >
+ <div class="drawerContent" style="overflow: auto">
+ <el-form ref="form" :rules="rules" :model="form" label-width="120px">
+ <el-form-item label="瑙掕壊鍚嶇О" prop="name">
+ <el-input v-model="form.name" placeholder="璇疯緭鍏�" style="width: 63%"></el-input>
+ </el-form-item>
+ <el-form-item label="鍙傝�冭鑹�" prop="prepareRole">
+ <el-select
+ placeholder="璇烽�夋嫨鍙傝�冭鑹�"
+ v-model="form.prepareRole"
+ style="width: 63%"
+ @change="selPrepareRole"
+ >
+ <el-option
+ v-for="(ele, index) in prepareRoleList"
+ :key="index"
+ :label="ele.name"
+ :value="ele.id"
+ ></el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="瑙掕壊鎻忚堪" prop="comment">
+ <el-input v-model="form.comment" placeholder="璇疯緭鍏�" style="width: 63%"></el-input>
+ </el-form-item>
+ <el-form-item label="椤甸潰鏉冮檺" prop="subsystemIDs">
+ <div class="icon-box">
+ <div class="icon-box-item" v-for="(item, index) in completeList" :key="item.systemType">
+ <div
+ class="iconItem"
+ :class="{ iconActive: form.completeType == item.systemType }"
+ @click="imgClick(item, index)"
+ >
+ {{ item.name }}
+ </div>
+ </div>
+ <div style="clear: both"></div>
+ <div style="height: calc(100% - 40px)" v-for="item in menusList" :key="'tree_' + item.systemType">
+ <el-tree
+ v-show="form.completeType == item.systemType"
+ class="icon-item-tree"
+ :ref="'menuTree&' + item.systemType"
+ :data="item.menus"
+ show-checkbox
+ node-key="id"
+ @check-change="handleCheckChange"
+ :props="treeDefaultProp"
+ default-expand-all
+ >
+ </el-tree>
+ </div>
+ </div>
+ </el-form-item>
+ </el-form>
+ </div>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="handleClose">鍙栨秷</el-button>
+ <el-button type="primary" @click="onSubmit('form')">纭畾</el-button>
+ </div>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+// import codeMixin from "@/components/makepager/mixin/codeMixin"
+export default {
+ name: "AddUserLevel",
+ // mixins: [codeMixin],
+ props: {
+ editCommonConfig: {
+ type: Object,
+ default: () => {
+ return {
+ visible: false,
+ title: "鏂板缓",
+ infomation: {}
+ }
+ }
+ }
+ },
+ components: {},
+ computed: {},
+ data() {
+ return {
+ dialogWidth: "35%",
+ editConfig: this.editCommonConfig,
+ prepareRoleList: [], // 鍙傝�冭鑹�
+ menusList: [], //鑿滃崟
+ // 鏉冮檺 绠＄悊
+ completeList: [],
+ form: {},
+ rules: {
+ name: [{ required: true, message: "璇疯緭鍏ヨ鑹插悕绉�", trigger: "blur" }]
+ },
+ treeDefaultProp: {
+ children: "children",
+ label: "title",
+ id: "id"
+ }
+ }
+ },
+ watch: {
+ "editCommonConfig.visible"(val) {
+ if (val) {
+ this.$refs.form.resetFields()
+ this.getDataInfo()
+ }
+ },
+ "editCommonConfig.infomation"(val) {
+ if (this.isopen) {
+ this.$refs.form.resetFields()
+ if (val.id) {
+ this.getDataInfo(val)
+ }
+ }
+ }
+ },
+ created() {
+ this.getDataInfo()
+ },
+ methods: {
+ handleClose() {
+ this.editConfig.visible = false
+ },
+ handleCheckChange(data, checked, indeterminate) {
+ console.log(data, checked, indeterminate)
+ },
+ // 鑾峰彇鍙傝�冭鑹� 椤甸潰鏉冮檺 鑿滃崟 鐨勬暟鎹�
+ async getDataInfo(val) {
+ console.log(val)
+ // const rsp = await getDataRole({ useType: 1 })
+ // if (rsp.code == 200) {
+ // // 鍙傝�冭鑹�
+ // this.prepareRoleList = rsp.data.roles ? rsp.data.roles : []
+ // this.menusList = rsp.data.menus ? rsp.data.menus : []
+ // // 椤甸潰鏉冮檺
+ // this.completeList = rsp.data.subsystems ? rsp.data.subsystems : []
+ // this.form.completeType = this.completeList.length > 0 ? this.completeList[0].systemType : 1
+ // }
+ // if (this.isopen) {
+ // this.resetForm(val)
+ // }
+ },
+ getMenuCheck(val) {
+ if (val && val.length > 0) {
+ for (let i in this.menusList) {
+ this.$refs["menuTree&" + this.menusList[i].systemType][0].setCheckedKeys(val)
+ }
+ }
+ },
+ resetForm(val) {
+ this.form = {
+ prepareRole: "",
+ menuIDs: [],
+ name: "",
+ comment: "",
+ subsystemIDs: [],
+ completeType:
+ this.completeList.length > 0 && this.completeList[0].systemType ? this.completeList[0].systemType : 1
+ }
+ if (val) {
+ this.form = JSON.parse(JSON.stringify(val))
+ this.form.completeType =
+ this.completeList.length > 0 && this.completeList[0].systemType ? this.completeList[0].systemType : 1
+ if (this.form.menuIDs && this.form.menuIDs.length > 0) {
+ for (let i in this.menusList) {
+ this.$refs["menuTree&" + this.menusList[i].systemType][0].setCheckedKeys(this.form.allMenu.split(","))
+ }
+ }
+ } else {
+ for (let i in this.menusList) {
+ this.$refs["menuTree&" + this.menusList[i].systemType][0].setCheckedKeys([])
+ }
+ }
+ },
+ imgClick(item) {
+ this.form.completeType = item.systemType
+ this.$forceUpdate()
+ },
+ selPrepareRole(val) {
+ if (val) {
+ for (let i in this.prepareRoleList) {
+ if (this.prepareRoleList[i].id == val) {
+ let value = this.prepareRoleList[i]
+ this.completeList = value.subsystems
+ this.form.completeType = this.completeList.length > 0 ? this.completeList[0].systemType : 1
+ this.getMenuCheck(value.menuIDs ? value.menuIDs : [])
+ this.$forceUpdate()
+ break
+ }
+ }
+ }
+ },
+ onSubmit(formName) {
+ this.$refs[formName].validate((valid) => {
+ console.log(valid)
+ if (valid) {
+ // let submitFn = this.editRow.id ? updateRole : addRole
+ // let param = this.saveParams()
+ // submitFn(param).then((reply) => {
+ // if (reply && reply.code === 200) {
+ // this.$message.success("淇濆瓨鎴愬姛")
+ // this.$emit("shutdown", false)
+ // }
+ // })
+ }
+ })
+ },
+ saveParams() {
+ let data = this.form
+ // 鐢ㄦ埛鐨勬潈闄愰厤缃� 鏍戝舰缁撴瀯
+ let menuIds = []
+ // 鍏ㄩ�夌殑鐢ㄦ埛鏉冮檺
+ let allMenuIds = []
+ //瀵瑰簲鐨勯〉闈㈡潈闄� 鏄惁閫夋嫨浜嗚彍鍗�
+ let indexArr = []
+ for (let i in this.menusList) {
+ let arr = this.$refs["menuTree&" + this.menusList[i].systemType][0].getCheckedKeys()
+ menuIds = menuIds.concat(arr)
+ allMenuIds = allMenuIds.concat(arr)
+ let arr2 = this.$refs["menuTree&" + this.menusList[i].systemType][0].getHalfCheckedKeys()
+ menuIds = menuIds.concat(arr2)
+ //瀵瑰簲鐨勯〉闈㈡潈闄� 鏄惁閫夋嫨浜嗚彍鍗�
+ let arr3 = arr.concat(arr2)
+ if (arr3.length > 0) {
+ indexArr.push(i)
+ }
+ }
+ let subsystemIDs = []
+ for (let i in indexArr) {
+ for (let j in this.completeList) {
+ if (this.menusList[indexArr[i]].systemType == this.completeList[j].systemType) {
+ subsystemIDs.push(this.completeList[j].id)
+ break
+ }
+ }
+ }
+ console.log(subsystemIDs, "===subsystemIDs")
+ let params = {
+ subsystemIDs: subsystemIDs,
+ role: {
+ allMenu: allMenuIds.join(),
+ id: this.editRow.id,
+ comment: data.comment || "",
+ name: data.name || "",
+ useType: 1
+ },
+ menuIDs: menuIds
+ }
+ return params
+ }
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+::v-deep {
+ .iframe-dialog .el-dialog__body {
+ .drawerContent {
+ width: 90%;
+ padding: 0;
+ margin: auto;
+ overflow: hidden;
+ margin-top: 15px;
+ // 婧㈠嚭闅愯棌婊氬姩鏉�
+ scrollbar-width: none; /* firefox */
+ -ms-overflow-style: none; /* IE 10+ */
+ .button {
+ position: absolute;
+ right: 60px;
+ bottom: 20px;
+ .el-button {
+ width: 80px;
+ height: 38px;
+ font-family: PingFangSC-Medium, sans-serif;
+ }
+ }
+
+ .content-title {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 10px;
+ }
+ .name-tips {
+ position: absolute;
+ top: 25px;
+ left: 20px;
+ color: rgb(255, 0, 0);
+ font-size: 10px;
+ }
+ }
+ .el-tree {
+ height: 305px;
+ overflow-y: auto;
+ }
+ .icon-box {
+ width: 100%;
+ height: 320px;
+ overflow: hidden;
+ box-sizing: border-box;
+ font-size: 14px;
+ position: relative;
+ .icon-box-item {
+ float: left;
+ }
+ .icon-item-tree {
+ width: 100%;
+ height: calc(100% - 40px);
+ position: absolute;
+ top: 40px;
+ left: 0px;
+ }
+ .iconItem {
+ width: auto;
+ height: 32px;
+ padding: 0 5px;
+ line-height: 32px;
+ border-radius: 6px;
+ float: left;
+ margin-right: 10px;
+ margin-bottom: 5px;
+ text-align: center;
+ box-sizing: border-box;
+ border: 1px solid #e5e5e5;
+ cursor: pointer;
+ // &:hover {
+ // background: rgba(30, 120, 235, 1);
+ // border: 1px solid rgba(30, 120, 235, 1);
+ // color: #fff;
+ // box-sizing: border-box;
+ // }
+ }
+ .iconActive {
+ background: rgba(30, 120, 235, 1);
+ color: #fff;
+ box-sizing: border-box;
+ }
+ }
+ .dialog-footer {
+ background-color: #f5f5f5;
+ height: 55px;
+ line-height: 55px;
+ }
+ }
+ .el-input__inner {
+ font-size: 13px !important;
+ color: rgba(0, 0, 0, 0.9);
+ text-align: left;
+ }
+ .el-input__inner::placeholder {
+ color: rgba(0, 0, 0, 0.4);
+ }
+ .el-form-item__error {
+ font-family: PingFangSC;
+ }
+ .el-select-dropdown__wrap {
+ overflow: auto !important;
+ }
+ .el-select-dropdown {
+ position: absolute !important;
+ top: 36px !important;
+ left: 0px !important;
+ }
+ .el-form-item__label {
+ font-size: 13px !important;
+ color: #000;
+ font-family: PingFangSC;
+ text-align: center !important;
+ width: 60px;
+ }
+ .input-box .input-content input {
+ width: 23px;
+ height: 26px;
+ border-color: rgba(0, 0, 0, 0.1);
+ }
+ .el-icon-minus {
+ width: 0px !important;
+ height: 26px !important;
+ line-height: 38px !important;
+ color: #e5e5e5;
+ font-size: 13px;
+ }
+}
+</style>
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>
diff --git a/src/views/unifiedManage/userManage/index.vue b/src/views/unifiedManage/userManage/index.vue
index fdd4b29..8feb9ab 100644
--- a/src/views/unifiedManage/userManage/index.vue
+++ b/src/views/unifiedManage/userManage/index.vue
@@ -16,18 +16,9 @@
<div class="body">
<div class="body-card">
<div class="list-view">
- <TableCommonView
- ref="tableListRef"
- :table-list="tableList"
- :show-summary="showSummary"
- @selClientClick="selClientClick"
- @selMasterClick="selMasterClick"
- @selCommonClick="selCommonClick"
- @getSelectArray="getSelectArray"
- @selTableCol="selTableCol"
- >
+ <TableCommonView ref="tableListRef" :table-list="tableList" @selTableCol="selTableCol">
<template slot="tableButton">
- <el-table-column label="鎿嶄綔" width="90">
+ <el-table-column label="鎿嶄綔" width="120">
<template slot-scope="scope">
<el-button @click="viewClick(scope.row)" type="text" size="small">鏌ョ湅</el-button>
<el-button @click="approveClick(scope.row)" type="text" size="small">瀹℃牳</el-button>
@@ -60,23 +51,26 @@
return {
tableList: {},
tableColumn: [
- { label: "搴忓彿", prop: "number", default: true },
- { label: "鐢ㄦ埛鍚�", prop: "client_name" },
- { label: "鎵嬫満鍙�", prop: "signTime" }, // 绛剧害鏃ユ湡
- { label: "鍏徃鍚嶇О", prop: "serviceContractType" },
- { label: "鑱旂郴浜哄鍚�", prop: "serviceContractStatus" },
- { label: "閭", prop: "member_name" },
- { label: "琛屼笟", prop: "productName", isProductName: true },
- { label: "鍦板尯", prop: "startTime" },
- { label: "鐘舵��", prop: "endTime" }
+ { label: "鐢ㄦ埛鍚�", prop: "username" },
+ { label: "鎵嬫満鍙�", prop: "phone" },
+ { label: "鍏徃鍚嶇О", prop: "company" },
+ { label: "鑱旂郴浜哄鍚�", prop: "contact" },
+ { label: "閭", prop: "mailbox" },
+ { label: "琛屼笟", prop: "industry" },
+ { label: "鍦板尯", prop: "region" },
+ { label: "鐘舵��", prop: "status" }
],
- showCol: ["搴忓彿", "鐢ㄦ埛鍚�", "鎵嬫満鍙�", "鍏徃鍚嶇О", "鑱旂郴浜哄鍚�", "閭", "琛屼笟", "鍦板尯", "鐘舵��"]
+ showCol: ["鐢ㄦ埛鍚�", "鎵嬫満鍙�", "鍏徃鍚嶇О", "鑱旂郴浜哄鍚�", "閭", "琛屼笟", "鍦板尯", "鐘舵��"]
}
},
created() {
this.setTable()
},
methods: {
+ // 鎼滅储
+ onFilterSearch(val) {
+ console.log(val)
+ },
// 鏌ョ湅
viewClick(row) {
console.log(row)
@@ -93,7 +87,12 @@
setTable() {
this.tableList = {
selectIndex: true,
- tableInfomation: [],
+ tableInfomation: [
+ {
+ usename: "娴嬭瘯",
+ status: 1
+ }
+ ],
allcol: [],
showcol: this.showCol,
tableColumn: this.setColumnVisible(this.showCol)
--
Gitblit v1.8.0