refactor: keepalive无效问题修复和代码vue社区代码规范调整

Former-commit-id: f661982d54f1738ff9739f1afc993181a466f052

src/views/system/role/components/Menu.vue

@@ -1,33 +1,23 @@
-<template>
-  <div class="menu-container">
-    <el-row>
-      <el-col :span="12">
-        <el-button plain :icon="Switch" @click="toggleExpandAll">展开/折叠</el-button>
-      </el-col>
-      <el-col :span="12" style="text-align: right">
-        <el-button type="primary" :icon="Check" @click="handleSubmit">提交</el-button>
-      </el-col>
-    </el-row>
-
-    <el-tree class="menu-container__tree" ref="menuRef" v-if="refreshTree" :default-expanded-keys="expandedKeys" :default-expand-all="isExpandAll"
-      :data="menuOptions" show-checkbox node-key="value" empty-text="加载菜单中..." :check-strictly="checkStrictly"
-      highlight-current @node-click="handleNodeClick" />
-  </div>
-</template>
+<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
+<script lang="ts">
+export default {
+  name: "cmenu"
+};
+</script>
 
 <script setup lang="ts">
 import { nextTick, onMounted, reactive, ref, toRefs, watch } from "vue";
 import { listSelectMenus } from "@/api/system/menu";
 import { listRoleMenuIds, updateRoleMenu } from "@/api/system/role";
 import { ElTree, ElMessage } from "element-plus";
-import { Switch, Check } from "@element-plus/icons-vue";
+import { Switch, Position } from "@element-plus/icons-vue";
 import { Option } from "@/types";
 
 const emit = defineEmits(["menuClick"]);
 const props = defineProps({
   role: {
     type: Object,
-    default: () => { }
+    default: () => {}
   },
 });
 
@@ -99,10 +89,25 @@ onMounted(() => {
 });
 </script>
 
+<template>
+  <div class="app-container">
+    <el-row>
+      <el-col :span="12">
+        <el-button plain :icon="Switch" @click="toggleExpandAll">展开/折叠</el-button>
+      </el-col>
+      <el-col :span="12" style="text-align: right">
+        <el-button type="primary" :icon="Position" @click="handleSubmit">提交</el-button>
+      </el-col>
+    </el-row>
+
+    <el-tree class="menu-tree" ref="menuRef" v-if="refreshTree" :default-expanded-keys="expandedKeys"
+      :default-expand-all="isExpandAll" :data="menuOptions" show-checkbox node-key="value" empty-text="加载菜单中..."
+      :check-strictly="checkStrictly" highlight-current @node-click="handleNodeClick" />
+  </div>
+</template>
+
 <style lang="scss" scoped>
