update: user & role global components

src/components/Pagination/index.vue

@@ -24,7 +24,7 @@ export default {
   },
   data () {
     return {
-      currentPage: 5
+      currentPage: 1
     }
   },
   methods: {

src/components/Roles/RoleDetail.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 {
+  name: "RoleDetail",
+  props: ["appId"],
+  data() {
+    return {
+      roleId: this.$route.query.roleId,
+      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: []
+      }
+    };
+  },
+  mounted() {
+    this.roleId = this.$route.query.roleId;
+    let { email } = this.$store.state.userInfo;
+    reqGetAll_role_list(email, this.appId).then(res => {
+      this.permissionsAll = res.permissions;
+    });
+    reqGet_role_info(this.roleId, this.appId).then(res => {
+      const {
+        role_name,
+        role_status,
+        update_time,
+        update_user_name,
+        create_time,
+        create_user_name,
+        role_account_list,
+        permissions
+      } = res.result;
+      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>

src/components/Roles/RoleList.vue

+<template>
+  <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>
+</template>
+<script>
+import page from "../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: "RoleList",
+  props: ["appId", "detailPath"],
+  components: {
+    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",
+      params: {
+        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: []
+    };
+  },
+  beforeMount() {
+    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({
+        path: this.detailPath,
+        query: { roleId: row.role_id }
+      });
+    },
+    getPermissionsAll() {
+      let { email } = this.$store.state.userInfo;
+      reqGetAll_role_list(email, this.appId).then(res => {
+        this.permissionsAll = res.permissions;
+      });
+    },
+    //获取角色列表
+    getGetRole_list() {
+      let { page, page_size } = this.params;
+      let paramsRole_list = {
+        page,
+        page_size,
+        role_status: this.searchForm.roleStatus,
+        role_name: this.searchForm.roleName
+      };
+      reqGetRole_list(paramsRole_list, this.appId).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.params, obj);
+      let { page, page_size } = this.params;
+      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, this.appId).then(res => {
+        if (res.status == "success") this.getGetRole_list();
+      });
+    },
+    //角色详情数据
+    getRole_info_detail(type, role_id) {
+      reqGet_role_info(role_id, this.appId).then(res => {
+        const { role_id, role_name, permissions } = res.result;
+        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 paramsUpdate_role = {
+        role_name: role_name,
+        role_id,
+        role_status,
+        permissions
+      };
+      reqGetUpdate_role(paramsUpdate_role, this.appId).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);
+    },
+    //修改
+    async handelModify(row) {
+      this.edit = true;
+      this.roleTitle = "修改角色";
+      await 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 paramsAdd_role = {
+        role_name: this.roleName,
+        permissions: this.currenPermissionsUpdate
+      };
+      reqGetAdd_role(paramsAdd_role, this.appId).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/User/userList/components/UserInfoEditModal.vue → src/components/UserList/components/UserInfoEditModal.vue

@@ -3,39 +3,66 @@
     <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-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-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-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-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-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-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">
+              :value="item.role_id"
+            >
             </el-option>
           </el-select>
         </el-form-item>
@@ -43,8 +70,8 @@
           <el-switch
             v-model="userInfo.is_sensitive_authority"
             class="form-val"
-            active-value='1'
-            inactive-value='2'
+            active-value="1"
+            inactive-value="2"
             active-text="开启"
             inactive-text="关闭"
           >
@@ -63,24 +90,25 @@
 <script>
 import { ElMessage } from "element-plus";
 
-import { getRole_list as reqGetRoles } from '@/service/role';
+import { getRole_list as reqGetRoles } from "@/service/role";
 
 export default {
-  name: 'UserInfoEditModal',
+  name: "UserInfoEditModal",
   props: {
     data: Object,
     visable: {
       type: Boolean,
       default: false
-    }
+    },
+    appId: String
   },
-  data () {
+  data() {
     return {
-      formLabelWidth: '120px',
+      formLabelWidth: "120px",
       userInfo: {},
       roles: [],
       modalVisable: false
-    }
+    };
   },
   watch: {
     data(val) {
@@ -93,28 +121,31 @@ export default {
       this.modalVisable = val;
     }
   },
-  beforeMount(){
+  beforeMount() {
     this.getRoles();
   },
   methods: {
     async getRoles() {
-      const { code, result } = await reqGetRoles({page_size: 2000, page:1});
+      const { code, result } = await reqGetRoles(
+        { page_size: 2000, page: 1 },
+        this.appId
+      );
       if (code !== 0) {
         ElMessage.error("获取角色列表出错！");
-        return
+        return;
       }
       this.roles = result;
     },
     confirm() {
       const checkConditions = {
         user_email: {
-          check: val => val.trim() !== '',
+          check: val => val.trim() !== "",
           tip: "请输入邮箱！"
         },
         roles: {
           check: val => val.length !== 0,
           tip: "请添加角色！"
-        },
+        }
       };
 
       const keys = Object.keys(checkConditions);
@@ -126,20 +157,20 @@ export default {
         }
       }
 
-      this.$emit('confirm', this.userInfo);
+      this.$emit("confirm", this.userInfo);
     },
     cancel() {
-      this.$emit('cancel');
+      this.$emit("cancel");
     }
-  },
-}
+  }
+};
 </script>
 <style lang="less">
-  .form-val {
-    margin-left: 20px;
-    width: 300px;
-  }
-  .form-val.el-input {
-    width: 80%;
-  }
-</style>
+.form-val {
+  margin-left: 20px;
+  width: 300px;
+}
+.form-val.el-input {
+  width: 80%;
+}
+</style>
\ No newline at end of file

src/pages/User/userList/components/UserInfoModal.vue → src/components/UserList/components/UserInfoModal.vue

@@ -3,41 +3,47 @@
     <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>
+          <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>
+          <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>
+          <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>
+          <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>
+          <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>
+          <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>
+          <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>
+          <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>
+          <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>
+          <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>
+          <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>
+          <text class="form-val">{{
+            data.is_sensitive_authority === 1 ? "是" : "否"
+          }}</text>
         </el-form-item>
       </el-form>
     </el-dialog>
@@ -45,27 +51,27 @@
 </template>
 <script>
 export default {
-  name: 'UserInfoModal',
+  name: "UserInfoModal",
   props: {
     mode: {
       type: String,
-      default: 'check',
+      default: "check"
     },
     data: Object,
     title: {
       type: String,
-      default: "用户信息",
+      default: "用户信息"
     },
     visable: {
       type: Boolean,
       default: false
     }
   },
-  data () {
+  data() {
     return {
-      formLabelWidth: '180px',
-      modalVisable: false,
-    }
+      formLabelWidth: "180px",
+      modalVisable: false
+    };
   },
   watch: {
     visable(val) {
@@ -74,13 +80,13 @@ export default {
   },
   methods: {
     cancel: function() {
-      this.$emit('cancel');
+      this.$emit("cancel");
     }
-  },
-}
+  }
+};
 </script>
 <style lang="less">
-  .form-val {
-    margin-left: 20px;
-  }
-</style>
+.form-val {
+  margin-left: 20px;
+}
+</style>
\ No newline at end of file

src/pages/User/userList/components/UserInfoNewModal.vue → src/components/UserList/components/UserInfoNewModal.vue

@@ -7,8 +7,8 @@
           <el-switch
             class="form-val"
             v-model="userInfo.user_status"
-            active-value='1'
-            inactive-value='2'
+            active-value="1"
+            inactive-value="2"
             active-text="启用"
             inactive-text="禁用"
           >
@@ -27,12 +27,18 @@
           <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-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">
+              :value="item.role_id"
+            >
             </el-option>
           </el-select>
         </el-form-item>
@@ -40,8 +46,8 @@
           <el-switch
             v-model="userInfo.is_sensitive_authority"
             class="form-val"
-            active-value='1'
-            inactive-value='2'
+            active-value="1"
+            inactive-value="2"
             active-text="开启"
             inactive-text="关闭"
           >
@@ -60,70 +66,74 @@
 <script>
 import { ElMessage } from "element-plus";
 
-import { getRole_list as reqGetRoles } from '@/service/role';
+import { getRole_list as reqGetRoles } from "@/service/role";
 
 export default {
-  name: 'UserInfoEditModal',
+  name: "UserInfoEditModal",
   props: {
     visable: {
       type: Boolean,
       default: false
-    }
+    },
+    appId: String
   },
-  data () {
+  data() {
     return {
-      formLabelWidth: '120px',
+      formLabelWidth: "120px",
       userInfo: {
-        user_name: '',
-        user_email: '',
-        is_sensitive_authority: '0',
-        user_mobile: '',
+        user_name: "",
+        user_email: "",
+        is_sensitive_authority: "0",
+        user_mobile: "",
         roles: [],
-        user_status: '1',
-        organization: '',
+        user_status: "1",
+        organization: ""
       },
       roles: [],
-      modalVisable: false,
-    }
+      modalVisable: false
+    };
   },
   watch: {
     visable(val) {
       this.modalVisable = val;
       if (val) {
         this.userInfo = {
-          user_name: '',
-          user_email: '',
-          is_sensitive_authority: '0',
-          user_mobile: '',
+          user_name: "",
+          user_email: "",
+          is_sensitive_authority: "0",
+          user_mobile: "",
           roles: [],
-          user_status: '1',
-          organization: '',
+          user_status: "1",
+          organization: ""
         };
       }
     }
   },
-  beforeMount(){
+  beforeMount() {
     this.getRoles();
   },
   methods: {
     async getRoles() {
-      const { code, result } = await reqGetRoles({page_size: 2000, page:1});
+      const { code, result } = await reqGetRoles(
+        { page_size: 2000, page: 1 },
+        this.appId
+      );
       if (code !== 0) {
         ElMessage.error("获取角色列表出错！");
-        return
+        return;
       }
       this.roles = result;
     },
     confirm() {
       const checkConditions = {
         user_email: {
-          check: val => val.trim() !== '',
+          check: val => val.trim() !== "",
           tip: "请输入邮箱！"
         },
         roles: {
           check: val => val.length !== 0,
           tip: "请添加角色！"
-        },
+        }
       };
 
       const keys = Object.keys(checkConditions);
@@ -135,20 +145,20 @@ export default {
         }
       }
 
-      this.$emit('confirm', this.userInfo);
+      this.$emit("confirm", this.userInfo);
     },
     cancel() {
-      this.$emit('cancel');
+      this.$emit("cancel");
     }
-  },
-}
+  }
+};
 </script>
 <style lang="less">
