platformFront/src/components/admin/AddOrganization.vue

<!-- 添加机构信息 By_liucf -->
<template>
    <div>
        <crumbs title="机构信息-添加机构" linkTo="organizationInfo">
        </crumbs>
        <div class="contents">
          <!--<img src="../../images/return.png" height="18" width="18" class="back" @click="back">-->
            <el-form ref="form" :model="form" :rules="rules" label-width="120" class="add-admin-form">
                <h4>基本信息</h4>
                <el-form-item label="机构名称：" prop="organizationName">
                    <el-input v-model="form.organizationName" placeholder="请输入机构名称"></el-input>
                </el-form-item>
                <el-form-item label="机构负责人：" prop="principal" required>
                    <el-input v-model="form.principal" placeholder="请输入机构负责人姓名"></el-input>
                </el-form-item>
                <el-form-item label="机构所在地：" prop="address" >
                    <el-input v-model="form.address" placeholder="请输入机构所在地"></el-input>
                </el-form-item>
                <el-form-item label="机构属性：" prop="type">
                    <el-select v-model="form.type" placeholder="请选择机构">
                        <el-option v-for="item in orgList" :key="item.key" :label="item.name" :value="item.key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="下属机构数量：" prop="subNum">
                    <el-input v-model="form.subNum" placeholder="请输入下属机构数量" @change="handleNumInput"></el-input>
                </el-form-item>
                <el-button size="small" type="primary" @click="addOrga">确定添加</el-button>
            </el-form>
        </div>
    </div>
</template>

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

  export default {
    name: 'AddOrganization',
    data(){
      const principalVaild = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入机构负责人'));
        }
        if (value.length > 10) {
           this.form.principal = value.substr(0, 10);
           this.$message({
             showClose: true,
             type: 'warning',
             message: '机构负责人最多可输入10个字'
           })
        }
        callback();
      };
      const addressVaild = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入机构所在地'));
        }
        if (value.length > 60) {
           this.form.address = value.substr(0, 60);
           this.$message({
             showClose: true,
             type: 'warning',
             message: '机构所在地最多可输入60个字'
           })
        }
        callback();
      };
      const organizationNameVaild = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入机构名称'));
        }
        if (value.length > 20) {
           this.form.organizationName = value.substr(0, 20);
           this.$message({
             showClose: true,
             type: 'warning',
             message: '机构名称最多可输入20个字'
           })
        }
        callback();
      };
      const subNumVaild = (rule, value, callback) => {
        const numReg = new RegExp(/[^\d]/g);
        if(numReg.test(value) || this.form.subNum < 0){
          this.form.subNum = null;
        }
        if (value && value.length > 5) {
           this.form.subNum = value.substr(0, 5);
           this.$message({
             showClose: true,
             type: 'warning',
             message: '下属机构数量超出最大限制'
           })
        }
        callback();
      };
      return {
        orgList:[],
        form: {
          principal: '',//负责人
          address: '',
          subNum: null,
          organizationName: '',
          type: ''
        },
        rules: {
          principal:[
            { validator: principalVaild, trigger: ['blur', 'change'] }
          ],
          address:[
            { required: true, validator: addressVaild, trigger: ['blur', 'change'] }
          ],
          organizationName:[
            { required: true, validator: organizationNameVaild, trigger: ['blur', 'change'] },
            { required: true, message: '请输入机构名称', trigger: ['blur', 'change'] }
          ],
          type:[
            { required: true, message: '请选择机构属性', trigger: ['blur', 'change'] }
          ],
          subNum: [
            { validator: subNumVaild, trigger: ['blur', 'change'] }
          ]
        }
      }
    },
    created() {
      const enumsList = JSON.parse(localStorage.getItem('enumsData'));
      this.orgList = enumsList.organizationTypeEnum;
    },
    methods: {
      handleNumInput(){//机构数量只能数字
        const numReg = new RegExp(/[^\d]/g);
        if(numReg.test(this.form.subNum) || this.form.subNum < 0){
          this.form.subNum = null;
        }
      },
      addOrga() {
        this.$refs.form.validate((valid)=> {
          if (valid) {
            adminApi.addOrganization(this.form).then((res) => {
              if (res.data.code == '0') {
                this.$message({showClose: true,message: "添加成功", type: 'success'});
                this.$router.push({path: 'LT-KHZX-JGXX'});
              } else {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: 'warning'
                });
              }
            }).catch((error) => {
              this.$message({
                showClose: true,
                message: "服务器正忙...",
                type: 'warning'
              });
            })
          }
        });
      },
      back(){
        this.$router.go(-1);
      },
      handleNumInput(){//机构数量只能数字
        const numReg = new RegExp(/[^\d]/g);
        if(numReg.test(this.form.subNum) || this.form.subNum < 0){
          this.form.subNum = null;
        }
      }
    }
  }
</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;
    }
  .el-button{
    margin: 30px 0 0 20px;
  }
  .el-dropdown{
    margin-bottom: 15px;
  }
  .contents{
    position: relative;
    .back{
      position: absolute;
      top: 10px;
      left: 5px;
      z-index: 7;
      cursor: pointer;
    }
  }
</style>