1

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

@@ -14,7 +14,7 @@
             <a-space class="mt-1.5" size="large">
               <a-checkbox @change="handlerExpand">展开/折叠</a-checkbox>
               <a-checkbox @change="handlerSelect">全选/全不选</a-checkbox>
-              <a-checkbox v-model="cancelLinkage" @change="handlerLinkage">关闭父子级联动</a-checkbox>
+              <!-- <a-checkbox v-model="cancelLinkage" @change="handlerLinkage">关闭父子级联动</a-checkbox> -->
             </a-space>
             <div class="tree-container">
               <sa-tree-slider
@@ -24,9 +24,9 @@
                 :fieldNames="{ title: 'label', key: 'id' }"
                 searchPlaceholder="过滤菜单"
                 v-model:checked-keys="selectKeys"
-                :check-strictly="cancelLinkage"
                 :virtual-list-props="{ height: 300 }"
-                @click="handlerClick" />
+                @click="handlerClick"
+              />
             </div>
           </div>
         </a-spin>
@@ -36,77 +36,79 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import role from '@/api/system/role'
-import menu from '@/api/system/menu'
-import { Message } from '@arco-design/web-vue'
+import { ref } from "vue";
+import role from "@/api/system/role";
+import menu from "@/api/system/menu";
+import { Message } from "@arco-design/web-vue";
 
-const visible = ref(false)
-const loading = ref(true)
-const menuList = ref([])
-const selectKeys = ref([])
-const cancelLinkage = ref(false)
-const tree = ref()
-const form = ref({ name: undefined, code: undefined })
+const visible = ref(false);
+const loading = ref(true);
+const menuList = ref([]);
+const selectKeys = ref([]);
+const cancelLinkage = ref(false);
+const tree = ref();
+const form = ref({ name: undefined, code: undefined });
 
-const emit = defineEmits(['success'])
+const emit = defineEmits(["success"]);
 
 // 打开弹窗
 const open = async (row) => {
-  visible.value = true
-  form.value = { id: row.id, name: row.name, code: row.code }
-  handlerExpand(false)
-  handlerSelect(false)
-  handlerLinkage(false)
-  await setData(row.id)
-}
+  visible.value = true;
+  form.value = { id: row.id, name: row.name, code: row.code };
+  handlerExpand(false);
+  handlerSelect(false);
+  handlerLinkage(false);
+  await setData(row.id);
+};
 
 // 展开/折叠
 const handlerExpand = (value) => {
-  tree.value.saTree.expandAll(value)
-}
+  tree.value.saTree.expandAll(value);
+};
 
 // 全选/取消全选
 const handlerSelect = (value) => {
-  tree.value.saTree.checkAll(value)
-}
+  tree.value.saTree.checkAll(value);
+};
 
 // 关联/取消关联
 const handlerLinkage = (value) => {
-  cancelLinkage.value = value
-}
+  cancelLinkage.value = value;
+};
 
 // 点击树节点
 const handlerClick = (value) => {
-  const t = tree.value.saTree
-  const nodes = t.getExpandedNodes().map((item) => item.id)
-  t.expandNode(value, nodes.includes(value[0]) ? false : true)
-}
+  const t = tree.value.saTree;
+  const nodes = t.getExpandedNodes().map((item) => item.id);
+  t.expandNode(value, nodes.includes(value[0]) ? false : true);
+};
 
 // 获取数据
 const setData = async (roleId) => {
-  loading.value = true
-  const menuResponse = await menu.accessMenu({ tree: true })
-  menuList.value = menuResponse.data
-  const roleResponse = await role.getMenuByRole(roleId)
-  selectKeys.value = roleResponse.data.menus.map((item) => item.id)
-  selectKeys.value.length > 0 && handlerLinkage(true)
-  loading.value = false
-}
+  loading.value = true;
+  const menuResponse = await menu.accessMenu({ tree: true });
+  menuList.value = menuResponse.data;
+  const roleResponse = await role.getMenuByRole(roleId);
+  selectKeys.value = roleResponse.data.menus.map((item) => item.id);
+  selectKeys.value.length > 0 && handlerLinkage(true);
+  loading.value = false;
+};
 
 // 数据保存
 const submit = async (done) => {
-  const nodes = tree.value.saTree.getCheckedNodes()
-  const ids = nodes.map((item) => item.id)
-  const response = await role.updateMenuPermission(form.value.id, { menu_ids: ids })
-  response.code === 200 && Message.success(response.message)
-  emit('success')
-  done(true)
-}
+  const nodes = tree.value.saTree.getCheckedNodes();
+  const ids = nodes.map((item) => item.id);
+  const response = await role.updateMenuPermission(form.value.id, {
+    menu_ids: ids,
+  });
+  response.code === 200 && Message.success(response.message);
+  emit("success");
+  done(true);
+};
 
-const close = () => (visible.value = false)
+const close = () => (visible.value = false);
 
-defineExpose({ open })
+defineExpose({ open });
 </script>
 
 <style scoped>