-  .form-val {
-    margin-left: 20px;
-    width: 300px;
-  }
-  .form-val.el-input {
-    width: 80%;
-  }
-</style>
+.form-val {
+  margin-left: 20px;
+  width: 300px;
+}
+.form-val.el-input {
+  width: 80%;
+}
+</style>
\ No newline at end of file

src/components/UserList/index.vue

+<template>
+  <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')"
+    :appId="appId"
+  ></user-info-modal>
+  <user-info-edit-modal
+    :data="curUserInfo"
+    :visable="modalVisable.edit"
+    @confirm="confirmEditModal"
+    @cancel="cancelModal('edit')"
+    :appId="appId"
+  ></user-info-edit-modal>
+  <user-info-new-modal
+    :visable="modalVisable.new"
+    @confirm="confirmEditModal"
+    @cancel="cancelModal('new')"
+    :appId="appId"
+  ></user-info-new-modal>
+</template>
+
+<script>
+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 {
+  name: "UserList",
+  props: ["appId"],
+  components: {
+    page,
+    UserInfoModal,
+    UserInfoEditModal,
+    UserInfoNewModal
+  },
+  data() {
+    return {
+      pageParams: {
+        appid: this.appId,
+        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({
+        appid: this.appId,
+        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, this.appId);
+      } 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, this.appId);
+      }
+
+      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
+        },
+        this.appId
+      );
+      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
+        },
+        this.appId
+      );
+      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/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/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/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>
+    <RoleList appId="merchant-op" detailPath="/op/roleRoleDetail"></RoleList>
   </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";
