change responsive]

2026-05-31 11:51:52 +03:30
parent 06568c5858
commit 023b8ee5be
124 changed files with 6296 additions and 4233 deletions
@@ -0,0 +1,118 @@
+<template>
+  <a-form :model="form" ref="formRef" autocomplete="off">
+    <div class="space-y-3">
+      <div class="flex flex-col items-center gap-1 rounded-xl bg-gray-50 px-4 py-3 sm:flex-row sm:justify-center sm:gap-4">
+        <span class="text-sm text-gray-600">قیمت {{ form.direction === 1 ? 'خرید' : 'فروش' }} طلا:</span>
+        <span class="text-sm font-700 text-gray-900">{{ marketPriceLabel }}</span>
+      </div>
+
+      <a-form-item label="نوع تراکنش" name="direction" :rules="inputRules()">
+        <a-radio-group v-model:value="form.direction" button-style="solid" @change="$emit('changePrice')">
+          <a-radio-button :value="1">خرید</a-radio-button>
+          <a-radio-button :value="2">فروش</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+
+      <a-form-item
+        :label="`قیمت ${form.direction === 1 ? 'خرید' : 'فروش'} هر گرم`"
+        name="price"
+        :rules="inputRules()"
+      >
+        <BasicInput
+          v-model:value="form.price"
+          addon-before="ریال"
+          type="price"
+          @change="$emit('changePriceValue')"
+        />
+      </a-form-item>
+
+      <a-form-item label="تاریخ سفارش" name="pay_at" :rules="inputRules()">
+        <BaseDatePicker v-model:value="form.pay_at" format="YYYY-MM-DD HH:mm:ss" />
+      </a-form-item>
+
+      <a-form-item label="سود" name="difference" :rules="inputRules()">
+        <BasicInput v-model:value="form.difference" addon-before="ریال" type="price" />
+      </a-form-item>
+
+      <a-form-item label="کل قیمت لیمان" name="total_price_liman">
+        <BasicInput v-model:value="form.total_price_liman" addon-before="ریال" type="price" />
+      </a-form-item>
+
+      <div class="space-y-2 rounded-xl bg-orange-50 p-3">
+        <a-form-item label="انتخاب کاربر" name="customer_id" :rules="inputRules()" class="mb-0">
+          <BasicSelect
+            v-model:value="form.customer_id"
+            :items="userItems"
+            valueName="name"
+            keyName="id"
+            @change="$emit('changeUser', $event)"
+          />
+        </a-form-item>
+        <BasicInfoItem is-line title="کیف پول طلا" :value="selectedCustomer?.wallet?.[0]?.gold ?? '_'" />
+        <BasicInfoItem is-line title="کیف پول ریالی" :value="selectedCustomer?.wallet?.[0]?.cash ?? '_'" />
+      </div>
+
+      <div class="space-y-2 rounded-xl bg-blue-50 p-3">
+        <div class="text-sm font-600 text-gray-700">مقدار {{ form.direction === 1 ? 'خرید' : 'فروش' }}:</div>
+        <a-form-item name="goldCash" :rules="inputRulesNumber()" class="mb-0">
+          <BasicInput
+            v-model:value="form.goldCash"
+            addon-before="ریال"
+            addon-bg-color="#0A1B37"
+            addon-text-color="white"
+            place-holder="ارزش کل"
+            type="price"
+            @onchange="$emit('calculateGold', $event)"
+          />
+        </a-form-item>
+        <a-form-item name="goldValue" :rules="inputRulesNumber()" class="mb-0">
+          <BasicInput
+            v-model:value="form.goldValue"
+            addon-before="گرم"
+            addon-bg-color="#0A1B37"
+            addon-text-color="white"
+            place-holder="مقدار طلا"
+            type="tel"
+            @onchange="$emit('calculateCash', $event)"
+          />
+        </a-form-item>
+      </div>
+    </div>
+  </a-form>
+</template>
+
+<script setup lang="ts">
+import type { FormInstance } from 'ant-design-vue'
+import type { Customer } from '@/model/customer'
+import type { Order } from '@/model/order'
+import type { last } from '@/model/price'
+import { inputRules, inputRulesNumber } from '@/utils/inputRules'
+import { usePrice } from '@core/utils/usePrice'
+
+const props = defineProps<{
+  form: Order
+  dataLast?: last
+  userItems?: Customer[]
+  selectedCustomer?: Customer
+}>()
+
+defineEmits<{
+  (e: 'changePrice'): void
+  (e: 'changePriceValue'): void
+  (e: 'changeUser', value: Customer): void
+  (e: 'calculateGold', value: number): void
+  (e: 'calculateCash', value: number): void
+}>()
+
+const formRef = ref<FormInstance>()
+
+const marketPriceLabel = computed(() => {
+  const price = props.form.direction === 1 ? props.dataLast?.buy ?? 0 : props.dataLast?.sell ?? 0
+  return usePrice(price)
+})
+
+defineExpose({
+  validateFields: () => formRef.value?.validateFields(),
+  resetFields: () => formRef.value?.resetFields()
+})
+</script>
@@ -0,0 +1,73 @@
+<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"
+  >
+    <OrderMobileListItem
+      v-for="item in items"
+      :key="item.id"
+      :item="item"
+      @open="openSheet"
+    />
+  </MobileCardList>
+
+  <OrderMobileDetailSheet
+    v-model:visible="sheetVisible"
+    :item="selectedItem"
+  />
+</template>
+
+<script setup lang="ts">
+import { getOrderTable } from '@/api/order'
+import type { Order } from '@/model/order'
+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 OrderMobileDetailSheet from './OrderMobileDetailSheet.vue'
+import OrderMobileListItem from './OrderMobileListItem.vue'
+
+type OrderRow = Order & { sts_str?: string; service_charge?: number }
+
+const props = defineProps<{
+  customerId?: number
+}>()
+
+defineEmits<{
+  (e: 'info', item: OrderRow): void
+}>()
+
+const { sheetVisible, selectedItem, openSheet, syncSelectedItem } = useMobileDetailSheet<OrderRow>()
+
+function fetchOrders(params: TableInput) {
+  if (props.customerId) {
+    params.filters = params.filters ?? []
+    params.filters.push({
+      field: 'customer_id',
+      type: 'text',
+      value: props.customerId,
+      cr: 'and',
+      op: 'eq',
+      hidden: false
+    })
+  }
+  return getOrderTable(params)
+}
+
+const { loading, search, items, hasMore, reload, loadMore, fetch } = useMobileTableList<OrderRow>({
+  fetchApi: fetchOrders,
+  onFetched: (rows) => syncSelectedItem(rows)
+})
+
+onMounted(() => reload())
+
+defineExpose({ fetch, openSheet })
+</script>
@@ -0,0 +1,122 @@
+<template>
+  <MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="sheetTitle">
+    <template #default="{ item: row }">
+      <MobileSheetHeader :subtitle="createdAtLabel(row)" :show-title="isMobile">
+        <template #title>
+          <span class="min-w-0 truncate">{{ sheetTitle }}</span>
+        </template>
+      </MobileSheetHeader>
+
+      <div class="flex items-center gap-2">
+        <span class="rounded-lg border px-2 py-0.5 text-xs font-600" :class="directionClass(row)">
+          {{ directionLabel(row) }}
+        </span>
+        <span
+          v-if="row.sts_str"
+          class="rounded-lg border px-2 py-0.5 text-xs font-600"
+          :class="statusClass(row)"
+        >
+          {{ row.sts_str }}
+        </span>
+      </div>
+
+      <div class="space-y-2">
+        <MobileStatCard bordered variant="success" label="قیمت کل برای مشتری (ریال)" :value="usePrice(row.total_price ?? 0, true, '')">
+          <template #prefix>
+            <BaseIcon icon="vuesax-linear:empty-wallet" size="18" color="#15803d" />
+          </template>
+        </MobileStatCard>
+        <MobileStatCard bordered variant="warning" label="مقدار (گرم)" :value="`${row.amount ?? 0} گرم`">
+          <template #prefix>
+            <BaseIcon icon="vuesax-linear:coin" size="18" color="#b45309" />
+          </template>
+        </MobileStatCard>
+      </div>
+
+      <div class="space-y-2">
+        <MobileStatCard bordered label="قیمت هر گرم طلا برای مشتری (ریال)" :value="usePrice(row.price ?? 0, true, '')" />
+        <MobileStatCard bordered label="قیمت هر گرم طلا بدون سود (ریال)" :value="usePrice(row.price_original ?? 0, true, '')" />
+        <MobileStatCard bordered label="قیمت کل لیمان (ریال)" :value="usePrice(row.total_price_liman ?? 0, true, '')" />
+        <MobileStatCard bordered label="قیمت کل بدون سود (ریال)" :value="usePrice(row.total_price_original ?? 0, true, '')" />
+        <MobileStatCard bordered label="سود هر گرم (ریال)" :value="usePrice(row.fee ?? 0, true, '')" />
+        <MobileStatCard bordered label="کارمزد طلایی" :value="serviceChargeLabel(row)" />
+      </div>
+
+      <MobileInfoGrid>
+        <MobileDetailRow label="کد سفارش" :value="row.id ?? '-'" />
+        <MobileDetailRow label="شماره موبایل" :value="row.customer?.mobile || '-'" />
+        <MobileDetailRow label="سود کل (ریال)" :value="usePrice(row.total_fee ?? 0, true, '')" />
+        <MobileDetailRow label="کد کاربری" :value="row.customer?.id ?? '-'" />
+        <MobileDetailRow label="شماره ملی" :value="row.customer?.n_code || '-'" />
+        <MobileDetailRow label="شماره تلفن" :value="row.customer?.phone_number || '-'" />
+        <MobileDetailRow label="نام استان" :value="row.customer?.province || '-'" />
+        <MobileDetailRow label="نام شهر" :value="row.customer?.city || '-'" />
+      </MobileInfoGrid>
+    </template>
+  </MobileDetailSheet>
+</template>
+
+<script setup lang="ts">
+import type { Order } from '@/model/order'
+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 MobileStatCard from '@/components/mobile/MobileStatCard.vue'
+import { isMobile } from '@core/utils/is'
+import { toJalali } from '@core/utils/useDataTime'
+import { usePrice } from '@core/utils/usePrice'
+
+type OrderRow = Order & { sts_str?: string; service_charge?: number | string }
+
+const props = defineProps<{
+  visible: boolean
+  item: OrderRow | 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(() => {
+  if (!props.item) return 'سفارش'
+  return props.item.customer?.name ? `سفارش ${props.item.customer.name}` : `سفارش #${props.item.id ?? '-'}`
+})
+
+function directionLabel(row: OrderRow) {
+  return row.direction === 2 ? 'فروش' : 'خرید'
+}
+
+function directionClass(row: OrderRow) {
+  return row.direction === 2
+    ? 'border-red-300 bg-red-50 text-red-600'
+    : 'border-green-300 bg-green-50 text-green-700'
+}
+
+function statusClass(row: OrderRow) {
+  switch (row.sts) {
+    case 1:
+      return 'border-amber-300 bg-amber-50 text-amber-700'
+    case 2:
+      return 'border-green-300 bg-green-50 text-green-700'
+    default:
+      return 'border-red-300 bg-red-50 text-red-600'
+  }
+}
+
+function createdAtLabel(row: OrderRow) {
+  return row.created_at ? toJalali(row.created_at) : '-'
+}
+
+function serviceChargeLabel(row: OrderRow) {
+  if (row.service_charge == null || row.service_charge === '') return '-'
+  const value = Number(row.service_charge)
+  if (Number.isNaN(value)) return `${row.service_charge} گرم`
+  return `${parseFloat(value.toFixed(5))} گرم`
+}
+</script>
@@ -0,0 +1,64 @@
+<template>
+  <MobileCard clickable @click="$emit('open', item)">
+    <div class="space-y-1">
+      <div class="flex items-center justify-between gap-2">
+        <div class="flex min-w-0 items-center gap-2">
+          <span class="shrink-0 rounded-md border px-1.5 py-0.5 text-xs font-600" :class="directionClass">
+            {{ directionLabel }}
+          </span>
+          <span class="truncate text-sm font-700 text-gray-900">{{ customerName }}</span>
+        </div>
+        <span class="shrink-0 text-xs font-600" :class="statusValueClass">{{ statusLabel }}</span>
+      </div>
+
+      <div class="flex items-center justify-between gap-2 text-xs text-gray-600">
+        <span>
+          <span class="text-gray-500">طلا:</span>
+          <span class="font-600 text-gray-900">{{ amountLabel }}</span>
+        </span>
+        <span class="font-700 text-gray-900">{{ totalPriceLabel }}</span>
+      </div>
+    </div>
+  </MobileCard>
+</template>
+
+<script setup lang="ts">
+import type { Order } from '@/model/order'
+import MobileCard from '@/components/mobile/MobileCard.vue'
+import { usePrice } from '@core/utils/usePrice'
+
+const props = defineProps<{
+  item: Order & { sts_str?: string; service_charge?: number }
+}>()
+
+defineEmits<{
+  (e: 'open', item: Order): void
+}>()
+
+const directionLabel = computed(() => (props.item.direction === 2 ? 'فروش' : 'خرید'))
+const directionClass = computed(() =>
+  props.item.direction === 2
+    ? 'border-red-300 bg-red-50 text-red-600'
+    : 'border-green-300 bg-green-50 text-green-700'
+)
+
+const customerName = computed(() => props.item.customer?.name || '-')
+const amountLabel = computed(() => {
+  const amount = props.item.amount
+  if (amount == null) return '-'
+  return `${Number(amount.toFixed(3))} گرم`
+})
+const totalPriceLabel = computed(() => usePrice(props.item.total_price ?? 0, true, ''))
+const statusLabel = computed(() => props.item.sts_str || '-')
+
+const statusValueClass = computed(() => {
+  switch (props.item.sts) {
+    case 1:
+      return 'text-amber-700'
+    case 2:
+      return 'text-green-700'
+    default:
+      return 'text-red-600'
+  }
+})
+</script>
@@ -1,24 +1,40 @@
 <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 #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('info', record)">
-              <template #title>
-                <span>مشخصات</span>
-              </template>
-              <Icon icon="vuesax-linear:stickynote" color="#10913A" />
-            </a-tooltip>
-          </div>
-        </template>
-      </BaseTable>
+      <template v-if="!customerId" #extra>
+        <BaseButton type="primary" size="small" class="flex shrink-0 md:hidden" @click="emits('add')">
+          <div>افزودن</div>
+          <BaseIcon icon="vuesax-linear:receipt-add" Size="16px" />
+        </BaseButton>
+      </template>
+      <div class="flex h-full min-h-0 flex-col">
+        <BaseTable v-if="!isMobile" class="h-full min-h-0 min-w-0" 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('info', record)">
+                <template #title>
+                  <span>مشخصات</span>
+                </template>
+                <Icon icon="vuesax-linear:stickynote" color="#10913A" />
+              </a-tooltip>
+            </div>
+          </template>
+        </BaseTable>
+
+        <OrderMobileCardList
+          v-else
+          ref="mobileListRef"
+          class="min-h-0 flex-1"
+          :customer-id="customerId"
+          @info="emits('info', $event)"
+        />
+      </div>
    </BasicShowContext>
  </div>
 </template>
@@ -33,14 +49,17 @@ import { useUserStore } from '@/store/userStore'
 import { usePrefix } from '@core/composable/usePrefix'
 import { message } from 'ant-design-vue'
 import { getOrderTable } from '@/api/order'
+import OrderMobileCardList from './OrderMobileCardList.vue'
+import { isMobile } from '@core/utils/is'

 const [submit, reload] = useBaseTable()
+const mobileListRef = ref<null | { fetch: () => Promise<void> }>(null)
 /*const select = (val) => {
  val.sts === 1 ? return ['1'] : ['2']
 }*/
 //emits
 interface Prop {
-  customerId: number
+  customerId?: number
 }
 const emits = defineEmits(['delete', 'edit', 'add', 'info'])
 const props = defineProps<Prop>()
@@ -89,9 +108,8 @@ async function changeCustomerActivationFunction(id: number) {
  }
 }

