mediate-manage-web/src/pages/mediation-management/components/batchSMSDialog.vue

<template>
  <div>
    <el-dialog title="批量发送短信" :visible="true" width="600px" :close-on-click-modal="false"
               @close="handleClose">
      <div class="dialog-content dialog-case-batch">
        <div class="pt-8">
          <div class="flex-row align-items-center justify-content-between mb-24 case-batch-num">
            <span>选中<a>{{ eventTraDialog.caseids.length }}</a>个案件，系统将对您选择中案件进行批量发送短信！</span>
          </div>
          <el-collapse-transition>
            <el-row :gutter="56">
              <el-col :span="24">
                <div class="flex-row-center align-items-center height-40 mb-24">
                  <span class="tabs__search-criteria-title flex-shrink-0 pr-16">短信模板</span>
                  <el-select v-model="ObjectInfo.scene"
                             placeholder="请选择短信模板"
                             class="width100" @change="smsChange">
                    <el-option
                        v-for="item in smsOptions"
                        :key="item.template"
                        :label="item.name"
                        :value="item.template">
                    </el-option>
                  </el-select>
                </div>
              </el-col>
<!--              <el-col :span="24">-->
<!--                <div class="flex-row-center align-items-center height-40 mb-24">-->
<!--                  <span class="tabs__search-criteria-title flex-shrink-0 pr-16">短信接收方</span>-->
<!--                  <el-input v-model.trim="ObjectInfo.users"-->
<!--                            clearable placeholder="请输入" disabled>-->
<!--                  </el-input>-->
<!--                </div>-->
<!--              </el-col>-->
              <el-col :span="24">
                <div class="flex-row-center align-items-center mb-24">
                  <span class="tabs__search-criteria-title flex-shrink-0 pr-16">模板内容</span>
                  <el-input class="mt-8" type="textarea" v-model="ObjectInfo.content" :rows="4" disabled></el-input>
                </div>
              </el-col>

            </el-row>
          </el-collapse-transition>
        </div>

      </div>
      <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">取消</el-button>
                <el-button type="primary" @click="handleSubmit()">批量发送</el-button>
            </span>
    </el-dialog>
  </div>
</template>
<script>
import caseManagement from "@/services/caseManagement";

export default {
  components: {},
  props: {
    eventTraDialog: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      smsOptions: [
        // {
        //   label: '案件受理通知',
        //   template: 'notice',
        //   // users: '由被申请方接收',
        //   content: '【${signName}】您与${applyName}的${issueType}已由我中心受理调解，后续我方将组织双方共同进行调解，请您关注后续电话或者短信通知'
        // },
        // {
        //   label: '还款计划通知',
        //   template: 'repayment-plan',
        //   // users: '由被申请方接收',
        //   content: '【${signName}】您与${applyName}的${issueType}经调解已经达成初步的方案及还款计划，您可以通过如下链接查看${smallProLink}。或者您也可以直接通过搜索微信小程序“保融通调解”进入“还款记录登记”模块进行查看。'
        // }
      ],
      ObjectInfo: {
        scene: '',
        // users: '',
        content: ''
      },
      tableData: [],
      total: 0,

    };
  },
  mounted() {
    this.getSmsTemplate();
    // this.smsChange();
  },
  methods: {
    getSmsTemplate() {
      caseManagement.getSmsTemplate().then(res => {
        if (!res.code) {
          this.smsOptions = res;
          if (res.length){
            this.ObjectInfo.scene = res[0].template;
            this.ObjectInfo.content = res[0].content;
          }
        }
      })
    },
    smsChange() {
      let jsonData = this.smsOptions.find(item => {
        return this.ObjectInfo.scene == item.template
      })
      // this.ObjectInfo.users = jsonData.users
      this.ObjectInfo.content = jsonData.content
    },
    handleSubmit() {
      // console.log(this.eventTraDialog, 'eventTraDialog')
      if (!this.ObjectInfo.scene){
        this.$message.warning("请选择短信模板！");
        return
      }
      if(!this.$clickThrottle()) { return }//防止重复点击
      let caseIdList = this.eventTraDialog.caseids;
      caseManagement.smsBatchSend({...this.ObjectInfo, caseIdList: caseIdList}).then(res => {
        this.$parent.getCaseInfoList(this.eventTraDialog.current)
        this.handleClose()
        this.$message.success("发送成功");
      })
    },
    handleClose() {
      this.$emit('update:eventTraDialog', null)
    },
  }
};
</script>

<style scoped lang="scss">
.dialog-case-batch {
  padding: 16px 30px;
  max-height: 500px;

  .tabs__search-criteria-title {
    width: 100px;
  }

  .case-batch-num {
    background-color: rgba(236, 238, 241, 0.8196078431);
    padding: 15px 20px;
    border-radius: 4px;

    a {
      font-size: 16px;
      font-weight: 500;
      color: #C66A5B;
    }
  }

}
</style>