update:权限

src/pages/Withdrawal/Audit/index.less

@@ -71,4 +71,13 @@
 	// justify-content: center;
 	// align-items: center;
 	text-align: center;
+}
+.cancel {
+	background-color: #409EFF !important;
+	color: white;
+	border: none;
+}
+.confirm {
+	background-color: #b8b8b8 !important;
+	border: none;
 }
\ No newline at end of file

src/pages/Withdrawal/Audit/index.vue

@@ -9,24 +9,20 @@
       >
         <el-tab-pane
           label="待审核"
-          name="first"
+          name="0"
           @tab-click="handleTabChange"
         ></el-tab-pane>
         <el-tab-pane
           label="审核通过"
-          name="second"
+          name="1"
           @tab-click="handleTabChange"
         ></el-tab-pane>
         <el-tab-pane
           label="审核驳回"
-          name="third"
+          name="2"
           @tab-click="handleTabChange"
         ></el-tab-pane>
-        <el-tab-pane
-          label="提现失败"
-          name="fourth"
-          @tab-click="handleTabChange"
-        >
+        <el-tab-pane label="提现失败" name="3" @tab-click="handleTabChange">
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -68,7 +64,16 @@
           </el-form-item> -->
       </el-form>
       <!-- 列表区 -->
-      <el-table class="goods_list" :data="goodsList" border stripe>
+      <el-table
+        class="goods_list"
+        v-loading="loading"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.6)"
+        :data="goodsList"
+        border
+        stripe
+      >
         <el-table-column
           label="提现用户"
           prop="user_id"
@@ -109,12 +114,11 @@
           prop="create_time"
           align="center"
         ></el-table-column>
-        <el-table-column label="状态" align="center">
-          <template #default="scope">
-            <span v-if="scope.row.withdraw_apply_status == 0">待审核</span>
-            <span v-if="scope.row.withdraw_apply_status == 1">审核通过</span>
-            <span v-if="scope.row.withdraw_apply_status == 2">审核驳回</span>
-          </template>
+        <el-table-column
+          label="状态"
+          prop="withdraw_apply_status_text"
+          align="center"
+        >
         </el-table-column>
         <el-table-column
           label="审核时间"
@@ -132,23 +136,23 @@
             <el-button
               type="text"
               @click="handleDetail('look', scope.row)"
-              v-if="searchProps.withdraw_apply_status !== 'fourth'"
+              v-if="searchProps.withdraw_apply_status !== '3'"
               >查看</el-button
             >
             <el-button
               type="text"
-              v-if="searchProps.withdraw_apply_status == 'first'"
+              v-if="searchProps.withdraw_apply_status == '0'"
               @click="handleDetail('audit', scope.row)"
               >审核</el-button
             >
             <el-button
               type="text"
-              v-if="searchProps.withdraw_apply_status == 'fourth'"
+              v-if="searchProps.withdraw_apply_status == '3'"
               >解冻</el-button
             >
             <el-button
               type="text"
-              v-if="searchProps.withdraw_apply_status == 'fourth'"
+              v-if="searchProps.withdraw_apply_status == '3'"
               >重新发起</el-button
             >
           </template>
@@ -173,7 +177,7 @@
     >点击打开外层 Dialog</el-button
   >
 
