用户

src/router/modules/sys.js

@@ -81,22 +81,22 @@ const sysRouter = {
           path: 'list',
           hidden: true,
           component: () => import('@/views/sys/users/list.vue'),
-          name: 'SysUsers',
-          meta: { title: '角色列表' }
+          name: 'SysUsersList',
+          meta: { title: '用户列表' }
         },
         {
           path: 'add',
           hidden: true,
-          component: () => import('@/views/sys/users/add.vue'),
-          name: 'SysRoles',
-          meta: { title: '添加角色' }
+          component: () => import('@/views/sys/users/form.vue'),
+          name: 'SysUsersEdit',
+          meta: { title: '添加用户' }
         },
         {
-          path: 'update',
+          path: 'edit',
           hidden: true,
-          component: () => import('@/views/sys/users/update.vue'),
-          name: 'SysRoles',
-          meta: { title: '编辑角色' }
+          component: () => import('@/views/sys/users/form.vue'),
+          name: 'SysUsersEdit',
+          meta: { title: '编辑用户' }
         }
       ]
     },

src/views/login/index.vue

@@ -7,7 +7,6 @@
       <div class="title-container">
         <h3 class="title">采美后台登录</h3>
       </div>
-
       <el-form-item prop="username">
         <span class="svg-container">
           <svg-icon icon-class="user" />
