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

<template>
    <el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" v-bind="dialogSmall">
      <el-form :model="formData" ref='formRuleRef' :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
            v-for="item in dictStore.getDictData('resourceType')"
            :key="item.id"
            :label="item.label"
            :value="item.code"
          />
          </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>
      <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,watch,ref, type Ref } from 'vue';
  import { dialogSmall } from '@/utils/elementBind'
  import { ElMessage,   FormInstance,   FormItemRule } from 'element-plus'
  import { useDictStore } from '@/stores/modules/dict'
  const dictStore = useDictStore()
  const props = defineProps<{
    visible: boolean;
    dialogTitle: string;
    
    formData: {
      id: string;//资源表Id
      pid:string;//节点（0为根节点）
      pids?:string;//节点上层所有节点
      name: string;//名称
      code:string;//资源标识
      path:string;//路径
      icon?:string;//图标
      sort:number;//排序
      type:number;//资源类型0-菜单、1-按钮、2-公共资源、3-服务间调用资源
      remark?: string;//权限资源描述
      state:number;//权限资源状态
      create_By?:string;//创建人
      create_Time?:string;//创建时间
      update_By?:string;//更新人
      update_Time?:string;//更新时间
    };
  }>();
  

  // 定义规则
  const formRuleRef = ref<FormInstance>()
  const rules : Ref<Record<string, Array<FormItemRule>>> = ref({
          name :[{required:true,trigger:'blur',message:'菜单名称必填!'}],
          path :[{required:true,trigger:'blur',message:'菜单路径必填!'}],
          type :[{required:true,trigger:'change',message:'菜单类型必选!'}]
  })
  const emit = defineEmits<{
    (e: 'update:visible', value: boolean): void;
    (e: 'submit', data: any): void;
  }>();
  
  const handleCancel = () => {
    //重置表单内容
    //取消表单校验状态
    formRuleRef.value && formRuleRef.value.resetFields()
    emit('update:visible', false); // 关闭对话框
  };
  
  const handleSubmit = () => {
      try {
      formRuleRef.value?.validate((valid: boolean) => {
      if (valid) {
          // 将表单数据转为json,发送到后端
          let confirmFormData = JSON.parse(JSON.stringify(props.formData))
          emit('submit', props.formData); // 提交表单数据
          emit('update:visible', false); // 提交后关闭对话框
      } else {
        ElMessage.error('表单验证失败！')
      }
      }) 
    }catch (error) {
    console.error('验证过程中发生错误', error)
    }

  }
  
  // 当 props.visible 改变时，更新 formData
  watch(() => props.visible, (newVal) => {
    if (!newVal) {
      // 这里可以重置表单数据，如果需要的话
     
    }
  });
  </script>