web/src/views/system/user/components/UserMenu.vue

<template>
  <BasicDrawer
    :destroyOnClose="true"
    :maskClosable="true"
    v-bind="$attrs"
    @register="registerModal"
    title="常用菜单配置"
    width="100%"
    :showFooter="false"
  >
    <div class="flex">
      <div class="commonly">
        <div v-for="(row, i) in menuRoleData" :key="i">
          <div class="commonly-group"> {{ row.name }}</div>
          <div class="grid grid-cols-6 gap-2">
            <div
              class="commonly-item"
              v-for="(item, index) in row.menuVoList"
              :key="index"
              :class="{ 'commonly-item-active': menuCommonlyIds.includes(item.id) }"
            >
              <div class="flex flex-1 h-full" @click="handelClick(item)">
                <img
                  style="width: 56px; height: 56px; object-fit: contain"
                  :src="item.iconUrl || 'https://zhxy.cqtlzjzx.com/minio/static/service.png'"
                  alt=""
                />
                <div class="ml-2 flex flex-1 flex-col truncate">
                  <div class="commonly-item-title">
                    <div> {{ item.title }} </div>
                  </div>
                  <div class="flex justify-between">
                    <div class="commonly-item-desc">{{ item.remark }}</div>
                  </div>
                </div>
              </div>
              <div class="commonly-item-tag">
                <div class="commonly-item-tag-d"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </BasicDrawer>
</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { useDrawerInner, BasicDrawer } from '/@/components/Drawer';
  import {
    deleteSystemSystemMenuCommonlyUsed,
    getSystemMenuCommonlyUsedNopage,
    postSystemSystemMenuCommonlyUsed,
  } from '/@/services/apis/SystemMenuCommonlyUsedController';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getMenuServe } from '/@/services/apis/MenuController';

  const emits = defineEmits(['success', 'register']);

  const { createConfirm, createMessage } = useMessage();

  const menuRoleData = ref<Recordable[]>([]);
  const menuCommonlyData = ref<Recordable[]>([]);
  const menuCommonlyIds = ref<string[]>([]);

  const getMenuRole = async () => {
    menuRoleData.value = await getMenuServe({ systemType: 'system_pc' });
  };

  const getMenuCommonly = async () => {
    const data = await getSystemMenuCommonlyUsedNopage({});
    menuCommonlyData.value = data || [];
    menuCommonlyIds.value = menuCommonlyData.value.map((item) => item.menuId);
  };

  const [registerModal, { setDrawerProps }] = useDrawerInner(async () => {
    await getMenuCommonly();
    await getMenuRole();

    setDrawerProps({ confirmLoading: false });
  });

  const handelClick = async (item) => {
    if (menuCommonlyIds.value.includes(item.id)) {
      await deleteSystemSystemMenuCommonlyUsed([item.id]);
      menuCommonlyIds.value.splice(
        menuCommonlyIds.value.findIndex((row) => row === item.id),
        1,
      );
    } else {
      await postSystemSystemMenuCommonlyUsed({ menuId: item.id });
      menuCommonlyIds.value.push(item.id);
    }
    emits('success');
  };

  const handleDelete = (record: any) => {
    createConfirm({
      iconType: 'warning',
      title: '温馨提醒',
      content: '是否删除该数据?',
      onOk: async () => {
        try {
          await deleteSystemSystemMenuCommonlyUsed([record.id]);
          createMessage.success('删除成功');
        } catch (e) {
          createMessage.error('删除失败');
        }
      },
      okText: '确认',
      cancelText: '取消',
    });
  };

  onMounted(() => {});
</script>

<style scoped lang="less">
  .commonly {
    position: relative;

    &-group {
      font-size: 20px;
      font-weight: bold;
      color: rgb(11, 11, 11);
      margin: 16px 0;
    }

    &-item {
      box-sizing: border-box;
      border: 1.6px solid rgb(255, 255, 255);
      border-radius: 10px;
      box-shadow: 10px 16px 50px 0px rgba(53, 64, 85, 0.05);
      background: linear-gradient(180deg, rgb(231, 239, 251), rgb(248, 252, 253) 100%);
      border-radius: 8px;
      cursor: pointer;
      padding: 16px;
      position: relative;

      &-title {
        font-size: 16px;
        font-weight: bold;
      }

      &-desc {
        color: rgba(11, 11, 11, 0.6);
      }

      &-tag {
        position: absolute;
        right: 0;
        top: 0;
        border-radius: 0 4px 0 20px;
        background-color: rgb(22, 100, 255);
        height: 12px;
        width: 20px;
        display: none;

        &-d {
          position: absolute;
          top: 2px;
          left: 10px;
          height: 6px;
          width: 4px;
          border: 1px solid #fff;
          border-left: 0;
          border-top: 0;
          transform-origin: center;
          transform: rotate(45deg);
          box-sizing: content-box;
        }
      }

      &-active {
        .commonly-item-tag {
          display: block;
        }
      }
    }
  }
</style>