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

<template>
  <div>
    <BasicShowContent title="تنظیمات">
      <BasicTags :items="items" color="green" @add="add" @edit="edit" :key="refresh" :loading="loading"
                 :closable="false" />
    </BasicShowContent>
    <BasicModal v-model:visible="addConfigVisible" :title="editId ? `ویرایش` : 'افزودن'"
                @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 v-if="!editId" name="key" label="کلید" >
          <BasicInput v-model:value="form.key" :placeHolder="form.key" />
        </a-form-item>
        <a-form-item name="value" :label="!editId ? 'مقدار' : form.key">
          <BasicInput v-model:value="form.value" :placeHolder="form.value" />
        </a-form-item>
        <a-form-item name="description" :label="'توضیحات'">
          <BasicInput 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 BasicTags from '@/components/BasicTags/index.vue'
import type { FormInstance } from 'ant-design-vue'
import { message } from 'ant-design-vue'
import type { Const } from '@/model/const'
import type { TagItem } from '@/components/BasicTags/model'
import BasicInput from '@/components/BasicInput.vue'
import { loading } from '@/utils'
import { getConfiguration, setConfiguration } from '@/api/configuration'

//radio button
const checked = ref(false)

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

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

//refresh
let refresh = 0

const form = ref<Const>({
  key: '',
  value: ''
})
const formRef = ref<FormInstance>()

//get nature
onMounted(() => {
  initConfig()
})

async function initConfig() {
  try {
    loading.value = true
    baseData.value = await getConfiguration()
    items.value = baseData.value?.map((x: Const) => {
      // Truncate x.value if it's longer than 40 characters
      const truncatedValue = x?.value?.length > 40 ? x?.value?.substring(0, 40) + '...' : x.value

      return {
        id: x.id,
        name: `${x.key ?? ''} : ${truncatedValue}`
      };
    });
    refresh++;
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
}

//edit nature
let editId: number | undefined = undefined

function edit(id: number) {
  form.value = baseData.value?.find((x: Const) => x.id === id) ?? ({} as Const)
  addConfigVisible.value = true
  editId = id
}

//resetData
async function resetData() {
  await getConfiguration()
  formRef.value?.resetFields()
  form.value = {
    key: '',
    value: ''
  }
  await initConfig()
}

//add

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

//submit

async function ok() {
  let obj = {
    id: editId,
    key: form.value.key,
    value: form.value.value,
    description: form.value.description,
    is_active: form.value.is_active
  }
  formRef.value?.validateFields().then(async () => {
    try {
      loading.value = true
      if (editId) {
        await setConfiguration(obj)
      } else {
        await setConfiguration(form.value)
      }
      await resetData()
      message.success('عملیات با موفقیت انجام شد')
    } catch (e) {
      console.error(e)
    } finally {
      loading.value = false
      addConfigVisible.value = false
    }
  })
}
</script>

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