plat-admin/src/views/sysSetting/platUser/editUser.vue

<template>
  <el-dialog :title="operateM.tit" :visible.sync="userDialogVisible">
    <el-form
      :model="userForm"
      :rules="userRules"
      ref="userForm"
      class="form-main"
      label-width="80px">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item v-if="activeShow" label="账号状态">
            <span>{{actived?'正常账号':'停用账号'}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="item.span||''" v-for="item in formItem" :key="item.index">
          <el-form-item v-if="readonlyShow && !item.right" v-show="userForm[item.prop]" :label="item.tit">
            <span>{{userForm[item.prop]}}</span>
          </el-form-item>
          <el-form-item v-if="!readonlyShow && !item.right" :label="item.tit" :prop="item.prop">
            <el-input v-model="userForm[item.prop]" :placeholder="`请填写${item.tit}`" :maxlength="item.num||''"></el-input>
          </el-form-item>
          <el-form-item v-if="readonlyShow && viewShow && item.right" v-show="userForm[item.prop]" label="权限">
            <span>{{rightCodeShow(userForm[item.prop])}}</span>
          </el-form-item>
          <el-form-item v-if="item.right && !activeShow && !viewShow" :prop="item.prop" label-width="0">
            <template>
              <el-card shadow="never">
                <div class="card-title" slot="header">
                  <span>{{item.tit}}</span>
                </div>
                <el-checkbox-group
                  v-model="userForm[item.prop]"
                  :min="1"
                  :max="moduleOption.length"
                  @change="handleCheckedChange">
                  <el-checkbox v-for="mod in moduleOption" :label="mod.id" :key="mod.index">{{mod.name}}</el-checkbox>
                </el-checkbox-group>
              </el-card>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="el-btn-col">
          <div class="el-btn-col-box">
            <el-button v-if="viewShow" type="primary" @click="userDialogVisible=false">确定</el-button>
            <el-button v-else type="primary" @click="submitForm('userForm')">保存</el-button>
          </div>
        </el-col>
        <el-col :span="24" v-if="timeShow">
          <el-form-item align="right">
            <span>创建时间: {{createTime}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
  import { parseTime } from '@/utils'
  import {
    requiredTip,
    limitNumTip,
    checkEmailV
  } from '@/utils/validator'
  import {
    existUser,
    addUser,
    updateUser,
    updatePermission,
    queryUserOne
  } from '@/api/sysSetting'

  export default {
    props: ['operateM'],
    data() {
      return {
        userDialogVisible: false,
        moduleOption: [
          { id: '1', name: '内容发布' },
          { id: '2', name: '特约专家' },
          { id: '3', name: '合作机构' },
          { id: '4', name: '企业中心' },
          { id: '5', name: '平台信息' },
          { id: '6', name: '用户信息' },
          { id: '7', name: '需求中心' },
          { id: '8', name: '统计' }
        ],
        userId: '',
        actived: 0,
        oldAccount: '',
        createTime: '',
        formItem: [
          {
            span: 12,
            prop: 'account',
            tit: '账号',
            num: 20,
            required: true
          },
          {
            span: 12,
            prop: 'name',
            tit: '用户名',
            required: true
          },
          {
            span: 12,
            prop: 'phone',
            tit: '联系电话',
            num: 20,
            required: true
          },
          {
            span: 12,
            prop: 'email',
            tit: '联系邮箱',
            num: 50
          },
          {
            span: 12,
            prop: 'job',
            tit: '职位',
            num: 20
          },
          {
            span: 12,
            prop: 'dep',
            tit: '所在部门',
            num: 20
          },
          {
            span: 24,
            prop: 'comp',
            tit: '所在机构',
            num: 50
          },
          {
            span: 24,
            prop: 'rightCode',
            tit: '分配权限',
            right: true,
            required: true
          }
        ],
        userForm: {
          account: '',
          name: '',
          phone: '',
          email: '',
          job: '',
          dep: '',
          comp: '',
          rightCode: []
        },
        userRules: {}
      }
    },
    computed: {
      readonlyShow() {
        if (this.operateM.type === 'right' || this.operateM.type === 'view') {
          return true
        } else {
          return false
        }
      },
      viewShow() {
        return this.operateM.type === 'view' || false
      },
      activeShow() {
        return this.operateM.type === 'edit' || false
      },
      timeShow() {
        return this.operateM.type !== 'add' || false
      }
    },
    watch: {
      userDialogVisible(val) {
        !val && setTimeout(() => {
          if (!this.operateM.type === 'right') {
            this.$refs['userForm'].resetFields()
          }
          this.$refs['userForm'].clearValidate()
        }, 0)
      }
    },
    created() {
      this.pushRulesFn()
    },
    methods: {
      getUserDetail(id) {
        var that = this
        that.userId = id
        if (that.userId) {
          that.$http.get(queryUserOne, {
            id: that.userId
          }, function(res) {
            if (res.success) {
              const opeRow = res.data
              if (opeRow.createTime) {
                that.createTime = parseTime(opeRow.createTime)
              }
              that.actived = opeRow.actived
              that.oldAccount = opeRow.account
              that.userForm = {
                account: opeRow.account,
                name: opeRow.name,
                phone: opeRow.phone,
                email: opeRow.email,
                job: opeRow.job,
                dep: opeRow.dep,
                comp: opeRow.comp,
                rightCode: opeRow.rightCode ? opeRow.rightCode : []
              }
            }
          })
        } else {
          this.actived = 0
          this.createTime = ''
          this.userForm = {
            account: '',
            name: '',
            phone: '',
            email: '',
            job: '',
            dep: '',
            comp: '',
            rightCode: []
          }
        }
        setTimeout(function() {
          that.userDialogVisible = true
        }, 0)
      },
      pushRulesFn() {
        const formItem = this.formItem
        const userRules = this.userRules
        for (let i = 0; i < formItem.length; ++i) {
          const ru = []
          if (formItem[i].required) {
            ru.push({ required: true, message: requiredTip(formItem[i].tit), trigger: 'blur' })
          }
          if (formItem[i].num) {
            ru.push({ max: formItem[i].num, message: limitNumTip(formItem[i].tit, formItem[i].num), trigger: 'blur, change' })
          }
          switch (formItem[i].prop) {
            case 'email':
              ru.push({ validator: checkEmailV, trigger: 'blur' })
              break
          }
          userRules[formItem[i].prop] = ru
        }
      },
      isExistUserFn(fn) {
        var that = this
        var opeRow = that.userForm
        this.$http.get(existUser, {
          account: opeRow.account
        }, function(res) {
          if (res.success) {
            if (res.data) {
              that.$message({
                message: '账户已存在，请重新输入',
                type: 'warning'
              })
              return false
            } else {
              fn()
            }
          }
        })
      },
      rightCodeShow(code) {
        if (!code) {
          return
        }
        var codeShow = []
        for (let i = 0; i < code.length; ++i) {
          const nowC = this.moduleOption.find((item) => {
            return item.id === code[i]
          })
          codeShow.push(nowC.name)
        }
        return codeShow.join('，')
      },
      submitForm(formName) {
        var that = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var opeRow = that.userForm
            var paramsData = {
              account: opeRow.account,
              name: opeRow.name,
              phone: opeRow.phone,
              email: opeRow.email,
              job: opeRow.job,
              dep: opeRow.dep,
              comp: opeRow.comp,
              rightCode: opeRow.rightCode
            }
            if (that.operateM.type === 'add') {
              that.isExistUserFn(function() {
                that.$http.post(addUser, paramsData, function(res) {
                  if (res.success) {
                    that.successFun()
                  }
                })
              })
            } else if (that.operateM.type === 'edit') {
              const paramsId = { id: that.userId }
              const obj = Object.assign(paramsId, paramsData)
              if (that.oldAccount === opeRow.account) {
                that.$http.put(updateUser, obj, function(res) {
                  if (res.success) {
                    that.successFun()
                  }
                })
              } else {
                that.isExistUserFn(function() {
                  that.$http.put(updateUser, obj, function(res) {
                    if (res.success) {
                      that.successFun()
                    }
                  })
                })
              }
            } else if (that.operateM.type === 'right') {
              that.$http.put(updatePermission + that.userId, opeRow.rightCode, function(res) {
                if (res.success) {
                  that.successFun()
                }
              })
            }
          } else {
            return false
          }
        })
      },
      successFun() {
        this.userDialogVisible = false
        this.$refs['userForm'].resetFields()
        this.$parent.dialogChanged()
      },
      handleCheckedChange(value) {
        this.userForm.rightCode = value
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .el-card__header{
    padding: 8px 15px;
    .card-title{
      font-size: 18px;
      font-weight: bold;
      span:before{
        content: '*';
        color: #f56c6c;
        margin-right: 4px;
      }
    }
  }
  .el-checkbox-group{
    .el-checkbox{
      font-size: 16px;
      margin: 10px 60px;
      .el-checkbox__inner{
        width: 16px;
        height: 16px;
      }
      .el-checkbox__inner::after{
        left:5px;
        top:2px;
      }
      .el-checkbox__label{
        line-height:24px;
        font-size:16px;
      }
    }
  }
</style>