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>

    <BasicModal
      v-model:visible="priceConfirmVisible"
      width="25rem"
      @ok="ok"
      :confirm-loading="loading"
      @close="priceConfirmVisible = false"
    >
      <div class="flex items-center gap-2 font-bold">
        <BaseIcon icon="vuesax-linear:info-circle" color="orange" />
        <div>آیا مطمئن به تغییر قیمت می باشید؟</div>
      </div>
    </BasicModal>
  </div>
  <BasicModal
    v-model:visible="addSMSVisible"
    width="80vw"
    title=""
    @ok="ok"
    :loading="loading"
    @close="addSMSVisible = false"
  >
    <!--    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane :key="1" tab="ارسال تکی" />
      <a-tab-pane :key="2" tab="ارسال گروهی" />
    </a-tabs>-->
    <a-form :model="form" ref="formRef" autocomplete="off" class="md:grid md:grid-cols-4 gap-2">
      <a-form-item label="انتخاب گروه">
        <BasicSelect
          v-model:value="selectedGroup"
          :items="groupItems"
          valueName="name"
          keyName="function"
          mode="multiple"
          class="w-full"
          @change="getGroupNumbers"
        />
      </a-form-item>
      <a-form-item label="شماره های تکی" name="numbers" class="md:col-span-3">
        <BasicSelect
          v-model:value="form.single"
          mode="tags"
          valueName="name"
          keyName="mobile"
          type="tel"
          noData="لطفا شماره موبایل را وارد کنید و سپس روی کیبورد خود کلید تایید را بزنید"
          class="w-full smsSelector"
        >
          <template #notFoundContent>
            <a-spin v-if="loading" size="small" />
            <div v-else class="w-full text-center font-bold">لطفا شماره را وارد کنید</div>
          </template>
        </BasicSelect>
      </a-form-item>
      <a-form-item label="انتخاب کاربر" class="md:col-span-4">
        <BasicInput
          place-holder="جستجو"
          class="mb-2"
          @onchange="filterNumbers"
          :disabled="selectedGroup.length === 0"
        />
        <a-table
          rowKey="mobile"
          :row-selection="{ selectedRowKeys: form.numbers, onChange: onSelectChange }"
          :columns="columns"
          :scroll="{ y: '20vh', x: 500 }"
          :pagination="false"
          :data-source="groupNumbers"
        >
        </a-table>
      </a-form-item>
      <a-form-item label="متن پیام" name="message" class="md:col-span-4">
        <BasicTextArea v-model:value="form.message" />
        <div class="md:flex items-center justify-between mt-2 md:flex-row-reverse">
          <BaseButton @click="addName()" type="primary" class="w-full md:w-10rem"
            >افزودن نام کاربر</BaseButton
          >
          <div class="text-gray-500">
            برای استفاده از نام اشخاص در پیام از گزینه افزودن نام کاربر استفاده کنید این متغیر با
            عنوان( name% )به متن پیام اضافه میگردد
          </div>
        </div>
      </a-form-item>
      <a-form-item class="col-span-4">
        <!--        <NumbersTable
          v-if="selectedGroup.length > 0"
          type="check"
          :items="form.numbers"
          :filter="selectedGroup"
        />-->
      </a-form-item>
    </a-form>
  </BasicModal>
</template>

<script setup lang="ts">
// import BasicInfoModal from '@/components/BasicInfoModal'
import { ref } from 'vue'
import tbl from './components/table.vue'
import type { FormInstance } from 'ant-design-vue'
import { message } from 'ant-design-vue/es'
import type { FunctionItem } from '@/model/Item'
import type { Customer } from '@/model/customer'
import { createSMS, getCustomerList, getGroupsList } from '@/api/sms'
import type { Sms } from '@/model/sms'

//loading
const loading = ref<boolean>(false)
const selectedGroup = ref<string[]>([])
const groupItems = ref<FunctionItem[]>()
const groupNumbers = ref<Customer[]>()
let baseGroupNumbers: Customer[] = []

onMounted(() => getGroups())

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

const addName = () => {
  form.value.message = form.value.message.concat('', '%name')
}

function filterNumbers(val: string) {
  // console.log(val)
  if (val !== '') {
    groupNumbers.value = baseGroupNumbers?.filter((v) => v.name.includes(val))
  } else groupNumbers.value = baseGroupNumbers
}

// const refreshTable = () => table?.value?.fetch()

async function getGroupNumbers(val: string[]) {
  if (val) {
    try {
      loading.value = true
      const { customers } = await getCustomerList(val)
      groupNumbers.value = customers
      baseGroupNumbers = customers
    } catch (e) {
      console.log(e)
    } finally {
      loading.value = false
    }
  }
}

watch(selectedGroup, (val) => {
  console.log(val)
  if (val) {
    getGroupNumbers(val)
  }
})

const table = ref(null)
const refreshTable = () => table?.value?.fetch()
const activeKey = ref(1)

let updateKey = ref<number>(0)

/*
function onselected(val) {
  console.log()
}
*/

const columns = [
  {
    title: 'کد کاربر',
    dataIndex: 'id'
  },
  {
    title: 'نام و نام خانوادگی',
    dataIndex: 'name'
  },
  {
    title: 'شماره همراه',
    dataIndex: 'mobile'
  }
]
const onSelectChange = (changableRowKeys: string[]) => {
  console.log('selectedRowKeys changed: ', changableRowKeys)
  // if (changableRowKeys !== undefined) {
  form.value.numbers = changableRowKeys
  // }
}
//role confirm items

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

//edit
let editId: number | undefined = undefined

//add
async function add() {
  loading.value = true
  editId = undefined
  // await store.getUsersList()
  addSMSVisible.value = true
  updateKey.value++
  resetData()
  loading.value = false
}

//reset data
const resetData = () => {
  formRef.value?.resetFields()
  form.value = {
    message: '',
    numbers: [],
    single: []
  }
  groupNumbers.value = []
  selectedGroup.value = []
}
//add project modal
const addSMSVisible = ref<boolean>(false)
const priceConfirmVisible = ref<boolean>(false)

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

/*async function ok() {
  loading.value = true
  try {
    await createPrice(form.value)
    refreshTable()
    priceConfirmVisible.value = false
    addSMSVisible.value = false
    // await confirmActOnApi('آیا از اعمال قیمت جدید اطمینان دارید؟', form.value, createPrice)
  } catch (e) {
    console.error(e)
    // message.error('خطا در بارگذاری اطلاعات')
  } finally {
    loading.value = false
  }
}*/
</script>

<style>
.smsSelector .ant-select-selector {
  max-height: 5vh;
  overflow-y: auto;
}
</style>