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>
|