platformFront/src/components/icss/AddDisclInfo.vue

<!-- 添加机构信息 By_liucf -->
<template>
    <div>
        <crumbs :title="topInfo" linkTo="/admin/LT-YXSJWH-MZSMWH">
        </crumbs>
        <div class="contents">
            <el-form ref="form" :label-position="labelPosition" :model="form" :rules="rules" label-width="65px" class="add-discl-form">
                <el-form-item label="标题：" prop="title">
                    <el-input v-model="form.title" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="内容：" prop="description" class="discDesc">
                    <el-input type="textarea" :rows="3" placeholder="请输入内容述" v-model="form.description" maxlength="1024"></el-input>
                </el-form-item>
                <el-form-item label="归属：" prop="disclaimerCode">
                    <el-select v-model="form.disclaimerCode" clearable placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.key"
                        :label="item.name"
                        :value="item.key">
                      </el-option>
                    </el-select>
                </el-form-item>
                <el-button class="disclButn" size="small" type="primary" @click="addDiscl">{{text}}</el-button>
            </el-form>
        </div>
    </div>
</template>

<script>
  import api from '@api/icss.js';
  export default {
    name: 'AddDisclInfo',
    data(){
      const titleVaild = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入标题'));
        }
        if (value.length > 30) {
           this.form.name = value.substr(0, 120);
           this.$message({
             showClose: true,
             type: 'warning',
             message: '已超过最大字数限制'
           })
        }
        callback();
      };
      /*const descVaild = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入内容'));
        }
        if (value.length > 1024) {
           this.form.name = value.substr(0, 120);
           this.$message({
             showClose: true,
             type: 'warning',
             message: '科室名称最多可输入1024个字'
           })
        }
        callback();
      };*/
      const disclVaild = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请选择归属'));
        }
        callback();
      };
      return {
        id:null,
        labelPosition:'right',
        options:[],
        form: {
          title: '',
          description: '',//内容
          disclaimerCode:'' //归属
        },
        rules: {
          title:[
            { required: true, validator: titleVaild, trigger: ['blur', 'change'] },
            { required: true, message: '请输入标题', trigger: ['blur', 'change'] }
          ],
          description:[
            // { required: true, validator: descVaild, trigger: ['blur', 'change'] },
            { required: true, message: '请输入内容', trigger: ['blur', 'change'] }
          ],
          disclaimerCode:[
            { required: true, validator: disclVaild, trigger: ['blur', 'change'] },
            { required: true, message: '请选择归属', trigger: ['blur', 'change'] }
          ],
        },
        text:'确定添加',
        topInfo:'免责声明维护-添加免责声明',
        toast:'添加成功'
      }
    },
    created(){
      const params = JSON.parse(localStorage.getItem("icssEnumsData"));
      this.options = params.disclaimerCodeEnum;
      // 修改
      const data = this.$route.params.info;
      if(data){
        this.id = data.id;
        this.text = "确定修改";
        this.topInfo = "免责声明维护-修改";
        this.toast = "修改成功";
        this.form.title = data.title;
        this.form.description = data.description;
        this.form.disclaimerCode = data.disclaimerCode;
      }
    },
    methods: {
      addDiscl() {
        this.$refs.form.validate((valid)=> {
          if (valid) {
            // 有id是修改，没有id是添加
            if(this.id){
              let param = {
                id:this.id,
                title:this.form.title,
                description:this.form.description,
                disclaimerCode:this.form.disclaimerCode
              }
              api.modifDiscInformation(param).then((res) => {
                if (res.data.code == '0') {
                  this.$message({showClose: true,message: this.toast, type: 'success'});
                  this.$router.push({path: 'LT-YXSJWH-MZSMWH'});
                } else {
                  this.$message({
                    showClose: true,
                    message: res.data.msg,
                    type: 'warning'
                  });
                }
              }).catch((error) => {
                this.$message({
                  showClose: true,
                  message: "服务器正忙...",
                  type: 'warning'
                });
              })
            }else{
              api.addDiscInformation(this.form).then((res) => {
                if (res.data.code == '0') {
                  this.$message({showClose: true,message: this.toast, type: 'success'});
                  this.$router.push({path: 'LT-YXSJWH-MZSMWH'});
                } 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" >
    @import "../../less/admin.less";

    .add-discl-form {
        background: #fff;
        padding: 20px 20px 30px;
    }

  // .el-button{
  .disclButn{
    margin: 30px 0 0 20px;
  }
  
  .discDesc{
    // .el-textarea{
    //   width: 97%;
    // }
    margin-top: 10px;
    margin-bottom: 25px; 
    .el-form-item__error{
      top:70px;
    }
  }
</style>