@utogether/udp-core 2.0.0-beta.1 → 2.0.0-beta.4

package/src/views/uhome/components/menu-favorite.vue

@@ -1,315 +1,315 @@
-<template>
-  <vxe-modal
-    v-model="showModal"
-    :loading="loading"
-    width="75%"
-    height="80%"
-    title="常用菜单设置(拖动可改变菜单顺序)"
-    class-name="u-favorite-modal"
-    show-footer
-    @close="onClose"
-  >
-    <template #default>
-      <div class="">
-        <el-scrollbar heigth="100" class="w-full border-b border-slate-300">
-          <template #default>
-            <div class="w-full h-24">
-              <el-empty v-if="!favoriteMenus.length" :image-size="50" description="" class="p-0" />
-              <draggable
-                :list="favoriteMenus"
-                handle=".drag-item"
-                animation="300"
-                item-key="id"
-                class="flex"
-                @end="onMoveEnd"
-              >
-                <template #item="{ element, index }">
-                  <div class="">
-                    <div
-                      class="h-24 w-24 flex justify-center items-center flex-col relative drag-item ut-menu-top-item"
-                    >
-                      <div
-                        class="rounded-full w-10 h-10 flex items-center justify-center"
-                        :style="{ backgroundColor: getColor(index) }"
-                      >
-                        <iconify-icon-offline
-                          :icon="element.icon || `ri:${icons[index]}-line`"
-                          class="text-2xl text-white"
-                        />
-                      </div>
-                      <span class="w-[90%] text-xs mt-2 text-ellipsis overflow-hidden whitespace-nowrap text-center">
-                        {{ element.menuName }}
-                      </span>
-                      <i
-                        class="ri-indeterminate-circle-line right-3 top-2 text-base hidden ut-menu-del"
-                        @click="onRemoveFavorite(element, index)"
-                      />
-                    </div>
-                  </div>
-                </template>
-              </draggable>
-            </div>
-          </template>
-        </el-scrollbar>
-        <el-scrollbar class="u-favorite-menu--contain">
-          <template #default>
-            <div class="p-3 pb-14" style="padding-bottom: 54px">
-              <div v-for="menu in menuList" :key="menu.id" class="grandparent-node">
-                <div class="flex items-center">
-                  <div class="w-2 h-4 bg-green-400" />
-                  <div class="ml-1 font-bold text-base">{{ menu.menuName }}</div>
-                </div>
-                <div class="pl-3 py-2">
-                  <vxe-checkbox-group v-model="checkboxModel[menu.id]" @change="onChange(menu, $event)">
-                    <vxe-checkbox
-                      v-for="item in handleMenuCategoryGroup(menu).menus"
-                      :key="item.id"
-                      :label="item.id"
-                      :content="item.menuName"
-                    />
-                  </vxe-checkbox-group>
-                </div>
-                <div v-for="item in handleMenuCategoryGroup(menu).folder" :key="item.id" class="parent-node pl-3">
-                  <div class="flex items-center">
-                    <div class="w-2 h-4 bg-blue-400" />
-                    <div class="ml-1 font-bold text-sm">{{ item.menuName }}</div>
-                  </div>
-
-                  <div class="pl-3 py-2">
-                    <vxe-checkbox-group v-model="checkboxModel[item.id]" @change="onChange(item, $event)">
-                      <vxe-checkbox
-                        v-for="child in handleMenuCategoryGroup(item).menus"
-                        :key="child.id"
-                        :label="child.id"
-                        :content="child.menuName"
-                      />
-                    </vxe-checkbox-group>
-                  </div>
-                  <div v-for="child in handleMenuCategoryGroup(item).folder" :key="child.id" class="child-node pl-3">
-                    <div class="flex items-center">
-                      <div class="w-2 h-4 bg-red-400" />
-                      <div class="ml-1 font-bold text-sm">{{ child.menuName }}</div>
-                    </div>
-
-                    <div class="py-2">
-                      <vxe-checkbox-group v-model="checkboxModel[child.id]" @change="onChange(item, $event)">
-                        <vxe-checkbox
-                          v-for="subChild in handleMenuCategoryGroup(child).menus"
-                          :key="subChild.id"
-                          :label="subChild.id"
-                          :content="subChild.menuName"
-                        />
-                      </vxe-checkbox-group>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </template>
-        </el-scrollbar>
-      </div>
-    </template>
-    <template #footer>
-      <div class="flex justify-end">
-        <ut-button content="cancel" status="warning" @tap="onClose" />
-        <ut-button content="confirm" @tap="onConfirm" />
-      </div>
-    </template>
-  </vxe-modal>
-</template>
-<script setup lang="ts">
-import { ref, onMounted, nextTick } from 'vue';
-import { clone, max } from 'xe-utils';
-import { dbstorage, delay, warnMessage, successMessage } from '@utogether/utils';
-import Draggable from 'vuedraggable';
-import { getServiceApi } from '../../../api';
-
-interface IProps {
-  dataSource: IRecord[];
-  icons: Array<String>;
-  userName: string;
-}
-
-const props = withDefaults(defineProps<IProps>(), {
-  dataSource: () => [],
-  icons: () => [],
-  userName: ''
-});
-
-// 用户菜单
-const favoriteMenus = ref([]);
-const menuList = ref([]);
-const showModal = ref(false);
-const loading = ref(false);
-const checkboxModel = ref<IRecord>({});
-// const cacheCheckModel = {}; // 缓存最初选中的数据
-
-const url = '/upfm/v1/menuFavority';
-
-const getCacheMenuList = async () => {
-  menuList.value = await dbstorage.getItem(`U-${props.userName}-ROUTES`);
-  menuList.value = menuList.value.filter(f => f.menuCode !== 'SysHome');
-  await delay(64);
-  setCheckboxedMenu();
-};
-
-/** 上部删除 */
-const onRemoveFavorite = (item, idx) => {
-  favoriteMenus.value.splice(idx, 1);
-  const index = checkboxModel.value[item.parentId]?.findIndex(f => f === item.menuId);
-  checkboxModel.value[item.parentId].splice(index, 1);
-  // index = cacheCheckModel[item.parentId]?.findIndex(f => f.id === item.id);
-  // cacheCheckModel[item.parentId].splice(index, 1);
-};
-
-/** 菜单分组 */
-const handleMenuCategoryGroup = data => {
-  const folder = [];
-  const menus = [];
-  data.children.forEach(e => {
-    if (['5', '100'].includes(e.menuCategory)) {
-      folder.push(e);
-    } else {
-      menus.push(e);
-    }
-  });
-  return { folder, menus };
-};
-
-/** 设置默认选中 */
-const setCheckboxedMenu = () => {
-  props.dataSource.forEach(data => {
-    if (checkboxModel.value[data.parentId]) {
-      checkboxModel.value[data.parentId].push(data.menuId);
-      // cacheCheckModel[data.parentId].push(data);
-    } else {
-      checkboxModel.value[data.parentId] = [data.menuId];
-      // cacheCheckModel[data.parentId] = [data];
-    }
-  });
-};
-/** checkbox change */
-const onChange = (menu, event) => {
-  if (event.checked) {
-    // 新增
-    if (favoriteMenus.value.length === 16) {
-      nextTick(() => {
-        checkboxModel.value[menu.id].splice(checkboxModel.value[menu.id].length - 1, 1);
-      });
-      return warnMessage('最多只能选择16个常用功能');
-    }
-    // const max = getMax();
-    // if (cacheCheckModel[menu.id]) {
-    //   cacheCheckModel[menu.id].push({ id: event.label, seqNo: max + 10 });
-    // } else {
-    //   cacheCheckModel[menu.id] = [{ id: event.label, seqNo: max + 10 }];
-    // }
-
-    const menuItem = menu.children.find(f => f.id === event.label);
-    if (menuItem) {
-      menuItem.seqNo = getMax() + 10;
-      menuItem.menuId = menuItem.id;
-      favoriteMenus.value.push(menuItem);
-    }
-  } else {
-    // 顶部删除
-    let idx = favoriteMenus.value.findIndex(f => f.menuId === event.label);
-    idx !== -1 && favoriteMenus.value.splice(idx, 1);
-    // checkbox删除
-    idx = checkboxModel.value[menu.id].findIndex(f => f === event.label);
-    idx !== -1 && checkboxModel.value[menu.id].splice(idx, 1);
-    // 缓存删除
-    // idx = cacheCheckModel[menu.id].findIndex(f => f.id === event.label);
-    // idx !== -1 && cacheCheckModel[menu.id].splice(idx, 1);
-  }
-};
-const onMoveEnd = () => {
-  favoriteMenus.value.forEach((item, idx) => {
-    item.seqNo = (idx + 1) * 10;
-    console.log('seqNo=', item.seqNo);
-  });
-};
-/** 获取排序最大值 */
-const getMax = () => {
-  return max(favoriteMenus.value, item => item.seqNo)?.seqNo || 0;
-};
-const onConfirm = () => {
-  console.log(favoriteMenus);
-  const body = favoriteMenus.value.map((m, idx) => {
-    return {
-      userName: props.userName,
-      menuId: m.menuId,
-      seqNo: 10 * (idx + 1)
-    };
-  });
-  console.log(body);
-  loading.value = true;
-  getServiceApi()
-    .post(url, body)
-    .then(() => {
-      successMessage();
-      onClose();
-      emit('success');
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-};
-
-const onClose = () => {
-  showModal.value = false;
-  emit('close');
-};
-
-const getColor = idx => {
-  const colorSet = ['#409eff', '#67c23a', '#13c2c2', '#e85f33', 'orange'];
-  return colorSet[idx % 5];
-};
-
-const emit = defineEmits<{ (e: 'close'): void; (e: 'success'): void }>();
-
-onMounted(() => {
-  favoriteMenus.value = clone(props.dataSource, true);
-  showModal.value = true;
-  getCacheMenuList();
-});
-</script>
-<style lang="scss">
-.u-favorite-modal {
-  .vxe-modal--body .vxe-modal--content {
-    padding: 0;
-    overflow: hidden !important;
-  }
-
-  .el-empty {
-    &__description {
-      margin-top: 10px;
-    }
-  }
-
-  .ut-menu-top-item:hover {
-    .ut-menu-del {
-      position: absolute;
-      display: inline-block;
-      color: rgb(240 94 94);
-      cursor: pointer;
-    }
-  }
-
-  .u-favorite-menu--contain {
-    height: calc(100vh - 320px);
-  }
-
-  .vxe-checkbox,
-  .vxe-checkbox + .vxe-checkbox {
-    width: 120px;
-    padding: 4px 0;
-    margin-right: 10px;
-    margin-left: 0;
-  }
-
-  .vxe-modal--footer {
-    border-top: 1px solid #e8e8e8;
-  }
-}
-</style>
+<template>
+  <vxe-modal
+    v-model="showModal"
+    :loading="loading"
+    width="75%"
+    height="80%"
+    title="常用菜单设置(拖动可改变菜单顺序)"
+    class-name="u-favorite-modal"
+    show-footer
+    @close="onClose"
+  >
+    <template #default>
+      <div class="">
+        <el-scrollbar heigth="100" class="w-full border-b border-slate-300">
+          <template #default>
+            <div class="w-full h-24">
+              <el-empty v-if="!favoriteMenus.length" :image-size="50" description="" class="p-0" />
+              <draggable
+                :list="favoriteMenus"
+                handle=".drag-item"
+                animation="300"
+                item-key="id"
+                class="flex"
+                @end="onMoveEnd"
+              >
+                <template #item="{ element, index }">
+                  <div class="">
+                    <div
+                      class="h-24 w-24 flex justify-center items-center flex-col relative drag-item ut-menu-top-item"
+                    >
+                      <div
+                        class="rounded-full w-10 h-10 flex items-center justify-center"
+                        :style="{ backgroundColor: getColor(index) }"
+                      >
+                        <iconify-icon-offline
+                          :icon="element.icon || `ri:${icons[index]}-line`"
+                          class="text-2xl text-white"
+                        />
+                      </div>
+                      <span class="w-[90%] text-xs mt-2 text-ellipsis overflow-hidden whitespace-nowrap text-center">
+                        {{ element.menuName }}
+                      </span>
+                      <i
+                        class="ri-indeterminate-circle-line right-3 top-2 text-base hidden ut-menu-del"
+                        @click="onRemoveFavorite(element, index)"
+                      />
+                    </div>
+                  </div>
+                </template>
+              </draggable>
+            </div>
+          </template>
+        </el-scrollbar>
+        <el-scrollbar class="u-favorite-menu--contain">
+          <template #default>
+            <div class="p-3 pb-14" style="padding-bottom: 54px">
+              <div v-for="menu in menuList" :key="menu.id" class="grandparent-node">
+                <div class="flex items-center">
+                  <div class="w-2 h-4 bg-green-400" />
+                  <div class="ml-1 font-bold text-base">{{ menu.menuName }}</div>
+                </div>
+                <div class="pl-3 py-2">
+                  <vxe-checkbox-group v-model="checkboxModel[menu.id]" @change="onChange(menu, $event)">
+                    <vxe-checkbox
+                      v-for="item in handleMenuCategoryGroup(menu).menus"
+                      :key="item.id"
+                      :label="item.id"
+                      :content="item.menuName"
+                    />
+                  </vxe-checkbox-group>
+                </div>
+                <div v-for="item in handleMenuCategoryGroup(menu).folder" :key="item.id" class="parent-node pl-3">
+                  <div class="flex items-center">
+                    <div class="w-2 h-4 bg-blue-400" />
+                    <div class="ml-1 font-bold text-sm">{{ item.menuName }}</div>
+                  </div>
+
+                  <div class="pl-3 py-2">
+                    <vxe-checkbox-group v-model="checkboxModel[item.id]" @change="onChange(item, $event)">
+                      <vxe-checkbox
+                        v-for="child in handleMenuCategoryGroup(item).menus"
+                        :key="child.id"
+                        :label="child.id"
+                        :content="child.menuName"
+                      />
+                    </vxe-checkbox-group>
+                  </div>
+                  <div v-for="child in handleMenuCategoryGroup(item).folder" :key="child.id" class="child-node pl-3">
+                    <div class="flex items-center">
+                      <div class="w-2 h-4 bg-red-400" />
+                      <div class="ml-1 font-bold text-sm">{{ child.menuName }}</div>
+                    </div>
+
+                    <div class="py-2">
+                      <vxe-checkbox-group v-model="checkboxModel[child.id]" @change="onChange(item, $event)">
+                        <vxe-checkbox
+                          v-for="subChild in handleMenuCategoryGroup(child).menus"
+                          :key="subChild.id"
+                          :label="subChild.id"
+                          :content="subChild.menuName"
+                        />
+                      </vxe-checkbox-group>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-scrollbar>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex justify-end">
+        <ut-button content="cancel" status="warning" @tap="onClose" />
+        <ut-button content="confirm" @tap="onConfirm" />
+      </div>
+    </template>
+  </vxe-modal>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from 'vue';
+import { clone, max } from 'xe-utils';
+import { dbstorage, delay, warnMessage, successMessage } from '@utogether/utils';
+import Draggable from 'vuedraggable';
+import { getServiceApi } from '../../../api';
+
+interface IProps {
+  dataSource: IRecord[];
+  icons: Array<String>;
+  userName: string;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  dataSource: () => [],
+  icons: () => [],
+  userName: ''
+});
+
+// 用户菜单
+const favoriteMenus = ref([]);
+const menuList = ref([]);
+const showModal = ref(false);
+const loading = ref(false);
+const checkboxModel = ref<IRecord>({});
+// const cacheCheckModel = {}; // 缓存最初选中的数据
+
+const url = '/upfm/v1/menuFavority';
+
+const getCacheMenuList = async () => {
+  menuList.value = await dbstorage.getItem(`U-${props.userName}-ROUTES`);
+  menuList.value = menuList.value.filter(f => f.menuCode !== 'SysHome');
+  await delay(64);
+  setCheckboxedMenu();
+};
+
+/** 上部删除 */
+const onRemoveFavorite = (item, idx) => {
+  favoriteMenus.value.splice(idx, 1);
+  const index = checkboxModel.value[item.parentId]?.findIndex(f => f === item.menuId);
+  checkboxModel.value[item.parentId].splice(index, 1);
+  // index = cacheCheckModel[item.parentId]?.findIndex(f => f.id === item.id);
+  // cacheCheckModel[item.parentId].splice(index, 1);
+};
+
+/** 菜单分组 */
+const handleMenuCategoryGroup = data => {
+  const folder = [];
+  const menus = [];
+  data.children.forEach(e => {
+    if (['5', '100'].includes(e.menuCategory)) {
+      folder.push(e);
+    } else {
+      menus.push(e);
+    }
+  });
+  return { folder, menus };
+};
+
+/** 设置默认选中 */
+const setCheckboxedMenu = () => {
+  props.dataSource.forEach(data => {
+    if (checkboxModel.value[data.parentId]) {
+      checkboxModel.value[data.parentId].push(data.menuId);
+      // cacheCheckModel[data.parentId].push(data);
+    } else {
+      checkboxModel.value[data.parentId] = [data.menuId];
+      // cacheCheckModel[data.parentId] = [data];
+    }
+  });
+};
+/** checkbox change */
+const onChange = (menu, event) => {
+  if (event.checked) {
+    // 新增
+    if (favoriteMenus.value.length === 16) {
+      nextTick(() => {
+        checkboxModel.value[menu.id].splice(checkboxModel.value[menu.id].length - 1, 1);
+      });
+      return warnMessage('最多只能选择16个常用功能');
+    }
+    // const max = getMax();
+    // if (cacheCheckModel[menu.id]) {
+    //   cacheCheckModel[menu.id].push({ id: event.label, seqNo: max + 10 });
+    // } else {
+    //   cacheCheckModel[menu.id] = [{ id: event.label, seqNo: max + 10 }];
+    // }
+
+    const menuItem = menu.children.find(f => f.id === event.label);
+    if (menuItem) {
+      menuItem.seqNo = getMax() + 10;
+      menuItem.menuId = menuItem.id;
+      favoriteMenus.value.push(menuItem);
+    }
+  } else {
+    // 顶部删除
+    let idx = favoriteMenus.value.findIndex(f => f.menuId === event.label);
+    idx !== -1 && favoriteMenus.value.splice(idx, 1);
+    // checkbox删除
+    idx = checkboxModel.value[menu.id].findIndex(f => f === event.label);
+    idx !== -1 && checkboxModel.value[menu.id].splice(idx, 1);
+    // 缓存删除
+    // idx = cacheCheckModel[menu.id].findIndex(f => f.id === event.label);
+    // idx !== -1 && cacheCheckModel[menu.id].splice(idx, 1);
+  }
+};
+const onMoveEnd = () => {
+  favoriteMenus.value.forEach((item, idx) => {
+    item.seqNo = (idx + 1) * 10;
+    console.log('seqNo=', item.seqNo);
+  });
+};
+/** 获取排序最大值 */
+const getMax = () => {
+  return max(favoriteMenus.value, item => item.seqNo)?.seqNo || 0;
+};
+const onConfirm = () => {
+  console.log(favoriteMenus);
+  const body = favoriteMenus.value.map((m, idx) => {
+    return {
+      userName: props.userName,
+      menuId: m.menuId,
+      seqNo: 10 * (idx + 1)
+    };
+  });
+  console.log(body);
+  loading.value = true;
+  getServiceApi()
+    .post(url, body)
+    .then(() => {
+      successMessage();
+      onClose();
+      emit('success');
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+
+const onClose = () => {
+  showModal.value = false;
+  emit('close');
+};
+
+const getColor = idx => {
+  const colorSet = ['#409eff', '#67c23a', '#13c2c2', '#e85f33', 'orange'];
+  return colorSet[idx % 5];
+};
+
+const emit = defineEmits<{ (e: 'close'): void; (e: 'success'): void }>();
+
+onMounted(() => {
+  favoriteMenus.value = clone(props.dataSource, true);
+  showModal.value = true;
+  getCacheMenuList();
+});
+</script>
+<style lang="scss">
+.u-favorite-modal {
+  .vxe-modal--body .vxe-modal--content {
+    padding: 0;
+    overflow: hidden !important;
+  }
+
+  .el-empty {
+    &__description {
+      margin-top: 10px;
+    }
+  }
+
+  .ut-menu-top-item:hover {
+    .ut-menu-del {
+      position: absolute;
+      display: inline-block;
+      color: rgb(240 94 94);
+      cursor: pointer;
+    }
+  }
+
+  .u-favorite-menu--contain {
+    height: calc(100vh - 320px);
+  }
+
+  .vxe-checkbox,
+  .vxe-checkbox + .vxe-checkbox {
+    width: 120px;
+    padding: 4px 0;
+    margin-right: 10px;
+    margin-left: 0;
+  }
+
+  .vxe-modal--footer {
+    border-top: 1px solid #e8e8e8;
+  }
+}
+</style>