feat: 旅程模板配置链接

src/api/base.ts

@@ -58,6 +58,11 @@ export function getTagList(params?: { check_role?: 0 | 1 }) {
   return httpRequest.get('/api/lab/v1/experiment/tag/all', { params })
 }
 
+// 获取实验下的所有连接
+export function getConnectionList() {
+  return httpRequest.get('/api/lab/v1/experiment/connection/all')
+}
+
 // 搜索紫荆用户
 export function searchUser(params: any) {
   return httpRequest.get('/api/lab/v1/experiment/system/search-user', { params })

src/composables/useAllData.ts

-import { getMetaUserAttrList, getMetaEventList, getTagList } from '@/api/base'
+import { getMetaUserAttrList, getMetaEventList, getTagList, getConnectionList } from '@/api/base'
 
-interface AttrType {
+// 用户属性类型
+export interface AttrType {
   id: string
   name: string
   type: string
@@ -8,6 +9,31 @@ interface AttrType {
   english_name: string
   pinyin: string
 }
+// 事件类型
+interface MetaEventType {
+  id: string
+  name: string
+  english_name: string
+  pinyin: string
+  event_attrs: AttrType[]
+}
+
+// 标签类型
+export interface TagType {
+  id: string
+  name: string
+}
+
+// 连接类型
+export interface ConnectionType {
+  id: string
+  name: string
+  type: string
+  status: '0' | '1'
+  config_attributes: any
+}
+
+// 所有用户属性
 const userAttrList = ref<AttrType[]>([])
 export function useUserAttr() {
   function fetchUserAttrList() {
@@ -21,14 +47,8 @@ export function useUserAttr() {
   return { fetchUserAttrList, userAttrList }
 }
 
-interface MetaEvent {
-  id: string
-  name: string
-  english_name: string
-  pinyin: string
-  event_attrs: AttrType[]
-}
-const metaEventList = ref<MetaEvent[]>([])
+// 所有事件
+const metaEventList = ref<MetaEventType[]>([])
 export function useMetaEvent() {
   function fetchMetaEventList() {
     getMetaEventList().then((res: any) => {
@@ -41,10 +61,7 @@ export function useMetaEvent() {
   return { fetchMetaEventList, metaEventList }
 }
 
-interface TagType {
-  id: string
-  name: string
-}
+// 所有标签
 const tagList = ref<TagType[]>([])
 export function useTag() {
   function fetchTagList() {
@@ -57,3 +74,21 @@ export function useTag() {
   })
   return { fetchTagList, tagList }
 }
+
+// 所有标签
+const connectionList = ref<ConnectionType[]>([])
+export function useConnection() {
+  function fetchConnectionList() {
+    getConnectionList().then((res: any) => {
+      connectionList.value = res.data.items.map((item: any) => {
+        const attrs = JSON.parse(item.config_attributes)
+        let name = Array.isArray(attrs) ? attrs.find((item: any) => item.prop === 'name')?.value : attrs.name
+        return { ...item, config_attributes: attrs, name }
+      })
+    })
+  }
+  onMounted(() => {
+    if (!connectionList.value?.length) fetchConnectionList()
+  })
+  return { fetchConnectionList, connectionList }
+}

src/modules/trip/template/api.ts

 import httpRequest from '@/utils/axios'
 import type { TripTemplateListRequest, TripTemplateCreateRequest, TripTemplateUpdateRequest } from './types'
+
 // 获取旅程模板列表
 export function getTripTemplateList(params: TripTemplateListRequest) {
   return httpRequest.get('/api/lab/v1/experiment/itinerary/list', { params })
@@ -14,3 +15,13 @@ export function createTripTemplate(data: TripTemplateCreateRequest) {
 export function updateTripTemplate(data: TripTemplateUpdateRequest) {
   return httpRequest.post('/api/lab/v1/experiment/itinerary/update', data)
 }
+
+// 获取旅程连接
+export function getTripConnections(params: { itinerary_id: string }) {
+  return httpRequest.get('/api/lab/v1/experiment/itinerary/connections', { params })
+}
+
+// 旅程绑定连接
+export function bindTripConnections(data: { itinerary_id: string; connection_ids: string[] }) {
+  return httpRequest.post('/api/lab/v1/experiment/itinerary/bind-connections', data)
+}

src/modules/trip/template/components/BindConnection.vue

+<script setup lang="ts">
+import type { TripTemplate } from '../types'
+import { ElMessage } from 'element-plus'
+import { getTripConnections, bindTripConnections } from '../api'
+import type { ConnectionType } from '@/composables/useAllData'
+import { useConnection } from '@/composables/useAllData'
+
+const props = defineProps<{
+  data: TripTemplate
+}>()
+
+const emit = defineEmits<{
+  (e: 'update'): void
+  (e: 'update:modelValue', visible: boolean): void
+}>()
+
+const { connectionList } = useConnection()
+
+const multipleSelection = ref<ConnectionType[]>([])
+
+function fetchList() {
+  getTripConnections({ itinerary_id: props.data.id }).then(res => {
+    multipleSelection.value = res.data.items
+  })
+}
+watchEffect(() => fetchList())
+
+function toggleSelection(data: ConnectionType) {
+  const foundIndex = multipleSelection.value.findIndex(item => item.id === data.id)
+  foundIndex === -1 ? multipleSelection.value.push(data) : multipleSelection.value.splice(foundIndex, 1)
+}
+
+function isActive(data: ConnectionType) {
+  return !!multipleSelection.value.find(item => item.id === data.id)
+}
+
+// 保存
+function handleSave() {
+  const ids = multipleSelection.value.map(item => item.id)
+  bindTripConnections({ itinerary_id: props.data.id, connection_ids: ids }).then(() => {
+    ElMessage({ message: '保存成功', type: 'success' })
+    emit('update')
+    emit('update:modelValue', false)
+  })
+}
+</script>
+
+<template>
+  <el-dialog title="配置连接" width="800px" append-to-body @update:modelValue="$emit('update:modelValue')">
+    <div class="connection-list">
+      <div
+        class="connection-item"
+        v-for="item in connectionList"
+        :key="item.id"
+        :class="{ 'is-active': isActive(item) }"
+        @click="toggleSelection(item)">
+        <el-checkbox :model-value="isActive(item)" />
+        <div class="connection-item__icon"></div>
+        <p>{{ item.name }}</p>
+      </div>
+    </div>
+    <template #footer>
+      <el-row justify="center">
+        <el-button plain auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
+        <el-button type="primary" plain auto-insert-space @click="handleSave">保存</el-button>
+      </el-row>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss">
+.connection-list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+.connection-item {
+  position: relative;
+  height: 124px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  border: 1px dashed #bbb;
+  cursor: pointer;
+  &.is-active {
+    background-color: rgb(204 247 131 / 38%);
+  }
+  .el-checkbox {
+    position: absolute;
+    left: 10px;
+    top: 0;
+  }
+}
+</style>

src/modules/trip/template/views/Index.vue

@@ -9,6 +9,7 @@ import { getNameByValue, tripTemplateTypeList } from '@/utils/dictionary'
 
 const FormDialog = defineAsyncComponent(() => import('../components/FormDialog.vue'))
 const ViewDialog = defineAsyncComponent(() => import('../components/ViewDialog.vue'))
+const BindConnection = defineAsyncComponent(() => import('../components/BindConnection.vue'))
 
 const statusList = useMapStore().getMapValuesByKey('system_status')
 
@@ -81,6 +82,13 @@ function handleView(row: TripTemplate) {
   currentRow = row
   viewVisible = true
 }
+
+// 配置
+let configVisible = $ref(false)
+function handleConfig(row: TripTemplate) {
+  currentRow = row
+  configVisible = true
+}
 </script>
 
 <template>
@@ -95,7 +103,7 @@ function handleView(row: TripTemplate) {
         <el-tag :type="row.status === '1' ? 'success' : 'danger'">{{ getNameByValue(row.status, statusList) }}</el-tag>
       </template>
       <template #table-x="{ row }: { row: TripTemplate }">
-        <el-button type="primary" plain>配置</el-button>
+        <el-button type="primary" plain @click="handleConfig(row)">配置</el-button>
         <el-button type="primary" plain @click="handleView(row)">查看</el-button>
         <el-button type="primary" plain @click="handleUpdate(row)">编辑</el-button>
         <el-button type="primary" plain @click="handleRemove(row)">删除</el-button>
@@ -106,4 +114,6 @@ function handleView(row: TripTemplate) {
   <FormDialog v-model="formVisible" :data="currentRow" @update="handleRefresh" v-if="formVisible"></FormDialog>
   <!-- 查看 -->
   <ViewDialog v-model="viewVisible" :data="currentRow" v-if="viewVisible && currentRow"></ViewDialog>
+  <!-- 配置 -->
+  <BindConnection v-model="configVisible" :data="currentRow" v-if="configVisible && currentRow"></BindConnection>
 </template>