-.menu-container {
-  &__tree{
-    margin-top: 10px;
-  }
+.menu-tree {
+  margin-top: 10px;
 }
 </style>

src/views/system/role/components/Perm.vue

@@ -7,7 +7,7 @@
           </el-checkbox>
         </el-col>
         <el-col :span="12" style="text-align: right">
-          <el-button type="primary" :icon="Check" @click="handleSubmit">提交</el-button>
+          <el-button type="primary" :icon="Position" @click="handleSubmit">提交</el-button>
         </el-col>
       </el-row>
 
@@ -36,7 +36,7 @@ import { onMounted, reactive, toRefs, watch } from "vue";
 import { listPerms } from "@/api/system/perm";
 import { listRolePerms, saveRolePerms } from "@/api/system/role";
 import { ElMessage } from "element-plus";
-import { Check } from "@element-plus/icons-vue";
+import { Position } from "@element-plus/icons-vue";
 import { PermQueryParam } from "@/types";
 
 const props = defineProps({

src/views/system/role/components/Role.vue

@@ -1,72 +1,9 @@
-<template>
-  <div class="role-container">
-    <!-- 搜索表单 -->
-    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-      <el-form-item>
-        <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
-        <el-button type="danger" :icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
-      </el-form-item>
-
-      <el-form-item prop="name">
-        <el-input v-model="queryParams.name" placeholder="角色名称" clearable @keyup.enter="handleQuery" />
-      </el-form-item>
-
-      <el-form-item>
-        <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <!-- 数据表格 -->
-    <el-table ref="dataTableRef" v-loading="loading" :data="roleList" @selection-change="handleSelectionChange"
-      @row-click="handleRowClick" highlight-current-row border>
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="角色名称" prop="name" />
-      <el-table-column label="角色编码" prop="code" />
-      <el-table-column label="操作" align="center" width="120">
-        <template #default="scope">
-          <el-button type="primary" :icon="Edit" circle plain @click.stop="handleUpdate(scope.row)" />
-          <el-button type="danger" :icon="Delete" circle plain @click.stop="handleDelete(scope.row)" />
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 分页工具条 -->
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
-      @pagination="handleQuery" />
-
-    <!-- 表单弹窗 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" @close="cancel" width="450px">
-      <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
-        <el-form-item label="角色名称" prop="name">
-          <el-input v-model="formData.name" placeholder="请输入角色名称" />
-        </el-form-item>
-
-        <el-form-item label="角色编码" prop="code">
-          <el-input v-model="formData.code" placeholder="请输入角色编码" />
-        </el-form-item>
-
-        <el-form-item label="排序" prop="sort">
-          <el-input-number v-model="formData.sort" controls-position="right" :min="0" style="width: 100px" />
-        </el-form-item>
-
-        <el-form-item label="状态">
-          <el-radio-group v-model="formData.status">
-            <el-radio :label="1">正常</el-radio>
-            <el-radio :label="0">停用</el-radio>
-          </el-radio-group>
-        </el-form-item>
-      </el-form>
-
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
+<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
+<script lang="ts">
+export default {
+  name: "role"
+};
+</script>
 
 <script setup lang="ts">
 import { onMounted, reactive, ref, toRefs } from "vue";
@@ -107,7 +44,7 @@ const state = reactive({
   rules: {
     name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
     code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
-  },
+  }
 });
 
 const {
@@ -215,8 +152,77 @@ onMounted(() => {
 });
 </script>
 
+
+<template>
+  <div class="app-container">
+    <!-- 搜索表单 -->
+    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+      <el-form-item>
+        <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
+        <el-button type="danger" :icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
+      </el-form-item>
+
+      <el-form-item prop="name">
+        <el-input v-model="queryParams.name" placeholder="角色名称" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 数据表格 -->
+    <el-table ref="dataTableRef" v-loading="loading" :data="roleList" @selection-change="handleSelectionChange"
+      @row-click="handleRowClick" highlight-current-row border>
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="角色名称" prop="name" />
+      <el-table-column label="角色编码" prop="code" />
+      <el-table-column label="操作" align="center" width="120">
+        <template #default="scope">
+          <el-button type="primary" :icon="Edit" circle plain @click.stop="handleUpdate(scope.row)" />
+          <el-button type="danger" :icon="Delete" circle plain @click.stop="handleDelete(scope.row)" />
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页工具条 -->
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
+
+    <!-- 表单弹窗 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" @close="cancel" width="450px">
+      <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
+        <el-form-item label="角色名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入角色名称" />
+        </el-form-item>
+
+        <el-form-item label="角色编码" prop="code">
+          <el-input v-model="formData.code" placeholder="请输入角色编码" />
+        </el-form-item>
+
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="formData.sort" controls-position="right" :min="0" style="width: 100px" />
+        </el-form-item>
+
+        <el-form-item label="状态">
+          <el-radio-group v-model="formData.status">
+            <el-radio :label="1">正常</el-radio>
+            <el-radio :label="0">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+
 <style lang="scss" scoped>
-.role-container {
-  width: 100%;
-}
 </style>