大更新

src/router/ChildrenRouters.js

@@ -412,6 +412,46 @@ const childrenRouters = [
       permission: 'farmOne',
       parentName: '系统管理'
     }
+  },
+  {
+    path: '/appMenu',
+    name: 'AppMenu',
+    component: () => import('../views/SystemAdmin/AppMenu.vue'),
+    meta: {
+      title: 'app端菜单',
+      permission: 'appMenu',
+      parentName: '系统管理'
+    }
+  },
+  {
+    path: '/authApp',
+    name: 'AuthApp',
+    component: () => import('../views/SystemAdmin/AuthApp.vue'),
+    meta: {
+      title: 'app角色分配',
+      permission: 'authApp',
+      parentName: '系统管理'
+    }
+  },
+  {
+    path: '/screenMenu',
+    name: 'ScreenMenu',
+    component: () => import('../views/SystemAdmin/ScreenMenu.vue'),
+    meta: {
+      title: '大屏菜单',
+      permission: 'screenMenu',
+      parentName: '系统管理'
+    }
+  },
+  {
+    path: '/screenAuth',
+    name: 'ScreenAuth',
+    component: () => import('../views/SystemAdmin/ScreenAuth.vue'),
+    meta: {
+      title: '大屏角色分配',
+      permission: 'screenAuth',
+      parentName: '系统管理'
+    }
   }
 ]
 

src/utils/api.js

