clerk

buyer/public/config.js

@@ -3,16 +3,15 @@ var BASE = {
      * @description api请求基础路径
      */
     API_DEV: {
-      common: "https://common-api.pickmall.cn",
+      common: "http://localhost:8890",
-      buyer: "https://buyer-api.pickmall.cn",
+      buyer: "http://localhost:8888",
-      seller: "https://store-api.pickmall.cn",
+      seller: "http://localhost:8889",
-      manager: "https://admin-api.pickmall.cn"
+      manager: "http://localhost:8887"
     },
     API_PROD: {
-      common: "https://common-api.pickmall.cn",
+      common: "http://192.168.2.110:8890",
-      buyer: "https://buyer-api.pickmall.cn",
+      buyer: "http://192.168.2.110:8888",
-      seller: "https://store-api.pickmall.cn",
+      seller: "http://192.168.2.110:8889",
-      manager: "https://admin-api.pickmall.cn"
+      manager: "http://192.168.2.110:8887"
     },
   };
-  

manager/public/config.js

@@ -3,10 +3,10 @@ var BASE = {
      * @description api请求基础路径
      */
     API_DEV: {
-      common: "https://common-api.pickmall.cn",
+      common: "http://localhost:8890",
-      buyer: "https://buyer-api.pickmall.cn",
+      buyer: "http://localhost:8888",
-      seller: "https://store-api.pickmall.cn",
+      seller: "http://localhost:8889",
-      manager: "https://admin-api.pickmall.cn"
+      manager: "http://localhost:8887"
     },
     API_PROD: {
       common: "https://common-api.pickmall.cn",
@@ -27,4 +27,3 @@ var BASE = {
      */
     PREFIX: "/manager"
   };
-  

manager/src/views/sys/user-manage/userManage.vue

@@ -12,7 +12,7 @@
           />
         </Form-item>
         <Form-item label="联系方式">
-          <Input
+          <Inputuser-manage
             type="text"
             v-model="searchForm.mobile"
             placeholder="请输入联系方式"

seller/public/config.js

@@ -3,10 +3,10 @@ var BASE = {
    * @description api请求基础路径
    */
   API_DEV: {
-    common: "https://common-api.pickmall.cn",
+    common: "http://localhost:8890",
-    buyer: "https://buyer-api.pickmall.cn",
+    buyer: "http://localhost:8888",
-    seller: "https://store-api.pickmall.cn",
+    seller: "http://localhost:8889",
-    manager: "https://admin-api.pickmall.cn"
+    manager: "http://localhost:8887"
   },
   API_PROD: {
     common: "https://common-api.pickmall.cn",

seller/src/api/index.js

@@ -5,7 +5,9 @@ import {
   putRequest,
   deleteRequest,
   getRequestWithNoToken,
+  putRequestWithNoForm,
   postRequestWithNoToken,
+  postRequestWithNoForm,
   commonUrl,
 } from "@/libs/axios";
 
@@ -14,6 +16,11 @@ export const getAllCity = (params) => {
   return getRequest(commonUrl+'/common/region/allCity', params)
 }
 
+// 获取全部权限数据
+export const getCurrentPermissionList = (params) => {
+  return getRequest("/menu/memberMenu", params);
+};
+
 // 登陆
 export const getHomeNotice = params => {
   return getRequest("/article/getByPage?type=STORE_ARTICLE&pageSize=15");
@@ -128,7 +135,7 @@ export const getRelatedListData = params => {
 
 // 获取用户数据 多条件
 export const getUserListData = params => {
-  return getRequest("/user/getByCondition", params);
+  return getRequest("/clerk", params);
 };
 // 通过用户名搜索
 export const searchUserByName = (username, params) => {
@@ -141,7 +148,7 @@ export const getAllUserData = params => {
 
 // 添加用户
 export const addUser = params => {
-  return postRequest("/user/admin/add", params);
+  return postRequest("/clerk", params);
 };
 // 编辑用户
 export const editUser = params => {
@@ -268,4 +275,100 @@ export const handleRefreshToken = (token) => {
   return getRequestWithNoToken(`/login/refresh/${token}`);
 };
 
+// 获取一级部门
+export const initDepartment = (params) => {
+  return getRequest("/department", params);
+};
+// 添加部门
+export const addDepartment = (params) => {
+  return postRequest("/department", params);
+};
+// 删除部门
+export const deleteDepartment = (ids, params) => {
+  return deleteRequest(`/department/${ids}`, params);
+};
+// 编辑部门
+export const editDepartment = (ids, params) => {
+  return putRequest(`/department/${ids} `, params);
+};
+// 加载部门子级数据
+export const loadDepartment = (id) => {
+  return getRequest(`/department/${id}`);
+};
+
+// 通过部门获取全部角色数据
+export const getUserByDepartmentId = (id, params) => {
+  return getRequest(`/departmentRole/${id}`, params);
+};
+
+// 分页获取角色数据
+export const getRoleList = (params) => {
+  return getRequest("/role", params);
+};
+
+// 通过部门修改绑定角色
+export const updateDepartmentRole = (id, params) => {
+  return putRequestWithNoForm(`/departmentRole/${id}`, params);
+};
+
+// 获取全部权限数据
+export const getAllPermissionList = (params) => {
+  return getRequest("/menu/tree", params);
+};
+
+// 添加角色
+export const addRole = (params) => {
+  return postRequest("/role", params);
+};
+// 删除角色
+export const deleteRole = (ids, params) => {
+  return deleteRequest(`/role/${ids}`, params);
+};
+// 编辑角色
+export const editRole = (params) => {
+  return putRequest(`/role/${params.roleId}`, params);
+};
+
+// 分配角色权限
+export const editRolePerm = (params) => {
+  return postRequest("/role/editRolePerm", params);
+};
+// 查看某角色拥有的菜单
+export const selectRoleMenu = (params) => {
+  return getRequest(`/roleMenu/${params}`);
+};
+// 保存角色菜单
+export const saveRoleMenu = (id, params) => {
+  return postRequestWithNoForm(`/roleMenu/${id}`, params);
+};
+// 获取全部角色数据
+export const getAllRoleList = (params) => {
+  return getRequest("/role", params);
+};
+export const checkClerk = (mobile) => {
+  return postRequest(`/clerk/${mobile}/check`);
+};
+
+// 重置用户密码
+export const resetPassword = (params) => {
+  return postRequest(`/clerk/resetPassword/${params}`);
+};
+// 删除用户
+export const deleteClerk = (ids) => {
+  return deleteRequest(`/clerk/delByIds/${ids}`);
+};
+
+// 禁 启用用户
+export const enableClerk = (id, params) => {
+  return putRequest(`/clerk/enable/${id}`, params);
+};
+// 获取店员详细
+export const getClerk = (id) => {
+  return getRequest(`/clerk/${id}`);
+};
+
+export const editOtherUser = (id, params) => {
+  return putRequest(`/clerk/${id}`,params);
+};
+
 

seller/src/libs/routerJson.js

@@ -26,11 +26,11 @@ export const result = [{
           children: null,
         },
         {
-          name: "goods",
+          name: "goods1",
           level: 2,
           type: 0,
           title: "商品列表",
-          path: "goods",
+          path: "goods12",
           component: "goods/goods-seller/goods",
           children: null,
         },
@@ -388,6 +388,42 @@ export const result = [{
         component: "sys/user-manage/userManage",
         children: []
       },
+      {
+        name: "clerk",
+        level: 1,
+        type: 0,
+        title: "店员设置",
+        path: "",
+        component: "Main",
+        children: [
+          {
+            name: "clerkManage",
+            level: 2,
+            type: 0,
+            title: "店员管理",
+            path: "clerkManage",
+            component: "shop/system/clerk/clerkManage",
+            children: null
+          },{
+            name: "storeDepartmentManage",
+            level: 2,
+            type: 0,
+            title: "部门管理",
+            path: "storeDepartmentManage",
+            component: "shop/system/department/storeDepartmentManage",
+            children: null
+          },
+          {
+            name: "storeRole",
+            level: 2,
+            type: 0,
+            title: "角色权限",
+            path: "storeRole",
+            component: "shop/system/role/storeRoleManage",
+            children: null
+          }
+        ]
+      },
       {
         name: "ship",
         level: 1,

seller/src/libs/util.js

@@ -1,3 +1,4 @@
+import { getCurrentPermissionList } from "@/api/index";
 import lazyLoading from './lazyLoading.js';
 import Cookies from "js-cookie";
 import { result } from './routerJson.js';
@@ -328,30 +329,43 @@ util.initRouter = function (vm) { // 初始化路由
 
     if (!vm.$store.state.app.added) {
         // 加载菜单
+        getCurrentPermissionList().then(res => {
+          if (!res.success) return false;
           let menuData = result;
+
+
           // 格式化数据，设置 空children 为 null
           for (let i = 0; i < menuData.length; i++) {
-            let t = menuData[i].children
+            let t = menuData[i].children;
             for (let k = 0; k < t.length; k++) {
               let tt = t[k].children;
               for (let z = 0; z < tt.length; z++) {
-                    tt[z].children = null
+                tt[z].children = null;
                 // 给所有三级路由添加字段，显示一级菜单name，方便点击页签时的选中筛选
-                    tt[z].firstRouterName = menuData[i].name
+                tt[z].firstRouterName = menuData[i].name;
               }
             }
           }
+          if (!menuData) {
+            return;
+          }
           util.initAllMenuData(constRoutes, menuData);
           util.initRouterNode(otherRoutes, otherRouter);
           // 添加所有主界面路由
-        vm.$store.commit('updateAppRouter', constRoutes.filter(item => item.children.length > 0));
+          vm.$store.commit(
+            "updateAppRouter",
+            constRoutes.filter(item => item.children.length > 0)
+          );
           // 添加全局路由
-        vm.$store.commit('updateDefaultRouter', otherRoutes);
+          vm.$store.commit("updateDefaultRouter", otherRoutes);
           // 添加菜单路由
           util.initMenuData(vm, menuData);
           // 缓存数据 修改加载标识
-        window.localStorage.setItem('menuData', JSON.stringify(menuData));
+          window.localStorage.setItem("menuData", JSON.stringify(menuData));
-        vm.$store.commit('setAdded', true);
+          vm.$store.commit("setAdded", true);
+        });
+
+
     } else {
         // 读取缓存数据
         let data = window.localStorage.getItem('menuData');

seller/src/views/goods/goods-seller/goods.vue

@@ -1,30 +1,6 @@
 <template>
   <div class="search">
     <Card>
-      <Row @keydown.enter.native="handleSearch">
-        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-          <Form-item label="商品名称" prop="goodsName">
-            <Input type="text" v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 200px" />
-          </Form-item>
-          <Form-item label="状态" prop="status">
-            <Select v-model="searchForm.marketEnable" placeholder="请选择" clearable style="width: 200px">
-              <Option value="DOWN">下架</Option>
-              <Option value="UPPER">上架</Option>
-            </Select>
-          </Form-item>
-          <Form-item label="商品类型" prop="status">
-            <Select v-model="searchForm.goodsType" placeholder="请选择" clearable style="width: 200px">
-              <Option value="PHYSICAL_GOODS">实物商品</Option>
-              <Option value="VIRTUAL_GOODS">虚拟商品</Option>
-            </Select>
-          </Form-item>
-          <Form-item label="商品编号" prop="sn">
-            <Input type="text" v-model="searchForm.id" placeholder="商品编号" clearable style="width: 200px" />
-          </Form-item>
-          <Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
-          <Button @click="handleReset" class="search-btn">重置</Button>
-        </Form>
-      </Row>
       <Row class="operation padding-row">
         <Button @click="addGoods" type="primary">添加商品</Button>
         <Dropdown @on-click="handleDropdown">

seller/src/views/my-components/lili/department-choose.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <Cascader
+      v-model="selectDep"
+      :data="department"
+      @on-change="handleChangeDep"
+      change-on-select
+      filterable
+      clearable
+      placeholder="请选择"
+    ></Cascader>
+  </div>
+</template>
+
+<script>
+import { initDepartment } from "@/api/index";
+export default {
+  name: "departmentChoose",
+  props: {
+
+  },
+  data() {
+    return {
+      selectDep: [], // 已选数据
+      department: [] // 列表
+    };
+  },
+  methods: {
+    // 获取部门数据
+    initDepartmentData() {
+      initDepartment().then(res => {
+        if (res.success) {
+          const arr = res.result;
+          this.filterData(arr)
+          this.department = arr
+        }
+      });
+    },
+    handleChangeDep(value, selectedData) {
+      let departmentId = "";
+      // 获取最后一个值
+      if (value && value.length > 0) {
+        departmentId = value[value.length - 1];
+      }
+      this.$emit("on-change", departmentId);
+    },
+    // 清空已选列表
+    clearSelect() {
+      this.selectDep = [];
+    },
+    // 处理部门数据
+    filterData (data) {
+      data.forEach(e => {
+        e.value = e.id;
+        e.label = e.title;
+        if (e.children) {
+          this.filterData(e.children)
+        } else {
+          return
+        }
+      })
+    }
+  },
+  created() {
+    this.initDepartmentData();
+  }
+};
+</script>
+
+<style lang="scss">
+</style>
+

seller/src/views/my-components/lili/department-tree-choose.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <div style="display:flex;">
+      <Input
+        v-model="departmentTitle"
+        readonly
+        style="margin-right:10px;"
+        :placeholder="placeholder"
+        :clearable="clearable"
+        @on-clear="clearSelect"
+      />
+      <Poptip transfer trigger="click" placement="right" title="选择部门" width="250">
+        <Button icon="md-list">选择部门</Button>
+        <div slot="content">
+          <Input
+            v-model="searchKey"
+            suffix="ios-search"
+            @on-change="searchDep"
+            placeholder="输入部门名搜索"
+            clearable
+          />
+          <div class="dep-tree-bar">
+            <Tree
+              :data="dataDep"
+              @on-select-change="selectTree"
+            ></Tree>
+            <Spin size="large" fix v-if="depLoading"></Spin>
+          </div>
+        </div>
+      </Poptip>
+    </div>
+  </div>
+</template>
+
+<script>
+import {initDepartment, searchDepartment} from "@/api/index";
+
+export default {
+  name: "departmentTreeChoose",
+  props: {
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    placeholder: {
+      type: String,
+      default: "点击选择部门"
+    }
+  },
+  data() {
+    return {
+      depLoading: false, // 加载状态
+      departmentTitle: "", // modal标题
+      searchKey: "", // 搜索关键词
+      dataDep: [], // 部门列表
+      selectDep: [], // 已选部门
+      departmentId: [] // 部门id
+    };
+  },
+  methods: {
+    // 获取部门数据
+    initDepartmentData() {
+      initDepartment().then(res => {
+        if (res.success) {
+          this.dataDep = res.result;
+        }
+      });
+    },
+    searchDep() {
+      // 搜索部门
+      if (this.searchKey) {
+        this.depLoading = true;
+        searchDepartment({title: this.searchKey}).then(res => {
+          this.depLoading = false;
+          if (res.success) {
+            res.result.forEach(function (e) {
+              if (e.status == -1) {
+                e.title = "[已禁用] " + e.title;
+                e.disabled = true;
+              }
+            });
+            this.dataDep = res.result;
+          }
+        });
+      } else {
+        this.initDepartmentData();
+      }
+    },
+    // 选择回调
+    selectTree(v) {
+      if (v.length === 0) {
+        this.$emit("on-change", null);
+        this.departmentId = "";
+        this.departmentTitle = "";
+        return
+      }
+      this.departmentId = v[0].id;
+      this.departmentTitle = v[0].title;
+      let department = {
+        departmentId: this.departmentId,
+        departmentTitle: this.departmentTitle
+      }
+      this.$emit("on-change", department);
+    },
+    // 清除选中方法
+    clearSelect() {
+      this.departmentId = [];
+      this.departmentTitle = "";
+      this.initDepartmentData();
+      if (this.multiple) {
+        this.$emit("on-change", []);
+      } else {
+        this.$emit("on-change", "");
+      }
+      this.$emit("on-clear");
+    },
+    // 设置数据 回显用
+    setData(ids, title) {
+      this.departmentTitle = title;
+      if (this.multiple) {
+        this.departmentId = ids;
+      } else {
+        this.departmentId = [];
+        this.departmentId.push(ids);
+      }
+    }
+  },
+  created() {
+    this.initDepartmentData();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.dep-tree-bar {
+  position: relative;
+  min-height: 80px;
+  max-height: 500px;
+  overflow: auto;
+  margin-top: 5px;
+}
+
+.dep-tree-bar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.dep-tree-bar::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 0 2px #d1d1d1;
+  background: #e4e4e4;
+}
+
+</style>
+

seller/src/views/shop/system/clerk/clerkManage.vue

@@ -0,0 +1,770 @@
+<template>
+  <div class="search">
+    <Card>
+      <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
+        <Form-item label="店员名称">
+          <Input
+            type="text"
+            v-model="searchForm.clerkName"
+            placeholder="请输入店员名称"
+            clearable
+            style="width: 200px"
+          />
+        </Form-item>
+        <Form-item label="联系方式">
+          <Input
+            type="text"
+            v-model="searchForm.mobile"
+            placeholder="请输入联系方式"
+            clearable
+            style="width: 200px"
+          />
+        </Form-item>
+        <Form-item label="部门">
+          <department-choose @on-change="handleSelectDep" style="width: 150px;" ref="dep"></department-choose>
+        </Form-item>
+        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
+      </Form>
+      <Row class="operation padding-row">
+        <Button @click="add" type="primary">添加</Button>
+        <Button @click="delAll">批量删除</Button>
+        <Button @click="resetPass">重置密码</Button>
+      </Row>
+      <br>
+      <Table
+        :loading="loading"
+        border
+        :columns="columns"
+        :data="data"
+        sortable="custom"
+        @on-sort-change="changeSort"
+        @on-selection-change="showSelect"
+        ref="table"
+      ></Table>
+      <Row type="flex" justify="end" class="mt_10">
+        <Page
+          :current="searchForm.pageNumber"
+          :total="total"
+          :page-size="searchForm.pageSize"
+          @on-change="changePage"
+          @on-page-size-change="changePageSize"
+          :page-size-opts="[10,20,50]"
+          size="small"
+          show-total
+          show-elevator
+          show-sizer
+        ></Page>
+      </Row>
+    </Card>
+
+    <Modal
+      :title="modalTitle"
+      v-model="userEditModalVisible"
+      :mask-closable="false"
+      :width="500"
+      :styles="{top: '30px'}"
+    >
+      <Form ref="form" :model="editForm" :label-width="80" :rules="formValidate">
+        <FormItem label="手机号">
+          <Input v-model="mobile" disabled/>
+        </FormItem>
+        <FormItem label="店员名称">
+          <Input v-model="clerkName" disabled/>
+        </FormItem>
+        <FormItem label="超级管理员" prop="isSuper">
+          <RadioGroup type="button" button-style="solid" v-model="editForm.isSuper">
+            <Radio :label="1">
+              <span>是</span>
+            </Radio>
+            <Radio :label="0">
+              <span>否</span>
+            </Radio>
+          </RadioGroup>
+        </FormItem>
+
+        <FormItem label="角色" prop="roles" v-if="editForm.isSuper == 0">
+          <Select v-model="editForm.roles" multiple>
+            <Option v-for="item in roleList" :value="item.id" :key="item.id" :label="item.name">
+
+            </Option>
+          </Select>
+        </FormItem>
+        <Form-item label="所属部门">
+          <department-tree-choose @on-change="handleEditSelectDepTree" ref="depTree"></department-tree-choose>
+        </Form-item>
+
+      </Form>
+      <div slot="footer">
+        <Button type="text" @click="userEditModalVisible = false">取消</Button>
+        <Button type="primary" :loading="submitLoading" @click="updateSubmit">提交</Button>
+      </div>
+    </Modal>
+
+    <Modal
+      :title="modalTitle"
+      v-model="userModalVisible"
+      :mask-closable="false"
+      :width="500"
+      :styles="{top: '30px'}"
+    >
+      <Form ref="form" :model="form" :label-width="80" :rules="formValidate">
+        <FormItem label="手机号" prop="mobile">
+          <Input placeholder="请输入要添加的会员手机号码" maxlength="11" style="width: 75%" v-model="form.mobile"
+                 autocomplete="off"/>
+          &nbsp;<Button v-if="!memberCheck" @click="checkClerk">校验</Button>
+          <Button v-if="memberCheck" @click="checkAgainClerk">重新校验</Button>
+        </FormItem>
+        <FormItem v-if="newMember" label="用户名" prop="username">
+          <Input v-model="form.username" autocomplete="off"/>
+        </FormItem>
+        <FormItem v-if="oldMember" label="用户名" prop="username">
+          <Input v-model="form.username" autocomplete="off" disabled/>
+        </FormItem>
+
+        <FormItem label="密码" prop="password" v-if="newMember" :error="errorPass">
+          <Input type="password" password v-model="form.password" autocomplete="off"/>
+        </FormItem>
+        <FormItem label="超级管理员" prop="isSuper" v-if="newMember || oldMember">
+          <RadioGroup type="button" button-style="solid" v-model="form.isSuper">
+            <Radio :label="1">
+              <span>是</span>
+            </Radio>
+            <Radio :label="0">
+              <span>否</span>
+            </Radio>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="角色" prop="roles" v-if="(oldMember || newMember) && form.isSuper == 0">
+          <Select v-model="form.roles" multiple>
+            <Option v-for="item in roleList" :value="item.id" :key="item.id" :label="item.name">
+
+            </Option>
+          </Select>
+        </FormItem>
+        <Form-item label="所属部门" v-if="oldMember || newMember">
+          <department-tree-choose @on-change="handleSelectDepTree" ref="depTree"></department-tree-choose>
+        </Form-item>
+      </Form>
+
+      <div slot="footer">
+        <Button type="text" @click="userModalVisible = false">取消</Button>
+        <Button type="primary" :loading="submitLoading" @click="submitUser">提交</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import {
+  checkClerk,
+  getUserListData,
+  getAllRoleList,
+  addUser,
+  editOtherUser,
+  enableClerk,
+  deleteClerk,
+  resetPassword,
+  getClerk
+} from "@/api/index";
+import {validateMobile} from "@/libs/validate";
+import departmentChoose from "@/views/my-components/lili/department-choose";
+import departmentTreeChoose from "@/views/my-components/lili/department-tree-choose";
+import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
+
+export default {
+  name: "clerk-manage",
+  components: {
+    departmentChoose,
+    departmentTreeChoose,
+    uploadPicInput,
+  },
+  data() {
+    return {
+      loading: true, // 加载状态
+      selectCount: 0, // 已选数量
+      selectList: [], // 已选数据列表
+      searchForm: { // 请求参数
+        clerkName: "",
+        departmentId: "",
+        pageNumber: 1,
+        pageSize: 10,
+        sort: "createTime",
+        order: "desc"
+      },
+      modalType: 0, // 新增编辑标识
+      userModalVisible: false, // 用户modal显隐
+      userEditModalVisible:false,
+      modalTitle: "", // modal标题
+      form: { // 表单
+        username: "",
+        mobile: "",
+        sex: "",
+        isSuper: 0,
+        roles: [],
+        departmentId: "",
+        departmentTitle: ""
+      },
+
+      editForm: { // 表单
+        isSuper: 0,
+        roles: [],
+        departmentId: "",
+        departmentTitle: ""
+      },
+      mobile: "",
+      clerkName: "",
+
+      newMember: false,
+      oldMember: false,
+      memberCheck: false,
+      roleList: [], // 角色列表
+      errorPass: "", // 错误提示
+      formValidate: { // 验证规则
+        username: [
+          {required: true, message: "用户名不能为空", trigger: "blur"}
+        ],
+        password: [
+          {required: true, message: "密码不能为空", trigger: "blur"}
+        ],
+        mobile: [
+          {required: true, message: "手机号不能为空", trigger: "blur"},
+          {validator: validateMobile, trigger: "blur"}
+        ]
+      },
+      submitLoading: false, // 提交状态
+      columns: [ // 表头
+        {
+          type: "selection",
+          width: 60,
+          align: "center",
+          fixed: "left"
+        },
+        {
+          title: "店员名称",
+          key: "clerkName",
+          minWidth: 100,
+          sortable: true,
+          fixed: "left"
+        },
+        {
+          title: "手机号码",
+          key: "mobile",
+          minWidth: 100,
+          fixed: "left"
+        },
+        {
+          title: "店主",
+          key: "status",
+          align: "center",
+          width: 130,
+          render: (h, params) => {
+            if (params.row.shopkeeper == true) {
+              return h("div", [
+                h("Badge", {
+                  props: {
+                    status: "success",
+                    text: "是"
+                  }
+                })
+              ]);
+            } else if (params.row.shopkeeper == false) {
+              return h("div", [
+                h("Badge", {
+                  props: {
+                    status: "error",
+                    text: "否"
+                  }
+                })
+              ]);
+            }
+          },
+        },
+        {
+          title: "超级管理员",
+          key: "status",
+          align: "center",
+          width: 130,
+          render: (h, params) => {
+            if (params.row.isSuper == true) {
+              return h("div", [
+                h("Badge", {
+                  props: {
+                    status: "success",
+                    text: "是"
+                  }
+                })
+              ]);
+            } else if (params.row.isSuper == false) {
+              return h("div", [
+                h("Badge", {
+                  props: {
+                    status: "error",
+                    text: "否"
+                  }
+                })
+              ]);
+            }
+          },
+        },
+        {
+          title: "状态",
+          key: "status",
+          align: "center",
+          width: 130,
+          render: (h, params) => {
+            if (params.row.status == true) {
+              return h("div", [
+                h("Badge", {
+                  props: {
+                    status: "success",
+                    text: "启用"
+                  }
+                })
+              ]);
+            } else if (params.row.status == false) {
+              return h("div", [
+                h("Badge", {
+                  props: {
+                    status: "error",
+                    text: "禁用"
+                  }
+                })
+              ]);
+            }
+          },
+          filters: [
+            {
+              label: "启用",
+              value: true
+            },
+            {
+              label: "禁用",
+              value: false
+            }
+          ],
+          filterMultiple: false,
+          filterMethod(value, row) {
+            return row.status == value;
+          }
+        },
+        {
+          title: "创建时间",
+          key: "createTime",
+          sortable: true,
+          sortType: "desc",
+          width: 180
+        },
+        {
+          title: "操作",
+          key: "action",
+          width: 200,
+          align: "center",
+          fixed: "right",
+          render: (h, params) => {
+            let enableOrDisable = "";
+            if (params.row.status == true) {
+              enableOrDisable = h(
+                "Button",
+                {
+                  props: {
+                    size: "small"
+                  },
+                  style: {
+                    marginRight: "5px"
+                  },
+                  on: {
+                    click: () => {
+                      this.disable(params.row);
+                    }
+                  }
+                },
+                "禁用"
+              );
+            } else {
+              enableOrDisable = h(
+                "Button",
+                {
+                  props: {
+                    type: "success",
+                    size: "small"
+                  },
+                  style: {
+                    marginRight: "5px"
+                  },
+                  on: {
+                    click: () => {
+                      this.enable(params.row);
+                    }
+                  }
+                },
+                "启用"
+              );
+            }
+            return h("div", [
+              h(
+                "Button",
+                {
+                  props: {
+                    type: "info",
+                    size: "small"
+                  },
+                  style: {
+                    marginRight: "5px"
+                  },
+                  on: {
+                    click: () => {
+                      this.edit(params.row);
+                    }
+                  }
+                },
+                "编辑"
+              ),
+              enableOrDisable,
+              h(
+                "Button",
+                {
+                  props: {
+                    type: "error",
+                    size: "small"
+                  },
+                  on: {
+                    click: () => {
+                      this.remove(params.row);
+                    }
+                  }
+                },
+                "删除"
+              )
+            ]);
+          }
+        }
+      ],
+      data: [], // 用户数据
+      total: 0, // 总数
+    };
+  },
+  methods: {
+    // 初始化数据
+    init() {
+      this.getUserList();
+    },
+    // 选择部门回调
+    handleSelectDepTree(v) {
+      if (v) {
+        this.form.departmentId = v.departmentId;
+        this.form.departmentTitle = v.departmentTitle;
+      } else {
+        this.form.departmentId = "";
+        this.form.departmentTitle = "";
+      }
+    },
+    // 选择部门回调
+    handleEditSelectDepTree(v) {
+      if (v) {
+        this.editForm.departmentId = v.departmentId;
+        this.editForm.departmentTitle = v.departmentTitle;
+      } else {
+        this.editForm.departmentId = "";
+        this.editForm.departmentTitle = "";
+      }
+    },
+    //重新校验会员
+    checkAgainClerk() {
+      this.memberCheck = false
+      this.newMember = false
+      this.oldMember = false
+    },
+    //检测当前店员
+    checkClerk() {
+      if (this.form.mobile) {
+        this.newMember = false
+        this.oldMember = false
+        checkClerk(this.form.mobile).then(res => {
+          if (!res.result.id) {
+            this.newMember = true
+          } else {
+            this.oldMember = true
+            this.form.username = res.result.username
+            this.form.password = res.result.password
+          }
+          this.form.isSuper = 1
+          this.memberCheck = true;
+        });
+      }
+
+    },
+    // 搜索项部门选择
+    handleSelectDep(v) {
+      this.searchForm.departmentId = v;
+    },
+    // 分页 修改页码
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getUserList();
+      this.clearSelectAll();
+    },
+    // 分页 修改页数
+    changePageSize(v) {
+      this.searchForm.pageSize = v;
+      this.searchForm.pageNumber = 1;
+      this.getUserList();
+    },
+    getUserList() {
+      // 多条件搜索用户列表
+      this.loading = true;
+      getUserListData(this.searchForm).then(res => {
+        this.loading = false;
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
+    },
+    // 搜索
+    handleSearch() {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 10;
+      this.getUserList();
+    },
+    // 排序
+    changeSort(e) {
+      this.searchForm.sort = e.key;
+      this.searchForm.order = e.order;
+      if (e.order == "normal") {
+        this.searchForm.order = "";
+      }
+      this.getUserList();
+    },
+    // 获取角色列表
+    getRoleList() {
+      let params = {
+        pageSize: 100
+      }
+      getAllRoleList(params).then(res => {
+        if (res.success) {
+          this.roleList = res.result.records;
+        }
+      });
+    },
+    // 重置密码
+    resetPass() {
+      if (this.selectCount == 0) {
+        this.$Message.warning('请选中数据后重试!');
+        return
+      }
+      this.$Modal.confirm({
+        title: "确认重置",
+        content:
+          "您确认要重置所选的 " +
+          this.selectCount +
+          " 条用户数据密码为【123456】?",
+        loading: true,
+        onOk: () => {
+          let ids = "";
+          this.selectList.forEach(function (e) {
+            ids += e.id + ",";
+          });
+          ids = ids.substring(0, ids.length - 1);
+          console.warn(ids)
+          resetPassword(ids).then(res => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("操作成功");
+              this.clearSelectAll();
+              this.getUserList();
+            }
+          });
+        }
+      });
+    },
+    updateSubmit(){
+      this.submitLoading = true;
+      console.warn(this.editForm)
+      editOtherUser(this.editForm.id,this.editForm).then(res => {
+        this.submitLoading = false;
+        if (res.success) {
+          this.$Message.success("操作成功");
+          this.getUserList();
+          this.userEditModalVisible = false;
+        }
+      });
+    },
+    // 确认提交
+    submitUser() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          // 添加用户 避免编辑后传入id
+          const params = JSON.parse(JSON.stringify(this.form))
+          console.warn(params)
+          delete params.id;
+          delete params.status;
+          if (this.newMember) {
+            if (params.password == "" || params.password == undefined) {
+              this.errorPass = "密码不能为空";
+              return;
+            }
+            if (params.password.length < 6) {
+              this.errorPass = "密码长度不得少于6位";
+              return;
+            }
+            //todo
+            params.password = this.md5(params.password)
+          } else {
+            params.password = this.form.password
+          }
+          this.submitLoading = true;
+          addUser(params).then(res => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("操作成功");
+              this.getUserList();
+              this.userModalVisible = false;
+            }
+          });
+        }
+      });
+    },
+    // 添加用户
+    add() {
+      this.modalType = 0;
+      this.modalTitle = "添加店员";
+      this.$refs.form.resetFields();
+      this.form = { // 表单
+        username: "",
+        mobile: "",
+        isSuper: 0,
+        roles: [],
+        departmentId: "",
+        departmentTitle: ""
+      },
+        this.oldMember = false
+      this.newMember = false
+      this.userModalVisible = true;
+    },
+    // 编辑用户
+    edit(v) {
+      console.warn(v)
+      getClerk(v.id).then(res => {
+        console.warn(res)
+        this.mobile = res.result.mobile
+        this.clerkName = res.result.clerkName
+        this.editForm.isSuper = 0
+        this.editForm.id = res.result.id
+        if(res.result.isSuper){
+          this.editForm.isSuper = 1
+        }
+        this.editForm.departmentId = res.result.departmentId
+        this.$refs.depTree.setData(res.result.departmentId, res.result.departmentTitle);
+        let selectRolesId = [];
+        if (res.result.roles) {
+          res.result.roles.forEach(function (e) {
+            selectRolesId.push(e.id);
+          });
+        }
+        this.editForm.roles = selectRolesId;
+
+        this.modalTitle = "修改店员";
+        this.userEditModalVisible = true;
+      })
+
+    },
+    // 启用
+    enable(v) {
+      let params = {
+        status: true
+      }
+      this.$Modal.confirm({
+        title: "确认启用",
+        content: "您确认要启用用户 " + v.clerkName + " ?",
+        loading: true,
+        onOk: () => {
+          enableClerk(v.id, params).then(res => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("操作成功");
+              this.getUserList();
+            }
+          });
+        }
+      });
+    },
+    // 禁用
+    disable(v) {
+      let params = {
+        status: false
+      }
+      this.$Modal.confirm({
+        title: "确认禁用",
+        content: "您确认要禁用用户 " + v.clerkName + " ?",
+        loading: true,
+        onOk: () => {
+          enableClerk(v.id, params).then(res => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("操作成功");
+              this.getUserList();
+            }
+          });
+        }
+      });
+    },
+    // 删除用户
+    remove(v) {
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "您确认要删除用户 " + v.clerkName + " ?",
+        loading: true,
+        onOk: () => {
+          deleteClerk(v.id).then(res => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("删除成功");
+              this.getUserList();
+            }
+          });
+        }
+      });
+    },
+    // 选中状态
+    showSelect(e) {
+      this.selectList = e;
+      this.selectCount = e.length;
+    },
+    // 清除选中状态
+    clearSelectAll() {
+      this.$refs.table.selectAll(false);
+    },
+    // 批量删除
+    delAll() {
+      if (this.selectCount <= 0) {
+        this.$Message.warning("您还未选择要删除的数据");
+        return;
+      }
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "您确认要删除所选的 " + this.selectCount + " 条店员?",
+        loading: true,
+        onOk: () => {
+          let ids = "";
+          this.selectList.forEach(function (e) {
+            ids += e.id + ",";
+          });
+          ids = ids.substring(0, ids.length - 1);
+          deleteClerk(ids).then(res => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("删除成功");
+              this.clearSelectAll();
+              this.getUserList();
+            }
+          });
+        }
+      });
+    }
+  },
+  mounted() {
+    this.init();
+    this.getRoleList();
+  }
+};
+</script>

