platformFront/src/components/admin/AddProductLine.vue

<template>
    <div>
        <!-------------面包屑-------------->
        <crumbs :title="`产品线管理-${isEdit?'修改':'添加'}产品线`" linkTo="productDetail">
        </crumbs>
        <!--------------表单--------------->
        <div class="contents">
            <el-form ref="form" :rules="rules" :model="form" label-width="80px" class="add-product-form">
                <h4>基本信息</h4>
                <el-form-item label="产品名称" required prop="name">
                    <el-input class="inp" v-model="form.name" size="small"></el-input>
                </el-form-item>
                <el-form-item label="URL" prop="url" size="small" style="margin-top: 15px;" required>
                    <el-input class="inp" v-model="form.url" :disabled="isEdit?true:false" maxlength="2083"></el-input>
                </el-form-item>
                <el-form-item label="是否试用" prop="trialStatus" required style="margin-bottom: 16px;">
                    <el-radio-group v-model="form.trialStatus" :disabled="isEdit?true:false">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="form.trialStatus=='1'" label="试用URL" prop="trialUrl" size="small" style="margin-top: 10px;" required>
                    <el-input class="inp" v-model="form.trialUrl" :disabled="isEdit?true:false" maxlength="2083"></el-input>
                </el-form-item>
                <el-form-item label="产品描述" prop="decription" required class="adjust-error">
                    <el-input type="textarea"
                              v-model="form.decription"
                              placeholder="请填写描述文档"
                              style="width: 300px;"
                            ></el-input>
                </el-form-item>
                <el-form-item label="接入模式" required prop="accessType">
                    <el-checkbox-group v-model="form.accessType" :disabled="isEdit?true:false">
                        <el-checkbox v-for="(it,index) in accessType" :label="it.key+''" name="accessType">{{it.name}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="收费模式" required prop="chargeType" style="margin-bottom: 10px;">
                    <el-checkbox-group v-model="form.chargeType" :disabled="isEdit?true:false">
                        <el-checkbox  v-for="(it,index) in chargeType" :label="it.key+''" name="chargeType">{{it.name}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="addProductLine">确定{{isEdit?'修改':'添加'}}</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-product-line',
    data: function () {
      const urlValidate = (rule,value,callback)=>{
        if(!value){
          return callback(new Error('请输入URL'));
        }
        if(!utils.url.test(value)){
          return callback(new Error('请输入正确的URL'));
        }
        callback();
      };
      const nameValidate = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入产品名称'));
        }
        if (value.length > 44) {
           this.form.name = value.substr(0, 44);
           this.$message({
             showClose: true,
             type: 'warning',
             message: '产品名称最多可输入44个字'
           })
        }
        callback();
      };
      const decriptionValidate = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入产品描述'));
        }
        if (value.length > 200) {
           this.form.decription = value.substr(0, 200);
           this.$message({
             showClose: true,
             type: 'warning',
             message: '产品描述最多可输入200个字'
           })
        }
        callback();
      };
      return {
        accessType:[],
        accessType:[],
        isEdit:false,
        form: {
          name: '',
          url: '',
          accessType: [],
          chargeType: [],
          decription: '',
          trialStatus: '',
          trialUrl:''
        },
        rules:{
            name:[
                { required: true,  validator: nameValidate, trigger: ['blur', 'change'] }
            ],
            accessType:[
                { required: true, message: '请选择接入模式', trigger: ['blur', 'change'] }
            ],
            chargeType:[
                { required: true, message: '请选择收费模式', trigger: ['blur', 'change'] }
            ],
            decription:[
                { required: true, validator: decriptionValidate, trigger: ['blur', 'change'] }
            ],
            trialStatus:[
                { required: true, message: '请选择是否试用', trigger: ['blur', 'change'] }
            ],
            trialUrl:[
              { validator: urlValidate, trigger: ['blur', 'change'] }
            ],
            url:[
              { validator: urlValidate, trigger: ['blur', 'change'] }
            ],
        }
      }
    },
    created() {
      //获取枚举类型
      const enums = JSON.parse(localStorage.getItem('enumsData'));
      this.accessType = enums.accessTypeEnum;
      this.chargeType = enums.chargeTypeEnum;
      //编辑时获取参数
      console.log(this.$route.params);
      const info = this.$route.params.info;
      if(info){
        this.isEdit = true;
        this.form.accessType = info.accessType.split(",");
        this.form.chargeType = info.chargeType.split(",");
        this.form.decription = info.decription;
        this.form.url = info.url;
        this.form.name = info.name;
        this.form.trialStatus = info.trialStatus;
        this.form.id = info.id;
        this.form.trialUrl = info.trialUrl;
      }
    },
    methods: {
      addProductLine() {
        this.$refs.form.validate((valid)=>{
          if(valid){
            const req = this.isEdit?api.editProductLine:api.addProductLine;
            let param = Object.assign({},this.form);
            param.accessType = this.form.accessType.join(",");
            param.chargeType = this.form.chargeType.join(",");
            req(param).then((res) => {
              if (res.data.code == '0') {
                this.$message({showClose: true,message: "操作成功", type: 'success'});
                this.$router.push({path: '/admin/LT-CPXGL'});
              }else {
                this.$message({
                  showClose: true,  
                  message: res.data.msg,
                  type: 'warning'
                });
                if(res.data.code == '00020001'){        //产品不存在，跳转到产品线管理页面
                  this.$router.push({path:'/admin/LT-CPXGL'});
                }
              }
            }).catch((error) => {
              this.$message({
                showClose: true,
                message: "服务器正忙...",
                type: 'warning'
              });
            })
        }
      });
      }
    }
  }
</script>

<style lang="less">
    .add-product-form .adjust-error{
        margin-bottom:10px;
    .el-form-item__error{
        top:100%;
    }
    }
</style>

<style lang="less" scoped>
    @import "../../less/admin.less";
    .add-product-form {
        background: #fff;
        padding: 20px 10px 30px;
    .inp{
        width: 300px;
    }
    & > div {
          margin-left: 9px;
      }
    }
    h4 {
        text-indent: 20px;
        font-size: 15px;
        margin-bottom: 20px;
    }
</style>