boursecu_admin/src/pages/menuPages/pricing/index.vue

<template>
  <div>
    <BasicMainCard>
      <div class="flex h-full w-full">
        <tbl
          ref="table"
          class="h-full w-full"
          :syncing="syncing"
          @add="add"
          @detail="openDetail"
          @sync="handleSync"
        />
      </div>
    </BasicMainCard>

    <template v-if="!isStore">
      <BasicModal
        v-model:visible="priceConfirmVisible"
        width="25rem"
        @ok="ok"
        :confirm-loading="loading"
        @close="priceConfirmVisible = false"
      >
        <div class="flex items-center gap-2 font-bold">
          <BaseIcon icon="vuesax-linear:info-circle" color="orange" />
          <div>آیا مطمئن به تغییر قیمت می باشید؟</div>
        </div>
      </BasicModal>

      <BasicModal
        v-model:visible="addPriceVisible"
        width="25rem"
        title="قیمت گذاری"
        @ok="confirmPrice"
        :loading="loading"
        @close="addPriceVisible = false"
      >
        <a-form :model="form" ref="formRef" autocomplete="off">
          <div class="gap-4">
            <a-form-item label="قیمت جدید" name="price" :rules="inputRules()">
              <BasicInput v-model:value="form.price" type="price" addon-before="ریال" />
            </a-form-item>
            <div v-show="form.price > 10">معادل {{ usePrice(form.price / 10, true, 'تومان') }}</div>
          </div>
        </a-form>
      </BasicModal>
    </template>

    <PriceSyncDetailModal v-model:visible="detailVisible" :log-id="selectedLogId" />
  </div>
</template>

<script setup lang="ts">
import { inputRules } from '@/utils/inputRules'
import { computed, ref } from 'vue'
import tbl from './components/table.vue'
import type { FormInstance } from 'ant-design-vue'
import { message } from 'ant-design-vue/es'
import type { Price } from '@/model/price'
import { createPrice, runPriceSync } from '@/api/price'
import { usePrice } from '@core/utils/usePrice'
import { isStoreApp } from '@/utils/config'
import PriceSyncDetailModal from './components/PriceSyncDetailModal.vue'
import type { PriceSyncLog } from '@/model/priceSyncLog'

const loading = ref(false)
const syncing = ref(false)
const table = ref<null | { fetch: () => void }>(null)
const refreshTable = () => table.value?.fetch()

const isStore = computed(() => isStoreApp())

const form = ref<Price>({})
const formRef = ref<FormInstance>()
const addPriceVisible = ref(false)
const priceConfirmVisible = ref(false)
const detailVisible = ref(false)
const selectedLogId = ref<number | null>(null)

function openDetail(record: PriceSyncLog) {
  selectedLogId.value = record.id
  detailVisible.value = true
}

async function handleSync() {
  syncing.value = true
  try {
    const res = await runPriceSync()
    message.success(res.message || 'انجام شد')
    refreshTable()
  } catch (e) {
    console.error(e)
    message.error('خطا در به‌روزرسانی قیمت')
  } finally {
    syncing.value = false
  }
}

async function add() {
  addPriceVisible.value = true
  form.value = {}
}

function confirmPrice() {
  formRef.value?.validateFields().then(async () => {
    priceConfirmVisible.value = true
  })
}

async function ok() {
  loading.value = true
  try {
    await createPrice(form.value)
    refreshTable()
    priceConfirmVisible.value = false
    addPriceVisible.value = false
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped></style>