platformFront/src/components/admin/AddAdmin.vue

<template>
    <div>
        <!-------------面包屑-------------->
        <crumbs :title="`超级管理员信息-${isEdit?'修改':'添加'}超管`" :linkTo="link" :curPage="curPage">
        </crumbs>
        <!--------------表单--------------->
        <div class="contents">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="add-admin-form">
                <h4>基本信息</h4>
                <el-form-item label="机构名称" prop="organizationId">
                    <el-select v-if="!isEdit" v-model="form.organizationId" placeholder="请选择机构">
                        <el-option v-for="item in orgList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-input v-if="isEdit" v-model="orgName" placeholder="请输入手机号" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="userName" required>
                    <el-input v-model="form.userName" placeholder="请输入手机号" :disabled="isEdit?true:false" maxlength="11"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="passWord" v-if="!isEdit" required>
                    <el-input v-model="form.passWord" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="linkman" required>
                    <el-input v-model="form.linkman" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="所属岗位" prop="position" required>
                    <el-input v-model="form.position" placeholder="请输入所属岗位" ></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email" required>
                    <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" v-if="!isEdit" type="primary" @click="addAdmin">确定添加</el-button>
                    <el-button size="small" v-if="isEdit" type="primary" @click="editAdmin">确定修改</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
  import api from '@api/admin.js';
  import utils from '@api/utils.js';

  export default {
    name: 'add-admin',
    data: function () {
      const psdVaild = (rule,value,callback)=>{
        if (!value) {
          return callback(new Error('请输入密码'));
        }
        if (value.length > 16) {
           this.form.passWord = value.substr(0, 16);
           this.$message({
             showClose: true,
             type: 'warning',
             message: '密码最多可输入16个字'
           })
        }
        const pswReg = utils.pswReg;
        if (value.length<6||!pswReg.test(value)) {
          return callback(new Error('您设置的密码不符合规则~'));
        }
        
        callback();
      };
      const userNameVaild = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入姓名'));
        }
        if (value.length > 10) {
           this.form.linkman = value.substr(0, 10);
           this.$message({
             showClose: true,
             type: 'warning',
             message: '姓名最多可输入10个字'
           })
        }
        const contactReg = new RegExp(/[^\u4e00-\u9fa5]$/g);
        if (contactReg.test(value)) {
          return callback(new Error('姓名只能输入中文'));
        }else{
          callback();
        }
      };
      const phoneVaild = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入手机号'));
        }
        const phoneReg = utils.phoneReg;
        if (!phoneReg.test(value)) {
          return callback(new Error('请输入正确的手机号~'));
        }
        callback();
      };
      const positionVaild = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入所属岗位'));
        }
        if (value.length > 20) {
           this.form.position = value.substr(0, 20);
           this.$message({
             showClose: true,
             type: 'warning',
             message: '所属岗位最多可输入20个字'
           })
        }
        callback();
      };
      const emailVaild = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入邮箱'));
        }
        const emailReg = utils.emailReg;
        if (!emailReg.test(value)) {
          return callback(new Error('请输入正确的邮箱'));
        }
        callback();
      };
      return {
        orgList: [],
        isEdit:false,
        userId:'',
        link:'superAdmin',
        curPage:'1',
        orgName:'',
        form: {
          email: '',
          linkman: '',
          organizationId: '',
          passWord: '',
          position: '',
          userName: ''
        },
        rules: {
          organizationId:[
            { required: true, message: '请选择机构名称', trigger: 'change' }
          ],
          linkman:[
            { validator: userNameVaild, trigger: ['blur', 'change'] }
          ],
          passWord:[
            { validator: psdVaild, trigger: ['blur', 'change'] }
          ],
          position:[
            { validator: positionVaild, trigger: ['blur', 'change'] }
          ],
          userName: [
            {validator: phoneVaild, trigger: ['blur', 'change']}
          ],
          email: [
            {validator: emailVaild, trigger: ['blur', 'change']}
          ]
        }
      }
    },
    created() {
      this.getOrgList();
      const info = this.$route.params.info;
      const cur = this.$route.params&&this.$route.params.currentPage;
      if(cur){
        this.curPage = cur;
      }
      if(info){
        this.isEdit = true;
        this.orgName = info.orgName;
        this.link='/admin/LT-YRZCGXX';
        this.form.email = info.email;
        this.form.linkman = info.linkman;
        this.form.organizationId = info.orgId;
        this.form.position = info.position;
        this.form.userName = info.userName;
        this.form.userId = info.userId;
      }
    },
    methods: {
      getOrgList() {       //获取机构列表
        api.getOrgList({organizationName: ''}).then((res) => {
          if (res.data.code == '0') {
            this.orgList = res.data.data;
          }
        });
      },
      editAdmin(){
        this.$refs.form.validate((valid)=> {
          if (valid) {
            api.updateUserInfoAll(this.form).then((res) => {
              if (res.data.code == '0') {
                this.$message({showClose: true,message: "修改成功", type: 'success'});
                this.$router.push({path: '/admin/LT-YRZCGXX'});
              } else {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: 'warning'
                });
              }
            }).catch((error) => {
              this.$message({
                showClose: true,
                message: "服务器正忙...",
                type: 'warning'
              });
            })
          }
        });
      },
      addAdmin() {
        this.$refs.form.validate((valid)=>{
          if(valid){
            api.addAdmin(this.form).then((res) => {
              if (res.data.code == '0') {
                this.$message({showClose: true,message: "添加成功", type: 'success'});
                this.$router.push({path: '/admin/LT-YRZCGXX'});
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                });
              }
            }).catch((error) => {
              this.$message({
                showClose: true,
                message: '服务器正忙...',
                type: 'warning'
              });
            })
            }
          });
      }
    }
  }
</script>

<style lang="less" scoped>
    @import "../../less/admin.less";

    .add-admin-form {
        background: #fff;
        padding: 20px 10px 30px;

    &> div {
        margin-left: 9px;
    }

    }
    h4 {
        text-indent: 20px;
        font-size: 15px;
        margin-bottom: 20px;
    }
</style>