新增前端vue

web-vue/packages/core/components/Dict/index.ts

@@ -0,0 +1,5 @@
+import { withInstall } from '@jeesite/core/utils';
+import dictLabel from './src/DictLabel.vue';
+
+export * from './src/useDict';
+export const DictLabel = withInstall(dictLabel);

web-vue/packages/core/components/Dict/src/DictLabel.vue

@@ -0,0 +1,87 @@
+<!--
+ * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
+ * No deletion without permission, or be held responsible to law.
+ * @author Think Gem
+-->
+<template>
+  <template v-for="item in dictList" :key="item.id">
+    <span class="jeesite-dict-label">
+      <template v-if="item.cssClass?.startsWith('tag ')">
+        <Tag :color="item.cssClass?.substring(4)?.split(' ')[0]" :title="item.name">
+          <Icon v-if="props.icon && item.icon && item.icon != ''" :icon="item.icon" class="pr-1" />
+          {{ item.name }}
+        </Tag>
+      </template>
+      <template v-else-if="item.cssClass?.startsWith('badge ')">
+        <Icon v-if="props.icon && item.icon && item.icon != ''" :icon="item.icon" class="pr-1" />
+        <Badge
+          :status="
+            item.cssClass.indexOf(' error') >= 0
+              ? 'error'
+              : item.cssClass.indexOf(' success') >= 0
+                ? 'success'
+                : item.cssClass.indexOf(' warning') >= 0
+                  ? 'warning'
+                  : item.cssClass.indexOf(' processing') >= 0
+                    ? 'processing'
+                    : 'default'
+          "
+          :text="item.name"
+          :title="item.name"
+        />
+      </template>
+      <template v-else>
+        <span :class="item.cssClass" :style="item.cssStyle" :title="item.name">
+          <Icon v-if="props.icon && item.icon && item.icon != ''" :icon="item.icon" class="pr-1" />
+          {{ item.name }}
+        </span>
+      </template>
+    </span>
+  </template>
+  <template v-if="dictList.length == 0">
+    <span class="jeesite-dict-label">
+      {{ props.defaultValue || t('未知') }}
+    </span>
+  </template>
+</template>
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { Tag, Badge } from 'ant-design-vue';
+  import { Icon } from '@jeesite/core/components/Icon';
+  import { propTypes } from '@jeesite/core/utils/propTypes';
+  import { useI18n } from '@jeesite/core/hooks/web/useI18n';
+  import { useDict } from './useDict';
+
+  const props = defineProps({
+    dictType: propTypes.string,
+    dictValue: propTypes.any,
+    defaultValue: propTypes.string,
+    icon: propTypes.bool.def(true),
+  });
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const { t } = useI18n();
+  const { getDictList } = useDict();
+
+  const dictList = ref<any[]>([]);
+  const { initDict } = useDict();
+  initDict([props.dictType]);
+
+  watch(
+    () => props.dictValue,
+    () => {
+      dictList.value = getDictList(props.dictType).filter((item) =>
+        (',' + props.dictValue + ',').includes(',' + item.value + ','),
+      );
+    },
+    { immediate: true },
+  );
+</script>
+<style lang="less">
+  .jeesite-dict-label {
+    padding: 0 2px;
+  }
+</style>

web-vue/packages/core/components/Dict/src/useDict.ts

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
+ * No deletion without permission, or be held responsible to law.
+ * @author ThinkGem
+ */
+import { Ref } from 'vue';
+import { isEmpty } from '@jeesite/core/utils/is';
+import { useI18n } from '@jeesite/core/hooks/web/useI18n';
+import { dictDataTreeData } from '@jeesite/core/api/sys/dictData';
+import { useUserStore } from '@jeesite/core/store/modules/user';
+import { listToTree } from '@jeesite/core/utils/helper/treeHelper';
+
+const { t } = useI18n();
+const userStore = useUserStore();
+
+export function useDict() {
+  const dictListMap = userStore.getPageCacheByKey('dictListMap', {});
+
+  async function initDict(dictTypes: string[] | Set<string> = []) {
+    if (!dictTypes) return;
+    for (const dictType of dictTypes) {
+      if (!dictListMap[dictType]) {
+        // await new Promise((resolve) => setTimeout(resolve, 1000));
+        dictListMap[dictType] = await dictDataTreeData({ dictType: dictType });
+      }
+    }
+  }
+
+  function getDictList(dictType: string): Recordable[] {
+    return dictListMap[dictType] || [];
+  }
+
+  function getDictLabel(dictType: string, value?: string, defaultValue = t('未知')): string {
+    const result: string[] = [];
+    for (const item of getDictList(dictType)) {
+      if (item && (',' + value + ',').includes(',' + item.value + ',')) {
+        result.push(item.name);
+      }
+    }
+    return result.length > 0 ? result.join(',') : defaultValue;
+  }
+
+  async function initGetDictList(dictType: string): Promise<Recordable[]> {
+    if (isEmpty(dictType)) return [];
+    await initDict([dictType]);
+    return dictListMap[dictType] || [];
+  }
+
+  async function initSelectOptions(optionsRef: Ref, dictType?: string) {
+    if (isEmpty(dictType)) return;
+    await initDict([dictType]);
+    const jeesiteDictList = getDictList(dictType);
+    optionsRef.value = jeesiteDictList
+      .filter((item) => item.pId == '0')
+      .map((item) => ({
+        label: item.name,
+        value: item.value,
+        key: item.id,
+      }));
+  }
+
+  async function initSelectTreeData(treeData: Ref, dictType: string, isListToTree: boolean) {
+    if (isEmpty(dictType)) return;
+    await initDict([dictType]);
+    const jeesiteDictList = getDictList(dictType);
+    if (isListToTree) {
+      treeData.value = listToTree(jeesiteDictList);
+    } else {
+      treeData.value = jeesiteDictList;
+    }
+  }
+
+  return {
+    initDict,
+    getDictList,
+    getDictLabel,
+    initGetDictList,
+    initSelectOptions,
+    initSelectTreeData,
+  };
+}