+import RoleList from "@/components/Roles/RoleList";
+
 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()
+    RoleList
   },
-  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/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>
+  <RoleDetail appId="merchant-op" />
 </template>
 <script>
-import { get_role_info as reqGet_role_info, getAll_role_list as reqGetAll_role_list, } from '../../service/role'
+import RoleDetail from "@/components/Roles/RoleDetail";
+
 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
-    },
+  components: {
+    RoleDetail
   }
-}
+};
 </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/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/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>
+    <UserList appId="merchant-op" />
   </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";
+import UserList from "@/components/UserList";
 
 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);
-      }
-    },
-  },
+    UserList
+  }
 };
 </script>
 <style lang="less" scoped>

src/router/index.js

@@ -4,9 +4,9 @@ import LifeNo from "../pages/Life-no/index.vue";
 import LifeNoDetail from "../pages/Life-no/life-no-detail.vue";
 
 import User from "../pages/User/userList";
-import UserDetail from "../pages/User/user-detail.vue";
+// import UserDetail from "../pages/User/user-detail.vue";
 
-import AddRole from "../pages/Role/add-role.vue";
+// import AddRole from "../pages/Role/add-role.vue";
 import ManageRole from "../pages/Role/manage-role.vue";
 import RoleDetail from "../pages/Role/role-detail.vue";
 import goodsRouter from "./Goods/index";
