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

<template>
  <div>
    <BasicShowContent title="تنظیمات">
      <BaseButton class="mb-10" @click="add" type="primary" icon="vuesax-linear:add">
        افزودن
      </BaseButton>
      <template v-if="items && hasAnyItems">
        <div v-if="groupedItems.switch.length > 0" class="mb-4">
          <div class="grid lg:grid-cols-2 xl:grid-cols-3 gap-2">
            <SwitchConfigs v-for="item in groupedItems.switch" :key="item.id" :item="item"/>
          </div>
        </div>

        <div v-if="groupedItems.text.length > 0" class="mb-4">
          <div class="h-1px bg-gray-300 my-4"></div>
          <div class="grid lg:grid-cols-2 xl:grid-cols-3 gap-2">
            <TextConfigs v-for="item in groupedItems.text" :key="item.id" :item="item"/>
          </div>
        </div>

        <div v-if="groupedItems.longtext.length > 0">
          <div class="h-1px bg-gray-300 my-4"></div>
          <div class="gap-2">
            <LongtextConfigs
                v-for="item in groupedItems.longtext"
                :key="item.id"
                :item="item"
                @set-val="(val) => (item.value = val)"
            />
          </div>
        </div>
      </template>
    </BasicShowContent>

    <BasicModal
        v-model:visible="addConfigVisible"
        title="افزودن"
        @close="addConfigVisible = false"
        @ok="ok"
        :loading="loading"
    >
      <a-form ref="formRef" :model="form" autocomplete="off">
        <a-form-item name="is_active">
          <span class="ml-2">وضعیت :</span>
          <a-checkbox v-model:checked="form.is_active">{{ !form.is_active ? 'غیرفعال' : 'فعال' }}</a-checkbox>
        </a-form-item>
        <a-form-item name="title_fa" label="عنوان">
          <BasicInput v-model:value="form.title_fa" :placeHolder="form.title_fa" />
        </a-form-item>
        <a-form-item name="key" label="کلید">
          <BasicInput v-model:value="form.key" :placeHolder="form.key" />
        </a-form-item>
        <a-form-item name="type" label="نوع">
          <BasicSelect
              allowClear
              v-model:value="form.type"
              :items="typeItems"
              valueName="value"
              keyName="key"
          />
        </a-form-item>
        <a-form-item name="value" label="مقدار">
          <BasicInput v-model:value="form.value" :placeHolder="form.value" />
        </a-form-item>
        <a-form-item name="description" label="توضیحات">
          <BasicTextArea v-model:value="form.description" :placeHolder="form.description" />
        </a-form-item>
      </a-form>
    </BasicModal>
  </div>
</template>

<script setup lang="ts">
import BasicShowContent from '@/components/BasicShowContext.vue'
import BasicModal from '@/components/BasicModal.vue'
import type { FormInstance } from 'ant-design-vue'
import { message } from 'ant-design-vue'
import type { Const } from '@/model/const'
import BasicInput from '@/components/BasicInput.vue'
import BasicTextArea from '@/components/BasicTextArea.vue'
import TextConfigs from '@/pages/menuPages/configuration/components/TextConfigs.vue'
import LongtextConfigs from '@/pages/menuPages/configuration/components/LongtextConfigs.vue'
import { loading } from '@/utils'
import { getConfiguration, setConfiguration } from '@/api/configuration'
import SwitchConfigs from "@/pages/menuPages/configuration/components/SwitchConfigs.vue";

//data Arrays
const items = ref<Array<any>>()
const baseData = ref<Array<Const>>()

//modal
const addConfigVisible = ref<boolean>(false)

const form = ref<Const>({
  key: '',
  value: '',
  title_fa:'',
  type: 'text',
  description: '',
  is_active: true
})

const formRef = ref<FormInstance>()

const typeItems = [
  {
    value: 'متنی کوتاه',
    key: 'text'
  },
  {
    value: 'متنی بلند',
    key: 'longtext'
  },
  {
    value: 'سوییچی',
    key: 'switch'
  }
]