seller/src/views/shop/system/department/storeDepartmentManage.vue

@@ -0,0 +1,408 @@
+
+<template>
+  <div class="search">
+    <Card>
+      <Row class="operation">
+        <i-switch v-model="strict" size="large" style="margin-right: 5px">
+          <span slot="open">级联</span>
+          <span slot="close">单选</span>
+        </i-switch>
+        <Button @click="addRoot">添加部门</Button>
+        <Button @click="add" type="primary">添加子部门</Button>
+        <Button @click="delAll">批量删除</Button>
+        <Button @click="getParentList">刷新</Button>
+      </Row>
+      <Row type="flex" justify="start">
+        <Col :md="8" :lg="8" :xl="6">
+          <Alert show-icon>
+            当前选择编辑：
+            <span class="select-title">{{ editTitle }}</span>
+            <a class="select-clear" v-if="form.id" @click="cancelSelect"
+              >取消选择</a
+            >
+          </Alert>
+          <div class="tree-bar" :style="{ maxHeight: maxHeight }">
+            <Tree
+              ref="tree"
+              :data="data"
+              :load-data="loadData"
+              show-checkbox
+              @on-check-change="changeSelect"
+              @on-select-change="selectTree"
+              :check-strictly="!strict"
+            ></Tree>
+            <Spin size="large" fix v-if="loading"></Spin>
+          </div>
+        </Col>
+        <Col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
+          <Form
+            ref="form"
+            :model="form"
+            :label-width="100"
+            :rules="formValidate"
+          >
+            <FormItem label="部门名称" prop="title">
+              <Input v-model="form.title" />
+            </FormItem>
+            <FormItem label="选择角色">
+              <Select
+                :loading="userLoading"
+                not-found-text="暂无角色"
+                v-model="selectedRole"
+                multiple
+              >
+                <Option v-for="item in users" :value="item.id" :key="item.id">{{
+                  item.name
+                }}</Option>
+              </Select>
+            </FormItem>
+
+            <FormItem label="排序值" prop="sortOrder">
+              <Tooltip
+                trigger="hover"
+                placement="right"
+                content="值越小越靠前，支持小数"
+              >
+                <InputNumber
+                  :max="1000"
+                  :min="0"
+                  v-model="form.sortOrder"
+                ></InputNumber>
+              </Tooltip>
+            </FormItem>
+            <Form-item>
+              <Button
+                style="margin-right: 5px"
+                @click="submitEdit"
+                :loading="submitLoading"
+                type="primary"
+                >修改并保存</Button
+              >
+              <Button @click="handleReset">重置</Button>
+            </Form-item>
+          </Form>
+        </Col>
+      </Row>
+    </Card>
+
+    <Modal
+      :title="modalTitle"
+      v-model="modalVisible"
+      :mask-closable="false"
+      :width="500"
+    >
+      <Form
+        ref="formAdd"
+        :model="formAdd"
+        :label-width="85"
+        :rules="formValidate"
+      >
+        <div v-if="showParent">
+          <FormItem label="上级部门：">{{ form.title }}</FormItem>
+        </div>
+        <FormItem label="部门名称" prop="title">
+          <Input v-model="formAdd.title" />
+        </FormItem>
+        <FormItem label="排序值" prop="sortOrder">
+          <Tooltip
+            trigger="hover"
+            placement="right"
+            content="值越小越靠前，支持小数"
+          >
+            <InputNumber
+              :max="1000"
+              :min="0"
+              v-model="formAdd.sortOrder"
+            ></InputNumber>
+          </Tooltip>
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button type="text" @click="cancelAdd">取消</Button>
+        <Button type="primary" :loading="submitLoading" @click="submitAdd"
+          >提交</Button
+        >
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import {
+  initDepartment,
+  loadDepartment,
+  addDepartment,
+  editDepartment,
+  deleteDepartment,
+  getUserByDepartmentId,
+  getRoleList,
+  updateDepartmentRole,
+} from "@/api/index";
+export default {
+  name: "store-department-manage",
+  data() {
+    return {
+      loading: true, // 加载状态
+      maxHeight: "500px", // 最大高度
+      strict: true, // 级联还是单选
+      userLoading: false, // 选择角色加载状态
+      loadingEdit: false, // 编辑加载状态
+      modalVisible: false, // modal显隐
+      selectList: [], // 已选列表
+      selectCount: 0, // 已选总数
+      showParent: false, // 展示父级
+      modalTitle: "", // modal标题
+      editTitle: "", // 编辑标题
+      selectedRole: [], //选择的角色
+      searchKey: "", // 搜索关键字
+      form: { // 提交表单
+        id: "",
+        title: "",
+        parentId: "",
+        parentTitle: "",
+        sortOrder: 0,
+        status: 0,
+      },
+
+      formAdd: {}, // 新增表单
+      formValidate: { // 验证规则
+        title: [{ required: true, message: "名称不能为空", trigger: "blur" }],
+        sortOrder: [
+          {
+            required: true,
+            type: "number",
+            message: "排序值不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+      submitLoading: false, // 提交loading
+      data: [], // 部门数据
+      dataEdit: [], // 编辑时部门数据
+      users: [], // 用户
+    };
+  },
+  methods: {
+    init() {
+      this.getParentList();
+    },
+    // 获取部门数据
+    getParentList() {
+      this.loading = true;
+      initDepartment().then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.data = res.result;
+        }
+      });
+    },
+    // 动态加载二级数据
+    loadData(item, callback) {
+      loadDepartment(item.id).then((res) => {
+        this.loadingEdit = false;
+        if (res.success) {
+          console.log(res.result);
+          callback(res.result);
+        }
+      });
+    },
+
+    // 点击树
+    selectTree(v) {
+      if (v.length > 0) {
+        // 转换null为""
+        for (let attr in v[0]) {
+          if (v[0][attr] == null) {
+            v[0][attr] = "";
+          }
+        }
+        let str = JSON.stringify(v[0]);
+        let data = JSON.parse(str);
+
+        this.editTitle = data.title;
+        // 加载部门用户数据
+        this.userLoading = true;
+
+        getUserByDepartmentId(data.id).then((res) => {
+          let way =[]
+          res.result && res.result.forEach((item) => {
+            way.push(item.roleId)
+          })
+           this.$set(this,'selectedRole',way)
+
+        });
+
+        getRoleList({
+          pageNumber: 1,
+          pageSize: 10000,
+        }).then((res) => {
+          this.userLoading = false;
+          if (res.success) {
+            this.users = res.result.records;
+            // 回显
+            this.form = data;
+          }
+        });
+      } else {
+        this.cancelSelect();
+      }
+    },
+    // 取消选择
+    cancelSelect() {
+      let data = this.$refs.tree.getSelectedNodes()[0];
+      if (data) {
+        data.selected = false;
+      }
+      this.$refs.form.resetFields();
+      delete this.form.id;
+      this.editTitle = "";
+    },
+    // 选择上级部门
+    selectTreeEdit(v) {
+
+      if (v.length > 0) {
+        // 转换null为""
+        for (let attr in v[0]) {
+          if (v[0][attr] == null) {
+            v[0][attr] = "";
+          }
+        }
+        let str = JSON.stringify(v[0]);
+        let data = JSON.parse(str);
+        this.form.parentId = data.id;
+        this.form.parentTitle = data.title;
+      }
+    },
+    // 取消添加部门
+    cancelAdd() {
+      this.modalVisible = false;
+    },
+    // 重置表单
+    handleReset() {
+      this.$refs.form.resetFields();
+      this.form.status = 0;
+    },
+    // 提交表单
+    submitEdit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          if (!this.form.id) {
+            this.$Message.warning("请先点击选择要修改的部门");
+            return;
+          }
+          let roleWay = [];
+          this.selectedRole.forEach((item) => {
+            let role = {
+              departmentId: this.form.id,
+              roleId: item,
+            };
+            roleWay.push(role);
+          });
+
+          Promise.all([
+            editDepartment(this.form.id, this.form),
+            updateDepartmentRole(this.form.id, roleWay)
+          ]).then((res) => {
+            console.warn(res)
+            this.submitLoading = false;
+            if (res[0].success) {
+              this.$Message.success("编辑成功");
+              this.init();
+              this.modalVisible = false;
+            }
+          });
+        }
+      });
+    },
+    // 确认添加部门
+    submitAdd() {
+      this.$refs.formAdd.validate((valid) => {
+        if (valid) {
+          this.submitLoading = true;
+          addDepartment(this.formAdd).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("添加成功");
+              this.init();
+              this.modalVisible = false;
+            }
+          });
+        }
+      });
+    },
+    // 添加子部门
+    add() {
+      if (this.form.id == "" || this.form.id == null) {
+        this.$Message.warning("请先点击选择一个部门");
+        return;
+      }
+      this.modalTitle = "添加子部门";
+      this.showParent = true;
+
+      this.formAdd = {
+        parentId: this.form.id,
+        sortOrder: 0,
+        status: 0,
+      };
+      this.modalVisible = true;
+    },
+    // 添加一级部门
+    addRoot() {
+      this.modalTitle = "添加一级部门";
+      this.showParent = false;
+      this.formAdd = {
+        parentId: 0,
+        sortOrder: 0,
+        status: 0,
+      };
+      this.modalVisible = true;
+    },
+    // 选中回调
+    changeSelect(v) {
+      console.log(v);
+      this.selectCount = v.length;
+      this.selectList = v;
+    },
+    // 批量删除部门
+    delAll() {
+      if (this.selectCount <= 0) {
+        this.$Message.warning("您还未勾选要删除的数据");
+        return;
+      }
+      this.$Modal.confirm({
+        title: "确认删除",
+        content:
+          "您确认要删除所选的 " + this.selectCount + " 条数据及其下级所有数据?",
+        loading: true,
+        onOk: () => {
+          let ids = "";
+          this.selectList.forEach(function (e) {
+            ids += e.id + ",";
+          });
+          ids = ids.substring(0, ids.length - 1);
+          deleteDepartment(ids).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("删除成功");
+              this.selectList = [];
+              this.selectCount = 0;
+              this.cancelSelect();
+              this.init();
+            }
+          });
+        },
+      });
+    },
+  },
+  mounted() {
+    // 计算高度
+    let height = document.documentElement.clientHeight;
+    this.maxHeight = Number(height - 287) + "px";
+    this.init();
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/styles/tree-common.scss";
+
+</style>

seller/src/views/shop/system/role/storeRoleManage.vue

@@ -0,0 +1,768 @@
+<template>
+  <div class="search">
+    <Card>
+      <Row class="operation">
+        <Button @click="addRole" type="primary">添加角色</Button>
+        <Button @click="delAll">批量删除</Button>
+      </Row>
+      <br>
+      <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
+      <Row type="flex" justify="end" class="mt_10">
+        <Page :current="pageNumber" :total="total" :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total
+              show-elevator show-sizer></Page>
+      </Row>
+    </Card>
+
+    <!-- 编辑 -->
+    <Modal :title="modalTitle" v-model="roleModalVisible" :mask-closable="false" :width="500">
+      <Form ref="roleForm" :model="roleForm" :label-width="80" :rules="roleFormValidate">
+        <FormItem label="角色名称" prop="name">
+          <Input v-model="roleForm.name" />
+        </FormItem>
+        <FormItem label="备注" prop="description">
+          <Input v-model="roleForm.description" />
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button type="text" @click="roleModalVisible = false">取消</Button>
+        <Button type="primary" :loading="submitLoading" @click="submitRole">提交
+        </Button>
+      </div>
+    </Modal>
+    <!-- 菜单权限 -->
+    <Modal :title="modalTitle" v-model="permModalVisible" :mask-closable="false" :width="500" :styles="{ top: '30px' }" class="permModal">
+      <div style="position: relative">
+        <Tree ref="tree" :data="permData" show-checkbox :render="renderContent">
+        </Tree>
+        <Spin size="large" fix v-if="treeLoading"></Spin>
+      </div>
+      <div slot="footer">
+        <Button type="text" @click="permModalVisible = false">取消</Button>
+        <Select v-model="openLevel" @on-change="changeOpen" style="width: 110px; text-align: left; margin-right: 10px">
+          <Option value="0">展开所有</Option>
+          <Option value="1">收合所有</Option>
+          <Option value="2">仅展开一级</Option>
+          <Option value="3">仅展开两级</Option>
+        </Select>
+        <Button type="primary" :loading="submitPermLoading" @click="submitPermEdit()">编辑
+        </Button>
+      </div>
+    </Modal>
+
+
+    <!-- 保存权限弹出选择权限 -->
+    <Modal width="800" v-model="selectIsSuperModel" title="选择菜单权限" :loading="superModelLoading" @on-ok="saveRole">
+      <div class="btns">
+        <Button type="primary" @click="setRole()" class="btn-item">一键选中·数据权限</Button>
+        <Button class="btn-item" @click="setRole('onlyView')">一键选中·查看权限</Button>
+      </div>
+      <div class="role-list">
+        <div class="role-item" v-for="(item, index) in saveRoleWay" :key="index">
+          <div class="title">{{ item.title }}</div>
+          <div class="content">
+            <RadioGroup type="button" button-style="solid" v-model="item.isSuper">
+              <Radio :label="1">
+                <span>操作数据权限</span>
+              </Radio>
+              <Radio :label="0">
+                <span>查看权限</span>
+              </Radio>
+            </RadioGroup>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import {
+  getRoleList,
+  getAllPermissionList,
+  addRole,
+  editRole,
+  deleteRole,
+  loadDepartment,
+  selectRoleMenu,
+  saveRoleMenu,
+} from "@/api/index";
+import util from "@/libs/util.js";
+export default {
+  name: "role-manage",
+  data() {
+    return {
+      superModelLoading: false, //保存权限弹出选择权限保存
+      selectIsSuperModel: false, //保存权限弹出选择权限
+      rolePermsWay: [], //查询角色权限集合
+      openLevel: "0", // 展开的级别
+      loading: true, // 加载状态
+      treeLoading: true, // 树加载
+      depTreeLoading: true, // 部门树加载
+      submitPermLoading: false, // 权限提交加载
+      submitDepLoading: false, // 部门提交加载
+      sortColumn: "", // 排序
+      sortType: "desc", // 排序类型
+      modalType: 0, // 0 添加 1 编辑
+      roleModalVisible: false, // 角色modal
+      permModalVisible: false, // 菜单权限modal
+      depModalVisible: false, // 部门modal
+      modalTitle: "", // modal标题
+      roleForm: {
+        // 角色表单
+        name: "",
+        description: "",
+      },
+      roleFormValidate: {
+        // 验证规则
+        name: [
+          { required: true, message: "角色名称不能为空", trigger: "blur" },
+        ],
+      },
+      submitLoading: false, // 提交loading
+      selectList: [], // 已选列表
+      selectCount: 0, // 已选总数
+      columns: [
+        // 表头
+        {
+          type: "selection",
+          width: 60,
+          align: "center",
+        },
+        {
+          title: "角色名称",
+          key: "name",
+          minWidth: 150,
+        },
+        {
+          title: "备注",
+          key: "description",
+          minWidth: 150,
+          tooltip: true,
+        },
+        {
+          title: "创建时间",
+          key: "createTime",
+          width: 170,
+          sortable: true,
+          sortType: "desc",
+        },
+        {
+          title: "更新时间",
+          key: "updateTime",
+          width: 170,
+          sortable: true,
+        },
+        {
+          title: "最后操作人",
+          key: "createBy",
+          width: 150,
+        },
+        {
+          title: "操作",
+          key: "action",
+          align: "center",
+          fixed: "right",
+          width: 230,
+          render: (h, params) => {
+            return h("div", [
+              h(
+                "Button",
+                {
+                  props: {
+                    type: "warning",
+                    size: "small",
+                  },
+                  style: {
+                    marginRight: "5px",
+                  },
+                  on: {
+                    click: () => {
+                      this.editPerm(params.row);
+                    },
+                  },
+                },
+                "菜单权限"
+              ),
+              h(
+                "Button",
+                {
+                  props: {
+                    size: "small",
+                    type: "info",
+                  },
+                  style: {
+                    marginRight: "5px",
+                  },
+                  on: {
+                    click: () => {
+                      this.edit(params.row);
+                    },
+                  },
+                },
+                "编辑"
+              ),
+              h(
+                "Button",
+                {
+                  props: {
+                    type: "error",
+                    size: "small",
+                  },
+                  on: {
+                    click: () => {
+                      this.remove(params.row);
+                    },
+                  },
+                },
+                "删除"
+              ),
+            ]);
+          },
+        },
+      ],
+      data: [], // 角色数据
+      pageNumber: 1, // 页数
+      pageSize: 10, // 每页数量
+      total: 0, // 总数
+      permData: [], // 菜单权限数据
+      editRolePermId: "", // 编辑权限id
+      selectAllFlag: false, // 全选标识
+      depData: [], // 部门数据
+      dataType: 0, // 数据类型
+      editDepartments: [], // 编辑部门
+
+      saveRoleWay: [], //用户保存用户点击的菜单
+    };
+  },
+  methods: {
+    // 初始化数据
+    init() {
+      this.getRoleList();
+      // 获取所有菜单权限树
+      this.getPermList();
+    },
+    // 渲染部门前icon
+    renderContent(h, { root, node, data }) {
+      let icon = "";
+      if (data.level == 0) {
+        icon = "ios-navigate";
+      } else if (data.level == 1) {
+        icon = "md-list-box";
+      } else if (data.level == 2) {
+        icon = "md-list";
+      } else if (data.level == 3) {
+        icon = "md-radio-button-on";
+      } else {
+        icon = "md-radio-button-off";
+      }
+      return h(
+        "span",
+        {
+          style: {
+            display: "inline-block",
+            cursor: "pointer",
+          },
+        },
+        [
+          h("span", [
+            h("Icon", {
+              props: {
+                type: icon,
+                size: "16",
+              },
+              style: {
+                "margin-right": "8px",
+                "margin-bottom": "3px",
+              },
+            }),
+            h("span", data.title),
+            h(
+              "Tag",
+              {
+                props: {
+                  color:
+                    data.isSuper == 1
+                      ? "red"
+                      : data.isSuper == 0
+                      ? "default"
+                      : "default",
+                },
+                style: {
+                  "margin-left": "10px",
+                  display:
+                    data.isSuper == 1 || data.isSuper == 0
+                      ? "inline-block"
+                      : "none",
+                },
+              },
+              data.isSuper == 1
+                ? "操作权限"
+                : data.isSuper == 0
+                ? "查看权限"
+                : ""
+            ),
+          ]),
+        ]
+      );
+    },
+    // 分页 修改页码
+    changePage(v) {
+      this.pageNumber = v;
+      this.getRoleList();
+      this.clearSelectAll();
+    },
+    // 分页 修改页数
+    changePageSize(v) {
+      this.pageNumber = 1;
+      this.pageSize = v;
+      this.getRoleList();
+    },
+    // 变更排序方式
+    changeSort(e) {
+      this.sortColumn = e.key;
+      this.sortType = e.order;
+      if (e.order == "normal") {
+        this.sortType = "";
+      }
+      this.getRoleList();
+    },
+
+    /**
+     * 设置权限
+     */
+    setRole(val) {
+      let enable;
+      val == "onlyView" ? (enable = 0) : (enable = 1);
+      this.saveRoleWay.map((item) => {
+        item.isSuper = enable;
+      });
+    },
+
+    /**
+     * 查询所有角色
+     */
+    getRoleList() {
+      this.loading = true;
+      let params = {
+        pageNumber: this.pageNumber,
+        pageSize: this.pageSize,
+        sort: this.sortColumn,
+        order: this.sort,
+      };
+      getRoleList(params).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
+    },
+
+    /**
+     * 查询菜单
+     */
+    getPermList() {
+      this.treeLoading = true;
+      getAllPermissionList().then((res) => {
+        if (res.success) {
+          this.deleteDisableNode(res.result);
+          this.permData = res.result;
+          this.treeLoading = false;
+        }
+        this.treeLoading = false;
+      });
+    },
+    // 递归标记禁用节点
+    deleteDisableNode(permData) {
+      let that = this;
+      permData.forEach(function (e) {
+        if (e.status == -1) {
+          e.title = "[已禁用] " + e.title;
+          e.disabled = true;
+        }
+        if (e.children && e.children.length > 0) {
+          that.deleteDisableNode(e.children);
+        }
+      });
+    },
+    // 提交
+    submitRole() {
+      this.$refs.roleForm.validate((valid) => {
+        if (valid) {
+          if (this.modalType == 0) {
+            // 添加
+            this.submitLoading = true;
+
+            addRole(this.roleForm).then((res) => {
+              this.submitLoading = false;
+              if (res.success) {
+                this.$Message.success("操作成功");
+                this.getRoleList();
+                this.roleModalVisible = false;
+              }
+            });
+          } else {
+            this.submitLoading = true;
+            this.roleForm.roleId = this.roleForm.id;
+
+            editRole(this.roleForm).then((res) => {
+              this.submitLoading = false;
+              if (res.success) {
+                this.$Message.success("操作成功");
+                this.getRoleList();
+                this.roleModalVisible = false;
+              }
+            });
+          }
+        }
+      });
+    },
+
+    /**
+     * 点击添加按钮
+     */
+    addRole() {
+      this.modalType = 0;
+      this.modalTitle = "添加角色";
+      this.$refs.roleForm.resetFields();
+      delete this.roleForm.id;
+      this.roleModalVisible = true;
+    },
+    // 编辑
+    edit(v) {
+      this.modalType = 1;
+      this.modalTitle = "编辑角色";
+      this.$refs.roleForm.resetFields();
+      // 转换null为""
+      for (let attr in v) {
+        if (v[attr] == null) {
+          v[attr] = "";
+        }
+      }
+      let str = JSON.stringify(v);
+      let roleInfo = JSON.parse(str);
+      this.roleForm = roleInfo;
+      this.roleModalVisible = true;
+    },
+    // 删除
+    remove(v) {
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "您确认要删除角色 " + v.name + " ?",
+        loading: true,
+        onOk: () => {
+          deleteRole(v.id).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("删除成功");
+              this.getRoleList();
+            }
+          });
+        },
+      });
+    },
+    // 清除选中
+    clearSelectAll() {
+      this.$refs.table.selectAll(false);
+    },
+    // 选中回调
+    changeSelect(e) {
+      this.selectList = e;
+      this.selectCount = e.length;
+    },
+    // 批量删除
+    delAll() {
+      if (this.selectCount <= 0) {
+        this.$Message.warning("您还未选择要删除的数据");
+        return;
+      }
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
+        loading: true,
+        onOk: () => {
+          let ids = "";
+          this.selectList.forEach(function (e) {
+            ids += e.id + ",";
+          });
+          ids = ids.substring(0, ids.length - 1);
+          deleteRole(ids).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("删除成功");
+              this.clearSelectAll();
+              this.getRoleList();
+            }
+          });
+        },
+      });
+    },
+
+    // 菜单权限
+    async editPerm(v) {
+
+      /**
+       * 点击菜单权限每次将赋值的isSuper数据给清空掉
+       */
+      this.permData.map((item) => {
+        item.children.length != 0
+          ? item.children.map((child) => {
+            child.children.length != 0
+              ? child.children.map((kid) => {
+                delete kid.isSuper;
+              })
+              : "";
+            delete child.isSuper;
+          })
+          : "";
+        delete item.isSuper;
+      });
+
+      if (this.treeLoading) {
+        this.$Message.warning("菜单权限数据加载中，请稍后点击查看");
+        return;
+      }
+      this.editRolePermId = v.id;
+      this.modalTitle = "分配 " + v.name + " 的菜单权限";
+      // 匹配勾选
+      let rolePerms;
+      // 当前角色的菜单权限
+      let res = await selectRoleMenu(v.id);
+      if (res.result) {
+        rolePerms = res.result;
+        this.rolePermsWay = res.result;
+      }
+      // 递归判断子节点是否可以选中
+      this.checkPermTree(this.permData, rolePerms);
+      this.permModalVisible = true;
+    },
+    // 递归判断子节点
+    checkPermTree(permData, rolePerms) {
+      let that = this;
+
+      permData.forEach((p) => {
+        if (that.hasPerm(p, rolePerms) && p.status != -1) {
+          if (p.children && p.children.length === 0) {
+            this.$set(p, "checked", true);
+          }
+        } else {
+          this.$set(p, "checked", false);
+        }
+        if (p.children && p.children.length > 0) {
+          that.checkPermTree(p.children, rolePerms);
+        }
+      });
+    },
+    // 判断角色拥有的权限节点勾选
+    hasPerm(p, rolePerms) {
+      if (!rolePerms) return false;
+      let flag = false;
+      for (let i = 0; i < rolePerms.length; i++) {
+        if (p.id == rolePerms[i].menuId) {
+          this.$set(p, "isSuper", rolePerms[i].isSuper);
+          flag = true;
+          break;
+        }
+      }
+      if (flag) {
+        return true;
+      }
+      return false;
+    },
+    // 递归全选节点
+    selectedTreeAll(permData, select) {
+      let that = this;
+      permData.forEach(function (e) {
+        e.checked = select;
+        if (e.children && e.children.length > 0) {
+          that.selectedTreeAll(e.children, select);
+        }
+      });
+    },
+    /**分配菜单权限 */
+    submitPermEdit() {
+      this.saveRoleWay = [];
+      this.selectIsSuperModel = true; //打开选择权限
+      let selectedNodes = this.$refs.tree.getCheckedAndIndeterminateNodes();
+      let way = [];
+      selectedNodes.forEach((e) => {
+        console.log(e)
+        let perm = {
+          title: e.title,
+          isSuper: e.isSuper ? e.isSuper = 1 : e.isSuper = 0 || 0,
+          menuId: e.id,
+          roleId: this.editRolePermId,
+        };
+        way.push(perm);
+        this.$set(this,'saveRoleWay',way)
+
+      });
+      console.log(this.saveRoleWay)
+    },
+
+    /**保存权限 */
+    saveRole() {
+      this.superModelLoading = true;
+      saveRoleMenu(this.editRolePermId, this.saveRoleWay).then((res) => {
+        this.superModelLoading = false;
+        if (res.success) {
+          this.$Message.success("操作成功");
+          // 标记重新获取菜单数据
+          this.$store.commit("setAdded", false);
+          util.initRouter(this);
+          this.getRoleList();
+          this.permModalVisible = false;
+        }
+      });
+    },
+    // 加载数据
+    loadData(item, callback) {
+      loadDepartment(item.id, { openDataFilter: false }).then((res) => {
+        if (res.success) {
+          res.result.forEach(function (e) {
+            e.checked = false;
+            if (e.isParent) {
+              e.loading = false;
+              e.children = [];
+            }
+            if (e.status == -1) {
+              e.title = "[已禁用] " + e.title;
+              e.disabled = true;
+            }
+          });
+          callback(res.result);
+        }
+      });
+    },
+    // 判断展开子节点
+    expandCheckDep(v) {
+      this.checkDepTree(v.children, this.editDepartments);
+    },
+    // 判断子节点
+    checkDepTree(depData, roleDepIds) {
+      let that = this;
+      depData.forEach(function (p) {
+        if (that.hasDepPerm(p, roleDepIds)) {
+          p.checked = true;
+        } else {
+          p.checked = false;
+        }
+      });
+    },
+    // 树结构展开层级
+    changeOpen(v) {
+      if (v == "0") {
+        this.permData.forEach((e) => {
+          e.expand = true;
+          if (e.children && e.children.length > 0) {
+            e.children.forEach((c) => {
+              c.expand = true;
+              if (c.children && c.children.length > 0) {
+                c.children.forEach(function (b) {
+                  b.expand = true;
+                });
+              }
+            });
+          }
+        });
+      } else if (v == "1") {
+        this.permData.forEach((e) => {
+          e.expand = false;
+          if (e.children && e.children.length > 0) {
+            e.children.forEach((c) => {
+              c.expand = false;
+              if (c.children && c.children.length > 0) {
+                c.children.forEach(function (b) {
+                  b.expand = false;
+                });
+              }
+            });
+          }
+        });
+      } else if (v == "2") {
+        this.permData.forEach((e) => {
+          e.expand = true;
+          if (e.children && e.children.length > 0) {
+            e.children.forEach((c) => {
+              c.expand = false;
+              if (c.children && c.children.length > 0) {
+                c.children.forEach(function (b) {
+                  b.expand = false;
+                });
+              }
+            });
+          }
+        });
+      } else if (v == "3") {
+        this.permData.forEach((e) => {
+          e.expand = true;
+          if (e.children && e.children.length > 0) {
+            e.children.forEach((c) => {
+              c.expand = true;
+              if (c.children && c.children.length > 0) {
+                c.children.forEach(function (b) {
+                  b.expand = false;
+                });
+              }
+            });
+          }
+        });
+      }
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.role-list {
+  height: 500px;
+  overflow-y: auto;
+  display: flex;
+  flex-wrap: wrap;
+}
+.role-item {
+  width: 50%;
+  display: flex;
+  padding: 20px 0;
+  align-items: center;
+  > .title {
+    flex: 2;
+    text-align: right;
+  }
+  > .content {
+    flex: 10;
+  }
+}
+.btns {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.btn-item {
+  margin-right: 20px;
+}
+.permModal {
+  .ivu-modal-body {
+    max-height: 560px;
+    overflow: auto;
+  }
+}
+
+.depModal {
+  .ivu-modal-body {
+    max-height: 500px;
+    overflow: auto;
+  }
+}
+.tips {
+  font-size: 12px;
+  color: #999;
+  margin-left: 8px;
+}
+.title {
+  font-weight: bold;
+  margin-right: 20px;
+}
+</style>