merchant_feedov_web/src/views/system/menu/index.vue

<template>
  <div class="container">
    <div class="head-title">
      <span> {{ route.meta.title }} </span>
      <a-button type="primary" @click="evAddMenu">{{ $t('global.newMenu') }}</a-button>
    </div>

    <a-space direction="vertical" :style="{ width: '100%' }">
      <a-upload :show-file-list="false" :custom-request="customRequest" />
    </a-space>
    <!-- default-expand-all-rows -->
    <a-table class="table" :columns="columns" :data="refData.dataSource" :pagination="false" row-key="id"
      :scroll="{ x: '120%' }">
      <template #name="{ record }">
        <span> {{ getParseLang(record.name, lang.getLang) }} </span>
        <template v-if="record.permsArr && record.permsArr.length > 0">
          <a-tag v-for="item in record.permsArr" :key="item.id" class="tag-name">{{ item.name }}</a-tag>
        </template>
      </template>
      <template #refresh="{ record }">
        <span v-if="['1', '2'].includes(record.type)">{{
          record.refresh ? "是" : "否"
        }}</span>
      </template>
      <template #icon="{ record }">
        <!-- <a>123456789</a> -->
        <span v-if="!record.icon"></span>
        <svg-icon v-else class="icon" :icon="record.icon" />
      </template>

      <template #id="{ record }">
        <a href="javascript:;" class="a-link" style="margin-right: 1rem" @click="evEdit(record)">编辑</a>
        <a-popconfirm content="确认删除该信息?" ok-text="确定" cancel-text="取消" @ok="evDelete(record.id)">
          <a href="javascript:;" class="a-link">删除</a>
        </a-popconfirm>
      </template>
    </a-table>

    <a-modal v-model:visible="refData.visible" title="菜单信息" :centered="true" :width="700" :footer="false" simple>
      <div class="form-box">
        <a-form :model="refData.fromData" @submit-success="evHandleSubmit">
          <a-form-item field="name" label="路由名称" :rules="[{ required: true, message: '请输入路由名称' }]"
            :validate-trigger="['change', 'input', 'blur']">
            <!-- <a-input
              v-model="refData.fromData.name"
              placeholder="请输入路由名称"
            /> -->

            <MonacoEditor v-model="refData.fromData.name" />
          </a-form-item>

          <a-form-item field="menuId" label="上级路由" :validate-trigger="['change', 'input', 'blur']">
            <a-tree-select v-model="refData.fromData.menuId" placeholder="一级菜单" :data="refData.menuTree"
              :allow-clear="true" :field-names="{
                children: 'children',
                title: 'name',
                key: 'id',
              }" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" />
          </a-form-item>

          <a-form-item field="path" label="路由标识" :rules="[{ required: true, message: '请输入路由标识' }]"
            :validate-trigger="['change', 'input', 'blur']">
            <a-input v-model="refData.fromData.path" placeholder="请输入路由标识" />
          </a-form-item>

          <a-form-item v-if="!refData.fromData.menuId" field="icon" label="路由图标"
            :rules="[{ required: true, message: '请选择路由图标' }]" :validate-trigger="['change', 'input', 'blur']">
            <a-input v-model="refData.fromData.icon" placeholder="请设置菜单图标">
              <template v-if="refData.fromData.icon" #suffix>
                <svg-icon class="input-icon" :icon="refData.fromData.icon" />
              </template>
              <template #append>
                <icon-settings class="icon-append" @click="evIconModal" />
                <!-- <setting-outlined class="icon-append" @click="evIconModal" /> -->
              </template>
            </a-input>
          </a-form-item>

          <a-form-item v-if="isUrlView" field="url" label="路由地址">
            <!-- :rules="[{ required: true, message: '请输入路由名称' }]"
            :validate-trigger="['change', 'input', 'blur']" -->
            <!--      
            <a-select v-model:value="refData.fromData.url" placeholder="请选择路由地址">
              <a-select-option v-for="item in refData.menuList" :key="item" :value="item"> {{  item  }}</a-select-option>
            </a-select> -->

            <a-select v-model="refData.fromData.url" :options="refData.menuList"
              :field-names="{ value: 'item', label: 'item' }" placeholder="请选择路由地址" allow-clear />

          </a-form-item>


          <a-form-item v-if="isUrlView" label="权限标识">
            <div class="flex-col-body">
              <a-form-item v-for="(item, index) in refData.fromData.permsArr" :key="index">
                <a-input v-model="item.name" placeholder="名称" />
                <a-input v-model="item.perms" style="margin-left: 1rem" placeholder="请输入权限标识" />
                <div class="flex-row-icon">
                  <icon-close-circle-fill v-if="refData.fromData.permsArr.length > 1"
                    @click="refData.fromData.permsArr.splice(index, 1)" />
                  <icon-plus-circle-fill v-if="refData.fromData.permsArr.length - 1 === index"
                    class="icon-plus-circle-fill" @click="
                      refData.fromData.permsArr.push({
                        menuName: '',
                        perms: '',
                      })
                      " />
                </div>
              </a-form-item>
            </div>
          </a-form-item>


          <a-form-item v-if="isUrlView" name="refresh" label="缓存">
            <a-switch v-model:checked="refData.fromData.refresh" checked-value="1" unchecked-value="0">
              <template #checked> ON </template>
              <template #unchecked> OFF </template>
            </a-switch>
          </a-form-item>

          <a-form-item name="sortNumber" label="序号" :rules="[{ required: true, message: '请输入序号' }]"
            :validate-trigger="['change', 'input', 'blur']">
            <a-input-number v-model="refData.fromData.sortNumber" :min="0" />
          </a-form-item>

          <a-form-item>
            <div class="modal-footer">
              <a-button type="primary" size="large" html-type="submit">确定</a-button>
              <a-button size="large" @click="evCancel"> 取消</a-button>
            </div>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>

    <a-modal v-model:visible="refData.visibleIcon" simple :footer="false">
      <div class="font-view">
        <div v-for="(item, index) in refData.iconfontArr" :key="index" class="icon-box">
          <svg-icon :icon="item.font_class" :class="{
            icon: true,
            'icon-active': item.font_class === refData.fromData.icon,
          }" @click="evOnIconName(item.font_class)" />
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { onMounted, reactive, computed, ref, watch } from "vue";

