chore: 连接增加卷王平台

src/modules/connect/api.ts

@@ -6,21 +6,36 @@ export function getConnectionList(params: { created_operator?: string; type?: st
 }
 
 // 创建链接
-export function createConnection(data: { type: string; config_attributes: string; }) {
+export function createConnection(data: { type: string; config_attributes: string }) {
   return httpRequest.post('/api/lab/v1/experiment/connection/create', data)
 }
 
 // 链接详情
-export function getConnectionDetails(params: { id?: string; }) {
+export function getConnectionDetails(params: { id?: string }) {
   return httpRequest.get('/api/lab/v1/experiment/connection/view', { params })
 }
 
 // 更新链接
-export function updateConnection(data: { id: string; config_attributes: string; }) {
+export function updateConnection(data: { id: string; config_attributes: string }) {
   return httpRequest.post('/api/lab/v1/experiment/connection/update', data)
 }
 
 // 删除链接
-export function deleteConnection(data: { id: string; }) {
+export function deleteConnection(data: { id: string }) {
   return httpRequest.post('/api/lab/v1/experiment/connection/delete', data)
 }
+
+// 卷王获取表单列表
+export function getSurveyFormList(params: { id: string }) {
+  return httpRequest.get('/api/lab/v1/experiment/connection/survey-form-list', { params })
+}
+
+// 卷王获取表单详情
+export function getSurveyForm(params: { form_id: string }) {
+  return httpRequest.get('/api/lab/v1/experiment/connection/survey-form-view', { params })
+}
+
+// 卷王字段映射保存
+export function submitSurveyForm(data: { id: string; form_id: string; form: string }) {
+  return httpRequest.post('/api/lab/v1/experiment/connection/save-survey-form-view', data)
+}

src/modules/connect/components/StepOne.vue

@@ -15,7 +15,8 @@ const iconItems = $ref<IconProp[]>([
   { label: '邮箱', name: '9', checkbox: false },
   { label: '短信', name: '10', checkbox: false },
   { label: '内部消息', name: '11', checkbox: false },
-  { label: '自定义', name: '12', checkbox: false }
+  { label: '自定义', name: '12', checkbox: false },
+  { label: '卷王', name: '13', checkbox: false }
 ])
 
 let typeValue = ref<IconProp>({ label: '公众号', name: '1', checkbox: true })

src/modules/connect/components/StepTwo.vue

@@ -117,6 +117,10 @@ const formAll = ref([
       { label: 'APP类型', prop: 'appType', value: '' },
       { label: 'AppId', prop: 'appId', value: '' }
     ]
+  },
+  {
+    type: '13',
+    form: [{ label: '名称', prop: 'name', value: '' }]
   }
 ])
 
@@ -139,11 +143,7 @@ defineExpose({ formItem })
     <div class="content-left">
       <h2>用户需知</h2>
       <p>亲爱的系统用户，您即将进入链接页面，链接前请您认真阅读一下说明：</p>
-      <p>
-        1、您即将链接的系统属于第三方平台，关于此系统的一切内容以及疑问，本公司无法代表此系统提供官方的准确回复，建议您<strong
-          >及时联系此系统的官方客服人员；</strong
-        >
-      </p>
+      <p>1、您即将链接的系统属于第三方平台，关于此系统的一切内容以及疑问，本公司无法代表此系统提供官方的准确回复，建议您<strong>及时联系此系统的官方客服人员；</strong></p>
       <p>
         2、本系统是一个客户数据平台，通过链接全局客户数据，帮助企业构建第一方客户池，数据源为各个与本系统链接的第三方平台，如链接的系统出现数据异常，本公司没有权限进入该系统排查，烦请<strong
           >及时联系该系统相关技术人员协助处理。</strong

src/modules/connect/components/SurveyKingField.vue

+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+
+import { getSurveyForm, submitSurveyForm } from '../api'
+
+interface FormItem {
+  title: string
+  survey_field_id: string
+  field_id: string
+}
+interface FieldItem {
+  id: string
+  name: string
+}
+const props = defineProps<{ id: string; formId: string }>()
+const emit = defineEmits<{
+  'update:modelValue': [visible: boolean]
+  update: []
+}>()
+
+const fields = ref<FieldItem[]>([])
+const form = ref<FormItem[]>([])
+async function fetchInfo() {
+  const res = await getSurveyForm({ form_id: props.formId })
+  fields.value = res.data.fields || []
+  form.value = res.data.form || []
+}
+watchEffect(fetchInfo)
+
+async function handleSubmit() {
+  await submitSurveyForm({ id: props.id, form_id: props.formId, form: JSON.stringify(form.value) })
+  emit('update')
+  emit('update:modelValue', false)
+  ElMessage.success('保存成功')
+}
+</script>
+
+<template>
+  <el-dialog title="字段映射" width="500" @update:modelValue="$emit('update:modelValue')">
+    <el-form labelWidth="240" labelPosition="left">
+      <el-form-item v-for="item in form" :key="item.survey_field_id" :label="item.title">
+        <el-select v-model="item.field_id" style="width: 220px">
+          <el-option v-for="item in fields" :key="item.id" :label="item.name" :value="item.id"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button type="primary" @click="handleSubmit">确定</el-button>
+    </template>
+  </el-dialog>
+</template>

src/modules/connect/index.ts

@@ -7,7 +7,8 @@ const routes: RouteRecordRaw[] = [
     component: Layout,
     children: [
       { path: '', component: () => import('./views/Index.vue') },
-      { path: 'view', component: () => import('./views/View.vue') }
+      { path: 'view', component: () => import('./views/View.vue') },
+      { path: 'view/surveyking', component: () => import('./views/SurveyKing.vue') }
     ]
   }
 ]

src/modules/connect/views/SurveyKing.vue

+<script setup lang="ts">
+import AppList from '@/components/base/AppList.vue'
+
+import { getSurveyFormList } from '../api'
+
+interface SurveyKingListItem {
+  id: string
+  name: string
+  has_map: boolean
+}
+
+const SurveyKingField = defineAsyncComponent(() => import('../components/SurveyKingField.vue'))
+
+const route = useRoute()
+
+// 连接ID
+const connectId = route.query.id as string
+
+const appList = ref<InstanceType<typeof AppList> | null>(null)
+// 列表配置
+const listOptions = computed(() => {
+  return {
+    remote: {
+      httpRequest: getSurveyFormList,
+      params: { id: connectId },
+      callback(data: SurveyKingListItem) {
+        return { list: data }
+      }
+    },
+    columns: [
+      { label: '表单ID', prop: 'id' },
+      { label: '表单名称', prop: 'name' },
+      {
+        label: '是否做过字段映射',
+        prop: 'has_map',
+        computed({ row }: { row: SurveyKingListItem }) {
+          return row.has_map ? '已映射' : ''
+        }
+      },
+      { label: '操作', slots: 'table-x', width: 100 }
+    ]
+  }
+})
+// 刷新
+function handleRefresh() {
+  appList.value?.refetch()
+}
+
+const dialogVisible = ref(false)
+const currentRow = ref<SurveyKingListItem>()
+function handleClick(row: SurveyKingListItem) {
+  currentRow.value = row
+  dialogVisible.value = true
+}
+</script>
+
+<template>
+  <AppCard title="卷王表单映射">
+    <AppList v-bind="listOptions" ref="appList">
+      <template #table-x="{ row }: { row: SurveyKingListItem }">
+        <el-button type="primary" @click="handleClick(row)">查看</el-button>
+      </template>
+    </AppList>
+  </AppCard>
+  <SurveyKingField v-model="dialogVisible" :id="connectId" :formId="currentRow.id" @update="handleRefresh" v-if="dialogVisible && currentRow"></SurveyKingField>
+</template>

src/modules/connect/views/View.vue

@@ -3,6 +3,7 @@ import Icon from '@/components/ConnectionIcon.vue'
 // import { ElMessageBox } from 'element-plus'
 import { getConnectionDetails } from '../api'
 
+const router = useRouter()
 const route = useRoute()
 
 // 点击标签弹出详情文案（产品还没提供）
@@ -19,7 +20,7 @@ onMounted(() => {
   })
 })
 
