|
|
@@ -0,0 +1,148 @@
|
|
|
+<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">
|
|
|
+
|
|
|
+
|
|
|
+ {{ formData }}
|
|
|
+ <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>
|
sheldon