xcx

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/style/main.css

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

src/util/api.js

       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',
     },
   },
   caseManager: {
+    getRolesList: { // 获取角色列表
+      method: 'get',
+      url: `${baseUrl}/common/role`
+    },
     getCaseList: { // 获取案场列表
       method: 'get',
       url: `${baseUrl}/common/case/info`
       method: 'delete',
       url: `${baseUrl}/common/case/tag/:id`
     },
+    getUserTypeList: { // 获取用户类型列表
+      method: 'get',
+      url: `${baseUrl}/common/usertype`
+    },
   },
   goodsManager: {
     getGoodsSpecList: { // 商品规格列表