boursecu_admin/src/pages/menuPages/sms/index.vue

<template>
  <div>
    <BasicMainCard>
      <div class="flex w-full h-full">
        <tbl ref="table" class="w-full h-full" @add="add" />
      </div>
    </BasicMainCard>

    <BasicActionSheet
      v-model:visible="addSMSVisible"
      title="ارسال پیامک"
      modal-width="80vw"
      drawer-height="90vh"
      :loading="loading"
      :showButton="true"
      :showCancel="true"
      :showOk="true"
      ok-text="ارسال"
      cancel-text="انصراف"
      @ok="ok"
      @close="closeSmsSheet"
      @cancel="closeSmsSheet"
    >
      <div v-if="isMobile" class="mb-3 text-base font-700">ارسال پیامک</div>
      <SmsEditorFormBody ref="smsEditorRef" :form="form" :group-items="groupItems" :loading="loading" />
    </BasicActionSheet>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import tbl from './components/table.vue'
import type { FormInstance } from 'ant-design-vue'
import BasicActionSheet from '@/components/BasicActionSheet.vue'
import SmsEditorFormBody from './components/SmsEditorFormBody.vue'
import { message } from 'ant-design-vue/es'
import type { FunctionItem } from '@/model/Item'
import { createSMS, getGroupsList } from '@/api/sms'
import type { Sms } from '@/model/sms'
import { isMobile } from '@core/utils/is'

const loading = ref<boolean>(false)
const groupItems = ref<FunctionItem[]>()
const table = ref<null | { fetch: () => void }>(null)
const smsEditorRef = ref<{
  validateFields?: () => ReturnType<NonNullable<FormInstance['validateFields']>>
  resetAll?: () => void
}>()

const form = ref<Sms>({
  message: '',
  numbers: [],
  single: []
})

const addSMSVisible = ref<boolean>(false)

onMounted(() => getGroups())

async function getGroups() {
  try {
    loading.value = true
    groupItems.value = await getGroupsList()
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

function refreshTable() {
  table.value?.fetch()
}

function closeSmsSheet() {
  addSMSVisible.value = false
}

async function add() {
  addSMSVisible.value = true
  resetData()
}

function resetData() {
  form.value = {
    message: '',
    numbers: [],
    single: []
  }
  smsEditorRef.value?.resetAll?.()
}

function ok() {
  smsEditorRef.value?.validateFields?.().then(async () => {
    try {
      loading.value = true
      if (!form.value.numbers) form.value.numbers = []
      form.value.numbers.push(...(form.value.single ?? []))
      await createSMS(form.value)
      resetData()
      addSMSVisible.value = false
      refreshTable()
      message.success('با موفقیت ارسال شد')
    } catch (e) {
      console.error(e)
    } finally {
      loading.value = false
    }
  })
}
</script>