-  <el-dialog title="提现申请审核" v-model="outerVisible" width="50%">
+  <el-dialog title="提现申请审核" :show-close="false" :close-on-click-modal="false" v-model="outerVisible" width="50%">
     <el-form inline :model="form">
       <el-form-item label="提现用户" label-width="120px">
         <span style="display: inline-block; min-width: 200px">{{
@@ -182,12 +186,12 @@
       </el-form-item>
       <el-button
         type="info"
-        @click="handleButtonlist('black')"
+        @click="handleButtonlist('黑名单')"
         v-show="dialogData.showMode === 'audit'"
         >黑名单</el-button
       >
       <el-button
-        @click="handleButtonlist('white')"
+        @click="handleButtonlist('白名单')"
         v-show="dialogData.showMode === 'audit'"
         >白名单</el-button
       >
@@ -252,13 +256,13 @@
       <div class="dialog-footer">
         <el-button
           type="primary"
-          @click="handleButtonlist('adopt')"
+          @click="handleButtonlist('通过')"
           v-show="dialogData.showMode === 'audit'"
           >通过</el-button
         >
         <el-button
           type="danger"
-          @click="handleButtonlist('refuse')"
+          @click="handleButtonlist('拒绝')"
           v-show="dialogData.showMode === 'audit'"
           >拒绝</el-button
         >
@@ -289,7 +293,7 @@ export default {
           history_download: "7", //历史分享下载量
           history_download_keep: "4", //历史分享留存
           create_time: "2021-5-4", //申请时间
-          withdraw_apply_status: "待审核", //状态
+          withdraw_apply_status_text: "待审核", //状态
           //审核时间
           audit_user_name: "我", //审核人
         },
@@ -298,7 +302,7 @@ export default {
       searchProps: {
         user_id: "", //用户id
         page_size: 1, //页码
-        withdraw_apply_status: "first", //状态
+        withdraw_apply_status: "0", //状态
       },
       // 弹框
       dialogData: {
@@ -309,12 +313,13 @@ export default {
       outerVisible: false, //外层弹框
       page: 20,
       count: 0, //总条数
-      tileTipe: "",
+      loading: false, //加载中
     };
   },
+  mounted() {},
   methods: {
-    handleTabChange(a, b) {
-      console.log(JSON.parse(JSON.stringify(a)).name, b);
+    handleTabChange() {
+      this.getApplyList();
     },
     // 分页
     handleCurrentChange() {},
@@ -326,8 +331,11 @@ export default {
     //  二次确认弹框
     handleButtonlist(val) {
       this.$confirm(`<p>你确定此操作吗</p><p>${val}</p>`, "再次确认", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
+        confirmButtonText: "取消",
+        cancelButtonText: "确定",
+        cancelButtonClass: "cancel",
+        confirmButtonClass: "confirm",
+        closeOnClickModal: false,
         dangerouslyUseHTMLString: true,
         center: true,
         showClose: false,
@@ -336,28 +344,35 @@ export default {
         .then(() => {
           this.$message({
             type: "success",
-            message: "删除成功!",
+            message: "操作成功",
           });
         })
         .catch(() => {
           this.$message({
             type: "info",
-            message: "已取消删除",
+            message: "已取消操作",
           });
         });
     },
     // 获取提现审核列表
-    // async getApplyList () {
-    //   try {
-    //     const res = await getApplyList(this.searchProps);
-    //     if (res.code !== 0) return this.$message.error(res.reason);
-    //     console.log("商品列表", res);
-    //     this.goodsList = res.result.list;
-    //     this.count = res.result.count;
-    //   } catch (error) {
-    //     console.error(error);
-    //   }
-    // },
+    async getApplyList() {
+      this.loading = true;
+      setTimeout(() => {
+        this.loading = false;
+      }, 2000);
+      console.log(this.searchProps);
+      // try {
+      //   const res = await getApplyList(this.searchProps);
+      //   if (res.code !== 0) return this.$message.error(res.reason);
+      //   console.log("提现列表", res);
+      //   this.goodsList = res.result.list;
+      //   this.count = res.result.count;
+      //   this.loading = false
+      // } catch (error) {
+      //   this.loading = false
+      //   console.error(error);
+      // }
+    },
   },
 };
 </script>

src/pages/Withdrawal/Role/add-role.vue

+<template>
+  <div>
+    <div class="addRole">
+      <el-page-header class="back" @back="goBack" content="角色创建页面">
+      </el-page-header>
+      <el-button type="primary" @click="newAddRole">新增</el-button>
+      <!-- 角色列表 -->
+      <el-table
+        :data="roleDataList"
+        style="width: 100%; margin-top: 10px"
+        :header-cell-style="{ background: '#e1e4e5', color: '#80878f' }"
+        border
+      >
+        <el-table-column prop="role_name" label="角色名称" width="180">
+        </el-table-column>
+        <el-table-column prop="role_range" label="角色范围"> </el-table-column>
+        <el-table-column label="操作">
+          <template #default="scope">
+            <el-button
+              size="mini"
+              type="primary"
+              @click.stop="handleModify(scope.$index, scope.row)"
+              >修改</el-button
+            >
+            <el-button
+              size="mini"
+              type="primary"
+              @click.stop="toRoleDetail(scope.row)"
+              >查看详情</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 弹框 -->
+      <el-dialog :title="roleTitle" v-model="dialogFormVisible">
+        <el-form>
+          <!-- 编辑 -->
+          <div v-if="edit">
+            <roleInfo :role_info_detail="role_info_detail" />
+          </div>
+          <!-- 新增 -->
+          <el-form-item label="角色名称" :label-width="formLabelWidth">
+            <el-input v-model="roleName" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="角色范围" :label-width="formLabelWidth">
+            <el-cascader
+              v-model="selectedOptions"
+              :options="permissionsAll"
+              :props="props"
+              @change="parentCateChange"
+              clearable
+              style="width: 280px"
+            ></el-cascader>
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="dialogFormVisible = false">取 消</el-button>
+            <el-button type="primary" @click="confirmRole(edit)"
+              >确 定</el-button
+            >
+          </span>
+        </template>
+      </el-dialog>
+      <page :totalNum="totalNum" @update="update" />
+    </div>
+  </div>
+</template>
+<script>
+import page from "../components/Pagination"
+import roleInfo from './components/roleInfo'
+import {
+  getRole_list as reqGetRole_list, getAdd_role as reqGetAdd_role,
+  getAll_role_list as reqGetAll_role_list,
+  getUpdate_role as reqGetUpdate_role,
+  get_role_info as reqGet_role_info
+} from "../../service/role";
+import { ElMessage } from 'element-plus'
+export default {
+  name: 'KeepaddRole',
+  components: {
+    page,
+    roleInfo
+  },
+  data () {
+    return {
+      parmas: {
+        page: 1,
+        page_size: 20
+      },
+      user_info: {
+        name: "jianghaiming",
+        email: "jianghaiming@126.com"
+      },
+      roleDataList: [],
+      totalNum: null,
+      edit: false,
+      dialogFormVisible: false,
+      roleName: '',
+      roleTitle: '',
+      props: {
+        multiple: true,
+        value: 'id', //value值
+        label: 'desc',//label值
+        children: 'sub_permissions'//children值
+      },
+      formLabelWidth: '120px',
+      selectedOptions: [],//选中权限类型
+      currentRolePrivilege: [],
+      role_info_detail: {//详情非编辑项
+        role_id: "",
+        role_name: "",
+        role_status: "",
+        update_time: "",
+        update_user_name: "",
+        create_time: "",
+        create_user_name: "",
+        role_account_list: []
+      },
+      permissionsAll: [],//所有权限列表
+      permissionsUpdate: [],//选中权限
+    }
+
+  },
+  created () {
+    this.getGetRole_list()
+    this.getPermissionsAll()
+  },
+  methods: {
+    toRoleDetail (row) {
+      this.$router.push({ name: 'RoleDetail', query: { roleId: row.role_id } });
+    },
+    goBack () {
+      this.$router.go(-1)
+    },
+    getPermissionsAll () {
+      // this.user_info = this.$store.state.userInfo
+      let { email } = this.$store.state.userInfo
+      reqGetAll_role_list(email).then(res => {
+        this.permissionsAll = res
+      })
+    },
+
+    newAddRole () {
+      this.dialogFormVisible = true
+      this.roleTitle = '新增角色'
+      this.edit = false
+      this.roleName = ""
+      this.selectedOptions = []
+    },
+    //获取角色列表
+    getGetRole_list () {
+      let { page, page_size } = this.parmas
+      let parmasRole_list = {
+        page,
+        page_size,
+      }
+      reqGetRole_list(parmasRole_list).then(res => {
+        this.roleDataList = res.result
+        this.totalNum = res.count
+      })
+    },
+    //列表分页
+    update (obj) {
+      Object.assign(this.parmas, obj)
+      let { page, page_size } = this.parmas
+      this.getGetRole_list(page, page_size)
+    },
+    //新增角色
+    getAdd_role () {
+      if (!this.roleName || !this.currentRolePrivilege.length) {
+        this.checkFn()
+        return false
+      }
+      let parmasAdd_role = {
+        role_name: this.roleName,
+        permissions: this.currentRolePrivilege
+      }
+      reqGetAdd_role(parmasAdd_role).then(res => {
+        this.dialogFormVisible = false
+        if (res.status === "success") {
+          this.getGetRole_list()
+        } else {
+          this.$message({
+            type: 'info',
+            message: `${res.reason}`
+          });
+        }
+      })
+    },
+    checkFn () {
+      ElMessage({
+        showClose: true,
+        message: '请完善填写信息',
+        type: 'error'
+      });
+    },
+    //修改
+    handleModify (index, row) {
+      this.getRole_info_detail(row.role_id)
+      this.edit = true
+      this.roleTitle = '角色修改'
+      this.dialogFormVisible = true
+    },
+    //角色详情数据
+    getRole_info_detail (role_id) {
+      reqGet_role_info(role_id).then(res => {
+        const { role_id, role_name, role_status, update_time, update_user_name, create_time, create_user_name, permissions, role_account_list } = res
+        this.role_info_detail = {
+          role_id,
+          role_name,
+          role_status,
+          update_time,
+          update_user_name,
+          create_time,
+          create_user_name,
+          role_account_list
+        }
+        this.roleName = role_name
+        this.permissionsUpdate = permissions
+        this.editEchoData(permissions)
+      })
+    },
+    //遍历回显值selectedOptions
+    editEchoData (permissions) {
+      let selectData = []
+      permissions.map(item => {
+        let one = { id: item.id }
+        if (item.sub_permissions) {
+          item.sub_permissions.map(info => {
+            let selectId = [one.id, info.id]
+            selectData.push(selectId)
+          })
+        }
+      })
+      this.selectedOptions = selectData
+    },
+    //编辑角色
+    getUpdate_role () {
+      if (!this.roleName || !this.permissionsUpdate.length) {
+        this.checkFn()
+        return false
+      }
+      let { role_id, role_status } = this.role_info_detail
+      let parmasUpdate_role = {
+        role_name: this.roleName,
+        role_id,
+        role_status,
+        permissions: this.permissionsUpdate
+      }
+      reqGetUpdate_role(parmasUpdate_role).then(res => {
+        if (res.status === "success") {
+          this.dialogFormVisible = false
+          this.edit = true
+          this.getGetRole_list()
+        } else {
+          this.dialogFormVisible = false
+          this.$message({
+            type: 'info',
+            message: `${res.reason}`
+          });
+        }
+      })
+    },
+    //确定
+    confirmRole (edit) {
+      if (edit) {
+        this.getUpdate_role()
+      } else {
+        this.getAdd_role()
+      }
+    },
+    parentCateChange (id) {
+      this.getSelectedOptions(id)
+    },
+    getSelectedOptions (selectedOptions) {
+      let oldDataRule = []
+      selectedOptions.forEach(el => {
+        let oldObj = {
+          id: el[0],
+          sub_permissions: []
+        }
+        let btnObj = {
+          id: el[1],
+        }
+        oldObj.sub_permissions.push(btnObj)
+        oldDataRule.push(oldObj)
+      })
+      let newData = []
+      let newObj = {}
+      oldDataRule.forEach((el, i) => {
+        if (!newObj[el.id]) {
+          newData.push(el);
+          newObj[el.id] = true;
+        } else {
+          newData.forEach(el => {
+            if (el.id === oldDataRule[i].id) {
+              el.sub_permissions = [...el.sub_permissions, ...oldDataRule[i].sub_permissions];
+            }
+          })
+        }
+      })
+      this.currentRolePrivilege = newData
+      this.permissionsUpdate = newData
+    },
+  }
+}
+</script>
+<style lang="less"  scoped>
+.addRole {
+  margin: 50px;
+  .back {
+    margin: 20px 0;
+  }
+}
+</style>
\ No newline at end of file

src/pages/Withdrawal/Role/components/roleInfo.vue

+<template>
+  <div>
+    <el-form-item label="状态" :label-width="formLabelWidth" prop="pass">
+      <el-input disabled v-model="role_status"></el-input>
+    </el-form-item>
+    <el-form-item label="ID" :label-width="formLabelWidth" prop="pass">
+      <el-input disabled v-model="loaclRole_info.role_id"></el-input>
+    </el-form-item>
+    <el-form-item label="创建人账号" :label-width="formLabelWidth">
+      <el-input disabled v-model="loaclRole_info.create_user_name"></el-input>
+    </el-form-item>
+    <el-form-item label="创建时间" :label-width="formLabelWidth">
+      <el-input disabled v-model="loaclRole_info.create_time"></el-input>
+    </el-form-item>
+    <el-form-item label="最后修改人账号" :label-width="formLabelWidth">
+      <el-input disabled v-model="loaclRole_info.update_user_name"></el-input>
+    </el-form-item>
+    <el-form-item label="最后修改时间" :label-width="formLabelWidth">
+      <el-input disabled v-model="loaclRole_info.update_time"></el-input>
+    </el-form-item>
+    <div class="loaclRole_info" v-if="isShowRole_account">
+      <p class="titleRole">角色拥有账号</p>
+      <div class="roleList">
+        <div
+          class="role_account_list"
+          v-for="(item, index) in loaclRole_info.role_account_list"
+          :key="index"
+        >
+          {{ item }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ["role_info_detail"],
+  watch: {
+    role_info_detail (val) {
+      this.loaclRole_info = val
+      this.isShowRole_account = val.role_account_list.length
+      this.role_status = val.role_status == 1 ? '正常' : val.role_status == 2 ? '禁用' : '删除'
+    }
+  },
+  data () {
+    return {
+      formLabelWidth: "120px",
+      loaclRole_info: {},
+      role_status: "",
+      isShowRole_account: true
+    }
+  }
+}
+</script>
+<style lang="less"  scoped>
+.loaclRole_info {
+  display: flex;
+  margin: 10px 0 20px 0;
+}
+.roleList {
+  flex: 1;
+  overflow-y: scroll;
+  max-height: 200px;
+}
+.role_account_list {
+  padding: 10px;
+  color: #909399;
+  background: #fafafa;
+  font-weight: 400;
+  line-height: 1.5;
+}
+.titleRole {
+  width: 120px;
+  display: flex;
+  justify-content: space-evenly;
+  font-size: 14px;
+  color: #606266;
+}
+</style>
\ No newline at end of file

src/pages/Withdrawal/Role/manage-role.vue

+<template>
+  <layout>
+    <el-card class="role_management">
+      <!-- 角色检索区域 -->
+      <div class="creatRole">
+        <el-form inline :model="searchForm">
+          <el-form-item label="角色名称">
+            <el-input v-model="searchForm.roleName"></el-input>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select
+              v-model="searchForm.roleStatus"
+              placeholder="请选择角色状态"
+            >
+              <el-option label="正常" :value="1"></el-option>
+              <el-option label="禁用" :value="2"></el-option>
+              <el-option label="删除" :value="3"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSearchSubmit">查询</el-button>
+            <el-button @click="onReset">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <el-form>
+          <el-form-item>
+            <el-button
+              type="primary"
+              :disabled="!permission.get('create')"
+              @click="onCreateRole"
+              >创建角色</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 角色搜索列表 -->
+      <el-table border :data="managementList">
+        <el-table-column
+          label="ID"
+          width="200px"
+          prop="role_id"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          label="角色名称"
+          prop="role_name"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          label="状态"
+          width="200px"
+          :formatter="hasStatusFormat"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          label="最后修改日期"
+          prop="update_time"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          label="最后修改人账号"
+          prop="update_user_name"
+          align="center"
+        ></el-table-column>
+        <el-table-column label="操作" align="center">
+          <template #default="scope">
+            <el-button
+              :disabled="
+                !permission.get('edit') ||
+                scope.row.role_status == 2 ||
+                scope.row.role_status == 3
+              "
+              @click.stop="handelModify(scope.row)"
+              type="text"
+              size="mini"
+              >修改</el-button
+            >
+            <el-button
+              :disabled="!permission.get('delete')"
+              @click.stop="handelDelete(scope.row)"
+              size="mini"
+              type="text"
+              >删除</el-button
+            >
+            <el-button
+              :disabled="!permission.get('disable')"
+              @click.stop="handelDisable(scope.row)"
+              size="mini"
+              type="text"
+              >禁用</el-button
+            >
+            <el-button
+              :disabled="!permission.get('enable')"
+              @click.stop="handelEnable(scope.row)"
+              size="mini"
+              type="text"
+              >启用</el-button
+            >
+            <el-button
+              @click.stop="toRoleDetail(scope.row)"
+              size="mini"
+              type="text"
+              >查看详情</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <page :totalNum="totalNum" @update="update" />
+    </el-card>
+    <el-dialog :title="roleTitle" v-model="dialogVisible">
+      <el-form>
+        <!-- 新增 -->
+        <el-form-item label="角色名称" :label-width="formLabelWidth">
+          <el-input v-model="roleName" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="角色范围" :label-width="formLabelWidth">
+          <el-cascader
+            v-model="selectedOptions"
+            :options="permissionsAll"
+            :props="props"
+            style="width: 280px"
+            @change="parentCateChange"
+            clearable
+          ></el-cascader>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="confirm">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </layout>
+</template>
+<script>
+import Layout from "@/layouts";
+import page from "../components/Pagination"
+import {
+  getRole_list as reqGetRole_list, getAll_role_list as reqGetAll_role_list,
+  getUpdate_role as reqGetUpdate_role, get_role_info as reqGet_role_info,
+  getDelete_role as reqGetDelete_role, getAdd_role as reqGetAdd_role
+} from "../../service/role";
+export default {
+  name: 'KeepRoleManagement',
+  components: {
+    Layout,
+    page,
+  },
+  computed: {
+    permission () {
+      const modulePermissions = this.$store.getters.moduleSubPermissions('role') || [];
+      return new Map(modulePermissions.map(ele => [ele.name, true]))
+    },
+  },
+  data () {
+    return {
+      searchForm: {
+        roleName: '',
+        roleStatus: ''
+      },
+      formLabelWidth: '120px',
+      parmas: {
+        page: 1,
+        page_size: 20
+      },
+      totalNum: null,
+      roleTitle: '',
+      roleName: '',
+      edit: true,
+      props: {
+        multiple: true,//设置为多选
+        value: 'id', //value值和哪个值绑定
+        label: 'desc',//label值和哪个值绑定
+        children: 'sub_permissions'//children值和哪个值绑定
+      },
+      selectedOptions: [],
+      dialogVisible: false,
+      dialogText: "",
+      managementList: [],
+      role_info_detail: {//详情非编辑项
+        role_id: "",
+        role_name: "",
+      },
+      permissionsAll: [],
+      currenPermissionsUpdate: [],
+      currentRolePrivilege: []
+    }
+  },
+  activated () {
+    this.getGetRole_list()
+    this.getPermissionsAll()
+  },
+  methods: {
+    hasStatusFormat (row) {
+      let statusText = ['正常', '禁用', '删除']
+      return statusText[row.role_status - 1]
+    },
+    onCreateRole () {
+      this.roleTitle = '新增角色'
+      this.getPermissionsAll()
+      this.edit = false
+      this.dialogVisible = true
+      this.roleName = ""
+      this.selectedOptions = []
+      // this.$router.push({ name: 'AddRole' });
+    },
+    toRoleDetail (row) {
+      this.$router.push({ name: "RoleDetail", query: { roleId: row.role_id } });
+    },
+    getPermissionsAll () {
+      let { email } = this.$store.state.userInfo
+      reqGetAll_role_list(email).then(res => {
+        this.permissionsAll = res
+      })
+    },
+    //获取角色列表
+    getGetRole_list () {
+      let { page, page_size } = this.parmas
+      let parmasRole_list = {
+        page,
+        page_size,
+        role_status: this.searchForm.roleStatus,
+        role_name: this.searchForm.roleName
+      }
+      reqGetRole_list(parmasRole_list).then(res => {
+        this.managementList = res.result
+        this.totalNum = res.count
+      })
+    },
+    //查询
+    onSearchSubmit () {
+      this.getGetRole_list()
+    },
+    //重置
+    onReset () {
+      this.searchForm.roleName = "",
+        this.searchForm.roleStatus = ""
+      this.getGetRole_list()
+    },
+    //列表分页
+    update (obj) {
+      Object.assign(this.parmas, obj)
+      let { page, page_size } = this.parmas
+      this.getGetRole_list(page, page_size)
+    },
+    //弹框提示
+    openBounced (type, role_id) {
+      this.$confirm(`${this.dialogText}是否继续?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        if (type === "disable") {
+          this.getRole_info_detail('disable', role_id)
+        } else {
+          this.delete(role_id)
+        }
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        });
+      });
+    },
+    //删除
+    delete (role_id) {
+      reqGetDelete_role(role_id).then(res => {
+        if (res.status == "success")
+          this.getGetRole_list()
+      })
+    },
+    //角色详情数据
+    getRole_info_detail (type, role_id) {
+      reqGet_role_info(role_id).then(res => {
+        const { role_id, role_name, permissions } = res
+        this.role_info_detail = {
+          role_id,
+          role_name,
+        }
+        this.roleName = role_name
+        // this.permissionsUpdate = permissions
+        let role_status
+        if (type === "disable") {
+          role_status = 2
+        } else if (type === "enable") {
+          role_status = 1
+        } else if (type === "modify") {
+          this.currentRolePrivilege = permissions
+          this.editEchoData(permissions)
+        }
+        else {
+          role_status = ""
+        }
+        if (type !== "modify") {
+          this.getUpdate_role(role_name, role_id, role_status, permissions)
+        }
+      })
+    },
+    //遍历回显值selectedOptions
+    editEchoData (permissions) {
+      let selectData = []
+      permissions.map(item => {
+        let one = { id: item.id }
+        if (item.sub_permissions) {
+          item.sub_permissions.map(info => {
+            let selectId = [one.id, info.id]
+            selectData.push(selectId)
+          })
+        }
+      })
+      this.selectedOptions = selectData
+    },
+    //启用
+    handelEnable (row) {
+      if (row.role_status == 1) {
+        this.$message({
+          type: 'info',
+          message: '该条数据已启用'
+        });
+        return false
+      }
+      this.getRole_info_detail("enable", row.role_id)
+    },
+    //禁用
+    handelDisable (row) {
+      if (row.role_status == 2) {
+        this.$message({
+          type: 'info',
+          message: '该条数据已禁用'
+        });
+        return false
+      }
+      this.dialogText = "禁用拥有此角色用户将受影响"
+      this.openBounced("disable", row.role_id)
+    },
+    //编辑列表操作
+    getUpdate_role (role_name, role_id, role_status, permissions) {
+      let parmasUpdate_role = {
+        role_name: role_name,
+        role_id,
+        role_status,
+        permissions,
+      }
+      reqGetUpdate_role(parmasUpdate_role).then(res => {
+        if (res.status === "success") {
+          this.dialogVisible = false
+          this.getGetRole_list()
+        } else {
+          this.dialogVisible = false
+          this.$message({
+            type: 'info',
+            message: `${res.reason}`
+          });
+        }
+      })
+    },
+    //删除
+    handelDelete (row) {
+      this.dialogText = "删除后不可恢复，拥有此角色用户将受影响"
+      this.openBounced('del', row.role_id)
+    },
+    //修改
+    handelModify (row) {
+      this.edit = true
+      this.roleTitle = '修改角色'
+      this.getPermissionsAll()
+      this.dialogVisible = true
+      this.getRole_info_detail("modify", row.role_id)
+    },
+    //确认修改
+    confirm () {
+      let checkRolePrivilege = []
+      this.edit ? checkRolePrivilege = this.currentRolePrivilege : checkRolePrivilege = this.currenPermissionsUpdate
+      if (!(this.roleName && checkRolePrivilege.length > 0)) {
+        this.$message({
+          type: 'error',
+          message: "请完善信息"
+        });
+        return false
+      }
+      if (this.edit) {
+        this.getEditRole()
+      } else {
+        this.getAdd_role()
+      }
+    },
+    //编辑提交的数据
+    getEditRole () {
+      let { role_id } = this.role_info_detail
+      let role_status = ''
+      this.getUpdate_role(this.roleName, role_id, role_status, this.currentRolePrivilege)
+    },
+    //新增角色
+    getAdd_role () {
+      let parmasAdd_role = {
+        role_name: this.roleName,
+        permissions: this.currenPermissionsUpdate
+      }
+      reqGetAdd_role(parmasAdd_role).then(res => {
+        this.dialogVisible = false
+        if (res.status === "success") {
+          this.getGetRole_list()
+        } else {
+          this.$message({
+            type: 'info',
+            message: `${res.reason}`
+          });
+        }
+      })
+    },
+    parentCateChange (id) {
+      this.getSelectedOptions(id)
+    },
+    getSelectedOptions (selectedOptions) {
+      let oldDataRule = []
+      selectedOptions.forEach(el => {
+        let oldObj = {
+          id: el[0],
+          sub_permissions: []
+        }
+        let btnObj = {
+          id: el[1],
+        }
+        oldObj.sub_permissions.push(btnObj)
+        oldDataRule.push(oldObj)
+      })
+      let newData = []
+      let newObj = {}
+      oldDataRule.forEach((el, i) => {
+        if (!newObj[el.id]) {
+          newData.push(el);
+          newObj[el.id] = true;
+        } else {
+          newData.forEach(el => {
+            if (el.id === oldDataRule[i].id) {
+              el.sub_permissions = [...el.sub_permissions, ...oldDataRule[i].sub_permissions];
+            }
+          })
+        }
+      })
+      this.currentRolePrivilege = newData
+      this.currenPermissionsUpdate = newData
+    },
+  }
+};
+</script>
+<style lang="less"  scoped>
+.creatRole {
+  display: flex;
+  justify-content: space-between;
+}
+.role_management {
+  padding: 20px;
+}
+.role_management .el-button {
+  margin: 0 2px;
+}
+</style>

src/pages/Withdrawal/Role/role-detail.vue

+<template>
+  <div class="user-detail">
+    <el-page-header @back="goBack" content="角色详情页面"> </el-page-header>
+    <el-card class="management">
+      <h5 style="margin-bottom: 10px">角色信息</h5>
+      <el-descriptions class="margin-top" :column="2" border>
+        <el-descriptions-item>
+          <template #label> ID </template>
+          {{ roleId }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label> 角色状态 </template>
+          {{
+            role_info_detail.role_status == 1
+              ? "正常"
+              : role_info_detail.role_status == 2
+              ? "禁用"
+              : "删除"
+          }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label> 角色名称 </template>
+          {{ role_info_detail.role_name }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label> 创建人账号 </template>
+          {{ role_info_detail.create_user_name }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label> 创建时间 </template>
+          {{ role_info_detail.create_time }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label> 最后修改人账号 </template>
+          {{ role_info_detail.update_user_name }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label> 最后修改时间 </template>
+          {{ role_info_detail.update_time }}
+        </el-descriptions-item>
+      </el-descriptions>
+      <div class="tree" v-if="selectedOptions">
+        <h5 style="margin-bottom: 10px">角色范围</h5>
+        <div>
+          <el-cascader
+            v-model="selectedOptions"
+            :options="permissionsAll"
+            placeholder="暂无数据"
+            disabled
+            :props="props"
+            style="width: 300px"
+          ></el-cascader>
+        </div>
+      </div>
+      <div v-if="role_info_detail.role_account_list.length">
+        <h5 style="margin: 10px 0">角色账号</h5>
+        <div class="roleList">
+          <div
+            class="role_account_list"
+            v-for="(item, index) in role_info_detail.role_account_list"
+            :key="index"
+          >
+            {{ item }}
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script>
+import { get_role_info as reqGet_role_info, getAll_role_list as reqGetAll_role_list, } from '../../service/role'
+export default {
+  data () {
+    return {
+      roleId: this.$route.query.roleId,
+      user_info: {
+        name: "jianghaiming",
+        email: "jianghaiming@126.com",
+      },
+      props: {
+        multiple: true,//设置为多选
+        value: 'id', //value值和哪个值绑定
+        label: 'desc',//label值和哪个值绑定
+        children: 'sub_permissions'//children值和哪个值绑定
+      },
+      selectedOptions: [],
+      permissionsAll: [],
+      role_info_detail: {//详情非编辑项
+        role_id: "",
+        role_name: "",
+        role_status: "",
+        update_time: "",
+        update_user_name: "",
+        create_time: "",
+        create_user_name: "",
+        role_account_list: []
+      }
+    }
+  },
+  activated () {
+    this.roleId = this.$route.query.roleId
+    let { email } = this.$store.state.userInfo
+    reqGetAll_role_list(email).then(res => {
+      this.permissionsAll = res
+    })
+    reqGet_role_info(this.roleId).then((res) => {
+      const { role_name, role_status, update_time, update_user_name, create_time, create_user_name, role_account_list, permissions } = res
+      this.role_info_detail = {
+        role_name,
+        role_status,
+        update_time,
+        update_user_name,
+        create_time,
+        create_user_name,
+        role_account_list
+      }
+      this.editEchoData(permissions)
+    })
+  },
+  methods: {
+    goBack () {
+      this.$router.back(-1);
+    },
+    //遍历回显值selectedOptions
+    editEchoData (permissions) {
+      let selectData = []
+      permissions.map(item => {
+        let one = { id: item.id }
+        if (item.sub_permissions) {
+          item.sub_permissions.map(info => {
+            let selectId = [one.id, info.id]
+            selectData.push(selectId)
+          })
+        }
+      })
+      this.selectedOptions = selectData
+    },
+  }
+}
+</script>
+<style lang="less" scoped>
+.user-detail {
+  margin: 50px;
+  .role_account_list {
+    padding: 10px;
+    color: #909399;
+    background: #fafafa;
+    font-weight: 400;
+    line-height: 1.5;
+  }
+  .management {
+    margin-top: 20px;
+  }
+  .roleList {
+    max-height: 300px;
+    overflow-y: scroll;
+  }
+  .tree {
+    // border: 1px solid #ebeef5;
+    margin-top: 20px;
+  }
+}
+</style>
\ No newline at end of file

src/pages/Withdrawal/User/user-detail.vue

+<template>
+  <div class="user-detail">
+    <el-page-header @back="goBack" content="用户详情页面"> </el-page-header>
+    <el-card class="management">
+      <h2 style="margin-bottom: 10px">用户信息</h2>
+      <el-descriptions class="margin-top" :column="3" :size="size" border>
+        <el-descriptions-item>
+          <template #label> 用户姓名 </template>
+          {{ user_info.user_name }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label> 手机号 </template>
+          {{ user_info.user_mobile }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label> 所属组织 </template>
+          {{ user_info.organization }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label> 添加人账号 </template>
+          {{ user_info.create_user_name }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label> 添加时间 </template>
+          {{ user_info.create_time }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label> 最后修改人账号 </template>
+          {{ user_info.update_user_name }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label> 最后修改时间 </template>
+          {{ user_info.update_user_name }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label> 敏感词权限 </template>
+          {{ user_info.is_sensitive_authority == 1 ? "有" : "无" }}
+        </el-descriptions-item>
+      </el-descriptions>
+      <div class="role">角色信息</div>
+      <el-table :data="role_list" border style="width: 100%">
+        <el-table-column prop="role_id" label="ID" width="180">
+        </el-table-column>
+        <el-table-column prop="role_name" label="角色名称"> </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+<script>
+import { getUser_detail as reqGetUser_detail } from "../../service/user";
+export default {
+  data () {
+    return {
+      user_id: this.$route.query.userId,
+      user_info: {},
+      role_list: []//角色池
+    }
+  },
+  created () {
+    this.getUser_date()
+  },
+  methods: {
+    getUser_date () {
+      reqGetUser_detail(this.user_id).then((res) => {
+        this.user_info = res.user_info
+        this.role_list = res.role_list
+      })
+    },
+    goBack () {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.user-detail {
+  margin: 50px;
+  .role {
+    margin: 10px;
+    font-weight: bold;
+  }
+}
+</style>
\ No newline at end of file

src/pages/Withdrawal/User/userList/components/UserInfoEditModal.vue

+<template>
+  <div class="user-container">
+    <el-dialog title="编辑用户" v-model="modalVisable" :before-close="cancel">
+      <el-form :model="userInfo">
+        <el-form-item label="用户ID" :label-width="formLabelWidth">
+          <el-input class="form-val" v-model="userInfo.user_id" size="medium" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="状态" :label-width="formLabelWidth">
+          <!-- <el-input class="form-val">{{data.user_status===1?'启用':'禁用'}}</el-input> -->
+          <el-switch
+            class="form-val"
+            v-model="userInfo.user_status"
+            active-value='1'
+            inactive-value='2'
+            active-text="启用"
+            inactive-text="禁用"
+          >
+          </el-switch>
+        </el-form-item>
+        <el-form-item label="姓名" :label-width="formLabelWidth">
+          <el-input class="form-val" v-model="userInfo.user_name" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="邮箱" :label-width="formLabelWidth" required>
+          <el-input class="form-val" v-model="userInfo.user_email" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="手机号" :label-width="formLabelWidth">
+          <el-input class="form-val" v-model="userInfo.user_mobile"></el-input>
+        </el-form-item>
+        <el-form-item label="所属组织" :label-width="formLabelWidth">
+          <el-input class="form-val" v-model="userInfo.organization" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="授权角色信息" :label-width="formLabelWidth" required>
+          <el-select v-model="userInfo.roles" multiple placeholder="请选择" class="form-val">
+            <el-option
+              v-for="item in roles"
+              :key="item.role_id"
+              :label="item.role_name"
+              :value="item.role_id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="敏感词权限" :label-width="formLabelWidth">
+          <el-switch
+            v-model="userInfo.is_sensitive_authority"
+            class="form-val"
+            active-value='1'
+            inactive-value='2'
+            active-text="开启"
+            inactive-text="关闭"
+          >
+          </el-switch>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="cancel">取 消</el-button>
+          <el-button type="primary" @click="confirm">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { ElMessage } from "element-plus";
+
+import { getRole_list as reqGetRoles } from '@/service/role';
+
+export default {
+  name: 'UserInfoEditModal',
+  props: {
+    data: Object,
+    visable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      formLabelWidth: '120px',
+      userInfo: {},
+      roles: [],
+      modalVisable: false
+    }
+  },
+  watch: {
+    data(val) {
+      this.userInfo = JSON.parse(JSON.stringify(val));
+      this.userInfo.roles = val.roles.map(ele => ele.role_id);
+      this.userInfo.user_status = val.user_status.toString();
+      this.userInfo.is_sensitive_authority = val.is_sensitive_authority.toString();
+    },
+    visable(val) {
+      this.modalVisable = val;
+    }
+  },
+  beforeMount(){
+    this.getRoles();
+  },
+  methods: {
+    async getRoles() {
+      const { code, result } = await reqGetRoles({page_size: 2000, page:1});
+      if (code !== 0) {
+        ElMessage.error("获取角色列表出错！");
+        return
+      }
+      this.roles = result;
+    },
+    confirm() {
+      const checkConditions = {
+        user_email: {
+          check: val => val.trim() !== '',
+          tip: "请输入邮箱！"
+        },
+        roles: {
+          check: val => val.length !== 0,
+          tip: "请添加角色！"
+        },
+      };
+
+      const keys = Object.keys(checkConditions);
+      for (let i = 0; i < keys.length; i++) {
+        const field = keys[i];
+        if (!checkConditions[field].check(this.userInfo[field])) {
+          ElMessage.error(checkConditions[field].tip);
+          return;
+        }
+      }
+
+      this.$emit('confirm', this.userInfo);
+    },
+    cancel() {
+      this.$emit('cancel');
+    }
+  },
+}
+</script>
+<style lang="less">
+  .form-val {
+    margin-left: 20px;
+    width: 300px;
+  }
+  .form-val.el-input {
+    width: 80%;
+  }
+</style>
\ No newline at end of file

src/pages/Withdrawal/User/userList/components/UserInfoModal.vue

+<template>
+  <div class="user-container">
+    <el-dialog :title="title" v-model="modalVisable" :before-close="cancel">
+      <el-form :model="data">
+        <el-form-item label="用户ID" :label-width="formLabelWidth">
+          <text class="form-val">{{data.user_id}}</text>
+        </el-form-item>
+        <el-form-item label="状态" :label-width="formLabelWidth">
+          <text class="form-val">{{data.user_status==1?'启用':'禁用'}}</text>
+        </el-form-item>
+        <el-form-item label="姓名" :label-width="formLabelWidth">
+          <text class="form-val">{{data.user_name}}</text>
+        </el-form-item>
+        <el-form-item label="账号" :label-width="formLabelWidth">
+          <text class="form-val">{{data.user_email}}</text>
+        </el-form-item>
+        <el-form-item label="手机号" :label-width="formLabelWidth">
+          <text class="form-val">{{data.user_mobile}}</text>
+        </el-form-item>
+        <el-form-item label="所属组织" :label-width="formLabelWidth">
+          <text class="form-val">{{data.organization}}</text>
+        </el-form-item>
+        <el-form-item label="添加账号人" :label-width="formLabelWidth">
+          <text class="form-val">{{data.create_user_name}}</text>
+        </el-form-item>
+        <el-form-item label="添加时间" :label-width="formLabelWidth">
+          <text class="form-val">{{data.create_time}}</text>
+        </el-form-item>
+        <el-form-item label="最后修改人账号" :label-width="formLabelWidth">
+          <text class="form-val">{{data.update_user_name}}</text>
+        </el-form-item>
+        <el-form-item label="最后修改时间" :label-width="formLabelWidth">
+          <text class="form-val">{{data.update_time}}</text>
+        </el-form-item>
+
+        <el-form-item label="授权角色信息" :label-width="formLabelWidth">
+          <text class="form-val">{{data.roles.map(ele => ele.role_name).join(',')}}</text>
+        </el-form-item>
+        <el-form-item label="敏感词权限" :label-width="formLabelWidth">
+          <text class="form-val">{{data.is_sensitive_authority === 1 ? '是' : '否'}}</text>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UserInfoModal',
+  props: {
+    mode: {
+      type: String,
+      default: 'check',
+    },
+    data: Object,
+    title: {
+      type: String,
+      default: "用户信息",
+    },
+    visable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      formLabelWidth: '180px',
+      modalVisable: false,
+    }
+  },
+  watch: {
+    visable(val) {
+      this.modalVisable = val;
+    }
+  },
+  methods: {
+    cancel: function() {
+      this.$emit('cancel');
+    }
+  },
+}
+</script>
+<style lang="less">
+  .form-val {
+    margin-left: 20px;
+  }
+</style>
\ No newline at end of file

src/pages/Withdrawal/User/userList/components/UserInfoNewModal.vue

+<template>
+  <div class="user-container">
+    <el-dialog title="创建用户" v-model="modalVisable" :before-close="cancel">
+      <el-form :model="userInfo">
+        <el-form-item label="状态" :label-width="formLabelWidth">
+          <!-- <el-input class="form-val">{{data.user_status===1?'启用':'禁用'}}</el-input> -->
+          <el-switch
+            class="form-val"
+            v-model="userInfo.user_status"
+            active-value='1'
+            inactive-value='2'
+            active-text="启用"
+            inactive-text="禁用"
+          >
+          </el-switch>
+        </el-form-item>
+        <el-form-item label="姓名" :label-width="formLabelWidth">
+          <el-input class="form-val" v-model="userInfo.user_name"></el-input>
+        </el-form-item>
+        <el-form-item label="邮箱" :label-width="formLabelWidth" required>
+          <el-input class="form-val" v-model="userInfo.user_email"></el-input>
+        </el-form-item>
+        <el-form-item label="手机号" :label-width="formLabelWidth">
+          <el-input class="form-val" v-model="userInfo.user_mobile"></el-input>
+        </el-form-item>
+        <el-form-item label="所属组织" :label-width="formLabelWidth">
+          <el-input class="form-val" v-model="userInfo.organization"></el-input>
+        </el-form-item>
+        <el-form-item label="授权角色" :label-width="formLabelWidth" required>
+          <el-select v-model="userInfo.roles" multiple placeholder="请选择" class="form-val">
+            <el-option
+              v-for="item in roles"
+              :key="item.role_id"
+              :label="item.role_name"
+              :value="item.role_id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="敏感词权限" :label-width="formLabelWidth">
+          <el-switch
+            v-model="userInfo.is_sensitive_authority"
+            class="form-val"
+            active-value='1'
+            inactive-value='2'
+            active-text="开启"
+            inactive-text="关闭"
+          >
+          </el-switch>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="cancel">取 消</el-button>
+          <el-button type="primary" @click="confirm">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { ElMessage } from "element-plus";
+
+import { getRole_list as reqGetRoles } from '@/service/role';
+
+export default {
+  name: 'UserInfoEditModal',
+  props: {
+    visable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      formLabelWidth: '120px',
+      userInfo: {
+        user_name: '',
+        user_email: '',
+        is_sensitive_authority: '0',
+        user_mobile: '',
+        roles: [],
+        user_status: '1',
+        organization: '',
+      },
+      roles: [],
+      modalVisable: false,
+    }
+  },
+  watch: {
+    visable(val) {
+      this.modalVisable = val;
+      if (val) {
+        this.userInfo = {
+          user_name: '',
+          user_email: '',
+          is_sensitive_authority: '0',
+          user_mobile: '',
+          roles: [],
+          user_status: '1',
+          organization: '',
+        };
+      }
+    }
+  },
+  beforeMount(){
+    this.getRoles();
+  },
+  methods: {
+    async getRoles() {
+      const { code, result } = await reqGetRoles({page_size: 2000, page:1});
+      if (code !== 0) {
+        ElMessage.error("获取角色列表出错！");
+        return
+      }
+      this.roles = result;
+    },
+    confirm() {
+      const checkConditions = {
+        user_email: {
+          check: val => val.trim() !== '',
+          tip: "请输入邮箱！"
+        },
+        roles: {
+          check: val => val.length !== 0,
+          tip: "请添加角色！"
+        },
+      };
+
+      const keys = Object.keys(checkConditions);
+      for (let i = 0; i < keys.length; i++) {
+        const field = keys[i];
+        if (!checkConditions[field].check(this.userInfo[field])) {
+          ElMessage.error(checkConditions[field].tip);
+          return;
+        }
+      }
+
+      this.$emit('confirm', this.userInfo);
+    },
+    cancel() {
+      this.$emit('cancel');
+    }
+  },
+}
+</script>
+<style lang="less">
+  .form-val {
+    margin-left: 20px;
+    width: 300px;
+  }
+  .form-val.el-input {
+    width: 80%;
+  }
+</style>
\ No newline at end of file

src/pages/Withdrawal/User/userList/index.vue

+
+<template>
+  <layout>
+    <div class="user">
+      <el-form :inline="true" :model="pageParams" class="demo-form-inline">
+        <el-form-item label="用户姓名">
+          <el-input
+            maxlength="15"
+            v-model="pageParams.user_name"
+            placeholder="用户姓名"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="用户账号">
+          <el-input
+            v-model="pageParams.user_email"
+            placeholder="用户账号"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="手机号">
+          <el-input
+            v-model="pageParams.user_mobile"
+            placeholder="手机号"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="pageParams.user_status" placeholder="状态">
+            <el-option value="1" label="启用"></el-option>
+            <el-option value="2" label="禁用"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item class="func-btn">
+          <el-button type="primary" @click="getUserList">查询</el-button>
+          <el-button @click="onReset">重置</el-button>
+          <el-button @click="createUser" :disabled="!permission.get('create')"
+            >新建用户</el-button
+          >
+        </el-form-item>
+      </el-form>
+      <el-table :data="renderUserList" border style="width: 100%">
+        <el-table-column prop="user_id" label="用户ID" width="70">
+        </el-table-column>
+        <el-table-column prop="user_name" label="用户姓名"> </el-table-column>
+        <el-table-column prop="user_email" label="用户账号"> </el-table-column>
+        <el-table-column prop="user_status" label="状态"> </el-table-column>
+        <el-table-column prop="user_mobile" label="手机号"> </el-table-column>
+        <el-table-column prop="update_time" label="最后修改日期">
+        </el-table-column>
+        <el-table-column prop="update_user_name" label="最后修改人账号">
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" width="140">
+          <template #default="scope">
+            <el-button type="text" size="small" @click="checkUser(scope.row)"
+              >查看</el-button
+            >
+            <el-button
+              @click="editUser(scope.row)"
+              type="text"
+              size="small"
+              :disabled="!permission.get('edit')"
+              >修改</el-button
+            >
+            <el-button
+              v-if="scope.row.user_status === '启用'"
+              type="text"
+              size="small"
+              @click="disableUser(scope.row)"
+              :disabled="!permission.get('enable')"
+              >禁用</el-button
+            >
+            <el-button
+              v-if="scope.row.user_status === '禁用'"
+              type="text"
+              size="small"
+              @click="enableUser(scope.row)"
+              :disabled="!permission.get('disable')"
+              >启用</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <page
+        :totalNum="totalNum"
+        :pageSize="pageParams.size"
+        @update="updatePage"
+      />
+    </div>
+
+    <user-info-modal
+      :data="curUserInfo"
+      :visable="modalVisable.info"
+      @cancel="cancelModal('info')"
+    ></user-info-modal>
+    <user-info-edit-modal
+      :data="curUserInfo"
+      :visable="modalVisable.edit"
+      @confirm="confirmEditModal"
+      @cancel="cancelModal('edit')"
+    ></user-info-edit-modal>
+    <user-info-new-modal
+      :visable="modalVisable.new"
+      @confirm="confirmEditModal"
+      @cancel="cancelModal('new')"
+    ></user-info-new-modal>
+  </layout>
+</template>
+
+<script>
+import Layout from "@/layouts";
+import page from "@/components/Pagination";
+import UserInfoModal from "./components/UserInfoModal";
+import UserInfoEditModal from "./components/UserInfoEditModal";
+import UserInfoNewModal from "./components/UserInfoNewModal";
+import { ElMessage } from "element-plus";
+import {
+  getUserList as reqGetUserList,
+  getUserDetail as reqGetUserDetail,
+  editUser as reqEditUser,
+  createUser as reqCreateUser,
+} from "@/service/user";
+
+export default {
+  components: {
+    Layout,
+    page,
+    UserInfoModal,
+    UserInfoEditModal,
+    UserInfoNewModal,
+  },
+  data() {
+    return {
+      pageParams: {
+        page: 1,
+        size: 20,
+        user_name: "",
+        user_email: "",
+        user_mobile: "",
+        user_status: "",
+      },
+      totalNum: 0,
+      userList: [],
+      curUserInfo: {},
+      modalVisable: {
+        info: false,
+        edit: false,
+        new: false,
+      },
+      curOperateMode: "new",
+    };
+  },
+  computed: {
+    permission() {
+      const modulePermissions =
+        this.$store.getters.moduleSubPermissions("user") || [];
+      console.log("Current page func-permissions:", modulePermissions);
+      return new Map(modulePermissions.map((ele) => [ele.name, true]));
+    },
+
+    renderUserList() {
+      const statusMap = new Map([
+        [1, "启用"],
+        [2, "禁用"],
+        [3, "删除"],
+      ]);
+      return this.userList.map((ele) => {
+        ele.user_status = statusMap.get(ele.user_status);
+        return ele;
+      });
+    },
+  },
+  beforeMount() {
+    this.getUserList();
+  },
+  methods: {
+    async getUserList() {
+      const { code, result } = await reqGetUserList(this.pageParams);
+
+      if (code !== 0) {
+        ElMessage.error("获取用户列表出错！");
+        return;
+      }
+      const { data, count } = result;
+      this.totalNum = count;
+      this.userList = data;
+    },
+
+    async setCurUserInfo(user_id) {
+      const { code, result } = await reqGetUserDetail({ user_id });
+      if (code === 0) {
+        this.curUserInfo = {
+          ...result.user_info,
+          roles: result.role_list,
+        };
+      } else {
+        ElMessage.error("获取用户信息出错！");
+      }
+    },
+
+    async checkUser(row) {
+      const { user_id } = row;
+      await this.setCurUserInfo(user_id);
+      this.openModal("info");
+    },
+
+    async editUser(row) {
+      const { user_id } = row;
+      await this.setCurUserInfo(user_id);
+      // this.openModal('edit');
+      this.modalVisable.edit = true;
+      this.curOperateMode = "edit";
+    },
+
+    openModal(key) {
+      Object.keys(this.modalVisable).forEach((ele) => {
+        this.modalVisable[ele] = key === ele;
+      });
+    },
+
+    async confirmEditModal(userInfo) {
+      const {
+        user_id,
+        user_name,
+        user_email,
+        is_sensitive_authority,
+        user_mobile,
+        roles,
+        user_status,
+        organization,
+      } = userInfo;
+
+      let res = {};
+
+      if (this.curOperateMode === "edit") {
+        const editData = {
+          user_id,
+          user_name,
+          user_email,
+          is_sensitive_authority: parseInt(is_sensitive_authority),
+          user_mobile,
+          role_id: roles,
+          user_status: parseInt(user_status),
+        };
+        res = await reqEditUser(editData);
+      } else if (this.curOperateMode === "new") {
+        const newData = {
+          user_name,
+          user_email,
+          is_sensitive_authority: parseInt(is_sensitive_authority),
+          user_mobile,
+          role_id: roles,
+          user_status: parseInt(user_status),
+          organization,
+        };
+        res = await reqCreateUser(newData);
+      }
+
+      if (res.code === 0) {
+        this.cancelModal(this.curOperateMode);
+        ElMessage.success("更新成功！");
+        this.getUserList();
+      } else {
+        ElMessage.error(res.reason);
+      }
+    },
+
+    cancelModal(name) {
+      this.modalVisable[name] = false;
+    },
+
+    createUser() {
+      this.curOperateMode = "new";
+      this.openModal("new");
+    },
+
+    //重置
+    onReset() {
+      this.pageParams = {
+        page: 1,
+        pageSize: 20,
+        user_name: "",
+        user_email: "",
+        user_mobile: "",
+        user_status: "",
+      };
+      this.getUserList();
+    },
+
+    updatePage({ page, pageSize }) {
+      page && (this.pageParams.page = page);
+      pageSize && (this.pageParams.pageSize = pageSize);
+      this.getUserList();
+    },
+
+    async enableUser(row) {
+      const { user_id } = row;
+
+      const { code, reason } = await reqEditUser({ user_status: 1, user_id });
+      if (code === 0) {
+        ElMessage.success("启用成功！");
+        this.getUserList();
+      } else {
+        ElMessage.error(reason);
+      }
+    },
+
+    async disableUser(row) {
+      const { user_id } = row;
+      const { code, reason } = await reqEditUser({ user_status: 2, user_id });
+      if (code === 0) {
+        ElMessage.success("禁用成功！");
+        this.getUserList();
+      } else {
+        ElMessage.error(reason);
+      }
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.user {
+  padding: 50px;
+  .search_life {
+    width: 280px;
+  }
+
+  .func-btn {
+    float: right;
+  }
+}
+</style>

src/pages/Withdrawal/components/PageHeader/config.js

@@ -2,6 +2,14 @@ const headerConfig = [
   {
     name: "提现审核",
     path: "/op/withdrawal/audit"
+  },
+  {
+    path: '/op/withdrawal/components/role',
+    name: '角色管理'
+  },
+  {
+    path: '/op/withdrawal/components/user',
+    name: '用户管理'
   }
 
 ];

src/pages/Withdrawal/components/utils/request.js

+const request = require("request");
+
+exports.httpReq = (ctx, opts) => {
+  opts.timeout = opts.timeout || 1000;
+  return new Promise((resolve, reject) => {
+    var time_start = +new Date();
+
+    const defaultQs = {
+      appid: "merchant-op-auditing",
+      cv: "1.0.0",
+      version: "999999",
+      distribution: "op",
+      net: "wifi",
+      platform: "2"
+    };
+
+    opts.qs = { ...defaultQs, ...ctx.request.query, ...opts.qs };
+
+    request(opts, (err, res, body) => {
+      console.info(
+        `[Api] httpReq (${opts.url}, user:[${opts.qs.op_cur_user
+        }]) spent: ${+new Date() - time_start}ms`
+      );
+
+      if (!err) {
+        resolve(body);
+      } else {
+        reject(err);
+        console.error(opts.url, err);
+      }
+    });
+  });
+};
+
+

src/router/Withdrawal/index.js

@@ -9,11 +9,7 @@ const withdrawalRoutes = [
     name: "Audit",
     component: () => import(/* webpackChunkName: "Withdrawal" */ "@/pages/Withdrawal/Audit"),
   },
-  // {
-  //   path: "/op/withdrawal/audittab",
-  //   name: "auditTab",
-  //   component: () => import(/* webpackChunkName: "Withdrawal" */ "@/pages/Withdrawal/auditTab"),
-  // }
+
 ];
 
 export default withdrawalRoutes;
\ No newline at end of file