dangxingjiaoyujidi-web/src/views/order/message.vue

<template>
  <div style="margin:20px;padding:20px;background-color: #fff;">
    <el-form :model="form" :rules="rules" ref="form" label-position="right" :label-width="formLabelWidth">

      <el-row>
        <el-col :span="24">
          <div class="table-tree tableswidth">
            <div style="display: flex;justify-content: space-between;margin-right: 20px;margin-bottom: 10px;">
              <div style="font-size: 18px;color: #303133;">短信模板</div>
            </div>
          </div>
        </el-col>
        <el-col :span="24">
          <el-form-item label="短信模板" prop="template_id">
            <el-select v-model="form.template_id" placeholder="请选择短信模板" style="width:100%">
              <el-option v-for="item in templateList" :key="item.value" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="table-tree tableswidth">
            <div style="display: flex;justify-content: space-between;margin-right: 20px;margin-bottom: 10px;">
              <div style="font-size: 18px;color: #303133;">联系人手机号</div>
              <Button type="primary" @click="mobileList.push({mobile:''})" size="small" style="margin-left: 10px;"
                ghost>新增</Button>
            </div>
            <el-table :data="mobileList" height="200" class="v-table" style="width: 100%;margin-bottom: 20px;">
              <el-table-column type="index" align="center">
              </el-table-column>
              <el-table-column prop="mobiles" label="手机号">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.mobile" placeholder="请填写接收短信联系人手机号" autocomplete="off"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120px" align="center">
                <template slot-scope="scope">
                  <!-- <el-input style="display: none;" type="hidden" v-model="scope.row.mobile"></el-input> -->
                  <Button type="error" @click="mobileList.splice(scope.$index,1)" size="small"
                    style="margin-left: 10px;" ghost>删除</Button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="table-tree tableswidth">
            <div style="display: flex;justify-content: space-between;margin-right: 20px;margin-bottom: 10px;">
              <div style="font-size: 18px;color: #303133;">信息模板内容</div>
            </div>
          </div>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="name" label="活动/参观名称">
            <el-input v-model="paramesObj.name" placeholder="请填写活动/参观名称" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="time" label="活动/参观时间">
            <!-- <el-date-picker style="width:100%" v-model="form.parames.time" type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择活动/参观时间">
            </el-date-picker> -->
            <el-input v-model="paramesObj.time" placeholder="请填写活动/参观时间" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="address" label="活动/参观地址">
            <el-input v-model="paramesObj.address" placeholder="请填写活动/参观地址" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetForm('form')">取 消</el-button>
      <el-button type="primary" @click="submitForm('form')">发 送</el-button>
    </div>
  </div>
</template>

<script>
  import {sendMessage} from '@/api/order/message.js'
  export default {
    data() {
      return {
        form: {
          mobile: [],
          template_id: '',
          parames: {}
        },
        mobileList:[],
        paramesObj: {
          name: "",
          time: "",
          address: ""
        },
        rules: {

        },
        formLabelWidth: '120px',
        templateList: [{
          id: "8S8Pq1",
          value: '活动短信'
        }]
      }
    },
    methods: {
      submitForm(formName) {
        let that = this
        console.log(this.form)
        if(!this.form.template_id){
          that.$message.error('请选择短信模版');
          return
        }
        if(this.mobileList.length<1){
          that.$message.error('请填写联系人手机号');
          return
        }
        for(var k of this.mobileList){
          this.form.mobile.push(k.mobile)
        }
        this.form.parames = this.paramesObj
         console.log(this.form)
         this.$refs[formName].validate((valid) => {
           if (valid) {
             sendMessage(that.form).then(response => {
                 this.$Message.success('发送成功');
                 that.resetForm('form')
               }).catch(error => {})

           } else {
             this.$Message.error('数据校验失败');
             return false;
           }
         });



      },
      resetForm(formName) {
        this.mobileList = []
        this.paramesObj = {}
        this.$refs[formName].resetFields();
      }
    },
  }
</script>

<style>
</style>