后续与后端协商增加标签颜色字段

src/components/DictTag/index.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed, PropType } from 'vue';
+const props = defineProps({
+  /**数据 */
+  options: {
+    type: Array as PropType<DictType[]>,
+  },
+  /**当前的值对应数据中的项字段 */
+  valueField: {
+    type: String as PropType<keyof DictType>,
+    default: 'value',
+  },
+  /**当前的值 */
+  value: {
+    type: [Number, String],
+    default: '',
+  },
+  /**数据默认值，当前值不存在时 */
+  valueDefault: {
+    type: [Number, String],
+  },
+});
+
+/**遍历找到对应值数据项 */
+const item = computed(() => {
+  console.log(props.options);
+  if (Array.isArray(props.options) && props.options.length > 0) {
+    let option = props.options.find(
+      item => `${item[props.valueField]}` === `${props.value}`
+    );
+    // 数据默认值
+    if (!option && props.valueDefault != undefined) {
+      option = props.options.find(
+        item => `${item[props.valueField]}` === `${props.valueDefault}`
+      );
+    }
+    return option;
+  }
+  return undefined;
+});
+</script>
+
+<template>
+  <template v-if="item">
+    <a-tag v-if="item.tagType" :class="!item.tagClass?'':item.tagClass" :color="!item.tagType?'':item.tagType">
+      {{ item.label }}
+    </a-tag>
+    <a-tag v-else :class="!item.tagClass?'':item.tagClass">
+      {{ item.label }}
+    </a-tag>
+  </template>
+  <span v-else>{{ value }}</span>
+</template>
+
+<style lang="less" scoped></style>