refactor: 重构 management/pages/publishResult 目录下组件, 使用 Vue3 组合式 API 写法 (#167)

web/package.json

@@ -38,6 +38,7 @@
     "@rushstack/eslint-patch": "^1.10.2",
     "@tsconfig/node20": "^20.1.2",
     "@types/node": "^20.11.19",
+    "@types/qrcode": "^1.5.5",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/eslint-config-prettier": "^8.0.0",

web/src/management/components/LeftMenu.vue

@@ -25,7 +25,7 @@ const tabs = [
     text: '投放问卷',
     icon: 'icon-toufang',
     to: {
-      name: 'publishResultPage'
+      name: 'publish'
     }
   },
   {

web/src/management/pages/edit/modules/contentModule/PublishPanel.vue

@@ -53,9 +53,7 @@ export default {
         if (publishRes.code === 200) {
           ElMessage.success('发布成功')
           this.$store.dispatch('edit/getSchemaFromRemote')
-          this.$router.push({
-            name: 'publishResultPage'
-          })
+          this.$router.push({ name: 'publish' })
         } else {
           ElMessage.error(`发布失败 ${publishRes.errmsg}`)
         }

web/src/management/pages/list/components/ToolBar.vue

@@ -48,7 +48,7 @@ export default {
           return
         case 'release':
           this.$router.push({
-            name: 'publishResultPage',
+            name: 'publish',
             params: {
               id: this.data._id
             }

web/src/management/pages/publish/PublishPage.vue

@@ -3,7 +3,7 @@
     <LeftMenu class="left" />
     <div class="right">
       <template v-if="curStatus !== 'new'">
-        <div class="preview-container" :style="{ backgroundImage: `url('${this.phoneBg}')` }">
+        <div class="preview-container" :style="{ backgroundImage: `url('${backgroundImage}')` }">
           <iframe :src="mainChannel.fullUrl"></iframe>
         </div>
         <div class="container-content">
@@ -20,13 +20,14 @@
           </div>
         </div>
       </template>
-      <EmptyIndex v-else :data="noDataConfig" />
+      <EmptyIndex v-else :data="defaultConfig" />
     </div>
   </div>
 </template>
-
-<script>
-import { mapState } from 'vuex'
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { useStore } from 'vuex'
+import { useRoute, useRouter } from 'vue-router'
 import { get as _get } from 'lodash-es'
 
 import { ElMessage } from 'element-plus'
@@ -34,61 +35,43 @@ import 'element-plus/theme-chalk/src/message.scss'
 
 import EmptyIndex from '@/management/components/EmptyIndex.vue'
 import LeftMenu from '@/management/components/LeftMenu.vue'
-
 import ChannelRow from './components/ChannelRow.vue'
 
-export default {
-  name: 'PublishResultPage',
-  data() {
-    return {
-      noDataConfig: {
-        title: '问卷未发布',
-        desc: '点击发布后，问卷就可以对外投放了哦！',
-        img: '/imgs/icons/unpublished.webp'
-      },
-      phoneBg: '/imgs/phone-bg.webp'
-    }
-  },
-  async created() {
-    this.$store.commit('edit/setSurveyId', this.$route.params.id)
-    try {
-      await this.$store.dispatch('edit/init')
-    } catch (error) {
-      ElMessage.error(error.message)
-      // 自动跳转回列表页
-      setTimeout(() => {
-        this.$router.replace({
-          name: 'survey'
-        })
-      }, 1000)
-    }
-  },
-  computed: {
-    ...mapState({
-      metaData: (state) => _get(state, 'edit.schema.metaData')
-    }),
-    curStatus() {
-      return _get(this.metaData, 'curStatus.status', 'new')
-    },
-    mainChannel() {
-      if (!this.metaData) {
-        return {
-          fullUrl: ''
-        }
-      }
-      return {
-        fullUrl: `${location.origin}/render/${this.metaData.surveyPath}`
-      }
-    }
-  },
-  components: {
-    ChannelRow,
-    EmptyIndex,
-    LeftMenu
-  }
+const backgroundImage = '/imgs/phone-bg.webp'
+const defaultConfig = {
+  title: '问卷未发布',
+  desc: '点击发布后，问卷就可以对外投放了哦！',
+  img: '/imgs/icons/unpublished.webp'
 }
-</script>
 
+const store = useStore()
+const metaData = computed(() => _get(store.state, 'edit.schema.metaData'))
+const curStatus = computed(() => _get(metaData.value, 'curStatus.status', 'new'))
+const mainChannel = computed(() => {
+  let fullUrl = ''
+
+  if (metaData.value) {
+    fullUrl = `${location.origin}/render/${metaData.value.surveyPath}`
+  }
+
+  return { fullUrl }
+})
+
+const route = useRoute()
+const router = useRouter()
+onMounted(async () => {
+  store.commit('edit/setSurveyId', route.params.id)
+
+  try {
+    await store.dispatch('edit/init')
+  } catch (err: any) {
+    ElMessage.error(err.message)
+    setTimeout(() => {
+      router.replace({ name: 'survey' })
+    }, 1000)
+  }
+})
+</script>
 <style lang="scss" scoped>
 .publish-result-page {
   width: 100%;

web/src/management/pages/publish/components/ChannelRow.vue

@@ -4,63 +4,66 @@
       <div class="left">
         <div class="crc-url-wrap" :class="{ 'no-name': !data.name }">
           <div style="margin-bottom: 16px">
-            <el-input class="cru-content" :model-value="getFullUrl(data)" :readonly="true" />
+            <el-input class="cru-content" :model-value="normalizationURL(data)" :readonly="true" />
           </div>
         </div>
       </div>
       <div class="operate-btn-group">
         <el-tooltip class="item" effect="dark" content="在新页面打开" placement="top">
-          <a class="cru-suffix j-open" @click="openPage(getFullUrl(data))">
+          <a class="cru-suffix j-open" @click="handleOpenPage(normalizationURL(data))">
             <i class="font23 iconfont icon-jinru"></i>
           </a>
         </el-tooltip>
         <el-tooltip class="item" effect="dark" content="复制链接" placement="top">
-          <a class="cru-suffix j-copy" :data-clipboard-text="getFullUrl(data)" @click="handleCopy">
+          <a
+            class="cru-suffix j-copy"
+            :data-clipboard-text="normalizationURL(data)"
+            @click="handleCopy"
+          >
             <i class="font23 iconfont icon-fuzhi"></i>
           </a>
         </el-tooltip>
-        <QRCode class="cru-suffix" :url="getFullUrl(data)" />
+        <QRCode class="cru-suffix" :url="normalizationURL(data)" />
       </div>
     </div>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import Clipboard from 'clipboard'
-
 import { ElMessage } from 'element-plus'
 import 'element-plus/theme-chalk/src/message.scss'
 
 import QRCode from './QRCode.vue'
 
-export default {
-  name: 'ChannelRow',
-  components: {
-    QRCode
-  },
-  props: ['data', 'styleWrap'],
-  methods: {
-    handleCopy() {
-      const clipboard = new Clipboard('.j-copy')
-      clipboard.on('success', (e) => {
-        ElMessage({
-          type: 'success',
-          message: `已复制渠道链接：${e.text}`
-        })
-      })
-    },
-    openPage(url) {
-      window.open(url)
-    },
-    getFullUrl(v) {
-      const url = v.fullUrl
-      const protocol = window.location.protocol
-      return `${protocol}//${url.split('//')[1]}`
-    }
-  }
+interface Props {
+  data: any
+  styleWrap: any
+}
+
+defineProps<Props>()
+
+const handleCopy = () => {
+  const clipboard = new Clipboard('.j-copy')
+  clipboard.on('success', (e) => {
+    ElMessage({
+      type: 'success',
+      message: `已复制渠道链接：${e.text}`
+    })
+
+    clipboard.destroy()
+  })
+}
+
+const handleOpenPage = (url: string) => window.open(url)
+
+const normalizationURL = (value: any) => {
+  const url = value.fullUrl
+  const protocol = window.location.protocol
+
+  return `${protocol}//${url.split('//')[1]}`
 }
 </script>
-
 <style lang="scss" scoped>
 .channel-list-wrap div.normal-row-wrap {
   position: relative;

web/src/management/pages/publish/components/QRCode.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="qrcode" @mouseover="inQcode = true" @mouseout="inQcode = false">
+  <div class="qrcode">
     <div class="qcode-mask">
       <el-popover
         ref="popover"
@@ -18,42 +18,42 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref, watch, computed, nextTick } from 'vue'
+
 import QRCode from 'qrcode'
 
-export default {
-  name: 'QRCode',
-  props: ['url'],
-  data() {
-    return {
-      inQcode: false,
-      qRCodeImg: ''
-    }
-  },
-  methods: {
-    initQRCodeImg() {
-      QRCode.toDataURL(this.url)
-        .then((url) => {
-          this.qRCodeImg = url
-        })
-        .catch((err) => {
-          console.error(err)
-        })
-    }
-  },
-  watch: {
-    url: {
-      immediate: true,
-      handler(newVal) {
-        if (newVal) {
-          this.$nextTick(() => {
-            this.initQRCodeImg()
-          })
-        }
-      }
-    }
+interface Props {
+  url: string
+}
+
+const props = defineProps<Props>()
+
+const qRCodeImg = ref<string>('')
+const watchURL = computed<string>(() => props.url)
+
+const convertUrlToQRCode = async (url: string) => {
+  try {
+    const res = await QRCode.toDataURL(url)
+    qRCodeImg.value = res
+  } catch (err) {
+    console.log(err)
   }
 }
+
+watch(
+  watchURL,
+  (value) => {
+    if ((!qRCodeImg.value && value) || watchURL.value !== value) {
+      nextTick(() => {
+        convertUrlToQRCode(value)
+      })
+    }
+  },
+  {
+    immediate: true
+  }
+)
 </script>
 
 <style lang="scss" scoped>

web/src/management/router/index.ts

@@ -94,12 +94,12 @@ const routes: RouteRecordRaw[] = [
     component: () => import('../pages/analysis/AnalysisPage.vue')
   },
   {
-    path: '/survey/:id/publishResult',
-    name: 'publishResultPage',
+    path: '/survey/:id/publish',
+    name: 'publish',
     meta: {
       needLogin: true
     },
-    component: () => import('../pages/publishResult/PublishResultPage.vue')
+    component: () => import('../pages/publish/PublishPage.vue')
   },
   {
     path: '/create',