merge

src/components/common/treeCaseTable/flowTemplateSelect.vue

@@ -7,17 +7,23 @@
       class="full"
       :clearable="clearable"
       :size="size"
+      :multiple="multiple"
+      :collapse-tags="multiple"
+      :collapse-tags-tooltip="multiple"
       @change="onChange"
     />
-    <div v-else class="plain-label">
+    <span v-else class="plain-label">
-      <!-- <el-icon class="view" @click="previewFlowFun">
+      <template v-for="item in selectedTemplates" :key="item.uuid">
-        <View />
+        <el-icon class="view" @click="previewFlow(item.uuid)">
-      </el-icon> -->
+          <View />
-      {{ selectedLabel }}
+        </el-icon>
-    </div>
+        <span class="name-text">{{ item.templateName }}</span>
+      </template>
+    </span>
     <flowViewDialog
+      v-if="flowVisible"
       v-model:showDialog="flowVisible"
-      :flowTemplateCode="selected"
+      :flowUuid="currentPreviewUuid"
     ></flowViewDialog>
   </div>
 </template>
@@ -26,50 +32,80 @@
 import { ref, watch, computed } from 'vue';
 import { useTaskStore } from '@/stores/taskPool';
 import flowViewDialog from '@/components/common/flow/flowViewDialog.vue';
+import { View } from '@element-plus/icons-vue';
 
 interface Props {
   modelValue?: any;
   clearable?: boolean;
   editable?: boolean;
-  size?: '' | 'large' | 'default' | 'small'
+  size?: '' | 'large' | 'default' | 'small';
+  multiple?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: null,
+  modelValue: '',
   clearable: true,
   editable: true,
   size: 'default',
+  multiple: true,
 });
 const emits = defineEmits(['update:modelValue', 'change']);
 
-const selected = ref<any>(props.modelValue);
+const parseValue = (value: string): string[] | string => {
+  if (!value) return props.multiple ? [] : '';
+  if (props.multiple) {
+    return value.split(',').filter((v) => v.trim());
+  }
+  return value;
+};
 
-watch(() => props.modelValue, (v) => {
+const stringifyValue = (value: string[] | string): string => {
-  selected.value = v;
+  if (props.multiple && Array.isArray(value)) {
-});
+    return value.join(',');
+  }
+  return String(value || '');
+};
+
+const selected = ref<string[] | string>(parseValue(props.modelValue));
+
+watch(
+  () => props.modelValue,
+  (v) => {
+    selected.value = parseValue(v);
+  }
+);
 
 watch(selected, (v) => {
-  emits('update:modelValue', v);
+  const stringValue = stringifyValue(v);
+  emits('update:modelValue', stringValue);
 });
 
 const taskStore = useTaskStore();
 
 const options = computed(() => taskStore.options);
 
-const selectedLabel = computed(() => {
+const selectedCodes = computed(() => {
-  const opt = options.value.find((o: any) => o.value === selected.value);
+  if (props.multiple && Array.isArray(selected.value)) {
-  return opt ? opt.label : '';
+    return selected.value;
+  }
+  return selected.value ? [selected.value] : [];
 });
 
-const onChange = (val: any) => {
+const selectedTemplates = computed(() => {
-  emits('change', val);
+  return taskStore.templates.filter((t: any) => selectedCodes.value.includes(t.templateCode));
+});
+
+const onChange = (val: string[] | string) => {
+  emits('change', stringifyValue(val));
 };
 
 const flowVisible = ref(false);
-const previewFlowFun = () => {
+const currentPreviewUuid = ref('');
+
+const previewFlow = (uuid: string) => {
+  currentPreviewUuid.value = uuid;
   flowVisible.value = true;
 };
-
 </script>
 
 <style scoped lang="scss">
@@ -93,5 +129,8 @@ const previewFlowFun = () => {
     color: var(--el-color-primary);
     margin-right: 0;
   }
+  .name-text {
+    margin-right: 8px;
+  }
 }
 </style>