shuhi-ui/src/views/marketing/messagePush/components/template-edit.vue

<template>
  <el-dialog
    title="添加短信模板"
    v-model="visible"
    width="600px"
    destroy-on-close
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
      @keyup.enter="handleSubmit"
    >
      <el-form-item label="模板名称" prop="name">
        <el-input
          v-model="form.name"
          placeholder="请输入"
          clearable
        />
      </el-form-item>
      <el-form-item label="签名名称" prop="sign">
        <el-input
          v-model="form.sign"
          placeholder="请输入"
          clearable
        />
      </el-form-item>
      <el-form-item label="短信内容" prop="content">
        <el-input
          v-model="form.content"
          type="textarea"
          :rows="6"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          v-model="form.remark"
          placeholder="请输入"
          clearable
        />
      </el-form-item>
      <el-form-item label="推送方式" prop="pushWay">
        <el-checkbox-group v-model="form.pushWay">
          <el-checkbox label="1">小程序站内推送</el-checkbox>
          <el-checkbox label="2">公众号推送</el-checkbox>
          <el-checkbox label="3">短信推送</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit">
        确 定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { EleMessage } from 'ele-admin-plus/es';
  import request from '@/utils/request';

  defineOptions({ name: 'TemplateEdit' });

  const emit = defineEmits(['success']);
  const visible = ref(false);
  const loading = ref(false);
  const formRef = ref(null);
  const editId = ref(null);

  const form = reactive({
    name: '',
    sign: '',
    content: '',
    remark: '',
    pushWay: []
  });

  const rules = {
    name: [
      { required: true, message: '请输入模板名称', trigger: 'blur' }
    ],
    sign: [{ required: true, message: '请输入签名名称', trigger: 'blur' }],
    content: [
      { required: true, message: '请输入短信内容', trigger: 'blur' }
    ]
  };

  // 打开弹窗
  function handleOpen(row) {
    visible.value = true;
    editId.value = null;
    form.name = '';
    form.sign = '';
    form.content = '';
    form.remark = '';
    form.pushWay = [];
    if (row) {
      Object.assign(form, row);
      editId.value = row.id;
      if (typeof form.pushWay === 'string') {
        form.pushWay = form.pushWay.split(',');
      }
    }
  }

  // 提交表单
  async function handleSubmit() {
    if (loading.value) return;
    try {
      const valid = await formRef.value?.validate();
      if (!valid) return;
      loading.value = true;

      const params = {
        name: form.name,
        sign: form.sign,
        content: form.content,
        remark: form.remark,
        pushWay: form.pushWay.join(','),
        status: 1
      };

      if (editId.value) {
        params.id = editId.value;
      }

      const url = editId.value ? '/message/templetemsg/update' : '/message/templetemsg/add';
      const { data } = await request.post(url, params);

      if (data.code === 200) {
        EleMessage.success(editId.value ? '修改成功' : '添加成功');
        visible.value = false;
        emit('success');
      } else {
        EleMessage.error(data.msg);
      }
    } catch (e) {
      EleMessage.error(e.message);
    } finally {
      loading.value = false;
    }
  }

  defineExpose({ handleOpen });
</script>