@@ -80,28 +80,27 @@ const routes = [
     name: "/op/User",
     component: User
   },
-  {
-    path: "/op/userDetail",
-    name: "UserDetail",
-    component: UserDetail
-  },
+  // {
+  //   path: "/op/userDetail",
+  //   name: "UserDetail",
+  //   component: UserDetail
+  // },
   //角色管理
-  {
-    path: "/op/roleAddRole",
-    name: "AddRole",
-    component: AddRole,
-    meta: {
-      requireAuth: true,
-      keepAlive: true
-    }
-  },
+  // {
+  //   path: "/op/roleAddRole",
+  //   name: "AddRole",
+  //   component: AddRole,
+  //   meta: {
+  //     requireAuth: true,
+  //     keepAlive: true
+  //   }
+  // },
   {
     path: "/op/roleManageRole",
     name: "ManageRole",
     component: ManageRole,
     meta: {
-      requireAuth: true,
-      keepAlive: true
+      requireAuth: true
     }
   },
   {

src/service/role.js

 import axios from '../utils/request';
 // import qs from 'qs';
 //角色列表
-export async function getRole_list (parmasRole_list) {
-  const res = await axios.post("/api/v1/merchant/authority/role_list", parmasRole_list)
-  return res;
+export async function getRole_list (parmasRole_list, appid) {
+  const opts = {
+    method: "post",
+    url: "/api/v1/merchant/authority/role_list",
+    params: { appid },
+    data: parmasRole_list
+  };
+  // const res = await axios.post("/api/v1/merchant/authority/role_list", parmasRole_list)
+  // return res;
+  return await axios(opts);
 }
 //添加角色
-export async function getAdd_role (parmasAdd_role) {
-  const res = await axios.post("/api/v1/merchant/authority/add_role", parmasAdd_role)
-  return res;
+export async function getAdd_role (parmasAdd_role, appid) {
+  const opts = {
+    method: "post",
+    url: "/api/v1/merchant/authority/add_role",
+    params: { appid },
+    data: parmasAdd_role
+  };
+  return await axios(opts);
+  // const res = await axios.post("/api/v1/merchant/authority/add_role", parmasAdd_role)
+  // return res;
 }
 //角色编辑
-export async function getUpdate_role (parmasUpdate_role) {
-  const res = await axios.post("/api/v1/merchant/authority/update_role", parmasUpdate_role)
-  return res;
+export async function getUpdate_role (parmasUpdate_role, appid) {
+  const opts = {
+    method: "post",
+    url: "/api/v1/merchant/authority/update_role",
+    params: { appid },
+    data: parmasUpdate_role
+  };
+  return await axios(opts);
+  // const res = await axios.post("/api/v1/merchant/authority/update_role", parmasUpdate_role)
+  // return res;
 }
 //角色详情
-export async function get_role_info (role_id) {
-  const res = await axios.post("/api/v1/merchant/authority/get_role_info", {
-    role_id
-  })
-  return res.result;
+export async function get_role_info (role_id, appid) {
+  const opts = {
+    method: "post",
+    url: "/api/v1/merchant/authority/get_role_info",
+    params: { appid },
+    data: { role_id }
+  };
+  return await axios(opts);
+
+  // const res = await axios.post("/api/v1/merchant/authority/get_role_info", {
+  //   role_id
+  // })
+  // return res.result;
 }
 //角色删除
-export async function getDelete_role (role_id) {
-  const res = await axios.post("/api/v1/merchant/authority/delete_role", {
-    role_id
-  })
-  return res;
+export async function getDelete_role (role_id, appid) {
+  const opts = {
+    method: "post",
+    url: "/api/v1/merchant/authority/delete_role",
+    params: { appid },
+    data: { role_id }
+  };
+  return await axios(opts);
+
+  // const res = await axios.post("/api/v1/merchant/authority/delete_role", {
+  //   role_id
+  // })
+  // return res;
 }
 
 //权限列表
-export async function getAll_role_list (user_email) {
-  const res = await axios.post("/api/v1/merchant/authority/get_role_list", {
-    user_email
-  })
-  return res.permissions;
+export async function getAll_role_list (user_email, appid) {
+  const opts = {
+    method: "post",
+    url: "/api/v1/merchant/authority/get_role_list",
+    params: { appid },
+    data: { user_email }
+  };
+  return await axios(opts);
+  // const res = await axios.post("/api/v1/merchant/authority/get_role_list", {
+  //   user_email
+  // })
+  // return res.permissions;
 }

src/service/user.js

@@ -24,17 +24,32 @@ export async function getUserDetail (params) {
   return await axios.get("/api/v1/users/detail", { params });
 }
 
-export async function editUser (data) {
-  return await axios.post("/api/v1/users/edit", data);
+export async function editUser (data, appid) {
+  const opts = {
+    method: "post",
+    url: "/api/v1/users/edit",
+    params: { appid },
+    data: data
+  };
+  return await axios(opts);
+
+  // return await axios.post("/api/v1/users/edit", data);
 }
 
-export async function createUser (data) {
-  return await axios.post("/api/v1/users/new", data);
+export async function createUser (data, appid) {
+  const opts = {
+    method: "post",
+    url: "/api/v1/users/new",
+    params: { appid },
+    data: data
+  };
+  return await axios(opts);
+  // return await axios.post("/api/v1/users/new", data);
 }
 //用户详情
-export async function getUser_detail (user_id) {
-  const res = await axios.post(`/api/v1/merchant/authority/get_user_info`, {
-    user_id
-  })
-  return res.result;
-}
+// export async function getUser_detail (user_id) {
+//   const res = await axios.post(`/api/v1/merchant/authority/get_user_info`, {
+//     user_id
+//   })
+//   return res.result;
+// }