user_authentication/src/views/userManage/UserListDetail.vue

<template>
  <div class="height-100">
    <el-card class="card-detail-title margin-bottom-20">
      <span v-if="pageType==='detail'">用户查看</span>
      <span v-if="pageType==='edit'">用户编辑</span>
      <span v-if="pageType==='add'">用户新增</span>
    </el-card>
    <el-card class="card-detail-main-title">
      <div slot="header">
        <span class="list-title">用户信息</span>
      </div>
      <el-form ref="form" class="form-detail my-form" label-width="20%" :model="form" size="medium" :rules="rule" :hide-required-asterisk="pageType==='detail'">
        <el-row>
          <el-col :span="12" :offset="6">
            <el-form-item label="账号" prop="userName">
              <el-input v-model="form.userName" :disabled="pageType!=='add'"/>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="12" :offset="6">
            <el-form-item label="工号" prop="jobNum">
              <el-input v-model="form.jobNum" :disabled="pageType==='detail'"/>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="12" :offset="6">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" :disabled="pageType==='detail'"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" :offset="6">
            <el-form-item label="组织机构" prop="unitId">
              <el-select v-model="form.unitId" placeholder="请选择" filterable :disabled="pageType==='detail'">
                <el-option v-for="item in departmentArr" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" :offset="6">
            <el-form-item label="联系电话">
              <el-input v-model="form.contact" :disabled="pageType==='detail'"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" :offset="6">
            <el-form-item label="用户角色">
              <el-select v-model="form.roleArr" multiple placeholder="无" :disabled="pageType==='detail'">
                <el-option v-for="item in roleArr" :key="item.roleId" :label="item.roleName" :value="item.roleId"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="card-button-bottom">
      <el-button v-if="pageType!=='detail'" type="primary" size="medium" @click="save">保存</el-button>
      <el-button size="medium" @click="close">返回</el-button>
    </el-card>
  </div>
</template>

<script>
  import { GetUserInfoById, UpdateUserRole, GetDepartmentTree, AddUser } from '../../utils/service/user'
  import { GetRoleList } from '../../utils/service/role'

  export default {
    name: "UserListDetail",
    data() {
      return {
        form: {
          userName: '',
          name: '',
          unitId: '',
          contact: '',
          roleArr: [],
        },
        roleArr: [],
        treeData: [],
        rule: {
          userName: [{ required: true, message: '请输入账号', trigger: 'blur' }],
          name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
          unitId: [{ required: true, message: '请选择组织机构', trigger: 'blur' }],
        }
      }
    },
    computed: {
      pageType() {
        let flag = ''
        switch (this.$route.name) {
          case 'UserListDetail': 
            flag = 'detail'
            break
          case 'UserListEdit':
            flag = 'edit'
            break
          case 'UserListAdd':
            flag = 'add'
            break
        }
        return flag
      },
      departmentArr() {
        let arr = []
        this.treeData.forEach(level1 => {
          arr.push({id: level1.id, name: level1.departmentname})
          if(level1.children && level1.children.length > 0) {
            level1.children.forEach(level2 => {
              arr.push({id: level2.id, name: level1.departmentname+'-'+level2.departmentname})
              if(level2.children && level2.children.length > 0) {
                level2.children.forEach(level3 => {
                  arr.push({id: level3.id, name: level1.departmentname+'-'+level2.departmentname+'-'+level3.departmentname})
                })
              }
            })
          }
        })
        return arr
      }
    },
    methods: {
      save() {
        this.$refs['form'].validate((valid => {
          if(valid) {
            if(this.pageType==='add') {
              AddUser(this.form).then(res => {
                if(res.code == 200) {
                  this.$message({type: 'success', message: '用户添加成功'});
                  this.$router.push({
                    name: "UserList"
                  })
                } else {
                  this.$message({type: 'error', message: '用户添加失败, '+res.msg});
                }
              })
            } else if(this.pageType==='edit') {
              UpdateUserRole({userId: this.$route.params.id, ...this.form}).then(res => {
                if (res.code == 200) {
                  this.$message({type: 'success', message: '用户修改成功'});
                  this.$router.push({
                    name: "UserList"
                  })
                } else {
                  this.$message({type: 'error', message: '用户修改失败'});
                }
              })
            }

            
          }
        }))
      },
      close() {
        this.$router.push({
          name: "UserList"
        })
      },
      getRoleList() {
        GetRoleList(1000, 1).then(res => {
          if(res.code == 200) {
            this.roleArr = res.data.Rows
          }
        })
      },
      getUserInfo() {
        if(this.pageType==='add') { return }
        GetUserInfoById(this.$route.params.id).then(res => {
          if(res.code == 200) {
            let formTemp = JSON.parse(JSON.stringify(res.data))
            formTemp.role = []
            if(res.data.role[0]) {
              res.data.role.forEach(i => {
                formTemp.role.push(i.roleId)
              })
            }
            this.form = {
              userName: formTemp.userName,
              name: formTemp.lastName,
              unitId: formTemp.unitId,
              contact: formTemp.mobile,
              roleArr: formTemp.role,
            }
          }
        })
      },
      getTreeData() {
        GetDepartmentTree().then(res => {
          if(res.code == 200) {
            this.treeData = res.data.data
          }
        })
      },
    },
    created() {
      this.getRoleList()
      this.getUserInfo()
      this.getTreeData()
    }
  }
</script>

<style scoped lang="scss">
.my-form {
  height: 85%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  ::v-deep .el-form-item{
    margin-bottom: 0;
    .el-form-item__label {
      text-align: right;
    }
  } 
}

</style>