boursecu_admin/src/pages/menuPages/customers/base/components/table.vue

<template>
  <div>
    <BasicShowContext title=" لیست مشتریان">
      <BaseTable v-bind="tblProps" @register="submit" ref="tbl">
        <template #extraHeader>
          <BaseButton type="primary" size="small" class="flex" @click="emits('add')">
            <div>افزودن مشتری</div>
            <BaseIcon icon="vuesax-linear:user-add" Size="16px" />
          </BaseButton>
        </template>
        <template #action="{ column, record }">
          <div class="md:hidden">
            <a-popover title="" placement="right" @cancel="">
              <template #content>
                <div class="flex flex-col gap-3">
                  <a-tooltip :key="record.is_archive" placement="bottom" class="cursor-pointer">
                    <template #title>
                      <span>{{
                        record.is_archive ? 'بیرون بردن از بایگانی' : 'بایگانی کردن'
                      }}</span>
                    </template>
                    <a-popconfirm
                      title="آیا مشتری را بایگانی می کنید؟"
                      ok-text="تایید"
                      cancel-text="رد"
                      placement="topLeft"
                      @confirm="archiveFunction(record.id)"
                      @cancel=""
                    >
                      <!--              <template #icon><question-circle-outlined style="color: red" /></template>-->
                      <Icon
                        class="cursor-pointer"
                        icon="vuesax-linear:archive-tick"
                        color="#e3bf00"
                      />
                    </a-popconfirm>
                  </a-tooltip>
                  <a-tooltip
                    :key="record.active"
                    placement="bottom"
                    class="cursor-pointer"
                    @click="changeCustomerActivationFunction(record.id)"
                  >
                    <template #title>
                      <span>
                        {{ record.active ? 'غیرفعال کردن حساب کاربری' : 'فعال کردن حساب کاربری' }}
                      </span>
                    </template>
                    <Icon
                      :icon="
                        record.active ? 'vuesax-linear:user-tick' : 'vuesax-linear:user-remove'
                      "
                      :color="record.active ? '#54AD06' : '#ad0627'"
                    />
                  </a-tooltip>
                  <a-tooltip
                    placement="bottom"
                    class="cursor-pointer"
                    @click="emits('chargeMoney', record)"
                  >
                    <template #title>
                      <span>شارژ کیف پول ریالی</span>
                    </template>
                    <Icon icon="vuesax-linear:wallet-add" color="#9333ea" />
                  </a-tooltip>
                  <a-tooltip
                    placement="bottom"
                    class="cursor-pointer"
                    @click="emits('chargeGold', record)"
                  >
                    <template #title>
                      <span>شارژ کیف پول طلایی</span>
                    </template>
                    <Icon icon="vuesax-linear:wallet-money" color="#ea580c" />
                  </a-tooltip>
                  <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('edit', record)"
                  >
                    <template #title>
                      <span>ویرایش</span>
                    </template>
                    <Icon icon="vuesax-linear:edit" color="#4572E9" />
                  </a-tooltip>
                  <a-tooltip
                    :key="record.trade_active"
                    placement="bottom"
                    class="cursor-pointer"
                    @click="changeCustomerOrderActivationFunction(record.id)"
                  >
                    <template #title>
                      <span>
                        {{
                          record.trade_active ? 'غیر مجاز کردن سفارش دهی' : 'مجاز کردن سفارش دهی'
                        }}
                      </span>
                    </template>
                    <Icon
                      :icon="
                        record.trade_active === 1
                          ? 'vuesax-linear:box-tick'
                          : 'vuesax-linear:box-remove'
                      "
                      :color="record.trade_active === 1 ? '#54AD06' : '#ad0627'"
                    />
                  </a-tooltip>
                  <a-tooltip
                    v-if="!record.is_legal"
                    :key="record.trade_active"
                    placement="bottom"
                    class="cursor-pointer"
                    @click="openConfirmUser(record)"
                  >
                    <template #title>
                      <span>تایید کاربر</span>
                    </template>
                    <Icon icon="vuesax-linear:user-search" color="#0d9488" />
                  </a-tooltip>
                </div>
              </template>
              <!--              <template #icon><question-circle-outlined style="color: red" /></template>-->
              <Icon class="cursor-pointer" icon="vuesax-linear:setting" color="#000" />
            </a-popover>
          </div>
          <div class="gap-2 hidden md:flex justify-center">
            <a-tooltip :key="record.is_archive" placement="bottom" class="cursor-pointer">
              <template #title>
                <span>{{ record.is_archive ? 'بیرون بردن از بایگانی' : 'بایگانی کردن' }}</span>
              </template>
              <a-popconfirm
                title="آیا مشتری را بایگانی می کنید؟"
                ok-text="تایید"
                cancel-text="رد"
                placement="topLeft"
                @confirm="archiveFunction(record.id)"
                @cancel=""
              >
                <!--              <template #icon><question-circle-outlined style="color: red" /></template>-->
                <Icon class="cursor-pointer" icon="vuesax-linear:archive-tick" color="#e3bf00" />
              </a-popconfirm>
            </a-tooltip>
            <a-tooltip
              :key="record.active"
              placement="bottom"
              class="cursor-pointer"
              @click="changeCustomerActivationFunction(record.id)"
            >
              <template #title>
                <span>{{
                  record.active ? 'غیرفعال کردن حساب کاربری' : 'فعال کردن حساب کاربری'
                }}</span>
              </template>
              <Icon
                :icon="record.active ? 'vuesax-linear:user-tick' : 'vuesax-linear:user-remove'"
                :color="record.active ? '#54AD06' : '#ad0627'"
              />
            </a-tooltip>
            <a-tooltip
              placement="bottom"
              class="cursor-pointer"
              @click="emits('chargeMoney', record)"
            >
              <template #title>
                <span>شارژ کیف پول ریالی</span>
              </template>
              <Icon icon="vuesax-linear:wallet-add" color="#9333ea" />
            </a-tooltip>
            <a-tooltip
              placement="bottom"
              class="cursor-pointer"
              @click="emits('chargeGold', record)"
            >
              <template #title>
                <span>شارژ کیف پول طلایی</span>
              </template>
              <Icon icon="vuesax-linear:wallet-money" color="#ea580c" />
            </a-tooltip>
            <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('edit', record)">
              <template #title>
                <span>ویرایش</span>
              </template>
              <Icon icon="vuesax-linear:edit" color="#4572E9" />
            </a-tooltip>
            <a-tooltip
              :key="record.trade_active"
              placement="bottom"
              class="cursor-pointer"
              @click="changeCustomerOrderActivationFunction(record.id)"
            >
              <template #title>
                <span>{{
                  record.trade_active ? 'غیر مجاز کردن سفارش دهی' : 'مجاز کردن سفارش دهی'
                }}</span>
              </template>
              <Icon
                :icon="
                  record.trade_active === 1 ? 'vuesax-linear:box-tick' : 'vuesax-linear:box-remove'
                "
                :color="record.trade_active === 1 ? '#54AD06' : '#ad0627'"
              />
            </a-tooltip>
            <a-tooltip
              v-if="!record.is_legal"
              :key="record.trade_active"
              placement="bottom"
              class="cursor-pointer"
              @click="openConfirmUser(record)"
            >
              <template #title>
                <span>تایید کاربر</span>
              </template>
              <Icon icon="vuesax-linear:user-search" color="#0d9488" />
            </a-tooltip>
            <!--            <a-tooltip
              placement="bottom"
              class="cursor-pointer"
              @click="emits('delete', record.id)"
            >
              <template #title>
                <span>حذف</span>
              </template>
              <Icon icon="vuesax-linear:trash" color="#EB3535" />
            </a-tooltip>-->
          </div>
        </template>
      </BaseTable>
      <BasicModal
        v-model:visible="confirmVisible"
        width="50vw"
        title="تایید مشتری"
        @ok="confirmUserFunction"
        ok-text="تایید"
        :loading="loading"
        @close="confirmVisible = false"
      >
        <div class="mt-[-10px] mb-10 font-bold">آیا از اطلاعات وارد شده اطمینان دارید؟</div>
        <div class="grid grid-cols-4 gap-2">
          <BasicInfoItem title="نام و نام خانوادگی" :value="confirmInfo?.name" />
          <BasicInfoItem title="شماره همراه" :value="confirmInfo?.mobile" />
          <BasicInfoItem
            title="تاریخ تولد"
            :value="confirmInfo?.birth_date ? toJalaliNoTime(confirmInfo?.birth_date) : '_'"
          />
          <BasicInfoItem title="شماره تلفن" :value="confirmInfo?.phone_number ?? '_'" />
          <BasicInfoItem title="نام استان" :value="confirmInfo?.province" />
          <BasicInfoItem title="نام شهر" :value="confirmInfo?.city" />
          <BasicInfoItem title="شماره ملی" :value="confirmInfo?.n_code" />
        </div>
      </BasicModal>
    </BasicShowContext>
  </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 {
  changeCustomerActivation,
  changeCustomerArchive,
  changeCustomerOrderActivation,
  confirmUser,
  getCustomerTable
} from '@/api/customer'
import { cols } from '@/pages/menuPages/customers/base/hooks/customerColumns'
import { useUserStore } from '@/store/userStore'
import { usePrefix } from '@core/composable/usePrefix'
import { message } from 'ant-design-vue'
import { inputRules } from '@/utils/inputRules'
import type { User } from '@/model/user'
import { toJalaliNoTime } from '@core/utils/useDataTime'
import type { Customer } from '@/model/customer'
import { onMounted } from 'vue'

