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

<template>
  <div class="flex-wrap mb-2 flex justify-between items-center border-1 border-gray-300 border-solid rounded-lg p-3">
    <div class="flex flex-col justify-between ">
      <div class=" font-bold">{{ item.name }}</div>
      <div class=" text-xs ">کلید: {{ item.key }}</div>
    </div>

    <div class="flex">
      <a-switch
          checked-children="فعال"
          un-checked-children="غیرفعال"
          v-model:checked="value"
          @change="ok"
      />
    </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<string>('false')

async function ok() {
  let obj = {
    id: props.item.id,
    key: props.item.key,
    value: `${value.value}`,
    type:props.item.type,
    title_fa:props.item.name,
    description: props.item.description,
    is_active: props.item.is_active,
  }
  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'
})
</script>