ytj

src/pages/system/caseManager/caseInfo/index.vue

               size="mini"
               type="warning"
               @click="editItem(scope.$index, scope.row)">编辑</el-button>
-            <!-- <el-button
+            <el-button
               size="mini"
               type="success"
-              @click="keyManager(scope.$index, scope.row)">钥匙管理</el-button> -->
+              @click="pplConcerned(scope.$index, scope.row)">相关人员</el-button>
           </template>
         </el-table-column>
       </el-table>
     this.getList()
   },
   methods: {
+    pplConcerned (index, row) { // 相关人员
+      this.$router.push({name: 'pplConcerned', query: {id: row.CaseId}})
+    },
     getList () { // 获取列表
       this.$ajax(this.$api.caseManager.getCaseList.url, {
         method: this.$api.caseManager.getCaseList.method,

src/pages/system/caseManager/caseInfo/pplConcerned/editPPLConcerned/index.vue

+<template>
+  <div class="subPage">
+    <form class="mainForm">
+      <ul>
+        <li class="flex-h">
+          <span>用户类型：</span>
+          <div class="flex-item">
+            <el-select v-model="postData.UserType" placeholder="请选择">
+              <el-option
+                v-for="item in typeList"
+                :key="item.TypeId"
+                :label="item.TypeName"
+                :value="item.TypeId">
+              </el-option>
+            </el-select>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>用户姓名：</span>
+          <div class="flex-item">
+            <div style="width:50%">
+              <el-input
+                placeholder="请输入名称"
+                v-model="postData.UserName"
+                clearable>
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>手机号码：</span>
+          <div class="flex-item">
+            <div style="width:50%">
+              <el-input
+                placeholder="请输入手机号码"
+                v-model="postData.Tel"
+                clearable>
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li style="text-align:center">
+          <el-button type="primary" size="mini" @click="submit">保存</el-button>
+          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
+        </li>
+      </ul>
+    </form>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: '',
+  data () {
+    return {
+      postData: {
+        CaseUserId: '', // 主键id
+        OrgId: '', // 机构id
+        CaseId: this.$route.query.id, // 案场id
+        UserName: '', // 用户名称
+        Tel: '', // 电话
+        UserType: '', // 用户类型
+      },
+      typeList: [],
+    }
+  },
+  computed: {
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default,
+      OrgId: x => x.app.user.OrgId,
+    }),
+    CaseId: {
+      get () {
+        return this.postData.caseid || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.caseid = val
+      }
+    }
+  },
+  created () {
+    this.getUserTypeList()
+    this.getCaseUserInfo()
+  },
+  components: {},
+  methods: {
+    getCaseUserInfo () {
+      if (this.$route.query.userid !== undefined) {
+        this.$ajax(this.$api.caseManager.getCaseUserInfo.url, {
+          method: this.$api.caseManager.getCaseUserInfo.method,
+          urlData: {id: this.$route.query.userid}
+        }).then(res => {
+          this.postData = res
+        })
+      }
+    },
+    getUserTypeList () { // 获取用户类型
+      this.$ajax(this.$api.caseManager.getUserTypeList.url, {
+        method: this.$api.caseManager.getUserTypeList.method,
+      }).then(res => {
+        this.typeList = res
+        this.postData.UserType = res[0].TypeId
+      })
+    },
+    submit () { // 提交数据
+      if (this.postData.UserName === '') {
+        this.$message({
+          type: 'error',
+          message: '用户名称不能为空'
+        })
+        return false
+      }
+      if (this.postData.Tel === '') {
+        this.$message({
+          type: 'error',
+          message: '手机号码不能为空'
+        })
+        return false
+      }
+      this.postData.OrgId = this.OrgId
+      if (this.$route.query.userid !== undefined) {
+        this.$ajax(this.$api.caseManager.editCaseUser.url, {
+          method: this.$api.caseManager.editCaseUser.method,
+          data: this.postData
+        }).then(res => {
+          this.$message({
+            type: 'success',
+            message: '操作成功'
+          })
+          this.$router.push({ name: 'pplConcerned', query: { id: this.$route.query.id } })
+        })
+      } else {
+        this.$ajax(this.$api.caseManager.addCaseUser.url, {
+          method: this.$api.caseManager.addCaseUser.method,
+          data: this.postData
+        }).then(res => {
+          this.$message({
+            type: 'success',
+            message: '操作成功'
+          })
+          this.$router.push({ name: 'pplConcerned', query: { id: this.$route.query.id } })
+        })
+      }
+    },
+    cancel () { // 取消
+      this.$router.push({ name: 'pplConcerned', query: { id: this.$route.query.id } })
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/system/caseManager/caseInfo/pplConcerned/editPPLConcerned/page.scss

+span{
+  em{
+    color: red;
+  }
+}
+.map{
+  height: 500px;
+  background: #eee;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 1px solid #dcdfe6;
+
+  &>div.search{
+    display: inline-block;
+    position: absolute;
+  }
+
+  &>div.flex-item{
+    width: 100%;
+    &>div{
+      width: 100%;
+      height: 100%;
+      position: relative;
+      overflow: hidden;
+    }
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/pages/system/caseManager/caseInfo/pplConcerned/index.vue

+<template>
+  <div class="subPage">
+    <div class="system-table-search">
+      <div class="flex-h">
+        <div class="flex-item flex-h">
+          <el-button size="mini" type="success" @click="addPPLConcerned">新增相关人员</el-button>
+        </div>
+      </div>
+      <div class="moreFilter"></div>
+    </div>
+    <div class="system-table-box">
+      <el-table
+        :data="currentList"
+        stripe
+        style="width: 100%">
+        <el-table-column
+          prop="UserType"
+          label="用户类型">
+        </el-table-column>
+        <el-table-column
+          prop="UserName"
+          label="用户名称">
+        </el-table-column>
+        <el-table-column
+          prop="Tel"
+          label="手机号">
+        </el-table-column>
+        <el-table-column label="操作" width="200">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="warning"
+              @click="editItem(scope.$index, scope.row)">编辑</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      @current-change="handleCurrentChange"
+      :current-page.sync="postData.page"
+      :page-size="postData.pagesize"
+      layout="prev, pager, next, jumper"
+      :total="total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  data () {
+    return {
+      total: 0,
+      postData: { // 表格搜索条件
+        caseid: this.$route.query.id, // 案场名称
+        page: 1, // 当前页码
+        pagesize: 10, // 请求数据量
+      },
+      currentList: [],
+      typeList: [],
+    }
+  },
+  created () {
+    this.getUserTypeList().then(() => {
+      this.getList()
+    })
+  },
+  methods: {
+    getUserTypeList () { // 获取用户类型
+      return new Promise((resolve) => {
+        this.$ajax(this.$api.caseManager.getUserTypeList.url, {
+          method: this.$api.caseManager.getUserTypeList.method,
+        }).then(res => {
+          this.typeList = res
+          resolve()
+        })
+      })
+    },
+    addPPLConcerned () { // 添加相关人员
+      this.$router.push({ name: 'editPPLConcerned', query: { id: this.$route.query.id } })
+    },
+    getList () { // 获取列表
+      this.$ajax(this.$api.caseManager.getCaseUserList.url, {
+        method: this.$api.caseManager.getCaseUserList.method,
+        queryData: this.postData
+      }).then(res => {
+        for (var n = 0; n < res.list.length; n++) {
+          res.list[n].UserType = this.typeList.filter(x => x.TypeId === res.list[n].UserType)[0].TypeName
+        }
+        this.currentList = res.list
+        this.postData.page = res.page
+        this.total = res.pagenum
+      })
+    },
+    handleCurrentChange (val) { // 跳转到分页
+      this.getList()
+    },
+    editItem (index, row) { // 修改
+      this.$router.push({ name: 'editPPLConcerned', query: { id: this.$route.query.id, userid: row.CaseUserId } })
+    },
+    searchList (key) { // 搜索列表
+      this.postData.name = key
+      this.currentList = []
+      this.postData.page = 1
+      this.getList()
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/system/caseManager/caseInfo/pplConcerned/page.scss

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/pages/system/page.js

 import addUser from './systemSet/userManager/add' // 添加用户
 import editUser from './systemSet/userManager/edit' // 编辑用户
 import roleManager from './systemSet/roleManager/index' // 角色管理
-import addRole from './systemSet/roleManager/add' // 添加角色
-import editRole from './systemSet/roleManager/edit' // 编辑角色
+import editRole from './systemSet/roleManager/add' // 编辑角色
 
 import caseManager from './caseManager/index' // 案场管理
 import caseInfo from './caseManager/caseInfo/index' // 案场信息
 import addCase from './caseManager/caseInfo/addCase/index' // 新增案场
 import editCase from './caseManager/caseInfo/editCase/index' // 新增案场
+import pplConcerned from './caseManager/caseInfo/pplConcerned/index' // 相关人员
+import editPPLConcerned from './caseManager/caseInfo/pplConcerned/editPPLConcerned/index' // 编辑相关人员
 import keyManager from './caseManager/keyManager/index' // 钥匙管理
 import addKey from './caseManager/keyManager/add' // 新增钥匙
 import caseAreaManager from './caseManager/caseAreaManager/index' // 案场区域管理
           path: 'roleManager',
           name: 'roleManager',
           component: roleManager,
-          children: [{ // 添加角色
-            path: 'addRole',
-            name: 'addRole',
-            component: addRole,
-            children: []
-          }, { // 编辑角色
+          children: [{ // 编辑角色
             path: 'editRole',
             name: 'editRole',
             component: editRole,
             name: 'editCase',
             component: editCase,
             children: []
+          }, { // 相关人员
+            path: 'pplConcerned',
+            name: 'pplConcerned',
+            component: pplConcerned,
+            children: [{ // 编辑相关人员
+              path: 'editPPLConcerned',
+              name: 'editPPLConcerned',
+              component: editPPLConcerned,
+              children: []
+            }]
           }]
         }, { // 钥匙管理
           path: 'keyManager',

src/pages/system/systemSet/roleManager/add.vue

   <div class="subPage">
     <form class="mainForm">
       <ul>
-        <li class="flex-h">
-          <span>角色名：</span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-input
-                placeholder="只能输入英文"
-                v-model="postData.roleId"
-                clearable>
-              </el-input>
-            </div>
-          </div>
-        </li>
         <li class="flex-h">
           <span>角色名称：</span>
           <div class="flex-item">
             <div style="width:50%">
               <el-input
                 placeholder="请输入角色名称"
-                v-model="postData.roleName"
+                v-model="detail.RoleName"
                 clearable>
               </el-input>
             </div>
           </div>
         </li>
-        <li class="flex-h">
-          <span>禁用角色：</span>
-          <div class="flex-item">
-            <div style="width:50%" class="switch">
-              <el-switch
-                v-model="postData.disable"
-                active-color="#13ce66"
-                inactive-color="#ff4949">
-              </el-switch>
-            </div>
-          </div>
-        </li>
-        <li class="flex-h">
-          <span>数据权限：</span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-select v-model="postData.permission" placeholder="请选择">
-                <el-option
-                  v-for="item in permissionList"
-                  :key="item.value"
-                  :label="item.name"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-            </div>
-          </div>
-        </li>
         <li class="flex-h">
           <span>备注：</span>
           <div class="flex-item">
                 placeholder="请输入备注"
                 type="textarea"
                 :autosize="{ minRows: 3, maxRows: 5}"
-                v-model="postData.remark"
+                v-model="detail.Remark"
                 clearable>
               </el-input>
             </div>
 </template>
 
 <script>
+import { createNamespacedHelpers, mapState } from 'vuex'
+
+const { mapState: mapRoleState, mapActions: mapRoleActions } = createNamespacedHelpers('role')
 export default {
   name: '',
   data () {
-    return {
-      postData: {
-        roleId: '', // 角色名
-        roleName: '', // 角色姓名
-        disable: false, // 禁用角色
-        permission: '', // 数据权限
-        remark: '' // 备注
-      },
-      permissionList: [{
-        value: '0',
-        name: '个人数据'
-      }, {
-        value: '1',
-        name: '所属组织全部数据'
-      }, {
-        value: '2',
-        name: '所属组织及下层全部数据'
-      }]
-    }
+    return {}
   },
   components: {},
+  computed: {
+    ...mapRoleState({
+      detail: x => x.roleInfo,
+    }),
+    ...mapState({
+      caseid: x => x.app.cases.default,
+      orgid: x => x.app.user.OrgId,
+    })
+  },
   methods: {
+    ...mapRoleActions([
+      'GetRoleByID',
+      'AddRole',
+      'UpdateRole',
+      'SetRoleNull',
+    ]),
     submit () {
-      console.log(this.postData)
+      if ((this.detail.RoleId || '') === '') {
+        this.detail.CaseId = this.caseid
+        this.detail.OrgId = this.orgid
+        this.AddRole(this.detail)
+      } else {
+        this.UpdateRole(this.detail)
+      }
     },
     cancel () {
       this.$router.go(-1)
     }
   },
-  mounted () { }
+  beforeMount () {
+    const { id } = this.$route.query
+    if (id && id !== '') {
+      this.GetRoleByID({ roleid: id })
+    } else {
+      this.SetRoleNull()
+    }
+  }
 }
 </script>
 

src/pages/system/systemSet/roleManager/edit.vue

-<template>
-  <div class="subPage">
-    <form class="mainForm">
-      <ul>
-        <li class="flex-h">
-          <span>角色名：</span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-input
-                placeholder="只能输入英文"
-                v-model="postData.roleId"
-                clearable>
-              </el-input>
-            </div>
-          </div>
-        </li>
-        <li class="flex-h">
-          <span>角色名称：</span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-input
-                placeholder="请输入角色名称"
-                v-model="postData.roleName"
-                clearable>
-              </el-input>
-            </div>
-          </div>
-        </li>
-        <li class="flex-h">
-          <span>禁用角色：</span>
-          <div class="flex-item">
-            <div style="width:50%" class="switch">
-              <el-switch
-                v-model="postData.disable"
-                active-color="#13ce66"
-                inactive-color="#ff4949">
-              </el-switch>
-            </div>
-          </div>
-        </li>
-        <li class="flex-h">
-          <span>数据权限：</span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-select v-model="postData.permission" placeholder="请选择">
-                <el-option
-                  v-for="item in permissionList"
-                  :key="item.value"
-                  :label="item.name"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-            </div>
-          </div>
-        </li>
-        <li class="flex-h">
-          <span>备注：</span>
-          <div class="flex-item">
-            <div>
-              <el-input
-                placeholder="请输入备注"
-                type="textarea"
-                :autosize="{ minRows: 3, maxRows: 5}"
-                v-model="postData.remark"
-                clearable>
-              </el-input>
-            </div>
-          </div>
-        </li>
-        <li style="text-align:center">
-          <el-button type="primary" size="mini" @click='submit'>保存</el-button>
-          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
-        </li>
-      </ul>
-    </form>
-  </div>
-</template>
-
-<script>
-export default {
-  name: '',
-  data () {
-    return {
-      postData: {
-        roleId: '', // 角色名
-        roleName: '', // 角色姓名
-        disable: false, // 禁用角色
-        permission: '', // 数据权限
-        remark: '' // 备注
-      },
-      permissionList: [{
-        value: '0',
-        name: '个人数据'
-      }, {
-        value: '1',
-        name: '所属组织全部数据'
-      }, {
-        value: '2',
-        name: '所属组织及下层全部数据'
-      }]
-    }
-  },
-  components: {},
-  methods: {
-    submit () {
-      console.log(this.postData)
-    },
-    cancel () {
-      this.$router.go(-1)
-    }
-  },
-  mounted () { }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss" scoped>
-</style>

src/pages/system/systemSet/roleManager/index.vue

     <div class="system-table-search">
       <div class="flex-h">
         <div class="flex-item flex-h">
-          <el-button size="mini" type="success" @click='addRole'>新增角色</el-button>
+          <el-button size="mini" type="success" @click='editRole'>新增角色</el-button>
         </div>
-        <tableSearch value='分配权限' @exportSearchKey="searchList"></tableSearch>
+        <tableSearch value='角色名称' @exportSearchKey="searchList"></tableSearch>
       </div>
       <div class="moreFilter"></div>
     </div>
     <div class="system-table-box">
-      <el-table :data="tableData" stripe style="width: 100%">
-        <el-table-column fixed='left' prop="role" label="角色标识" width="150">
+      <el-table :data="roles.list" stripe style="width: 100%">
+        <el-table-column prop="RoleName" label="角色名">
         </el-table-column>
-        <el-table-column prop="roleName" label="角色名" width="150">
-        </el-table-column>
-        <el-table-column prop="disable" label="是否禁用角色" width="150">
-        </el-table-column>
-        <el-table-column prop="permission" label="数据权限">
-        </el-table-column>
-        <el-table-column prop="createTime" label="创建时间" width="200">
+        <el-table-column label="创建时间" width="300">
+          <template slot-scope="scope">
+            <label>{{FormatDate(scope.row.CreateDate)}}</label>
+          </template>
         </el-table-column>
         <el-table-column fixed='right' label="操作" width="300">
           <template slot-scope="scope">
         </el-table-column>
       </el-table>
     </div>
-    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="prev, pager, next, jumper" :total="100">
+    <el-pagination
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+    :current-page.sync="currentPage"
+    :page-size="10"
+    layout="prev, pager, next, jumper"
+    :total="roles.pagenum">
     </el-pagination>
-    <el-dialog title="请选择机构" :visible.sync="dialogTableVisible">
+    <!-- <el-dialog title="请选择机构" :visible.sync="dialogTableVisible">
       <el-tree
         class="flxe-h"
         :data="treeData"
         <div class="flex-h" style="justify-content: flex-end;margin-top: 1rem">
           <el-button type='success' @click="getCheckedNodes">确定</el-button>
         </div>
-    </el-dialog>
+    </el-dialog> -->
   </div>
 </template>
 
 <script>
+import { createNamespacedHelpers } from 'vuex'
 import tableSearch from '@/components/tableSearch/index'
 
+const { mapState: mapRoleState, mapActions: mapRoleActions } = createNamespacedHelpers('role')
+
 export default {
   name: '',
   data () {
         key: '111' // 搜索关键字
       },
       dialogTableVisible: false,
-      tableData: [
-        {
-          role: '赵日天',
-          roleName: '赵日天',
-          disable: '赵日地',
-          permission: '赵日天',
-          createTime: '赵爸爸'
-        }, {
-          role: '赵日天',
-          roleName: '赵日天',
-          disable: '赵日地',
-          permission: '赵日天',
-          createTime: '赵爸爸'
-        }, {
-          role: '赵日天',
-          roleName: '赵日天',
-          disable: '赵日地',
-          permission: '赵日天',
-          createTime: '赵爸爸'
-        }, {
-          role: '赵日天',
-          roleName: '赵日天',
-          disable: '赵日地',
-          permission: '赵日天',
-          createTime: '赵爸爸'
-        }, {
-          role: '赵日天',
-          roleName: '赵日天',
-          disable: '赵日地',
-          permission: '赵日天',
-          createTime: '赵爸爸'
-        }, {
-          role: '赵日天',
-          roleName: '赵日天',
-          disable: '赵日地',
-          permission: '赵日天',
-          createTime: '赵爸爸'
-        }, {
-          role: '赵日天',
-          roleName: '赵日天',
-          disable: '赵日地',
-          permission: '赵日天',
-          createTime: '赵爸爸'
-        }, {
-          role: '赵日天',
-          roleName: '赵日天',
-          disable: '赵日地',
-          permission: '赵日天',
-          createTime: '赵爸爸'
-        }
-      ],
-      treeData: [{
-        label: '根目录',
-        rank: '0',
-        img: '',
-        children: [{
-          label: '共享课程&书吧',
-          rank: '0',
-          img: '',
-          children: [{
-            label: '健身',
-            rank: '0',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163306109741.png',
-          }, {
-            label: '健康',
-            rank: '0',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163325263583.png',
-          }, {
-            label: '艺术',
-            rank: '0',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/104118813781.png',
-          }, {
-            label: '社交',
-            rank: '0',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163339496588.png',
-          }, {
-            label: '教育',
-            rank: '0',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163351586373.png',
-          }]
-        }]
-      }]
     }
   },
+  computed: {
+    ...mapRoleState({
+      roles: x => x.roleList,
+    }),
+  },
   components: {
     tableSearch
   },
   methods: {
+    ...mapRoleActions([
+      'GetRolesList',
+    ]),
+    FormatDate (date) {
+      console.log()
+      return this.toolClass.dateFormat(date)
+    },
     handleSizeChange (val) {
       console.log(`每页 ${val} 条`)
     },
     },
     handleEdit (index, row) {
       // 编辑
-      console.log(index, row)
-      this.$router.push({ name: 'editRole' })
+      this.$router.push({ name: 'editRole', query: { id: row.RoleId } })
     },
     handleDelete (index, row) {
       // 删除
       console.log(node)
     },
     searchList (key) {
-      // 搜索列表
-      console.log(key)
+      this.GetRolesList({name: key})
     },
     addRole () {
       this.$router.push({ name: 'addRole' })
     getCheckedNodes () { // 获取选中的节点
       console.log(this.$refs.tree.getCheckedNodes())
     }
-  }
+  },
+  beforeMount () {
+    this.GetRolesList()
+  },
 }
 </script>
 

src/pages/system/systemSet/userManager/add.vue

     <form class="mainForm">
       <ul>
         <li class="flex-h">
-          <span>用户名：</span>
+          <span>帐户名称：</span>
           <div class="flex-item">
             <div style="width:50%">
               <el-input
-                placeholder="请输入用户名"
-                v-model="postData.userName"
-                clearable>
-              </el-input>
-            </div>
-          </div>
-        </li>
-        <li class="flex-h">
-          <span>密码：</span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-input
-                placeholder="请输入密码"
-                v-model="postData.passWord"
-                clearable>
-              </el-input>
-            </div>
-          </div>
-        </li>
-        <li class="flex-h">
-          <span>确认密码：</span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-input
-                placeholder="请再输入一次密码"
-                v-model="postData.checkPassWord"
+                placeholder="请输入帐户名称"
+                v-model="postData.UserName"
                 clearable>
               </el-input>
             </div>
           <span>用户头像：</span>
           <div class="flex-item">
             <div>
-              <a class="formImg">
-                <img src="" class="centerLabel contain" alt="">
-                <i class="iconfont icon-quxiao"></i>
-              </a>
-              <el-button type="success" size="mini">上传图片</el-button>
+              <el-upload
+                class="avatar-uploader"
+                :action='$api.file.image.url'
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess">
+                <img v-if="postData.HeadImgUrl" :src="postData.HeadImgUrl" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
             </div>
           </div>
         </li>
             <div style="width:50%">
               <el-input
                 placeholder="请输入真实姓名"
-                v-model="postData.realName"
+                v-model="postData.RealName"
                 clearable>
               </el-input>
             </div>
             <div style="width:50%">
               <el-input
                 placeholder="请输入邮箱"
-                v-model="postData.email"
+                v-model="postData.Email"
                 clearable>
               </el-input>
             </div>
             <div style="width:50%">
               <el-input
                 placeholder="请输入工号"
-                v-model="postData.number"
+                v-model="postData.workNo"
                 clearable>
               </el-input>
             </div>
             <div style="width:50%">
               <el-input
                 placeholder="请输入手机号"
-                v-model="postData.mobile"
+                v-model="postData.Phone"
                 clearable>
               </el-input>
             </div>
           <span>用户标签：</span>
           <div class="flex-item">
             <div style="width:50%">
-              <el-select v-model="postData.userLabel" placeholder="请选择">
-                <el-option
-                  v-for="item in userLabelList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
+              <el-checkbox-group v-model="TagIds" @change="handleCheckedCitiesChange">
+                <el-checkbox v-for="(item,index) in TagList" :label="item.TagId" :key="index">{{item.TagName}}</el-checkbox>
+              </el-checkbox-group>
             </div>
           </div>
         </li>
           <span>用户类型：</span>
           <div class="flex-item">
             <div style="width:50%">
-              <el-select v-model="postData.userLabel" placeholder="请选择">
+              <el-select v-model="postData.TypeId" placeholder="请选择">
                 <el-option
-                  v-for="item in userLabelList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
+                  v-for="item in typeList"
+                  :key="item.TypeId"
+                  :label="item.TypeName"
+                  :value="item.TypeId">
                 </el-option>
               </el-select>
             </div>
           </div>
         </li>
         <li class="flex-h">
-          <span>锁定用户：</span>
+          <span>选择案场：</span>
           <div class="flex-item">
-            <div style="width:50%" class="switch">
-              <el-switch
-                v-model="postData.lockUser"
-                active-color="#13ce66"
-                inactive-color="#ff4949">
-              </el-switch>
-            </div>
-          </div>
-        </li>
-        <li class="flex-h">
-          <span>是否案场联系人：</span>
-          <div class="flex-item">
-            <div style="width:50%" class="switch">
-              <el-switch
-                v-model="postData.linkMan"
-                active-color="#13ce66"
-                inactive-color="#ff4949">
-              </el-switch>
-            </div>
+            <el-select v-model="CaseId" placeholder="请选择">
+              <el-option
+                v-for="item in cases"
+                :key="item.CaseId"
+                :label="item.CaseName"
+                :value="item.CaseId">
+              </el-option>
+            </el-select>
           </div>
         </li>
         <li style="text-align:center">
 </template>
 
 <script>
-import { createNamespacedHelpers } from 'vuex'
-const { mapState: mapUserState } = createNamespacedHelpers('user')
+import { mapState } from 'vuex'
+
 export default {
   name: '',
   data () {
     return {
+      TagIds: [],
+      typeList: [],
+      TagList: [],
+      CheckPwd: '',
       postData: {
-        userName: '', // 用户名
-        passWord: '', // 密码
-        checkPassWord: '', // 确认密码
-        realName: '', // 真实姓名
-        email: '', // 邮箱
-        number: '', // 工号
-        mobile: '', // 手机号
-        userLabel: '',
-        lockUser: true,
-        linkMan: true
+        UserId: '', // 用户id
+        UserName: '', // 用户名
+        RealName: '', // 真实姓名
+        Pwd: '', // 密码
+        OrgId: '', // 机构id
+        Sex: '', // 性别
+        WorkNo: '', // 工号
+        Email: '', // 邮箱
+        Phone: '', // 手机号
+        HeadImgUrl: '', // 头像
+        TypeId: '', // 用户类型id
+        TagIds: '', // 用户标签
+        BelongCaseId: '', // 所属案场id
       }
     }
   },
   components: {},
   computed: {
-    ...mapUserState({
-      userLabelList: x => x.userLabelList,
-    })
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default,
+    }),
+    CaseId: {
+      get () {
+        return this.postData.BelongCaseId || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.BelongCaseId = val
+      }
+    }
+  },
+  created () {
+    this.getCaseTagList()
+    this.getUserTypeList()
   },
   methods: {
-    submit () {
-      console.log(this.postData)
+    getCaseTagList () { // 获取标签数据
+      this.$ajax(this.$api.caseManager.getCaseTagList.url, {
+        method: this.$api.caseManager.getCaseTagList.method,
+        queryData: { caseid: this.CaseId, page: 1, pagesize: 10000 }
+      }).then(res => {
+        this.TagList = res.list
+      })
+    },
+    getUserTypeList () { // 获取用户类型
+      this.$ajax(this.$api.caseManager.getUserTypeList.url, {
+        method: this.$api.caseManager.getUserTypeList.method,
+      }).then(res => {
+        this.typeList = res
+        this.postData.TypeId = res[0].TypeId
+      })
+    },
+    handleCheckedCitiesChange (val) {
+      this.postData.TagIds = val.join(',')
+    },
+    handleAvatarSuccess (res, file) {
+      this.postData.HeadImgUrl = res.result.url
+    },
+    submit () { // 提交数据
+      if (this.postData.UserName === '') {
+        this.$message({
+          type: 'error',
+          message: '帐户名称不能为空'
+        })
+        return false
+      }
+      if (this.postData.Phone === '') {
+        this.$message({
+          type: 'error',
+          message: '手机号不能为空'
+        })
+        return false
+      }
+      if (this.postData.BelongCaseId === '') this.postData.BelongCaseId = this.CaseId
+      this.$ajax(this.$api.systemSet.addUser.url, {
+        method: this.$api.systemSet.addUser.method,
+        data: this.postData
+      }).then(res => {
+        this.$message({
+          type: 'success',
+          message: '操作成功'
+        })
+        this.$router.push({name: 'userManager'})
+      })
     },
     cancel () {
       this.$router.go(-1)
     }
   },
-  mounted () {}
+  mounted () { }
 }
 </script>
 

src/pages/system/systemSet/userManager/edit.vue

     <form class="mainForm">
       <ul>
         <li class="flex-h">
-          <span>用户名：</span>
+          <span>帐户名称：</span>
           <div class="flex-item">
             <div style="width:50%">
               <el-input
-                placeholder="请输入用户名"
-                v-model="postData.userName"
-                clearable>
-              </el-input>
-            </div>
-          </div>
-        </li>
-        <li class="flex-h">
-          <span>密码：</span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-input
-                placeholder="请输入密码"
-                v-model="postData.passWord"
-                clearable>
-              </el-input>
-            </div>
-          </div>
-        </li>
-        <li class="flex-h">
-          <span>确认密码：</span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-input
-                placeholder="请再输入一次密码"
-                v-model="postData.checkPassWord"
+                placeholder="请输入帐户名称"
+                v-model="postData.UserName"
                 clearable>
               </el-input>
             </div>
           <span>用户头像：</span>
           <div class="flex-item">
             <div>
-              <a class="formImg">
-                <img src="" class="centerLabel contain" alt="">
-                <i class="iconfont icon-quxiao"></i>
-              </a>
-              <el-button type="success" size="mini">上传图片</el-button>
+              <el-upload
+                class="avatar-uploader"
+                :action='$api.file.image.url'
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess">
+                <img v-if="postData.HeadImgUrl" :src="postData.HeadImgUrl" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
             </div>
           </div>
         </li>
             <div style="width:50%">
               <el-input
                 placeholder="请输入真实姓名"
-                v-model="postData.realName"
+                v-model="postData.RealName"
                 clearable>
               </el-input>
             </div>
             <div style="width:50%">
               <el-input
                 placeholder="请输入邮箱"
-                v-model="postData.email"
+                v-model="postData.Email"
                 clearable>
               </el-input>
             </div>
             <div style="width:50%">
               <el-input
                 placeholder="请输入工号"
-                v-model="postData.number"
+                v-model="postData.workNo"
                 clearable>
               </el-input>
             </div>
             <div style="width:50%">
               <el-input
                 placeholder="请输入手机号"
-                v-model="postData.mobile"
+                v-model="postData.Phone"
                 clearable>
               </el-input>
             </div>
           <span>用户标签：</span>
           <div class="flex-item">
             <div style="width:50%">
-              <el-select v-model="postData.userLabel" placeholder="请选择">
-                <el-option
-                  v-for="item in userLabelList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
+              <el-checkbox-group v-model="TagIds" @change="handleCheckedCitiesChange">
+                <el-checkbox v-for="(item,index) in TagList" :label="item.TagId" :key="index">{{item.TagName}}</el-checkbox>
+              </el-checkbox-group>
             </div>
           </div>
         </li>
           <span>用户类型：</span>
           <div class="flex-item">
             <div style="width:50%">
-              <el-select v-model="postData.userLabel" placeholder="请选择">
+              <el-select v-model="postData.TypeId" placeholder="请选择">
                 <el-option
-                  v-for="item in userLabelList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
+                  v-for="item in typeList"
+                  :key="item.TypeId"
+                  :label="item.TypeName"
+                  :value="item.TypeId">
                 </el-option>
               </el-select>
             </div>
           </div>
         </li>
         <li class="flex-h">
-          <span>锁定用户：</span>
-          <div class="flex-item">
-            <div style="width:50%" class="switch">
-              <el-switch
-                v-model="postData.lockUser"
-                active-color="#13ce66"
-                inactive-color="#ff4949">
-              </el-switch>
-            </div>
-          </div>
-        </li>
-        <li class="flex-h">
-          <span>是否案场联系人：</span>
+          <span>选择案场：</span>
           <div class="flex-item">
-            <div style="width:50%" class="switch">
-              <el-switch
-                v-model="postData.linkMan"
-                active-color="#13ce66"
-                inactive-color="#ff4949">
-              </el-switch>
-            </div>
+            <el-select v-model="CaseId" placeholder="请选择">
+              <el-option
+                v-for="item in cases"
+                :key="item.CaseId"
+                :label="item.CaseName"
+                :value="item.CaseId">
+              </el-option>
+            </el-select>
           </div>
         </li>
         <li style="text-align:center">
 </template>
 
 <script>
-import { createNamespacedHelpers } from 'vuex'
-const { mapState: mapUserState } = createNamespacedHelpers('user')
+import { mapState } from 'vuex'
+
 export default {
   name: '',
   data () {
     return {
+      TagIds: [],
+      typeList: [],
+      TagList: [],
+      CheckPwd: '',
       postData: {
-        userName: '', // 用户名
-        passWord: '', // 密码
-        checkPassWord: '', // 确认密码
-        realName: '', // 真实姓名
-        email: '', // 邮箱
-        number: '', // 工号
-        mobile: '', // 手机号
-        userLabel: '',
-        lockUser: true,
-        linkMan: true
+        UserId: '', // 用户id
+        UserName: '', // 用户名
+        RealName: '', // 真实姓名
+        Pwd: '', // 密码
+        OrgId: '', // 机构id
+        Sex: '', // 性别
+        WorkNo: '', // 工号
+        Email: '', // 邮箱
+        Phone: '', // 手机号
+        HeadImgUrl: '', // 头像
+        TypeId: '', // 用户类型id
+        TagIds: '', // 用户标签
+        BelongCaseId: '', // 所属案场id
       }
     }
   },
   components: {},
   computed: {
-    ...mapUserState({
-      userLabelList: x => x.userLabelList,
-    })
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default,
+    }),
+    CaseId: {
+      get () {
+        return this.postData.BelongCaseId || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.BelongCaseId = val
+      }
+    }
+  },
+  created () {
+    this.getCaseTagList()
+    this.getUserTypeList()
+    this.getUserInfo()
   },
   methods: {
-    submit () {
-      console.log(this.postData)
+    getUserInfo () { // 获取用户信息
+      this.$ajax(this.$api.systemSet.getUserInfo.url, {
+        method: this.$api.systemSet.getUserInfo.method,
+        urlData: { id: this.$route.query.id }
+      }).then(res => {
+        for (var n = 0; n < res.UserTag.length; n++) {
+          this.TagIds.push(res.UserTag[n].TagId)
+        }
+        if (res.UserType !== null) res.TypeId = res.UserType[0].TypeId
+        for (var key in this.postData) {
+          if (res[key] !== undefined) {
+            this.postData[key] = res[key]
+          }
+        }
+      })
+    },
+    getCaseTagList () { // 获取标签数据
+      this.$ajax(this.$api.caseManager.getCaseTagList.url, {
+        method: this.$api.caseManager.getCaseTagList.method,
+        queryData: { caseid: this.CaseId, page: 1, pagesize: 10000 }
+      }).then(res => {
+        this.TagList = res.list
+      })
+    },
+    getUserTypeList () { // 获取用户类型
+      this.$ajax(this.$api.caseManager.getUserTypeList.url, {
+        method: this.$api.caseManager.getUserTypeList.method,
+      }).then(res => {
+        this.typeList = res
+        this.postData.TypeId = res[0].TypeId
+      })
+    },
+    handleCheckedCitiesChange (val) {
+      this.postData.TagIds = val.join(',')
+    },
+    handleAvatarSuccess (res, file) {
+      this.postData.HeadImgUrl = res.result.url
+    },
+    submit () { // 提交数据
+      if (this.postData.UserName === '') {
+        this.$message({
+          type: 'error',
+          message: '帐户名称不能为空'
+        })
+        return false
+      }
+      if (this.postData.Phone === '') {
+        this.$message({
+          type: 'error',
+          message: '手机号不能为空'
+        })
+        return false
+      }
+      if (this.postData.BelongCaseId === '') this.postData.BelongCaseId = this.CaseId
+      if (this.postData.TagIds === '') this.postData.TagIds = this.TagIds.join(',')
+      this.$ajax(this.$api.systemSet.editUser.url, {
+        method: this.$api.systemSet.editUser.method,
+        data: this.postData
+      }).then(res => {
+        this.$message({
+          type: 'success',
+          message: '操作成功'
+        })
+        this.$router.push({ name: 'userManager' })
+      })
     },
     cancel () {
       this.$router.go(-1)
     }
   },
-  mounted () {}
+  mounted () { }
 }
 </script>
 

src/pages/system/systemSet/userManager/index.vue

         <div class="flex-item flex-h">
           <el-button size="mini" type="success" @click="addUser">新增用户</el-button>
         </div>
-        <tableSearch value='请输入用户名' @exportSearchKey="searchList"></tableSearch>
+        <ul>
+          <li>
+            <span>选择案场：</span>
+            <el-select v-model="CaseId" placeholder="请选择">
+              <el-option
+                v-for="item in cases"
+                :key="item.CaseId"
+                :label="item.CaseName"
+                :value="item.CaseId">
+              </el-option>
+            </el-select>
+          </li>
+        </ul>
+        <el-button
+          size="mini"
+          type="primary" @click="search">搜索</el-button>
       </div>
       <div class="moreFilter"></div>
     </div>
     <div class="system-table-box">
       <el-table
-        :data="tableData"
+        :data="currentList"
         stripe
         style="width: 100%">
         <el-table-column
           fixed
-          prop="userName"
+          prop="UserName"
           label="用户名"
           width="150">
         </el-table-column>
         <el-table-column
-          prop="realName"
+          prop="RealName"
           label="真实姓名"
           width="120">
         </el-table-column>
         <el-table-column
-          prop="email"
+          prop="Email"
           label="邮箱"
           width="150">
         </el-table-column>
         <el-table-column
-          prop="workNum"
+          prop="WorkNo"
           label="工号"
           width="200">
         </el-table-column>
         <el-table-column
-          prop="mobile"
+          prop="Phone"
           label="手机号"
           width="100">
         </el-table-column>
         <el-table-column
-          prop="userType"
+          prop="UserTypeNames"
           label="用户类型"
           width="100">
         </el-table-column>
         <el-table-column
-          prop="lock"
-          label="是否锁定"
-          width="100">
-        </el-table-column>
-        <el-table-column
-          prop="creatTime"
+          prop="CreateDate"
           label="创建时间"
           width="200">
         </el-table-column>
       </el-table>
     </div>
     <el-pagination
-      @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page.sync="currentPage"
-      :page-size="10"
+      :current-page.sync="postData.page"
+      :page-size="postData.pagesize"
       layout="prev, pager, next, jumper"
-      :total="100">
+      :total="total">
     </el-pagination>
-    <el-dialog title='绑定角色' :visible.sync="dialogTableVisible">
+    <el-dialog v-if="currentEditItem != null" :title="'绑定角色 - ' + currentEditItem.UserName" :visible.sync="dialogTableVisible">
       <form class="mainForm">
         <ul>
           <li class="flex-h">
               <div>
                 <el-input
                   placeholder="请输入角色名称并按回车搜索"
-                  v-model="postData.searchData"
+                  v-model="postData.name"
                   @change='getRole'
                   clearable>
                 </el-input>
             <div class="flex-item">
               <div>
                 <el-button
-                  v-for="tag in searchTags"
-                  :key="tag.name"
+                  v-for="tag in searchTagList"
+                  :key="tag.RoleId"
                   style="margin-right:1rem"
                   @click='addTag(tag)'>
-                  {{tag.name}}
+                  {{tag.RoleName}}
                   </el-button>
               </div>
             </div>
               <div>
                 <el-tag
                   v-for="tag in tags"
-                  :key="tag.name"
+                  :key="tag.RoleId"
                   style="margin-right:1rem"
                   @close="handleClose(tag)"
                   closable>
-                  {{tag.name}}
+                  {{tag.RoleName}}
                 </el-tag>
               </div>
             </div>
           </li>
+          <li style="text-align:right;">
+            <el-button
+              size="mini"
+              type="success" @click="bindRoles">确认绑定</el-button>
+          </li>
         </ul>
       </form>
     </el-dialog>
 </template>
 
 <script>
-import tableSearch from '@/components/tableSearch/index'
-import { createNamespacedHelpers } from 'vuex'
-const { mapState: mapUserState, mapActions: mapUserActions } = createNamespacedHelpers('user')
+import { mapState } from 'vuex'
+
 export default {
   name: '',
   data () {
     return {
-      currentPage: 0, // 当前页码
+      currentEditItem: null,
       dialogTableVisible: false,
-      tableSearch: { // 表格搜索条件
-        key: '111', // 搜索关键字
+      total: 0,
+      postData: { // 表格搜索条件
+        caseid: '',
+        name: '', // 搜索关键词
+        page: 1, // 当前页码
+        pagesize: 10000, // 请求数据量
       },
-      tableData: [{
-        userName: '赵日天',
-        realName: '13446666666',
-        email: '赵日地',
-        workNum: '赵爸爸',
-        mobile: '1376975175',
-        userType: '1',
-        lock: true,
-        creatTime: '2018-08-08 10:00:00'
-      }],
-      postData: {
-        searchData: ''
-      },
-      tags: [
-        { name: '角色0' },
-        { name: '角色1' },
-        { name: '角色2' },
-        { name: '角色3' },
-        { name: '角色4' }
-      ]
+      currentList: [],
+      searchTagList: [],
+      tags: [],
     }
   },
-  components: {
-    tableSearch,
-  },
   computed: {
-    ...mapUserState({
-      searchTags: x => x.roleList,
-    })
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default
+    }),
+    CaseId: {
+      get () {
+        return this.postData.caseid || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.caseid = val
+      }
+    }
+  },
+  created () {
+    this.getList()
   },
   methods: {
-    handleSizeChange (val) {
-      console.log(`每页 ${val} 条`)
+    bindRoles () { // 绑定角色
+      this.$ajax(this.$api.systemSet.bindRoles.url, {
+        method: this.$api.systemSet.bindRoles.method,
+        queryData: {
+          userid: this.currentEditItem.UserId,
+          roles: this.returnRoles()
+        }
+      }).then(res => {
+        this.$message({
+          type: 'success',
+          message: '操作成功'
+        })
+        this.dialogTableVisible = false
+        this.postData.name = ''
+        this.tags = []
+        this.searchTagList = []
+      })
+    },
+    returnRoles () {
+      var arr = []
+      for (var n = 0; n < this.tags.length; n++) {
+        arr.push(this.tags[n].RoleId)
+      }
+      return arr.join(',')
+    },
+    search () { // 搜索
+      this.postData.page = 1
+      this.currentList = []
+      this.getList()
+    },
+    getList () { // 获取列表
+      this.$ajax(this.$api.systemSet.getUserList.url, {
+        method: this.$api.systemSet.getUserList.method,
+        queryData: { ...this.postData, caseid: this.CaseId }
+      }).then(res => {
+        for (var n = 0; n < res.list.length; n++) {
+          res.list[n].CreateDate = this.returnTime(res.list[n].CreateDate)
+        }
+        this.currentList = res.list
+        this.postData.page = res.page
+        this.total = res.pagenum
+      })
+    },
+    returnTime (val) {
+      val = new Date(val)
+      return val.getFullYear() + '-' + this.returnNum(val.getMonth() + 1) + '-' + this.returnNum(val.getDate()) + ' ' + this.returnNum(val.getHours()) + ':' + this.returnNum(val.getMinutes()) + ':' + this.returnNum(val.getSeconds())
     },
-    handleCurrentChange (val) {
-      console.log(`当前页: ${val}`)
+    returnNum (num) {
+      return num > 9 ? num : '0' + num
+    },
+    handleCurrentChange (val) { // 跳转到分页
+      this.getList()
     },
     handleEdit (index, row) { // 编辑
-      console.log(index, row)
-      this.$router.push({ name: 'editUser', query: { realName: row.realName } })
+      this.$router.push({ name: 'editUser', query: { id: row.UserId } })
     },
     handleDelete (index, row) { // 删除
-      console.log(index, row)
       this.$confirm('确认删除此用户?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        this.$message({
-          type: 'success',
-          message: '删除成功!'
+        this.$ajax(this.$api.systemSet.deleteUser.url, {
+          method: this.$api.systemSet.deleteUser.method,
+          urlData: { id: row.UserId }
+        }).then(res => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          })
+          this.getList()
         })
       }).catch(() => {
         this.$message({
       })
     },
     handleBind (index, row) {
-      console.log(index, row)
-      this.dialogTableVisible = true
-    },
-    searchList (key) { // 搜索列表
-      console.log(key)
+      this.$ajax(this.$api.systemSet.getUserRoles.url, {
+        method: this.$api.systemSet.getUserRoles.method,
+        queryData: { userid: row.UserId }
+      }).then(res => {
+        if (res !== null) this.tags = res
+        this.currentEditItem = row
+        this.dialogTableVisible = true
+      })
     },
     addUser () {
       this.$router.push({ name: 'addUser' })
     handleClose (tag) {
       this.tags.splice(this.tags.indexOf(tag), 1)
     },
-    ...mapUserActions(['upDateRoleList']),
-    addTag (tag) {
-      // 调用添加绑定角色接口
-      this.tags.push(tag)
-      this.upDateRoleList(tag)
+    addTag (tag) { // 调用添加绑定角色接口
+      if (!this.tags.filter(x => x.RoleId === tag.RoleId)[0]) {
+        this.tags.push({
+          RoleId: tag.RoleId,
+          RoleName: tag.RoleName
+        })
+      }
     },
     getRole () { // 绑定角色搜索事件，发送请求搜索角色列表
-      console.log(this.postData.searchData)
+      this.$ajax(this.$api.caseManager.getRolesList.url, {
+        method: this.$api.caseManager.getRolesList.method,
+        data: this.postData
+      }).then(res => {
+        this.searchTagList = res.list
+      })
     }
   }
 }

src/store/index.js

 const store = new Vuex.Store({
   state: {
     loadding: false,
+    pageSize: 10,
   }
 })
 Vuex.Store.prototype.$api = api
 Vuex.Store.prototype.$ajax = Ajax
 export const modules = {
   app: () => require('./app').default,
-  cms: () => require('./cms').default
+  cms: () => require('./cms').default,
+  role: () => require('./system/role').default,
 }
 
 Object.keys(modules).forEach((modKey) => {

src/store/system/role.js

+import ajax from '../../util/ajax'
+import api from '../../util/api'
+
+export default {
+  namespaced: true,
+  state: {
+    roleList: [],
+    roleInfo: {},
+  },
+  mutations: {
+    updateList (state, payload) {
+      state.roleList = payload || []
+    },
+    updateInfo (state, payload) {
+      state.roleInfo = payload || {}
+    },
+  },
+  actions: {
+    GetRolesList ({ commit }, payload) {
+      ajax(api.role.list.url, {
+        method: api.role.list.method,
+        queryData: {
+          ...payload,
+        }
+      }).then(res => {
+        commit('updateList', res)
+      })
+    },
+    GetRoleByID ({ commit }, { roleid }) {
+      ajax(api.role.info.url, {
+        method: api.role.info.method,
+        urlData: {
+          id: roleid,
+        }
+      }).then(res => {
+        commit('updateInfo', res)
+      })
+    },
+    AddRole ({ commit }, payload) {
+      ajax(api.role.add.url, {
+        method: api.role.add.method,
+        data: {
+          ...payload
+        }
+      }).then(res => {
+        commit('updateInfo', res)
+      })
+    },
+    UpdateRole ({ commit }, payload) {
+      ajax(api.role.update.url, {
+        method: api.role.update.method,
+        data: {
+          ...payload
+        }
+      }).then(res => {
+      })
+    },
+    DelRole ({ commit }, payload) {
+      ajax(api.role.delete.url, {
+        method: api.role.delete.method,
+        data: {
+          ...payload
+        }
+      }).then(res => {
+      })
+    },
+    SetRoleNull ({ commit }) {
+      commit('updateInfo', {})
+    }
+  }
+}

src/style/main.css

   margin-right: 20px;
 }
 
+.el-tag{
+  height: 40px;
+  line-height: 40px;
+  margin-bottom: 10px;
+}
+
 
 
 

src/util/api.js

 const baseUrl = '/api'
+const common = '/common'
+const guest = '/guest'
+
 const $api = {
   login: { // 登陆
     signin: {
       method: 'post',
-      url: `${baseUrl}/guest/signin`
+      url: `${baseUrl}${guest}/signin`
     }
   },
   system: {
     init: { // 初始化菜单
       method: 'get',
-      url: `${baseUrl}/common/system/init`
+      url: `${baseUrl}${common}/system/init`
     }
   },
+  systemSet: {
+    getUserList: { // 获取用户列表
+      method: 'get',
+      url: `${baseUrl}/common/user`
+    },
+    getUserInfo: { // 获取用户信息
+      method: 'get',
+      url: `${baseUrl}/common/user/:id`
+    },
+    addUser: { // 新增用户
+      method: 'post',
+      url: `${baseUrl}/common/user`
+    },
+    editUser: { // 更新用户
+      method: 'put',
+      url: `${baseUrl}/common/user`
+    },
+    deleteUser: { // 删除用户
+      method: 'delete',
+      url: `${baseUrl}/common/user/:id`
+    },
+    bindRoles: { // 绑定角色
+      method: 'put',
+      url: `${baseUrl}/common/userrole`
+    },
+    getUserRoles: { // 获取用户绑定角色
+      method: 'get',
+      url: `${baseUrl}/common/userrole`
+    },
+  },
   channelManager: {
     getChannelList: { // 渠道列表
       method: 'get',
-      url: `${baseUrl}/common/`
+      url: `${baseUrl}${common}/`
     },
   },
   caseManager: {
+    getRolesList: { // 获取角色列表
+      method: 'get',
+      url: `${baseUrl}/common/role`
+    },
     getCaseList: { // 获取案场列表
       method: 'get',
-      url: `${baseUrl}/common/case/info`
+      url: `${baseUrl}${common}/case/info`
     },
     addCase: { // 新增案场
       method: 'post',
-      url: `${baseUrl}/common/case/info`
+      url: `${baseUrl}${common}/case/info`
     },
     getCaseInfo: { // 查询案场
       method: 'get',
-      url: `${baseUrl}/common/case/info/:id`
+      url: `${baseUrl}${common}/case/info/:id`
     },
     editCase: { // 编辑案场
       method: 'put',
-      url: `${baseUrl}/common/case/info/:id`
+      url: `${baseUrl}${common}/case/info/:id`
+    },
+    getCaseUserList: { // 获取案场相关人员列表
+      method: 'get',
+      url: `${baseUrl}${common}/case/user`
+    },
+    getCaseUserInfo: { // 获取案场相关人员信息
+      method: 'get',
+      url: `${baseUrl}${common}/case/user/:id`
+    },
+    addCaseUser: { // 新增案场相关人员
+      method: 'post',
+      url: `${baseUrl}${common}/case/user`
+    },
+    editCaseUser: { // 更新案场相关人员
+      method: 'put',
+      url: `${baseUrl}${common}/case/user`
     },
     getKeyList: { // 获取钥匙列表
       method: 'get',
-      url: `${baseUrl}/common/case/key`
+      url: `${baseUrl}${common}/case/key`
     },
     addKey: { // 新增钥匙
       method: 'post',
-      url: `${baseUrl}/common/case/key`
+      url: `${baseUrl}${common}/case/key`
     },
     cancelKey: { // 取消钥匙
       method: 'put',
-      url: `${baseUrl}/common/case/unlock/:id`
+      url: `${baseUrl}${common}/case/unlock/:id`
     },
     getCaseAreaList: { // 获取案场区域列表
       method: 'get',
-      url: `${baseUrl}/common/case/area`
+      url: `${baseUrl}${common}/case/area`
     },
     addCaseArea: { // 新增案场区域
       method: 'post',
-      url: `${baseUrl}/common/case/area`
+      url: `${baseUrl}${common}/case/area`
     },
     deleteCaseArea: { // 删除案场区域
       method: 'delete',
-      url: `${baseUrl}/common/case/area/:id`
+      url: `${baseUrl}${common}/case/area/:id`
     },
     getCaseAreaInfo: { // 获取案场区域信息
       method: 'get',
-      url: `${baseUrl}/common/case/area/:id`
+      url: `${baseUrl}${common}/case/area/:id`
     },
     editCaseArea: { // 更新案场区域信息
       method: 'put',
-      url: `${baseUrl}/common/case/area`
+      url: `${baseUrl}${common}/case/area`
     },
     getCaseTableList: { // 获取案场桌位列表
       method: 'get',
-      url: `${baseUrl}/common/case/table`
+      url: `${baseUrl}${common}/case/table`
     },
     addCaseTable: { // 新增案场桌位
       method: 'post',
-      url: `${baseUrl}/common/case/table`
+      url: `${baseUrl}${common}/case/table`
     },
     getCaseTableInfo: { // 查询案场桌位信息
       method: 'get',
-      url: `${baseUrl}/common/case/table/:id`
+      url: `${baseUrl}${common}/case/table/:id`
     },
     editCaseTable: { // 更新案场桌位信息
       method: 'put',
-      url: `${baseUrl}/common/case/table`
+      url: `${baseUrl}${common}/case/table`
     },
     deleteCaseTable: { // 删除案场桌位信息
       method: 'delete',
-      url: `${baseUrl}/common/case/table/:id`
+      url: `${baseUrl}${common}/case/table/:id`
     },
     getCaseTagList: { // 获取案场标签列表
       method: 'get',
-      url: `${baseUrl}/common/case/tag`
+      url: `${baseUrl}${common}/case/tag`
     },
     addCaseTag: { // 新增案场标签
       method: 'post',
-      url: `${baseUrl}/common/case/tag`
+      url: `${baseUrl}${common}/case/tag`
     },
     getTagInfo: { // 获取案场标签信息
       method: 'get',
-      url: `${baseUrl}/common/case/tag/:id`
+      url: `${baseUrl}${common}/case/tag/:id`
     },
     deleteCaseTag: { // 删除案场标签
       method: 'delete',
-      url: `${baseUrl}/common/case/tag/:id`
+      url: `${baseUrl}${common}/case/tag/:id`
+    },
+    getUserTypeList: { // 获取用户类型列表
+      method: 'get',
+      url: `${baseUrl}/common/usertype`
     },
   },
   goodsManager: {
     getGoodsSpecList: { // 商品规格列表
       method: 'get',
-      url: `${baseUrl}/common/spec/goods`
+      url: `${baseUrl}${common}/spec/goods`
     },
     addGoodsSpec: { // 新增商品规格
       method: 'post',
-      url: `${baseUrl}/common/spec/goods`
+      url: `${baseUrl}${common}/spec/goods`
     },
     getGoodsSpecById: { // 根据id获取商品规格
       method: 'get',
-      url: `${baseUrl}/common/spec/goods/:id`
+      url: `${baseUrl}${common}/spec/goods/:id`
     },
     editGoodsSpec: { // 编辑商品规格
       method: 'put',
-      url: `${baseUrl}/common/spec/goods/:id`
+      url: `${baseUrl}${common}/spec/goods/:id`
     },
     deleteGoodsSpec: { // 删除商品规格
       method: 'delete',
-      url: `${baseUrl}/common/spec/goods/:id`
+      url: `${baseUrl}${common}/spec/goods/:id`
     },
     getGoodsTypeList: { // 商品种类列表
       method: 'get',
-      url: `${baseUrl}/common/type/goods`
+      url: `${baseUrl}${common}/type/goods`
     },
     addGoodsType: { // 新增商品种类
       method: 'post',
-      url: `${baseUrl}/common/type/goods`
+      url: `${baseUrl}${common}/type/goods`
     },
     getGoodsTypeById: { // 根据id获取商品种类
       method: 'get',
-      url: `${baseUrl}/common/type/goods/:id`
+      url: `${baseUrl}${common}/type/goods/:id`
     },
     editGoodsType: { // 编辑商品种类
       method: 'put',
-      url: `${baseUrl}/common/type/goods/:id`
+      url: `${baseUrl}${common}/type/goods/:id`
     },
     deleteGoodsType: { // 删除商品种类
       method: 'delete',
-      url: `${baseUrl}/common/type/goods/:id`
+      url: `${baseUrl}${common}/type/goods/:id`
     },
   },
   cms: {
     location: { // 图片位置
       method: 'get',
-      url: `${baseUrl}/common/cms/location`
+      url: `${baseUrl}${common}/cms/location`
     },
     imageList: { // 轮播图列表
       method: 'get',
-      url: `${baseUrl}/common/cms/image`
+      url: `${baseUrl}${common}/cms/image`
     },
     imageDetail: { // 轮播图详情
       method: 'get',
-      url: `${baseUrl}/common/cms/image/:id`
+      url: `${baseUrl}${common}/cms/image/:id`
     },
     addImage: { // 添加轮播图
       method: 'post',
-      url: `${baseUrl}/common/cms/image`
+      url: `${baseUrl}${common}/cms/image`
     },
     editImage: { // 编辑轮播图
       method: 'put',
-      url: `${baseUrl}/common/cms/image/:id`
+      url: `${baseUrl}${common}/cms/image/:id`
     },
     deleteDetail: { // 删除轮播图
       method: 'delete',
-      url: `${baseUrl}/common/cms/image/:id`
+      url: `${baseUrl}${common}/cms/image/:id`
     },
     case: { // 首页案场列表
       method: 'get',
-      url: `${baseUrl}/common/cms/case`
+      url: `${baseUrl}${common}/cms/case`
     },
     caseDetail: { // 首页案场详情
       method: 'get',
-      url: `${baseUrl}/common/cms/case/:id`
+      url: `${baseUrl}${common}/cms/case/:id`
     },
     addCase: { // 添加首页案场
       method: 'post',
-      url: `${baseUrl}/common/cms/case`
+      url: `${baseUrl}${common}/cms/case`
     },
     editCase: { // 添加首页案场
       method: 'put',
-      url: `${baseUrl}/common/cms/case/:id`
+      url: `${baseUrl}${common}/cms/case/:id`
     },
     deleteCase: { // 添加首页案场
       method: 'delete',
-      url: `${baseUrl}/common/cms/case/:id`
+      url: `${baseUrl}${common}/cms/case/:id`
     },
     info: { // 首页消息列表
       method: 'get',
-      url: `${baseUrl}/common/cms/info`
+      url: `${baseUrl}${common}/cms/info`
     },
     infoDetail: { // 首页消息详情
       method: 'get',
-      url: `${baseUrl}/common/cms/info/:id`
+      url: `${baseUrl}${common}/cms/info/:id`
     },
     addInfo: { // 新增首页消息
       method: 'post',
-      url: `${baseUrl}/common/cms/info`
+      url: `${baseUrl}${common}/cms/info`
     },
     editInfo: { // 编辑首页消息
       method: 'put',
-      url: `${baseUrl}/common/cms/info/:id`
+      url: `${baseUrl}${common}/cms/info/:id`
     },
     deleteInfo: { // 删除首页消息
       method: 'delete',
-      url: `${baseUrl}/common/cms/info/:id`
+      url: `${baseUrl}${common}/cms/info/:id`
     },
     news: { // 咨讯列表
       method: 'get',
-      url: `${baseUrl}/common/cms/news`
+      url: `${baseUrl}${common}/cms/news`
     },
     newsDetail: { // 咨讯详情
       method: 'get',
-      url: `${baseUrl}/common/cms/news/:id`
+      url: `${baseUrl}${common}/cms/news/:id`
     },
     addNews: { // 新增咨讯
       method: 'post',
-      url: `${baseUrl}/common/cms/news`
+      url: `${baseUrl}${common}/cms/news`
     },
     editNews: { // 编辑咨讯
       method: 'put',
-      url: `${baseUrl}/common/cms/news/:id`
+      url: `${baseUrl}${common}/cms/news/:id`
     },
     deleteNews: { // 删除咨讯
       method: 'delete',
-      url: `${baseUrl}/common/cms/news/:id`
+      url: `${baseUrl}${common}/cms/news/:id`
     },
     caseShow: { // 前台展示
       method: 'put',
-      url: `${baseUrl}/common/cms/caseshow/:id`
+      url: `${baseUrl}${common}/cms/caseshow/:id`
     },
     caseHide: { // 取消前台展示
       method: 'put',
-      url: `${baseUrl}/common/cms/casehide/:id`
+      url: `${baseUrl}${common}/cms/casehide/:id`
     }
   },
   file: {
     image: { // 图片上传
       method: 'post',
-      url: `${baseUrl}/common/file`
+      url: `${baseUrl}${common}/file`
     }
-  }
+  },
+  role: {
+    list: {
+      method: 'get',
+      url: `${baseUrl}${common}/role`
+    },
+    info: {
+      method: 'get',
+      url: `${baseUrl}${common}/role/:id`
+    },
+    add: {
+      method: 'post',
+      url: `${baseUrl}${common}/role`
+    },
+    update: {
+      method: 'put',
+      url: `${baseUrl}${common}/role`
+    },
+    delete: {
+      method: 'delete',
+      url: `${baseUrl}${common}/role/:id`
+    },
+  },
 }
 export default $api