chore: 旅程选择资料之后，显示对应内容

package.json

@@ -59,6 +59,7 @@
     "typescript": "~5.4.5",
     "unplugin-auto-import": "^0.17.5",
     "vite": "^5.2.10",
+    "vite-plugin-mkcert": "^1.17.6",
     "vue-tsc": "^1.8.27"
   }
 }

src/components/MaterialPreview.vue

+<script setup lang="ts">
+interface Props {
+  data: any
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="material-preview">
+    <template v-if="data.type == 1">
+      <!-- 文本 -->
+      <el-input type="textarea" :model-value="data.content"></el-input>
+    </template>
+    <template v-if="['2', '6', '7', '8'].includes(data.type)">
+      <!-- 图片|二维码|小程序｜卡券 -->
+      <img :src="data.content" />
+    </template>
+    <template v-if="data.type == 3">
+      <!-- 语音 -->
+      <div>
+        <audio :src="data.content" controls v-if="data.content"></audio>
+      </div>
+    </template>
+    <template v-if="data.type == 4">
+      <!-- 视频 -->
+      <video controls :src="data.content" style="width: 100%" v-if="data.content"></video>
+    </template>
+    <template v-if="data.type == 5">
+      <el-input :model-value="data.content" placeholder="请输入">
+        <template #prepend>https://</template>
+        <template #append v-if="data.content">
+          <a :href="data.content" target="_blank">查看</a>
+        </template>
+      </el-input>
+    </template>
+  </div>
+</template>
+
+<style lang="scss">
+.material-preview {
+  width: 100%;
+  margin-top: 10px;
+
+  * {
+    max-width: 100%;
+  }
+}
+</style>

src/components/flow/components/ConfigTemplate.vue

@@ -112,7 +112,7 @@ function updateNode() {
   </el-dialog>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .el-card {
   .el-form-item:last-child {
     margin-bottom: 0;

src/components/flow/components/marketingAction/dingtalk/Config.vue

@@ -2,6 +2,7 @@
 import ConfigTemplate from '../../ConfigTemplate.vue'
 import { useMaterial, useConnection } from '../../../composables/useAllData'
 import { useMapStore } from '@/stores/map'
+const MaterialPreview = defineAsyncComponent(() => import('@/components/MaterialPreview.vue'))
 
 const props = defineProps<{ node: any }>()
 
@@ -27,6 +28,7 @@ watchEffect(() => {
 })
 
 const { connectionList } = useConnection(2)
+const material = computed(() => materialList.value.find(item => item.id === form.material_id))
 </script>
 
 <template>
@@ -60,6 +62,7 @@ const { connectionList } = useConnection(2)
           <el-select placeholder="请选择资料内容" v-model="form.material_id" style="width: 100%">
             <el-option v-for="item in materialList" :key="item.id" :value="item.id" :label="item.name"></el-option>
           </el-select>
+          <MaterialPreview :data="material" v-if="material"></MaterialPreview>
         </el-form-item>
       </template>
     </template>

src/components/flow/components/marketingAction/douyin/Config.vue

@@ -2,6 +2,7 @@
 import ConfigTemplate from '../../ConfigTemplate.vue'
 import { useMaterial, useConnection } from '../../../composables/useAllData'
 import { useMapStore } from '@/stores/map'
+const MaterialPreview = defineAsyncComponent(() => import('@/components/MaterialPreview.vue'))
 
 const props = defineProps<{ node: any }>()
 
@@ -31,6 +32,8 @@ watchEffect(() => {
 })
 
 const { connectionList } = useConnection(6)
+
+const material = computed(() => materialList.value.find(item => item.id === form.material_id))
 </script>
 
 <template>
@@ -64,6 +67,7 @@ const { connectionList } = useConnection(6)
           <el-select placeholder="请选择资料内容" v-model="form.material_id" style="width: 100%">
             <el-option v-for="item in materialList" :key="item.id" :value="item.id" :label="item.name"></el-option>
           </el-select>
+          <MaterialPreview :data="material" v-if="material"></MaterialPreview>
         </el-form-item>
       </template>
     </template>

src/components/flow/components/marketingAction/email/Config.vue

@@ -3,6 +3,8 @@ import ConfigTemplate from '../../ConfigTemplate.vue'
 import { useMaterial, useConnection } from '../../../composables/useAllData'
 import { useMapStore } from '@/stores/map'
 
+const MaterialPreview = defineAsyncComponent(() => import('@/components/MaterialPreview.vue'))
+
 const props = defineProps<{ node: any }>()
 
 const role = inject('role') as string
@@ -26,6 +28,8 @@ watchEffect(() => {
   materialType.value = form.material_type
 })
 const { connectionList } = useConnection(9)
+
+const material = computed(() => materialList.value.find(item => item.id === form.material_id))
 </script>
 
 <template>
@@ -59,6 +63,7 @@ const { connectionList } = useConnection(9)
           <el-select placeholder="请选择资料内容" v-model="form.material_id" style="width: 100%">
             <el-option v-for="item in materialList" :key="item.id" :value="item.id" :label="item.name"></el-option>
           </el-select>
+          <MaterialPreview :data="material" v-if="material"></MaterialPreview>
         </el-form-item>
       </template>
     </template>

src/components/flow/components/marketingAction/offiaccount/Config.vue

@@ -3,6 +3,8 @@ import ConfigTemplate from '../../ConfigTemplate.vue'
 import { useMaterial, useConnection } from '../../../composables/useAllData'
 import { useMapStore } from '@/stores/map'
 
+const MaterialPreview = defineAsyncComponent(() => import('@/components/MaterialPreview.vue'))
+
 const props = defineProps<{ node: any }>()
 
 const role = inject('role') as string
@@ -24,6 +26,8 @@ watchEffect(() => {
 })
 
 const { connectionList } = useConnection(1)
+
+const material = computed(() => materialList.value.find(item => item.id === form.material_id))
 </script>
 
 <template>
@@ -41,6 +45,7 @@ const { connectionList } = useConnection(1)
           <el-select placeholder="请选择资料内容" v-model="form.material_id" style="width: 100%">
             <el-option v-for="item in materialList" :key="item.id" :value="item.id" :label="item.name"></el-option>
           </el-select>
+          <MaterialPreview :data="material" v-if="material"></MaterialPreview>
         </el-form-item>
       </template>
       <template v-else-if="step === 1">

src/components/flow/components/marketingAction/sms/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useConnection } from '../../../composables/useAllData'
+import { useConnection, useMaterial } from '../../../composables/useAllData'
+
+const MaterialPreview = defineAsyncComponent(() => import('@/components/MaterialPreview.vue'))
 
 const props = defineProps<{ node: any }>()
 
@@ -9,7 +11,8 @@ const role = inject('role') as string
 const form = reactive({
   operate: '',
   connection_id: '',
-  message: ''
+  message: '',
+  material_id: ''
 })
 watchEffect(() => {
   Object.assign(form, props.node.data[role])
@@ -17,7 +20,17 @@ watchEffect(() => {
 
 const operateList = ref([{ label: '发送消息', value: '0' }])
 
+const { materialList } = useMaterial('1')
+
 const { connectionList } = useConnection(10)
+
+const material = computed(() => materialList.value.find(item => item.id === form.material_id))
+
+watch(material, () => {
+  if (material.value) {
+    form.message = material.value.content
+  }
+})
 </script>
 
 <template>
@@ -40,9 +53,15 @@ const { connectionList } = useConnection(10)
         </el-form-item>
       </template>
       <template v-else-if="step === 2">
-        <el-form-item prop="message">
-          <el-input v-model="form.message" :rows="3" type="textarea" placeholder="请输入短信内容"></el-input>
+        <el-form-item>
+          <el-select placeholder="请选择资料内容" v-model="form.material_id" style="width: 100%">
+            <el-option v-for="item in materialList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+          <MaterialPreview :data="material" v-if="material"></MaterialPreview>
         </el-form-item>
+        <!-- <el-form-item prop="message">
+          <el-input v-model="form.message" :rows="3" type="textarea" placeholder="请输入短信内容"></el-input>
+        </el-form-item> -->
       </template>
     </template>
   </ConfigTemplate>

src/components/flow/components/marketingAction/weibo/Config.vue

@@ -3,6 +3,8 @@ import ConfigTemplate from '../../ConfigTemplate.vue'
 import { useMaterial, useConnection } from '../../../composables/useAllData'
 import { useMapStore } from '@/stores/map'
 
+const MaterialPreview = defineAsyncComponent(() => import('@/components/MaterialPreview.vue'))
+
 const props = defineProps<{ node: any }>()
 
 const role = inject('role') as string
@@ -30,6 +32,8 @@ watchEffect(() => {
   materialType.value = form.material_type
 })
 const { connectionList } = useConnection(7)
+
+const material = computed(() => materialList.value.find(item => item.id === form.material_id))
 </script>
 
 <template>
@@ -63,6 +67,7 @@ const { connectionList } = useConnection(7)
           <el-select placeholder="请选择资料内容" v-model="form.material_id" style="width: 100%">
             <el-option v-for="item in materialList" :key="item.id" :value="item.id" :label="item.name"></el-option>
           </el-select>
+          <MaterialPreview :data="material" v-if="material"></MaterialPreview>
         </el-form-item>
       </template>
     </template>

src/components/flow/components/marketingAction/xiaohongshu/Config.vue

@@ -3,6 +3,8 @@ import ConfigTemplate from '../../ConfigTemplate.vue'
 import { useMaterial, useConnection } from '../../../composables/useAllData'
 import { useMapStore } from '@/stores/map'
 
+const MaterialPreview = defineAsyncComponent(() => import('@/components/MaterialPreview.vue'))
+
 const props = defineProps<{ node: any }>()
 
 const role = inject('role') as string
@@ -31,6 +33,8 @@ watchEffect(() => {
 })
 
 const { connectionList } = useConnection(8)
+
+const material = computed(() => materialList.value.find(item => item.id === form.material_id))
 </script>
 
 <template>
@@ -64,6 +68,7 @@ const { connectionList } = useConnection(8)
           <el-select placeholder="请选择资料内容" v-model="form.material_id" style="width: 100%">
             <el-option v-for="item in materialList" :key="item.id" :value="item.id" :label="item.name"></el-option>
           </el-select>
+          <MaterialPreview :data="material" v-if="material"></MaterialPreview>
         </el-form-item>
       </template>
     </template>

src/modules/material/all/components/ViewDialog.vue

@@ -2,7 +2,13 @@
 import { useMapStore } from '@/stores/map'
 import { useConnection } from '../composables/useConnection'
 import { useIndustry } from '../composables/useIndustry'
-import { getNameByValue, materialMethodList, materialUsageList, materialUsersList, materialPictureStyleList } from '@/utils/dictionary'
+import {
+  getNameByValue,
+  materialMethodList,
+  materialUsageList,
+  materialUsersList,
+  materialPictureStyleList
+} from '@/utils/dictionary'
 import AppUpload from '@/components/base/AppUpload.vue'
 
 const props = defineProps(['data'])
@@ -29,7 +35,9 @@ const typeName = computed(() => {
         <!-- 图片AI -->
         <el-form-item label="图片风格" prop="extend_info.picture_style">
           <el-radio-group :modelValue="data.extend_info.picture_style">
-            <el-radio v-for="item in materialPictureStyleList" :key="item.id" :value="item.value">{{ item.label }}</el-radio>
+            <el-radio v-for="item in materialPictureStyleList" :key="item.id" :value="item.value">{{
+              item.label
+            }}</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="人物描述" prop="extend_info.person_des">
@@ -64,7 +72,11 @@ const typeName = computed(() => {
           </el-radio-group>
         </el-form-item>
         <el-form-item label="关键点" prop="key_points">
-          <el-input type="textarea" :rows="4" :model-value="data.key_points" placeholder="请输入内容的核心内容或者关键点，多个请使用英文“,”号进行隔离。" />
+          <el-input
+            type="textarea"
+            :rows="4"
+            :model-value="data.key_points"
+            placeholder="请输入内容的核心内容或者关键点，多个请使用英文“,”号进行隔离。" />
         </el-form-item>
       </template>
       <el-form-item :label="`${typeName}资源`" prop="content">
@@ -95,8 +107,8 @@ const typeName = computed(() => {
               <a :href="data.content" target="_blank">查看</a>
             </template>
           </el-input>
-        </template></el-form-item
-      >
+        </template>
+      </el-form-item>
     </el-form>
     <template #footer>
       <el-button type="primary" @click="$emit('update:modelValue')">关闭</el-button>

vite.config.ts

-import fs from 'node:fs'
-import path from 'node:path'
+// import fs from 'node:fs'
+// import path from 'node:path'
 import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
@@ -7,10 +7,12 @@ import vue from '@vitejs/plugin-vue'
 // import checker from 'vite-plugin-checker'
 import AutoImport from 'unplugin-auto-import/vite'
 import ReactivityTransform from '@vue-macros/reactivity-transform/vite'
+import mkcert from 'vite-plugin-mkcert'
 
 export default defineConfig(({ mode }) => ({
   base: mode === 'prod' ? 'https://webapp-pub.ezijing.com/website/prod/saas-dml/' : '/',
   plugins: [
+    mkcert(),
     vue(),
     AutoImport({
       imports: ['vue', 'vue-router', '@vueuse/core'],
@@ -23,10 +25,10 @@ export default defineConfig(({ mode }) => ({
   server: {
     open: true,
     host: 'dev.ezijing.com',
-    https: {
-      key: fs.readFileSync(path.join(__dirname, './https/ezijing.com.key')),
-      cert: fs.readFileSync(path.join(__dirname, './https/ezijing.com.pem'))
-    },
+    // https: {
+    //   key: fs.readFileSync(path.join(__dirname, './https/ezijing.com.key')),
+    //   cert: fs.readFileSync(path.join(__dirname, './https/ezijing.com.pem'))
+    // },
     proxy: {
       // '/api/resource': {
       //   target: 'http://com-resource-admin-test.ezijing.com/',