boursecu_admin/src/pages/menuPages/configuration/components/SwitchConfigs.vue

<template>
  <div class="mb-2 justify-between items-center border-1 border-gray-300 border-solid rounded-lg p-3">
    <div>
      <div class="flex justify-between">
        <div>{{ item.title_fa ?? item.name ?? '-' }}</div>
        <div>
          <a-switch
            checked-children="فعال"
            un-checked-children="غیرفعال"
            v-model:checked="isActive"
            @change="ok"
          />
        </div>
      </div>
    </div>
    <div class="flex justify-between items-center mt-2">
      <div class="text-xs items-center">کلید: {{ item.key }}</div>
      <div class="flex">
        <a-switch
          checked-children="نمایش"
          un-checked-children="عدم نمایش"
          v-model:checked="value"
          @change="ok"
        />
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { loading } from '@/utils'
import { setConfiguration } from '@/api/configuration'
import { message } from 'ant-design-vue'
import { onMounted } from 'vue'
import type { TagItem } from '@/components/BasicTags/model'

interface Prop {
  item: TagItem
}

const props = defineProps<Prop>()
const value = ref<boolean>(false)
const isActive = ref<boolean>(false)

async function ok() {
  let obj = {
    id: props.item.id,
    key: props.item.key,
    value: value.value ? 'true' : 'false',
    type: props.item.type,
    title_fa: props.item.title_fa ?? props.item.name,
    description: props.item.description,
    is_active: isActive.value
  }
  try {
    loading.value = true
    await setConfiguration(obj)
    message.success('تغییر با موفقیت انجام شد')
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  value.value = props.item.value === 'true'
  isActive.value = props.item.is_active === true
})
</script>