const settingsConfig = {
  // اطلاعات پایه
  'name_fa': {
    title: 'نام فارسی',
    list: []
  },
  'name_en': {
    title: 'نام انگلیسی',
    list: []
  },
  'app_url': {
    title: 'آدرس اپلیکیشن',
    list: []
  },
  'bace_url': {
    title: 'آدرس پایه',
    list: []
  },
  'admin_url': {
    title: 'آدرس پنل ادمین',
    list: []
  },
  'server_url': {
    title: 'آدرس سرور',
    list: []
  },

  // ته‌حساب
  'tahesab_token': {
    title: 'توکن ته‌حساب',
    list: []
  },
  'tahesab_db': {
    title: 'دیتابیس ته‌حساب',
    list: []
  },
  'send_to_tahesab': {
    title: 'ارسال اسناد به ته حساب',
    list: ['true', 'false']
  },

  // تنظیمات صفحه‌ها
  'has_page_earn_money': {
    title: 'صفحه کسب درآمد',
    list: ['true', 'false']
  },
  'has_page_fund': {
    title: 'صفحه سرمایه‌گذاری',
    list: ['true', 'false']
  },
  'has_page_permission': {
    title: 'صفحه دسترسی‌ها',
    list: ['true', 'false']
  },
  'has_page_price_trigger': {
    title: 'صفحه هشدار قیمت',
    list: ['true', 'false']
  },
  'has_page_physical_gold': {
    title: 'صفحه طلای فیزیکی',
    list: ['true', 'false']
  },

  // رنگ‌ها
  'color_primary': {
    title: 'رنگ اصلی',
    list: []
  },
  'color_secondary': {
    title: 'رنگ ثانویه',
    list: []
  },

  // کارمزدها
  'fee_service_charge_percentage': {
    title: 'کارمزد درصدی',
    list: []
  },
  'fee_cash': {
    title: 'کارمزد ریالی',
    list: []
  },
  'fee_single': {
    title: 'اختلاف با قیمت واقعی',
    list: []
  },
  'fee_free': {
    title: 'تعداد سفارش اول بدون کارمزد',
    list: []
  },

  // تنظیمات عمومی
  'has_chat': {
    title: 'فعال بودن چت',
    list: ['true', 'false']
  },
  'is_requaire_referral': {
    title: 'نیازمند معرف',
    list: ['true', 'false']
  },
  'auto_active_customer': {
    title: 'فعالسازی خودکار حساب کاربران',
    list: ['true', 'false']
  },
  'open_register': {
    title: 'فعالسازی ثبت ‌نام',
    list: ['true', 'false']
  },
  'charge_notif': {
    title: 'ارسال پیام موقع شارژ از سمت ادمین',
    list: ['true', 'false']
  },
  'display_montzar': {
    title: 'نمایش منتظر',
    list: ['true', 'false']
  },

  // توکن‌ها
  'liman_token': {
    title: 'توکن لیمان',
    list: []
  },
  'key': {
    title: 'کلید',
    list: []
  },

  // متفرقه
  'logo_login': {
    title: 'لوگو صفحه ورود',
    list: []
  },
  'logo_register': {
    title: 'لوگو صفحه ثبت‌نام',
    list: []
  }
}
async function initConfig() {
  try {
    loading.value = true
    baseData.value = await getConfiguration()
    items.value = baseData.value?.map((x: Const) => {
      const title_fa = x?.title_fa || settingsConfig[x.key]?.title || x?.key

      return {
        id: x.id,
        name: title_fa,
        title_fa,
        value: x.value,
        key: x.key,
        type: x.type || 'text',
        description: x.description,
        is_active: x.is_active,
        list: settingsConfig[x.key]?.list ?? []
      }
    })
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

const groupedItems = computed(() => {
  const result = { switch: [], text: [], longtext: [] } as Record<string, any[]>
  items.value?.forEach((item) => {
    const type = item.type && result[item.type] ? item.type : 'text'
    result[type].push(item)
  })
  // console.log(result)
  return result
})

const hasAnyItems = computed(() =>
    Object.values(groupedItems.value).some((list) => list.length > 0)
)

async function resetData() {
  formRef.value?.resetFields()
  form.value = {
    key: '',
    value: '',
    title_fa:'',
    type: 'text',
    description: '',
    is_active: true
  }
  await initConfig()
}

async function add() {
  await resetData()
  addConfigVisible.value = true
}

async function ok() {
  formRef.value?.validateFields().then(async () => {
    try {
      loading.value = true
      console.log(form.value)
      await setConfiguration(form.value)
      await resetData()
      message.success('عملیات با موفقیت انجام شد')
    } catch (e) {
      console.error(e)
    } finally {
      loading.value = false
      addConfigVisible.value = false
    }
  })
}

onMounted(() => {
  initConfig()
})

</script>

<style lang="less"></style>