platformFront/src/components/icss/AddDeptInfo.vue

<!-- 添加机构信息 By_liucf -->
<template>
    <div>
        <crumbs :title="topInfo" linkTo="/admin/LT-YXSJWH-KSWH">
        </crumbs>
        <div class="contents">
            <el-form ref="form" :model="form" :rules="rules" label-width="120" class="add-admin-form">
                <el-form-item label="科室名称：" prop="name">
                    <el-input v-model="form.name" placeholder="请输入科室名称"></el-input>
                </el-form-item>
                <el-form-item label="描述：" prop="remark" class="desc">
                    <el-input type="textarea" :rows="3" placeholder="请输入科室描述" v-model="form.remark" maxlength="1024"></el-input>
                </el-form-item>
                </el-form-item>
                <el-button size="small" type="primary" @click="addOrga">{{text}}</el-button>
            </el-form>
        </div>
    </div>
</template>

<script>
  import api from '@api/icss.js';
  export default {
    name: 'AddDeptInfo',
    data(){
      const deptNameVaild = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入科室名称'));
        }
        if (value.length > 120) {
           this.form.name = value.substr(0, 120);
           this.$message({
             showClose: true,
             type: 'warning',
             message: '科室名称最多可输入120个字'
           })
        }
        callback();
      };
      return {
        id:null,
        form: {
          name: '',
          remark: '' //描述
        },
        rules: {
          name:[
            { required: true, validator: deptNameVaild, trigger: ['blur', 'change'] },
            { required: true, message: '请输入科室名称', trigger: ['blur', 'change'] }
          ],
        },
        text:'确定添加',
        topInfo:'icss科室维护系统-添加科室',
        toast:'添加成功'
      }
    },
    created(){
      let deptInfo = this.$route.params;
      if(deptInfo.info){
        this.text = "确定修改";
        this.topInfo = "icss科室维护系统-修改科室";
        this.toast = "修改成功";
        this.form.name = deptInfo.info.name;
        this.form.remark = deptInfo.info.remark;
        this.id = deptInfo.info.id;
      }
    },
    methods: {
      addOrga() {
        this.$refs.form.validate((valid)=> {
          if (valid) {
            // 有id是修改，没有id是添加
            if(this.id){
              let param = {
                id:this.id,
                name:this.form.name,
                remark:this.form.remark
              }
              api.modifDeptInfo(param).then((res) => {
                if (res.data.code == '0') {
                  this.$message({showClose: true,message: this.toast, type: 'success'});
                  this.$router.push({path: 'LT-YXSJWH-KSWH'});
                } else {
                  this.$message({
                    showClose: true,
                    message: res.data.msg,
                    type: 'warning'
                  });
                }
              }).catch((error) => {
                this.$message({
                  showClose: true,
                  message: "服务器正忙...",
                  type: 'warning'
                });
              })
            }else{
              api.addDeptInfo(this.form).then((res) => {
                if (res.data.code == '0') {
                  this.$message({showClose: true,message: this.toast, type: 'success'});
                  this.$router.push({path: 'LT-YXSJWH-KSWH'});
                } 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);
      }
    }
  }
</script>

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

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

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

    }

  .el-button{
    margin: 30px 0 0 20px;
  }
  .contents{
    position: relative;
    .back{
      position: absolute;
      top: 10px;
      left: 5px;
      z-index: 7;
      cursor: pointer;
    }
  }
  .desc{
    padding-left: 39px;
  }
  .el-textarea{
    width: 90%;
  }
</style>