pqs-9100_client/frontend/src/views/authority/resource/components/ResourceDialog.vue

<template>
    <el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" v-bind="dialogSmall">
      <el-form :model="formData" :rules="rules">
        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="路径" prop="path">
          <el-input v-model="formData.path" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="formData.sort" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="formData.type" placeholder="请选择资源类型">
            <el-option label="菜单" value="菜单" />
            <el-option label="按钮" value="按钮" />
            <el-option label="公共资源" value="公共资源" />
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="remark">
          <el-input v-model="formData.remark" :rows="2" type="textarea"/>
        </el-form-item>
        <el-form-item label="路由" prop="route_Name">
          <el-input v-model="formData.route_Name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  
  <script lang="ts" setup name="ResourceDialog">
  import { defineProps, defineEmits, reactive,watch } from 'vue';
  import { dialogSmall } from '@/utils/elementBind'
  const props = defineProps<{
    visible: boolean;
    dialogTitle: string;
    
    formData: {
      
      id:string;
      name: string;
      path: string;
      sort: number;
      type: string;
      remark: string;
      route_Name: string;
    };
  }>();
  
  const rules = {
          name :[
            {require:true,trigger:"blur",message:"请填写菜单名称"}
          ]
  }
  const emit = defineEmits<{
    (e: 'update:visible', value: boolean): void;
    (e: 'submit', data: any): void;
  }>();
  
  const handleCancel = () => {
    emit('update:visible', false); // 关闭对话框
  };
  
  const handleSubmit = () => {
    emit('submit', props.formData); // 提交表单数据
    emit('update:visible', false); // 提交后关闭对话框
  };
  
  // 当 props.visible 改变时，更新 formData
  watch(() => props.visible, (newVal) => {
    if (!newVal) {
      // 这里可以重置表单数据，如果需要的话
     
    }
  });
  </script>