-const ability = ref([
+const ability = [
   {
     type: 1,
     data: [
@@ -439,13 +440,39 @@ const ability = ref([
         child: []
       }
     ]
+  },
+  {
+    type: 13,
+    data: [
+      {
+        title: '',
+        child: [
+          {
+            title: '访问卷王表单网站',
+            onClick() {
+              window.open('https://surveyking.ezijing.com/')
+            }
+          },
+          {
+            title: '管理表单自动映射',
+            onClick() {
+              router.push({ path: 'view/surveyking', query: route.query })
+            }
+          }
+        ]
       }
-])
+    ]
+  }
+]
 
 const abilityItem = computed(() => {
-  const [data] = ability.value.filter(item => item.type === parseInt(dataDetail?.type))
+  const [data] = ability.filter(item => item.type === parseInt(dataDetail?.type))
   return data?.data
 })
+
+function handleClick(item: any) {
+  item.onClick && item.onClick()
+}
 </script>
 
 <template>
@@ -467,7 +494,7 @@ const abilityItem = computed(() => {
     <el-tabs class="tabs-box" v-for="(item, index) in abilityItem" :key="index">
       <el-tab-pane :label="item.title">
         <div class="tag-box" v-if="item.child.length">
-          <div class="tag" v-for="cItem in item.child" :key="cItem.title">{{ cItem.title }}</div>
+          <div class="tag" v-for="cItem in item.child" :key="cItem.title" @click="handleClick(cItem)">{{ cItem.title }}</div>
         </div>
         <div class="tag-null" v-else>无数据</div>
       </el-tab-pane>