@@ -183,15 +183,28 @@ export function getUserList(data) {
 // 用户添加
 export function addUser(data) {
   return axios({
-    url: '/admin/accountMultilevel/add',
+    // url: '/admin/accountMultilevel/add',
+    url: '/admin/accountMultilevel/addApp',
     method: 'post',
     data: data
   })
 }
 
+
 // 用户编辑
 export function editUser(data) {
   return axios({
+    // url: '/admin/accountMultilevel/update',
+    url: '/admin/accountMultilevel/updateApp',
+    method: 'post',
+    data: data
+  })
+}
+
+// 分配牧场
+export function editUserFarm(data) {
+  return axios({
+    // url: '/admin/accountMultilevel/update',
     url: '/admin/accountMultilevel/update',
     method: 'post',
     data: data
@@ -715,3 +728,229 @@ export function baseVideoEdit(data) {
   })
 }
 
+// 获取app菜单用户列表
+export function getUserMenuApp(data) {
+  return axios({
+    url: '/admin/app/auth/getMyMenu',
+    method: 'post',
+    params: data
+  })
+}
+
+
+// 菜单添加
+export function addMenuApp(data) {
+  return axios({
+    url: '/admin/app/menu/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// app菜单编辑
+export function editMenuApp(data) {
+  return axios({
+    url: '/admin/app/menu/edit',
+    method: 'post',
+    data: data
+  })
+}
+
+// app菜单删除
+export function delMenuApp(data) {
+  return axios({
+    url: '/admin/app/menu/remove',
+    method: 'post',
+    params: data
+  })
+}
+
+// 权限列表
+export function getAuthApp(data) {
+  return axios({
+    url: '/admin/app/group/list',
+    method: 'post',
+    data: data
+  })
+}
+
+
+// app权限列表删除
+export function delAuthApp(data) {
+  return axios({
+    url: '/admin/app/group/remove',
+    method: 'post',
+    params: data
+  })
+}
+
+// app新增权限组
+export function addAuthApp(data) {
+  return axios({
+    url: '/admin/app/group/add',
+    method: 'post',
+    data: data
+  })
+}
+// app编辑权限组
+export function editAuthApp(data) {
+  return axios({
+    url: '/admin/app/group/edit',
+    method: 'post',
+    data: data
+  })
+}
+
+// app权限分配列表(上次保存的菜单)
+export function getMenuByGroupApp(data) {
+  return axios({
+    url: '/admin/app/auth/getMenuByGroup',
+    method: 'get',
+    params: data
+  })
+}
+
+// app权限分配保存
+export function saveGroupMenuApp(data) {
+  return axios({
+    url: '/admin/app/auth/saveGroupMenu',
+    method: 'post',
+    data: data
+  })
+}
+
+
+// 用户分配(上次保存的用户id)
+export function getAcountByGroupApp(data) {
+  return axios({
+    url: '/admin/app/auth/getAcountByGroup',
+    method: 'get',
+    params: data
+  })
+}
+
+
+// app用户分配保存
+export function saveAccountGroupApp(data) {
+  return axios({
+    url: '/admin/app/auth/saveAccountGroup',
+    method: 'post',
+    data: data
+  })
+}
+
+
+
+// 获取大屏菜单用户列表
+export function getUserMenuScreen(data) {
+  return axios({
+    url: '/admin/screen/auth/getMyMenu',
+    method: 'post',
+    params: data
+  })
+}
+
+
+// 大屏菜单添加
+export function addMenuScreen(data) {
+  return axios({
+    url: '/admin/screen/menu/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 大屏菜单编辑
+export function editMenuScreen(data) {
+  return axios({
+    url: '/admin/screen/menu/edit',
+    method: 'post',
+    data: data
+  })
+}
+
+// 大屏菜单删除
+export function delMenuScreen(data) {
+  return axios({
+    url: '/admin/screen/menu/remove',
+    method: 'post',
+    params: data
+  })
+}
+
+// 大屏权限列表
+export function getAuthScreen(data) {
+  return axios({
+    url: '/admin/screen/group/list',
+    method: 'post',
+    data: data
+  })
+}
+
+
+// 大屏权限列表删除
+export function delAuthScreen(data) {
+  return axios({
+    url: '/admin/screen/group/remove',
+    method: 'post',
+    params: data
+  })
+}
+
+// 大屏新增权限组
+export function addAuthScreen(data) {
+  return axios({
+    url: '/admin/screen/group/add',
+    method: 'post',
+    data: data
+  })
+}
+// 大屏编辑权限组
+export function editAuthScreen(data) {
+  return axios({
+    url: '/admin/screen/group/edit',
+    method: 'post',
+    data: data
+  })
+}
+
+// 大屏权限分配列表(上次保存的菜单)
+export function getMenuByGroupScreen(data) {
+  return axios({
+    url: '/admin/screen/auth/getMenuByGroup',
+    method: 'get',
+    params: data
+  })
+}
+
+// 大屏权限分配保存
+export function saveGroupMenuScreen(data) {
+  return axios({
+    url: '/admin/screen/auth/saveGroupMenu',
+    method: 'post',
+    data: data
+  })
+}
+
+
+// 大屏用户分配(上次保存的用户id)
+export function getAcountByGroupScreen(data) {
+  return axios({
+    url: '/admin/screen/auth/getAcountByGroup',
+    method: 'get',
+    params: data
+  })
+}
+
+
+// 大屏用户分配保存
+export function saveAccountGroupScreen(data) {
+  return axios({
+    url: '/admin/screen/auth/saveAccountGroup',
+    method: 'post',
+    data: data
+  })
+}
+
+
+

src/views/Login/Login.vue

@@ -21,20 +21,20 @@
           <i class="pwd" slot="prefix"></i>
         </el-input>
         <div style="height: 20px"></div>
-        <el-row :gutter="20">
-          <el-col :span="15">
-            <el-input
-                style="height: 50px"
-                placeholder="请输入验证码"
-                v-model="code"
-                size="large">
-              <i class="pwd" slot="prefix"></i>
-            </el-input>
-          </el-col>
-          <el-col :span="9">
-            <img id="kaptchaImage" :src=" ip + '/admin/my/send'" @click="refset" alt="">
-          </el-col>
-        </el-row>
+<!--        <el-row :gutter="20">-->
+<!--          <el-col :span="15">-->
+<!--            <el-input-->
+<!--                style="height: 50px"-->
+<!--                placeholder="请输入验证码"-->
+<!--                v-model="code"-->
+<!--                size="large">-->
+<!--              <i class="pwd" slot="prefix"></i>-->
+<!--            </el-input>-->
+<!--          </el-col>-->
+<!--          <el-col :span="9">-->
+<!--            <img id="kaptchaImage" :src=" ip + '/admin/my/send'" @click="refset" alt="">-->
+<!--          </el-col>-->
+<!--        </el-row>-->
         <div style="height: 20px"></div>
         <el-button @click="onSubmit" style="width: 100%; height: 50px; background-color: #1ABC9C; color: #fff;" >登录</el-button>
       </div>

src/views/SystemAdmin/AppMenu.vue

@@ -0,0 +1,257 @@
+<template>
+  <div style="padding: 20px">
+    <div style="margin-bottom: 10px">
+      <el-button type="primary"   @click="addMenu">添加app菜单</el-button>
+    </div>
+    <div>
+      <el-table
+        :data="tableData"
+        border
+        row-key="id"
+        :height="800 + 'px'"
+        :tree-props="{children: 'children'}"
+        default-expand-all>
+        <el-table-column prop="title" label="菜单名称"></el-table-column>
+        <el-table-column
+          prop="weight"
+          label="菜单层级"
+          :filters="[{ text: '菜单', value: 0 }, { text: '按钮', value: 1 }]"
+          :filter-method="filterTag">
+          <template slot-scope="scope">
+            <el-tag
+              :type="scope.row.weight === 0 ? 'primary' : 'success'"
+              disable-transitions>{{scope.row.weight === 0 ? '菜单' : '按钮'}}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="url" label="菜单路由"></el-table-column>
+        <!--          <el-table-column prop="remark" label="备注"></el-table-column>-->
+        <el-table-column
+          label="操作"
+          fixed="right">
+          <template slot-scope="scope">
+            <el-button size="mini" type="info" v-if="hasPerm('menu:edit')" @click="setEdit(scope.row)" style="margin-right: 10px">编辑</el-button>
+            <!--              <el-button size="mini" type="primary" style="margin-right: 10px" @click="addChildren(scope.row, scope.$index)">添加子菜单</el-button>-->
+            <el-popconfirm
+              :title="scope.row.parentId === 0 ? '这是父菜单，删除后，子菜单将不复存在！确定要删除这个菜单吗' : '确定要删除这个菜单吗？'"
+              @confirm="del(scope.row)"
+            >
+              <el-button size="mini" slot="reference" v-if="hasPerm('menu:del')" type="danger">删除</el-button>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <a-modal
+      :title="showType ? '编辑app菜单' : '新增app菜单'"
+      :width="600"
+      :visible="dialogFormVisible"
+      @ok="add('ruleForm')"
+      @cancel="reset"
+      :destroyOnClose="true"
+    >
+      <el-form :model="form" :rules="rules"  ref="ruleForm">
+        <el-form-item  prop="weight" size="mini" label="菜单层级:" :label-width="formLabelWidth">
+          <el-radio-group v-model="form.weight">
+            <el-radio :label="0">菜单</el-radio>
+            <el-radio :label="1">按钮</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item  size="mini" label="菜单名称" :label-width="formLabelWidth" prop="title">
+          <el-input v-model="form.title" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item size="mini" label="父级菜单" :label-width="formLabelWidth">
+          <a-tree-select
+            v-model="form.parentId"
+            style="width: 100%"
+            :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
+            :treeData="menuTreeData"
+            placeholder="请选择父级菜单"
+            treeDefaultExpandAll
+          >
+            <span slot="title" slot-scope="{ id }">{{ id }}
+            </span>
+          </a-tree-select>
+        </el-form-item>
+        <el-form-item  size="mini" v-if="form.weight === 0" label="菜单地址" :label-width="formLabelWidth">
+          <el-input v-model="form.url" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item size="mini" v-else label="权限标识" :label-width="formLabelWidth" prop="permission">
+          <el-input v-model="form.permission" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item size="mini" label="排序" :label-width="formLabelWidth">
+          <el-input v-model="form.sort" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { TreeSelect } from 'ant-design-vue'
+import {  addMenuApp, editMenuApp, delMenuApp, getUserMenuApp } from '../../utils/api'
+export default {
+  name: "AppMenu",
+  components: {
+    // AModal: Modal,
+    // AForm: Form,
+    ATreeSelect: TreeSelect
+  },
+  data() {
+    return {
+      tableData: [],
+      showType: false,
+      dialogFormVisible: false,
+      form: {
+        title: '',
+        parentId: '',
+        url: '',
+        id: '',
+        sort: '',
+        weight: 0,
+        permission: '',
+      },
+      formLabelWidth: '90px',
+      rules: {
+        title: [
+          { required: true, message: '请输入菜单名称', trigger: 'blur' },
+        ],
+        weight: [
+          { required: true, message: '请选择菜单层级', trigger: 'change' }
+        ],
+        menu: [
+          { required: true, message: '请选择父级菜单', trigger: 'change' }
+        ],
+        permission: [
+          { required: true, message: '请输入权限标识', trigger: 'blur' }
+        ]
+      },
+      menuTreeData: [],
+    }
+  },
+  methods: {
+    // 拿到parentId
+    getParentId(val) {
+      this.form.parentId = val;
+    },
+    // 过滤
+    filterTag(value, row) {
+      return row.weight === value;
+    },
+    add(formName) {
+      this.$refs[formName].validate((valid) => {
+        if(valid) {
+          if(this.showType) {
+            this.setUpdate();
+          } else {
+            let params = {
+              parentId: this.form.parentId,
+              title: this.form.title,
+              url: this.form.url,
+              sort: this.form.sort,
+              weight: this.form.weight,
+              permission: this.form.permission,
+            }
+            addMenuApp(params)
+              .then(res => {
+                if(res.code === 10000) {
+                  this.init();
+                  this.reset();
+                  this.$message.success(res.message);
+                }
+                this.dialogFormVisible = false;
+              })
+          }
+        } else {
+          return false;
+        }
+      })
+      this.dialogFormVisible = false;
+    },
+    setEdit(data) {
+      this.showType = true;
+      this.dialogFormVisible = true;
+      this.form.id = data.id;
+      this.form.title = data.title;
+      this.form.url = data.url;
+      this.form.parentId = data.parentId;
+      this.form.sort = data.sort;
+      this.form.permission = data.permission;
+      this.form.weight = data.weight;
+    },
+    addMenu() {
+      this.dialogFormVisible = true;
+    },
+    del(data) {
+      delMenuApp({menuId: data.id})
+        .then(res => {
+          if(res.code === 10000) {
+            this.init();
+            this.$message.success(res.message);
+          }
+        })
+    },
+    setUpdate() {
+      let params = {
+        id: this.form.id,
+        url: this.form.url,
+        title: this.form.title,
+        parentId: this.form.parentId,
+        sort: this.form.sort,
+        permission: this.form.permission,
+        weight: this.form.weight,
+      };
+      editMenuApp(params)
+        .then(res => {
+          if(res.code === 10000) {
+            this.init();
+            this.reset();
+            this.$message.success(res.message);
+          }
+          this.dialogFormVisible = false;
+        })
+    },
+    // 重置
+    reset() {
+      this.form.title = '';
+      this.form.parentId = '';
+      this.form.url = '';
+      this.form.id = '';
+      this.form.sort = '';
+      this.form.weight = 0;
+      this.form.permission = '';
+      this.showType = false;
+      this.dialogFormVisible = false
+    },
+    init() {
+
+      let params = {
+        userId: localStorage.getItem('UserId')
+      }
+      getUserMenuApp(params).then(res => {
+        if(res.code === 10000) {
+          this.tableData = res.data;
+          this.$forceUpdate();
+          this.menuTreeData = [
+            {
+              id: -1,
+              parentId: 0,
+              title: '顶级',
+              value: 0,
+              pid: 0,
+              weight: 0,
+              children: res.data,
+            }
+          ]
+        }
+      })
+    }
+  },
+  mounted() {
+    this.init();
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/SystemAdmin/AuthApp.vue

@@ -0,0 +1,499 @@
+<template>
+  <div class="box">
+    <div class="box-content">
+      <!-- input + button* 2 -->
+      <div style="margin-bottom: 10px">
+        <el-form :inline="true" label-width="80px">
+          <el-form-item>
+            <el-input v-model="keyword" placeholder="请输入职位名称"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="search" type="success">搜索</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+            >新增app职位</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+      <div>
+        <el-table :data="tableData" border :height="720 + 'px'">
+          <el-table-column prop="id" label="职位id"> </el-table-column>
+          <el-table-column prop="groupName" label="职位名称"> </el-table-column>
+          <el-table-column prop="remark" label="备注"> </el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="primary"
+                v-if="hasPerm('auth:edit')"
+                @click="handleEdit(scope.row)"
+              >编辑</el-button
+              >
+              <el-button
+                size="mini"
+                type="warning"
+                v-if="hasPerm('auth:Limits')"
+                @click="handleLimits(scope.row)"
+              >权限分配</el-button
+              >
+              <el-button
+                size="mini"
+                type="danger"
+                v-if="hasPerm('auth:User')"
+                @click="handleUser(scope.row)"
+              >用户分配</el-button
+              >
+              <el-button
+                size="mini"
+                type="danger"
+                v-if="hasPerm('auth:del')"
+                @click="del(scope.row)"
+              >删除</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+        <table-footer
+          :totals="total"
+          :size="size"
+          @sizeChange="sizeChange"
+          @pageChange="pageChange"
+        ></table-footer>
+      </div>
+    </div>
+    <!--    // 新增-->
+    <el-dialog
+      :title="showType ? '编辑职位' : '新增职位'"
+      :visible.sync="dialogVisible"
+      width="30%"
+    >
+      <div>
+        <el-form ref="form" :model="form" label-width="100px">
+          <el-form-item label="职位名称">
+            <el-input v-model="form.groupName"></el-input>
+          </el-form-item>
+          <el-form-item label="备注">
+            <el-input v-model="form.remark"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="reset">取 消</el-button>
+        <el-button v-if="showType" type="primary" @click="setUpdate"
+        >更 新</el-button
+        >
+        <el-button v-else type="primary" @click="onSubmit">新 增</el-button>
+      </span>
+    </el-dialog>
+    <!-- 权限分配   -->
+    <a-modal
+      title="职位分配"
+      :width="600"
+      :visible="dialogLimits"
+      @ok="limitSave"
+      ok-text="确认"
+      cancel-text="取消"
+      @cancel="dialogLimits = false"
+      :destroyOnClose="true"
+    >
+      <a-tree
+        v-model="checkedKeys"
+        multiple
+        checkable
+        :auto-expand-parent="autoExpandParent"
+        :expanded-keys="expandedKeys"
+        :tree-data="menuTreeData"
+        :selected-keys="selectedKeys"
+        :replaceFields="replaceFields"
+        @expand="onExpand"
+        @check="onCheck"
+      />
+    </a-modal>
+    <el-dialog title="用户分配" :visible.sync="dialogUsers" width="50%">
+      <div>
+        <el-table
+          :data="userList"
+          ref="multipleTable"
+          tooltip-effect="dark"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column prop="id" label="用户ID"> </el-table-column>
+          <el-table-column prop="account" label="用户姓名"> </el-table-column>
+        </el-table>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogUsers = false">取 消</el-button>
+        <el-button type="primary" @click="userSave">保存</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { Tree } from "ant-design-vue";
+import TableFooter from "../../components/TableFooter";
+import {
+  getUserMenuApp,
+  getAuthApp,
+  delAuthApp,
+  addAuthApp,
+  editAuthApp,
+  getMenuByGroupApp,
+  saveGroupMenuApp,
+  getAcountByGroupApp,
+  saveAccountGroupApp,
+  getUserList,
+} from "../../utils/api";
+export default {
+  name: "AuthApp",
+  components: {
+    TableFooter,
+    ATree: Tree,
+  },
+  data() {
+    return {
+      tableData: [],
+      showType: false,
+      dialogVisible: false,
+      form: {
+        id: "",
+        groupName: "",
+        remark: "",
+      },
+      dialogLimits: false,
+      // 权限分配list
+      limitList: [],
+      defaultProps: {
+        children: "children",
+        label: "title",
+      },
+      autoExpandParent: true,
+      // 默认选择的参数
+      defaultList: [],
+      expandedKeys: [],
+      checkedKeys: [],
+      replaceFields: {
+        key: "id",
+      },
+      keyword: "",
+      total: 0,
+      size: 20,
+      pageNum: 1,
+      selectId: "",
+      // 用户列表
+      userList: [],
+      dialogUsers: false,
+      userSelect: [],
+      leastChilds: [],
+      commitKeys: [],
+      selectedKeys: [],
+      menuTreeData: [],
+      // 判断是否点击权限的复选框
+      isKey: false,
+    };
+  },
+  methods: {
+    // 搜索
+    search() {
+      this.init();
+    },
+    // 修改size
+    sizeChange(val) {
+      this.size = val;
+      this.init();
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum = val;
+      this.init();
+    },
+    handleEdit(data) {
+      this.showType = true;
+      this.dialogVisible = true;
+      this.form.remark = data.remark;
+      this.form.groupName = data.groupName;
+      this.form.id = data.id;
+    },
+    // 用户分配
+    handleUser(data) {
+      this.dialogUsers = true;
+      this.selectId = data.id;
+      getAcountByGroupApp({ groupId: data.id }).then((res) => {
+        if (res.code === 10006) {
+          this.userSelect = [];
+          this.$nextTick(() => {
+            this.$refs.multipleTable.clearSelection();
+            this.$forceUpdate();
+          });
+        } else {
+          let arr = res.data.split(",");
+          console.log(arr);
+          this.$nextTick(() => {
+            this.$refs.multipleTable.clearSelection();
+            for (let key in this.userList) {
+              for (let i in arr) {
+                if (this.userList[key]["id"] == arr[i]) {
+                  this.$refs.multipleTable.toggleRowSelection(
+                    this.userList[key],
+                    true
+                  );
+                }
+              }
+            }
+          });
+        }
+      });
+    },
+    // 用户分配选择
+    handleSelectionChange(val) {
+      this.userSelect = val;
+    },
+    // 用户分配保存
+    userSave() {
+      let users = [];
+      this.userSelect.forEach((item) => {
+        users.push(item.id);
+      });
+      let str = users.join(",");
+      saveAccountGroupApp({ accountId: str, groupIds: this.selectId }).then(
+        (res) => {
+          if (res.code === 10001) {
+            this.$message.success(res.message);
+          } else {
+            this.userSelect = [];
+            this.selectId = "";
+            this.$message(res.message);
+          }
+        }
+      );
+      this.dialogUsers = false;
+    },
+    // 新增角色
+    onSubmit() {
+      let params = {
+        groupName: this.form.groupName,
+        remark: this.form.remark,
+      };
+      addAuthApp(params).then((res) => {
+        if (res.code === 10000) {
+          this.init();
+          this.$message.success(res.message);
+        } else {
+          this.$message.error(res.message);
+        }
+        this.dialogVisible = false;
+        this.reset();
+      });
+    },
+    // handleCheckChange() {
+    //   // console.log(data, ls, lg)
+    //   this.selectList = [];
+    //   console.log(this.$refs.tree.getCheckedKeys());
+    //   this.selectList = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
+    // },
+    onExpand(expandedKeys) {
+      this.expandedKeys = expandedKeys;
+      this.autoExpandParent = false;
+    },
+
+    onCheck(checkedKeys, info) {
+      this.isKey = true;
+      this.checkedKeys = checkedKeys;
+      this.commitKeys = checkedKeys.concat(info.halfCheckedKeys);
+    },
+    pickCheckedKeys(data) {
+      for (let i = 0; i < data.length; i++) {
+        if (this.leastChilds.includes(data[i])) {
+          this.checkedKeys.push(data[i]);
+        }
+      }
+    },
+    onSelect(selectedKeys) {
+      this.selectedKeys = selectedKeys;
+    },
+    // 权限分配
+    handleLimits(data) {
+      this.dialogLimits = true;
+      this.selectId = data.id;
+      this.defaultList = [];
+      getMenuByGroupApp({ groupId: data.id }).then((res) => {
+        let arr;
+        if (res.code === 10000) {
+          arr = res.data.split(",");
+          this.defaultList = arr.map(Number);
+          this.pickCheckedKeys(this.defaultList);
+          this.selectList = this.defaultList;
+        } else {
+          arr = [];
+          this.defaultList = [];
+          this.selectList = [];
+          this.selectedKeys = [];
+          this.checkedKeys = [];
+        }
+      });
+    },
+    // 权限分配保存
+    limitSave() {
+      // this.selectList = this.$refs.tree.getCheckedKeys();
+      let menuIds;
+      if (this.commitKeys.length > 0) {
+        menuIds = this.commitKeys.join(",");
+      } else {
+        menuIds = "";
+      }
+      saveGroupMenuApp({ groupId: this.selectId, menuIds: menuIds }).then(
+        (res) => {
+          if (res.code === 10001) {
+            this.$message.success(res.message);
+          }
+          this.selectId = "";
+          this.dialogLimits = false;
+          this.selectList = [];
+        }
+      );
+      if (this.isKey) {
+        let menuIds;
+        if (this.commitKeys.length > 0) {
+          menuIds = this.commitKeys.join(",");
+        } else {
+          menuIds = "";
+        }
+        saveGroupMenuApp({ groupId: this.selectId, menuIds: menuIds }).then(
+          (res) => {
+            if (res.code === 10001) {
+              this.$message.success(res.message);
+            }
+            this.selectId = "";
+            this.dialogLimits = false;
+            this.selectList = [];
+          }
+        );
+      } else {
+        this.dialogLimits = false;
+      }
+    },
+    init() {
+      // 后端分页
+      let params = {
+        pageNum: this.pageNum,
+        pageSize: this.size,
+        searchStr: this.keyword,
+      };
+      getAuthApp(params).then((res) => {
+        this.tableData = res.records;
+        this.total = res.total;
+      });
+    },
+    // 重置
+    reset() {
+      this.form.id = "";
+      this.form.groupName = "";
+      this.form.remark = "";
+      this.pageNum = 1;
+      this.keyword = "";
+      this.showType = false;
+      this.dialogVisible = false;
+    },
+    // 更新
+    setUpdate() {
+      let params = {
+        groupName: this.form.groupName,
+        remark: this.form.remark,
+        id: this.form.id,
+      };
+      editAuthApp(params).then((res) => {
+        if (res.code === 10000) {
+          this.init();
+          this.$message.success(res.message);
+        }
+        this.dialogVisible = false;
+        this.reset();
+      });
+    },
+    // 删除
+    del(data) {
+      this.$confirm("此操作将永久删除批量删除, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          delAuthApp({ groupId: data.id }).then((res) => {
+            if (res.code === 10000) {
+              this.init();
+              this.$message.success(res.message);
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    // 菜单列表
+    authInit() {
+      let params = {
+        userId: localStorage.getItem("UserId"),
+      };
+      getUserMenuApp(params).then((res) => {
+        if (res.code === 10000) {
+          this.menuTreeData = res.data;
+          this.getLeastChilds(res.data);
+          this.menuTreeData.forEach((item) => {
+            this.expandedKeys.push(item.id);
+          });
+          this.$forceUpdate();
+          // this.expandedMenuKeys(this.roleEntity)
+        }
+      });
+    },
+    getLeastChilds(data) {
+      for (let i = 0; i < data.length; i++) {
+        this.pushLeastChilds(data[i]);
+      }
+    },
+    pushLeastChilds(e) {
+      if (e.children.length > 0) {
+        this.getLeastChilds(e.children);
+        return;
+      }
+      this.leastChilds.push(e.id);
+    },
+    // 用户列表
+    userInit() {
+      let params = {
+        pageNum: 1,
+        pageSize: 200,
+        searchStr: "",
+      };
+      getUserList(params).then((res) => {
+        if (res.code === 10000) {
+          this.userList = res.data.records;
+        }
+      });
+    },
+  },
+  mounted() {
+    this.init();
+    this.authInit();
+    this.userInit();
+  },
+}
+</script>
+
+<style scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 20px;
+}
+</style>

src/views/SystemAdmin/ScreenAuth.vue

@@ -0,0 +1,499 @@
+<template>
+  <div class="box">
+    <div class="box-content">
+      <!-- input + button* 2 -->
+      <div style="margin-bottom: 10px">
+        <el-form :inline="true" label-width="80px">
+          <el-form-item>
+            <el-input v-model="keyword" placeholder="请输入职位名称"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="search" type="success">搜索</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+            >新增大屏职位</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+      <div>
+        <el-table :data="tableData" border :height="720 + 'px'">
+          <el-table-column prop="id" label="职位id"> </el-table-column>
+          <el-table-column prop="groupName" label="职位名称"> </el-table-column>
+          <el-table-column prop="remark" label="备注"> </el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="primary"
+                v-if="hasPerm('auth:edit')"
+                @click="handleEdit(scope.row)"
+              >编辑</el-button
+              >
+              <el-button
+                size="mini"
+                type="warning"
+                v-if="hasPerm('auth:Limits')"
+                @click="handleLimits(scope.row)"
+              >权限分配</el-button
+              >
+              <el-button
+                size="mini"
+                type="danger"
+                v-if="hasPerm('auth:User')"
+                @click="handleUser(scope.row)"
+              >用户分配</el-button
+              >
+              <el-button
+                size="mini"
+                type="danger"
+                v-if="hasPerm('auth:del')"
+                @click="del(scope.row)"
+              >删除</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+        <table-footer
+          :totals="total"
+          :size="size"
+          @sizeChange="sizeChange"
+          @pageChange="pageChange"
+        ></table-footer>
+      </div>
+    </div>
+    <!--    // 新增-->
+    <el-dialog
+      :title="showType ? '编辑职位' : '新增职位'"
+      :visible.sync="dialogVisible"
+      width="30%"
+    >
+      <div>
+        <el-form ref="form" :model="form" label-width="100px">
+          <el-form-item label="职位名称">
+            <el-input v-model="form.groupName"></el-input>
+          </el-form-item>
+          <el-form-item label="备注">
+            <el-input v-model="form.remark"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="reset">取 消</el-button>
+        <el-button v-if="showType" type="primary" @click="setUpdate"
+        >更 新</el-button
+        >
+        <el-button v-else type="primary" @click="onSubmit">新 增</el-button>
+      </span>
+    </el-dialog>
+    <!-- 权限分配   -->
+    <a-modal
+      title="职位分配"
+      :width="600"
+      :visible="dialogLimits"
+      @ok="limitSave"
+      ok-text="确认"
+      cancel-text="取消"
+      @cancel="dialogLimits = false"
+      :destroyOnClose="true"
+    >
+      <a-tree
+        v-model="checkedKeys"
+        multiple
+        checkable
+        :auto-expand-parent="autoExpandParent"
+        :expanded-keys="expandedKeys"
+        :tree-data="menuTreeData"
+        :selected-keys="selectedKeys"
+        :replaceFields="replaceFields"
+        @expand="onExpand"
+        @check="onCheck"
+      />
+    </a-modal>
+    <el-dialog title="用户分配" :visible.sync="dialogUsers" width="50%">
+      <div>
+        <el-table
+          :data="userList"
+          ref="multipleTable"
+          tooltip-effect="dark"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column prop="id" label="用户ID"> </el-table-column>
+          <el-table-column prop="account" label="用户姓名"> </el-table-column>
+        </el-table>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogUsers = false">取 消</el-button>
+        <el-button type="primary" @click="userSave">保存</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { Tree } from "ant-design-vue";
+import TableFooter from "../../components/TableFooter";
+import {
+  getUserMenuScreen,
+  getAuthScreen,
+  delAuthScreen,
+  addAuthScreen,
+  editAuthScreen,
+  getMenuByGroupScreen,
+  saveGroupMenuScreen,
+  getAcountByGroupScreen,
+  saveAccountGroupScreen,
+  getUserList,
+} from "../../utils/api";
+export default {
+  name: "ScreenAuth",
+  components: {
+    TableFooter,
+    ATree: Tree,
+  },
+  data() {
+    return {
+      tableData: [],
+      showType: false,
+      dialogVisible: false,
+      form: {
+        id: "",
+        groupName: "",
+        remark: "",
+      },
+      dialogLimits: false,
+      // 权限分配list
+      limitList: [],
+      defaultProps: {
+        children: "children",
+        label: "title",
+      },
+      autoExpandParent: true,
+      // 默认选择的参数
+      defaultList: [],
+      expandedKeys: [],
+      checkedKeys: [],
+      replaceFields: {
+        key: "id",
+      },
+      keyword: "",
+      total: 0,
+      size: 20,
+      pageNum: 1,
+      selectId: "",
+      // 用户列表
+      userList: [],
+      dialogUsers: false,
+      userSelect: [],
+      leastChilds: [],
+      commitKeys: [],
+      selectedKeys: [],
+      menuTreeData: [],
+      // 判断是否点击权限的复选框
+      isKey: false,
+    };
+  },
+  methods: {
+    // 搜索
+    search() {
+      this.init();
+    },
+    // 修改size
+    sizeChange(val) {
+      this.size = val;
+      this.init();
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum = val;
+      this.init();
+    },
+    handleEdit(data) {
+      this.showType = true;
+      this.dialogVisible = true;
+      this.form.remark = data.remark;
+      this.form.groupName = data.groupName;
+      this.form.id = data.id;
+    },
+    // 用户分配
+    handleUser(data) {
+      this.dialogUsers = true;
+      this.selectId = data.id;
+      getAcountByGroupScreen({ groupId: data.id }).then((res) => {
+        if (res.code === 10006) {
+          this.userSelect = [];
+          this.$nextTick(() => {
+            this.$refs.multipleTable.clearSelection();
+            this.$forceUpdate();
+          });
+        } else {
+          let arr = res.data.split(",");
+          console.log(arr);
+          this.$nextTick(() => {
+            this.$refs.multipleTable.clearSelection();
+            for (let key in this.userList) {
+              for (let i in arr) {
+                if (this.userList[key]["id"] == arr[i]) {
+                  this.$refs.multipleTable.toggleRowSelection(
+                    this.userList[key],
+                    true
+                  );
+                }
+              }
+            }
+          });
+        }
+      });
+    },
+    // 用户分配选择
+    handleSelectionChange(val) {
+      this.userSelect = val;
+    },
+    // 用户分配保存
+    userSave() {
+      let users = [];
+      this.userSelect.forEach((item) => {
+        users.push(item.id);
+      });
+      let str = users.join(",");
+      saveAccountGroupScreen({ accountId: str, groupIds: this.selectId }).then(
+        (res) => {
+          if (res.code === 10001) {
+            this.$message.success(res.message);
+          } else {
+            this.userSelect = [];
+            this.selectId = "";
+            this.$message(res.message);
+          }
+        }
+      );
+      this.dialogUsers = false;
+    },
+    // 新增角色
+    onSubmit() {
+      let params = {
+        groupName: this.form.groupName,
+        remark: this.form.remark,
+      };
+      addAuthScreen(params).then((res) => {
+        if (res.code === 10000) {
+          this.init();
+          this.$message.success(res.message);
+        } else {
+          this.$message.error(res.message);
+        }
+        this.dialogVisible = false;
+        this.reset();
+      });
+    },
+    // handleCheckChange() {
+    //   // console.log(data, ls, lg)
+    //   this.selectList = [];
+    //   console.log(this.$refs.tree.getCheckedKeys());
+    //   this.selectList = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
+    // },
+    onExpand(expandedKeys) {
+      this.expandedKeys = expandedKeys;
+      this.autoExpandParent = false;
+    },
+
+    onCheck(checkedKeys, info) {
+      this.isKey = true;
+      this.checkedKeys = checkedKeys;
+      this.commitKeys = checkedKeys.concat(info.halfCheckedKeys);
+    },
+    pickCheckedKeys(data) {
+      for (let i = 0; i < data.length; i++) {
+        if (this.leastChilds.includes(data[i])) {
+          this.checkedKeys.push(data[i]);
+        }
+      }
+    },
+    onSelect(selectedKeys) {
+      this.selectedKeys = selectedKeys;
+    },
+    // 权限分配
+    handleLimits(data) {
+      this.dialogLimits = true;
+      this.selectId = data.id;
+      this.defaultList = [];
+      getMenuByGroupScreen({ groupId: data.id }).then((res) => {
+        let arr;
+        if (res.code === 10000) {
+          arr = res.data.split(",");
+          this.defaultList = arr.map(Number);
+          this.pickCheckedKeys(this.defaultList);
+          this.selectList = this.defaultList;
+        } else {
+          arr = [];
+          this.defaultList = [];
+          this.selectList = [];
+          this.selectedKeys = [];
+          this.checkedKeys = [];
+        }
+      });
+    },
+    // 权限分配保存
+    limitSave() {
+      // this.selectList = this.$refs.tree.getCheckedKeys();
+      let menuIds;
+      if (this.commitKeys.length > 0) {
+        menuIds = this.commitKeys.join(",");
+      } else {
+        menuIds = "";
+      }
+      saveGroupMenuScreen({ groupId: this.selectId, menuIds: menuIds }).then(
+        (res) => {
+          if (res.code === 10001) {
+            this.$message.success(res.message);
+          }
+          this.selectId = "";
+          this.dialogLimits = false;
+          this.selectList = [];
+        }
+      );
+      if (this.isKey) {
+        let menuIds;
+        if (this.commitKeys.length > 0) {
+          menuIds = this.commitKeys.join(",");
+        } else {
+          menuIds = "";
+        }
+        saveGroupMenuScreen({ groupId: this.selectId, menuIds: menuIds }).then(
+          (res) => {
+            if (res.code === 10001) {
+              this.$message.success(res.message);
+            }
+            this.selectId = "";
+            this.dialogLimits = false;
+            this.selectList = [];
+          }
+        );
+      } else {
+        this.dialogLimits = false;
+      }
+    },
+    init() {
+      // 后端分页
+      let params = {
+        pageNum: this.pageNum,
+        pageSize: this.size,
+        searchStr: this.keyword,
+      };
+      getAuthScreen(params).then((res) => {
+        this.tableData = res.records;
+        this.total = res.total;
+      });
+    },
+    // 重置
+    reset() {
+      this.form.id = "";
+      this.form.groupName = "";
+      this.form.remark = "";
+      this.pageNum = 1;
+      this.keyword = "";
+      this.showType = false;
+      this.dialogVisible = false;
+    },
+    // 更新
+    setUpdate() {
+      let params = {
+        groupName: this.form.groupName,
+        remark: this.form.remark,
+        id: this.form.id,
+      };
+      editAuthScreen(params).then((res) => {
+        if (res.code === 10000) {
+          this.init();
+          this.$message.success(res.message);
+        }
+        this.dialogVisible = false;
+        this.reset();
+      });
+    },
+    // 删除
+    del(data) {
+      this.$confirm("此操作将永久删除批量删除, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          delAuthScreen({ groupId: data.id }).then((res) => {
+            if (res.code === 10000) {
+              this.init();
+              this.$message.success(res.message);
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    // 菜单列表
+    authInit() {
+      let params = {
+        userId: localStorage.getItem("UserId"),
+      };
+      getUserMenuScreen(params).then((res) => {
+        if (res.code === 10000) {
+          this.menuTreeData = res.data;
+          this.getLeastChilds(res.data);
+          this.menuTreeData.forEach((item) => {
+            this.expandedKeys.push(item.id);
+          });
+          this.$forceUpdate();
+          // this.expandedMenuKeys(this.roleEntity)
+        }
+      });
+    },
+    getLeastChilds(data) {
+      for (let i = 0; i < data.length; i++) {
+        this.pushLeastChilds(data[i]);
+      }
+    },
+    pushLeastChilds(e) {
+      if (e.children.length > 0) {
+        this.getLeastChilds(e.children);
+        return;
+      }
+      this.leastChilds.push(e.id);
+    },
+    // 用户列表
+    userInit() {
+      let params = {
+        pageNum: 1,
+        pageSize: 200,
+        searchStr: "",
+      };
+      getUserList(params).then((res) => {
+        if (res.code === 10000) {
+          this.userList = res.data.records;
+        }
+      });
+    },
+  },
+  mounted() {
+    this.init();
+    this.authInit();
+    this.userInit();
+  },
+}
+</script>
+
+<style scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 20px;
+}
+</style>

src/views/SystemAdmin/ScreenMenu.vue

@@ -0,0 +1,258 @@
+<template>
+  <div style="padding: 20px">
+    <div style="margin-bottom: 10px">
+      <el-button type="primary"   @click="addMenu">添加大屏菜单</el-button>
+    </div>
+    <div>
+      <el-table
+        :data="tableData"
+        border
+        row-key="id"
+        :height="800 + 'px'"
+        :tree-props="{children: 'children'}"
+        default-expand-all>
+        <el-table-column prop="title" label="菜单名称"></el-table-column>
+        <el-table-column
+          prop="weight"
+          label="菜单层级"
+          :filters="[{ text: '菜单', value: 0 }, { text: '按钮', value: 1 }]"
+          :filter-method="filterTag">
+          <template slot-scope="scope">
+            <el-tag
+              :type="scope.row.weight === 0 ? 'primary' : 'success'"
+              disable-transitions>{{scope.row.weight === 0 ? '菜单' : '按钮'}}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="url" label="菜单路由"></el-table-column>
+        <!--          <el-table-column prop="remark" label="备注"></el-table-column>-->
+        <el-table-column
+          label="操作"
+          fixed="right">
+          <template slot-scope="scope">
+            <el-button size="mini" type="info" v-if="hasPerm('menu:edit')" @click="setEdit(scope.row)" style="margin-right: 10px">编辑</el-button>
+            <!--              <el-button size="mini" type="primary" style="margin-right: 10px" @click="addChildren(scope.row, scope.$index)">添加子菜单</el-button>-->
+            <el-popconfirm
+              :title="scope.row.parentId === 0 ? '这是父菜单，删除后，子菜单将不复存在！确定要删除这个菜单吗' : '确定要删除这个菜单吗？'"
+              @confirm="del(scope.row)"
+            >
+              <el-button size="mini" slot="reference" v-if="hasPerm('menu:del')" type="danger">删除</el-button>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <a-modal
+      :title="showType ? '编辑app菜单' : '新增app菜单'"
+      :width="600"
+      :visible="dialogFormVisible"
+      @ok="add('ruleForm')"
+      @cancel="reset"
+      :destroyOnClose="true"
+    >
+      <el-form :model="form" :rules="rules"  ref="ruleForm">
+        <el-form-item  prop="weight" size="mini" label="菜单层级:" :label-width="formLabelWidth">
+          <el-radio-group v-model="form.weight">
+            <el-radio :label="0">菜单</el-radio>
+            <el-radio :label="1">按钮</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item  size="mini" label="菜单名称" :label-width="formLabelWidth" prop="title">
+          <el-input v-model="form.title" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item size="mini" label="父级菜单" :label-width="formLabelWidth">
+          <a-tree-select
+            v-model="form.parentId"
+            style="width: 100%"
+            :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
+            :treeData="menuTreeData"
+            placeholder="请选择父级菜单"
+            treeDefaultExpandAll
+          >
+            <span slot="title" slot-scope="{ id }">{{ id }}
+            </span>
+          </a-tree-select>
+        </el-form-item>
+        <el-form-item  size="mini" v-if="form.weight === 0" label="菜单地址" :label-width="formLabelWidth">
+          <el-input v-model="form.url" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item size="mini" v-else label="权限标识" :label-width="formLabelWidth" prop="permission">
+          <el-input v-model="form.permission" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item size="mini" label="排序" :label-width="formLabelWidth">
+          <el-input v-model="form.sort" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { TreeSelect } from 'ant-design-vue'
+import {  addMenuScreen, editMenuScreen, delMenuScreen, getUserMenuScreen } from '../../utils/api'
+export default {
+  name: "ScreenMenu",
+  components: {
+    // AModal: Modal,
+    // AForm: Form,
+    ATreeSelect: TreeSelect
+  },
+  data() {
+    return {
+      tableData: [],
+      showType: false,
+      dialogFormVisible: false,
+      form: {
+        title: '',
+        parentId: '',
+        url: '',
+        id: '',
+        sort: '',
+        weight: 0,
+        permission: '',
+      },
+      formLabelWidth: '90px',
+      rules: {
+        title: [
+          { required: true, message: '请输入菜单名称', trigger: 'blur' },
+        ],
+        weight: [
+          { required: true, message: '请选择菜单层级', trigger: 'change' }
+        ],
+        menu: [
+          { required: true, message: '请选择父级菜单', trigger: 'change' }
+        ],
+        permission: [
+          { required: true, message: '请输入权限标识', trigger: 'blur' }
+        ]
+      },
+      menuTreeData: [],
+    }
+  },
+  methods: {
+    // 拿到parentId
+    getParentId(val) {
+      this.form.parentId = val;
+    },
+    // 过滤
+    filterTag(value, row) {
+      return row.weight === value;
+    },
+    add(formName) {
+      this.$refs[formName].validate((valid) => {
+        if(valid) {
+          if(this.showType) {
+            this.setUpdate();
+          } else {
+            let params = {
+              parentId: this.form.parentId,
+              title: this.form.title,
+              url: this.form.url,
+              sort: this.form.sort,
+              weight: this.form.weight,
+              permission: this.form.permission,
+            }
+            addMenuScreen(params)
+              .then(res => {
+                if(res.code === 10000) {
+                  this.init();
+                  this.reset();
+                  this.$message.success(res.message);
+                }
+                this.dialogFormVisible = false;
+              })
+          }
+        } else {
+          return false;
+        }
+      })
+      this.dialogFormVisible = false;
+    },
+    setEdit(data) {
+      this.showType = true;
+      this.dialogFormVisible = true;
+      this.form.id = data.id;
+      this.form.title = data.title;
+      this.form.url = data.url;
+      this.form.parentId = data.parentId;
+      this.form.sort = data.sort;
+      this.form.permission = data.permission;
+      this.form.weight = data.weight;
+    },
+    addMenu() {
+      this.dialogFormVisible = true;
+    },
+    del(data) {
+      delMenuScreen({menuId: data.id})
+        .then(res => {
+          if(res.code === 10000) {
+            this.init();
+            this.$message.success(res.message);
+          }
+        })
+    },
+    setUpdate() {
+      let params = {
+        id: this.form.id,
+        url: this.form.url,
+        title: this.form.title,
+        parentId: this.form.parentId,
+        sort: this.form.sort,
+        permission: this.form.permission,
+        weight: this.form.weight,
+      };
+      editMenuScreen(params)
+        .then(res => {
+          if(res.code === 10000) {
+            this.init();
+            this.reset();
+            this.$message.success(res.message);
+          }
+          this.dialogFormVisible = false;
+        })
+    },
+    // 重置
+    reset() {
+      this.form.title = '';
+      this.form.parentId = '';
+      this.form.url = '';
+      this.form.id = '';
+      this.form.sort = '';
+      this.form.weight = 0;
+      this.form.permission = '';
+      this.showType = false;
+      this.dialogFormVisible = false
+    },
+    init() {
+
+      let params = {
+        userId: localStorage.getItem('UserId')
+      }
+      getUserMenuScreen(params).then(res => {
+        if(res.code === 10000) {
+          this.tableData = res.data;
+          this.$forceUpdate();
+          this.menuTreeData = [
+            {
+              id: -1,
+              parentId: 0,
+              title: '顶级',
+              value: 0,
+              pid: 0,
+              weight: 0,
+              children: res.data,
+            }
+          ]
+        }
+      })
+    }
+  },
+  mounted() {
+    this.init();
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+

src/views/SystemAdmin/UserAdmin.vue

@@ -110,7 +110,7 @@
         :visible.sync="dialogVisible"
         width="50%">
       <div>
-        <el-form ref="form" :model="forms" label-width="80px" :rules="rules">
+        <el-form ref="form" :model="forms" label-width="120px" :rules="rules">
           <el-form-item label="登录名" prop="account">
             <el-input v-model="forms.account" :disabled="showType" placeholder=""></el-input>
           </el-form-item>
@@ -120,6 +120,21 @@
           <el-form-item label="用户姓名" prop="userName">
             <el-input  v-model="forms.userName" ></el-input>
           </el-form-item>
+          <el-form-item label="pc后台权限角色" prop="pcGroupId">
+            <el-select v-model="forms.pcGroupId" multiple>
+              <el-option v-for="item in authList" :key="item.id" :value="item.id" :label="item.groupName"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="app权限角色" prop="appGroupId">
+            <el-select v-model="forms.appGroupId" multiple>
+              <el-option v-for="item in authAppList" :key="item.id" :value="item.id" :label="item.groupName"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="大屏权限角色" prop="screenGroupId">
+            <el-select v-model="forms.screenGroupId" multiple>
+              <el-option v-for="item in screenList" :key="item.id" :value="item.id" :label="item.groupName"></el-option>
+            </el-select>
+          </el-form-item>
 <!--          <el-form-item label="性别">-->
 <!--            <el-radio-group v-model="forms.male">-->
 <!--              <el-radio :label="0">女</el-radio>-->
@@ -183,7 +198,7 @@
 
 <script>
 import TableFooter from '../../components/TableFooter';
-import {getUserList, addUser, editUser, isUser, delUser,} from '../../utils/api';
+import {getUserList, addUser, editUser, isUser, delUser, getAuthApp, getAuth, getAuthScreen, editUserFarm} from '../../utils/api';
 import { mapState, mapActions } from 'vuex';
 export default {
   name: "UserAdmin",
@@ -212,19 +227,29 @@ export default {
         job: '',
         birthday: '',
         address: '',
-        id: ''
+        id: '',
+        pcGroupId: [],
+        appGroupId: [],
+        screenGroupId: []
       },
       selectList: '',
       rules: {
         account: [ { required: true, message: '请输入登录名', trigger: 'blur' },],
         password: [ { required: true, message: '请输入密码', trigger: 'blur' },],
-        userName: [ { required: true, message: '请输入用户姓名', trigger: 'blur' },]
+        userName: [ { required: true, message: '请输入用户姓名', trigger: 'blur' },],
+        pcGroupId:  [{ required: true, message: '请选择pc后台权限角色', trigger: 'change' }],
+        appGroupId: [{ required: true, message: '请选择app权限角色', trigger: 'change' }],
+        screenGroupId: [{ required: true, message: '请选择大屏权限角色', trigger: 'change' }],
       },
       dialogFarm: false,
       // farmList: [],
       // 选中牧场的id
       selectFarm: '',
       getFarmList: [],
+      // app权限列表
+      authAppList: [],
+      authList: [],
+      screenList: [],
     };
   },
   created() {
@@ -294,7 +319,10 @@ export default {
         job: data.job,
         birthday: data.birthday,
         address: data.address,
-        id: data.id
+        id: data.id,
+        pcGroupId: data.pcGroupId,
+        appGroupId: data.appGroupId,
+        screenGroupId: data.screenGroupId
       };
       this.forms.userId = data.userId;
       this.showType = true;
@@ -329,6 +357,9 @@ export default {
             params.remark = this.forms.remark;
             params.id = this.forms.id;
             params.userId = this.forms.userId;
+            params.pcGroupId = this.forms.pcGroupId;
+            params.appGroupId = this.forms.appGroupId;
+            params.screenGroupId = this.forms.screenGroupId;
             editUser(params)
                 .then(res => {
                   if(res.code === 10000) {
@@ -350,6 +381,9 @@ export default {
             params.address = this.forms.address;
             params.job = this.forms.job;
             params.remark = this.forms.remark;
+            params.pcGroupId = this.forms.pcGroupId;
+            params.appGroupId = this.forms.appGroupId;
+            params.screenGroupId = this.forms.screenGroupId;
             addUser(params)
                 .then(res => {
                   if(res.code === 10000) {
@@ -380,7 +414,10 @@ export default {
         job: '',
         birthday: '',
         address: '',
-        id: ''
+        id: '',
+        pcGroupId: [],
+        appGroupId: [],
+        screenGroupId: []
       };
       this.pageNum = 1;
       this.keyword = '';
@@ -478,7 +515,7 @@ export default {
         id: this.selectId,
         farmIds: this.selectFarm
       }
-      editUser(params).then(res => {
+      editUserFarm(params).then(res => {
         this.dialogFarm = false;
         this.selectFarm = '';
         this.selectId = '';
@@ -489,11 +526,29 @@ export default {
           this.$message.error('绑定失败！');
         }
       })
-    }
+    },
+    initAuth() {
+      // 后端分页
+      let params = {
+        pageNum: 1,
+        pageSize: 200,
+        searchStr: '',
+      };
+      getAuthApp(params).then((res) => {
+        this.authAppList = res.records;
+      });
+      getAuth(params).then(res => {
+        this.authList =res.records;
+      })
+      getAuthScreen(params).then((res) => {
+        this.screenList = res.records;
+      });
+    },
   },
   mounted() {
     this.init();
     this.GetFarm();
+    this.initAuth()
     // 获取牧场列表
     // this.getFarm();
   }