102 lines
3.3 KiB
Vue
102 lines
3.3 KiB
Vue
<template>
|
||
<div>
|
||
<BasicShowContext title="لیست قلک ها">
|
||
<BaseTable v-bind="tblProps" @register="submit" ref="tbl">
|
||
<template #action="{ record }">
|
||
<div class="flex items-center justify-center gap-2">
|
||
<a-tooltip placement="bottom">
|
||
<template #title><span>مشخصات / تراکنشها</span></template>
|
||
<Icon
|
||
class="cursor-pointer"
|
||
icon="vuesax-linear:info-circle"
|
||
color="#4572E9"
|
||
@click="openDetails(record)"
|
||
/>
|
||
</a-tooltip>
|
||
</div>
|
||
</template>
|
||
</BaseTable>
|
||
</BasicShowContext>
|
||
|
||
<BasicActionSheet
|
||
v-model:visible="detailsVisible"
|
||
:title="detailsTitle"
|
||
@close="detailsVisible = false"
|
||
>
|
||
<div class="mb-3 flex flex-wrap gap-3 text-sm">
|
||
<span>کد قلک: {{ selectedFund?.id ?? '—' }}</span>
|
||
<span>عنوان: {{ selectedFund?.title || '—' }}</span>
|
||
<span>محصول: {{ productTitleOf(selectedFund) }}</span>
|
||
<span>موجودی: {{ selectedFund?.gold ?? 0 }}</span>
|
||
</div>
|
||
<BaseTable v-if="detailsVisible" v-bind="txTblProps" @register="txSubmit" />
|
||
</BasicActionSheet>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="tsx" setup>
|
||
import type { TableInput } from '@core/type/baseTable'
|
||
import useBaseTable from '@core/components/BaseTable/hooks/useBaseTable'
|
||
import Icon from '@core/components/BaseIcon/src/Icon.vue'
|
||
import { piggyFundsCols } from '@/pages/menuPages/customers/base/hooks/piggyFundsColumns'
|
||
import { computed, ref } from 'vue'
|
||
import { getPiggyFundsTable, getPiggyFundTransactionsTable } from '@/api/user'
|
||
import BasicActionSheet from '@/components/BasicActionSheet.vue'
|
||
import BasicShowContext from '@/components/BasicShowContext.vue'
|
||
|
||
const [submit, reload] = useBaseTable()
|
||
const [txSubmit] = useBaseTable()
|
||
|
||
interface Prop {
|
||
customerId?: number
|
||
}
|
||
|
||
const props = defineProps<Prop>()
|
||
|
||
const tblProps = ref<any>({
|
||
columns: piggyFundsCols,
|
||
api: (params: TableInput) => getPiggyFundsTable(params, props.customerId!)
|
||
})
|
||
|
||
const detailsVisible = ref(false)
|
||
const selectedFund = ref<any>(null)
|
||
|
||
const detailsTitle = computed(
|
||
() => `مشخصات قلک «${selectedFund.value?.title || selectedFund.value?.id || '—'}»`
|
||
)
|
||
|
||
const txCols = [
|
||
{
|
||
title: 'ردیف',
|
||
dataIndex: 'id',
|
||
key: 'row',
|
||
filterable: false,
|
||
sortable: false,
|
||
customRender: (record: any) => record.index + 1
|
||
},
|
||
{ title: 'کد', dataIndex: 'id', key: 'id', type: 'Number' },
|
||
{ title: 'نوع', dataIndex: 'type_str', key: 'type_str', type: 'Text' },
|
||
{ title: 'طلا', dataIndex: 'gold', key: 'gold', type: 'Number' },
|
||
{ title: 'ریال', dataIndex: 'cash', key: 'cash', type: 'Number' },
|
||
{ title: 'تاریخ', dataIndex: 'created_at', key: 'created_at', type: 'Text' }
|
||
]
|
||
|
||
const txTblProps = computed(() => ({
|
||
columns: txCols,
|
||
api: (params: TableInput) =>
|
||
getPiggyFundTransactionsTable(params, props.customerId!, Number(selectedFund.value?.id ?? 0))
|
||
}))
|
||
|
||
function productTitleOf(record: any) {
|
||
return record?.product_title || record?.product?.title || '—'
|
||
}
|
||
|
||
function openDetails(record: any) {
|
||
selectedFund.value = record
|
||
detailsVisible.value = true
|
||
}
|
||
|
||
const fetch = () => reload()
|
||
defineExpose({ fetch })
|
||
</script>
|