szgb-book-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: [{
            mobile: '13913109900'
          },
          {
            mobile: '18501505657'
          },
          {
            mobile: '18652421281'
          },
          {
            mobile: '13270977225'
          },
          {
            mobile: '13052801292'
          },
          {
            mobile: '18896587663'
          },
          {
            mobile: '13951887524'
          },
          {
            mobile: '18913575992'
          },
          {
            mobile: '15295671438'
          },
          {
            mobile: '13915422122'
          },
          {
            mobile: '18670287910'
          },
          {
            mobile: '15850872937'
          },
          {
            mobile: '15962180796'
          },
          {
            mobile: '15995892928'
          },
          {
            mobile: '18151085929'
          },
          {
            mobile: '15962427069'
          },
          {
            mobile: '13013869797'
          },
          {
            mobile: '13861334007'
          },
          {
            mobile: '15370062080'
          },
          {
            mobile: '15251680185'
          },
          {
            mobile: '18906235118'
          },
          {
            mobile: '13063730025'
          },
          {
            mobile: '13306176337'
          },
          {
            mobile: '18865711856'
          },
          {
            mobile: '13032530763'
          },
          {
            mobile: '13862735851'
          },
          {
            mobile: '18862321502'
          },
          {
            mobile: '18896523808'
          },
          {
            mobile: '18913183396'
          },
          {
            mobile: '17397929991'
          },
          {
            mobile: '13771938730'
          },
          {
            mobile: '13814897494'
          },
          {
            mobile: '13814800749'
          },
          {
            mobile: '18896716581'
          },
          {
            mobile: '15995808679'
          },
          {
            mobile: '18695190691'
          },
          {
            mobile: '13664165211'
          },
          {
            mobile: '15851467293'
          },
          {
            mobile: '13862089260'
          },
          {
            mobile: '13906222159'
          },
          {
            mobile: '13913553385'
          },
          {
            mobile: '15606250566'
          },
          {
            mobile: '13961314486'
          },
          {
            mobile: '13584837778'
          },
          {
            mobile: '18251371032'
          },
          {
            mobile: '13222751128'
          },
          {
            mobile: '13771767056'
          },
          {
            mobile: '18550337240'
          }
        ],
        paramesObj: {
          name: "“乐益大讲堂”第一讲《九如巷张氏与乐益女中",
          time: "4月8日(本周六)14:00-16:00",
          address: "中共苏州独立支部旧址(体育场路4号)一楼报告厅"
        },
        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>