更新代码

2024-11-01 15:27:36 +08:00
parent b207bc0e68
commit 0e871df27b
7 changed files with 82 additions and 45 deletions
--- a/frontend/src/views/authority/resource/components/resourcePopup.vue
+++ b/frontend/src/views/authority/resource/components/resourcePopup.vue
@@ -0,0 +1,111 @@
+<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>
+