收藏主机.

orion-ops-ui/src/components/tag/tag-multi-selector.vue

@@ -0,0 +1,113 @@
+<template>
+  <a-select v-model:model-value="value"
+            :placeholder="placeholder"
+            :options="optionData"
+            :limit=limit
+            @exceed-limit="onLimited"
+            multiple
+            :allow-create="allowCreate"
+            allow-clear>
+  </a-select>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'tag-multi-selector'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { useCacheStore } from '@/store';
+  import { Message, SelectOptionData } from '@arco-design/web-vue';
+  import { createTag, TagCreateRequest, TagType } from '@/api/meta/tag';
+
+  const props = defineProps({
+    modelValue: Array,
+    placeholder: String,
+    limit: Number,
+    type: String,
+    allowCreate: Boolean
+  });
+
+  const emits = defineEmits(['update:modelValue']);
+
+  const value = computed({
+    get() {
+      return props.modelValue;
+    },
+    async set(e) {
+      await checkCreateTag(e as any);
+      emits('update:modelValue', e);
+    }
+  });
+
+  // 选项数据
+  const cacheStore = useCacheStore();
+  const optionData = ref<SelectOptionData[]>([]);
+  const initOptionData = () => {
+    optionData.value = cacheStore.tags.map(s => {
+      return {
+        label: s.name,
+        value: s.id,
+      };
+    }) as SelectOptionData[];
+  };
+  initOptionData();
+
+  defineExpose({ initOptionData });
+
+  // 检查是否可以创建tag
+  const checkCreateTag = async (tags: Array<any>) => {
+    if (!tags.length) {
+      return;
+    }
+    for (let i = 0; i < tags.length; i++) {
+      const tag = tags[i];
+      // 为 number 代表为 id 已存在
+      if (typeof tag === 'number') {
+        continue;
+      }
+      // 已存在则跳过
+      const find = optionData.value.find((o) => o.label === tag);
+      if (find) {
+        // 删除并且跳出循环
+        tags.splice(i, 1);
+        return;
+      }
+      try {
+        // 创建 tag
+        tags[i] = await doCreateTag(tag);
+      } catch (e) {
+        // 失败删除
+        tags.splice(i, 1);
+      }
+    }
+  };
+
+  // 创建 tag
+  const doCreateTag = async (name: string) => {
+    const { data: id } = await createTag({
+      name,
+      type: props.type
+    } as unknown as TagCreateRequest);
+    // 插入缓存
+    cacheStore.tags.push({ id, name });
+    // 插入 options
+    optionData.value.push({
+      label: name,
+      value: id
+    });
+    return id;
+  };
+
+  // 超出限制
+  const onLimited = () => {
+    Message.warning(`最多选择${props.limit}个tag`);
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+</style>