@@ -250,7 +249,7 @@ export default {
 
     .login-form {
       position: relative;
-      width: 520px;
+      width: 400px;
       max-width: 100%;
       padding: 160px 35px 0;
       margin: 0 auto;

src/views/sys/roles/form.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-page-header @back="goBack" :content="isEdit?'编辑角色':'添加角色'" />
+    <el-page-header :content="isEdit?'编辑角色':'添加角色'" @back="goBack" />
     <el-card class="form-container" shadow="never">
       <el-form ref="roleFrom" :model="role" :rules="rules" label-width="150px">
         <el-form-item label="角色名称：" prop="roleName">
@@ -10,7 +10,7 @@
           <el-input v-model="role.roleDesc" maxlength="20" />
         </el-form-item>
         <el-form-item label="角色授权：">
-          <el-tree ref="tree" :data="menuTree" node-key="id" :props="menuProps" @check-change="handleTreeChange" show-checkbox default-expand-all check-strictly="true" />
+          <el-tree ref="tree" :data="menuTree" node-key="id" :props="menuProps" show-checkbox default-expand-all check-strictly="true" @check-change="handleTreeChange" />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="onSubmit('roleFrom')">提交</el-button>
@@ -150,4 +150,4 @@ export default {
 </script>
 
 <style scoped>
-</style>
+</style>

src/views/sys/roles/list.vue

@@ -81,7 +81,7 @@ export default {
       this.$router.push({ path: '/sys/roles/add' })
     },
     handleUpdate(row) {
-      this.$router.push({ path: '/sys/roles/edit', query: { id: row.id } })
+      this.$router.push({ path: '/sys/roles/edit', query: { id: row.id }})
     },
     handleDelete(row) {
       this.$confirm('是否要删除该角色', '提示', {

src/views/sys/users/add.vue

@@ -1,13 +0,0 @@
-<template>
-  <users-detail :is-edit="false" />
-</template>
-<script>
-import UsersDetail from './components/usersDetail'
-export default {
-  name: 'AddUsers',
-  components: { UsersDetail }
-}
-</script>
-<style>
-</style>
-

src/views/sys/users/components/usersDetail.vue

@@ -1,211 +0,0 @@
-/* eslint-disable vue/require-v-for-key */
-<template>
-  <el-card class="form-container" shadow="never">
-    <el-form ref="usersFrom" :model="dusersFrom" :rules="rules" label-width="150px">
-      <el-form-item label="用户头像">
-        <single-upload v-model="dusersFrom.icon" />
-      </el-form-item>
-      <el-form-item label="归属公司">
-        <el-select v-model="dusersFrom.parentId" placeholder="请选择公司" @change="changeAttrdusersFrom">
-          <el-option v-for="item in selectdusersFromList" :key="item.id" :label="item.name" :value="item.id" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="归属部门">
-        <el-select v-model="dusersFrom.parentId" placeholder="请选择部门" @change="changeAttrdusersFrom">
-          <el-option v-for="item in selectdusersFromList" :key="item.id" :label="item.name" :value="item.id" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="工号：" prop="number">
-        <el-input v-model="dusersFrom.name" />
-      </el-form-item>
-      <el-form-item label="姓名：" prop="name">
-        <el-input v-model="dusersFrom.name" />
-      </el-form-item>
-      <el-form-item label="登录名：" prop="userName">
-        <el-input v-model="dusersFrom.name" />
-      </el-form-item>
-      <el-form-item label="密码：" prop="password">
-        <el-input v-model="dusersFrom.productUnit" />
-      </el-form-item>
-      <el-form-item label="确认密码：" prop="password">
-        <el-input v-model="dusersFrom.productUnit" />
-      </el-form-item>
-      <el-form-item label="邮箱：">
-        <el-input v-model="dusersFrom.productUnit" />
-      </el-form-item>
-      <el-form-item label="电话：">
-        <el-input v-model="dusersFrom.productUnit" />
-      </el-form-item>
-      <el-form-item label="手机：">
-        <el-input v-model="dusersFrom.sort" />
-      </el-form-item>
-      <el-form-item label="是否阻止登录：">
-        <el-radio-group v-model="dusersFrom.showStatus">
-          <el-radio :label="1">是</el-radio>
-          <el-radio :label="0">否</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="用户类型">
-        <el-select v-model="dusersFrom.typeId" placeholder="请选择" @change="changeAttrdusersFrom">
-          <el-option v-for="item in selectUserTypeList" :key="item.id" :label="item.name" :value="item.id" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="备注：">
-        <el-input v-model="dusersFrom.description" type="textarea" :autosize="true" />
-      </el-form-item>
-      <el-form-item label="用户角色：">
-        <el-checkbox-group v-model="checkList">
-          <el-checkbox v-for="item in selectRolesList" :key="item" :label="item.name" class="littleMarginLeft" />
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit('usersFrom')">保存</el-button>
-        <el-button v-if="!isEdit" @click="resetForm('usersFrom')">返回</el-button>
-      </el-form-item>
-    </el-form>
-  </el-card>
-</template>
-
-<script>
-import SingleUpload from '@/components/Upload/singleUpload'
-
-const defaultUsersFrom = {
-  description: '',
-  icon: '',
-  keywords: '',
-  name: '',
-  navStatus: 0,
-  parentId: 0,
-  productUnit: '',
-  showStatus: 0,
-  sort: 0,
-  productAttributeIdList: []
-}
-export default {
-  name: 'UsersFromDetail',
-  components: { SingleUpload },
-  filters: {
-    filterLabelFilter(index) {
-      if (index === 0) {
-        return '筛选属性：'
-      } else {
-        return ''
-      }
-    }
-  },
-  props: {
-    isEdit: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      dusersFrom: Object.assign({}, defaultUsersFrom),
-      selectUserTypeList: [
-        { name: '系统管理', typeId: 1 },
-        { name: '部门经理', typeId: 2 },
-        { name: '普通用户', typeId: 3 }
-      ],
-      rules: {
-        number: { required: true, message: '请输入工号', trigger: 'blur' },
-        name: [
-          { required: true, message: '请输入姓名', trigger: 'blur' },
-          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
-        ],
-        userName: [
-          { required: true, message: '请输入登录名', trigger: 'blur' },
-          { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
-        ],
-        password: [
-          { required: true, message: '请输入密码', trigger: 'blur' },
-          { min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur' }
-        ]
-      },
-      filterAttrs: [],
-      filterProductAttrList: [
-        {
-          value: []
-        }
-      ],
-      changOptionName: '',
-      selectRolesList: [
-        { name: 'aduit', id: 0 },
-        { name: '阿斯达', id: 0 },
-        { name: '电饭锅', id: 0 },
-        { name: '很反感和', id: 0 },
-        { name: '意义', id: 0 }
-      ],
-      checkList: ['选中且禁用', '复选框 A']
-    }
-  },
-  created() {
-    // eslint-disable-next-line no-empty
-    if (this.isEdit) {
-
-    } else {
-      this.dusersFrom = Object.assign({}, defaultUsersFrom)
-    }
-  },
-  methods: {
-    changeAttrdusersFrom(value) {
-      console.log(value)
-    },
-    onSubmit(formName) {
-      this.$refs[formName].validate(valid => {
-        if (valid) {
-          this.$confirm('是否提交数据', '提示', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }).then(() => {
-            if (this.isEdit) {
-              // updatedusersFrom(this.$route.query.id, this.dusersFrom).then(response => {
-              //   this.$message({
-              //     message: '修改成功',
-              //     type: 'success',
-              //     duration: 1000
-              //   })
-              //   this.$router.back()
-              // })
-            } else {
-              // createdusersFrom(this.dusersFrom).then(response => {
-              //   this.$refs[formName].resetFields()
-              //   this.resetForm(formName)
-              //   this.$message({
-              //     message: '提交成功',
-              //     type: 'success',
-              //     duration: 1000
-              //   })
-              // })
-            }
-          })
-        } else {
-          this.$message({
-            message: '验证失败',
-            type: 'error',
-            duration: 1000
-          })
-          return false
-        }
-      })
-    },
-    resetForm(formName) {
-      this.$refs[formName].resetFields()
-      this.dusersFrom = Object.assign({}, defaultUsersFrom)
-      this.getSelectdusersFromList()
-      this.filterProductAttrList = [
-        {
-          value: []
-        }
-      ]
-    }
-  }
-}
-</script>
-
-<style scoped>
-.form-container {
-  width: 800px;
-}
-</style>

src/views/sys/users/form.vue

@@ -0,0 +1,186 @@
+/* eslint-disable vue/require-v-for-key */
+<template>
+  <div class="app-container">
+    <el-page-header :content="isEdit?'编辑用户':'添加用户'" @back="goBack" />
+    <el-card class="form-container" shadow="never">
+      <el-form ref="usersFrom" :model="dusersFrom" :rules="rules" label-width="150px">
+        <el-form-item label="用户头像">
+          <single-upload v-model="dusersFrom.avatar" />
+        </el-form-item>
+        <el-form-item label="姓名：" prop="fullName">
+          <el-input v-model="dusersFrom.fullName" />
+        </el-form-item>
+        <el-form-item label="登录名：" prop="username">
+          <el-input v-model="dusersFrom.username" />
+        </el-form-item>
+        <el-form-item label="密码：" prop="password">
+          <el-input v-model="dusersFrom.password" />
+        </el-form-item>
+        <el-form-item label="手机：">
+          <el-input v-model="dusersFrom.phone" />
+        </el-form-item>
+        <el-form-item label="是否阻止登录：">
+          <el-radio-group v-model="dusersFrom.delFlag">
+            <el-radio :label="1">是</el-radio>
+            <el-radio :label="0">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="用户角色：">
+          <el-checkbox-group v-model="checkRoles" @change="handleCheckedRoles">
+            <el-checkbox v-for="item in selectRolesList" :key="item.id" :label="item.id" class="littleMarginLeft">{{ item.roleDesc }}</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="medium" @click="onSubmit('usersFrom')">保存</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+<script>
+import SingleUpload from '@/components/Upload/singleUpload'
+import { getUser, updateUser, createUser } from '@/api/user'
+import { fetchList } from '@/api/role'
+
+const defaultUsersFrom = {
+  avatar: '',
+  fullName: '',
+  username: '',
+  phone: '',
+  password: '',
+  roleIds: '',
+  delFlag: 0,
+  id: 0
+}
+export default {
+  name: 'UsersFromDetail',
+  components: { SingleUpload },
+  filters: {
+
+  },
+  data() {
+    return {
+      dusersFrom: Object.assign({}, defaultUsersFrom),
+      rules: {
+        fullName: [
+          { required: true, message: '请输入姓名', trigger: 'blur' },
+          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
+        ],
+        username: [
+          { required: true, message: '请输入登录名', trigger: 'blur' },
+          { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: '请输入密码', trigger: 'blur' },
+          { min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur' }
+        ]
+      },
+      listQuery: {
+        pageNum: 1,
+        pageSize: 50
+      },
+      selectRolesList: [],
+      checkRoles: []
+    }
+  },
+  watch: {
+    $route(route) {
+      this.getFormData()
+      this.getRolesList()
+    }
+  },
+  created() {
+    this.getFormData()
+    this.getRolesList()
+  },
+  methods: {
+    getFormData() {
+      if (this.$route.query.id) {
+        this.dusersFrom.id = this.$route.query.id
+        this.isEdit = true
+        getUser(this.role.id).then(response => {
+          this.dusersFrom.fullName = response.data
+          if (response.data.menuIds) {
+            const keys = []
+            response.data.menuIds.split(',').forEach(element => {
+              keys.push(element * 1)
+            })
+            console.log(keys)
+          }
+        })
+      } else {
+        this.dusersFrom.id = ''
+        this.isEdit = false
+        this.dusersFrom = Object.assign({}, defaultUsersFrom)
+      }
+    },
+    getRolesList() {
+      fetchList(this.listQuery).then(response => {
+        this.selectRolesList = response.data.results
+      })
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.$confirm('是否提交数据', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            if (this.isEdit) {
+              updateUser(this.$route.query.id, this.dusersFrom).then(response => {
+                this.$message({
+                  message: '修改成功',
+                  type: 'success',
+                  duration: 1000
+                })
+                this.$router.back()
+              })
+            } else {
+              createUser(this.dusersFrom).then(response => {
+                this.$refs[formName].resetFields()
+                this.resetForm(formName)
+                this.$message({
+                  message: '提交成功',
+                  type: 'success',
+                  duration: 1000
+                })
+              })
+            }
+          })
+        } else {
+          this.$message({
+            message: '验证失败',
+            type: 'error',
+            duration: 1000
+          })
+          return false
+        }
+      })
+    },
+    handleCheckedRoles() { // 选择角色
+      this.dusersFrom.roleIds = this.checkRoles.join(',')
+      console.log('=======>', this.dusersFrom.roleIds)
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+      this.dusersFrom = Object.assign({}, defaultUsersFrom)
+      this.getSelectdusersFromList()
+      this.filterProductAttrList = [
+        {
+          value: []
+        }
+      ]
+    },
+    goBack() {
+      window.history.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.form-container {
+  width: 800px;
+}
+</style>

src/views/sys/users/list.vue

@@ -90,12 +90,12 @@ export default {
         }, 1.5 * 1000)
       })
     },
-    handleUpdate(index, row) {
-      this.$router.push({ path: '/sys/users/update', query: { id: row.id } })
-    },
     handleCreate() {
       this.$router.push({ path: '/sys/users/add' })
     },
+    handleUpdate(row) {
+      this.$router.push({ path: '/sys/users/edit', query: { id: row.id }})
+    },
     handleDelete(index, row) {
       this.$confirm('是否要删除该用户', '提示', {
         confirmButtonText: '确定',

src/views/sys/users/update.vue

@@ -1,13 +0,0 @@
-<template>
-  <users-detail :is-edit="true" />
-</template>
-<script>
-import UsersDetail from './components/usersDetail'
-export default {
-  name: 'UpdateUsers',
-  components: { UsersDetail }
-}
-</script>
-<style>
-</style>
-