change responsive]
This commit is contained in:
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<MobileCardList
|
||||
v-model:search="search"
|
||||
:loading="loading"
|
||||
:has-more="hasMore"
|
||||
:show-empty="!loading && items.length === 0"
|
||||
empty-text="رکوردی یافت نشد"
|
||||
@search="reload"
|
||||
@load-more="loadMore"
|
||||
>
|
||||
<AccountingMobileListItem
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
@open="openSheet"
|
||||
/>
|
||||
</MobileCardList>
|
||||
|
||||
<AccountingMobileDetailSheet
|
||||
v-model:visible="sheetVisible"
|
||||
:item="selectedItem"
|
||||
@info="$emit('info', $event)"
|
||||
@orders="$emit('orders', $event)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getTotalAccountingTable } from '@/api/accounting'
|
||||
import type { TotalAccounting } from '@/model/accounting'
|
||||
import MobileCardList from '@/components/mobile/MobileCardList.vue'
|
||||
import { useMobileDetailSheet } from '@/components/mobile/composables/useMobileDetailSheet'
|
||||
import { useMobileTableList } from '@/components/mobile/composables/useMobileTableList'
|
||||
import AccountingMobileDetailSheet from './AccountingMobileDetailSheet.vue'
|
||||
import AccountingMobileListItem from './AccountingMobileListItem.vue'
|
||||
|
||||
defineEmits<{
|
||||
(e: 'info', item: TotalAccounting): void
|
||||
(e: 'orders', item: TotalAccounting): void
|
||||
}>()
|
||||
|
||||
const { sheetVisible, selectedItem, openSheet, syncSelectedItem } = useMobileDetailSheet<TotalAccounting>()
|
||||
|
||||
const { loading, search, items, hasMore, reload, loadMore, fetch } = useMobileTableList<TotalAccounting>({
|
||||
fetchApi: getTotalAccountingTable,
|
||||
onFetched: (rows) => syncSelectedItem(rows)
|
||||
})
|
||||
|
||||
onMounted(() => reload())
|
||||
|
||||
defineExpose({ fetch, openSheet })
|
||||
</script>
|
||||
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="sheetTitle">
|
||||
<template #default="{ item: row }">
|
||||
<MobileSheetHeader :title="sheetTitle" :show-title="isMobile">
|
||||
<template #actions>
|
||||
<MobileIconButton plain icon="vuesax-linear:stickynote" color="#10913A" :size="22" @click="$emit('info', row)" />
|
||||
<MobileIconButton plain icon="vuesax-linear:receipt-item" color="#10913A" :size="22" @click="$emit('orders', row)" />
|
||||
</template>
|
||||
</MobileSheetHeader>
|
||||
|
||||
<div class="space-y-2">
|
||||
<MobileStatCard bordered variant="success" label="موجودی ریالی" :value="usePrice(row.balance_cash ?? 0, true, '')">
|
||||
<template #prefix>
|
||||
<BaseIcon icon="vuesax-linear:empty-wallet" size="18" color="#15803d" />
|
||||
</template>
|
||||
</MobileStatCard>
|
||||
<MobileStatCard bordered variant="success" label="موجودی طلایی" :value="`${row.balance_gold ?? 0} گرم`">
|
||||
<template #prefix>
|
||||
<BaseIcon icon="vuesax-linear:coin" size="18" color="#15803d" />
|
||||
</template>
|
||||
</MobileStatCard>
|
||||
</div>
|
||||
|
||||
<MobileInfoGrid>
|
||||
<MobileDetailRow label="نام مشتری" :value="row.customer_to?.name || '-'" />
|
||||
<MobileDetailRow label="نام مشتری دعوت شده" :value="row.customer?.name || '-'" />
|
||||
<MobileDetailRow label="زمان ثبت" :value="row.created_at ? toJalali(row.created_at) : '-'" />
|
||||
<MobileDetailRow label="نقد (ریال)" :value="usePrice(row.cash ?? 0, true, '')" />
|
||||
<MobileDetailRow label="طلا (گرم)" :value="`${row.gold ?? 0}`" />
|
||||
<MobileDetailRow label="توضیحات" full-width :value="row.note || '-'" />
|
||||
</MobileInfoGrid>
|
||||
</template>
|
||||
</MobileDetailSheet>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { TotalAccounting } from '@/model/accounting'
|
||||
import MobileDetailRow from '@/components/mobile/MobileDetailRow.vue'
|
||||
import MobileStatCard from '@/components/mobile/MobileStatCard.vue'
|
||||
import MobileDetailSheet from '@/components/mobile/MobileDetailSheet.vue'
|
||||
import MobileIconButton from '@/components/mobile/MobileIconButton.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'
|
||||
import { usePrice } from '@core/utils/usePrice'
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean
|
||||
item: TotalAccounting | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', value: boolean): void
|
||||
(e: 'info', item: TotalAccounting): void
|
||||
(e: 'orders', item: TotalAccounting): void
|
||||
}>()
|
||||
|
||||
const visibleProxy = computed({
|
||||
get: () => props.visible,
|
||||
set: (value: boolean) => emit('update:visible', value)
|
||||
})
|
||||
|
||||
const sheetTitle = computed(() => props.item?.customer_to?.name || props.item?.customer?.name || 'حسابداری')
|
||||
</script>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<MobileCard clickable @click="$emit('open', item)">
|
||||
<div class="space-y-1">
|
||||
<div>
|
||||
<div class="flex justify-between items-center gap-x-3 gap-y-1 text-xs">
|
||||
<div class="truncate text-sm font-700 text-gray-900">{{ customerToName }}</div>
|
||||
<div class="text-xs text-gray-400">{{ createdAtLabel }}</div>
|
||||
</div>
|
||||
<span class="text-xs text-gray-600">نقد: <span class="font-600 text-gray-900">{{ cashLabel }}</span></span>
|
||||
<span class="text-xs text-gray-600">طلا: <span class="font-600 text-gray-900">{{ goldLabel }}</span></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</MobileCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { TotalAccounting } from '@/model/accounting'
|
||||
import MobileCard from '@/components/mobile/MobileCard.vue'
|
||||
import { toJalali } from '@core/utils/useDataTime'
|
||||
import { usePrice } from '@core/utils/usePrice'
|
||||
|
||||
const props = defineProps<{
|
||||
item: TotalAccounting
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
(e: 'open', item: TotalAccounting): void
|
||||
}>()
|
||||
|
||||
const customerToName = computed(() => props.item.customer_to?.name || '-')
|
||||
const createdAtLabel = computed(() => (props.item.created_at ? toJalali(props.item.created_at) : '-'))
|
||||
const cashLabel = computed(() => usePrice(props.item.cash ?? 0, true, ''))
|
||||
const goldLabel = computed(() => `${props.item.gold ?? 0} گرم`)
|
||||
</script>
|
||||
@@ -1,141 +1,67 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="min-w-0 w-full max-w-full overflow-x-hidden">
|
||||
<BasicShowContext title="حسابداری">
|
||||
<BaseTable v-bind="tblProps" @register="submit" ref="tbl">
|
||||
<template #extraHeader>
|
||||
<!-- <BaseButton v-if="!customerId" type="primary" size="small" class="flex" @click="emits('add')">-->
|
||||
<!-- <div>افزودن سفارش</div>-->
|
||||
<!-- <BaseIcon icon="vuesax-linear:receipt-add" Size="16px" />-->
|
||||
<!-- </BaseButton>-->
|
||||
</template>
|
||||
<template #action="{ column, record }">
|
||||
<div class="gap-2 flex justify-center">
|
||||
<a-tooltip placement="bottom" class="cursor-pointer" @click="emits('', record)">
|
||||
<template #title>
|
||||
<span>برداشت و واریز</span>
|
||||
</template>
|
||||
<Icon icon="vuesax-linear:stickynote" color="#10913A" />
|
||||
</a-tooltip>
|
||||
<a-tooltip placement="bottom" class="cursor-pointer" @click="handleOrderModal(record)">
|
||||
<template #title>
|
||||
<span>سفارشات</span>
|
||||
</template>
|
||||
<Icon icon="vuesax-linear:receipt-item" color="#10913A" />
|
||||
</a-tooltip>
|
||||
<div v-if="!isMobile" class="min-w-0 w-full max-w-full overflow-x-auto">
|
||||
<BaseTable v-bind="tblProps" @register="submit" ref="tbl">
|
||||
<template #action="{ record }">
|
||||
<div class="flex justify-center gap-2">
|
||||
<a-tooltip placement="bottom" class="cursor-pointer" @click="emits('info', record)">
|
||||
<template #title><span>برداشت و واریز</span></template>
|
||||
<Icon icon="vuesax-linear:stickynote" color="#10913A" />
|
||||
</a-tooltip>
|
||||
<a-tooltip placement="bottom" class="cursor-pointer" @click="emits('orders', record)">
|
||||
<template #title><span>سفارشات</span></template>
|
||||
<Icon icon="vuesax-linear:receipt-item" color="#10913A" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</BaseTable>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</BaseTable>
|
||||
<AccountingMobileCardList
|
||||
v-else
|
||||
ref="mobileListRef"
|
||||
@info="emits('info', $event)"
|
||||
@orders="emits('orders', $event)"
|
||||
/>
|
||||
</BasicShowContext>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="tsx" setup>
|
||||
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/accountingColumns'
|
||||
import { useUserStore } from '@/store/userStore'
|
||||
import { usePrefix } from '@core/composable/usePrefix'
|
||||
import { message } from 'ant-design-vue'
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { getTotalAccountingTable } from '@/api/accounting'
|
||||
import {ref} from "vue";
|
||||
import {cloneDeep} from "lodash";
|
||||
import { cols } from '@/pages/menuPages/accounting/hooks/accountingColumns'
|
||||
import AccountingMobileCardList from '@/pages/menuPages/accounting/components/AccountingMobileCardList.vue'
|
||||
import Icon from '@core/components/BaseIcon/src/Icon.vue'
|
||||
import useBaseTable from '@core/components/BaseTable/hooks/useBaseTable'
|
||||
import type { TableInput } from '@core/type/baseTable'
|
||||
import { isMobile } from '@core/utils/is'
|
||||
|
||||
const showOrderModal = ref<boolean>(false)
|
||||
function handleOrderModal(record) {
|
||||
|
||||
showOrderModal.value = true
|
||||
}
|
||||
defineProps<{
|
||||
customerId?: number
|
||||
}>()
|
||||
|
||||
const emits = defineEmits<{
|
||||
(e: 'info', record: unknown): void
|
||||
(e: 'orders', record: unknown): void
|
||||
}>()
|
||||
|
||||
const [submit, reload] = useBaseTable()
|
||||
/*const select = (val) => {
|
||||
val.sts === 1 ? return ['1'] : ['2']
|
||||
}*/
|
||||
//emits
|
||||
interface Prop {
|
||||
customerId: number
|
||||
}
|
||||
const emits = defineEmits(['delete', 'edit', 'add', 'info'])
|
||||
const props = defineProps<Prop>()
|
||||
const mobileListRef = ref<null | { fetch: () => Promise<void> }>(null)
|
||||
|
||||
const { prefixCls } = usePrefix('pophoverstatus')
|
||||
|
||||
//permission
|
||||
function checkPermission(temp: string) {
|
||||
const store = useUserStore()
|
||||
return store.canAccess(temp)
|
||||
}
|
||||
|
||||
//define table
|
||||
const table = ref(null)
|
||||
|
||||
const tblProps = ref<any>({
|
||||
const tblProps = ref({
|
||||
columns: cols,
|
||||
api: (params: TableInput) => {
|
||||
if (props.customerId) {
|
||||
// params.filters = []
|
||||
// params.filters?.push({
|
||||
// field: "customer_id",
|
||||
// type: "text",
|
||||
// value: props.customerId,
|
||||
// cr: "and",
|
||||
// op: "eq",
|
||||
// hidden: false
|
||||
// })
|
||||
}
|
||||
return getTotalAccountingTable(params)
|
||||
}
|
||||
//bordered: true
|
||||
api: (params: TableInput) => getTotalAccountingTable(params)
|
||||
})
|
||||
const loading = ref<boolean>(false)
|
||||
|
||||
async function changeCustomerActivationFunction(id: number) {
|
||||
try {
|
||||
loading.value = true
|
||||
await changeCustomerActivation(id)
|
||||
reload()
|
||||
message.success('تغییر وضعیت با موفقیت انجام شد')
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
async function fetch() {
|
||||
if (isMobile.value) {
|
||||
await mobileListRef.value?.fetch?.()
|
||||
return
|
||||
}
|
||||
await reload()
|
||||
}
|
||||
|
||||
const fetch = () => {
|
||||
// console.log('sss')
|
||||
reload()
|
||||
}
|
||||
// const spinTable = (val: boolean) => {
|
||||
// // console.log('sss')
|
||||
// table?.value?.loading.value = val
|
||||
// }
|
||||
defineExpose({
|
||||
fetch
|
||||
// spinTable
|
||||
})
|
||||
defineExpose({ fetch })
|
||||
</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>
|
||||
|
||||
@@ -79,7 +79,6 @@ export const cols: BaseTableColumn[] = [
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
slot: 'action',
|
||||
fixed: 'right',
|
||||
filterable: false
|
||||
}
|
||||
]
|
||||
|
||||
@@ -1,15 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<BasicMainCard>
|
||||
<div class="flex w-full h-full">
|
||||
<tbl
|
||||
ref="table"
|
||||
class="w-full h-full"
|
||||
@info="info"
|
||||
@edit="edit"
|
||||
@delete="deleteItem"
|
||||
@add="add"
|
||||
/>
|
||||
<div class="flex h-full w-full min-w-0 max-w-full overflow-x-hidden">
|
||||
<tbl ref="table" class="h-full w-full min-w-0" @info="onAccountingWithdraw" @orders="onAccountingOrders" />
|
||||
|
||||
<!-- <BasicMenu :menu="menu" width="13rem" @onChange="tabSelected" />
|
||||
<component :is="selectedComponent" class="mr-5" />-->
|
||||
@@ -143,6 +136,7 @@ import { cloneDeep } from 'lodash'
|
||||
import type { Item } from '@/model/Item'
|
||||
import type { Customer } from '@/model/customer'
|
||||
import { createCustomer, deleteCustomer, getCustomersList, updateCustomer } from '@/api/customer'
|
||||
import type { TotalAccounting } from '@/model/accounting'
|
||||
import type { Order } from '@/model/order'
|
||||
import { usePrice } from '@core/utils/usePrice'
|
||||
import { getLastPrice } from '@/api/price'
|
||||
@@ -234,6 +228,14 @@ function stopGetPrice() {
|
||||
//info
|
||||
let infoParams = reactive<Info>({})
|
||||
|
||||
function onAccountingWithdraw(_record: TotalAccounting) {
|
||||
message.info('برداشت و واریز بهزودی در دسترس است')
|
||||
}
|
||||
|
||||
function onAccountingOrders(_record: TotalAccounting) {
|
||||
message.info('لیست سفارشات بهزودی در دسترس است')
|
||||
}
|
||||
|
||||
function info(val: Order) {
|
||||
infoParams.name = val.customer.name
|
||||
infoParams.type = val.customer.mobile
|
||||
|
||||
Reference in New Issue
Block a user