import { useRoute } from "vue-router";
import { Message, Notification } from '@arco-design/web-vue'
import MonacoEditor from "@/components/MonacoEditor/index.vue"
import iconsvgJson from "@/assets/iconsvg/iconfont.json";
import { useLangStore } from '@/store/modules/langStore'
import { getParseLang } from '@/utils'
import _ from "lodash";
import { columns } from './config'
import { systemSetMenu, systemFinMenuAll, systemDeleteMenu, systemUpdateMenu } from "@/api/path/system.api"
import { useSystemStore } from '@/store/modules/systemStore'

const route = useRoute();
const lang = useLangStore()
const systemStore = useSystemStore()


const refData = reactive({
  visible: false,
  visibleIcon: false,
  dataSource: [],
  fromData: {
    name: "",
    parentId: undefined,
    menuId: undefined,
    type: "0",
    url: "",
    sortNumber: 99,
    refresh: 0,
    permsArr: [{ name: "", perms: "" }],
  },
  menuTree: [],
  menuList: [],
  iconfontArr: []
});
const menuTreeList = ref([])

const isUrlView = computed(() => {
  // if (refData.fromData.menuId) {
  //   const obj =  menuTreeList.value.find(item => item.id == refData.fromData.menuId)
  //   return refData.fromData.menuId && ["1", "2"].includes(obj.type);
  // }
  // return false;
  return true;
});

const fnTreeData = (data) => {
  return data.map((item) => {
    if (item.children && item.children.length > 0 && item.type !== "3") {
      item.children = item.children.sort((a, b) => {
        if (a.sortNumber === b.sortNumber) {
          return a.id - b.id;
        }
        return a.sortNumber - b.sortNumber;
      });
      item.children = fnTreeData(item.children);
    }
    if (item.type === '2') {
      item.permsArr = item.children;
      Reflect.deleteProperty(item, "children");
    }
    return item;
  });
};

const fnDeleteTreeSon = (data) => {
  return data.filter((item) => {
    item.name = getParseLang(item.name, lang.getLang)
    Reflect.deleteProperty(item, 'icon')
    if (item.children && item.children.length > 0) {
      item.children = fnDeleteTreeSon(item.children);
    }
    return ["1"].includes(item.type);
  });
};

const fnGetFormData = async () => {
  const arr = [];
  const comp = import.meta.glob("../../../views/**/index.vue");
  if (comp) {
    Object.keys(comp).forEach((key) => {
      arr.push(`${comp[key]}`.replace(/^.*import\("\/src\/([^?"]+).*$/, '$1'));
    });
    arr.push("views/system/menu/index.vue")
    refData.menuList = arr
  }
};

const evCancel = () => {
  refData.visibleIcon = false;
  refData.visible = false;
};

