更新

src/views/permission/permissionList/form.vue

@@ -2,12 +2,12 @@
 import { ref } from "vue";
 const ruleFormRef = ref();
 const formRules = ref({
-  ismenu:[{ required: true, message: "菜单为必填项", trigger: "change"}],
+  ismenu: [{ required: true, message: "菜单为必填项", trigger: "change" }],
-  pid:[{ required: true, message: "所属父级为必填项", trigger: "change"}],
+  pid: [{ required: true, message: "所属父级为必填项", trigger: "change" }],
-  name:[{ required: true, message: "权限规则为必填项", trigger: "blur" }],
+  name: [{ required: true, message: "权限规则为必填项", trigger: "blur" }],
-  weigh:[{ required: true, message: "权重为必填项", trigger: "change"}],
+  weigh: [{ required: true, message: "权重为必填项", trigger: "change" }],
-  status:[{ required: true, message: "状态为必填项", trigger: "change"}],
+  status: [{ required: true, message: "状态为必填项", trigger: "change" }],
-  title: [{ required: true, message: "权限标题为必填项", trigger: "blur" },{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }]
+  title: [{ required: true, message: "权限标题为必填项", trigger: "blur" }, { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }]
 });
 const props = defineProps(["formInline", "higherMenuOptions"]);
 const newFormInline = ref(
@@ -21,8 +21,8 @@ const newFormInline = ref(
       extend: "",
       ismenu: 1,
       status: 'normal',
-        weigh:1,
+      weigh: 1,
-        pid:''
+      pid: ''
     }
 );
 
@@ -33,12 +33,7 @@ defineExpose({ getRef });
 </script>
 
 <template>
-  <el-form
+  <el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="120px">
-    ref="ruleFormRef"
-    :model="newFormInline"
-    :rules="formRules"
-    label-width="120px"
-  >
     <el-form-item label="菜单" prop="ismenu">
       <el-radio-group v-model="newFormInline.ismenu">
         <el-radio label="是" :value="1" />
@@ -46,20 +41,13 @@ defineExpose({ getRef });
       </el-radio-group>
     </el-form-item>
     <el-form-item label="所属父级" prop="pid">
-      <el-cascader
+      <el-cascader v-model="newFormInline.pid" class="w-full" :options="higherMenuOptions" :show-all-levels="false"
-        v-model="newFormInline.pid"
-        class="w-full"
-        :options="higherMenuOptions"
         :props="{
           value: 'id',
           label: 'title',
-          emitPath: false,
+          children: 'childlist',
-          checkStrictly: true
+          emitPath: false, checkStrictly: true
-        }"
+        }" clearable filterable placeholder="请选择上级菜单">
-        clearable
-        filterable
-        placeholder="请选择上级菜单"
-      >
         <template #default="{ node, data }">
           <span>{{ data.title }}</span>
           <span v-if="!node.isLeaf"> ({{ data.childlist.length }}) </span>
@@ -67,39 +55,19 @@ defineExpose({ getRef });
       </el-cascader>
     </el-form-item>
     <el-form-item label="规则" prop="name">
-      <el-input
+      <el-input v-model="newFormInline.name" clearable placeholder="请输入权限规则" />
-        v-model="newFormInline.name"
-        clearable
-        placeholder="请输入权限规则"
-      />
     </el-form-item>
     <el-form-item label="标题" prop="title">
-      <el-input
+      <el-input v-model="newFormInline.title" clearable placeholder="请输入权限标题" />
-        v-model="newFormInline.title"
-        clearable
-        placeholder="请输入权限标题"
-      />
     </el-form-item>
     <el-form-item label="Url" prop="url">
-      <el-input
+      <el-input v-model="newFormInline.url" clearable placeholder="请输入权限url" />
-        v-model="newFormInline.url"
-        clearable
-        placeholder="请输入权限url"
-      />
     </el-form-item>
     <el-form-item label="图标" prop="icon">
-      <el-input
+      <el-input v-model="newFormInline.icon" clearable placeholder="请输入权限图标" />
-        v-model="newFormInline.icon"
-        clearable
-        placeholder="请输入权限图标"
-      />
     </el-form-item>
     <el-form-item label="扩展属性" prop="extend">
-      <el-input
+      <el-input v-model="newFormInline.extend" clearable placeholder="请输入权限扩展属性" />
-        v-model="newFormInline.extend"
-        clearable
-        placeholder="请输入权限扩展属性"
-      />
     </el-form-item>
     <el-form-item label="权重" prop="weigh">
       <el-input-number v-model="newFormInline.weigh" :min="1" :max="1000" label="请输入权限权重"></el-input-number>

src/views/permission/permissionList/hook.tsx

@@ -68,6 +68,7 @@ export function useData() {
   ]);
   const onSearch = async () => {
     loading.value = true;
+    tableList.value = []
     const { data, code } = await queryList();
     if (code) {
       tableList.value = data.rows.map(ele => {