表单验证

frontend/src/views/authority/resource/components/ResourceDialog.vue

@@ -1,6 +1,6 @@
 <template>
     <el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" v-bind="dialogSmall">
-      <el-form :model="formData" :rules="rules">
+      <el-form :model="formData" ref='formRuleRef' :rules='rules'>
         <el-form-item label="名称" prop="name">
           <el-input v-model="formData.name" />
         </el-form-item>
@@ -12,17 +12,15 @@
         </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-option label="菜单" :value="0"></el-option>
+              <el-option label="按钮" :value="1"></el-option>
+              <el-option label="公共资源" :value="2"></el-option>
+              <el-option label="服务间调用资源" :value="3"></el-option>
           </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">
@@ -34,42 +32,69 @@
   </template>
   
   <script lang="ts" setup name="ResourceDialog">
-  import { defineProps, defineEmits, reactive,watch } from 'vue';
+  import { defineProps, defineEmits,watch,ref, type Ref } from 'vue';
   import { dialogSmall } from '@/utils/elementBind'
+  import { ElMessage,   FormInstance,   FormItemRule } from 'element-plus'
   const props = defineProps<{
     visible: boolean;
     dialogTitle: string;
     
     formData: {
-      
-      id:string;
-      name: string;
-      path: string;
-      sort: number;
-      type: string;
-      remark: string;
-      route_Name: string;
+      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 rules = {
-          name :[
-            {require:true,trigger:"blur",message:"请填写菜单名称"}
-          ]
-  }
+
+  // 定义规则
+  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 = () => {
-    emit('submit', props.formData); // 提交表单数据
-    emit('update:visible', false); // 提交后关闭对话框
-  };
+      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) => {

frontend/src/views/authority/resource/index.vue

@@ -40,122 +40,103 @@
   import { type Resource } from '@/api/resource/interface'
   import ProTable from '@/components/ProTable/index.vue'
   import ResourceDialog from "@/views/authority/resource/components/ResourceDialog.vue"; // 导入子组件
-  import {CirclePlus, Delete, EditPen} from '@element-plus/icons-vue'
+  import {CirclePlus, Delete, EditPen,HomeFilled} from '@element-plus/icons-vue'
   import resourceDataList from '@/api/resource/resourceData'
   import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
   import { ElMessage, ElMessageBox, inputEmits } from 'element-plus';
+  import { useDictStore } from '@/stores/modules/dict'
+
+  const dictStore = useDictStore()
   let multipleSelection = ref<string[]>([]);
   const resourceData = resourceDataList
   const dialogFormVisible = ref(false)
   const isEditMode = ref(false);
   const dialogTitle = ref('新增菜单')
+  
   const dialogForm = ref<Resource.ResResourceList>({
                               id: '',
+                              pid:'',
+                              pids:'',
                               name: '',
-                              path: '',
-                              sort: 0,
-                              type: '',
+                              code:'',
+                              path:'',
+                              icon:'',
+                              sort:100,
+                              type:0,
                               remark: '',
-                              route_Name: '',
-                              create_Time:  '' ,
-                              update_Time:  '' ,
+                              state:1,
                               children:[],
 });
   // ProTable 实例
   const proTable = ref<ProTableInstance>()
+
   // 表格配置项
   const columns = reactive<ColumnProps<Resource.ResResourceList>[]>([
     { type: 'selection', fixed: 'left', width: 70 },
     {
       prop: 'name',
       label: '名称',
-      width: 150,
+      minWidth: 200,
       search: { el: 'input', tooltip: '我是搜索提示' },
     },
+    {
+      prop: 'code',
+      label: '资源标识',
+      minWidth: 100,
+    },
     {
       prop: 'path',
       label: '路径',
-      width: 300,
+      minWidth: 200,
     },
     {
-      prop: 'sort',
-      label: '排序',
-      width: 100,
-      search: {
-      // 自定义 search 显示内容
-      render: ({ searchParam }) => {
+    prop: 'type',
+    label: '类型',
+    width: 150,
+    search: {
+      render: ({searchParam})  => {
         return (
           <div class='flx-center'>
-            <el-input vModel_trim={searchParam.minAge} placeholder='最小排序' />
-            <span class='mr10 ml10'>-</span>
-            <el-input vModel_trim={searchParam.maxAge} placeholder='最大排序' />
-          </div>
-         
-        )
-      },
-    },
-    },
-    {
-      prop: 'type',
-      label: '类型',
-      width: 150,
-      // 字典数据（本地数据）
-      //enum: dictStore.getDictData('type'),
-      //search: { el: 'select', props: { filterable: true } },
-      //fieldNames: { label: 'label', value: 'resourceType' },
-      search: {
-      // 自定义 search 显示内容
-      render: ({ searchParam }) => {
-        return (
-          <div class='flx-center'>
-            <el-select placeholder="请选择">
-              <el-option label="菜单"></el-option>
-              <el-option label="按钮"></el-option>
-              <el-option label="公共资源"></el-option>
+            <el-select placeholder="请选择" v-model={searchParam.type}>
+              <el-option label="菜单" value="0"></el-option>
+              <el-option label="按钮" value="1"></el-option>
+              <el-option label="公共资源" value="2"></el-option>
+              <el-option label="服务间调用资源" value="3"></el-option>
             </el-select>
           </div>
-         
+        );
+      },
+    },
+  },
+    {
+      prop: 'state',
+      label: '权限资源状态',
+      minWidth: 120,
+      enum: dictStore.getDictData('status'),
+      fieldNames: { label: 'label', value: 'code' },
+      render: scope => {
+        return (
+          <el-tag type={scope.row.state ? 'success' : 'danger'} > {scope.row.state ? '正常' : '禁用'} </el-tag>
         )
       },
     },
-    },
-    {
-      prop: 'route_Name',
-      width: 200,
-      label: '路由',
-      search: { el: 'input' },
-    },
-    {
-      prop: 'create_Time',
-      label: '创建时间',
-      width: 180,
-      search: {
-      el: 'date-picker',
-      span: 1,
-      props: { type: 'daterange', valueFormat: 'YYYY-MM-DD'},
-      defaultValue: ['2024-11-12', '2024-12-12'],}
-    },
-    {
-      prop: 'update_Time',
-      label: '更新时间',
-      width: 180,
-      
-    },
-    { prop: 'operation', label: '操作', fixed: 'right' },
+    { prop: 'operation', label: '操作', fixed: 'right',minWidth: 200 },
   ])
   // 打开 drawer(新增、查看、编辑)
   // 打开新增对话框
 const openAddDialog = () => {
   dialogForm.value = {
     id: '',
+    pid:'',
+    pids:'',
     name: '',
-    path: '',
-    sort: 100,
-    type: '',
+    code:'',
+    path:'',
+    icon:'',
+    sort:100,
+    type:0,
     remark: '',
-    route_Name: '',
-    create_Time:  '' ,
-    update_Time:  '' ,
+    state:1,                          
     children: [],
   };
   isEditMode.value = true;