-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')
@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div class="h-full min-h-0">
    <BasicMainCard>
-      <div class="flex w-full h-full">
+      <div class="flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden">
        <tbl
          ref="table"
-          class="w-full h-full"
+          class="h-full min-h-0 w-full"
          @info="info"
          @edit="edit"
          @delete="deleteItem"
@@ -16,107 +16,35 @@
        <!--        <BasicShowContext title="پروژه ها"> <Search /> </BasicShowContext>-->
      </div>
    </BasicMainCard>
-    <BasicModal
+    <BasicActionSheet
      v-model:visible="addOrderVisible"
-      width="25rem"
-      :title="`${editId ? 'ویرایش' : 'افزودن'} سفارش`"
-      @ok="ok"
+      :title="orderSheetTitle"
+      modal-width="25rem"
+      drawer-height="90vh"
      :loading="loading"
-      @close="stopGetPrice"
+      :showButton="true"
+      :showCancel="true"
+      :showOk="true"
+      ok-text="ثبت"
+      cancel-text="انصراف"
+      @ok="ok"
+      @close="closeAddOrder"
+      @cancel="closeAddOrder"
    >
-      <a-form :model="form" ref="formRef" autocomplete="off">
-        <div class="grid md:grid-cols-1 gap-4">
-          <div class="bg-gray-50 px-10 py-3 flex justify-center gap-4">
-            <div>قیمت {{ form.direction === 1 ? 'خرید' : 'فروش' }} طلا:</div>
-            <div class="font-bold">
-              {{ usePrice(form.direction === 1 ? dataLast?.buy ?? 0 : dataLast?.sell ?? 0) }}
-            </div>
-          </div>
-          <a-form-item label="نوع تراکنش" name="direction" :rules="inputRules()">
-            <a-radio-group
-              v-model:value="form.direction"
-              button-style="solid"
-              @change="changePrice"
-            >
-              <a-radio-button :value="1">خرید</a-radio-button>
-              <a-radio-button :value="2">فروش</a-radio-button>
-            </a-radio-group>
-          </a-form-item>
-          <a-form-item
-            :label="`قیمت ${form.direction === 1 ? 'خرید' : 'فروش'} هر گرم`"
-            name="price"
-            :rules="inputRules()"
-          >
-            <BasicInput
-              v-model:value="form.price"
-              addon-before="ریال"
-              type="price"
-              @change="changePriceValue"
-            />
-          </a-form-item>
-          <a-form-item label="تاریخ سفارش" name="pay_at" :rules="inputRules()">
-            <BaseDatePicker v-model:value="form.pay_at" format="YYYY-MM-DD HH:mm:ss" />
-          </a-form-item>
-          <a-form-item label="سود" name="difference" :rules="inputRules()">
-            <BasicInput v-model:value="form.difference" addon-before="ریال" type="price" />
-          </a-form-item>
-          <a-form-item label="کل قیمت لیمان" name="total_price_liman">
-            <BasicInput v-model:value="form.total_price_liman" addon-before="ریال" type="price" />
-          </a-form-item>
-          <div class="p-2 bg-orange-50 rounded-lg">
-            <a-form-item label="انتخاب کاربر" name="customer_id" :rules="inputRules()">
-              <BasicSelect
-                v-model:value="form.customer_id"
-                :items="userItems"
-                valueName="name"
-                keyName="id"
-                @change="changeUser"
-              />
-            </a-form-item>
-            <BasicInfoItem
-              is-line
-              title="کیف پول طلا"
-              class="mt-2"
-              :value="selectedCustomer?.wallet[0]?.gold ?? '_'"
-            />
-            <BasicInfoItem
-              is-line
-              title="کیف پول ریالی"
-              class="mt-1"
-              :value="selectedCustomer?.wallet[0]?.cash ?? '_'"
-            />
-          </div>
-          <div class="flex flex-col gap-2 bg-blue-50 p-2 rounded-lg">
-            <div>مقدار {{ form.direction === 1 ? 'خرید' : 'فروش' }}:</div>
-            <a-form-item name="goldCash" :rules="inputRulesNumber()">
-              <BasicInput
-                v-model:value="form.goldCash"
-                addon-before="ریال"
-                addon-bg-color="#0A1B37"
-                addon-text-color="white"
-                place-holder="ارزش کل"
-                type="price"
-                @onchange="calculateGold"
-              />
-            </a-form-item>
-            <a-form-item name="goldValue" :rules="inputRulesNumber()">
-              <BasicInput
-                v-model:value="form.goldValue"
-                addon-before="گرم"
-                addon-bg-color="#0A1B37"
-                addon-text-color="white"
-                place-holder="مقدار طلا"
-                type="tel"
-                @onchange="calculateCash"
-              />
-            </a-form-item>
-          </div>
-          <!--          <a-form-item label="نام چاپی" name="print_name" :rules="inputRules()">
-            <BasicInput v-model:value="form.print_name" />
-          </a-form-item>-->
-        </div>
-      </a-form>
-    </BasicModal>
+      <div v-if="isMobile" class="mb-3 text-base font-700">{{ orderSheetTitle }}</div>
+      <OrderEditorFormBody
+        ref="orderEditorRef"
+        :form="form"
+        :data-last="dataLast"
+        :user-items="userItems"
+        :selected-customer="selectedCustomer"
+        @change-price="changePrice"
+        @change-price-value="changePriceValue"
+        @change-user="changeUser"
+        @calculate-gold="calculateGold"
+        @calculate-cash="calculateCash"
+      />
+    </BasicActionSheet>
    <BasicInfoModal
      v-model:visible="userInfoVisible"
      @close="userInfoVisible = false"
