web/src/views/system/role/components/menusConfigModal.vue

<script setup lang="ts">
  import BasicModal from '/@/components/Modal/src/BasicModal.vue';
  import { useModalInner } from '/@/components/Modal';
  import { ref } from 'vue';
  import { getMenuRoleServe } from '/@/services/apis/MenuController';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { postXjrmenuquickRoleSave } from '/@/services/apis/XjrMenuQuickController';
  const selectIds = ref([]);
  const roleId = ref();
  const [configReg, { closeModal }] = useModalInner(async (data) => {
    selectIds.value = [];
    systemData.value = [];
    roleId.value = data.id;
    systemData.value = await getMenuRoleServe({ roleId: data.id });
    systemData.value.forEach((item) => {
      item.menuVoList.forEach((items) => {
        if (items.isSelect) {
          selectData.value.push({
            menuId: items.id,
            systemId: item.id,
          });
          selectIds.value.push(items.id);
        }
      });
    });
  });
  const systemData = ref();
  const selectData = ref<API.AddXjrMenuQuickDto[]>([]);

  const { createMessage } = useMessage();
  const handleChangeStatus = (item) => {
    if (selectIds.value.includes(item.id)) {
      selectIds.value.splice(selectIds.value.indexOf(item.id), 1);
      selectData.value.forEach((items, index) => {
        if (items.menuId === item.id) {
          selectData.value.splice(index, 1);
        }
      });
    } else {
      // 最多只能选择6个
      if (selectIds.value.length >= 6) {
        createMessage.error('最多只能选择6个');
        return false;
      }
      selectIds.value.push(item.id);
      selectData.value.push({
        menuId: item.id,
        systemId: item.systemId,
      });
    }
  };
  const handleSummit = async () => {
    const data = {
      roleId: roleId.value,
      menus: selectData.value,
    };
    console.log(data);
    try {
      await postXjrmenuquickRoleSave(data);
      createMessage.success('保存成功');
      closeModal();
    } catch (error) {
      createMessage.error(error);
    }
  };
  const handleClose = () => {
    selectData.value = [];
    selectIds.value = [];
    closeModal();
  };
</script>

<template>
  <BasicModal
    @ok="handleSummit"
    defaultFullscreen
    @cancel="handleClose"
    v-bind="$attrs"
    @register="configReg"
    title="快捷菜单配置"
    helpMessage="修改后请点击确认按钮保存修改"
  >
    <div class="service-Content-body" v-if="systemData">
      <div class="service-Content-body-system" v-for="(item, index) in systemData" :key="index">
        <div>
          <span style="font-size: 18px; margin-left: 12px">{{ systemData[index].name }}:</span>
        </div>
        <div class="service-Content-body-system-items">
          <div
            v-for="(items, indexs) in item.menuVoList"
            :key="indexs"
            :class="selectIds.includes(items.id) ? 'active' : ''"
            class="service-Content-body-system-items-item"
            @click="handleChangeStatus(items)"
          >
            <div style="width: 100px; margin-left: 12px">
              <img
                style="width: 50px; height: 50px; object-fit: contain"
                :src="
                  items.iconUrl
                    ? items.iconUrl
                    : 'https://zhxy.cqtlzjzx.com/minio/static/service.png'
                "
                alt=""
              />
            </div>
            <div class="titleContent">
              <span>{{ items.title }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </BasicModal>
</template>

<style scoped lang="less">
  .service-Content-body {
    display: flex;
    padding: 2%;
    flex-direction: column;
    &-system {
      display: flex;
      flex-direction: column;
      &-items {
        padding: 24px 0;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        &-item {
          border-radius: 4px;
          margin: 12px;
          display: flex;
          align-items: center;
          box-shadow: 0 0.3rem 0.5rem -0.2rem rgba(78, 78, 78, 0.3),
            0rem 0rem 0.1rem 0rem rgba(78, 78, 78, 0.3);
          width: 240px;
          height: 90px;
          img {
          }
        }
      }
    }
  }
  .titleContent {
    width: 180px;
    text-align: center;
    //禁止换行
    color: #787c8e;
    white-space: nowrap;
    overflow: hidden;
    //超出部分用省略号显示
    text-overflow: ellipsis;
    span {
      //限定宽度
      font-size: 16px;
      padding: 0 24px;
    }
  }
  .active {
    background: #dce7ff;
  }
</style>