..

src/components/TableFooter.vue

@@ -0,0 +1,55 @@
+<template>
+  <div style="margin-top: 20px; height: 50px">
+    <el-pagination background
+                   style="float: right; display: inline-block"
+                   :total="totals"
+                   layout="total, sizes, prev, pager, next, jumper"
+                   @size-change="sizeChange"
+                   @current-change="pageChange"
+                   :page-sizes="sizesArray"
+                   :page-size="size"></el-pagination>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "TableFooter",
+    data() {
+      return {
+
+      }
+    },
+    props: {
+      totals: {
+        type: Number,
+        default() {
+          return 0;
+        },
+      },
+      sizesArray: {
+        type: Array,
+        default() {
+          return [10, 20, 40, 60, 80, 100];
+        },
+      },
+      size: {
+        type: Number,
+        default() {
+          return 20;
+        },
+      },
+    },
+    methods: {
+      sizeChange(value) {
+        this.$emit('sizeChange', value);
+      },
+      pageChange(value) {
+        this.$emit('pageChange', value);
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/router/routes.js

@@ -34,12 +34,25 @@ import transportation from '@/views/storeTransportation/transportation.vue'
 import shopStore from '@/views/storeTransportation/shopStore.vue'
 import productQuery from '@/views/storeTransportation/productQuery.vue'
 
+/* 系统管理 */
+import authAdmin from "../views/systemAdmin/authAdmin";
+import menuAdmin from "../views/systemAdmin/menuAdmin";
+import userAdmin from "../views/systemAdmin/userAdmin";
+
+/* 首页 */
+import dashboard from  '../views/dashboard';
 
 export default [
   {
 		path: '/home',
 		component: Home,
 		children: [
+			// 首页
+			{
+				path: 'dashboard',
+				name: 'dashboard',
+				component: dashboard,
+			},
 			{
 				path: 'index',
 				name: 'index',
@@ -187,6 +200,22 @@ export default [
 				path: 'productQuery',
 				name: 'productQuery',
 				component: productQuery
+			},
+			/* 系统管理 */
+			{
+				path: 'authAdmin',
+				name: 'authAdmin',
+				component: authAdmin
+			},
+			{
+				path: 'menuAdmin',
+				name: 'menuAdmin',
+				component: menuAdmin
+			},
+			{
+				path: 'userAdmin',
+				name: 'userAdmin',
+				component: userAdmin
 			}
 		]
 	},

src/sdk/config.js

@@ -1,4 +1,4 @@
 export default {
-  serverAddress: 'http://115.238.57.190:8010'
-  
+  serverAddress: 'http://121.37.169.186:8010'
+
 }

src/views/Home/Home.vue

@@ -125,53 +125,53 @@ export default {
         } else {
             target = localStorage.getItem("target");
         }
-        this.filterMenu(target);
+        // this.filterMenu(target);
     },
     watch: {
-        "$route.query.target"(v) {
-            if (v) {
-                localStorage.setItem("target", v);
-                this.filterMenu(v);
-            }
-        }
+        // "$route.query.target"(v) {
+        //     if (v) {
+        //         localStorage.setItem("target", v);
+        //         this.filterMenu(v);
+        //     }
+        // }
     },
     methods: {
-        /* 
+        /*
         http://hzsheep.ifarmcloud.com/butcher/#/home?target=定点屠宰智能管控
         http://hzsheep.ifarmcloud.com/butcher/#/home?target=产品制作智能监控
         http://hzsheep.ifarmcloud.com/butcher/#/home?target=鲜肉储运智能管控
         http://hzsheep.ifarmcloud.com/yield/#/home/firmInfo
         */
         /* 筛选菜单 */
-        /*  
+        /*
             http://localhost:8080/#/home?target=定点屠宰智能管控
             http://localhost:8080/#/home?target=产品制作智能监控
             http://localhost:8080/#/home?target=鲜肉储运智能管控
         */
-        filterMenu(target) {
-            let path;
-            switch (target) {
-                case "定点屠宰智能管控":
-                    var func = (item, index) => index == 0 || index == 1;
-                    path = "firmBuy";
-                    this.mainTitle = '湖羊屠宰智能管控'
-                    break;
-                case "产品制作智能监控":
-                    var func = (item, index) => index == 2;
-                    path = "productInfo";
-                    this.mainTitle = '产品制作智能监控'
-                    break;
-                case "鲜肉储运智能管控":
-                    var func = (item, index) => index == 3;
-                    path = "dispatching";
-                    this.mainTitle = '鲜肉储运智能管控'
-                    break;
-            }
-            this.menuData = menuData.filter(func);
-            if (path && path != this.$route.name) {
-                this.$router.push({ name: path });
-            }
-        },
+        // filterMenu(target) {
+        //     let path;
+        //     switch (target) {
+        //         case "定点屠宰智能管控":
+        //             var func = (item, index) => index == 0 || index == 1;
+        //             path = "firmBuy";
+        //             this.mainTitle = '湖羊屠宰智能管控'
+        //             break;
+        //         case "产品制作智能监控":
+        //             var func = (item, index) => index == 2;
+        //             path = "productInfo";
+        //             this.mainTitle = '产品制作智能监控'
+        //             break;
+        //         case "鲜肉储运智能管控":
+        //             var func = (item, index) => index == 3;
+        //             path = "dispatching";
+        //             this.mainTitle = '鲜肉储运智能管控'
+        //             break;
+        //     }
+        //     this.menuData = menuData.filter(func);
+        //     if (path && path != this.$route.name) {
+        //         this.$router.push({ name: path });
+        //     }
+        // },
         // 收取菜单按钮
         onMenuCollapse() {
             this.menuCollapse = !this.menuCollapse;
@@ -275,4 +275,4 @@ export default {
 .el-icon-arrow-down {
     font-size: 12px;
 }
-</style>
+</style>

src/views/dashboard.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="box">
+    <h2
+            style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd"
+    >
+      首页
+    </h2>
+    <div>
+      <el-card>
+        <el-calendar v-model="date"></el-calendar>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "dashboard",
+    data() {
+      return {
+        date: new Date(),
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/systemAdmin/authAdmin.vue

@@ -0,0 +1,370 @@
+<template>
+  <div class="box">
+    <h2
+            style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd"
+    >
+      权限管理
+    </h2>
+    <div class="box-content">
+      <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="590 + '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"
+                      @click="handleEdit(scope.row)">编辑</el-button>
+              <el-button
+                      size="mini"
+                      type="warning"
+                      @click="handleLimits(scope.row)">权限分配</el-button>
+              <el-button
+                      size="mini"
+                      type="danger"
+                      @click="handleUser(scope.row)">用户分配</el-button>
+              <el-button
+                      size="mini"
+                      type="danger"
+                      @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="dialogVisible = false">取 消</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>
+    <!-- 权限分配   -->
+    <el-dialog
+            title="权限分配"
+            :visible.sync="dialogLimits"
+            width="50%">
+      <div>
+        <el-tree
+                v-if="dialogLimits"
+                :data="limitList"
+                show-checkbox
+                node-key="id"
+                default-expand-all
+                :default-checked-keys="selectList"
+                :props="defaultProps"
+                @check="selectTable"
+                ref="tree">
+        </el-tree>
+      </div>
+      <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogLimits = false">取 消</el-button>
+                <el-button type="primary" @click="limitSave">保存</el-button>
+              </span>
+    </el-dialog>
+    <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="userName"
+                  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 TableFooter from "../../components/TableFooter";
+  export default {
+    name: "authAdmin",
+    components: {
+      TableFooter
+    },
+    data() {
+      return {
+        tableData: [
+        ],
+        showType: false,
+        dialogVisible: false,
+        form: {
+          id: '',
+          groupName: '',
+          remark: '',
+        },
+        dialogLimits: false,
+        // 权限分配list
+        limitList: [
+        ],
+        defaultProps: {
+          children: 'children',
+          label: 'menuName'
+        },
+        // 选择得参数
+        selectList: [],
+        keyword: '',
+        total: 0,
+        size: 20,
+        pageNum: 1,
+        selectId: '',
+        // 用户列表
+        userList: [],
+        dialogUsers: false,
+        userSelect: [],
+      }
+    },
+    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;
+      },
+      handleLimits(data) {
+        this.dialogLimits = true;
+        this.selectId = data.id;
+        this.selectList = [];
+        this.$axios.post(`http://121.37.169.186:8081/auth/getMenuByGroup?groupId=${data.id}`)
+        .then(res => {
+          if(res.data.code === 10005) {
+            this.selectList = [];
+          } else {
+            this.selectList = res.data.data.split(',');
+            this.$forceUpdate();
+          }
+        })
+      },
+      // 用户分配
+      handleUser(data) {
+        this.dialogUsers = true;
+        this.selectId = data.id;
+        this.$axios.post(`http://121.37.169.186:8081/auth/getAcountByGroup?groupId=${data.id}`)
+        .then(res => {
+          if(res.data.code === 10006) {
+            this.userSelect = [];
+          } else {
+            let arr = res.data.data.split(',');
+            this.$nextTick(() => {
+              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(',');
+        this.$axios.post(`http://121.37.169.186:8081/auth/saveAccountGroup?accountId=${str}&groupIds=${this.selectId}`)
+        .then(res => {
+          if(res.data.code === 10001) {
+          }
+          this.userSelect = [];
+          this.selectId = '';
+          this.$message(res.data.message);
+        });
+        this.dialogUsers = false;
+      },
+      selectTable(data, checked, ) {
+        this.selectList = checked.checkedKeys.concat(checked.halfCheckedKeys);
+      },
+      // 新增角色
+      onSubmit() {
+        this.$axios.post(`http://121.37.169.186:8081/group/add?groupName=${this.form.groupName}&remark=${this.form.remark}`)
+        .then(res => {
+          if(res.data.code === 10000) {
+            this.init();
+          }
+          this.$message(res.data.message);
+          this.dialogVisible = false;
+          this.reset();
+        })
+      },
+      // 权限分配
+      limitSave() {
+        let menuIds = this.selectList.join(',');
+        this.$axios.post(`http://121.37.169.186:8081/auth/saveGroupMenu?groupId=${this.selectId}&menuIds=${menuIds}`)
+        .then(res => {
+          if(res.data.code === 10001) {
+          }
+          this.$message(res.data.message);
+          this.selectId = '';
+        });
+        this.dialogLimits = false;
+        this.selectList = [];
+      },
+      init() {
+        this.$axios.post(`http://121.37.169.186:8081/group/list?pageNum=${this.pageNum}&pageSize=${this.size}&searchStr=${this.keyword}`)
+        .then(res => {
+          this.tableData = res.data.content;
+          this.total = res.data.totalElements;
+        })
+      },
+      // 重置
+      reset(){
+        this.form = {};
+        this.pageNum = 1;
+        this.keyword = '';
+        this.showType = false;
+      },
+      // 更新
+      setUpdate() {
+        this.$axios.post(`http://121.37.169.186:8081/group/edit?groupName=${this.form.groupName}&remark=${this.form.remark}&groupId=${this.form.id}`)
+          .then(res => {
+            if(res.data.code === 10000) {
+              this.init();
+            }
+            this.$message(res.data.message);
+            this.dialogVisible = false;
+            this.reset();
+          })
+      },
+      // 删除
+      del(data) {
+        this.$confirm('此操作将永久删除批量删除, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.$axios.post(`http://121.37.169.186:8081/group/remove?groupId=${data.id}`)
+            .then(res => {
+              if(res.data.code === 10000) {
+                this.init();
+              }
+              this.$message(res.data.message);
+            })
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
+      },
+      // 菜单列表
+      authInit() {
+        this.$axios.post('http://121.37.169.186:8081/menu/list')
+          .then(res => {
+            this.limitList = res.data;
+          })
+      },
+      // 用户列表
+      userInit() {
+        this.$axios.post(`http://121.37.169.186:8081/user/list?pageNum=1&pageSize=100&searchStr=`)
+          .then(res => {
+            if(res.data.code === 10001) {
+              this.userList = res.data.data;
+            }
+          })
+      }
+    },
+    mounted() {
+      this.init();
+      this.authInit();
+      this.userInit();
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 20px;
+    border: 1px solid #Ddd;
+  }
+</style>

src/views/systemAdmin/menuAdmin.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="box">
+    <h2
+            style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd"
+    >
+      菜单管理
+    </h2>
+    <div>
+      <div style="margin-bottom: 10px">
+        <el-button type="primary" @click="addMenu">添加菜单</el-button>
+      </div>
+      <div>
+        <el-table
+                :data="tableData"
+                border
+                row-key="id"
+                :height="670 + 'px'"
+                :tree-props="{children: 'children'}"
+                default-expand-all>
+          <el-table-column prop="menuName" label="菜单名称"></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" @click="setEdit(scope.row)">编辑</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" type="danger">删除</el-button>
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <el-dialog :title="showType ? '编辑菜单' : '新增菜单'" :visible.sync="dialogFormVisible">
+      <el-form :model="form"  ref="ruleForm">
+        <el-form-item label="父级菜单" :label-width="formLabelWidth">
+          <el-input v-model="form.parentId" disabled autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="菜单排序" :label-width="formLabelWidth">
+          <el-input v-model="form.sort"  autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="菜单名字" :label-width="formLabelWidth" prop="name">
+          <el-input v-model="form.name" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="备注" :label-width="formLabelWidth" prop="name">
+          <el-input v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="菜单路由" :label-width="formLabelWidth">
+          <el-input v-model="form.url" autocomplete="off"></el-input>
+        </el-form-item>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button v-if="!showType" type="primary" @click="add('ruleForm')">新 增</el-button>
+        <el-button v-else type="primary" @click="setUpdate('ruleForm')">更 新</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "menuAdmin",
+    data() {
+      return {
+        tableData: [],
+        showType: false,
+        dialogFormVisible: false,
+        form: {
+          name: '',
+          parentId: 0,
+          url: '',
+          id: '',
+          remark: '',
+          sort: ''
+        },
+        formLabelWidth: '120px',
+        rules: []
+      }
+    },
+    methods: {
+      add() {
+        this.dialogFormVisible = false;
+        let params = {
+          parentId: this.form.parentId,
+          menuName: this.form.name,
+          url: this.form.url,
+          remark: this.form.remark,
+          sort: this.form.sort
+        };
+        this.$axios.post('http://121.37.169.186:8081/menu/add', params)
+          .then(res => {
+              if(res.data.code === 10000) {
+                this.init();
+                this.reset();
+              }
+            this.$message(res.data.message);
+            this.dialogFormVisible = false;
+        // this.$axios.post(`http://192.168.1.6:8081/menu/add?parentId=${this.form.parentId}&menuName=${this.form.name}&url=${this.form.url}&remark=${this.form.remark}`)
+        //       .then(res => {
+        //         if(res.data.code === 10000) {
+        //           this.init();
+        //           this.reset();
+        //         }
+        //   this.$message(res.data.message);
+        //   this.dialogFormVisible = false;
+        })
+      },
+      setEdit(data) {
+        this.showType = true;
+        this.dialogFormVisible = true;
+        this.form.id = data.id;
+        this.form.name = data.menuName;
+        this.form.url = data.url;
+        this.form.parentId = data.parentId;
+        this.form.remark = data.remark;
+      },
+      addMenu() {
+        this.dialogFormVisible = true;
+      },
+      addChildren(data) {
+        this.dialogFormVisible = true;
+        this.form.parentId = data.id;
+      },
+      del(data) {
+        let arr = [];
+        arr.push(data.id);
+        console.log(arr.toString());
+        this.$axios.post(`http://121.37.169.186:8081/menu/remove?menuId=${arr}`)
+        .then(res => {
+          if(res.data.code == 10000) {
+            this.init();
+          }
+          this.$message(res.data.message);
+        })
+      },
+      setUpdate() {
+        this.$axios.post(`http://121.37.169.186:8081/menu/edit?id=${this.form.id}&remark=${this.form.remark}&url=${this.form.url}&menuName=${this.form.name}&parentId=${this.form.parentId}&sort=${this.form.sort}`)
+        .then(res => {
+          if(res.data.code === 10000) {
+            this.init();
+            this.reset();
+          }
+          this.$message(res.data.message);
+          this.dialogFormVisible = false;
+        })
+      },
+      // 重置
+      reset() {
+        this.form.name = '';
+        this.form.parentId = 0;
+        this.form.url = '';
+        this.form.id = '';
+        this.form.remark = '';
+        this.form.sort = '';
+        this.showType = false;
+      },
+      init() {
+        this.$axios.post('http://121.37.169.186:8081/menu/list')
+        .then(res => {
+          this.tableData = res.data;
+        })
+      }
+    },
+    mounted() {
+      this.init();
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 20px;
+    border: 1px solid #Ddd;
+  }
+</style>

src/views/systemAdmin/userAdmin.vue

@@ -0,0 +1,314 @@
+<template>
+  <div class="box">
+    <h2
+            style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd"
+    >
+      用户管理
+    </h2>
+    <div>
+      <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="addUser">添加用户</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="danger" @click="delAll">删除用户</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div>
+        <el-table
+                border
+                :data="tableData"
+                style="width: 100%"
+                :height="590+'px'"
+                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"
+                  width="80"></el-table-column>
+          <el-table-column
+                  prop="userName"
+                  label="用户姓名"></el-table-column>
+          <el-table-column prop="accountName" label="登录名"></el-table-column>
+          <el-table-column label="性别">
+            <template slot-scope="scope">
+              <span v-if="scope.row.male === 0">男</span>
+              <span v-else>女</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+                  prop="birthday"
+                  label="出生日期"></el-table-column>
+          <el-table-column
+                  prop="mobile"
+                  label="手机号"></el-table-column>
+          <el-table-column
+                  prop="job"
+                  label="职务"></el-table-column>
+          <el-table-column
+                  prop="address"
+                  label="住址"></el-table-column>
+          <el-table-column
+                  prop="remark"
+                  label="备注"></el-table-column>
+          <el-table-column
+                  label="是否启用">
+            <template slot-scope="scope">
+              <el-switch v-model="scope.row.accountStatus"  :active-value="1"  :inactive-value="0" @change="handleSwitch($event, scope.row)">
+              </el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <el-button type="primary" style="margin-right: 10px;" @click="edit(scope.row)">编辑</el-button>
+              <el-popconfirm
+                      title=" 确定要删除这个用户吗？"
+                      @confirm="del(scope.row)"
+              >
+                <el-button type="danger" slot="reference">删除</el-button>
+              </el-popconfirm>
+            </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="50%">
+      <div>
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-form-item label="用户姓名">
+            <el-input v-model="form.userName"></el-input>
+          </el-form-item>
+          <el-form-item label="性别">
+            <el-radio-group v-model="form.males">
+              <el-radio :label="0">女</el-radio>
+              <el-radio :label="1">男</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="出生日期">
+            <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
+          </el-form-item>
+          <el-form-item label="手机号">
+            <el-input v-model="form.mobile"></el-input>
+          </el-form-item>
+          <el-form-item label="住址">
+            <el-input v-model="form.address"></el-input>
+          </el-form-item>
+          <el-form-item label="职务">
+            <el-input v-model="form.job"></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="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="onSubmit">{{showType ? '更 新' : '新 增'}}</el-button>
+              </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import TableFooter from '../../components/TableFooter';
+  export default {
+    name: "userAdmin",
+    components: {
+      TableFooter
+    },
+    data() {
+      return {
+        dialogVisible: false,
+        showType: false,
+        keyword: '',
+        tableData: [],
+        total: 0,
+        size: 20,
+        pageNum: 1,
+        form: {
+          userName: '',
+          remark: '',
+          mobile: '',
+          males: '',
+          male: '',
+          job: '',
+          birthday: '',
+          address: '',
+          id: ''
+        },
+        selectList: '',
+      };
+    },
+    created() {
+    },
+    methods: {
+      // 搜索
+      search() {
+        this.init();
+      },
+      // 修改size
+      sizeChange(val) {
+        this.size = val;
+        this.init();
+      },
+      // 修改页数
+      pageChange(val) {
+        this.pageNum= val;
+        this.init();
+      },
+      // 初始化
+      init() {
+        this.$axios.post(`http://121.37.169.186:8081/user/list?pageNum=${this.pageNum}&pageSize=${this.size}&searchStr=${this.keyword}`)
+          .then(res => {
+            if(res.data.code === 10001) {
+              this.tableData = res.data.data;
+              this.total = res.data.totalElements;
+            } else {
+              this.$message(res.data.message);
+            }
+          })
+      },
+      // 添加用户
+      addUser() {
+        this.dialogVisible = true;
+        this.showType = false;
+      },
+      // 用户编辑
+      edit(data) {
+        this.form = data;
+        this.showType = true;
+        this.dialogVisible = true;
+        console.log(this.form);
+      },
+      // 用户删除
+      del(data) {
+        this.$axios.post(`http://121.37.169.186:8081/user/remove?userIds=${data.id}`)
+          .then(res => {
+            if(res.data.code === 10000) {
+              this.init();
+            }
+            this.$message(res.data.message);
+          })
+      },
+      // 保存
+      onSubmit() {
+        if(this.showType) {
+          this.$axios.post(`http://121.37.169.186:8081/user/edit?id=${this.form.id}&userName=${this.form.userName}&male=${this.form.males}&birthday=${this.form.birthday}&mobile=${this.form.mobile}&address=${this.form.address}&job=${this.form.job}&remark=${this.form.remark}`)
+            .then(res => {
+              if(res.data.code === 10000) {
+                this.init();
+              }
+              this.$message(res.data.message);
+              this.reset();
+            })
+        } else {
+          this.$axios.post(`http://121.37.169.186:8081/user/add?userName=${this.form.userName}&male=${this.form.males}&birthday=${this.form.birthday}&mobile=${this.form.mobile}&address=${this.form.address}&job=${this.form.job}&remark=${this.form.remark}`)
+            .then(res => {
+              if(res.data.code === 10000) {
+                this.init();
+              }
+              this.$message(res.data.message);
+              this.reset();
+            })
+        }
+        this.dialogVisible = false;
+      },
+      // 重置
+      reset() {
+        this.form = {};
+        this.pageNum = 1;
+        this.keyword = '';
+      },
+      // 选择
+      handleSelectionChange(val) {
+        let arr = [];
+        val.forEach(item => {
+          arr.push(item.id);
+        });
+        this.selectList = arr.join(',');
+      },
+      // 批量删除
+      delAll() {
+        if(this.selectList) {
+          this.$confirm('此操作将永久删除批量删除, 是否继续?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            this.$axios.post(`http://121.37.169.186:8081/user/remove?userIds=${this.selectList}`)
+              .then(res => {
+                if(res.data.code === 10000) {
+                  this.init();
+                  this.selectList = '';
+                }
+                this.$message(res.data.message);
+              })
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '已取消删除'
+            });
+          });
+        } else {
+          this.$alert('请先选择批量删除的用户！');
+        }
+      },
+      // 是否启用
+      handleSwitch(val, data) {
+        let accountStatus = '';
+        if(val) {
+          accountStatus = 1;
+        } else {
+          accountStatus = 0;
+        }
+        this.$axios.post(`http://121.37.169.186:8081/account/setAccountStatus?ids=${data.id}&status=${accountStatus}`)
+          .then(res => {
+            if(res.data.code === 10001) {
+              this.$message({
+                type: 'success',
+                message: res.data.message
+              })
+            } else {
+              this.$message.error(res.data.message);
+            }
+          })
+      }
+    },
+    mounted() {
+      this.init();
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 20px;
+    border: 1px solid #Ddd;
+  }
+</style>