Просмотр исходного кода

feat:增加 components 字典组件

YunaiV 4 месяцев назад
Родитель
Сommit
c14e0d04d0
2 измененных файлов с 63 добавлено и 0 удалено
  1. 62 0
      src/components/dict-tag/dict-tag.vue
  2. 1 0
      src/components/dict-tag/index.ts

+ 62 - 0
src/components/dict-tag/dict-tag.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { TagType } from 'wot-design-uni/components/wd-tag/types'
+import { computed } from 'vue'
+
+import { getDictObj } from '@/hooks/useDict'
+
+interface DictTagProps {
+  type: string // 字典类型
+  value: any // 字典值
+  plain?: boolean // 是否镂空,默认为 true
+}
+
+const props = withDefaults(defineProps<DictTagProps>(), {
+  plain: true,
+})
+
+/**
+ * 后端颜色类型 => wd-tag 的 type 映射
+ *
+ * 后端可配置:default、primary、success、info、warning、danger
+ * wd-tag 支持:default、primary、success、warning、danger
+ * 匹配不上时默认用 default
+ */
+const COLOR_TYPE_MAP: Record<string, TagType> = {
+  default: 'default',
+  primary: 'primary',
+  success: 'success',
+  info: 'default', // wd-tag 无 info,映射为 default
+  warning: 'warning',
+  danger: 'danger',
+}
+
+/** 获取字典标签 */
+const dictTag = computed(() => {
+  // 校验参数有效性
+  if (!props.type || props.value === undefined || props.value === null) {
+    return null
+  }
+  // 获取字典对象
+  const dict = getDictObj(props.type, String(props.value))
+  if (!dict) {
+    return null
+  }
+
+  return {
+    label: dict.label || '',
+    tagType: COLOR_TYPE_MAP[dict.colorType || ''] || 'default',
+    cssClass: dict.cssClass,
+  }
+})
+</script>
+
+<template>
+  <wd-tag
+    v-if="dictTag"
+    :type="dictTag.tagType"
+    :plain="plain"
+    :custom-class="dictTag.cssClass"
+  >
+    {{ dictTag.label }}
+  </wd-tag>
+</template>

+ 1 - 0
src/components/dict-tag/index.ts

@@ -0,0 +1 @@
+export { default as DictTag } from './dict-tag.vue'