const [submit, reload] = useBaseTable()
/*const select = (val) => {
  val.sts === 1 ? return ['1'] : ['2']
}*/
//emits
const emits = defineEmits(['delete', 'edit', 'add', 'info', 'chargeMoney', 'chargeGold'])

const { prefixCls } = usePrefix('pophoverstatus')

//permission
function checkPermission(temp: string) {
  const store = useUserStore()
  return store.canAccess(temp)
}

//define table
const table = ref(null)

const confirmVisible = ref<boolean>(false)
const confirmInfo = ref<Customer>()

const tblProps = ref<any>({
  columns: cols,
  api: (params: TableInput) => {
    return getCustomerTable(params)
  }
  //bordered: true
})
const refPop = ref()

// function edit(recordId){
//   emits('edit', recordId);
//   console.log( recordId);
//   console.log( visibleAction.value[parseInt(recordId)]);
// visibleAction.value[recordId]=false
//   console.log('ddddd')
// }
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
  }
}

function openConfirmUser(user: Customer) {
  confirmInfo.value = user
  confirmVisible.value = true
}

async function archiveFunction(id: number) {
  try {
    loading.value = true
    await changeCustomerArchive(id)
    reload()
    message.success('مشتری با موفقیت بایگانی شد.')
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

async function confirmUserFunction() {
  try {
    loading.value = true
    await confirmUser(confirmInfo.value?.id)
    reload()
    confirmVisible.value = false
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false
  }
}

async function changeCustomerOrderActivationFunction(id: number) {
  try {
    loading.value = true
    await changeCustomerOrderActivation(id)
    reload()
    message.success('تغییر وضعیت سفارش دهی با موفقیت انجام شد')
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

const fetch = () => {
  // console.log('sss')
  reload()
}
// const spinTable = (val: boolean) => {
//   // console.log('sss')
//   table?.value?.loading.value = val
// }
defineExpose({
  fetch
  // spinTable
})
</script>

<style lang="less">
@prefix: ~'@{prefixCls}-pophoverstatus';
.ant-popover,
.ant-tooltip {
  z-index: 1001 !important;
}

.@{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>