From 72f14ac421734761836416640985d83ddf7a9c12 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期四, 13 七月 2023 18:50:16 +0800
Subject: [PATCH] 成员管理&角色权限页面
---
src/views/backgroundConfig/memberManage/AddMemberManageDialog.vue | 435 ++++++++++++++++++++++
src/components/makepager/TableCommonView.vue | 2
src/views/backgroundConfig/memberManage/index.vue | 127 +++++-
src/views/backgroundConfig/rolePermssion/index.vue | 10
src/views/backgroundConfig/memberManage/TreeLeft.vue | 146 +++++++
src/views/backgroundConfig/memberManage/EditDepartmentDialog.vue | 103 +++++
src/views/backgroundConfig/rolePermssion/AddRolePermssionDialog.vue | 316 ++++++++++++++++
7 files changed, 1,110 insertions(+), 29 deletions(-)
diff --git a/src/components/makepager/TableCommonView.vue b/src/components/makepager/TableCommonView.vue
index 5583db0..af881ec 100644
--- a/src/components/makepager/TableCommonView.vue
+++ b/src/components/makepager/TableCommonView.vue
@@ -23,7 +23,7 @@
:width="item.width"
:min-width="item.min"
show-overflow-tooltip
- sortable
+ :sortable="item.sortable"
>
<template slot-scope="scope">
<span v-if="item.price">{{ "锟�" + number_format(scope.row[item.prop], 2, ".", ",") }}</span>
diff --git a/src/views/backgroundConfig/memberManage/AddMemberManageDialog.vue b/src/views/backgroundConfig/memberManage/AddMemberManageDialog.vue
new file mode 100644
index 0000000..c302762
--- /dev/null
+++ b/src/views/backgroundConfig/memberManage/AddMemberManageDialog.vue
@@ -0,0 +1,435 @@
+<template>
+ <div class="add-member-manage">
+ <el-dialog
+ :title="editCommonConfig.title + '鎴愬憳绠＄悊'"
+ :visible.sync="editConfig.visible"
+ :width="dialogWidth"
+ :before-close="handleClose"
+ >
+ <el-form
+ ref="form"
+ :model="editConfig.infomation"
+ :rules="rules"
+ label-position="right"
+ label-width="308px"
+ size="mini"
+ style="height: 70vh; overflow-x: hidden"
+ >
+ <!-- 淇℃伅 -->
+ <div class="basic-info">
+ <!-- 鎴愬憳淇℃伅 -->
+ <div class="basic-info-title">鎴愬憳淇℃伅</div>
+ <div class="basic-info-view">
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="璐﹀彿" prop="account">
+ <el-input v-model="editConfig.infomation.account"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鏄惁绠＄悊鍛�" prop="isAdmin">
+ <el-switch v-model="editConfig.infomation.isAdmin" active-color="#2E68DB" inactive-color="#AEB9CA">
+ </el-switch>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="瀵嗙爜" prop="password">
+ <el-input v-model="editConfig.infomation.password"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="瀵嗙爜纭" prop="passwordConfirm">
+ <el-input v-model="editConfig.infomation.passwordConfirm"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="濮撳悕" prop="name">
+ <el-input v-model="editConfig.infomation.name"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鐪熷疄濮撳悕" prop="realName">
+ <el-input v-model="editConfig.infomation.realName"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="閮ㄩ棬" prop="department">
+ <div class="custom-name">
+ <el-input v-model="editConfig.infomation.department"></el-input>
+ <div class="common-select-btn"><i class="el-icon-circle-plus-outline"></i></div>
+ <div class="common-select-btn"><i class="el-icon-edit-outline"></i></div>
+ </div>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鐘舵��" prop="state">
+ <el-select v-model="editConfig.infomation.state" placeholder="璇烽�夋嫨" size="mini">
+ <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鎵嬫満" prop="phone">
+ <el-input v-model="editConfig.infomation.phone"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鐢佃瘽" prop="telephone">
+ <el-input v-model="editConfig.infomation.telephone"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="Email" prop="email">
+ <el-input v-model="editConfig.infomation.email"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="浼佷笟寰俊閫氳褰曡处鍙�" prop="wechat">
+ <el-input v-model="editConfig.infomation.wechat"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="瀹℃壒濮旀墭" prop="approvalDelegation">
+ <el-select v-model="editConfig.infomation.approvalDelegation" placeholder="璇烽�夋嫨" size="mini">
+ <el-option
+ v-for="item in approvalDelegationOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="灏忕▼搴忛�氳璐﹀彿" prop="miniProgram">
+ <el-input v-model="editConfig.infomation.miniProgram"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="閽夐拤閫氳褰曚俊鍑芥垨" prop="dingtalk">
+ <el-input v-model="editConfig.infomation.dingtalk"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="瀹℃壒濮旀墭浜�" prop="approvalPrincipal">
+ <div class="custom-name">
+ <el-input v-model="editConfig.infomation.approvalPrincipal"></el-input>
+ <div class="common-select-btn">
+ <i class="el-icon-circle-plus-outline"></i>
+ </div>
+ </div>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鑱屼綅绾у埆" prop="positionLevel">
+ <CommonSelectView
+ :common-value="editConfig.infomation.positionLevel"
+ :common-options="positionLevelOptions"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="24">
+ <el-form-item label="澶囨敞" prop="notes">
+ <el-input
+ type="textarea"
+ :autosize="{ minRows: 2, maxRows: 4 }"
+ placeholder="璇疯緭鍏ュ唴瀹�"
+ v-model="editConfig.infomation.notes"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鍏ヨ亴鏃ユ湡" prop="employeeDate">
+ <el-date-picker v-model="editConfig.infomation.employeeDate" type="date" placeholder="閫夋嫨鏃ユ湡">
+ </el-date-picker>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="涓汉澶村儚" prop="avatar">
+ <el-button type="text"><i class="el-icon-paperclip"></i>娣诲姞</el-button>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="浜戜箣瀹堕�氳璐﹀彿" prop="cloudHome">
+ <el-input v-model="editConfig.infomation.cloudHome"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="娴嬪畾" prop="determine">
+ <el-input v-model="editConfig.infomation.determine"></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </div>
+ <!-- 瑙掕壊涓庢潈闄� -->
+ <div class="basic-info-title">瑙掕壊涓庢潈闄�</div>
+ <div class="address-view">
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="瑙掕壊鏉冮檺" prop="rolePermssion">
+ <el-select v-model="editConfig.infomation.rolePermssion" placeholder="璇烽�夋嫨" size="mini">
+ <el-option
+ v-for="item in rolePermssionOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="涓氬姟鏁版嵁鑼冨洿" prop="dataScope">
+ <el-button type="text">鏁版嵁鑼冨洿璁剧疆</el-button>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item prop="role1">
+ <template slot="label">
+ <div style="display: flex; float: right">
+ <div style="font-size: 16px"><i class="el-icon-question"></i></div>
+ <span style="margin-left: 5px">缂栬緫鍏朵粬鎴愬憳鍗曟嵁鎵嬫満</span>
+ </div>
+ </template>
+ <el-switch v-model="editConfig.infomation.role1" active-color="#2E68DB" inactive-color="#AEB9CA">
+ </el-switch>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="缂栬緫鑷繁鍗曟嵁鎵嬫満" prop="role2">
+ <el-switch v-model="editConfig.infomation.role2" active-color="#2E68DB" inactive-color="#AEB9CA">
+ </el-switch>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鎵嬫満鍙风爜鏄剧ず鏍峰紡鎺у埗" prop="role3">
+ <el-switch v-model="editConfig.infomation.role3" active-color="#2E68DB" inactive-color="#AEB9CA">
+ </el-switch>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鏄剧ず鍚堝悓鏈嶅姟淇℃伅" prop="role4">
+ <el-switch v-model="editConfig.infomation.role4" active-color="#2E68DB" inactive-color="#AEB9CA">
+ </el-switch>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鏄剧ず鍏蜂綋鏈嶅姟鍒版湡鏃�" prop="role5">
+ <el-switch v-model="editConfig.infomation.role5" active-color="#2E68DB" inactive-color="#AEB9CA">
+ </el-switch>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鏄剧ず瀹㈡埛鏈嶅姟鍗曞巻鍙茶褰�" prop="role6">
+ <el-switch v-model="editConfig.infomation.role6" active-color="#2E68DB" inactive-color="#AEB9CA">
+ </el-switch>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鍗曟嵁鐩稿叧淇℃伅鏌ヨ鎵�鏈夊叧鑱旀暟鎹�" prop="role7">
+ <el-switch v-model="editConfig.infomation.role7" active-color="#2E68DB" inactive-color="#AEB9CA">
+ </el-switch>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="甯傚満娲诲姩鐩稿叧淇℃伅鏌ヨ鎵�鏈夋暟鎹�" prop="role8">
+ <el-switch v-model="editConfig.infomation.role8" active-color="#2E68DB" inactive-color="#AEB9CA">
+ </el-switch>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </div>
+ <!-- 鍏朵粬璁剧疆 -->
+ <div class="basic-info-title">鍏朵粬璁剧疆</div>
+ <div class="basic-info-view">
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="鐧诲綍鏃跺惎鐢ㄦ墜鏈虹煭淇￠獙璇�" prop="other1">
+ <el-switch v-model="editConfig.infomation.other1" active-color="#2E68DB" inactive-color="#AEB9CA">
+ </el-switch>
+ 闇�璐拱骞惰缃煭淇¤处鎴�
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鏄惁鍏佽鎺ㄩ�佺Щ鍔ㄧ鎻愰啋" prop="other2">
+ <el-switch v-model="editConfig.infomation.other2" active-color="#2E68DB" inactive-color="#AEB9CA">
+ </el-switch>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </div>
+ <!-- 闄勪欢淇℃伅 -->
+ <div class="basic-info-title">闄勪欢淇℃伅</div>
+ <div class="basic-info-view">
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="闄勪欢" prop="">
+ <template slot="label">
+ <div style="display: flex; float: right">
+ <div style="font-size: 16px">
+ <i class="el-icon-warning-outline" title="鏈�澶氫笂浼�20涓檮浠讹紝鏈�澶ч檺鍒�5MB"></i>
+ </div>
+ <span style="margin-left: 5px">闄勪欢</span>
+ </div>
+ </template>
+ <div class="annex-view">
+ <div @click="addAnnexClick">
+ <div style="display: flex; float: right">
+ <div style="font-size: 16px"><i class="el-icon-paperclip"></i></div>
+ <span>娣诲姞</span>
+ </div>
+ </div>
+ <div class="setFormat" @click="setFormatClick">璁剧疆鍏佽涓婁紶鐨勬枃浠舵牸寮�</div>
+ </div>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </div>
+ </div>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button type="primary" size="small" @click="editConfig.visible = false">淇� 瀛�</el-button>
+ <el-button size="small" @click="editConfig.visible = false">鍙� 娑�</el-button>
+ </div>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+import CommonSelectView from "@/components/makepager/CommonSelectView"
+export default {
+ name: "AddMemberManageDialog",
+ props: {
+ editCommonConfig: {
+ type: Object,
+ default: () => {
+ return {
+ visible: false,
+ title: "鏂板缓",
+ infomation: {
+ account: "",
+ isAdmin: "",
+ password: "",
+ passwordConfirm: "",
+ name: "",
+ realName: "",
+ department: "",
+ state: "",
+ phone: "",
+ telephone: "",
+ email: "",
+ wechat: "",
+ approvalDelegation: "",
+ miniProgram: "",
+ dingtalk: "",
+ approvalPrincipal: "",
+ positionLevel: "",
+ notes: "",
+ employeeDate: "",
+ avatar: "",
+ cloudHome: "",
+ determine: "",
+ rolePermssion: "",
+ dataScope: "",
+ role1: "",
+ role2: "",
+ role3: "",
+ role4: "",
+ role5: "",
+ role6: "",
+ role7: "",
+ role8: "",
+ other1: "",
+ other2: ""
+ }
+ }
+ }
+ }
+ },
+ components: { CommonSelectView },
+ computed: {},
+ data() {
+ return {
+ dialogWidth: "80%",
+ editConfig: this.editCommonConfig,
+ rules: {
+ account: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+ password: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+ passwordConfirm: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+ name: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+ department: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+ rolePermssion: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }]
+ },
+ stateOptions: [], // 鐘舵��
+ rolePermssionOptions: [], // 瑙掕壊鏉冮檺
+ positionLevelOptions: [], // 鑱屼綅绾у埆
+ approvalDelegationOptions: [] // 瀹℃壒濮旀墭
+ }
+ },
+ created() {},
+ methods: {
+ handleClose() {
+ this.editConfig.visible = false
+ },
+ // 娣诲姞闄勪欢
+ addAnnexClick() {},
+ // 璁剧疆鍏佽涓婁紶鏂囦欢鏍煎紡
+ setFormatClick() {}
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.add-member-manage {
+ .basic-info {
+ .basic-info-title {
+ background-color: #f4f8fe;
+ padding-left: 10px;
+ font-size: 15px;
+ font-weight: bold;
+ color: #666;
+ height: 42px;
+ line-height: 42px;
+ }
+ .basic-info-view {
+ margin-top: 10px;
+ padding-right: 40px;
+ .custom-name {
+ display: flex;
+ .common-select-btn {
+ margin-left: 5px;
+ font-size: 16px;
+ }
+ }
+ }
+ .address-view {
+ margin-top: 10px;
+ padding-right: 40px;
+ }
+ .annex-view {
+ display: flex;
+ color: #6166d3;
+ .setFormat {
+ margin-left: 10px;
+ }
+ }
+ }
+ .unflod-collapse {
+ display: flex;
+ height: 30px;
+ justify-content: center;
+ align-items: center;
+ color: #6166d3;
+ }
+ .dialog-footer {
+ background-color: #f5f5f5;
+ height: 55px;
+ line-height: 55px;
+ }
+}
+</style>
diff --git a/src/views/backgroundConfig/memberManage/EditDepartmentDialog.vue b/src/views/backgroundConfig/memberManage/EditDepartmentDialog.vue
new file mode 100644
index 0000000..1b1eab2
--- /dev/null
+++ b/src/views/backgroundConfig/memberManage/EditDepartmentDialog.vue
@@ -0,0 +1,103 @@
+<template>
+ <div class="edit-department">
+ <el-dialog
+ :title="editDepartmentConfig.title"
+ :visible.sync="editConfig.visible"
+ :width="dialogWidth"
+ :before-close="handleClose"
+ >
+ <el-form ref="form" :model="editConfig.infomation" :rules="rules" label-width="100px" size="mini">
+ <!-- 淇℃伅 -->
+ <div class="basic-info">
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="閮ㄩ棬鍚嶇О" prop="departmentName">
+ <el-input v-model="editConfig.infomation.departmentName"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="閮ㄩ棬缂栧彿" prop="departmentNumber">
+ <el-input v-model="editConfig.infomation.departmentNumber"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="24">
+ <el-form-item label="澶囨敞" prop="notes">
+ <el-input
+ type="textarea"
+ :autosize="{ minRows: 1, maxRows: 4 }"
+ placeholder="璇疯緭鍏ュ唴瀹�"
+ v-model="editConfig.infomation.notes"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </div>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button type="primary" size="small" @click="editConfig.visible = false">淇� 瀛�</el-button>
+ <el-button size="small" @click="editConfig.visible = false">鍙� 娑�</el-button>
+ </div>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "EditDepartmentDialog",
+ props: {
+ editDepartmentConfig: {
+ type: Object,
+ default: () => {
+ return {
+ visible: false,
+ title: "鏂板缓",
+ infomation: {
+ departmentName: "",
+ departmentNumber: "",
+ notes: ""
+ }
+ }
+ }
+ }
+ },
+ components: {},
+ computed: {},
+ data() {
+ return {
+ dialogWidth: "40%",
+ editConfig: this.editDepartmentConfig,
+ rules: {
+ departmentName: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+ departmentNumber: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }]
+ }
+ }
+ },
+ created() {
+ this.isActive = true
+ },
+ methods: {
+ handleClose() {
+ this.editConfig.visible = false
+ }
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.edit-department {
+ .basic-info {
+ padding: 20px;
+ }
+ .dialog-footer {
+ background-color: #f5f5f5;
+ height: 55px;
+ line-height: 55px;
+ }
+}
+::v-deep {
+ .el-dialog__wrapper {
+ margin-top: 20vh;
+ }
+}
+</style>
diff --git a/src/views/backgroundConfig/memberManage/TreeLeft.vue b/src/views/backgroundConfig/memberManage/TreeLeft.vue
new file mode 100644
index 0000000..1828f3e
--- /dev/null
+++ b/src/views/backgroundConfig/memberManage/TreeLeft.vue
@@ -0,0 +1,146 @@
+<template>
+ <div class="tree-left">
+ <el-tree :data="data" ref="tree" default-expand-all node-key="id" :expand-on-click-node="false">
+ <span
+ class="custom-tree-node"
+ slot-scope="{ node, data }"
+ @mouseenter="mouseenter(data)"
+ @mouseleave="mouseleave(data)"
+ >
+ <span>{{ node.label }}</span>
+ <span>
+ <el-dropdown
+ v-show="data.show"
+ @command="
+ (command) => {
+ handleCommand(command, data)
+ }
+ "
+ >
+ <span class="el-dropdown-link">
+ <i class="el-icon-more icon"></i>
+ </span>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item command="edit">缂栬緫閮ㄩ棬</el-dropdown-item>
+ <el-dropdown-item command="add">鏂板瀛愰儴闂�</el-dropdown-item>
+ <el-dropdown-item v-if="data.id !== 1" command="delete">鍒犻櫎閮ㄩ棬</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+ </span>
+ </span>
+ </el-tree>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "TreeLeft",
+ props: {},
+ components: {},
+ computed: {},
+ data() {
+ const data = [
+ {
+ id: 1,
+ label: "涓婃捣鐏靛綋淇℃伅绉戞妧鏈夐檺鍏徃",
+ children: [
+ {
+ id: 11,
+ label: "閿�鍞儴",
+ children: [
+ {
+ id: 111,
+ label: "Mia"
+ },
+ {
+ id: 112,
+ label: "绯荤粺绠＄悊鍛�"
+ },
+ {
+ id: 113,
+ label: "閿�鍞�"
+ },
+ {
+ id: 114,
+ label: "閿�鍞�荤洃"
+ },
+ {
+ id: 115,
+ label: "閿�鍞竴閮�",
+ children: []
+ },
+ {
+ id: 116,
+ label: "閿�鍞簩閮�",
+ children: []
+ }
+ ]
+ },
+ {
+ id: 21,
+ label: "绠＄悊灞�",
+ children: [
+ {
+ id: 211,
+ label: "BOSS"
+ },
+ {
+ id: 212,
+ label: "绯荤粺绠＄悊鍛�"
+ }
+ ]
+ },
+ {
+ id: 31,
+ label: "璐㈠姟閮�",
+ children: []
+ },
+ {
+ id: 41,
+ label: "甯傚満閮�",
+ children: []
+ }
+ ]
+ }
+ ]
+ return {
+ defaultProps: {
+ children: "children",
+ label: "label"
+ },
+ data: JSON.parse(JSON.stringify(data))
+ }
+ },
+ created() {},
+ methods: {
+ mouseenter(data) {
+ this.$set(data, "show", true)
+ },
+ mouseleave(data) {
+ this.$set(data, "show", false)
+ },
+ handleCommand(command, data) {
+ this.$emit("editDepartmentClick", command, data)
+ }
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.tree-left {
+ padding: 20px 10px;
+ .custom-tree-node {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 14px;
+ padding-right: 10px;
+ height: 100%;
+ .icon {
+ transform: rotate(90deg);
+ }
+ }
+}
+</style>
diff --git a/src/views/backgroundConfig/memberManage/index.vue b/src/views/backgroundConfig/memberManage/index.vue
index 676c6cf..89f997d 100644
--- a/src/views/backgroundConfig/memberManage/index.vue
+++ b/src/views/backgroundConfig/memberManage/index.vue
@@ -1,6 +1,8 @@
<template>
<div class="memeber-manage">
- <div class="left"></div>
+ <div class="left">
+ <TreeLeft @editDepartmentClick="editDepartmentClick" />
+ </div>
<div class="right">
<SearchCommonView
ref="searchCommonView"
@@ -38,18 +40,24 @@
</div>
<!-- 鏂板缓/缂栬緫 -->
- <AddContractManageDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
+ <AddMemberManageDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
+ <!-- 缂栬緫閮ㄩ棬 -->
+ <EditDepartmentDialog v-if="departmentConfig.visible" :edit-department-config="departmentConfig" />
</div>
</template>
<script>
-import AddContractManageDialog from "@/views/sales/contractManage/AddContractManageDialog"
+import AddMemberManageDialog from "@/views/backgroundConfig/memberManage/AddMemberManageDialog"
+import TreeLeft from "@/views/backgroundConfig/memberManage/TreeLeft"
+import EditDepartmentDialog from "@/views/backgroundConfig/memberManage/EditDepartmentDialog"
export default {
name: "MemberManage",
props: {},
components: {
- AddContractManageDialog
+ AddMemberManageDialog,
+ TreeLeft,
+ EditDepartmentDialog
},
computed: {
searchCommonHeight() {
@@ -82,6 +90,11 @@
visible: false,
title: "鏂板缓",
infomation: {}
+ },
+ departmentConfig: {
+ visible: false,
+ title: "缂栬緫閮ㄩ棬",
+ infomation: {}
}
}
},
@@ -106,7 +119,7 @@
}
],
tableColumn: [
- { label: "濮撳悕", prop: "name", min: 120 },
+ { label: "濮撳悕", prop: "name", sortable: true, min: 120 },
{ label: "璐﹀彿", prop: "account", min: 90 },
{ label: "閮ㄩ棬", prop: "department" },
{ label: "瑙掕壊鏉冮檺", prop: "rolePermssion", min: 100 },
@@ -127,15 +140,40 @@
this.editConfig.visible = true
this.editConfig.title = "鏂板缓"
this.editConfig.infomation = {
- customName: "",
- documentNumber: "ZDYBD01-3",
- owner: "",
- contractStatus: "",
- salesQuotation: "",
- approvalWorkflow: "",
- approvalSteps: "",
- approvalPerson: "",
- approvalOpinion: ""
+ account: "",
+ isAdmin: "",
+ password: "",
+ passwordConfirm: "",
+ name: "",
+ realName: "",
+ department: "",
+ state: "",
+ phone: "",
+ telephone: "",
+ email: "",
+ wechat: "",
+ approvalDelegation: "",
+ miniProgram: "",
+ dingtalk: "",
+ approvalPrincipal: "",
+ positionLevel: "",
+ notes: "",
+ employeeDate: "",
+ avatar: "",
+ cloudHome: "",
+ determine: "",
+ rolePermssion: "",
+ dataScope: "",
+ role1: "",
+ role2: "",
+ role3: "",
+ role4: "",
+ role5: "",
+ role6: "",
+ role7: "",
+ role8: "",
+ other1: "",
+ other2: ""
}
},
// 缂栬緫
@@ -144,15 +182,40 @@
this.editConfig.visible = true
this.editConfig.title = "缂栬緫"
this.editConfig.infomation = {
- customName: "",
- documentNumber: "TKD20230521-12",
- owner: "",
- contractStatus: "",
- salesQuotation: "",
- approvalWorkflow: "",
- approvalSteps: "",
- approvalPerson: "",
- approvalOpinion: ""
+ account: "",
+ isAdmin: "",
+ password: "",
+ passwordConfirm: "",
+ name: "",
+ realName: "",
+ department: "",
+ state: "",
+ phone: "",
+ telephone: "",
+ email: "",
+ wechat: "",
+ approvalDelegation: "",
+ miniProgram: "",
+ dingtalk: "",
+ approvalPrincipal: "",
+ positionLevel: "",
+ notes: "",
+ employeeDate: "",
+ avatar: "",
+ cloudHome: "",
+ determine: "",
+ rolePermssion: "",
+ dataScope: "",
+ role1: "",
+ role2: "",
+ role3: "",
+ role4: "",
+ role5: "",
+ role6: "",
+ role7: "",
+ role8: "",
+ other1: "",
+ other2: ""
}
},
// 鍚敤
@@ -170,6 +233,24 @@
// 鍒犻櫎
deleteClick(row) {
console.log(row)
+ },
+ // 缂栬緫閮ㄩ棬
+ editDepartmentClick(command, data) {
+ console.log(command, data)
+ this.departmentConfig.visible = true
+ if (command === "edit") {
+ this.departmentConfig.infomation = {
+ departmentName: data.label,
+ departmentNumber: data.id,
+ notes: ""
+ }
+ } else if (command === "add") {
+ this.departmentConfig.infomation = {
+ departmentName: "",
+ departmentNumber: "",
+ notes: ""
+ }
+ }
}
}
}
diff --git a/src/views/backgroundConfig/rolePermssion/AddRolePermssionDialog.vue b/src/views/backgroundConfig/rolePermssion/AddRolePermssionDialog.vue
new file mode 100644
index 0000000..c0e7418
--- /dev/null
+++ b/src/views/backgroundConfig/rolePermssion/AddRolePermssionDialog.vue
@@ -0,0 +1,316 @@
+<template>
+ <div class="add-role-permission">
+ <el-dialog
+ :title="editCommonConfig.title"
+ :visible.sync="editConfig.visible"
+ :width="dialogWidth"
+ :before-close="handleClose"
+ >
+ <el-form
+ ref="form"
+ :model="editConfig.infomation"
+ :rules="rules"
+ label-position="right"
+ label-width="200px"
+ size="mini"
+ >
+ <!-- 淇℃伅 -->
+ <div class="basic-info">
+ <!-- 鍩烘湰淇℃伅 -->
+ <div class="basic-info-title">鍩烘湰淇℃伅</div>
+ <div class="basic-info-view">
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="鏉冮檺鍚嶇О" prop="owner">
+ <el-input v-model="editConfig.infomation.owner"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="澶囨敞" prop="notes">
+ <el-input
+ type="textarea"
+ :autosize="{ minRows: 1, maxRows: 4 }"
+ placeholder="璇疯緭鍏ュ唴瀹�"
+ v-model="editConfig.infomation.notes"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </div>
+ <!-- 妯″潡閫夋嫨 -->
+ <div class="module-select">
+ <el-button type="text" @click="moduleSelectClick('all')" :class="isActive ? 'selBtn' : ''">鍏ㄩ儴</el-button>
+ <el-button type="text" @click="moduleSelectClick('custom')">瀹㈡埛绠＄悊</el-button>
+ <el-button type="text" @click="moduleSelectClick('sales')">閿�鍞鐞�</el-button>
+ <el-button type="text" @click="moduleSelectClick('service')">鏈嶅姟绠＄悊</el-button>
+ <el-button type="text" @click="moduleSelectClick('background')">鍚庡彴璁剧疆</el-button>
+ <div class="title">{{ moduleSelTitle }}</div>
+ </div>
+ </div>
+ <div>
+ <el-table :show-header="false" :data="tableData" border style="width: 100%">
+ <el-table-column prop="date" label="" width="180">
+ <template slot-scope="scope">
+ <el-checkbox v-model="scope.row.checked" @change="selAllChange(scope.row)">{{
+ scope.row.name
+ }}</el-checkbox>
+ </template>
+ </el-table-column>
+ <el-table-column prop="name" label="">
+ <template slot-scope="scope">
+ <el-checkbox-group
+ v-model="scope.row.checkedList"
+ @change="
+ (value) => {
+ handleCheckedChange(value, scope.row)
+ }
+ "
+ >
+ <el-checkbox v-for="item in scope.row.detailsList" :label="item.name" :key="item.id">{{
+ item.name
+ }}</el-checkbox>
+ </el-checkbox-group>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <div class="left">
+ <el-checkbox v-model="allChecked" @change="allChange">鍏ㄩ��</el-checkbox>
+ <div class="globalAuth">
+ <span>鍏ㄥ眬蹇�熸巿鏉�</span>
+ <el-select v-model="value" size="mini" placeholder="璇烽�夋嫨">
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+ </el-select>
+ </div>
+ <div class="radio">
+ <el-radio v-model="radio" label="1">鎺堟潈</el-radio>
+ <el-radio v-model="radio" label="2">鍙栨秷鎺堟潈</el-radio>
+ </div>
+ </div>
+ <div class="btn">
+ <el-button type="primary" size="small" @click="editConfig.visible = false">淇� 瀛�</el-button>
+ <el-button size="small" @click="editConfig.visible = false">鍙� 娑�</el-button>
+ </div>
+ </div>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "AddRolePermissionDialog",
+ props: {
+ editCommonConfig: {
+ type: Object,
+ default: () => {
+ return {
+ visible: false,
+ title: "鏂板缓",
+ infomation: {
+ owner: "",
+ notes: ""
+ }
+ }
+ }
+ }
+ },
+ components: {},
+ computed: {},
+ data() {
+ const commonList = [
+ { id: 1, name: "鏌ョ湅" },
+ { id: 2, name: "鏂板缓" },
+ { id: 3, name: "缂栬緫" },
+ { id: 4, name: "鍒犻櫎" },
+ { id: 5, name: "澶嶅埗" },
+ { id: 6, name: "鍒嗛厤" },
+ { id: 7, name: "鍏变韩" },
+ { id: 8, name: "瀵煎叆" },
+ { id: 9, name: "瀵煎嚭" },
+ { id: 10, name: "鏇存敼鍒涘缓浜�" },
+ { id: 11, name: "鏌ヨ鍒嗙被璁剧疆" },
+ { id: 12, name: "鎺ㄨ繘" },
+ { id: 13, name: "涓嬭浇" },
+ { id: 14, name: "棰勮" },
+ { id: 15, name: "涓嬭浇鍜岄瑙堟鏁�" },
+ { id: 16, name: "涓嬭浇鍏ㄩ儴闄勪欢" }
+ ]
+ return {
+ dialogWidth: "60%",
+ editConfig: this.editCommonConfig,
+ rules: {
+ owner: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }]
+ },
+ moduleSelTitle: "鍏ㄩ儴",
+ tableData: [],
+ btnCommonList: commonList,
+ allChecked: false,
+ radio: "",
+ value: "",
+ options: [{ value: "1", label: "鍒犻櫎" }],
+ isActive: false
+ }
+ },
+ created() {
+ this.isActive = true
+ },
+ methods: {
+ handleClose() {
+ this.editConfig.visible = false
+ },
+ // 妯″潡閫夋嫨
+ moduleSelectClick(value) {
+ this.isActive = false
+ if (value === "all") {
+ this.moduleSelTitle = "鍏ㄩ儴"
+ this.tableData = []
+ } else if (value === "custom") {
+ this.moduleSelTitle = "瀹㈡埛绠＄悊"
+ this.tableData = [
+ {
+ name: "閿�鍞嚎绱�",
+ checked: false,
+ checkedList: ["鏌ョ湅"],
+ detailsList: this.btnCommonList
+ },
+ {
+ name: "瀹㈡埛绠＄悊",
+ checked: false,
+ checkedList: [],
+ detailsList: this.btnCommonList
+ },
+ {
+ name: "鑱旂郴浜�",
+ checked: false,
+ checkedList: [],
+ detailsList: this.btnCommonList
+ },
+ {
+ name: "璺熻繘璁板綍",
+ checked: false,
+ checkedList: [],
+ detailsList: this.btnCommonList
+ }
+ ]
+ } else if (value === "sales") {
+ this.selectA = false
+ this.selectB = true
+ this.moduleSelTitle = "閿�鍞鐞�"
+ this.tableData = []
+ } else if (value === "service") {
+ this.moduleSelTitle = "鏈嶅姟绠＄悊"
+ this.tableData = []
+ } else if (value === "background") {
+ this.moduleSelTitle = "鍚庡彴璁剧疆"
+ this.tableData = []
+ }
+ },
+ // 妯″潡鍏ㄩ��
+ selAllChange(row) {
+ if (row.checked) {
+ let arr = []
+ row.detailsList.forEach((ele) => {
+ arr.push(ele.name)
+ })
+ row.checkedList = arr
+ }
+ },
+ handleCheckedChange(value, row) {
+ if (value.length === row.detailsList.length) {
+ row.checked = true
+ } else {
+ row.checked = false
+ }
+ row.checkedList = value
+ },
+ // 鍏ㄩ��
+ allChange() {
+ this.allChecked != this.allChecked
+ }
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.add-role-permission {
+ .basic-info {
+ .basic-info-title {
+ background-color: #f4f8fe;
+ padding-left: 10px;
+ font-size: 15px;
+ font-weight: bold;
+ color: #666;
+ height: 42px;
+ line-height: 42px;
+ }
+ .basic-info-view {
+ margin-top: 10px;
+ padding-right: 40px;
+ .custom-name {
+ display: flex;
+ .common-select-btn {
+ margin-left: 5px;
+ font-size: 16px;
+ }
+ }
+ }
+ .module-select {
+ background-color: $color-text-placehoder;
+ padding: 20px;
+ .el-button {
+ background-color: #fff;
+ padding: 10px;
+ color: $color-text-main;
+ &:hover,
+ &:active,
+ &:focus {
+ background-color: $color-primary;
+ color: #fff;
+ }
+ }
+ .selBtn {
+ background-color: $color-primary;
+ color: #fff;
+ }
+ .title {
+ margin-top: 20px;
+ color: black;
+ font-weight: bold;
+ }
+ }
+ }
+ .dialog-footer {
+ background-color: #f5f5f5;
+ height: 55px;
+ line-height: 55px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ .left {
+ position: absolute;
+ left: 10px;
+ display: flex;
+ align-items: center;
+ .globalAuth {
+ font-size: 14px;
+ color: #606266;
+ margin-left: 10px;
+ .el-select {
+ width: 90px;
+ margin-left: 5px;
+ }
+ }
+ .radio {
+ margin-left: 10px;
+ .el-radio {
+ margin-right: 10px;
+ }
+ }
+ }
+ }
+}
+</style>
diff --git a/src/views/backgroundConfig/rolePermssion/index.vue b/src/views/backgroundConfig/rolePermssion/index.vue
index 7be9125..53c2e70 100644
--- a/src/views/backgroundConfig/rolePermssion/index.vue
+++ b/src/views/backgroundConfig/rolePermssion/index.vue
@@ -1,7 +1,7 @@
<template>
<div class="role-peimission">
<div class="btn-pager">
- <el-button @click="addpermssionClick" type="primary" size="small">鏂板鏉冮檺</el-button>
+ <el-button @click="addBtnClick" type="primary" size="small">鏂板鏉冮檺</el-button>
</div>
<TableCommonView ref="tableListRef" :select-box="false" :table-list="tableList">
<template slot="tableButton">
@@ -19,18 +19,18 @@
</template>
</TableCommonView>
<!-- 鏂板缓/缂栬緫 -->
- <AddContractManageDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
+ <AddRolePermssionDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
</div>
</template>
<script>
-import AddContractManageDialog from "@/views/sales/contractManage/AddContractManageDialog"
+import AddRolePermssionDialog from "@/views/backgroundConfig/rolePermssion/AddRolePermssionDialog"
export default {
name: "RoleOeimission",
props: {},
components: {
- AddContractManageDialog
+ AddRolePermssionDialog
},
computed: {
searchCommonHeight() {
@@ -42,7 +42,7 @@
tableList: {},
editConfig: {
visible: false,
- title: "鏂板缓",
+ title: "鏂板鏉冮檺",
infomation: {}
}
}
--
Gitblit v1.8.0