change responsive]

src/pages/menuPages/sms/index.vue

@@ -6,117 +6,54 @@
       </div>
     </BasicMainCard>
 
-    <BasicModal
-      v-model:visible="priceConfirmVisible"
-      width="25rem"
+    <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"
-      :confirm-loading="loading"
-      @close="priceConfirmVisible = false"
+      @close="closeSmsSheet"
+      @cancel="closeSmsSheet"
     >
-      <div class="flex items-center gap-2 font-bold">
-        <BaseIcon icon="vuesax-linear:info-circle" color="orange" />
-        <div>آیا مطمئن به تغییر قیمت می باشید؟</div>
-      </div>
-    </BasicModal>
+      <div v-if="isMobile" class="mb-3 text-base font-700">ارسال پیامک</div>
+      <SmsEditorFormBody ref="smsEditorRef" :form="form" :group-items="groupItems" :loading="loading" />
+    </BasicActionSheet>
   </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 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 type { Customer } from '@/model/customer'
-import { createSMS, getCustomerList, getGroupsList } from '@/api/sms'
+import { createSMS, getGroupsList } from '@/api/sms'
 import type { Sms } from '@/model/sms'
+import { isMobile } from '@core/utils/is'
 
-//loading
 const loading = ref<boolean>(false)
-const selectedGroup = ref<string[]>([])
 const groupItems = ref<FunctionItem[]>()
-const groupNumbers = ref<Customer[]>()
-let baseGroupNumbers: Customer[] = []
+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())
 
@@ -125,160 +62,50 @@ async function getGroups() {
     loading.value = true
     groupItems.value = await getGroupsList()
   } catch (e) {
-    console.log(e)
+    console.error(e)
   } finally {
     loading.value = false
   }
 }
 
-const addName = () => {
-  form.value.message = form.value.message.concat('', '%name')
+function refreshTable() {
+  table.value?.fetch()
 }
 
-function filterNumbers(val: string) {
-  // console.log(val)
-  if (val !== '') {
-    groupNumbers.value = baseGroupNumbers?.filter((v) => v.name.includes(val))
-  } else groupNumbers.value = baseGroupNumbers
+function closeSmsSheet() {
+  addSMSVisible.value = false
 }
 
-// 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()
+function resetData() {
   form.value = {
     message: '',
     numbers: [],
     single: []
   }
-  groupNumbers.value = []
-  selectedGroup.value = []
+  smsEditorRef.value?.resetAll?.()
 }
-//add project modal
-const addSMSVisible = ref<boolean>(false)
-const priceConfirmVisible = ref<boolean>(false)
 
-//submit user
 function ok() {
-  formRef.value?.validateFields().then(async () => {
+  smsEditorRef.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
+      form.value.numbers.push(...(form.value.single ?? []))
       await createSMS(form.value)
-      // form.value.single = []
       resetData()
       addSMSVisible.value = false
+      refreshTable()
       message.success('با موفقیت ارسال شد')
     } catch (e) {
-      console.log(e)
+      console.error(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>