SendSms.vue 2.06 KB
<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="发送参数"
    @ok="handleOK"
  >
    <div class="pt-4px pr-4px">
      <BasicForm @register="registerForm"/>
    </div>
  </BasicModal>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
import {sendSms} from "/@/api/message/template";
import {useMessage} from "/@/hooks/web/useMessage";
const schemas: FormSchema[] = [
  {
    field: 'id',
    component: 'Input',
    label: 'id',
    show:false
  },
  {
    field: 'templatePurpose',
    label: '用途',
    component:'Input',
    show:false,
  },
  {
    field: 'messageType',
    component: 'Input',
    label: 'messageType',
    show:false
  },
  {
    field: 'phoneNumbers',
    component: 'Input',
    label: '手机号码',
    required: true,
  },
  {
    field: 'params',
    component: 'InputTextArea',
    label: '短信参数',
    required: true,
    componentProps:{
      placeholder: '示例:{"code":"3654"}',
    }
  },
  {
    field: 'remark',
    component: 'InputTextArea',
    label: '备注',
  },
];
export default defineComponent({
  components: { BasicModal, BasicForm},
  setup() {
    const {createMessage} = useMessage();
    const [registerForm,{validate,resetFields,setFieldsValue},] = useForm({
      labelWidth: 70,
      schemas,
      showActionButtonGroup: false,
      actionColOptions: {
        span: 24,
      },
    });
    const [register,{closeModal}] = useModalInner(async(data) => {
      await resetFields();
      await setFieldsValue({
        ...data.record,
      });
    });

    async function handleOK() {
      const values = await validate();
      //将字符串转为json
      const smsParams = JSON.parse(Reflect.get(values,'params'))
      Reflect.set(values, 'params', smsParams);
      await sendSms(values)
      closeModal();
      createMessage.success("发送成功")
    }

    return {register, schemas, registerForm, handleOK };
  },
});
</script>