表单验证

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;