vue3-06

新增、修改

子组件

<template>
  <a-modal :visible="visible" :title="title" 
    @ok="onOk" @cancel="onCancel">
    <a-form>
      <a-form-item label="编号" v-if="id">
        <a-input readonly v-model:value="id"></a-input>
      </a-form-item>
      <a-form-item label="姓名">
        <a-input v-model:value="dto.name"></a-input>
      </a-form-item>
      <a-form-item label="性别">
        <a-radio-group v-model:value="dto.sex">
          <a-radio-button value="男">男</a-radio-button>
          <a-radio-button value="女">女</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="年龄">
        <a-input-number v-model:value="dto.age"></a-input-number>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
import axios from "../api/request";
import { ref, computed } from "vue";
import { useRequest } from "vue-request";
import { StudentSaveDto, AxiosRespString } from "../model/Model8080";
import { Form } from 'ant-design-vue'

// 定义属性
const props = defineProps<{id:number, dto:StudentSaveDto, visible:boolean}>()

const title = computed(()=> props.id===0?'新增学生':'修改学生')

// 定义事件
const emit = defineEmits(['update:visible', 'saved'])

async function onOk() {
  if(props.id === 0) {
    await insert(props.dto)
  } else {
    await update(props.dto)
  }
  emit('saved')
  // 发送事件给父组件, 希望把 visible 改为 false
  emit('update:visible', false) 
}

function onCancel() {
  // 发送事件给父组件, 希望把 visible 改为 false
  emit('update:visible', false)
}

const {runAsync:insert} = useRequest<AxiosRespString,StudentSaveDto[]>(
  (dto)=>axios.post('/api/students', dto),
  {
    manual: true
  }
)

const {runAsync:update} = useRequest<AxiosRespString,StudentSaveDto[]>(
  (dto)=>axios.put(`/api/students/${props.id}`, dto),
  {
    manual: true
  }
)
</script>

父组件使用子组件

<A4Save :id="id" :dto="saveDto" v-model:visible="saveVisible"></A4Save>

<script setup lang="ts">
// ...
// >>>>>>>>>>>>>> 新增、修改开始
const saveVisible = ref(false)
const id = ref(0)
const saveDto = reactive({name:'', sex:'男', age:18})

function onInsert() {
  saveVisible.value = true
  id.value = 0
  Object.assign(saveDto, {name:'', sex:'男', age:18})
}

function onUpdate(record: Student) {
  saveVisible.value = true
  id.value = record.id
  Object.assign(saveDto, record)
}

function onSaved() {
  search(dto.value)
}  
// <<<<<<<<<<<<<< 新增、修改结束
</script>

• saveDto 使用 reactive 包装，是为了解决后续表单校验失效问题

• Object.assign 是将源对象（参数2）的属性值赋值给目标对象（参数1）的同名属性，效果等价于

• saveDto.name = record.name
  
  saveDto.sex = record.sex
  
  saveDto.age = record.age

  在 request.ts 中对响应消息统一处理

• #### 全局消息
  import { message } from 'ant-design-vue'
  
  // ...
  // 响应拦截器
  _axios.interceptors.response.use(
  (response)=>{ // 状态码  2xx
    if(response.data.message) {
      message.success(response.data.message, 3)
    }  
    // ... 
  },
  (error)=>{ // 状态码 > 2xx, 400,401,403,404,500
    // ...
  }
  )

  表单校验

  <template>
    <a-modal :visible="visible" :title="title" 
      @ok="onOk" @cancel="onCancel">
      <a-form>
        <a-form-item label="编号" v-if="id">
          <a-input readonly v-model:value="id"></a-input>
        </a-form-item>
        <a-form-item label="姓名" v-bind="validateInfos.name">
          <a-input v-model:value="dto.name"></a-input>
        </a-form-item>
        <a-form-item label="性别" v-bind="validateInfos.sex">
          <a-radio-group v-model:value="dto.sex">
            <a-radio-button value="男">男</a-radio-button>
            <a-radio-button value="女">女</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="年龄" v-bind="validateInfos.age">
          <a-input-number v-model:value="dto.age"></a-input-number>
        </a-form-item>
      </a-form>
    </a-modal>
  </template>
  <script setup lang="ts">
  import axios from "../api/request";
  import { ref, computed } from "vue";
  import { useRequest } from "vue-request";
  import { StudentSaveDto, AxiosRespString } from "../model/Model8080";
  import { Form } from 'ant-design-vue'
  
  // 定义属性
  const props = defineProps<{id:number, dto:StudentSaveDto, visible:boolean}>()
  
  const title = computed(()=> props.id===0?'新增学生':'修改学生')
  
  // 定义事件
  const emit = defineEmits(['update:visible', 'saved'])
  
  async function onOk() {
    try {
      // 提交前校验
      await validate()
      if(props.id === 0) {
        await insert(props.dto)
      } else {
        await update(props.dto)
      }
      emit('saved')
      // 发送事件给父组件, 希望把 visible 改为 false
      emit('update:visible', false) 
    } catch (e) {
      console.error(e)
    }
  }
  
  function onCancel() {
    // 发送事件给父组件, 希望把 visible 改为 false
    emit('update:visible', false)
  }
  
  const {runAsync:insert} = useRequest<AxiosRespString,StudentSaveDto[]>(
    (dto)=>axios.post('/api/students', dto),
    {
      manual: true
    }
  )
  
  const {runAsync:update} = useRequest<AxiosRespString,StudentSaveDto[]>(
    (dto)=>axios.put(`/api/students/${props.id}`, dto),
    {
      manual: true
    }
  )
  
  const rules = ref({
    name: [
      {required: true, message:'姓名必须'},
      {min:2, message:'字符数至少为2'}
    ],
    sex: [
      {required: true, message:'性别必须'}
    ],
    age: [
      {required: true, message:'年龄必须'},
      {min:10, message:'年龄最小为10岁', type:'number'},
      {max:120, message:'年龄最大为120岁', type:'number'}
    ]
  })
  
  // 参数1: 待校验的数据
  // 参数2: 校验规则
  const { validateInfos, validate } = Form.useForm(props.dto, rules)
  </script>