fara-fe-admin/src/views/role-management/components/EditCallingsForm.vue

<script setup lang="ts">
import { ElDialog, ElForm, ElFormItem, ElInput, ElDatePicker, ElButton, ElMessage, ElRadio } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { updateCallings } from '@/api/modules/anycallService'
// 定义表单数据类型
type IFormData  = {
  callings: string
}

// 定义组件的属性
interface Props {
  cloneId: string
  visible: boolean
  modelValue?: IFormData | null
  mode?: 'create' | 'edit'
}

// 定义组件的事件
interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'cancel'): void
  (e: 'refresh'): void
}

// 接收属性和事件
const props = withDefaults(defineProps<Props>(), {
  visible: false,
  modelValue: null,
  mode: 'create'
})

const emit = defineEmits<Emits>()

// 创建本地响应式变量用于 v-model 绑定
const dialogVisible = ref(props.visible)

// 监听 props.visible 变化，更新本地变量
watch(() => props.visible, (newVisible) => {
  dialogVisible.value = newVisible
})

// 监听本地变量变化，发出 update 事件
watch(dialogVisible, (newVisible) => {
  emit('update:visible', newVisible)
})

// 表单引用
const editFormRef = ref<FormInstance>();

// 响应式数据 - 直接定义所有必需字段
const formData = ref<Partial<IFormData>>({
  callings: '',
});



// 监听 props.modelValue 变化
watch(() => props.modelValue, (newModelValue) => {
  if (newModelValue) {
    formData.value = {
      ...formData.value,
      ...newModelValue
    };
    console.log(newModelValue, formData.value,33344)
  }
});

// 表单验证规则
const formRules = ref<FormRules>({
  callings: [
    { required: true, message: '输入数量', trigger: 'blur' },
  ],
})

// 监听可见性变化
watch(() => props.visible, (newVisible) => {
  resetForm()
})


// 重置表单
function resetForm() {
  console.log('reset')
  if (editFormRef.value) {
    editFormRef.value.resetFields()
  }
  formData.value = {
    callings: '',
  }
}

// 处理确认
async function handleConfirm() {
  if (!editFormRef.value) return

  try {
    await editFormRef.value.validate()

    const { code } = await updateCallings({
      cloneId: props.cloneId,
      callings: formData.value.callings || ''
    })
    if (code === 0) {
      ElMessage.success('操作成功')
      emit('refresh')
    }
    // 关闭对话框
    emit('update:visible', false)
  } catch (error) {
    // 验证失败，不做处理
  }
}


function handleCancel() {
  emit('cancel')
  emit('update:visible', false)
}


function handleClose() {
  emit('update:visible', false)
}

</script>
<template>
  <div>

    <ElDialog title="编辑Callings" v-model="dialogVisible" align-center @close="handleClose"
      width="400" :z-index="2000">
      <ElForm ref="editFormRef" :model="formData" :rules="formRules" label-width="120px" class="mt-4 space-y-4 w-full">

        <ElFormItem label="callings" prop="callings" label-width="120">
           <ElInput type="number" v-model.number="formData.callings" />
        </ElFormItem>

      </ElForm>
      <template #footer>
        <div class="flex justify-end space-x-2">
          <ElButton @click="handleCancel">取消</ElButton>
          <ElButton type="primary" @click="handleConfirm">确定</ElButton>
        </div>
      </template>
    </ElDialog>
  </div>
</template>