change responsive]
This commit is contained in:
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<a-form :model="form" ref="formRef" autocomplete="off">
|
||||
<div class="space-y-3 md:grid md:grid-cols-4 md:gap-2 md:space-y-0">
|
||||
<a-form-item label="انتخاب گروه">
|
||||
<BasicSelect
|
||||
v-model:value="selectedGroup"
|
||||
:items="groupItems"
|
||||
valueName="name"
|
||||
keyName="function"
|
||||
mode="multiple"
|
||||
class="w-full"
|
||||
/>
|
||||
</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 sms-selector"
|
||||
>
|
||||
<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 mb-0">
|
||||
<BasicInput
|
||||
place-holder="جستجو"
|
||||
class="mb-2"
|
||||
@onchange="filterNumbers"
|
||||
:disabled="selectedGroup.length === 0"
|
||||
/>
|
||||
|
||||
<a-table
|
||||
class="hidden md:block"
|
||||
rowKey="mobile"
|
||||
:row-selection="{ selectedRowKeys: form.numbers, onChange: onSelectChange }"
|
||||
:columns="columns"
|
||||
:scroll="{ y: '20vh', x: 500 }"
|
||||
:pagination="false"
|
||||
:data-source="groupNumbers"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="md:hidden max-h-48 overflow-y-auto rounded-xl border border-gray-200 bg-gray-50 p-2 space-y-1"
|
||||
>
|
||||
<div v-if="customersLoading" class="flex justify-center py-6">
|
||||
<a-spin size="small" />
|
||||
</div>
|
||||
<div v-else-if="!groupNumbers.length" class="py-6 text-center text-sm text-gray-500">
|
||||
کاربری یافت نشد
|
||||
</div>
|
||||
<label
|
||||
v-for="customer in groupNumbers"
|
||||
:key="customer.mobile"
|
||||
class="flex cursor-pointer items-center gap-2 rounded-lg border border-transparent bg-white px-3 py-2 active:bg-gray-100"
|
||||
:class="isSelected(customer.mobile) ? 'border-blue-200 bg-blue-50' : ''"
|
||||
>
|
||||
<a-checkbox
|
||||
:checked="isSelected(customer.mobile)"
|
||||
@change="(e) => toggleCustomer(customer.mobile, e.target.checked)"
|
||||
@click.stop
|
||||
/>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="truncate text-sm font-600 text-gray-900">{{ customer.name || '-' }}</div>
|
||||
<div class="truncate text-xs text-gray-500">{{ customer.mobile }}</div>
|
||||
</div>
|
||||
<span class="shrink-0 text-xs text-gray-400">#{{ customer.id }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="متن پیام" name="message" class="md:col-span-4 mb-0">
|
||||
<BasicTextArea v-model:value="form.message" />
|
||||
<div class="mt-2 space-y-2 md:flex md:items-center md:justify-between md:flex-row-reverse md:space-y-0">
|
||||
<BaseButton type="primary" class="w-full md:w-10rem" @click="addName">افزودن نام کاربر</BaseButton>
|
||||
<p class="text-xs leading-5 text-gray-500 md:max-w-[70%]">
|
||||
برای استفاده از نام اشخاص در پیام از گزینه افزودن نام کاربر استفاده کنید. این متغیر با
|
||||
عنوان (%name) به متن پیام اضافه میگردد.
|
||||
</p>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'ant-design-vue'
|
||||
import type { FunctionItem } from '@/model/Item'
|
||||
import type { Customer } from '@/model/customer'
|
||||
import type { Sms } from '@/model/sms'
|
||||
import { getCustomerList } from '@/api/sms'
|
||||
|
||||
const props = defineProps<{
|
||||
form: Sms
|
||||
groupItems?: FunctionItem[]
|
||||
loading?: boolean
|
||||
}>()
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
const selectedGroup = ref<string[]>([])
|
||||
const groupNumbers = ref<Customer[]>([])
|
||||
const customersLoading = ref(false)
|
||||
let baseGroupNumbers: Customer[] = []
|
||||
|
||||
const columns = [
|
||||
{ title: 'کد کاربر', dataIndex: 'id' },
|
||||
{ title: 'نام و نام خانوادگی', dataIndex: 'name' },
|
||||
{ title: 'شماره همراه', dataIndex: 'mobile' }
|
||||
]
|
||||
|
||||
function addName() {
|
||||
props.form.message = (props.form.message ?? '').concat('', '%name')
|
||||
}
|
||||
|
||||
function filterNumbers(val: string) {
|
||||
if (val !== '') {
|
||||
groupNumbers.value = baseGroupNumbers.filter((v) => v.name?.includes(val))
|
||||
} else {
|
||||
groupNumbers.value = baseGroupNumbers
|
||||
}
|
||||
}
|
||||
|
||||
async function loadGroupNumbers(val: string[]) {
|
||||
if (!val.length) {
|
||||
groupNumbers.value = []
|
||||
baseGroupNumbers = []
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
customersLoading.value = true
|
||||
const { customers } = await getCustomerList(val)
|
||||
groupNumbers.value = customers
|
||||
baseGroupNumbers = customers
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally {
|
||||
customersLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function onSelectChange(changableRowKeys: string[]) {
|
||||
props.form.numbers = changableRowKeys
|
||||
}
|
||||
|
||||
function isSelected(mobile?: string) {
|
||||
if (!mobile) return false
|
||||
return props.form.numbers?.includes(mobile) ?? false
|
||||
}
|
||||
|
||||
function toggleCustomer(mobile: string | undefined, checked: boolean) {
|
||||
if (!mobile) return
|
||||
const numbers = new Set(props.form.numbers ?? [])
|
||||
if (checked) numbers.add(mobile)
|
||||
else numbers.delete(mobile)
|
||||
props.form.numbers = Array.from(numbers)
|
||||
}
|
||||
|
||||
watch(selectedGroup, (val) => {
|
||||
loadGroupNumbers(val ?? [])
|
||||
})
|
||||
|
||||
function resetAll() {
|
||||
formRef.value?.resetFields()
|
||||
selectedGroup.value = []
|
||||
groupNumbers.value = []
|
||||
baseGroupNumbers = []
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
validateFields: () => formRef.value?.validateFields(),
|
||||
resetAll
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sms-selector :deep(.ant-select-selector) {
|
||||
max-height: 5vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sms-selector :deep(.ant-select-selector) {
|
||||
max-height: 12vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<MobileCardList
|
||||
v-model:search="search"
|
||||
:loading="loading"
|
||||
:has-more="hasMore"
|
||||
:show-empty="!loading && items.length === 0"
|
||||
empty-text="پیامکی یافت نشد"
|
||||
search-placeholder="جستجو پیامک"
|
||||
show-refresh
|
||||
@search="reload"
|
||||
@refresh="reload"
|
||||
@load-more="loadMore"
|
||||
>
|
||||
<SmsMobileListItem
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
:hide-recipient="!!mobile"
|
||||
@open="openSheet"
|
||||
/>
|
||||
</MobileCardList>
|
||||
|
||||
<SmsMobileDetailSheet v-model:visible="sheetVisible" :item="selectedItem" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getSMSTable } from '@/api/sms'
|
||||
import type { SmsRecord } from '@/model/sms'
|
||||
import MobileCardList from '@/components/mobile/MobileCardList.vue'
|
||||
import { useMobileDetailSheet } from '@/components/mobile/composables/useMobileDetailSheet'
|
||||
import { useMobileTableList } from '@/components/mobile/composables/useMobileTableList'
|
||||
import type { TableInput } from '@core/type/baseTable'
|
||||
import SmsMobileDetailSheet from './SmsMobileDetailSheet.vue'
|
||||
import SmsMobileListItem from './SmsMobileListItem.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
mobile?: number | string
|
||||
}>()
|
||||
|
||||
const { sheetVisible, selectedItem, openSheet, syncSelectedItem } = useMobileDetailSheet<SmsRecord>()
|
||||
|
||||
function fetchSms(params: TableInput) {
|
||||
if (props.mobile) {
|
||||
params.filters = params.filters ?? []
|
||||
params.filters.push({
|
||||
field: 'receiver',
|
||||
type: 'text',
|
||||
value: props.mobile,
|
||||
cr: 'and',
|
||||
op: 'eq',
|
||||
hidden: false
|
||||
})
|
||||
}
|
||||
return getSMSTable(params)
|
||||
}
|
||||
|
||||
const { loading, search, items, hasMore, reload, loadMore, fetch } = useMobileTableList<SmsRecord>({
|
||||
fetchApi: fetchSms,
|
||||
onFetched: (rows) => syncSelectedItem(rows)
|
||||
})
|
||||
|
||||
onMounted(() => reload())
|
||||
|
||||
defineExpose({ fetch, openSheet })
|
||||
</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="sheetTitle">
|
||||
<template #default="{ item: row }">
|
||||
<MobileSheetHeader :title="sheetTitle" :subtitle="dateLabel(row)" :show-title="isMobile" />
|
||||
|
||||
<MobileInfoGrid>
|
||||
<MobileDetailRow label="کد" :value="row.id ?? '-'" />
|
||||
<MobileDetailRow label="شماره تلفن" :value="phoneLabel(row)" />
|
||||
<MobileDetailRow label="نام دریافت کننده" full-width :value="recipientName(row)" />
|
||||
<MobileDetailRow label="تاریخ و ساعت" full-width :value="dateLabel(row)" />
|
||||
<MobileDetailRow label="پیام" full-width :value="row.sms || '-'" />
|
||||
</MobileInfoGrid>
|
||||
</template>
|
||||
</MobileDetailSheet>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { SmsRecord } from '@/model/sms'
|
||||
import MobileDetailRow from '@/components/mobile/MobileDetailRow.vue'
|
||||
import MobileDetailSheet from '@/components/mobile/MobileDetailSheet.vue'
|
||||
import MobileInfoGrid from '@/components/mobile/MobileInfoGrid.vue'
|
||||
import MobileSheetHeader from '@/components/mobile/MobileSheetHeader.vue'
|
||||
import { isMobile } from '@core/utils/is'
|
||||
import { toJalali } from '@core/utils/useDataTime'
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean
|
||||
item: SmsRecord | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', value: boolean): void
|
||||
}>()
|
||||
|
||||
const visibleProxy = computed({
|
||||
get: () => props.visible,
|
||||
set: (value: boolean) => emit('update:visible', value)
|
||||
})
|
||||
|
||||
const sheetTitle = computed(() => recipientName(props.item) || `پیامک #${props.item?.id ?? '-'}`)
|
||||
|
||||
function recipientName(row: SmsRecord | null) {
|
||||
if (!row) return '-'
|
||||
if (row.person?.name) return row.person.name
|
||||
return row.person?.mobile || '-'
|
||||
}
|
||||
|
||||
function phoneLabel(row: SmsRecord) {
|
||||
return row.person?.mobile || row.receiver || '-'
|
||||
}
|
||||
|
||||
function dateLabel(row: SmsRecord) {
|
||||
return row.created_at ? toJalali(row.created_at) : '-'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<MobileCard clickable @click="$emit('open', item)">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<span class="min-w-0 truncate text-sm font-700 text-gray-900">{{ recipientName }}</span>
|
||||
<div class="shrink-0 space-y-0.5 text-left">
|
||||
<div class="text-xs text-gray-400">{{ dateLabel }}</div>
|
||||
<div v-if="!hideRecipient" class="text-xs text-gray-600">{{ phoneLabel }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</MobileCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { SmsRecord } from '@/model/sms'
|
||||
import MobileCard from '@/components/mobile/MobileCard.vue'
|
||||
import { toJalali } from '@core/utils/useDataTime'
|
||||
|
||||
const props = defineProps<{
|
||||
item: SmsRecord
|
||||
hideRecipient?: boolean
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
(e: 'open', item: SmsRecord): void
|
||||
}>()
|
||||
|
||||
const recipientName = computed(() => {
|
||||
if (props.item.person?.name) return props.item.person.name
|
||||
return props.item.person?.mobile || '-'
|
||||
})
|
||||
|
||||
const phoneLabel = computed(() => props.item.person?.mobile || props.item.receiver || '-')
|
||||
const dateLabel = computed(() => (props.item.created_at ? toJalali(props.item.created_at) : '-'))
|
||||
</script>
|
||||
@@ -1,11 +1,19 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="h-full min-h-0 min-w-0 max-w-full overflow-hidden">
|
||||
<BasicShowContext title="لیست پیامک ها">
|
||||
<BaseTable v-bind="tblProps" @register="submit" ref="tbl">
|
||||
<template v-if="!mobile" #extra>
|
||||
<BaseButton type="primary" size="small" class="flex shrink-0 md:hidden" @click="emits('add')">
|
||||
<div>ارسال پیامک</div>
|
||||
<BaseIcon icon="vuesax-linear:sms" Size="16px" />
|
||||
</BaseButton>
|
||||
</template>
|
||||
|
||||
<div class="flex h-full min-h-0 flex-col">
|
||||
<BaseTable v-if="!isMobileScreen" class="h-full min-h-0 min-w-0" v-bind="tblProps" @register="submit" ref="tbl">
|
||||
<template #extraHeader>
|
||||
<BaseButton v-if="!mobile" type="primary" size="small" class="flex" @click="emits('add')">
|
||||
<div>ارسال پیامک</div>
|
||||
<BaseIcon icon="vuesax-linear:sms" Size="16px"/>
|
||||
<BaseIcon icon="vuesax-linear:sms" Size="16px" />
|
||||
</BaseButton>
|
||||
</template>
|
||||
<template #action="{ column, record }">
|
||||
@@ -19,42 +27,30 @@
|
||||
</div>-->
|
||||
</template>
|
||||
</BaseTable>
|
||||
|
||||
<SmsMobileCardList v-else ref="mobileListRef" class="min-h-0 flex-1" :mobile="mobile" />
|
||||
</div>
|
||||
</BasicShowContext>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="tsx" setup>
|
||||
import type {TableInput} from '@core/type/baseTable'
|
||||
import type { TableInput } from '@core/type/baseTable'
|
||||
import useBaseTable from '@core/components/BaseTableOld/hooks/useBaseTable'
|
||||
import Icon from '@core/components/BaseIcon/src/Icon.vue'
|
||||
import {changeCustomerActivation, getCustomerTable} from '@/api/customer'
|
||||
import {cols} from '../hooks/smsColumns'
|
||||
import {useUserStore} from '@/store/userStore'
|
||||
import {usePrefix} from '@core/composable/usePrefix'
|
||||
import {message} from 'ant-design-vue'
|
||||
import {getOrderTable} from '@/api/order'
|
||||
import {getPriceTable} from '@/api/price'
|
||||
import {getSMSTable} from '@/api/sms'
|
||||
|
||||
const [submit, reload] = useBaseTable()
|
||||
import { cols } from '../hooks/smsColumns'
|
||||
import { getSMSTable } from '@/api/sms'
|
||||
import SmsMobileCardList from './SmsMobileCardList.vue'
|
||||
import { isMobile as isMobileScreen } from '@core/utils/is'
|
||||
|
||||
interface Prop {
|
||||
mobile: number
|
||||
mobile?: number | string
|
||||
}
|
||||
|
||||
const props = defineProps<Prop>()
|
||||
const emits = defineEmits(['delete', 'edit', 'add', 'info'])
|
||||
|
||||
// const { prefixCls } = usePrefix('pophoverstatus')
|
||||
|
||||
//permission
|
||||
/*function checkPermission(temp: string) {
|
||||
const store = useUserStore()
|
||||
return store.canAccess(temp)
|
||||
}*/
|
||||
|
||||
//define table
|
||||
const table = ref(null)
|
||||
const [submit, reload] = useBaseTable()
|
||||
const mobileListRef = ref<null | { fetch: () => Promise<void> }>(null)
|
||||
|
||||
const tblProps = ref<any>({
|
||||
columns: cols,
|
||||
@@ -62,52 +58,24 @@ const tblProps = ref<any>({
|
||||
if (props.mobile) {
|
||||
params.filters = []
|
||||
params.filters?.push({
|
||||
field: "receiver",
|
||||
type: "text",
|
||||
field: 'receiver',
|
||||
type: 'text',
|
||||
value: props.mobile,
|
||||
cr: "and",
|
||||
op: "eq",
|
||||
cr: 'and',
|
||||
op: 'eq',
|
||||
hidden: false
|
||||
})
|
||||
}
|
||||
|
||||
return getSMSTable(params)
|
||||
}
|
||||
//bordered: true
|
||||
})
|
||||
// const loading = ref<boolean>(false)
|
||||
|
||||
const fetch = () => {
|
||||
// console.log('sss')
|
||||
reload()
|
||||
async function fetch() {
|
||||
await Promise.allSettled([reload(), mobileListRef.value?.fetch?.() as Promise<void>])
|
||||
}
|
||||
// const spinTable = (val: boolean) => {
|
||||
// // console.log('sss')
|
||||
// table?.value?.loading.value = val
|
||||
// }
|
||||
|
||||
defineExpose({
|
||||
fetch
|
||||
// spinTable
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@prefix: ~'@{prefixCls}-pophoverstatus';
|
||||
|
||||
.@{prefix} {
|
||||
.ant-menu-rtl.ant-menu-inline,
|
||||
.ant-menu-rtl.ant-menu-vertical {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.ant-menu-item-only-child {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
//bor
|
||||
/* .ant-input-group-addon:first-child {
|
||||
!* border: #d9d9d9 1px solid;
|
||||
border-radius: 0 6px 6px 0;*!
|
||||
}*/
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user