platformFront/src/components/icss/AddDisclInfo.vue

<!-- 免责声明修改 By_liucf -->
<template>
    <div>
        <crumbs :title="topInfo"
                :param="$route.params" linkTo="DisclaimerInformation">
        </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" class="discl-title">
                    <el-input v-model="form.title" placeholder="请输入标题" maxlength="30"></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" :disabled = 'saveDisable' 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, 30);
           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, 1024);
           this.$message({
             showClose: true,
             type: 'warning',
             message: '内容已超过最大字数限制'
           })
        }
        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: [ 'change'] },
            { required: true, message: '请输入标题', trigger: ['blur', 'change'] }
          ],
          description:[
            { required: true, validator: descVaild, trigger: [ 'change'] },
            { required: true, message: '请输入内容', trigger: ['blur', 'change'] }
          ],
          disclaimerCode:[
            { required: true, validator: disclVaild, trigger: ['blur', 'change'] },
            { required: true, message: '请选择归属', trigger: ['blur', 'change'] }
          ],
        },
        text:'确定添加',
        topInfo:'免责声明维护-添加免责声明',
        toast:'添加成功',
        saveDisable: false 
      }
    },
    created(){
      const params = JSON.parse(localStorage.getItem("knowledgeEnumsData"));
      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) {
            // 过滤空格
            if(!this.form.title.trim()|| !this.form.description.trim()){
              this.$message({
                message: "必填项不能为空",
                type: 'warning'
              });
              return
            }
            // 有id是修改，没有id是添加
            if(this.id){
              let code = this.form.disclaimerCode;
              // 修改没有操作时 code为字符串，需转成code
              if(typeof code == 'string'){
                for(let i in this.options){
                  if(this.options[i].name==code){
                    code = this.options[i].key;
                  }
                }
              }
              let param = {
                id:this.id,
                title:this.form.title.trim(),
                description:this.form.description.trim(),
                disclaimerCode:code
              }
              this.saveDisable = true  //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
              api.modifDiscInformation(param).then((res) => {
                if (res.data.code == '0') {
                  this.$message({showClose: true,message: this.toast, type: 'success'});
                  this.$router.push({name: 'DisclaimerInformation',params: Object.assign({}, this.$route.params, {currentPage: 1})});
                } else {
                  this.$message({
                    showClose: true,
                    message: res.data.msg,
                    type: 'warning'
                  });
                }
                this.saveDisable = false
              }).catch((error) => {
                this.$message({
                  showClose: true,
                  message: "服务器正忙...",
                  type: 'warning'
                });
              })
            }else{
              let param = {
                title:this.form.title.trim(),
                description:this.form.description.trim(),
                disclaimerCode:this.form.disclaimerCode
              }
              this.saveDisable = true  //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
              api.addDiscInformation(param).then((res) => {
                if (res.data.code == '0') {
                  this.$message({showClose: true,message: this.toast, type: 'success'});
                  this.$router.push({name: 'DisclaimerInformation',params: Object.assign({}, this.$route.params, {currentPage: 1})});
                } else {
                  this.$message({
                    showClose: true,
                    message: res.data.msg,
                    type: 'warning'
                  });
                }
                this.saveDisable = false
              }).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;
        .discl-title{
          width:500px;
        }
    }

  // .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>