platformFront/src/components/user/AddServiceProduct.vue

<!-- 添加服务端 By_liucf-->
<template>
  <div class="servicePro">
    <MiniTitle>
      <div slot="mini" class="miniTit">
        <img src="../../images/return.png" height="18" width="18" class="back" @click="back">
        机构设置——管理服务端——添加服务端
      </div>
    </MiniTitle>
    <!-- <div class="box">
      <h3>请添加服务端</h3>
      <div class="name">
        <span>产品名称:</span>
        <input type="text" name="" placeholder="请填写产品名称" class="nameInput" v-model="name">
      </div>
      <div class="desc">
        <span>产品简介:</span>
        <textarea placeholder="请填写产品简介" v-model="description"></textarea>
      </div>
      
      <div class="btn" @click="finish">完成</div>
    </div> -->
    <el-form ref="form" :model="form" :rules="rules" label-width="110px" class="add-server-form">
        <h3>请添加服务端</h3>
        <el-form-item label="服务端名称：" prop="name" style="margin: 34px 0 30px">
            <el-input v-model="form.name" placeholder="请填写服务端名称" class="nameInput" style="width: 165px"></el-input>
        </el-form-item>
        <el-form-item class="description" label="服务端简介：" prop="description" style="margin-bottom: 50px">
            <el-input type="textarea" placeholder="请填写服务端简介" v-model="form.description" ></el-input>
        </el-form-item>
        <el-button size="small" type="primary" @click="finish">完成</el-button>
      </el-form>
  </div>
</template>
<script type="text/javascript">
  import MiniTitle from '../common/MiniTile.vue'
  import api from '../../api/user.js'
  export default {
    name:'AddServiceProduct',
    data(){
      return{
        name:'',
        description:'',
        form: {
          name: '',//负责人
          description: ''
        },
        rules: {
          name: [
            { required: true, message: '产品名称不能为空', trigger: 'blur' },
          ],
          description: [
            { required: true, message: '产品简介不能为空', trigger: 'blur' },
          ]
        }
      }
    },
    components:{
      MiniTitle
    },
    methods:{
      back(){
        this.$router.go(-1);
      },
      finish(){
        let proName = this.form.name;
        let proDesc = this.form.description;
        // if(!proName.trim()){
        //   this.$message({
        //     message: '产品名称不能为空',
        //     type: 'warning'
        //   });
        // }else if(!proDesc.trim()){
        //   this.$message({
        //     message: '产品简介不能为空',
        //     type: 'warning'
        //   });
        // }else{
        //   const params = {
        //     'desc':proDesc,
        //     'name':proName
        //   }
        //   api.addService(params).then((res)=>{
        //     let result = res.data;
        //     if(+result.code == 0){
        //       this.$router.go(-1);
        //     }else{
        //       //客户端已建立的判断和提示
        //       this.$message({
        //         message: result.msg,
        //         type: 'warning'
        //       });
        //     }
        //   })
        // }

        this.$refs.form.validate((valid) => {
          const params = {
            'desc':proDesc,
            'name':proName
          }
          if (valid) {
            api.addService(params).then((res)=>{
            let result = res.data;
            if(+result.code == 0){
              this.$router.go(-1);
            }else{
              //客户端已建立的判断和提示
              this.$message({
                message: result.msg,
                type: 'warning'
              });
            }
          })
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  @import '../../less/user.less';
  
  .servicePro{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .base;
    .miniTit{
      .miniTitle;  
    }
    .back{
      vertical-align: middle;
      cursor: pointer;
    }
    // .box{
    //   margin: 20px;
    //   padding: 20px;
    //   background: #fff;
    //   border-radius: 2px;
    //   .name{
    //     margin: 34px 0 30px;
    //     .nameInput{
    //       width: 165px;
    //       height:30px;
    //       .border;
    //       border-radius: 2px;
    //       margin-left: 30px;
    //       padding-left: 10px;
         
    //     }
    //   }
    //   .desc{
    //     margin-bottom: 50px;
    //     textarea{
    //       width: 510px;
    //       height:160px;
    //       padding:10px;
    //       .border;
    //       border-radius: 2px;
    //       margin-left: 30px;
    //       resize: none;
    //       vertical-align:top;
    //     }
    //   }
    //   .btn{
    //     .button;
    //     color: #fff;
    //     background-color: #1774f0;
    //   }

    // }
  }
</style>