const evInitData = async () => {
  evCancel();
  const { data } = await systemFinMenuAll();
  const arr = fnTreeData(_.cloneDeep(data));
  refData.dataSource = arr
  refData.menuTree = fnDeleteTreeSon(_.cloneDeep(data));
  menuTreeList.value = fnGetTreeList(_.cloneDeep(data))
};


const fnGetTreeList = (data) => {
  return data.reduce((iter, val) => {
    if (["1"].includes(val.type)) {
      iter.push(val);
    }
    return val.children ? [...iter, ...fnGetTreeList(val.children)] : iter;
  }, []);
};

const evEdit = async (data) => {
  refData.fromData = data;
  if (!data.permsArr || data.permsArr.length == 0) {
    refData.fromData.permsArr = [{ name: "", perms: "" }]
  }
  refData.visible = true;
};

const evHandleSubmit = async (values) => {
  const data = JSON.parse(JSON.stringify(values));
  data.type = "1"
  if (data.url) data.type = "2";
  if (data.id) {
    await systemUpdateMenu(data)
  } else {
    await systemSetMenu(data);
  }
  evInitData();
};

const evDelete = async (id) => {
  await systemDeleteMenu({ id });
  evInitData();
};

const evAddMenu = async () => {
  refData.fromData = {
    name: `{
  "zh-CN": "",
  "en-US": "",
  "th-TH": ""
}`,
    permsArr: [{ name: "", perms: "" }]
  };
  try {
    await fnGetFormData();
  } catch (e) {
    //
  }
  refData.visible = true;
};

const evIconModal = async () => {
  refData.iconfontArr = iconsvgJson.glyphs.filter((item) => {
    return ["menu", "Dh"].includes(item.font_class.split("-")[0]);
  });
  refData.visibleIcon = true;
};

const evOnIconName = (item) => {
  refData.fromData.icon = item;
  refData.fromData = { ...refData.fromData };
  refData.visibleIcon = false;
  Message.success({
    content: `选中  ${item}`,
    duration: 2000,
  });
};

// 上传
const customRequest = async (option) => {
  const { file } = option.fileItem;
  // 上传
  const fileName = `thumbnail_${file.name}`
  const key = `test/${fileName}`

  const client = await systemStore.getSTSClient()
  const resClient = await client.putObject({
    key: key,
    body: file
  })

  if (resClient.statusCode === 200) {
    console.log('上传成功')
    console.log("resClient=", resClient)
  }

};

onMounted(() => {
  evInitData()

});
</script>

<style scoped lang="less">
.head-title {
  display: flex;
  justify-content: space-between;
  .fn-headTitleDiv();
  padding: 0.5rem 0;
}

.table {
  margin-top: 1.5rem;

  .tag-name {
    margin: 0.2rem;
  }

  .icon {
    font-size: 20px;
  }
}

.icon-append {
  &:hover {
    cursor: pointer;
  }
}

:deep(.arco-col-19) {
  flex: none !important;
  width: 340px !important;
}

.form-box {
  padding-left: 4rem;

  .flex-col-body {
    display: flex;
    flex-direction: column;

    .flex-row-icon {
      min-width: 35px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-left: 10px;

      .icon-plus-circle-fill {
        font-size: 16px;
        margin-left: 0.5rem;

        // color: @orange_1;
        &:hover {
          cursor: pointer;
          transform: scale(1.4);
          // color: @blue_0;
        }
      }

      svg:hover {
        cursor: pointer;
        transform: scale(1.4);
        // color: @red_0;
      }
    }
  }
}

.modal-footer {
  width: 150px;
  margin: 0 auto 16px auto;
  display: flex;
  justify-content: space-between;
}

.font-view {
  display: flex;
  flex-wrap: wrap;

  .icon-box {
    width: 30px;
    height: 30px;
    margin: 10px;

    .icon {
      width: 100%;
      height: 100%;
      font-size: 100px;
      transform: scale(1, 1);
      animation: mymove 1s;
      animation-fill-mode: forwards;
      color: #9696a0;
      cursor: pointer;

      &:hover,
      &.icon-active {
        background: #dbdbf3;
        transform: scale(1, 1);
        animation: mymove2 1s;
        animation-fill-mode: forwards;
      }
    }
  }
}

@keyframes mymove {
  0% {
    transform: scale(1, 1);
  }

  50% {
    transform: scale(1.2, 1.2);
  }

  100% {
    transform: scale(1.1, 1.1);
  }
}

@keyframes mymove2 {
  0% {
    transform: scale(1, 1);
  }

  50% {
    transform: scale(1.3, 1.3);
  }

  100% {
    transform: scale(1.1, 1.1);
  }
}
</style>