wui-components-v2 1.1.69 → 1.1.71

package/components/wui-menus/wui-menus.vue

@@ -1,247 +1,247 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-import { computed, defineOptions, defineProps, ref } from 'vue'
-import { useRouter } from 'uni-mini-router'
-import { onShow } from '@dcloudio/uni-app'
-import { menu } from '../../api/menu'
-import DemoCard from '../demo-card/demo-card.vue'
-import { useManualTheme } from '../../composables/useManualTheme'
-import { useGlobalToast } from '../../composables/useGlobalToast'
-import { useColorGenerator } from '../../composables/useColorGenerator'
-import { desaturateColor } from '../../utils'
-import wuiMenusTop from './wui-menus-top.vue'
-
-defineOptions({
-  name: 'WuiMenus',
-})
-const props = defineProps({
-  icons: {
-    type: Array as PropType<Icon[]>,
-    default: () => [],
-  },
-  load: {
-    type: Function as PropType<() => void>,
-    default: () => {},
-  },
-  menuTopType: {
-    type: String,
-    default: '',
-  },
-})
-// const user = useUser().getUserInfo()
-const router = useRouter()
-const toast = useGlobalToast()
-interface Icon {
-  id: string
-  path: string
-}
-const { currentThemeColor } = useManualTheme()
-const { generateRandomColor } = useColorGenerator(currentThemeColor.value.primary)
-const menuList = ref([])
-const title = ref('')
-const filtermenu = computed(() => {
-  let arr = []
-  if (currentThemeColor.value.primary) {
-    arr = filterHiddenTree(menuList.value, 'items', true)
-  }
-  return arr
-})
-const sheetShow = ref(false)
-const actions = ref([])
-const paging = ref()
-// 点击菜单跳转页面
-function gotoPage(item: any) {
-  // 跳转页面
-  if (goto(item)) return
-  // 打开动作面板
-  openSheet(item)
-}
-
-// 点击动作面板跳转页面
-function sheetGotoPage(item: any) {
-  // 跳转页面
-  if (goto(item)) return
-  // 打开动作面板
-  openSheet(item, 300)
-}
-
-// 跳转页面
-function goto(item: any) {
-  console.log(item.pageType)
-  switch (item.pageType) {
-    case '列表':
-      router.push(`/pages/list/index?sourceId=${item.id}&title=${item.title}`)
-      return true
-    case '树':
-      router.push(`/pages/tree-page/index?sourceId=${item.id}&title=${item.title}`)
-      return true
-    case '报表':
-      // uni.navigateTo({
-      //   url: `/pages/report-table/report-table?sourceId=${item.id}&title=${item.title}`,
-      // })
-      return true
-
-    default:
-      return false
-  }
-}
-
-// 打开wd-action-sheet动作面板
-function openSheet(item: any, s = 0) {
-  if (item.items) {
-    title.value = item.title
-    actions.value = item.items
-      ? item.items.map((item: any) => {
-          return {
-            name: item.title,
-            // color: '#00000073',
-            ...item,
-          }
-        })
-      : []
-
-    // 设置二次打开的过渡时间
-    const id = setTimeout(() => {
-      sheetShow.value = true
-      clearTimeout(id)
-    }, s)
-  }
-}
-
-/**
- * 根据 `disabled: true` 过滤树形数组（支持自定义子节点字段）
- * @param {Array} tree 原始树形数据
- * @param {string} [childKey] 子节点字段名
- * @param {boolean} [deepClone] 是否深拷贝原数据
- * @returns {Array} 过滤后的新树形数据
- */
-function filterHiddenTree(tree: any, childKey = 'children', deepClone = false) {
-  // 深拷贝处理（可选）
-  const clone = (data: any) => {
-    if (!deepClone) return data
-    return JSON.parse(JSON.stringify(data))
-  }
-
-  return clone(tree)
-    .filter((node: any) => !node.disabled) // 过滤当前层隐藏节点
-    .map((node: any) => {
-      // 递归处理子节点
-      if (Array.isArray(node[childKey])) {
-        node[childKey] = filterHiddenTree(node[childKey], childKey, deepClone)
-      }
-      const icon = props.icons.find((item: any) => {
-        return item.id === node.id
-      })
-      return {
-        ...node,
-        iconPath: (icon as any)?.path,
-        color: generateRandomColor().hex,
-      }
-    })
-}
-onShow(() => {
-  // if (paging.value) {
-  //   paging.value.reload()
-  // }
-})
-// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
-function queryList() {
-  // 此处请求仅为演示，请替换为自己项目中的请求
-  menu()
-    .then((res: any) => {
-      // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
-      if (!res?.blocks.length) {
-        toast.warning('暂无权限，请重新登录或联系管理员')
-      }
-      uni.setNavigationBarTitle({ title: res?.programName || '' }) // 设置标题
-      paging.value.complete(res?.blocks || [])
-    })
-    .catch((res: any) => {
-      // 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
-      // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
-      // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
-      console.log(res, 'menu error')
-      paging.value.complete(false)
-    })
-}
-</script>
-
-<template>
-  <z-paging ref="paging" v-model="menuList" :loading-more-enabled="false" @query="queryList" @on-refresh="props.load">
-    <template #top>
-      <slot name="top" :style="{ background: currentThemeColor.primary }" />
-    </template>
-    <view>
-      <wuiMenusTop v-if="props.menuTopType !== '自定义'" />
-      <view v-if="props.menuTopType === '自定义'" class="p-1" />
-      <DemoCard v-for="(item, index) in filtermenu" :key="index" :title="item.title">
-        <template #content>
-          <view class="border-rd-2 bg-white pa-1 dark:bg-[var(--wot-dark-background2)]">
-            <wd-grid :column="4" clickable>
-              <wd-grid-item
-                v-for="(subItem, subIndex) in item.items"
-                :key="subIndex"
-                use-text-slot
-                use-icon-slot
-                @itemclick="gotoPage(subItem)"
-              >
-                <template #icon>
-                  <view
-                    class="flex items-center justify-center rounded-2"
-                    :style="{ backgroundColor: desaturateColor(subItem.color, 0.25), height: '80rpx', width: '80rpx' }"
-                  >
-                    <!-- <text class="i-carbon:chart-combo-stacked text-center text-5"
-                      :class="[props.icons.find(item => item.id === subItem.id)?.path]"
-                      :style="{ color:desaturateColor(subItem.color,0.5) }" /> -->
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" width="80" height="80" viewBox="0 0 80 80">
-                      <g fill="none" stroke-linecap="round" stroke-width="4">
-                        <rect width="24" height="24" x="12" y="12" fill="#9b51e0" stroke="#9b51e0" rx="4" />
-                        <rect width="24" height="24" x="44" y="12" fill="#56ccf2" stroke="#56ccf2" rx="4" />
-                        <rect width="24" height="24" x="12" y="44" fill="#56ccf2" stroke="#56ccf2" rx="4" />
-                        <rect width="24" height="24" x="44" y="44" fill="#9b51e0" stroke="#9b51e0" rx="4" />
-                      </g>
-                    </svg>
-                  </view>
-                </template>
-                <template #text>
-                  <view class="pa-1 text-center text-10rpx text-gray-800 dark:text-white">
-                    <view class="line-clamp-1 font-medium">
-                      {{ subItem.title }}
-                    </view>
-                  </view>
-                </template>
-              </wd-grid-item>
-            </wd-grid>
-          </view>
-        </template>
-      </DemoCard>
-      <slot name="listBottom" />
-    </view>
-
-    <template #bottom>
-      <slot name="bottom" />
-    </template>
-  </z-paging>
-  <wd-action-sheet
-    v-model="sheetShow"
-    :z-index="9999"
-    :actions="actions"
-    :title="title"
-    @select="
-      ({ item }) => {
-        sheetGotoPage(item)
-      }
-    "
-  />
-</template>
-
-<style scoped lang="scss">
-//深度样式覆盖
-:deep(.wd-grid-item__wrapper) {
-  width: 50px !important;
-  height: 40px !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { computed, defineOptions, defineProps, ref } from 'vue'
+import { useRouter } from 'uni-mini-router'
+import { onShow } from '@dcloudio/uni-app'
+import { menu } from '../../api/menu'
+import DemoCard from '../demo-card/demo-card.vue'
+import { useManualTheme } from '../../composables/useManualTheme'
+import { useGlobalToast } from '../../composables/useGlobalToast'
+import { useColorGenerator } from '../../composables/useColorGenerator'
+import { desaturateColor } from '../../utils'
+import wuiMenusTop from './wui-menus-top.vue'
+
+defineOptions({
+  name: 'WuiMenus',
+})
+const props = defineProps({
+  icons: {
+    type: Array as PropType<Icon[]>,
+    default: () => [],
+  },
+  load: {
+    type: Function as PropType<() => void>,
+    default: () => {},
+  },
+  menuTopType: {
+    type: String,
+    default: '',
+  },
+})
+// const user = useUser().getUserInfo()
+const router = useRouter()
+const toast = useGlobalToast()
+interface Icon {
+  id: string
+  path: string
+}
+const { currentThemeColor } = useManualTheme()
+const { generateRandomColor } = useColorGenerator(currentThemeColor.value.primary)
+const menuList = ref([])
+const title = ref('')
+const filtermenu = computed(() => {
+  let arr = []
+  if (currentThemeColor.value.primary) {
+    arr = filterHiddenTree(menuList.value, 'items', true)
+  }
+  return arr
+})
+const sheetShow = ref(false)
+const actions = ref([])
+const paging = ref()
+// 点击菜单跳转页面
+function gotoPage(item: any) {
+  // 跳转页面
+  if (goto(item)) return
+  // 打开动作面板
+  openSheet(item)
+}
+
+// 点击动作面板跳转页面
+function sheetGotoPage(item: any) {
+  // 跳转页面
+  if (goto(item)) return
+  // 打开动作面板
+  openSheet(item, 300)
+}
+
+// 跳转页面
+function goto(item: any) {
+  console.log(item.pageType)
+  switch (item.pageType) {
+    case '列表':
+      router.push(`/pages/list/index?sourceId=${item.id}&title=${item.title}`)
+      return true
+    case '树':
+      router.push(`/pages/tree-page/index?sourceId=${item.id}&title=${item.title}`)
+      return true
+    case '报表':
+      // uni.navigateTo({
+      //   url: `/pages/report-table/report-table?sourceId=${item.id}&title=${item.title}`,
+      // })
+      return true
+
+    default:
+      return false
+  }
+}
+
+// 打开wd-action-sheet动作面板
+function openSheet(item: any, s = 0) {
+  if (item.items) {
+    title.value = item.title
+    actions.value = item.items
+      ? item.items.map((item: any) => {
+          return {
+            name: item.title,
+            // color: '#00000073',
+            ...item,
+          }
+        })
+      : []
+
+    // 设置二次打开的过渡时间
+    const id = setTimeout(() => {
+      sheetShow.value = true
+      clearTimeout(id)
+    }, s)
+  }
+}
+
+/**
+ * 根据 `disabled: true` 过滤树形数组（支持自定义子节点字段）
+ * @param {Array} tree 原始树形数据
+ * @param {string} [childKey] 子节点字段名
+ * @param {boolean} [deepClone] 是否深拷贝原数据
+ * @returns {Array} 过滤后的新树形数据
+ */
+function filterHiddenTree(tree: any, childKey = 'children', deepClone = false) {
+  // 深拷贝处理（可选）
+  const clone = (data: any) => {
+    if (!deepClone) return data
+    return JSON.parse(JSON.stringify(data))
+  }
+
+  return clone(tree)
+    .filter((node: any) => !node.disabled) // 过滤当前层隐藏节点
+    .map((node: any) => {
+      // 递归处理子节点
+      if (Array.isArray(node[childKey])) {
+        node[childKey] = filterHiddenTree(node[childKey], childKey, deepClone)
+      }
+      const icon = props.icons.find((item: any) => {
+        return item.id === node.id
+      })
+      return {
+        ...node,
+        iconPath: (icon as any)?.path,
+        color: generateRandomColor().hex,
+      }
+    })
+}
+onShow(() => {
+  // if (paging.value) {
+  //   paging.value.reload()
+  // }
+})
+// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
+function queryList() {
+  // 此处请求仅为演示，请替换为自己项目中的请求
+  menu()
+    .then((res: any) => {
+      // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
+      if (!res?.blocks.length) {
+        toast.warning('暂无权限，请重新登录或联系管理员')
+      }
+      uni.setNavigationBarTitle({ title: res?.programName || '' }) // 设置标题
+      paging.value.complete(res?.blocks || [])
+    })
+    .catch((res: any) => {
+      // 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
+      // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
+      // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
+      console.log(res, 'menu error')
+      paging.value.complete(false)
+    })
+}
+</script>
+
+<template>
+  <z-paging ref="paging" v-model="menuList" :loading-more-enabled="false" @query="queryList" @on-refresh="props.load">
+    <template #top>
+      <slot name="top" :style="{ background: currentThemeColor.primary }" />
+    </template>
+    <view>
+      <wuiMenusTop v-if="props.menuTopType !== '自定义'" />
+      <view v-if="props.menuTopType === '自定义'" class="p-1" />
+      <DemoCard v-for="(item, index) in filtermenu" :key="index" :title="item.title">
+        <template #content>
+          <view class="border-rd-2 bg-white pa-1 dark:bg-[var(--wot-dark-background2)]">
+            <wd-grid :column="4" clickable>
+              <wd-grid-item
+                v-for="(subItem, subIndex) in item.items"
+                :key="subIndex"
+                use-text-slot
+                use-icon-slot
+                @itemclick="gotoPage(subItem)"
+              >
+                <template #icon>
+                  <view
+                    class="flex items-center justify-center rounded-2"
+                    :style="{ backgroundColor: desaturateColor(subItem.color, 0.25), height: '80rpx', width: '80rpx' }"
+                  >
+                    <!-- <text class="i-carbon:chart-combo-stacked text-center text-5"
+                      :class="[props.icons.find(item => item.id === subItem.id)?.path]"
+                      :style="{ color:desaturateColor(subItem.color,0.5) }" /> -->
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" width="80" height="80" viewBox="0 0 80 80">
+                      <g fill="none" stroke-linecap="round" stroke-width="4">
+                        <rect width="24" height="24" x="12" y="12" fill="#9b51e0" stroke="#9b51e0" rx="4" />
+                        <rect width="24" height="24" x="44" y="12" fill="#56ccf2" stroke="#56ccf2" rx="4" />
+                        <rect width="24" height="24" x="12" y="44" fill="#56ccf2" stroke="#56ccf2" rx="4" />
+                        <rect width="24" height="24" x="44" y="44" fill="#9b51e0" stroke="#9b51e0" rx="4" />
+                      </g>
+                    </svg>
+                  </view>
+                </template>
+                <template #text>
+                  <view class="pa-1 text-center text-10rpx text-gray-800 dark:text-white">
+                    <view class="line-clamp-1 font-medium">
+                      {{ subItem.title }}
+                    </view>
+                  </view>
+                </template>
+              </wd-grid-item>
+            </wd-grid>
+          </view>
+        </template>
+      </DemoCard>
+      <slot name="listBottom" />
+    </view>
+
+    <template #bottom>
+      <slot name="bottom" />
+    </template>
+  </z-paging>
+  <wd-action-sheet
+    v-model="sheetShow"
+    :z-index="9999"
+    :actions="actions"
+    :title="title"
+    @select="
+      ({ item }) => {
+        sheetGotoPage(item)
+      }
+    "
+  />
+</template>
+
+<style scoped lang="scss">
+//深度样式覆盖
+:deep(.wd-grid-item__wrapper) {
+  width: 50px !important;
+  height: 40px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>