商品大类管理实现B

<template>
  <el-dialog
    model-value="dialogVisible"
    :title="dialogTitle"
    width="30%"
    @close="handleClose"
  >
    <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
    >
      <el-form-item label="大类名称" prop="name">
        <el-input v-model="form.name"/>
      </el-form-item>
      <el-form-item label="大类描述" prop="remark">
        <el-input v-model="form.remark" type="textarea" :rows="4"/>
      </el-form-item>


    </el-form>
    <template #footer>
        <span class="dialog-footer">

           <el-button @click="handleClose">取消</el-button>
           <el-button type="primary" @click="handleConfirm">确认</el-button>
        </span>
    </template>

  </el-dialog>
</template>

<script setup>

import {
   defineEmits, defineProps, ref, watch} from "vue";
import axios from "@/util/axios";
import {
    ElMessage} from "element-plus";

const props=defineProps({
   
  id:{
   
    type:Number,
    default:-1,
    required:true
  },
  dialogTitle:{
   
    type:String,
    default:'',
    required:true
  }
})

const form=ref({
   
  id:-1,
  name:"",
  remark:""
})

const rules=ref({
   
  name:[
    {
   required:true,message:'请输入商品大类名称'}
  ],
  remark:[
    {
   required:true,message:'请输入商品大类描述 '}
  ]
})

const formRef=ref(null)

const initFormData=async(id)=>{
   
    const res=await axios.get("admin/bigType/"+id);
    form.value=res.data.bigType;
}



  watch(
      ()=>props.id,
      ()=>{
   
        let id=props.id;
        if(id!=-1){
   
          initFormData(id)
        }
      }
  )

//定义父组件事件
  const emits=defineEmits