@@ -132,25 +60,26 @@

 <script setup lang="ts">
 // import BasicInfoModal from '@/components/BasicInfoModal'
-import { inputLenRules, inputRules, inputRulesNumber } from '@/utils/inputRules'
 import { useStaticApiListsStore } from '@/store/staticApisStore'
 import { ref } from 'vue'
 import tbl from './components/table.vue'
 import type { FormInstance } from 'ant-design-vue'
 import BasicInfoModal from '@/components/BasicInfoModal/index.vue'
+import BasicActionSheet from '@/components/BasicActionSheet.vue'
+import OrderEditorFormBody from './components/OrderEditorFormBody.vue'
 import { message } from 'ant-design-vue/es'
 import type { Info } from '@/components/BasicInfoModal/model/Info'
 import { toJalaliNoTime, toTime } from '@core/utils/useDataTime'
 import { confirmDeleteItem } from '@/utils/confirmModal'
 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 { deleteCustomer, getCustomersList } from '@/api/customer'
 import type { Order } from '@/model/order'
 import { usePrice } from '@core/utils/usePrice'
 import { getLastPrice } from '@/api/price'
 import type { last } from '@/model/price'
 import { createOrder } from '@/api/order'
+import { isMobile } from '@core/utils/is'

 //loading
 const loading = ref<boolean>(false)
@@ -191,9 +120,18 @@ const form = ref<Order>({
  goldCash: undefined,
  goldValue: undefined
 })
-const formRef = ref<FormInstance>()
+const orderEditorRef = ref<{
+  validateFields?: () => ReturnType<NonNullable<FormInstance['validateFields']>>
+  resetFields?: () => void
+}>()
 const dataLast = ref<last>()
-let interval: any
+let interval: ReturnType<typeof setInterval> | undefined
+
+const orderSheetTitle = computed(() => `${editId ? 'ویرایش' : 'افزودن'} سفارش`)
+
+function closeAddOrder() {
+  stopGetPrice()
+}

 async function setIntervalGetPrice() {
  try {
@@ -226,12 +164,11 @@ async function getPrices() {

 async function changeUser(val: Customer) {
  selectedCustomer.value = cloneDeep(val)
-  console.log(selectedCustomer.value.wallet[0])
 }

 function stopGetPrice() {
-  clearInterval(interval)
-  console.log('stop')
+  if (interval) clearInterval(interval)
+  interval = undefined
 }

 //info
@@ -384,7 +321,7 @@ async function add() {

 //reset data
 const resetData = () => {
-  formRef.value?.resetFields()
+  orderEditorRef.value?.resetFields?.()
  form.value = {
    direction: 1,
    price: 0,
@@ -415,9 +352,7 @@ const userInfoVisible = ref<boolean>(false)

 //submit user
 async function ok() {
-  formRef.value?.validateFields().then(async () => {
-    // console.log('salam', form.value)
-    // return
+  await orderEditorRef.value?.validateFields?.().then(async () => {
    loading.value = true
    try {
      form.value.amount = form.value.goldValue
@@ -427,14 +362,11 @@ async function ok() {
      await createOrder(form.value)
      message.success('سفارش با موفقیت ثبت شد')
      addOrderVisible.value = false
+      closeAddOrder()
      resetData()
      refreshTable()
-      // await getResponsible()
-      // await getQC()
-      // await getManager()
    } catch (e) {
      console.error(e)
-      // message.error('خطا در بارگذاری اطلاعات')
    } finally {
      loading.value = false
    }