ok 基本上结束了

package.json

@@ -27,6 +27,7 @@
     "js-md5": "^0.8.3",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
+    "opencc-js": "^1.0.5",
     "pinia": "^2.1.7",
     "sortablejs": "^1.15.2",
     "v-distpicker": "2.1.0",

pnpm-lock.yaml

@@ -53,6 +53,9 @@ dependencies:
   moment:
     specifier: ^2.30.1
     version: 2.30.1
+  opencc-js:
+    specifier: ^1.0.5
+    version: 1.0.5
   pinia:
     specifier: ^2.1.7
     version: 2.1.7(vue@3.4.20)
@@ -226,7 +229,7 @@ packages:
     dev: false
 
   /@esbuild/aix-ppc64@0.19.12:
-    resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
+    resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==, tarball: https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [aix]
@@ -235,7 +238,7 @@ packages:
     optional: true
 
   /@esbuild/android-arm64@0.19.12:
-    resolution: {integrity: sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==}
+    resolution: {integrity: sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==, tarball: https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [android]
@@ -244,7 +247,7 @@ packages:
     optional: true
 
   /@esbuild/android-arm@0.19.12:
-    resolution: {integrity: sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==}
+    resolution: {integrity: sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==, tarball: https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [android]
@@ -253,7 +256,7 @@ packages:
     optional: true
 
   /@esbuild/android-x64@0.19.12:
-    resolution: {integrity: sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==}
+    resolution: {integrity: sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==, tarball: https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
@@ -262,7 +265,7 @@ packages:
     optional: true
 
   /@esbuild/darwin-arm64@0.19.12:
-    resolution: {integrity: sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==}
+    resolution: {integrity: sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==, tarball: https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [darwin]
@@ -271,7 +274,7 @@ packages:
     optional: true
 
   /@esbuild/darwin-x64@0.19.12:
-    resolution: {integrity: sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==}
+    resolution: {integrity: sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==, tarball: https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [darwin]
@@ -280,7 +283,7 @@ packages:
     optional: true
 
   /@esbuild/freebsd-arm64@0.19.12:
-    resolution: {integrity: sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==}
+    resolution: {integrity: sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==, tarball: https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [freebsd]
@@ -289,7 +292,7 @@ packages:
     optional: true
 
   /@esbuild/freebsd-x64@0.19.12:
-    resolution: {integrity: sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==}
+    resolution: {integrity: sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==, tarball: https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [freebsd]
@@ -298,7 +301,7 @@ packages:
     optional: true
 
   /@esbuild/linux-arm64@0.19.12:
-    resolution: {integrity: sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==}
+    resolution: {integrity: sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==, tarball: https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [linux]
@@ -307,7 +310,7 @@ packages:
     optional: true
 
   /@esbuild/linux-arm@0.19.12:
-    resolution: {integrity: sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==}
+    resolution: {integrity: sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==, tarball: https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [linux]
@@ -316,7 +319,7 @@ packages:
     optional: true
 
   /@esbuild/linux-ia32@0.19.12:
-    resolution: {integrity: sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==}
+    resolution: {integrity: sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==, tarball: https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [linux]
@@ -325,7 +328,7 @@ packages:
     optional: true
 
   /@esbuild/linux-loong64@0.19.12:
-    resolution: {integrity: sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==}
+    resolution: {integrity: sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==, tarball: https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [loong64]
     os: [linux]
@@ -334,7 +337,7 @@ packages:
     optional: true
 
   /@esbuild/linux-mips64el@0.19.12:
-    resolution: {integrity: sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==}
+    resolution: {integrity: sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==, tarball: https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [mips64el]
     os: [linux]
@@ -343,7 +346,7 @@ packages:
     optional: true
 
   /@esbuild/linux-ppc64@0.19.12:
-    resolution: {integrity: sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==}
+    resolution: {integrity: sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==, tarball: https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [linux]
@@ -352,7 +355,7 @@ packages:
     optional: true
 
   /@esbuild/linux-riscv64@0.19.12:
-    resolution: {integrity: sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==}
+    resolution: {integrity: sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==, tarball: https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [riscv64]
     os: [linux]
@@ -361,7 +364,7 @@ packages:
     optional: true
 
   /@esbuild/linux-s390x@0.19.12:
-    resolution: {integrity: sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==}
+    resolution: {integrity: sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==, tarball: https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [s390x]
     os: [linux]
@@ -370,7 +373,7 @@ packages:
     optional: true
 
   /@esbuild/linux-x64@0.19.12:
-    resolution: {integrity: sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==}
+    resolution: {integrity: sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==, tarball: https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [linux]
@@ -379,7 +382,7 @@ packages:
     optional: true
 
   /@esbuild/netbsd-x64@0.19.12:
-    resolution: {integrity: sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==}
+    resolution: {integrity: sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==, tarball: https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
@@ -388,7 +391,7 @@ packages:
     optional: true
 
   /@esbuild/openbsd-x64@0.19.12:
-    resolution: {integrity: sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==}
+    resolution: {integrity: sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==, tarball: https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
@@ -397,7 +400,7 @@ packages:
     optional: true
 
   /@esbuild/sunos-x64@0.19.12:
-    resolution: {integrity: sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==}
+    resolution: {integrity: sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==, tarball: https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [sunos]
@@ -406,7 +409,7 @@ packages:
     optional: true
 
   /@esbuild/win32-arm64@0.19.12:
-    resolution: {integrity: sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==}
+    resolution: {integrity: sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==, tarball: https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [win32]
@@ -415,7 +418,7 @@ packages:
     optional: true
 
   /@esbuild/win32-ia32@0.19.12:
-    resolution: {integrity: sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==}
+    resolution: {integrity: sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==, tarball: https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [win32]
@@ -424,7 +427,7 @@ packages:
     optional: true
 
   /@esbuild/win32-x64@0.19.12:
-    resolution: {integrity: sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==}
+    resolution: {integrity: sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==, tarball: https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [win32]
@@ -450,7 +453,7 @@ packages:
     dev: false
 
   /@fullcalendar/core@6.1.11:
-    resolution: {integrity: sha512-TjG7c8sUz+Vkui2FyCNJ+xqyu0nq653Ibe99A66LoW95oBo6tVhhKIaG1Wh0GVKymYiqAQN/OEdYTuj4ay27kA==}
+    resolution: {integrity: sha512-TjG7c8sUz+Vkui2FyCNJ+xqyu0nq653Ibe99A66LoW95oBo6tVhhKIaG1Wh0GVKymYiqAQN/OEdYTuj4ay27kA==, tarball: https://registry.npmmirror.com/@fullcalendar/core/-/core-6.1.11.tgz}
     dependencies:
       preact: 10.12.1
     dev: false
@@ -520,7 +523,7 @@ packages:
     dev: true
 
   /@rollup/rollup-android-arm-eabi@4.12.0:
-    resolution: {integrity: sha512-+ac02NL/2TCKRrJu2wffk1kZ+RyqxVUlbjSagNgPm94frxtr+XDL12E5Ll1enWskLrtrZ2r8L3wED1orIibV/w==}
+    resolution: {integrity: sha512-+ac02NL/2TCKRrJu2wffk1kZ+RyqxVUlbjSagNgPm94frxtr+XDL12E5Ll1enWskLrtrZ2r8L3wED1orIibV/w==, tarball: https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.0.tgz}
     cpu: [arm]
     os: [android]
     requiresBuild: true
@@ -528,7 +531,7 @@ packages:
     optional: true
 
   /@rollup/rollup-android-arm64@4.12.0:
-    resolution: {integrity: sha512-OBqcX2BMe6nvjQ0Nyp7cC90cnumt8PXmO7Dp3gfAju/6YwG0Tj74z1vKrfRz7qAv23nBcYM8BCbhrsWqO7PzQQ==}
+    resolution: {integrity: sha512-OBqcX2BMe6nvjQ0Nyp7cC90cnumt8PXmO7Dp3gfAju/6YwG0Tj74z1vKrfRz7qAv23nBcYM8BCbhrsWqO7PzQQ==, tarball: https://registry.npmmirror.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.12.0.tgz}
     cpu: [arm64]
     os: [android]
     requiresBuild: true
@@ -536,7 +539,7 @@ packages:
     optional: true
 
   /@rollup/rollup-darwin-arm64@4.12.0:
-    resolution: {integrity: sha512-X64tZd8dRE/QTrBIEs63kaOBG0b5GVEd3ccoLtyf6IdXtHdh8h+I56C2yC3PtC9Ucnv0CpNFJLqKFVgCYe0lOQ==}
+    resolution: {integrity: sha512-X64tZd8dRE/QTrBIEs63kaOBG0b5GVEd3ccoLtyf6IdXtHdh8h+I56C2yC3PtC9Ucnv0CpNFJLqKFVgCYe0lOQ==, tarball: https://registry.npmmirror.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.12.0.tgz}
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
@@ -544,7 +547,7 @@ packages:
     optional: true
 
   /@rollup/rollup-darwin-x64@4.12.0:
-    resolution: {integrity: sha512-cc71KUZoVbUJmGP2cOuiZ9HSOP14AzBAThn3OU+9LcA1+IUqswJyR1cAJj3Mg55HbjZP6OLAIscbQsQLrpgTOg==}
+    resolution: {integrity: sha512-cc71KUZoVbUJmGP2cOuiZ9HSOP14AzBAThn3OU+9LcA1+IUqswJyR1cAJj3Mg55HbjZP6OLAIscbQsQLrpgTOg==, tarball: https://registry.npmmirror.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.12.0.tgz}
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
@@ -552,7 +555,7 @@ packages:
     optional: true
 
   /@rollup/rollup-linux-arm-gnueabihf@4.12.0:
-    resolution: {integrity: sha512-a6w/Y3hyyO6GlpKL2xJ4IOh/7d+APaqLYdMf86xnczU3nurFTaVN9s9jOXQg97BE4nYm/7Ga51rjec5nfRdrvA==}
+    resolution: {integrity: sha512-a6w/Y3hyyO6GlpKL2xJ4IOh/7d+APaqLYdMf86xnczU3nurFTaVN9s9jOXQg97BE4nYm/7Ga51rjec5nfRdrvA==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.12.0.tgz}
     cpu: [arm]
     os: [linux]
     requiresBuild: true
@@ -560,7 +563,7 @@ packages:
     optional: true
 
   /@rollup/rollup-linux-arm64-gnu@4.12.0:
-    resolution: {integrity: sha512-0fZBq27b+D7Ar5CQMofVN8sggOVhEtzFUwOwPppQt0k+VR+7UHMZZY4y+64WJ06XOhBTKXtQB/Sv0NwQMXyNAA==}
+    resolution: {integrity: sha512-0fZBq27b+D7Ar5CQMofVN8sggOVhEtzFUwOwPppQt0k+VR+7UHMZZY4y+64WJ06XOhBTKXtQB/Sv0NwQMXyNAA==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.12.0.tgz}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
@@ -569,7 +572,7 @@ packages:
     optional: true
 
   /@rollup/rollup-linux-arm64-musl@4.12.0:
-    resolution: {integrity: sha512-eTvzUS3hhhlgeAv6bfigekzWZjaEX9xP9HhxB0Dvrdbkk5w/b+1Sxct2ZuDxNJKzsRStSq1EaEkVSEe7A7ipgQ==}
+    resolution: {integrity: sha512-eTvzUS3hhhlgeAv6bfigekzWZjaEX9xP9HhxB0Dvrdbkk5w/b+1Sxct2ZuDxNJKzsRStSq1EaEkVSEe7A7ipgQ==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.12.0.tgz}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
@@ -578,7 +581,7 @@ packages:
     optional: true
 
   /@rollup/rollup-linux-riscv64-gnu@4.12.0:
-    resolution: {integrity: sha512-ix+qAB9qmrCRiaO71VFfY8rkiAZJL8zQRXveS27HS+pKdjwUfEhqo2+YF2oI+H/22Xsiski+qqwIBxVewLK7sw==}
+    resolution: {integrity: sha512-ix+qAB9qmrCRiaO71VFfY8rkiAZJL8zQRXveS27HS+pKdjwUfEhqo2+YF2oI+H/22Xsiski+qqwIBxVewLK7sw==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.12.0.tgz}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
@@ -587,7 +590,7 @@ packages:
     optional: true
 
   /@rollup/rollup-linux-x64-gnu@4.12.0:
-    resolution: {integrity: sha512-TenQhZVOtw/3qKOPa7d+QgkeM6xY0LtwzR8OplmyL5LrgTWIXpTQg2Q2ycBf8jm+SFW2Wt/DTn1gf7nFp3ssVA==}
+    resolution: {integrity: sha512-TenQhZVOtw/3qKOPa7d+QgkeM6xY0LtwzR8OplmyL5LrgTWIXpTQg2Q2ycBf8jm+SFW2Wt/DTn1gf7nFp3ssVA==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.12.0.tgz}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
@@ -596,7 +599,7 @@ packages:
     optional: true
 
   /@rollup/rollup-linux-x64-musl@4.12.0:
-    resolution: {integrity: sha512-LfFdRhNnW0zdMvdCb5FNuWlls2WbbSridJvxOvYWgSBOYZtgBfW9UGNJG//rwMqTX1xQE9BAodvMH9tAusKDUw==}
+    resolution: {integrity: sha512-LfFdRhNnW0zdMvdCb5FNuWlls2WbbSridJvxOvYWgSBOYZtgBfW9UGNJG//rwMqTX1xQE9BAodvMH9tAusKDUw==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.12.0.tgz}
     cpu: [x64]
     os: [linux]
     libc: [musl]
@@ -605,7 +608,7 @@ packages:
     optional: true
 
   /@rollup/rollup-win32-arm64-msvc@4.12.0:
-    resolution: {integrity: sha512-JPDxovheWNp6d7AHCgsUlkuCKvtu3RB55iNEkaQcf0ttsDU/JZF+iQnYcQJSk/7PtT4mjjVG8N1kpwnI9SLYaw==}
+    resolution: {integrity: sha512-JPDxovheWNp6d7AHCgsUlkuCKvtu3RB55iNEkaQcf0ttsDU/JZF+iQnYcQJSk/7PtT4mjjVG8N1kpwnI9SLYaw==, tarball: https://registry.npmmirror.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.12.0.tgz}
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
@@ -613,7 +616,7 @@ packages:
     optional: true
 
   /@rollup/rollup-win32-ia32-msvc@4.12.0:
-    resolution: {integrity: sha512-fjtuvMWRGJn1oZacG8IPnzIV6GF2/XG+h71FKn76OYFqySXInJtseAqdprVTDTyqPxQOG9Exak5/E9Z3+EJ8ZA==}
+    resolution: {integrity: sha512-fjtuvMWRGJn1oZacG8IPnzIV6GF2/XG+h71FKn76OYFqySXInJtseAqdprVTDTyqPxQOG9Exak5/E9Z3+EJ8ZA==, tarball: https://registry.npmmirror.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.12.0.tgz}
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
@@ -621,7 +624,7 @@ packages:
     optional: true
 
   /@rollup/rollup-win32-x64-msvc@4.12.0:
-    resolution: {integrity: sha512-ZYmr5mS2wd4Dew/JjT0Fqi2NPB/ZhZ2VvPp7SmvPZb4Y1CG/LRcS6tcRo2cYU7zLK5A7cdbhWnnWmUjoI4qapg==}
+    resolution: {integrity: sha512-ZYmr5mS2wd4Dew/JjT0Fqi2NPB/ZhZ2VvPp7SmvPZb4Y1CG/LRcS6tcRo2cYU7zLK5A7cdbhWnnWmUjoI4qapg==, tarball: https://registry.npmmirror.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.12.0.tgz}
     cpu: [x64]
     os: [win32]
     requiresBuild: true
@@ -629,7 +632,7 @@ packages:
     optional: true
 
   /@sxzz/popperjs-es@2.11.7:
-    resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
+    resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==, tarball: https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz}
     dev: false
 
   /@types/estree@1.0.5:
@@ -1149,7 +1152,7 @@ packages:
     dev: false
 
   /fsevents@2.3.3:
-    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==, tarball: https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
@@ -1310,6 +1313,10 @@ packages:
     resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
     dev: false
 
+  /opencc-js@1.0.5:
+    resolution: {integrity: sha512-LD+1SoNnZdlRwtYTjnQdFrSVCAaYpuDqL5CkmOaHOkKoKh7mFxUicLTRVNLU5C+Jmi1vXQ3QL4jWdgSaa4sKjg==, tarball: https://registry.npmmirror.com/opencc-js/-/opencc-js-1.0.5.tgz}
+    dev: false
+
   /path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
@@ -1349,7 +1356,7 @@ packages:
       source-map-js: 1.0.2
 
   /preact@10.12.1:
-    resolution: {integrity: sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==}
+    resolution: {integrity: sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==, tarball: https://registry.npmmirror.com/preact/-/preact-10.12.1.tgz}
     dev: false
 
   /proxy-from-env@1.1.0:

src/router/modules/cygxRoutes.js

@@ -447,236 +447,280 @@ export default [
     ],
   },
 
-  // /* 弘则活动管理 */
-  // {
-  //   path: "/",
-  //   component: home,
-  //   name: "弘则活动管理",
-  //   hidden: false,
-  //   icon_path: require("@/assets/img/home/rai_activity.png"),
-  //   children: [
-  //     {
-  //       path: "activityManage",
-  //       component: () => import("@/views/rai_manage/activityManage/activityManage.vue"),
-  //       name: "活动管理",
-  //       hidden: false,
-  //       meta: {
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "addActivity",
-  //       component: () => import("@/views/rai_manage/activityManage/components/addActivity.vue"),
-  //       name: "添加活动",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "activityManage",
-  //         pathName: "活动管理",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "editActivity",
-  //       component: () => import("@/views/rai_manage/activityManage/components/addActivity.vue"),
-  //       name: "编辑活动",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "activityManage",
-  //         pathName: "活动管理",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "applyManage",
-  //       component: () => import("@/views/rai_manage/activityManage/applyManage.vue"),
-  //       name: "报名管理",
-  //       hidden: false,
-  //     },
-  //     {
-  //       path: "meetingManagement",
-  //       component: () => import("@/views/rai_manage/activityManage/meetingManagement.vue"),
-  //       name: "到会管理",
-  //       hidden: false,
-  //     },
-  //     {
-  //       path: "practicalMeeting",
-  //       component: () => import("@/views/rai_manage/activityManage/practicalMeeting.vue"),
-  //       name: "线下到会管理",
-  //       hidden: false,
-  //     },
-  //     {
-  //       path: "appointment",
-  //       component: () => import("@/views/rai_manage/activityManage/components/appointment.vue"),
-  //       name: "爽约记录",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "practicalMeeting",
-  //         pathName: "到会管理",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "onLineManage",
-  //       component: () => import("@/views/rai_manage/activityManage/onLineManage.vue"),
-  //       name: "线上到会管理",
-  //       hidden: false,
-  //     },
-  //     {
-  //       path: "onLineAppointment",
-  //       component: () => import("@/views/rai_manage/activityManage/components/appointment.vue"),
-  //       name: "爽约记录",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "onLineManage",
-  //         pathName: "线上到会管理",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "attendMeeting",
-  //       component: () => import("@/views/rai_manage/activityManage/components/attendMeeting.vue"),
-  //       name: "到会详情",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "onLineManage",
-  //         pathName: "到会管理",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "specialResearch",
-  //       component: () => import("@/views/rai_manage/activityManage/specialResearch.vue"),
-  //       name: "专项调研",
-  //       hidden: false,
-  //     },
-  //     {
-  //       path: "addResearch",
-  //       component: () => import("@/views/rai_manage/activityManage/specialResearch/addResearch.vue"),
-  //       name: "添加活动",
-  //       hidden: false,
-  //       meta: {
-  //         pathFrom: "specialResearch",
-  //         pathName: "专项调研",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "editResearch",
-  //       component: () => import("@/views/rai_manage/activityManage/specialResearch/addResearch.vue"),
-  //       name: "编辑活动",
-  //       hidden: false,
-  //       meta: {
-  //         pathFrom: "specialResearch",
-  //         pathName: "专项调研",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "determineTravel",
-  //       component: () => import("@/views/rai_manage/activityManage/specialResearch/determineTravel.vue"),
-  //       name: "确定行程",
-  //       hidden: false,
-  //       meta: {
-  //         pathFrom: "specialResearch",
-  //         pathName: "专项调研",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "interestAllPreview",
-  //       component: () => import("@/views/rai_manage/activityManage/specialResearch/interestAllPreview.vue"),
-  //       name: "客户兴趣总览",
-  //       hidden: false,
-  //       meta: {
-  //         pathFrom: "specialResearch",
-  //         pathName: "专项调研",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "roadShow",
-  //       component: () => import("@/views/rai_manage/activityManage/roadShowList.vue"),
-  //       name: "微路演管理",
-  //       hidden: false,
-  //     },
-  //     {
-  //       path: "themeSurveyPage",
-  //       component: () => import("@/views/rai_manage/activityManage/themeSurveyPage.vue"),
-  //       name: "主题调研问卷",
-  //       hidden: false,
-  //     },
-  //   ],
-  // },
-  // /* 研选活动管理 */
-  // {
-  //   path: "/",
-  //   component: home,
-  //   name: "研选活动管理",
-  //   hidden: false,
-  //   icon_path: require("@/assets/img/home/rai_activity.png"),
-  //   children: [
-  //     {
-  //       path: "purchaserActivityManage",
-  //       component: () => import("@/views/rai_manage/activityManage/activityManage.vue"),
-  //       name: "活动管理",
-  //       hidden: false,
-  //     },
-  //     {
-  //       path: "addPurchaserActivity",
-  //       component: () => import("@/views/rai_manage/activityManage/components/addActivity.vue"),
-  //       name: "添加活动",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "purchaserActivityManage",
-  //         pathName: "活动管理",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "editPurchaserActivity",
-  //       component: () => import("@/views/rai_manage/activityManage/components/addActivity.vue"),
-  //       name: "编辑活动",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "purchaserActivityManage",
-  //         pathName: "活动管理",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "purchaserApplyManage",
-  //       component: () => import("@/views/rai_manage/activityManage/applyManage.vue"),
-  //       name: "报名管理",
-  //       hidden: false,
-  //     },
-  //     {
-  //       path: "purchaserMeetingManagement",
-  //       component: () => import("@/views/rai_manage/activityManage/meetingManagement.vue"),
-  //       name: "到会管理",
-  //       hidden: false,
-  //     },
-  //     {
-  //       path: "purchaserAppointment",
-  //       component: () => import("@/views/rai_manage/activityManage/components/appointment.vue"),
-  //       name: "爽约记录",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "practicalMeeting",
-  //         pathName: "到会管理",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "attendMeeting",
-  //       component: () => import("@/views/rai_manage/activityManage/components/attendMeeting.vue"),
-  //       name: "到会详情",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "onLineManage",
-  //         pathName: "到会管理",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //   ],
-  // },
+  /* 弘则活动管理 */
+  {
+    path: "/",
+    component: Home,
+    name: "HZHDGL",
+    hidden: false,
+    // icon_path: require("@/assets/img/home/rai_activity.png"),
+    children: [
+      {
+        path: "activityManage",
+        component: () => import("@/views/rai_manage/activityManage/activityManage.vue"),
+        name: "activityManage",
+        hidden: false,
+        meta: {
+          keepAlive: false,
+          title: "活动管理",
+        },
+      },
+      {
+        path: "addActivity",
+        component: () => import("@/views/rai_manage/activityManage/components/addActivity.vue"),
+        name: "addActivity",
+        hidden: true,
+        meta: {
+          pathFrom: "activityManage",
+          pathName: "活动管理",
+          keepAlive: false,
+          title: "添加活动",
+        },
+      },
+      {
+        path: "editActivity",
+        component: () => import("@/views/rai_manage/activityManage/components/addActivity.vue"),
+        name: "editActivity",
+        hidden: true,
+        meta: {
+          pathFrom: "activityManage",
+          pathName: "活动管理",
+          keepAlive: false,
+          title: "编辑活动",
+        },
+      },
+      {
+        path: "applyManage",
+        component: () => import("@/views/rai_manage/activityManage/applyManage.vue"),
+        name: "applyManage",
+        hidden: false,
+        meta: {
+          title: "报名管理",
+        },
+      },
+      {
+        path: "meetingManagement",
+        component: () => import("@/views/rai_manage/activityManage/meetingManagement.vue"),
+        name: "meetingManagement",
+        hidden: false,
+        meta: {
+          title: "到会管理",
+        },
+      },
+      {
+        path: "practicalMeeting",
+        component: () => import("@/views/rai_manage/activityManage/practicalMeeting.vue"),
+        name: "practicalMeeting",
+        hidden: false,
+        meta: {
+          title: "线下到会管理",
+        },
+      },
+      {
+        path: "appointment",
+        component: () => import("@/views/rai_manage/activityManage/components/appointment.vue"),
+        name: "appointment",
+        hidden: true,
+        meta: {
+          pathFrom: "practicalMeeting",
+          pathName: "到会管理",
+          keepAlive: false,
+          title: "爽约记录",
+        },
+      },
+      {
+        path: "onLineManage",
+        component: () => import("@/views/rai_manage/activityManage/onLineManage.vue"),
+        name: "onLineManage",
+        hidden: false,
+        meta: {
+          title: "线上到会管理",
+        },
+      },
+      {
+        path: "onLineAppointment",
+        component: () => import("@/views/rai_manage/activityManage/components/appointment.vue"),
+        name: "onLineAppointment",
+        hidden: true,
+        meta: {
+          pathFrom: "onLineManage",
+          pathName: "线上到会管理",
+          keepAlive: false,
+          title: "爽约记录",
+        },
+      },
+      {
+        path: "attendMeeting",
+        component: () => import("@/views/rai_manage/activityManage/components/attendMeeting.vue"),
+        name: "attendMeeting",
+        hidden: true,
+        meta: {
+          pathFrom: "onLineManage",
+          pathName: "到会管理",
+          keepAlive: false,
+          title: "到会详情",
+        },
+      },
+      {
+        path: "specialResearch",
+        component: () => import("@/views/rai_manage/activityManage/specialResearch.vue"),
+        name: "specialResearch",
+        hidden: false,
+        meta: {
+          title: "专项调研",
+        },
+      },
+      {
+        path: "addResearch",
+        component: () => import("@/views/rai_manage/activityManage/specialResearch/addResearch.vue"),
+        name: "addResearch",
+        hidden: false,
+        meta: {
+          pathFrom: "specialResearch",
+          pathName: "专项调研",
+          keepAlive: false,
+          title: "添加活动",
+        },
+      },
+      {
+        path: "editResearch",
+        component: () => import("@/views/rai_manage/activityManage/specialResearch/addResearch.vue"),
+        name: "editResearch",
+        hidden: false,
+        meta: {
+          pathFrom: "specialResearch",
+          pathName: "专项调研",
+          keepAlive: false,
+          title: "编辑活动",
+        },
+      },
+      {
+        path: "determineTravel",
+        component: () => import("@/views/rai_manage/activityManage/specialResearch/determineTravel.vue"),
+        name: "determineTravel",
+        hidden: false,
+        meta: {
+          pathFrom: "specialResearch",
+          pathName: "专项调研",
+          keepAlive: false,
+          title: "确定行程",
+        },
+      },
+      {
+        path: "interestAllPreview",
+        component: () => import("@/views/rai_manage/activityManage/specialResearch/interestAllPreview.vue"),
+        name: "interestAllPreview",
+        hidden: false,
+        meta: {
+          pathFrom: "specialResearch",
+          pathName: "专项调研",
+          keepAlive: false,
+          title: "客户兴趣总览",
+        },
+      },
+      {
+        path: "roadShow",
+        component: () => import("@/views/rai_manage/activityManage/roadShowList.vue"),
+        name: "roadShow",
+        hidden: false,
+        meta: {
+          title: "微路演管理",
+        },
+      },
+      {
+        path: "themeSurveyPage",
+        component: () => import("@/views/rai_manage/activityManage/themeSurveyPage.vue"),
+        name: "themeSurveyPage",
+        hidden: false,
+        meta: {
+          title: "主题调研问卷",
+        },
+      },
+    ],
+  },
+  /* 研选活动管理 */
+  {
+    path: "/",
+    component: Home,
+    name: "YXHDGL",
+    hidden: false,
+    // icon_path: require("@/assets/img/home/rai_activity.png"),
+    children: [
+      {
+        path: "purchaserActivityManage",
+        component: () => import("@/views/rai_manage/activityManage/activityManage.vue"),
+        name: "purchaserActivityManage",
+        hidden: false,
+        meta: {
+          title: "活动管理",
+        },
+      },
+      {
+        path: "addPurchaserActivity",
+        component: () => import("@/views/rai_manage/activityManage/components/addActivity.vue"),
+        name: "addPurchaserActivity",
+        hidden: true,
+        meta: {
+          pathFrom: "purchaserActivityManage",
+          pathName: "活动管理",
+          keepAlive: false,
+          title: "添加活动",
+        },
+      },
+      {
+        path: "editPurchaserActivity",
+        component: () => import("@/views/rai_manage/activityManage/components/addActivity.vue"),
+        name: "editPurchaserActivity",
+        hidden: true,
+        meta: {
+          pathFrom: "purchaserActivityManage",
+          pathName: "活动管理",
+          keepAlive: false,
+          title: "编辑活动",
+        },
+      },
+      {
+        path: "purchaserApplyManage",
+        component: () => import("@/views/rai_manage/activityManage/applyManage.vue"),
+        name: "purchaserApplyManage",
+        hidden: false,
+        meta: {
+          title: "报名管理",
+        },
+      },
+      {
+        path: "purchaserMeetingManagement",
+        component: () => import("@/views/rai_manage/activityManage/meetingManagement.vue"),
+        name: "purchaserMeetingManagement",
+        hidden: false,
+        meta: {
+          title: "到会管理",
+        },
+      },
+      {
+        path: "purchaserAppointment",
+        component: () => import("@/views/rai_manage/activityManage/components/appointment.vue"),
+        name: "purchaserAppointment",
+        hidden: true,
+        meta: {
+          pathFrom: "practicalMeeting",
+          pathName: "到会管理",
+          keepAlive: false,
+          title: "爽约记录",
+        },
+      },
+      {
+        path: "attendMeeting",
+        component: () => import("@/views/rai_manage/activityManage/components/attendMeeting.vue"),
+        name: "attendMeeting",
+        hidden: true,
+        meta: {
+          pathFrom: "onLineManage",
+          pathName: "到会管理",
+          keepAlive: false,
+          title: "到会详情",
+        },
+      },
+    ],
+  },
 ];

src/views/rai_manage/activityManage/activityManage.vue

@@ -1,3 +1,333 @@
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  beforeRouteEnter(to, from, next) {
+    if (from.path != "/editActivity") {
+      sessionStorage.removeItem("cativityBack");
+    }
+    next();
+  },
+});
+</script>
+
+<script setup>
+import { ref, watch, onMounted, reactive, computed, toRefs } from "vue";
+import { raiInterface, sealInterence } from "@/api/api.js";
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+import { Search } from "@element-plus/icons-vue";
+import mPage from "@/components/mPage.vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+
+import * as OpenCC from "opencc-js";
+// 将繁体中文（香港）转换为简体中文（中国大陆）
+const converter = OpenCC.Converter({ from: "hk", to: "cn" });
+
+import AtcParticulars from "../components/atcParticulars.vue";
+import imgMeeting from "./components/imgMeeting.vue";
+
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  listTitle: [
+    {
+      PermissionName: "未开始",
+      Id: "NotStarted",
+    },
+    {
+      PermissionName: "进行中",
+      Id: "HaveInHand",
+    },
+    {
+      PermissionName: "已结束",
+      Id: "Complete",
+    },
+  ],
+  tabsPitchon: 0, //tabs 默认选中
+  page_no: sessionStorage.getItem("cativityBack") ? JSON.parse(sessionStorage.getItem("cativityBack")).page_no : 1,
+  dataList: [], //表格内容
+  industry: "", //行业
+  status: "", //状态
+  issueTime: "", //时间
+  cactivityTypeVal: "", //活动
+  options: [
+    { id: 1, name: "已发布" },
+    { id: 0, name: "未发布" },
+    { id: 3, name: "已取消" },
+  ],
+  titleValue: "", //标题关键词
+  total: 0, //条数
+  PageSize: 10, //每页显示几条
+  chartPermissionList: [], //行业的数组
+  cactivityTypeList: [], //活动类型
+  dialogVisible: false, //弹框
+  activeStateId: "NotStarted",
+  detailData: {}, //
+  activityLabel: "",
+  publishDate: "",
+  baseApi: import.meta.env.VITE_APP_API_ROOT,
+  isShowImgMeetingDlg: false,
+  imgMeetingData: [],
+});
+
+const sta = computed(() => {
+  return pageState.status >= 0 && typeof pageState.status == "number" ? pageState.status : 2;
+});
+
+const isResearch = computed(() => {
+  return $route.path.indexOf("purchaser") != -1 ? true : false;
+});
+
+function titleInput() {
+  pageState.page_no = 1;
+  init();
+  getsummaryManageList();
+}
+function init() {
+  pageState.industry = ""; //行业
+  pageState.status = ""; //状态
+  pageState.issueTime = ""; //时间
+  pageState.cactivityTypeVal = ""; //活动
+  pageState.sta = "";
+}
+//头部tabs
+function tabsBoxBtn(item, index) {
+  pageState.activeStateId = item.Id;
+  pageState.tabsPitchon = index;
+  pageState.page_no = 1;
+  getsummaryManageList();
+}
+function operationBtn(id, value) {
+  ElMessageBox.confirm(`确定${value}该活动吗？`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      if (value == "删除") {
+        raiInterface
+          .activityDelete({
+            ActivityId: id,
+          })
+          .then((res) => {
+            if (res.Ret !== 200) return;
+            ElMessage.success("删除成功！");
+            let page_num = Math.ceil((pageState.total - 1) / pageState.PageSize);
+            if (pageState.page_no > page_num) {
+              pageState.page_no = page_num;
+            }
+            getsummaryManageList();
+          });
+      } else {
+        raiInterface
+          .activityPublishAndCancel({
+            ActivityId: id,
+          })
+          .then((res) => {
+            if (res.Ret !== 200) return;
+            ElMessage.success(value + "成功！");
+            getsummaryManageList();
+          });
+      }
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: `已取消${value}`,
+      });
+    });
+}
+//编辑
+function editBtn(id, show) {
+  $router.push({
+    path: !pageState.isResearch ? "/editActivity" : "/editPurchaserActivity",
+    query: {
+      id: id,
+      isShow: show,
+    },
+  });
+}
+//分页
+function handleCurrentChange(page) {
+  pageState.page_no = page;
+  getsummaryManageList();
+}
+//获取行业
+function chartPermission() {
+  raiInterface.chartPermission({ IsHideResearch: !pageState.isResearch }).then((res) => {
+    if (res.Ret === 200) {
+      pageState.chartPermissionList = res.Data.List;
+    }
+  });
+}
+//活动类型
+function activityType() {
+  raiInterface.getActivityType({ IsResearch: pageState.isResearch }).then((res) => {
+    if (res.Ret === 200) {
+      pageState.cactivityTypeList = res.Data.List;
+    }
+  });
+}
+//列表
+function getsummaryManageList() {
+  raiInterface
+    .getActivityList({
+      CurrentIndex: pageState.page_no,
+      PageSize: pageState.PageSize,
+      PublishStatus: pageState.sta - 0,
+      ChartPermissionId: pageState.industry,
+      StartDate: pageState.issueTime[0],
+      EndDate: pageState.issueTime[1],
+      KeyWord: pageState.titleValue,
+      ActivityTypeId: pageState.cactivityTypeVal,
+      ActiveState: pageState.activeStateId,
+      ActivityLabel: pageState.activityLabel,
+      PublishStartDate: pageState.publishDate,
+      IsResearch: pageState.isResearch,
+    })
+    .then((res) => {
+      if (res.Ret !== 200) return;
+      pageState.dataList = res.Data.List;
+      pageState.total = res.Data.Paging.Totals;
+    });
+}
+//change事件
+function conditionChange() {
+  pageState.page_no = 1;
+  getsummaryManageList();
+}
+//点击标题的弹框
+function titleBtnClick(id) {
+  raiInterface.activityDetail({ ActivityId: Number(id) }).then((res) => {
+    if (res.Ret == 200) {
+      pageState.detailData = res.Data;
+    }
+  });
+  pageState.dialogVisible = true;
+}
+// 下载图片
+function handleDownLoadImg(row) {
+  let img = new Image();
+  img.setAttribute("crossOrigin", "anonymous");
+  img.src = row.SigninImg;
+  img.onload = () => {
+    let canvas = document.createElement("canvas");
+    canvas.width = img.width;
+    canvas.height = img.height;
+    let context = canvas.getContext("2d");
+    context.drawImage(img, 0, 0, img.width, img.height);
+    let dataURL = canvas.toDataURL("image/png", 1);
+    const a = document.createElement("a");
+    a.setAttribute("download", "签到码.png");
+    a.style.display = "none";
+    a.href = dataURL;
+    document.body.appendChild(a);
+    a.click();
+  };
+}
+async function handleUploadImg(params) {
+  if (!params.file) return;
+  const fd = new FormData();
+  fd.append("file", params.file);
+  try {
+    const res = await sealInterence.resourceUpload(fd);
+    if (res.Ret === 200) {
+      const resImg = await raiInterface.activityImgToText({
+        ImgUrl: res.Data.ResourceUrl,
+      });
+      if (resImg.Ret === 200) {
+        pageState.isShowImgMeetingDlg = true;
+        pageState.imgMeetingData = resImg.Data.List.map((item) => {
+          return {
+            ...item,
+            Company: converter(item.Company),
+          };
+        });
+      }
+    }
+  } catch (err) {}
+}
+const imgUpload = ref(null);
+// 点击取消的回调事件
+function childrenImgMeetingHandler() {
+  imgUpload.value.clearFiles();
+}
+// 是否置顶
+async function overheadHandler(id) {
+  const res = await raiInterface.yanxuan_tope_change({
+    ActivityId: id,
+  });
+  if (res.Ret !== 200) return;
+  ElMessage.success("操作成功！");
+  getsummaryManageList();
+}
+function deleteLabelItem() {
+  pageState.imgMeetingData.splice(index, 1);
+}
+
+onMounted(() => {
+  if (sessionStorage.getItem("cativityBack")) {
+    const initialize = JSON.parse(sessionStorage.getItem("cativityBack"));
+    pageState.titleValue = initialize.keyword;
+    pageState.industry = initialize.industry;
+    pageState.status = initialize.status;
+    pageState.issueTime = initialize.issueTime;
+    pageState.cactivityTypeVal = initialize.cactivityTypeVal;
+    pageState.activeStateId = initialize.activeStateId;
+    pageState.tabsPitchon = initialize.tabsPitchon;
+    pageState.activityLabel = initialize.activityLabel;
+    pageState.publishDate = initialize.publishDate;
+  }
+  // 研选下 没有行业的搜索框
+  !pageState.isResearch && chartPermission();
+  activityType();
+  getsummaryManageList();
+});
+
+onBeforeRouteLeave((to, form, next) => {
+  let backData = {
+    page_no: pageState.page_no,
+    keyword: pageState.titleValue,
+    industry: pageState.industry, //行业
+    status: pageState.status, //状态
+    issueTime: pageState.issueTime, //时间
+    cactivityTypeVal: pageState.cactivityTypeVal, //活动
+    activeStateId: pageState.activeStateId, //
+    tabsPitchon: pageState.tabsPitchon,
+    activityLabel: pageState.activityLabel,
+    publishDate: pageState.publishDate,
+  };
+  sessionStorage.setItem("cativityBack", JSON.stringify(backData));
+  next();
+});
+
+const {
+  listTitle,
+  tabsPitchon,
+  page_no,
+  dataList,
+  industry,
+  status,
+  issueTime,
+  cactivityTypeVal,
+  options,
+  titleValue,
+  total,
+  PageSize,
+  chartPermissionList,
+  cactivityTypeList,
+  dialogVisible,
+  activeStateId,
+  detailData,
+  activityLabel,
+  publishDate,
+  baseApi,
+  isShowImgMeetingDlg,
+  imgMeetingData,
+} = toRefs(pageState);
+</script>
+
 <template>
   <!-- 活动管理页面 -->
   <div class="container-activity">
@@ -7,11 +337,11 @@
         <div class="tabs-box">
           <span v-for="(item, index) in listTitle" :key="item.ChartPermissionId" @click="tabsBoxBtn(item, index)" :class="index == tabsPitchon ? 'pitch' : ''">{{ item.PermissionName }}</span>
         </div>
-        <div style="display: flex;align-items: center">
-          <el-upload style="height:40px" ref="imgUpload" action="#" :http-request="handleUploadImg" :show-file-list="false" accept="image/*">
-            <el-button style="height:40px" type="primary">识图建会</el-button>
+        <div style="display: flex; align-items: center">
+          <el-upload style="height: 40px" ref="imgUpload" action="#" :http-request="handleUploadImg" :show-file-list="false" accept="image/*">
+            <el-button style="height: 40px" type="primary">识图建会</el-button>
           </el-upload>
-          <el-button style="margin-left: 20px;height:40px" type="primary" @click="$router.push(!isResearch ? '/addActivity' : '/addPurchaserActivity')">添加活动</el-button>
+          <el-button style="margin-left: 20px; height: 40px" type="primary" @click="$router.push(!isResearch ? '/addActivity' : '/addPurchaserActivity')">添加活动</el-button>
         </div>
       </div>
     </el-card>
@@ -20,32 +350,28 @@
       <!-- 选择部分 -->
       <div class="screen-box">
         <div>
-          <el-select placeholder="行业" clearable v-model="industry" @change="conditionChange" style="margin-bottom: 20px" v-if="!isResearch">
+          <el-select placeholder="行业" clearable v-model="industry" @change="conditionChange" v-if="!isResearch">
             <el-option v-for="item in chartPermissionList" :label="item.PermissionName" :key="item.ChartPermissionId" :value="item.ChartPermissionId"></el-option>
           </el-select>
           <el-select placeholder="活动类型" clearable v-model="cactivityTypeVal" @change="conditionChange">
             <el-option v-for="item in cactivityTypeList" :label="item.ActivityTypeName" :key="item.ActivityTypeId" :value="item.ActivityTypeId"></el-option>
           </el-select>
           <el-date-picker v-model="publishDate" type="date" placeholder="发布时间" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" @change="conditionChange"> </el-date-picker>
-          <date-picker style="margin-bottom: 20px" v-model="issueTime" type="date" range placeholder="活动时间" value-type="format" @change="conditionChange"> </date-picker>
-          <el-select placeholder="发布状态" clearable v-model="status" @change="conditionChange" style="margin-bottom: 20px">
+          <date-picker v-model="issueTime" type="date" range placeholder="活动时间" value-type="format" @change="conditionChange"> </date-picker>
+          <el-select placeholder="发布状态" clearable v-model="status" @change="conditionChange">
             <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select>
-          <el-input v-model="activityLabel" @input="titleInput" placeholder="请输入活动标签" clearable style="display: inline-block; width: 220px; margin-bottom: 20px">
-            <i slot="prefix" class="el-input__icon el-icon-search"></i>
-          </el-input>
+          <el-input v-model="activityLabel" @input="titleInput" placeholder="请输入活动标签" clearable style="display: inline-block; width: 220px" :prefix-icon="Search"> </el-input>
         </div>
         <div>
-          <el-input v-model="titleValue" @input="titleInput" placeholder="请输入活动名称" clearable style="display: inline-block; width: 220px">
-            <i slot="prefix" class="el-input__icon el-icon-search"></i>
-          </el-input>
+          <el-input v-model="titleValue" @input="titleInput" placeholder="请输入活动名称" clearable style="display: inline-block; width: 220px" :prefix-icon="Search"> </el-input>
         </div>
       </div>
       <!-- 表格部分 -->
-      <el-table :data="dataList" style="width: 100%" border>
+      <el-table :data="dataList" style="width: 100%; margin-top: 20px" border>
         <el-table-column align="center" label="活动名称" min-width="285">
-          <template slot-scope="{ row }">
-            <span class="editsty" @click="titleBtnClick(row.ActivityId)">{{ row.ActivityName }}</span>
+          <template #default="{ row }">
+            <span :class="row.PublishStatus == 3 ? 'grey-color' : 'editsty'" @click="titleBtnClick(row.ActivityId)">{{ row.ActivityName }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="ChartPermissionName" align="center" label="行业" min-width="90"></el-table-column>
@@ -54,21 +380,21 @@
         <el-table-column min-width="219" prop="ActivityTimeText" align="center" label="活动时间"></el-table-column>
         <el-table-column min-width="200" prop="LastUpdatedTime" align="center" label="更新时间"></el-table-column>
         <el-table-column align="center" label="发布状态" min-width="100">
-          <template slot-scope="{ row }">
+          <template #default="{ row }">
             {{ row.PublishStatus == 0 ? "未发布" : row.PublishStatus == 1 ? "已发布" : "已取消" }}
           </template>
         </el-table-column>
         <el-table-column v-if="tabsPitchon === 2" align="center" label="路演回放" min-width="100">
-          <template slot-scope="{ row }"> {{ row.IsUpload ? "已上传" : "" }} </template>
+          <template #default="{ row }"> {{ row.IsUpload ? "已上传" : "" }} </template>
         </el-table-column>
         <el-table-column align="center" width="156" label="操作">
-          <template slot-scope="{ row }">
+          <template #default="{ row }">
             <div class="operate-box">
               <p v-if="row.PublishStatus == 0 && tabsPitchon == 0" class="editsty" @click="operationBtn(row.ActivityId, '发布')">发布</p>
-              <p v-if="row.PublishStatus == 3" class="editsty" @click="operationBtn(row.ActivityId, '重新发布')">重新发布</p>
+              <p v-if="row.PublishStatus == 3" class="grey-color" @click="operationBtn(row.ActivityId, '重新发布')">重新发布</p>
               <p v-if="row.PublishStatus == 1" class="editsty" @click="operationBtn(row.ActivityId, '取消发布')">取消发布</p>
               &nbsp;&nbsp;
-              <p class="editsty" @click="editBtn(row.ActivityId, row.PublishStatus)">编辑</p>
+              <p :class="row.PublishStatus == 3 ? 'grey-color' : 'editsty'" @click="editBtn(row.ActivityId, row.PublishStatus)">编辑</p>
               &nbsp;&nbsp;
               <p class="deletesty" v-if="row.PublishStatus == 0 && tabsPitchon == 0" @click="operationBtn(row.ActivityId, '删除')">删除</p>
               <p class="editsty" v-if="row.IsShowSigninButton" @click="handleDownLoadImg(row)">下载签到码</p>
@@ -84,312 +410,18 @@
         <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
       </el-col>
     </el-card>
-    <atc-particulars :dialogVisible.sync="dialogVisible" :detailData.sync="detailData" />
-    <imgMeeting :isShowImgMeetingDlg.sync="isShowImgMeetingDlg" :imgMeetingData.sync="imgMeetingData" @childrenImgMeetingHandler="childrenImgMeetingHandler" />
+    <atc-particulars v-model:dialogVisible="dialogVisible" v-model:detailData="detailData" />
+    <imgMeeting
+      v-model:page_no="page_no"
+      v-model:isShowImgMeetingDlg="isShowImgMeetingDlg"
+      v-model:imgMeetingData="imgMeetingData"
+      @childrenImgMeetingHandler="childrenImgMeetingHandler"
+      @deleteLabelItem="deleteLabelItem"
+      @getsummaryManageList="getsummaryManageList"
+    />
   </div>
 </template>
 
-<script>
-import * as OpenCC from "opencc-js";
-// 将繁体中文（香港）转换为简体中文（中国大陆）
-const converter = OpenCC.Converter({ from: "hk", to: "cn" });
-import mPage from "@/components/mPage.vue";
-import { raiInterface, sealInterence } from "@/api/api.js";
-import AtcParticulars from "../components/atcParticulars.vue";
-import imgMeeting from "./components/imgMeeting.vue";
-export default {
-  name: "",
-  components: { mPage, AtcParticulars, imgMeeting },
-  props: {
-    Type: {
-      type: String,
-      emnu: ["hongze", "purchaser"], // 弘则，研选
-      default: "hongze",
-    },
-  },
-  data() {
-    return {
-      listTitle: [
-        {
-          PermissionName: "未开始",
-          Id: "NotStarted",
-        },
-        {
-          PermissionName: "进行中",
-          Id: "HaveInHand",
-        },
-        {
-          PermissionName: "已结束",
-          Id: "Complete",
-        },
-      ],
-      tabsPitchon: 0, //tabs 默认选中
-      page_no: sessionStorage.getItem("cativityBack") ? JSON.parse(sessionStorage.getItem("cativityBack")).page_no : 1,
-      dataList: [], //表格内容
-      industry: "", //行业
-      status: "", //状态
-      issueTime: "", //时间
-      cactivityTypeVal: "", //活动
-      options: [
-        { id: 1, name: "已发布" },
-        { id: 0, name: "未发布" },
-        { id: 3, name: "已取消" },
-      ],
-      titleValue: "", //标题关键词
-      total: 0, //条数
-      PageSize: 10, //每页显示几条
-      chartPermissionList: [], //行业的数组
-      cactivityTypeList: [], //活动类型
-      dialogVisible: false, //弹框
-      activeStateId: "NotStarted",
-      detailData: {}, //
-      activityLabel: "",
-      publishDate: "",
-      baseApi: import.meta.env.VITE_APP_API_ROOT,
-      isShowImgMeetingDlg: false,
-      imgMeetingData: [],
-    };
-  },
-  computed: {
-    sta() {
-      return this.status >= 0 && typeof this.status == "number" ? this.status : 2;
-    },
-    // 弘则 研选 是否是研选
-    isResearch() {
-      return this.$route.path.indexOf("purchaser") != -1 ? true : false;
-    },
-  },
-  created() {},
-  mounted() {
-    if (sessionStorage.getItem("cativityBack")) {
-      const initialize = JSON.parse(sessionStorage.getItem("cativityBack"));
-      this.titleValue = initialize.keyword;
-      this.industry = initialize.industry;
-      this.status = initialize.status;
-      this.issueTime = initialize.issueTime;
-      this.cactivityTypeVal = initialize.cactivityTypeVal;
-      this.activeStateId = initialize.activeStateId;
-      this.tabsPitchon = initialize.tabsPitchon;
-      this.activityLabel = initialize.activityLabel;
-      this.publishDate = initialize.publishDate;
-    }
-    // 研选下 没有行业的搜索框
-    !this.isResearch && this.chartPermission();
-    this.activityType();
-    this.getsummaryManageList();
-  },
-  methods: {
-    titleInput() {
-      this.page_no = 1;
-      this.init();
-      this.getsummaryManageList();
-    },
-    init() {
-      this.industry = ""; //行业
-      this.status = ""; //状态
-      this.issueTime = ""; //时间
-      this.cactivityTypeVal = ""; //活动
-      this.sta = "";
-    },
-    //头部tabs
-    tabsBoxBtn(item, index) {
-      this.activeStateId = item.Id;
-      this.tabsPitchon = index;
-      this.page_no = 1;
-      this.getsummaryManageList();
-    },
-    operationBtn(id, value) {
-      this.$confirm(`确定${value}该活动吗？`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          if (value == "删除") {
-            raiInterface
-              .activityDelete({
-                ActivityId: id,
-              })
-              .then((res) => {
-                if (res.Ret !== 200) return;
-                this.$message.success("删除成功！");
-                let page_num = Math.ceil((this.total - 1) / this.PageSize);
-                if (this.page_no > page_num) {
-                  this.page_no = page_num;
-                }
-                this.getsummaryManageList();
-              });
-          } else {
-            raiInterface
-              .activityPublishAndCancel({
-                ActivityId: id,
-              })
-              .then((res) => {
-                if (res.Ret !== 200) return;
-                this.$message.success(value + "成功！");
-                this.getsummaryManageList();
-              });
-          }
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: `已取消${value}`,
-          });
-        });
-    },
-    //编辑
-    editBtn(id, show) {
-      this.$router.push({
-        path: !this.isResearch ? "/editActivity" : "/editPurchaserActivity",
-        query: {
-          id: id,
-          isShow: show,
-        },
-      });
-    },
-    //分页
-    handleCurrentChange(page) {
-      this.page_no = page;
-      this.getsummaryManageList();
-    },
-    //获取行业
-    chartPermission() {
-      raiInterface.chartPermission({ IsHideResearch: !this.isResearch }).then((res) => {
-        if (res.Ret === 200) {
-          this.chartPermissionList = res.Data.List;
-        }
-      });
-    },
-    //活动类型
-    activityType() {
-      raiInterface.getActivityType({ IsResearch: this.isResearch }).then((res) => {
-        if (res.Ret === 200) {
-          this.cactivityTypeList = res.Data.List;
-        }
-      });
-    },
-    //列表
-    getsummaryManageList() {
-      raiInterface
-        .getActivityList({
-          CurrentIndex: this.page_no,
-          PageSize: this.PageSize,
-          PublishStatus: this.sta - 0,
-          ChartPermissionId: this.industry,
-          StartDate: this.issueTime[0],
-          EndDate: this.issueTime[1],
-          KeyWord: this.titleValue,
-          ActivityTypeId: this.cactivityTypeVal,
-          ActiveState: this.activeStateId,
-          ActivityLabel: this.activityLabel,
-          PublishStartDate: this.publishDate,
-          IsResearch: this.isResearch,
-        })
-        .then((res) => {
-          if (res.Ret !== 200) return;
-          this.dataList = res.Data.List;
-          this.total = res.Data.Paging.Totals;
-        });
-    },
-    //change事件
-    conditionChange() {
-      this.page_no = 1;
-      this.getsummaryManageList();
-    },
-    //点击标题的弹框
-    titleBtnClick(id) {
-      raiInterface.activityDetail({ ActivityId: Number(id) }).then((res) => {
-        if (res.Ret == 200) {
-          this.detailData = res.Data;
-        }
-      });
-      this.dialogVisible = true;
-    },
-    // 下载图片
-    handleDownLoadImg(row) {
-      let img = new Image();
-      img.setAttribute("crossOrigin", "anonymous");
-      img.src = row.SigninImg;
-      img.onload = () => {
-        let canvas = document.createElement("canvas");
-        canvas.width = img.width;
-        canvas.height = img.height;
-        let context = canvas.getContext("2d");
-        context.drawImage(img, 0, 0, img.width, img.height);
-        let dataURL = canvas.toDataURL("image/png", 1);
-        const a = document.createElement("a");
-        a.setAttribute("download", "签到码.png");
-        a.style.display = "none";
-        a.href = dataURL;
-        document.body.appendChild(a);
-        a.click();
-      };
-    },
-    async handleUploadImg(params) {
-      if (!params.file) return;
-      const fd = new FormData();
-      fd.append("file", params.file);
-      try {
-        const res = await sealInterence.resourceUpload(fd);
-        if (res.Ret === 200) {
-          const resImg = await raiInterface.activityImgToText({
-            ImgUrl: res.Data.ResourceUrl,
-          });
-          if (resImg.Ret === 200) {
-            this.isShowImgMeetingDlg = true;
-            this.imgMeetingData = resImg.Data.List.map((item) => {
-              return {
-                ...item,
-                Company: converter(item.Company),
-              };
-            });
-          }
-        }
-      } catch (err) {
-        console.log(err);
-      }
-    },
-    // 点击取消的回调事件
-    childrenImgMeetingHandler() {
-      this.$refs.imgUpload.clearFiles();
-    },
-    // 是否置顶
-    async overheadHandler(id) {
-      const res = await raiInterface.yanxuan_tope_change({
-        ActivityId: id,
-      });
-      if (res.Ret !== 200) return;
-      this.$message.success("操作成功！");
-      this.getsummaryManageList();
-    },
-  },
-  /* 页面跳转前记录参数 */
-  beforeRouteLeave(to, form, next) {
-    let backData = {
-      page_no: this.page_no,
-      keyword: this.titleValue,
-      industry: this.industry, //行业
-      status: this.status, //状态
-      issueTime: this.issueTime, //时间
-      cactivityTypeVal: this.cactivityTypeVal, //活动
-      activeStateId: this.activeStateId, //
-      tabsPitchon: this.tabsPitchon,
-      activityLabel: this.activityLabel,
-      publishDate: this.publishDate,
-    };
-    sessionStorage.setItem("cativityBack", JSON.stringify(backData));
-    next();
-  },
-  /* 页面进入前是否清除参数 */
-  beforeRouteEnter(to, from, next) {
-    if (from.path != "/editActivity") {
-      sessionStorage.removeItem("cativityBack");
-    }
-    next();
-  },
-};
-</script>
 <style lang="scss">
 .container-activity {
   .top-card-box {
@@ -439,9 +471,12 @@ export default {
       flex-shrink: 0;
     }
   }
-  .el-upload  {
+  .el-upload {
     height: 40px !important;
     min-height: 40px !important;
   }
+  .grey-color {
+    cursor: pointer;
+  }
 }
 </style>

src/views/rai_manage/activityManage/applyManage.vue

@@ -1,3 +1,321 @@
+<script setup>
+import { ref, watch, onMounted, reactive, computed, toRefs } from "vue";
+import { raiInterface } from "@/api/api.js";
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+import { Search } from "@element-plus/icons-vue";
+import mPage from "@/components/mPage.vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+
+import ApplyDialog from "../components/apply/applyDialog.vue";
+import ParticularsDialog from "../components/apply/particularsDialog.vue";
+import AtcParticulars from "../components/atcParticulars.vue";
+import GenerationAsk from "../components/generationAsk.vue";
+import SummaryRemind from "../components/apply/summaryRemind.vue";
+import { ListTitle, purchaserListTitle, TableApplyColums, StatusSelect, PublishSelect } from "../components/apply/applyTableColums";
+import TemplateMessage from "../components/apply/templateMessage.vue";
+
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  tabsSelectionOne: true,
+  dataList: [], //表格的列表
+  page_no: sessionStorage.getItem("interviewListBack") ? JSON.parse(sessionStorage.getItem("interviewListBack")).page_no : 1,
+  total: 0, //条数
+  PageSize: 10, //每页显示几条
+  industry: "", //行业
+  cactivityTypeVal: "", //活动
+  issueTime: "", //时间
+  selectList: "", //新增外呼人员的id
+  chartPermissionList: [], //行业的数组
+  cactivityTypeList: [], //活动类型
+  addDialogVisible: false, //新增外呼的弹框
+  particularsDialogVisible: false, //报名详情弹框
+  subscribe: "", //预约外呼弹框的tittle
+  titleValue: "", //标题关键词
+  tabsPitchonType: 1,
+  dialogVisible: false, //文章详情
+  detailData: {}, //文章详情数据
+  dialogVisibleId: "", //弹框id
+  reminder: false, //提示
+  generaitondialogVisib: false, //代问的弹框
+  generaitonId: "",
+  generaitonType: "报名",
+  numberFull: false, //
+  tableApplyColums: [],
+  signUpAdd: "",
+  minimumSummation: "",
+  numberLimi: false, //
+  addDialogType: "新增外呼人员",
+  summaryRemindDlg: false, //预约纪要、会议提醒
+  isShowAppointment: true, //是 预约纪要、会议提醒
+  activityTypeName: [],
+  cactivityStatus: 1,
+  publishStatus: "1", //发布状态
+  messageDialogVisible: false, //发送消息模版
+  isResearchPoints: false, //
+});
+
+// 弘则 研选 是否是研选
+const isResearch = computed(() => {
+  return $route.path.indexOf("purchaser") != -1 ? true : false;
+});
+
+const listTitle = computed(() => {
+  return !isResearch.value ? ListTitle : purchaserListTitle;
+});
+
+const statusSelect = computed(() => {
+  return StatusSelect;
+});
+
+const publishSelect = computed(() => {
+  return PublishSelect;
+});
+
+const tabsBtnName = computed(() => {
+  return pageState.tabsPitchonType == 1 ? "新增报名" : "新增外呼人员";
+});
+
+watch(
+  () => titleValue,
+  () => {
+    pageState.page_no = 1;
+    init();
+    getsDataList();
+  }
+);
+
+function init() {
+  pageState.issueTime = "";
+  pageState.industry = "";
+  pageState.cactivityTypeVal = "";
+}
+//头部tabs
+function tabsBoxBtn(item, index) {
+  pageState.tabsPitchonType = item.ChartPermissionId;
+  pageState.tableApplyColums = TableApplyColums(item.ChartPermissionId);
+  pageState.cactivityTypeVal = "";
+  pageState.isResearchPoints = false;
+  pageState.tabsSelectionOne = item.ChartPermissionId == 2 || item.ChartPermissionId == 5 ? false : true;
+  pageState.page_no = 1;
+  getsDataList();
+}
+//列表表格
+function getsDataList() {
+  raiInterface
+    .activitySignup({
+      CurrentIndex: pageState.page_no,
+      PageSize: pageState.PageSize,
+      StartDate: pageState.issueTime[0],
+      EndDate: pageState.issueTime[1],
+      KeyWord: pageState.titleValue,
+      SearchType: pageState.tabsPitchonType,
+      ChartPermissionId: pageState.industry,
+      ActivityTypeId: pageState.cactivityTypeVal,
+      ActiveState: pageState.cactivityStatus,
+      PublishStatus: pageState.publishStatus ? Number(pageState.publishStatus) : 2,
+      IsResearch: isResearch.value,
+    })
+    .then((res) => {
+      if (res.Ret !== 200) return;
+      pageState.dataList = res.Data.List;
+      pageState.total = res.Data.Paging.Totals;
+    });
+}
+//添加新增外呼人员
+function addOutbound(type) {
+  if (!pageState.selectList) {
+    ElMessage.warning("请先选择活动");
+  } else if (pageState.tabsPitchonType == 1 && pageState.isGenre) {
+    return ElMessage.warning("活动类型不同，无法同时新增报名");
+  } else {
+    if (type == "新增外呼人员") {
+      if (pageState.reminder && pageState.tabsPitchonType !== 1) return ElMessage.warning("当前活动无法新增外呼人员");
+      pageState.addDialogVisible = true;
+    } else {
+      if (!pageState.isShowAppointment && type === "新增预约纪要") return ElMessage.error("该活动无法预约纪要");
+      pageState.addDialogVisible = true;
+    }
+    pageState.addDialogType = type;
+  }
+}
+//表格选择复选框的事件
+function selectChange(selection, row) {
+  const arr = [];
+  const num = [];
+  const summation = [];
+  const genre = [];
+  let minimum = [];
+  let isResearch = [];
+  pageState.selectionArr = selection;
+  selection.forEach((item) => {
+    arr.push(item.ActivityId);
+    num.push(item.LimitPeopleNum);
+    summation.push(item.SignupPeopleNum);
+    genre.push(item.ActivityTypeName);
+    isResearch.push(item.IsResearchPoints);
+    minimum.push(item.LimitPeopleNum - item.SignupPeopleNum);
+  });
+  pageState.activityTypeName = genre;
+  pageState.isShowAppointment = selection.every((item) => item.IsShowAppointment == true);
+  const str = arr.join(",");
+  pageState.reminder = num.some((item) => item > 0);
+  pageState.selectList = str;
+  pageState.isGenre = new Set(genre).size > 1 ? true : false;
+  if (pageState.tabsPitchonType !== 1 && (selection[0] ? selection[0].LimitPeopleNum > 0 : true)) {
+    num.forEach((item) => {
+      pageState.numberFull = summation.some((key) => key >= item);
+    });
+  }
+  if (pageState.tabsPitchonType !== 1) {
+    pageState.tabsPitchonType == 3 && isResearchHandler(isResearch);
+    pageState.minimumSummation = Math.min(...minimum);
+    pageState.numberLimi = num.includes(0) && num.some((item) => item > 0);
+  }
+}
+// 公司调研下的判断
+function isResearchHandler(isResearch) {
+  if (isResearch && isResearch.length > 1) {
+    for (let i = 0; i < isResearch.length - 1; i++) {
+      if (isResearch[i] !== isResearch[i + 1]) {
+        pageState.isResearchPoints = true;
+        break;
+      }
+    }
+  } else {
+    pageState.isResearchPoints = false;
+  }
+}
+//报名详情的弹框
+function particularsBtn(val, id) {
+  pageState.dialogVisibleId = id;
+  pageState.subscribe = val;
+  if (val === "会议提醒人数" || val === "纪要预约人数") {
+    pageState.summaryRemindDlg = true;
+  } else {
+    pageState.particularsDialogVisible = true;
+  }
+}
+//change事件
+function conditionChange() {
+  pageState.page_no = 1;
+  getsDataList();
+}
+//获取行业
+function chartPermission() {
+  raiInterface.chartPermission({ IsHideResearch: !isResearch.value }).then((res) => {
+    if (res.Ret === 200) {
+      pageState.chartPermissionList = res.Data.List;
+    }
+  });
+}
+//活动类型
+function activityType() {
+  raiInterface
+    .activitySignuplistSearch({
+      SearchType: pageState.tabsPitchonType,
+    })
+    .then((res) => {
+      if (res.Ret === 200) {
+        pageState.cactivityTypeList = res.Data.List;
+      }
+    });
+}
+//分页
+function handleCurrentChange(page) {
+  pageState.page_no = page;
+  getsDataList();
+}
+//点击标题的弹框
+function titleBtnClick(id) {
+  raiInterface.activityDetail({ ActivityId: Number(id) }).then((res) => {
+    if (res.Ret == 200) {
+      pageState.detailData = res.Data;
+    }
+  });
+  pageState.dialogVisible = true;
+}
+//点击代问的弹框
+function inquireBtn(id) {
+  pageState.generaitondialogVisib = true;
+  pageState.generaitonId = id;
+}
+//新增报名
+function addapply() {
+  if (!pageState.selectList) {
+    return ElMessage.warning("请先选择活动");
+  } else if (pageState.isGenre) {
+    return ElMessage.warning("活动类型不同，无法同时新增报名");
+  } else if (pageState.isResearchPoints && pageState.tabsPitchonType == 3) {
+    return ElMessage.warning("所选活动无法同时新增报名");
+  } else {
+    if (pageState.numberLimi && pageState.tabsPitchonType !== 4) {
+      return ElMessage.warning("不限人数的电话会请新增外呼人员，限制人数的电话会请新增报名");
+    } else if (pageState.numberFull && pageState.tabsPitchonType !== 4) {
+      return ElMessage.warning("新增失败，活动人数超限。");
+    }
+    pageState.signUpAdd = pageState.activityTypeName.includes("公司调研电话会（易董）") ? "易董" : pageState.tabsPitchonType == 4 ? "c类" : "报名";
+    pageState.addDialogType = "新增报名";
+    pageState.addDialogVisible = true;
+  }
+}
+/* 表格行的样式 */
+function handleRowStyle(key, row) {
+  if (["ActivityName", "SignupPeopleNum", "AppointmentPeopleNum", "AskNum"].includes(key)) {
+    return row.PublishStatus == 3 ? "cursor: pointer" : "color: #409eff; cursor: pointer";
+  }
+  return "";
+}
+/* 表格行的点击事件 */
+function handleRowClick(row, key) {
+  switch (key) {
+    case "ActivityName":
+      titleBtnClick(row.ActivityId);
+      break;
+    case "SignupPeopleNum":
+      particularsBtn("报名详情", row.ActivityId);
+      break;
+    case "AppointmentPeopleNum":
+      particularsBtn("纪要预约人数", row.ActivityId);
+      break;
+    case "AskNum":
+      inquireBtn(row.ActivityId);
+      break;
+    default:
+      "";
+  }
+}
+/* 表格行的数据处理 */
+function handleRowContent(row, key) {
+  if (["LimitPeopleNum"].includes(key)) {
+    return row[key] > 0 && !row.YidongActivityId ? row[key] : "--";
+  } else if (key == "ActiveState") {
+    let status = row[key] == 1 ? "未开始" : row[key] == 2 ? "进行中" : "已结束";
+    return status;
+  } else if (key == "PublishStatus") {
+    let status = row["PublishStatus"] == 1 ? "已发布" : row["PublishStatus"] == 2 ? "未发布" : "已取消";
+    return status;
+  } else {
+    return row[key];
+  }
+}
+// 发送模版消息
+function sendMessage() {
+  if (pageState.selectList && pageState.selectList.split(",").length === 1) {
+    pageState.messageDialogVisible = true;
+  } else {
+    ElMessage.error("请选择一个活动");
+  }
+}
+
+onMounted(() => {
+  pageState.tableApplyColums = TableApplyColums(1);
+  !isResearch.value && chartPermission();
+  getsDataList();
+});
+</script>
+
 <template>
   <div class="container-apply">
     <!-- 头部el-card -->
@@ -9,9 +327,7 @@
           }}</span>
         </div>
         <div>
-          <el-input v-model="titleValue" style="width: 521px" placeholder="请输入活动名称" clearable>
-            <i slot="prefix" class="el-input__icon el-icon-search"></i>
-          </el-input>
+          <el-input v-model="titleValue" style="width: 521px" placeholder="请输入活动名称" clearable :prefix-icon="Search"> </el-input>
         </div>
       </div>
     </div>
@@ -37,14 +353,8 @@
           <el-button type="primary" @click="sendMessage">发送模板消息</el-button>
         </div>
         <div>
-          <el-select placeholder="行业" clearable v-model="industry" @change="conditionChange" style="margin-bottom: 20px"
-          v-if="!isResearch">
-            <el-option
-              v-for="item in chartPermissionList"
-              :label="item.PermissionName"
-              :key="item.ChartPermissionId"
-              :value="item.ChartPermissionId"
-            ></el-option>
+          <el-select placeholder="行业" clearable v-model="industry" @change="conditionChange" style="margin-bottom: 20px" v-if="!isResearch">
+            <el-option v-for="item in chartPermissionList" :label="item.PermissionName" :key="item.ChartPermissionId" :value="item.ChartPermissionId"></el-option>
           </el-select>
           <el-select placeholder="活动类型" clearable @focus="activityType" v-model="cactivityTypeVal" @change="conditionChange" style="margin-bottom: 20px">
             <el-option v-for="item in cactivityTypeList" :label="item.ActivityTypeName" :key="item.ActivityTypeId" :value="item.ActivityTypeId"></el-option>
@@ -72,7 +382,7 @@
               <i class="el-icon-info" />
             </el-tooltip>
           </template>
-          <template slot-scope="{ row }">
+          <template #default="{ row }">
             <div v-if="item.key == 'ReminderPeopleNum'">
               <span v-if="row.ReminderPeopleNum > 0" class="editsty" @click="particularsBtn('会议提醒人数', row.ActivityId)">{{ row.ReminderPeopleNum }}</span>
               <span v-else>--</span>
@@ -81,7 +391,7 @@
               <span v-if="row.SignupFailPeopleNum == 0">--</span>
               <span v-else class="editsty" @click="particularsBtn('报名失败详情', row.ActivityId)">{{ row.SignupFailPeopleNum }}</span>
             </div>
-            <span v-else @click="handleRowClick(row, item.key)" :style="handleRowStyle(item.key)">{{ handleRowContent(row, item.key) }}</span>
+            <span v-else @click="handleRowClick(row, item.key)" :style="handleRowStyle(item.key, row)">{{ handleRowContent(row, item.key) }}</span>
           </template>
         </el-table-column>
       </el-table>
@@ -90,10 +400,10 @@
       </el-col>
     </el-card>
     <!-- 详情弹框 -->
-    <atc-particulars :dialogVisible.sync="dialogVisible" :detailData.sync="detailData" />
+    <atc-particulars v-model:dialogVisible="dialogVisible" v-model:detailData="detailData" />
     <!-- 新增外呼的弹框 -->
     <apply-dialog
-      :addDialogVisible.sync="addDialogVisible"
+      v-model:addDialogVisible="addDialogVisible"
       :dialogVisibleId="dialogVisibleId"
       :selectList="selectList"
       :signUpAdd="signUpAdd"
@@ -101,325 +411,16 @@
       :tabsPitchonType="tabsPitchonType"
       :minimumSummation="minimumSummation"
       :selectionArr="selectionArr"
+      @getsDataList="getsDataList"
     />
     <!-- 报名详情弹框 -->
-    <particulars-dialog :dialogVisibleId="dialogVisibleId" :particularsDialogVisible.sync="particularsDialogVisible" :subscribe="subscribe" />
-    <generation-ask :generaitonType="generaitonType" :generaitondialogVisib.sync="generaitondialogVisib" :generaitonId="generaitonId" />
-    <summary-remind :dialogVisibleId="dialogVisibleId" :summaryRemindDlg.sync="summaryRemindDlg" :subscribe="subscribe" />
-    <template-message :messageDialog.sync="messageDialogVisible" :selectionArr="selectionArr" />
+    <particulars-dialog @getsDataList="getsDataList" :dialogVisibleId="dialogVisibleId" v-model:particularsDialogVisible="particularsDialogVisible" :subscribe="subscribe" />
+    <generation-ask :generaitonType="generaitonType" v-model:generaitondialogVisib="generaitondialogVisib" :generaitonId="generaitonId" />
+    <summary-remind :dialogVisibleId="dialogVisibleId" v-model:summaryRemindDlg="summaryRemindDlg" :subscribe="subscribe" @getsDataList="getsDataList" />
+    <template-message v-model:messageDialog="messageDialogVisible" :selectionArr="selectionArr" />
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-import mPage from "@/components/mPage.vue";
-import ApplyDialog from "../components/apply/applyDialog.vue";
-import ParticularsDialog from "../components/apply/particularsDialog.vue";
-import AtcParticulars from "../components/atcParticulars.vue";
-import GenerationAsk from "../components/generationAsk.vue";
-import SummaryRemind from "../components/apply/summaryRemind.vue";
-import { ListTitle , purchaserListTitle , TableApplyColums, StatusSelect, PublishSelect } from "../components/apply/applyTableColums";
-import TemplateMessage from "../components/apply/templateMessage.vue";
-export default {
-  name: "",
-  components: { ApplyDialog, ParticularsDialog, mPage, AtcParticulars, GenerationAsk, SummaryRemind, TemplateMessage },
-  props: {},
-  data() {
-    return {
-      tabsSelectionOne: true,
-      dataList: [], //表格的列表
-      page_no: sessionStorage.getItem("interviewListBack") ? JSON.parse(sessionStorage.getItem("interviewListBack")).page_no : 1,
-      total: 0, //条数
-      PageSize: 10, //每页显示几条
-      industry: "", //行业
-      cactivityTypeVal: "", //活动
-      issueTime: "", //时间
-      selectList: "", //新增外呼人员的id
-      chartPermissionList: [], //行业的数组
-      cactivityTypeList: [], //活动类型
-      addDialogVisible: false, //新增外呼的弹框
-      particularsDialogVisible: false, //报名详情弹框
-      subscribe: "", //预约外呼弹框的tittle
-      titleValue: "", //标题关键词
-      tabsPitchonType: 1,
-      dialogVisible: false, //文章详情
-      detailData: {}, //文章详情数据
-      dialogVisibleId: "", //弹框id
-      reminder: false, //提示
-      generaitondialogVisib: false, //代问的弹框
-      generaitonId: "",
-      generaitonType: "报名",
-      numberFull: false, //
-      tableApplyColums: [],
-      signUpAdd: "",
-      minimumSummation: "",
-      numberLimi: false, //
-      addDialogType: "新增外呼人员",
-      summaryRemindDlg: false, //预约纪要、会议提醒
-      isShowAppointment: true, //是 预约纪要、会议提醒
-      activityTypeName: [],
-      cactivityStatus: 1,
-      publishStatus: "1", //发布状态
-      messageDialogVisible: false, //发送消息模版
-      isResearchPoints: false, //
-    };
-  },
-  computed: {
-    // 弘则 研选 是否是研选
-    isResearch(){
-      return this.$route.path.indexOf("purchaser")!=-1?true:false
-    },
-    listTitle() {
-      return !this.isResearch?ListTitle:purchaserListTitle;
-    },
-    statusSelect() {
-      return StatusSelect;
-    },
-    publishSelect() {
-      return PublishSelect;
-    },
-    tabsBtnName() {
-      return this.tabsPitchonType == 1 ? "新增报名" : "新增外呼人员";
-    },
-  },
-  watch: {
-    titleValue() {
-      this.page_no = 1;
-      this.init();
-      this.getsDataList();
-    }
-  },
-  created() {},
-  mounted() {
-    this.tableApplyColums = TableApplyColums(1);
-    !this.isResearch && this.chartPermission();
-    this.getsDataList();
-  },
-  methods: {
-    init() {
-      this.issueTime = "";
-      this.industry = "";
-      this.cactivityTypeVal = "";
-    },
-    //头部tabs
-    tabsBoxBtn(item, index) {
-      this.tabsPitchonType = item.ChartPermissionId;
-      this.tableApplyColums = TableApplyColums(item.ChartPermissionId);
-      this.cactivityTypeVal = "";
-      this.isResearchPoints = false;
-      this.tabsSelectionOne = item.ChartPermissionId == 2 || item.ChartPermissionId == 5 ? false : true;
-      this.page_no = 1;
-      this.getsDataList();
-    },
-    //列表表格
-    getsDataList() {
-      raiInterface
-        .activitySignup({
-          CurrentIndex: this.page_no,
-          PageSize: this.PageSize,
-          StartDate: this.issueTime[0],
-          EndDate: this.issueTime[1],
-          KeyWord: this.titleValue,
-          SearchType: this.tabsPitchonType,
-          ChartPermissionId: this.industry,
-          ActivityTypeId: this.cactivityTypeVal,
-          ActiveState: this.cactivityStatus,
-          PublishStatus: this.publishStatus ? Number(this.publishStatus) : 2,
-          IsResearch:this.isResearch
-        })
-        .then((res) => {
-          if (res.Ret !== 200) return;
-          this.dataList = res.Data.List;
-          this.total = res.Data.Paging.Totals;
-        });
-    },
-    //添加新增外呼人员
-    addOutbound(type) {
-      if (!this.selectList) {
-        this.$message.warning("请先选择活动");
-      } else if (this.tabsPitchonType == 1 && this.isGenre) {
-        return this.$message.warning("活动类型不同，无法同时新增报名");
-      } else {
-        if (type == "新增外呼人员") {
-          if (this.reminder && this.tabsPitchonType !== 1) return this.$message.warning("当前活动无法新增外呼人员");
-          this.addDialogVisible = true;
-        } else {
-          if (!this.isShowAppointment && type === "新增预约纪要") return this.$message.error("该活动无法预约纪要");
-          this.addDialogVisible = true;
-        }
-        this.addDialogType = type;
-      }
-    },
-    //表格选择复选框的事件
-    selectChange(selection, row) {
-      const arr = [];
-      const num = [];
-      const summation = [];
-      const genre = [];
-      let minimum = [];
-      let isResearch = [];
-      this.selectionArr = selection;
-      selection.forEach((item) => {
-        arr.push(item.ActivityId);
-        num.push(item.LimitPeopleNum);
-        summation.push(item.SignupPeopleNum);
-        genre.push(item.ActivityTypeName);
-        isResearch.push(item.IsResearchPoints);
-        minimum.push(item.LimitPeopleNum - item.SignupPeopleNum);
-      });
-      this.activityTypeName = genre;
-      this.isShowAppointment = selection.every((item) => item.IsShowAppointment == true);
-      const str = arr.join(",");
-      this.reminder = num.some((item) => item > 0);
-      this.selectList = str;
-      this.isGenre = new Set(genre).size > 1 ? true : false;
-      if (this.tabsPitchonType !== 1 && (selection[0] ? selection[0].LimitPeopleNum > 0 : true)) {
-        num.forEach((item) => {
-          this.numberFull = summation.some((key) => key >= item);
-        });
-      }
-      if (this.tabsPitchonType !== 1) {
-        console.log(isResearch, isResearch.length);
-        this.tabsPitchonType == 3 && this.isResearchHandler(isResearch);
-        this.minimumSummation = Math.min(...minimum);
-        this.numberLimi = num.includes(0) && num.some((item) => item > 0);
-      }
-    },
-    // 公司调研下的判断
-    isResearchHandler(isResearch) {
-      if (isResearch && isResearch.length > 1) {
-        for (let i = 0; i < isResearch.length - 1; i++) {
-          if (isResearch[i] !== isResearch[i + 1]) {
-            this.isResearchPoints = true;
-            break;
-          }
-        }
-      } else {
-        this.isResearchPoints = false;
-      }
-    },
-    //报名详情的弹框
-    particularsBtn(val, id) {
-      this.dialogVisibleId = id;
-      this.subscribe = val;
-      if (val === "会议提醒人数" || val === "纪要预约人数") {
-        this.summaryRemindDlg = true;
-      } else {
-        this.particularsDialogVisible = true;
-      }
-    },
-    //change事件
-    conditionChange() {
-      this.page_no = 1;
-      this.getsDataList();
-    },
-    //获取行业
-    chartPermission() {
-      raiInterface.chartPermission({IsHideResearch:!this.isResearch}).then((res) => {
-        if (res.Ret === 200) {
-          this.chartPermissionList = res.Data.List;
-        }
-      });
-    },
-    //活动类型
-    activityType() {
-      raiInterface
-        .activitySignuplistSearch({
-          SearchType: this.tabsPitchonType,
-        })
-        .then((res) => {
-          if (res.Ret === 200) {
-            this.cactivityTypeList = res.Data.List;
-          }
-        });
-    },
-    //分页
-    handleCurrentChange(page) {
-      this.page_no = page;
-      this.getsDataList();
-    },
-    //点击标题的弹框
-    titleBtnClick(id) {
-      raiInterface.activityDetail({ ActivityId: Number(id) }).then((res) => {
-        if (res.Ret == 200) {
-          this.detailData = res.Data;
-        }
-      });
-      this.dialogVisible = true;
-    },
-    //点击代问的弹框
-    inquireBtn(id) {
-      this.generaitondialogVisib = true;
-      this.generaitonId = id;
-    },
-    //新增报名
-    addapply() {
-      if (!this.selectList) {
-        return this.$message.warning("请先选择活动");
-      } else if (this.isGenre) {
-        return this.$message.warning("活动类型不同，无法同时新增报名");
-      } else if (this.isResearchPoints && this.tabsPitchonType == 3) {
-        return this.$message.warning("所选活动无法同时新增报名");
-      } else {
-        if (this.numberLimi && this.tabsPitchonType !== 4) {
-          return this.$message.warning("不限人数的电话会请新增外呼人员，限制人数的电话会请新增报名");
-        } else if (this.numberFull && this.tabsPitchonType !== 4) {
-          return this.$message.warning("新增失败，活动人数超限。");
-        }
-        this.signUpAdd = this.activityTypeName.includes("公司调研电话会（易董）") ? "易董" : this.tabsPitchonType == 4 ? "c类" : "报名";
-        this.addDialogType = "新增报名";
-        this.addDialogVisible = true;
-      }
-    },
-    /* 表格行的样式 */
-    handleRowStyle(key) {
-      let isStyle = ["ActivityName", "SignupPeopleNum", "AppointmentPeopleNum", "AskNum"];
-      return isStyle.includes(key) ? "color: #409eff; cursor: pointer" : "";
-    },
-    /* 表格行的点击事件 */
-    handleRowClick(row, key) {
-      switch (key) {
-        case "ActivityName":
-          this.titleBtnClick(row.ActivityId);
-          break;
-        case "SignupPeopleNum":
-          this.particularsBtn("报名详情", row.ActivityId);
-          break;
-        case "AppointmentPeopleNum":
-          this.particularsBtn("纪要预约人数", row.ActivityId);
-          break;
-        case "AskNum":
-          this.inquireBtn(row.ActivityId);
-          break;
-        default:
-          "";
-      }
-    },
-    /* 表格行的数据处理 */
-    handleRowContent(row, key) {
-      if (["LimitPeopleNum"].includes(key)) {
-        return row[key] > 0 && !row.YidongActivityId ? row[key] : "--";
-      } else if (key == "ActiveState") {
-        let status = row[key] == 1 ? "未开始" : row[key] == 2 ? "进行中" : "已结束";
-        return status;
-      } else if (key == "PublishStatus") {
-        let status = row["PublishStatus"] == 1 ? "已发布" : row["PublishStatus"] == 2 ?"未发布":"已取消";
-        return status;
-      } else {
-        return row[key];
-      }
-    },
-    // 发送模版消息
-    sendMessage() {
-      if (this.selectList && this.selectList.split(",").length === 1) {
-        this.messageDialogVisible = true;
-      } else {
-        this.$message.error("请选择一个活动");
-      }
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .container-apply {
   .top-wrap {

src/views/rai_manage/activityManage/components/ThemeSurvey/voteDlg.vue

@@ -1,18 +1,166 @@
+<script setup>
+import { reactive, ref, onMounted } from "vue";
+import { raiInterface, raiSpecial } from "@/api/api.js";
+import RichText from "../../../components/richText.vue";
+
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+  initiateVotingDlg: {
+    type: Boolean,
+    default: false,
+  },
+  rowForm: {
+    type: Object,
+    default: {},
+  },
+});
+const $emit = defineEmits(["getDataList"]);
+
+watch(
+  () => props.rowForm,
+  (newVal) => {
+    props.initiateVotingDlg && newVal.QuestionnaireId && getListDetails();
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+// 校验规则
+const votingRules = ref({
+  type: [{ required: true, message: "请选择活动类型", trigger: "change" }],
+  describe: [{ required: true, message: "请输入首段描述文字", trigger: "blur" }],
+  date: [{ required: true, message: "请设置投票截止时间", trigger: "change" }],
+  select: [{ required: true, message: "请输入最多可选几项", trigger: "change" }],
+});
+
+const votingForm = ref({
+  type: 8,
+  describe: "",
+  date: "",
+  select: "",
+  addThemeList: [
+    { QuestionnaireThemeId: 0, ActivityTheme: "" },
+    { QuestionnaireThemeId: 0, ActivityTheme: "" },
+  ],
+});
+
+function closeHandler() {
+  votingForm.value = {
+    type: 8,
+    describe: "",
+    date: "",
+    select: "",
+    addThemeList: [
+      { QuestionnaireThemeId: 0, ActivityTheme: "" },
+      { QuestionnaireThemeId: 0, ActivityTheme: "" },
+    ],
+  };
+  votingFormRes.value.resetFields();
+  $emit("update:initiateVotingDlg", false);
+  $emit("update:rowForm", {});
+}
+// 添加主题
+function addThemeHandler() {
+  let id = votingForm.value.addThemeList.length;
+  votingForm.value.addThemeList.push({ QuestionnaireThemeId: 0, ActivityTheme: "" });
+}
+function deleteThemeItem(item, index) {
+  if (index >= 2) {
+    votingForm.value.addThemeList.splice(index, 1);
+  }
+}
+
+const votingFormRes = ref(null);
+// 点击确定
+function submitForm() {
+  votingFormRes.value.validate(async (valid) => {
+    if (valid) {
+      const res = await raiInterface.questionnairePreserveAndEdit({
+        ActivityTypeId: votingForm.value.type,
+        MaxChooseTotal: votingForm.value.select,
+        Content: votingForm.value.describe.replace(/<p data-f-id=\"pbf\".*?<\/p>/g, ""),
+        EndTime: votingForm.value.date,
+        ListTheme: votingForm.value.addThemeList,
+        QuestionnaireId: props.rowForm.QuestionnaireId || 0,
+      });
+      if (res.Ret === 200) {
+        $emit("getDataList");
+        ElMessage.success("操作成功");
+        closeHandler();
+      }
+    } else {
+      console.log("error submit!!");
+      return false;
+    }
+  });
+}
+
+async function getListDetails() {
+  const res = await raiInterface.questionnaireDetail({
+    QuestionnaireId: props.rowForm.QuestionnaireId,
+  });
+  if (res.Ret === 200) {
+    let detail = res.Data.Detail;
+    votingForm.value = {
+      type: detail.ActivityTypeId,
+      describe: detail.Content,
+      date: detail.EndTime,
+      select: detail.MaxChooseTotal,
+      addThemeList: detail.ListTheme,
+    };
+  }
+}
+
+// 获取活动类型
+
+const optionsActivity = ref([]);
+
+async function activityType() {
+  const res = await raiInterface.getActivityType({
+    IsGetAll: true,
+  });
+  if (res.Ret === 200) {
+    optionsActivity.value = res.Data.List;
+  }
+}
+
+// 富文本
+const froalaConfig = ref({
+  height: 150,
+  fontSizeDefaultSelection: "16",
+  quickInsertEnabled: false,
+  theme: "dark", //主题
+  placeholderText: "请输入首段描述文字",
+  language: "zh_cn",
+  events: {
+    initialized: function () {
+      this.toolbar.hide();
+    },
+  },
+});
+
+onMounted(() => {
+  activityType();
+});
+</script>
+
 <template>
   <div class="container vote-dlg-container">
     <el-dialog
-      v-dialogDrag
+      draggable
       :close-on-click-modal="false"
-      :title="this.rowForm.QuestionnaireId ? '编辑' : '发起投票'"
+      :title="props.rowForm.QuestionnaireId ? '编辑' : '发起投票'"
       :modal-append-to-body="false"
       center
       :append-to-body="true"
-      :visible.sync="initiateVotingDlg"
+      v-model="props.initiateVotingDlg"
       :before-close="closeHandler"
       width="800px"
     >
       <div class="vote-dlg-container-theme-survey">
-        <el-form :model="votingForm" :rules="votingRules" ref="votingForm" class="demo-ruleForm">
+        <el-form :model="votingForm" :rules="votingRules" ref="votingFormRes" class="demo-ruleForm">
           <el-form-item prop="type">
             <el-select style="width: 100%" v-model="votingForm.type" placeholder="请选择活动类型">
               <el-option v-for="item in optionsActivity" :label="item.ActivityTypeName" :key="item.ActivityTypeId" :value="item.ActivityTypeId"> </el-option>
@@ -60,156 +208,16 @@
           </el-form-item>
         </el-form>
       </div>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确定</el-button>
-        <el-button style="margin-left: 30px" type="primary" plain @click="closeHandler">取消</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确定</el-button>
+          <el-button style="margin-left: 30px" type="primary" plain @click="closeHandler">取消</el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
-import { raiInterface, raiSpecial } from "@/api/api.js";
-import RichText from "../../../components/richText.vue";
-export default {
-  name: "",
-  components: { RichText },
-  props: {
-    initiateVotingDlg: {
-      type: Boolean,
-      default: false,
-    },
-    rowForm: {
-      type: Object,
-      default: {},
-    },
-  },
-  watch: {
-    rowForm: {
-      handler(newVal) {
-        this.initiateVotingDlg && newVal.QuestionnaireId && this.getListDetails();
-      },
-      deep: true,
-      immediate: true,
-    },
-  },
-  data() {
-    var that = this;
-    return {
-      froalaConfig: {
-        height: 150,
-        fontSizeDefaultSelection: "16",
-        quickInsertEnabled: false,
-        theme: "dark", //主题
-        placeholderText: "请输入首段描述文字",
-        language: "zh_cn",
-        events: {
-          initialized: function () {
-            that.editor = this;
-            that.editor.toolbar.hide();
-          },
-        },
-      },
-      votingForm: {
-        type: 8,
-        describe: "",
-        date: "",
-        select: "",
-        addThemeList: [
-          { QuestionnaireThemeId: 0, ActivityTheme: "" },
-          { QuestionnaireThemeId: 0, ActivityTheme: "" },
-        ],
-      },
-      votingRules: {
-        type: [{ required: true, message: "请选择活动类型", trigger: "change" }],
-        describe: [{ required: true, message: "请输入首段描述文字", trigger: "blur" }],
-        date: [{ required: true, message: "请设置投票截止时间", trigger: "change" }],
-        select: [{ required: true, message: "请输入最多可选几项", trigger: "change" }],
-      },
-      optionsActivity: [],
-    };
-  },
-  computed: {},
-  created() {},
-  mounted() {
-    this.activityType();
-  },
-  methods: {
-    closeHandler() {
-      this.votingForm = {
-        type: 8,
-        describe: "",
-        date: "",
-        select: "",
-        addThemeList: [
-          { QuestionnaireThemeId: 0, ActivityTheme: "" },
-          { QuestionnaireThemeId: 0, ActivityTheme: "" },
-        ],
-      };
-      this.$refs.votingForm.resetFields();
-      this.$emit("update:initiateVotingDlg", false);
-      this.$emit("update:rowForm", {});
-    },
-    // 添加主题
-    addThemeHandler() {
-      let id = this.votingForm.addThemeList.length;
-      this.votingForm.addThemeList.push({ QuestionnaireThemeId: 0, ActivityTheme: "" });
-    },
-    deleteThemeItem(item, index) {
-      if (index >= 2) {
-        this.votingForm.addThemeList.splice(index, 1);
-      }
-    },
-    // 点击确定
-    submitForm() {
-      this.$refs.votingForm.validate(async (valid) => {
-        if (valid) {
-          const res = await raiInterface.questionnairePreserveAndEdit({
-            ActivityTypeId: this.votingForm.type,
-            MaxChooseTotal: this.votingForm.select,
-            Content: this.votingForm.describe.replace(/<p data-f-id=\"pbf\".*?<\/p>/g,''),
-            EndTime: this.votingForm.date,
-            ListTheme: this.votingForm.addThemeList,
-            QuestionnaireId: this.rowForm.QuestionnaireId || 0,
-          });
-          if (res.Ret === 200) {
-            this.$parent.getDataList();
-            this.$message.success("操作成功");
-            this.closeHandler();
-          }
-        } else {
-          console.log("error submit!!");
-          return false;
-        }
-      });
-    },
-    // 获取活动类型
-    async activityType() {
-      const res = await raiInterface.getActivityType({
-        IsGetAll: true,
-      });
-      if (res.Ret === 200) {
-        this.optionsActivity = res.Data.List;
-      }
-    },
-    async getListDetails() {
-      const res = await raiInterface.questionnaireDetail({
-        QuestionnaireId: this.rowForm.QuestionnaireId,
-      });
-      if (res.Ret === 200) {
-        let detail = res.Data.Detail;
-        this.votingForm = {
-          type: detail.ActivityTypeId,
-          describe: detail.Content,
-          date: detail.EndTime,
-          select: detail.MaxChooseTotal,
-          addThemeList: detail.ListTheme,
-        };
-      }
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .vote-dlg-container-theme-survey {
   .add-theme-content {

src/views/rai_manage/activityManage/components/ThemeSurvey/votingResultsDlg.vue

@@ -1,21 +1,111 @@
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+
+import { raiInterface, raiSpecial } from "@/api/api.js";
+
+const props = defineProps({
+  isVotinRgesultsDlg: {
+    type: Boolean,
+    default: false,
+  },
+  theRemainingThemeDlg: {
+    type: Boolean,
+    default: false,
+  },
+  rowForm: {
+    type: Object,
+    default: {},
+  },
+});
+
+const $emit = defineEmits();
+
+const isVoteDetails = ref(false);
+const voteDetailList = ref([]); //投票结果
+const voteNumDetailList = ref([]); //查看票数详情
+const voteOtherList = ref([]); //查看其余主题
+
+watch(
+  () => props.isVotinRgesultsDlg,
+  (newValue) => {
+    newValue && getVoteDetail();
+  }
+);
+watch(
+  () => props.theRemainingThemeDlg,
+  (newValue) => {
+    newValue && lookVoteOther();
+  }
+);
+
+// 关闭弹框事件
+function closeHandler(type) {
+  $emit("update:isVotinRgesultsDlg", false);
+  $emit("update:rowForm", {});
+}
+function closeHandlerTwo() {
+  isVoteDetails.value = false;
+}
+function closeHandlerThree() {
+  $emit("update:theRemainingThemeDlg", false);
+  $emit("update:rowForm", {});
+}
+// 投票结果
+async function getVoteDetail() {
+  const res = await raiInterface.questionnaireVote_detail({
+    QuestionnaireId: props.rowForm.QuestionnaireId,
+  });
+  if (res.Ret === 200) {
+    nextTick(() => {
+      voteDetailList.value = res.Data.List || [];
+    });
+  }
+}
+// 查看票数详情
+async function lookVoteDetailsHandler(item) {
+  const res = await raiInterface.questionnaireVote_list({
+    QuestionnaireThemeId: item.QuestionnaireThemeId,
+  });
+
+  if (res.Ret === 200) {
+    isVoteDetails.value = true;
+    nextTick(() => {
+      voteNumDetailList.value = res.Data.List || [];
+    });
+  }
+}
+// 查看其余主题
+async function lookVoteOther() {
+  const res = await raiInterface.questionnaireVote_other({
+    QuestionnaireId: props.rowForm.QuestionnaireId,
+  });
+
+  if (res.Ret === 200) {
+    nextTick(() => {
+      voteOtherList.value = res.Data.List || [];
+    });
+  }
+}
+</script>
+
 <template>
   <div class="container vote-dlg-container">
     <!-- 投票结果 -->
     <el-dialog
-      v-dialogDrag
+      draggable
       :close-on-click-modal="false"
       title="投票结果"
       :modal-append-to-body="false"
       center
       :append-to-body="true"
-      :visible.sync="isVotinRgesultsDlg"
+      v-model="props.isVotinRgesultsDlg"
       :before-close="closeHandler"
       width="500px"
     >
       <el-table border :data="voteDetailList" style="margin-bottom: 20px" height="350">
         <el-table-column align="center" prop="ActivityTheme" key="name" label="主题"></el-table-column>
         <el-table-column width="100" align="center" prop="VoteTotal" key="name" label="票数">
-          <template slot-scope="{ row }">
+          <template #default="{ row }">
             <span class="editsty" @click="lookVoteDetailsHandler(row)"> {{ row.VoteTotal }}</span>
           </template>
         </el-table-column>
@@ -23,13 +113,13 @@
     </el-dialog>
     <!-- 票数明细 -->
     <el-dialog
-      v-dialogDrag
+      draggable
       :close-on-click-modal="false"
       title="票数明细"
       :modal-append-to-body="false"
       center
       :append-to-body="true"
-      :visible.sync="isVoteDetails"
+      v-model="isVoteDetails"
       :before-close="closeHandlerTwo"
       width="600px"
     >
@@ -42,13 +132,13 @@
     </el-dialog>
     <!-- 其余主题 -->
     <el-dialog
-      v-dialogDrag
+      draggable
       :close-on-click-modal="false"
       title="其余主题"
       :modal-append-to-body="false"
       center
       :append-to-body="true"
-      :visible.sync="theRemainingThemeDlg"
+      v-model="props.theRemainingThemeDlg"
       :before-close="closeHandlerThree"
       width="600px"
     >
@@ -63,101 +153,6 @@
   </div>
 </template>
 
-<script>
-import { raiInterface, raiSpecial } from "@/api/api.js";
-
-export default {
-  name: "",
-  props: {
-    isVotinRgesultsDlg: {
-      type: Boolean,
-      default: false,
-    },
-    theRemainingThemeDlg: {
-      type: Boolean,
-      default: false,
-    },
-    rowForm: {
-      type: Object,
-      default: {},
-    },
-  },
-  data() {
-    return {
-      isVoteDetails: false,
-      voteDetailList: [], //投票结果
-      voteNumDetailList: [], //查看票数详情
-      voteOtherList: [], //查看其余主题
-    };
-  },
-  computed: {},
-  watch: {
-    isVotinRgesultsDlg: {
-      handler(newValue) {
-        newValue && this.getVoteDetail();
-      },
-    },
-    theRemainingThemeDlg: {
-      handler(newValue) {
-        newValue && this.lookVoteOther();
-      },
-    },
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    // 关闭弹框事件
-    closeHandler(type) {
-      this.$emit("update:isVotinRgesultsDlg", false);
-      this.$emit("update:rowForm", {});
-    },
-    closeHandlerTwo() {
-      this.isVoteDetails = false;
-    },
-    closeHandlerThree() {
-      this.$emit("update:theRemainingThemeDlg", false);
-      this.$emit("update:rowForm", {});
-    },
-    // 投票结果
-    async getVoteDetail() {
-      const res = await raiInterface.questionnaireVote_detail({
-        QuestionnaireId: this.rowForm.QuestionnaireId,
-      });
-      if (res.Ret === 200) {
-        this.$nextTick(() => {
-          this.voteDetailList = res.Data.List || [];
-        });
-      }
-    },
-    // 查看票数详情
-    async lookVoteDetailsHandler(item) {
-      const res = await raiInterface.questionnaireVote_list({
-        QuestionnaireThemeId: item.QuestionnaireThemeId,
-      });
-
-      if (res.Ret === 200) {
-        this.isVoteDetails = true;
-        this.$nextTick(() => {
-          this.voteNumDetailList = res.Data.List || [];
-        });
-      }
-    },
-    // 查看其余主题
-    async lookVoteOther() {
-      console.log(this.rowForm);
-      const res = await raiInterface.questionnaireVote_other({
-        QuestionnaireId: this.rowForm.QuestionnaireId,
-      });
-
-      if (res.Ret === 200) {
-        this.$nextTick(() => {
-          this.voteOtherList = res.Data.List || [];
-        });
-      }
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .vote-dlg-container-theme-survey {
   .add-theme-content {

src/views/rai_manage/activityManage/components/addActivity.vue

@@ -1,3 +1,850 @@
+<script setup>
+import { ref, onMounted, nextTick, reactive, computed, watch, toRefs } from "vue";
+
+import { raiInterface, customInterence, getOSSSign, resourceVoiceupload } from "@/api/api.js";
+import VueFroala from "vue-froala-wysiwyg";
+import Clipboard from "clipboard";
+import AddIndustryMark from "../../components/addIndustryMark.vue";
+import RichText from "../../../components/richText.vue";
+import MD5 from "js-md5";
+import ResearchDeduct from "./addComopnents/ResearchDeduct.vue";
+import ModifyImgDlg from "./addComopnents/modifyImgDlg.vue";
+import { Calendar, Search, InfoFilled } from "@element-plus/icons-vue";
+
+import { ElMessageBox, ElMessage, ElLoading } from "element-plus";
+
+import _ from "lodash";
+
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  cactivityType: "",
+  content: "", //内容
+  optionFormregion: "", //行业选择
+  radio: "1", //单选按钮
+  isOptionRef: false,
+  chartPermissionList: [], //行业的数组
+  cactivityTypeList: [], //活动类型
+  dialogVisible: false, //弹框
+  astrict: "", //人数限制
+  copyTxt: "1", //复制的模版
+  templatePText: "",
+  checkedCities: [], //
+  checkedCitiesTwo: "",
+  cities: [], //
+  isIndeterminate: false, //是否
+  checkAll: false,
+  showType: "9",
+  activityTypeName: "纪要内容模板",
+  isShow: true,
+  isShowSelect: true,
+  forbidden: [],
+  checkAllIs: false,
+  contentTemplateTitle: "1",
+  zoomTemplate: "",
+  zoomTemplateP: "",
+  industryArr: [], //所有的行业
+  industryCascade: "", //所有行业及联的选择
+  markValue: "", //添加标的
+  markOptions: [], ///添加标的的数组
+  addMarkUpVal: {
+    industrialName: "",
+    industrialId: "",
+  }, //弹框里的
+  radioTemporary: false, //临时标签
+  valTemporary: "", //临时标签的输入框
+  selectDisabled: false, //临时标签的输入后全部禁用
+  defaultProps: {
+    label: "PermissionName",
+    children: "List",
+    value: "ChartPermissionId",
+  },
+  addIndustryDlg: false,
+  addMarkDlg: false,
+  subjectRadio: "1",
+  addSubjectLabel: [],
+  dialogVisibleSubject: false,
+  addSubjectName: "",
+  addSubjectOptions: "",
+  nameSubjectOptions: [],
+  isShowSubject: false,
+  ListSubject: [],
+  checkScaleList: [], //选择规模
+  scaleIsDisabled: "", //选择规模 禁用
+  isMark: false,
+  radioVisibleActivity: 2,
+  decisionChecked: false,
+  fileListAudio: [],
+  baseApi: import.meta.env.VITE_APP_API_ROOT,
+  activeIsState: "",
+  addEditVideo: [],
+  startUpload: false, //开始上传
+  percentage: 0,
+  isShowAddIcon: true, //主题标签的添加的iocn 是否显示
+  modifyImgVisible: false,
+  defaultImage: "",
+  shareImg: "",
+  videoAndVoiceList: [],
+  areaType: 1,
+});
+
+const isResearch = computed(() => {
+  return $route.path.indexOf("Purchaser") != -1 ? true : false;
+});
+
+// 上传音频
+async function handleUploadAudio(e) {
+  const loading = ElLoading.service({
+    lock: true,
+    text: "上传音频中...",
+    spinner: "el-icon-loading",
+    background: "rgba(0, 0, 0, 0.7)",
+  });
+  let form = new FormData();
+  form.append("file", e.file);
+  const res = await resourceVoiceupload(form);
+  if (res.Ret === 200) {
+    getVideoAndImg(1);
+    let obj = {
+      name: res.Data.ResourceName,
+      url: res.Data.ResourceUrl,
+      PlaySeconds: res.Data.PlaySeconds,
+    };
+    pageState.fileListAudio = [obj];
+    loading.close();
+  }
+}
+
+//删除新增的主题标签
+function deleteSubject(index, item) {
+  pageState.addSubjectLabel.splice(index, 1);
+}
+function markSelectFocusAdd(index, item) {
+  item.markOptions = [];
+  item.IndustrialSubjectIdS = [];
+  let arr = [];
+  arr = item.IndustrialManagementIdS.map((key) => {
+    return key[1];
+  });
+  raiInterface
+    .getindustrialSubjectlistIds({
+      IndustrialManagementIdStr: arr.join(","),
+    })
+    .then((res) => {
+      if (res.Ret === 200) {
+        item.markOptions = res.Data.List || [];
+      }
+    });
+}
+
+function addLabelClick() {
+  if (pageState.addSubjectLabel.length) {
+    let index = pageState.addSubjectLabel.length - 1;
+    pageState.addSubjectLabel.push({
+      IndustrialManagementIdS: pageState.addSubjectLabel[index].IndustrialManagementIdS,
+      IndustrialSubjectIdS: pageState.addSubjectLabel[index].IndustrialSubjectIdS,
+      markOptions: pageState.addSubjectLabel[index].markOptions,
+      isMark: pageState.addSubjectLabel[index].isMark,
+      forbidden: pageState.addSubjectLabel[index].forbidden,
+      temporary: pageState.addSubjectLabel[index].temporary,
+      temporaryText: pageState.addSubjectLabel[index].temporaryText,
+      subscribe: pageState.addSubjectLabel[index].subscribe,
+    });
+  } else {
+    pageState.addSubjectLabel = [
+      {
+        IndustrialManagementIdS: pageState.industryCascade,
+        IndustrialSubjectIdS: pageState.markValue,
+        markOptions: pageState.markOptions,
+        isMark: pageState.isMark,
+        forbidden: pageState.selectDisabled,
+        temporary: pageState.radioTemporary,
+        temporaryText: pageState.valTemporary,
+        subscribe: researchSelect.value.isCanAppointmentMinutes,
+      },
+    ];
+  }
+}
+
+function propertyChange() {
+  if (pageState.subjectRadio == 2) return;
+  pageState.markOptions = [];
+  pageState.markValue = "";
+}
+
+//添加后的 临时标签
+function temporaryChangeHandler(item) {
+  item.forbidden = item.temporary;
+  !item.forbidden ? (item.temporaryText = "") : "";
+}
+
+//编辑进来的详情
+function getDetail() {
+  raiInterface.activityDetail({ ActivityId: Number($route.query.id) }).then((res) => {
+    if (res.Ret !== 200) return;
+    const { Data } = res;
+    pageState.defaultImage = Data.BackgroundImg;
+    pageState.shareImg = Data.ShareImg;
+    pageState.activeIsState = Data.ActiveState;
+    pageState.cactivityType = Data.ActivityTypeId;
+    pageState.optionFormregion = Data.ChartPermissionName;
+    pageState.checkedCities = Data.CustomerTypeIds ? Data.CustomerTypeIds.split(",").map((item) => Number(item)) : [];
+    pageState.astrict = Data.LimitPeopleNum == "0" ? "" : Data.LimitPeopleNum;
+    pageState.showType = Data.ShowType;
+    pageState.content = Data.Body;
+    pageState.checkScaleList = Data.Scale ? Data.Scale.split(",") : [];
+    pageState.scaleIsDisabled = Data.Scale;
+    pageState.radioVisibleActivity = Data.VisibleRange > 0 ? Data.VisibleRange : 1;
+    pageState.decisionChecked = Data.IsMakerShow == 1 ? true : false;
+    let checkedCount = Data.CustomerTypeIds ? Data.CustomerTypeIds.split(",").length : "";
+    pageState.checkAll = checkedCount === pageState.cities.length;
+    pageState.isIndeterminate = checkedCount > 0 && checkedCount < pageState.cities.length;
+    pageState.isMark = Data.IsShowSubjectName == 1 ? true : false;
+    pageState.valTemporary = Data.TemporaryLabel;
+    pageState.radioTemporary = pageState.valTemporary ? true : false;
+    pageState.areaType = Data.AreaType;
+    // 复选框模块
+    nextTick(() => {
+      let RefPage = researchSelect.value;
+      RefPage.isCanAppointmentMinutes = Data.IsCanAppointmentMinutes == 1 ? true : false;
+      RefPage.isYidongConduct = Data.IsYidongConduct == 1 ? true : false;
+      RefPage.isExternalLabel = Data.IsExternalLabel == 1 ? true : false;
+      RefPage.isCanOutboundCall = Data.IsCanOutboundCall == 1 ? true : false;
+      RefPage.isDeduct = Data.IsResearchPoints == 1 ? true : false;
+      RefPage.provideEmail = Data.IsNeedEmail == 1 ? true : false;
+      RefPage.isBClass = Data.IsBClass == 1 ? true : false;
+      RefPage.SiginupDeadline = Data.SiginupDeadline;
+      RefPage.PointsSet = Data.PointsSet;
+      RefPage.institutionName = Data.PointsSet.CompanyName;
+      RefPage.isShowHz = !!Data.IsShowHz;
+    });
+    pageState.addEditVideo = Data.VideoDetail
+      ? [Data.VideoDetail].map((item) => {
+          return { name: item.VideoName, PlaySeconds: item.VideoDuration, url: item.VideoUrl };
+        })
+      : [];
+    pageState.fileListAudio = Data.VoiceList
+      ? Data.VoiceList.map((item) => {
+          return { name: item.Name, PlaySeconds: item.PlaySeconds, url: item.Url };
+        })
+      : [];
+    if (Data.PublishStatus == 1) {
+      pageState.forbidden = Data.CustomerTypeIds ? Data.CustomerTypeIds.split(",") : [];
+      pageState.checkAllIs = pageState.forbidden.length >= 1;
+    }
+    if (pageState.astrict > 0 && pageState.showType == 2) {
+      pageState.radio = "2";
+    }
+    pageState.valTemporary = res.Data.TemporaryLabel;
+    pageState.radioTemporary = pageState.valTemporary ? true : false;
+    pageState.industryCascade = res.Data.ListIndustrial ? res.Data.ListIndustrial.map((item) => [item.ChartPermissionId, item.IndustrialManagementId]) : "";
+
+    pageState.markValue = res.Data.ListSubject ? res.Data.ListSubject.map((item) => item.IndustrialSubjectId) : "";
+    if (pageState.markValue) {
+      markSelectFocus();
+    }
+  });
+}
+
+//提交发布活保存前的校验
+function submitForm(type) {
+  if (pageState.checkedCities) {
+    pageState.checkedCitiesTwo = pageState.checkedCities.join(",");
+  }
+  if (!pageState.radioTemporary && !pageState.industryCascade.length) return ElMessage.error("请选择产业!");
+  if (pageState.radioTemporary && !pageState.valTemporary) return ElMessage.error("请输入临时标签！");
+  let arr = [];
+  if (pageState.industryCascade.length) {
+    arr = pageState.industryCascade.map((item) => {
+      return item[1];
+    });
+  }
+  if (pageState.showType == "3" || pageState.radio == "2") {
+    if (!pageState.astrict) return pageState.$message.error("请在输入框输入人数上限!");
+  }
+  if (!pageState.cactivityType || !pageState.optionFormregion) return ElMessage.error("请选择行业或活动类型");
+  if (pageState.subjectRadio == 2) {
+    let labelArr = pageState.addSubjectLabel.map((item) => {
+      let labelArrList = [];
+      item.IndustrialManagementIdS.forEach((val) => {
+        labelArrList.push(val[1]);
+      });
+      return {
+        IndustrialManagementIdS: labelArrList.join(","),
+        IndustrialSubjectIdS: item.IndustrialSubjectIdS.join(","),
+        IsShowSubjectName: item.isMark ? 1 : 0,
+        TemporaryLabel: item.temporary ? item.temporaryText : "",
+        IsCanAppointmentMinutes: item.subscribe ? 1 : 0,
+      };
+    });
+    pageState.ListSubject = [
+      {
+        IndustrialManagementIdS: arr.length ? arr.join(",") : "",
+        IndustrialSubjectIdS: pageState.markValue.length ? pageState.markValue.join(",") : "",
+        IsShowSubjectName: pageState.isMark ? 1 : 0,
+        TemporaryLabel: pageState.radioTemporary ? pageState.valTemporary : "",
+        IsCanAppointmentMinutes: researchSelect.value.isCanAppointmentMinutes ? 1 : 0,
+      },
+      ...labelArr,
+    ];
+  } else {
+    pageState.ListSubject = [
+      {
+        IndustrialManagementIdS: arr.length ? arr.join(",") : "",
+        IndustrialSubjectIdS: pageState.markValue.length ? pageState.markValue.join(",") : "",
+        IsShowSubjectName: pageState.isMark ? 1 : 0,
+        TemporaryLabel: pageState.radioTemporary ? pageState.valTemporary : "",
+        IsCanAppointmentMinutes: researchSelect.value.isCanAppointmentMinutes ? 1 : 0,
+      },
+    ];
+  }
+  let VoiceList = pageState.fileListAudio.map((item) => {
+    return {
+      Name: item.name,
+      PlaySeconds: item.PlaySeconds.toString(),
+      Url: item.url,
+    };
+  });
+  let VideoDetail = pageState.addEditVideo.map((item) => {
+    return {
+      VideoName: item.name,
+      VideoDuration: item.PlaySeconds.toString(),
+      VideoUrl: item.url,
+    };
+  });
+  saveTheRelease(type, arr, VoiceList, VideoDetail[0]);
+}
+
+const researchSelect = ref(null);
+
+//保存或发布
+const saveTheRelease = _.debounce(async function (type, arr, VoiceList, VideoDetail) {
+  let RefPage = researchSelect.value;
+  let PointsSet = RefPage.PointsSet;
+  const res = await raiInterface.preserveAndPublishAdd({
+    DoType: type == "发布" ? 1 : 0,
+    ActivityId: Number(route.query.id) || 0,
+    ActivityTypeId: Number(pageState.cactivityType),
+    Body: pageState.content,
+    PermissionName: pageState.optionFormregion,
+    CustomerTypeIds: pageState.checkedCitiesTwo,
+    IsAllCustomerType: pageState.checkAll ? 1 : 0,
+    LimitPeopleNum: Number(pageState.astrict) || 0,
+    IndustrialManagementIdS: arr.length ? arr.join(",") : "",
+    IndustrialSubjectIdS: pageState.markValue.length ? pageState.markValue.join(",") : "",
+    List: pageState.ListSubject,
+    Scale: pageState.checkScaleList.length ? pageState.checkScaleList.join(",") : "",
+    LabelType: Number(pageState.subjectRadio),
+    IsShowSubjectName: pageState.isMark ? 1 : 0,
+    IsMakerShow: pageState.decisionChecked ? 1 : 0,
+    VisibleRange: pageState.radioVisibleActivity,
+    VoiceList,
+    VideoDetail,
+    IsYidongConduct: RefPage.isYidongConduct ? 1 : 0,
+    IsExternalLabel: RefPage.isExternalLabel ? 1 : 0,
+    IsCanOutboundCall: RefPage.isCanOutboundCall ? 1 : 0,
+    IsResearchPoints: RefPage.isDeduct ? 1 : 0,
+    IsNeedEmail: RefPage.provideEmail ? 1 : 0,
+    IsBClass: RefPage.isBClass ? 1 : 0,
+    SiginupDeadline: RefPage.SiginupDeadline,
+    PointsSet,
+    BackgroundImg: pageState.defaultImage,
+    ShareImg: pageState.shareImg,
+    IsResearch: pageState.optionFormregion.includes("研选") ? true : false,
+    IsShowHz: RefPage.isShowHz ? 1 : 0,
+    AreaType: pageState.areaType,
+  });
+
+  if (res.Ret !== 200) return;
+  ElMessage.success("操作成功！");
+  router.back();
+}, 500);
+//获取行业
+function chartPermission() {
+  raiInterface.chartPermissionList({ IsHideResearch: !isResearch.value }).then((res) => {
+    if (res.Ret === 200) {
+      pageState.chartPermissionList = res.Data.List;
+    }
+  });
+}
+//获取活动类型
+function getActivityType() {
+  raiInterface.getActivityType({ IsResearch: isResearch.value }).then((res) => {
+    if (res.Ret === 200) {
+      pageState.isShowAddIcon = res.Data.IsShowAddIcon;
+      pageState.cactivityTypeList = res.Data.List;
+    }
+  });
+}
+//获取活动类型详情
+function activityTypeDetail(e) {
+  pageState.radio = "1"; //单选按钮
+  pageState.astrict = ""; //人数限制
+  pageState.contentTemplateTitle = "1";
+  pageState.subjectRadio = "1";
+  pageState.checkedCities = [];
+  researchSelect.value.isBClass = false;
+  pageState.radioVisibleActivity = pageState.cactivityType == 7 ? 1 : 2;
+  if (!pageState.cactivityType) return;
+  raiInterface
+    .activityTypeDetail({
+      ActivityTypeId: pageState.cactivityType - 0,
+    })
+    .then((res) => {
+      if (res.Ret === 200) {
+        pageState.copyTxt = res.Data.Template;
+        pageState.templatePText = res.Data.TemplateP;
+        pageState.zoomTemplate = res.Data.ZoomTemplate;
+        pageState.ZoomTemplateP = res.Data.ZoomTemplateP;
+        pageState.showType = res.Data.ShowType;
+        pageState.activityTypeName = res.Data.ActivityTypeName;
+      }
+    });
+}
+// 操作：点击了复制按钮
+function handleCopyFun() {
+  let clipboard = new Clipboard("#copy_text");
+  clipboard.on("success", (e) => {
+    ElMessage({
+      type: "success",
+      message: "复制成功!",
+    });
+    pageState.dialogVisible = false;
+    clipboard.destroy(); // 释放内存
+  });
+  clipboard.on("error", (e) => {
+    // 不支持复制
+    ElMessage.info("该浏览器不支持自动复制");
+    clipboard.destroy(); // 释放内存
+  });
+}
+//点击了复制模版
+function templateBtn() {
+  if (!pageState.cactivityType) return ElMessage.error("请选择活动类型");
+  pageState.dialogVisible = true;
+}
+//获取多选的客户列表
+function customerTypelist() {
+  raiInterface.customerTypelist().then((res) => {
+    if (res.Ret === 200) {
+      pageState.cities = res.Data.List;
+    }
+  });
+}
+// 子组件来的事件 产业
+function commitIndustryDlg(data, type = "") {
+  getIndustry();
+  pageState.industryCascade.push([Number(data.ChartPermissionId), Number(data.NewId)]);
+}
+// 子组件来的事件 标的
+function commitMarkDlg(data) {
+  let arr = pageState.industryCascade.flat(Infinity);
+  raiInterface
+    .getindustrialSubjectlistIds({
+      IndustrialManagementIdStr: arr[1],
+    })
+    .then((res) => {
+      if (res.Ret === 200) {
+        pageState.markOptions = res.Data.List || [];
+      }
+    });
+  pageState.markValue = data.split(",").map((item) => Number(item));
+}
+/* 获取全部的行业 */
+function getIndustry() {
+  raiInterface.getListIndustrial().then((res) => {
+    if (res.Ret === 200) {
+      pageState.industryArr = res.Data.List || [];
+    }
+  });
+}
+//top 行业清除的事件
+function clearTopIndustry() {
+  pageState.industryCascade = [];
+  pageState.radioTemporary = false;
+  pageState.valTemporary = "";
+  pageState.markValue = "";
+  pageState.radioVisibleActivity = 2;
+}
+//添加标的的点击事件
+function isAddMarketDlg() {
+  let arr = pageState.industryCascade.flat(Infinity);
+  pageState.industryArr.forEach((item) => {
+    if (item.ChartPermissionId == arr[0]) {
+      pageState.addMarkUpVal.industrialId = arr[1];
+      item.List.forEach((key) => {
+        if (key.ChartPermissionId == arr[1]) {
+          pageState.addMarkUpVal.industrialName = key.PermissionName;
+        }
+      });
+    }
+  });
+  if (pageState.industryCascade.length == 1) {
+    pageState.addMarkDlg = true;
+  } else if (pageState.industryCascade.length > 1) {
+    ElMessage.error("已选多个产业，无法添加标的");
+  } else {
+    ElMessage.error("请先选择产业");
+  }
+}
+//点击添加标的的下拉选择框
+function markSelectFocus() {
+  if (!pageState.industryCascade.length) {
+    ElMessage.error("请先选择产业");
+  } else {
+    let arr = [];
+    arr = pageState.industryCascade.map((item) => {
+      return item[1];
+    });
+    raiInterface
+      .getindustrialSubjectlistIds({
+        IndustrialManagementIdStr: arr.join(","),
+      })
+      .then((res) => {
+        if (res.Ret === 200) {
+          pageState.markOptions = res.Data.List || [];
+        }
+      });
+  }
+}
+function handleCheckAllChange(val) {
+  if (val) {
+    let newCodeList = pageState.cities.map((item) => item.CustomerTypeId);
+    pageState.checkedCities = newCodeList;
+  } else {
+    pageState.checkedCities = [];
+  }
+  pageState.checkedCitiesTwo = pageState.checkedCities.join(",");
+  pageState.isIndeterminate = false;
+}
+function handleCheckedCitiesChange(value) {
+  let checkedCount = value.length;
+  pageState.checkAll = checkedCount === pageState.cities.length;
+  pageState.isIndeterminate = checkedCount > 0 && checkedCount < pageState.cities.length;
+}
+function functioncancelBtn() {
+  router.back();
+}
+function functioncontentTemplate(type) {
+  pageState.contentTemplateTitle = type;
+}
+function functionhandleCloseSubject() {
+  pageState.nameSubjectOptions = [];
+  pageState.addSubjectName = "";
+  pageState.addSubjectOptions = [];
+  pageState.dialogVisibleSubject = false;
+}
+async function remoteMethod(query) {
+  if (query !== "") {
+    const res = await raiInterface.industrialSubjectSearch({
+      KeyWord: query,
+    });
+    if (res.Ret === 200) {
+      pageState.addSubjectOptions = res.Data.List || [];
+    }
+  }
+}
+async function searchInfo(val) {
+  if (val !== "") {
+    const res = await raiInterface.industrialSubjectSearchInfo({
+      KeyWord: val,
+    });
+    if (res.Ret === 200) {
+      pageState.isShowSubject = res.Data.List ? false : true;
+      let arrList = [];
+      arrList = res.Data.List
+        ? res.Data.List.map((item) => {
+            let arr = [];
+            item.List.forEach((key) => {
+              arr.push(key.Name);
+            });
+            return {
+              ...item,
+              value: arr.join(","),
+            };
+          })
+        : [];
+      pageState.nameSubjectOptions = arrList;
+    }
+  } else {
+    pageState.nameSubjectOptions = [];
+  }
+}
+//套餐类型的 提升文本
+function functioncheckboxTooltip(val) {
+  let str = "";
+  switch (val) {
+    case "全选":
+      str = "所有客户均可看到该活动（冻结、流失客户也可看到，但会提示无权限参会）";
+      break;
+    case "活动可见":
+      str = "套餐类型和管理规模两项下，均有勾选时，只要满足其中之一的条件，客户就可见此活动。例如：勾选了大套餐客户和100亿以上，则大套餐客户和100亿以上规模的客户都可以看到此活动";
+      break;
+  }
+  return str;
+}
+//删除上传
+function handleRemoveAudio(file, fileList) {
+  pageState.fileListAudio = [];
+}
+//删除上传前得确认
+function beforeRemoveAudio(file, fileList) {
+  return ElMessageBox.confirm(`确定移除 ${file.name}？`);
+}
+//删除视频的上传
+function handleRemoveVideo(file, fileList) {
+  pageState.addEditVideo = [];
+}
+//获取视频时长的promise
+function handleGetDuration(file) {
+  return new Promise((resolve, reject) => {
+    const fileUrl = URL.createObjectURL(file);
+    const audioEl = new Audio(fileUrl);
+    audioEl.addEventListener("loadedmetadata", (e) => {
+      resolve(audioEl.duration);
+    });
+  });
+}
+
+//上传视频判断格式
+function handelBeforeUploadVideo(e) {
+  if (e.type != "video/mp4") {
+    ElMessage.warning("上传失败，上传视频格式不正确");
+    return false;
+  }
+}
+
+// 上传视频
+async function handleUpload(e) {
+  const duration = await this.handleGetDuration(e.file);
+  this.addEditVideo.push({
+    name: e.file.name,
+    PlaySeconds: duration + "",
+    url: "",
+  });
+  const res = await getOSSSign();
+
+  if (res.Ret === 200) {
+    let accessKeyId = res.Data.AccessKeyId;
+    let accessKeySecret = res.Data.AccessKeySecret;
+    let stsToken = res.Data.SecurityToken;
+    this.handleUploadToOSS(e.file, accessKeyId, accessKeySecret, stsToken);
+  }
+}
+//上传到阿里云
+async function handleUploadToOSS(file, accessKeyId, accessKeySecret, stsToken) {
+  pageState.startUpload = true;
+  const ALOSSINS = new OSS({
+    // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
+    region: "oss-cn-shanghai",
+    // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
+    accessKeyId: accessKeyId,
+    accessKeySecret: accessKeySecret,
+    // 从STS服务获取的安全令牌（SecurityToken）。
+    stsToken: stsToken,
+    // 填写Bucket名称，例如examplebucket。
+    bucket: "hzchart",
+    endpoint: "hzstatic.hzinsights.com",
+    cname: true,
+    timeout: 600000,
+  });
+  // 生成文件名
+  const t = new Date().getTime().toString();
+  const temName = `static/yb/video/${MD5(t)}.${file.name.split(".")[1]}`;
+  console.log(temName);
+
+  const options = {
+    // 获取分片上传进度、断点和返回值。
+    progress: (p, cpt, res) => {
+      console.log(p);
+      pageState.percentage = parseInt(p * 100);
+    },
+    // 设置并发上传的分片数量。
+    parallel: 10,
+    // 设置分片大小。默认值为1 MB，最小值为100 KB。
+    partSize: 1024 * 1024 * 10, // 10MB
+  };
+  try {
+    const res = await ALOSSINS.multipartUpload(temName, file, { ...options });
+    console.log("上传结果", res);
+    if (res.res.status === 200) {
+      getVideoAndImg(2);
+      let VideoUrl = "https://hzstatic.hzinsights.com/" + res.name;
+      pageState.addEditVideo[0].url = VideoUrl;
+      pageState.startUpload = false;
+      pageState.percentage = 0;
+    }
+  } catch (error) {
+    ElMessage.warning("上传失败，请刷新重试");
+    pageState.startUpload = false;
+    pageState.percentage = 0;
+  }
+}
+function errorUpload() {
+  ElMessage.error("音频文件和视频文件，仅支•持•上•传一个");
+}
+// 公司线下调研 调研电话会 的选择
+function isCheckAllType(newval) {
+  if (newval) {
+    let newCodeList = [];
+    pageState.cities.forEach((item) => {
+      if (![5, 6, 7].includes(item.CustomerTypeId)) {
+        newCodeList.push(item.CustomerTypeId);
+      }
+    });
+    pageState.checkedCities = newCodeList;
+    pageState.checkedCitiesTwo = pageState.checkedCities.join(",");
+    pageState.isIndeterminate = true;
+    pageState.checkAll = false;
+  } else {
+    pageState.checkedCities = [];
+    pageState.checkedCitiesTwo = "";
+    pageState.checkAll = false;
+  }
+}
+// 点击修改图片的弹框
+function modifyImgHandler() {
+  let type = pageState.addEditVideo.length > 0 ? 2 : 1;
+  getVideoAndImg(type, "修改");
+  pageState.modifyImgVisible = true;
+}
+// video_and_voiceImgActivityVideo（）
+async function getVideoAndImg(type, isOne = "") {
+  const res = await raiInterface.video_and_voiceImgActivityVideo({
+    FileType: type,
+    ActivityId: Number($route.query.id),
+  });
+  if (res.Ret === 200) {
+    isOne == "修改" ? "" : (pageState.defaultImage = res.Data.List[0].ImgUrl);
+    pageState.videoAndVoiceList = res.Data.List;
+  }
+}
+
+watch(
+  () => radio,
+  (newVal) => {
+    if (newVal == 1) {
+      pageState.astrict = "";
+    }
+    if ($route.query.id) return;
+    isCheckAllType(this.cactivityType == 3 && newVal == 2 ? true : false);
+  }
+);
+
+watch(
+  () => radioTemporary,
+  (newVal) => {
+    if (pageState.radioTemporary) {
+      pageState.selectDisabled = true;
+    } else {
+      pageState.valTemporary = "";
+      pageState.selectDisabled = false;
+    }
+  }
+);
+
+watch(
+  () => subjectRadio,
+  (newVal) => {
+    pageState.addSubjectLabel = [];
+  }
+);
+
+watch(
+  () => cactivityType,
+  (newVal) => {
+    if ($route.query.id) return;
+    isCheckAllType(newval === 4 ? true : false);
+  }
+);
+
+onMounted(() => {
+  if (!isResearch.value) {
+    chartPermission();
+  } else {
+    pageState.optionFormregion = "研选订阅";
+  }
+  getActivityType();
+  customerTypelist();
+  getIndustry();
+  if ($route.query.id) {
+    getDetail();
+  }
+  if ($route.query.isShow == 1) {
+    pageState.isShow = false;
+  }
+  if ($route.query.isShow >= 0) {
+    pageState.isShowSelect = false;
+  }
+});
+
+const {
+  cactivityType,
+  content,
+  optionFormregion,
+  radio,
+  isOptionRef,
+  chartPermissionList,
+  cactivityTypeList,
+  dialogVisible,
+  astrict,
+  copyTxt,
+  templatePText,
+  checkedCities,
+  checkedCitiesTwo,
+  cities,
+  isIndeterminate,
+  checkAll,
+  showType,
+  activityTypeName,
+  isShow,
+  isShowSelect,
+  forbidden,
+  checkAllIs,
+  contentTemplateTitle,
+  zoomTemplate,
+  zoomTemplateP,
+  industryArr,
+  industryCascade,
+  markValue,
+  markOptions,
+  addMarkUpVal,
+  radioTemporary,
+  valTemporary,
+  selectDisabled,
+  defaultProps,
+  addIndustryDlg,
+  addMarkDlg,
+  subjectRadio,
+  addSubjectLabel,
+  dialogVisibleSubject,
+  addSubjectName,
+  addSubjectOptions,
+  nameSubjectOptions,
+  isShowSubject,
+  ListSubject,
+  checkScaleList,
+  scaleIsDisabled,
+  isMark,
+  radioVisibleActivity,
+  decisionChecked,
+  fileListAudio,
+  baseApi,
+  activeIsState,
+  addEditVideo,
+  startUpload,
+  percentage,
+  isShowAddIcon,
+  modifyImgVisible,
+  defaultImage,
+  shareImg,
+  videoAndVoiceList,
+  areaType,
+} = toRefs(pageState);
+</script>
+
 <template>
   <div class="container-addAct">
     <el-card class="card-top">
@@ -30,7 +877,7 @@
     </el-card>
 
     <el-card style="margin-top: 30px">
-      <froala id="froala-editor" ref="froalaEditor" :tag="'textarea'" :config="froalaConfig" v-model="content"></froala>
+      <RichText id="froala-editor" v-model="content" ref="froalaEditor" isText="请输入活动内容" />
       <div style="margin-top: 25px" v-if="optionFormregion">
         <template v-if="cactivityType == 1">
           <el-radio style="margin: 0 0 20px 30px" v-model="subjectRadio" label="1">单主题标签：</el-radio>
@@ -40,11 +887,13 @@
           <span style="width: 98px; flex-shrink: 0">
             主题标签：
             <el-tooltip placement="top-start">
-              <div slot="content">
-                1、小程序内默认显示产业名称，也可勾选【小程序内显示标的名称】更改显示<br />2、若该活动暂无相关联产业，请联系内容组添加，或勾选并填写【临时标签】用于小程序内展示<br />
-                3、选择产业和关联标的后，即完成对活动的标签定义；可同时勾选并填写【临时标签】，小程序内将显示临时标签名称
-              </div>
-              <i class="el-icon-info" />
+              <template #content>
+                <div>
+                  1、小程序内默认显示产业名称，也可勾选【小程序内显示标的名称】更改显示<br />2、若该活动暂无相关联产业，请联系内容组添加，或勾选并填写【临时标签】用于小程序内展示<br />
+                  3、选择产业和关联标的后，即完成对活动的标签定义；可同时勾选并填写【临时标签】，小程序内将显示临时标签名称
+                </div>
+              </template>
+              <el-icon><InfoFilled /></el-icon>
             </el-tooltip>
           </span>
           <el-cascader
@@ -226,16 +1075,7 @@
         <el-button @click="cancelBtn">取消</el-button>
       </div>
     </el-card>
-    <el-dialog
-      v-dialogDrag
-      :close-on-click-modal="false"
-      :modal-append-to-body="false"
-      center
-      :title="activityTypeName"
-      :visible.sync="dialogVisible"
-      customClass="customWidth"
-      :before-close="handleClose"
-    >
+    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center :title="activityTypeName" v-model="dialogVisible" customClass="customWidth" :before-close="handleClose">
       <div id="dialog" v-html="copyText"></div>
       <div style="margin-bottom: 60px">
         <div class="content-template" v-if="activityTypeName == '公司调研电话会'">
@@ -247,22 +1087,24 @@
         <p v-if="cactivityType == 1" class="no-cv" style="color: #f00">注：多个活动同时输入时，请用分割线隔开</p>
         <p v-else class="no-cv" style="color: #f00">注：每次只能输入一场活动信息{{ cactivityType == 6 ? "，多篇相关报告时，用分号“；”隔开" : "" }}</p>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button id="copy_text" type="primary" v-if="contentTemplateTitle == '1'" :data-clipboard-text="copyTxt" @click="handleCopyFun">复制模版</el-button>
-        <el-button id="copy_text" type="primary" v-else :data-clipboard-text="zoomTemplate" @click="handleCopyFun">复制模版</el-button>
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button id="copy_text" type="primary" v-if="contentTemplateTitle == '1'" :data-clipboard-text="copyTxt" @click="handleCopyFun">复制模版</el-button>
+          <el-button id="copy_text" type="primary" v-else :data-clipboard-text="zoomTemplate" @click="handleCopyFun">复制模版</el-button>
+        </span>
+      </template>
     </el-dialog>
     <add-industry-mark
       :optionFormregion="optionFormregion.includes('研选') ? '研选' : optionFormregion"
-      :addIndustryDlg.sync="addIndustryDlg"
-      :addMarkDlg.sync="addMarkDlg"
+      v-model:addIndustryDlg="addIndustryDlg"
+      v-model:addMarkDlg="addMarkDlg"
       @commitIndustryDlg="commitIndustryDlg"
       @commitMarkDlg="commitMarkDlg"
       :addMarkUpVal="addMarkUpVal"
       :source="3"
     />
-    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center title="查询标的" :visible.sync="dialogVisibleSubject" width="500px" :before-close="handleCloseSubject">
+    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center title="查询标的" v-model="dialogVisibleSubject" width="500px" :before-close="handleCloseSubject">
       <div>
         <el-select style="width: 100%" v-model="addSubjectName" remote :remote-method="remoteMethod" clearable filterable @change="searchInfo" placeholder="请输入标的名称">
           <el-option v-for="item in addSubjectOptions" :key="item.IndustrialSubjectId" :label="item.SubjectName" :value="item.SubjectName"> </el-option>
@@ -274,779 +1116,10 @@
       </template>
       <p style="padding-bottom: 50px"></p>
     </el-dialog>
-    <modify-img-dlg :modifyImgVisible.sync="modifyImgVisible" :videoAndVoiceList.sync="videoAndVoiceList" />
+    <modify-img-dlg v-model:modifyImgVisible="modifyImgVisible" v-model:videoAndVoiceList="videoAndVoiceList" @updateSonDate="updateSonDate" />
   </div>
 </template>
 
-<script>
-import { raiInterface, customInterence, getOSSSign, resourceVoiceupload } from "@/api/api.js";
-import VueFroala from "vue-froala-wysiwyg";
-import Clipboard from "clipboard";
-import AddIndustryMark from "../../components/addIndustryMark.vue";
-import richTextMixins from "../../components/apply/RichTextMixins";
-import MD5 from "js-md5";
-import ResearchDeduct from "./addComopnents/ResearchDeduct.vue";
-import ModifyImgDlg from "./addComopnents/modifyImgDlg.vue";
-
-export default {
-  name: "",
-  components: { AddIndustryMark, ResearchDeduct, ModifyImgDlg },
-  props: {},
-  data() {
-    return {
-      cactivityType: "",
-      content: "", //内容
-      optionFormregion: "", //行业选择
-      radio: "1", //单选按钮
-      isOptionRef: false,
-      chartPermissionList: [], //行业的数组
-      cactivityTypeList: [], //活动类型
-      dialogVisible: false, //弹框
-      astrict: "", //人数限制
-      copyTxt: "1", //复制的模版
-      templatePText: "",
-      checkedCities: [], //
-      checkedCitiesTwo: "",
-      cities: [], //
-      isIndeterminate: false, //是否
-      checkAll: false,
-      showType: "9",
-      activityTypeName: "纪要内容模板",
-      isShow: true,
-      isShowSelect: true,
-      forbidden: [],
-      checkAllIs: false,
-      contentTemplateTitle: "1",
-      zoomTemplate: "",
-      zoomTemplateP: "",
-      industryArr: [], //所有的行业
-      industryCascade: "", //所有行业及联的选择
-      markValue: "", //添加标的
-      markOptions: [], ///添加标的的数组
-      addMarkUpVal: {
-        industrialName: "",
-        industrialId: "",
-      }, //弹框里的
-      radioTemporary: false, //临时标签
-      valTemporary: "", //临时标签的输入框
-      selectDisabled: false, //临时标签的输入后全部禁用
-      defaultProps: {
-        label: "PermissionName",
-        children: "List",
-        value: "ChartPermissionId",
-      },
-      addIndustryDlg: false,
-      addMarkDlg: false,
-      subjectRadio: "1",
-      addSubjectLabel: [],
-      dialogVisibleSubject: false,
-      addSubjectName: "",
-      addSubjectOptions: "",
-      nameSubjectOptions: [],
-      isShowSubject: false,
-      ListSubject: [],
-      checkScaleList: [], //选择规模
-      scaleIsDisabled: "", //选择规模 禁用
-      isMark: false,
-      radioVisibleActivity: 2,
-      decisionChecked: false,
-      fileListAudio: [],
-      baseApi: import.meta.env.VITE_APP_API_ROOT,
-      activeIsState: "",
-      addEditVideo: [],
-      startUpload: false, //开始上传
-      percentage: 0,
-      isShowAddIcon: true, //主题标签的添加的iocn 是否显示
-      modifyImgVisible: false,
-      defaultImage: "",
-      shareImg: "",
-      videoAndVoiceList: [],
-      areaType: 1,
-    };
-  },
-  computed: {
-    // 弘则 研选 是否是研选
-    isResearch() {
-      return this.$route.path.indexOf("Purchaser") != -1 ? true : false;
-    },
-  },
-  mixins: [richTextMixins],
-  watch: {
-    radio: {
-      handler(newVal) {
-        if (newVal == 1) {
-          this.astrict = "";
-        }
-        if (this.$route.query.id) return;
-        this.isCheckAllType(this.cactivityType == 3 && newVal == 2 ? true : false);
-      },
-    },
-    radioTemporary() {
-      if (this.radioTemporary) {
-        this.selectDisabled = true;
-      } else {
-        this.valTemporary = "";
-        this.selectDisabled = false;
-      }
-    },
-    subjectRadio() {
-      this.addSubjectLabel = [];
-    },
-    cactivityType: {
-      handler(newval) {
-        if (this.$route.query.id) return;
-        this.isCheckAllType(newval === 4 ? true : false);
-      },
-    },
-    "$route.path": {
-      handler(value) {
-        console.log(value, "value");
-      },
-      immediate: true,
-    },
-  },
-  created() {},
-  mounted() {
-    if (!this.isResearch) {
-      this.chartPermission();
-    } else {
-      this.optionFormregion = "研选订阅";
-    }
-    this.getActivityType();
-    this.customerTypelist();
-    this.getIndustry();
-    if (this.$route.query.id) {
-      this.getDetail();
-    }
-    if (this.$route.query.isShow == 1) {
-      this.isShow = false;
-    }
-    if (this.$route.query.isShow >= 0) {
-      this.isShowSelect = false;
-    }
-  },
-  methods: {
-    // 上传音频
-    async handleUploadAudio(e) {
-      const loading = this.$loading({
-        lock: true,
-        text: "上传音频中...",
-        spinner: "el-icon-loading",
-        background: "rgba(0, 0, 0, 0.7)",
-      });
-      let form = new FormData();
-      form.append("file", e.file);
-      const res = await resourceVoiceupload(form);
-      if (res.Ret === 200) {
-        this.getVideoAndImg(1);
-        let obj = {
-          name: res.Data.ResourceName,
-          url: res.Data.ResourceUrl,
-          PlaySeconds: res.Data.PlaySeconds,
-        };
-        this.fileListAudio = [obj];
-        loading.close();
-      }
-    },
-    //删除新增的主题标签
-    deleteSubject(index, item) {
-      this.addSubjectLabel.splice(index, 1);
-    },
-    markSelectFocusAdd(index, item) {
-      item.markOptions = [];
-      item.IndustrialSubjectIdS = [];
-      let arr = [];
-      arr = item.IndustrialManagementIdS.map((key) => {
-        return key[1];
-      });
-      raiInterface
-        .getindustrialSubjectlistIds({
-          IndustrialManagementIdStr: arr.join(","),
-        })
-        .then((res) => {
-          if (res.Ret === 200) {
-            item.markOptions = res.Data.List || [];
-          }
-        });
-    },
-    addLabelClick() {
-      if (this.addSubjectLabel.length) {
-        let index = this.addSubjectLabel.length - 1;
-        this.addSubjectLabel.push({
-          IndustrialManagementIdS: this.addSubjectLabel[index].IndustrialManagementIdS,
-          IndustrialSubjectIdS: this.addSubjectLabel[index].IndustrialSubjectIdS,
-          markOptions: this.addSubjectLabel[index].markOptions,
-          isMark: this.addSubjectLabel[index].isMark,
-          forbidden: this.addSubjectLabel[index].forbidden,
-          temporary: this.addSubjectLabel[index].temporary,
-          temporaryText: this.addSubjectLabel[index].temporaryText,
-          subscribe: this.addSubjectLabel[index].subscribe,
-        });
-      } else {
-        this.addSubjectLabel = [
-          {
-            IndustrialManagementIdS: this.industryCascade,
-            IndustrialSubjectIdS: this.markValue,
-            markOptions: this.markOptions,
-            isMark: this.isMark,
-            forbidden: this.selectDisabled,
-            temporary: this.radioTemporary,
-            temporaryText: this.valTemporary,
-            subscribe: this.$refs.researchSelect.isCanAppointmentMinutes,
-          },
-        ];
-      }
-    },
-    propertyChange() {
-      if (this.subjectRadio == 2) return;
-      this.markOptions = [];
-      this.markValue = "";
-    },
-    //添加后的 临时标签
-    temporaryChangeHandler(item) {
-      item.forbidden = item.temporary;
-      !item.forbidden ? (item.temporaryText = "") : "";
-    },
-    //编辑进来的详情
-    getDetail() {
-      raiInterface.activityDetail({ ActivityId: Number(this.$route.query.id) }).then((res) => {
-        if (res.Ret !== 200) return;
-        const { Data } = res;
-        this.defaultImage = Data.BackgroundImg;
-        this.shareImg = Data.ShareImg;
-        this.activeIsState = Data.ActiveState;
-        this.cactivityType = Data.ActivityTypeId;
-        this.optionFormregion = Data.ChartPermissionName;
-        this.checkedCities = Data.CustomerTypeIds ? Data.CustomerTypeIds.split(",").map((item) => Number(item)) : [];
-        this.astrict = Data.LimitPeopleNum == "0" ? "" : Data.LimitPeopleNum;
-        this.showType = Data.ShowType;
-        this.content = Data.Body;
-        this.checkScaleList = Data.Scale ? Data.Scale.split(",") : [];
-        this.scaleIsDisabled = Data.Scale;
-        this.radioVisibleActivity = Data.VisibleRange > 0 ? Data.VisibleRange : 1;
-        this.decisionChecked = Data.IsMakerShow == 1 ? true : false;
-        let checkedCount = Data.CustomerTypeIds ? Data.CustomerTypeIds.split(",").length : "";
-        this.checkAll = checkedCount === this.cities.length;
-        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
-        this.isMark = Data.IsShowSubjectName == 1 ? true : false;
-        this.valTemporary = Data.TemporaryLabel;
-        this.radioTemporary = this.valTemporary ? true : false;
-        this.areaType = Data.AreaType;
-        // 复选框模块
-        this.$nextTick(() => {
-          let RefPage = this.$refs.researchSelect;
-          RefPage.isCanAppointmentMinutes = Data.IsCanAppointmentMinutes == 1 ? true : false;
-          RefPage.isYidongConduct = Data.IsYidongConduct == 1 ? true : false;
-          RefPage.isExternalLabel = Data.IsExternalLabel == 1 ? true : false;
-          RefPage.isCanOutboundCall = Data.IsCanOutboundCall == 1 ? true : false;
-          RefPage.isDeduct = Data.IsResearchPoints == 1 ? true : false;
-          RefPage.provideEmail = Data.IsNeedEmail == 1 ? true : false;
-          RefPage.isBClass = Data.IsBClass == 1 ? true : false;
-          RefPage.SiginupDeadline = Data.SiginupDeadline;
-          RefPage.PointsSet = Data.PointsSet;
-          RefPage.institutionName = Data.PointsSet.CompanyName;
-          RefPage.isShowHz = !!Data.IsShowHz;
-        });
-        this.addEditVideo = Data.VideoDetail
-          ? [Data.VideoDetail].map((item) => {
-              return { name: item.VideoName, PlaySeconds: item.VideoDuration, url: item.VideoUrl };
-            })
-          : [];
-        this.fileListAudio = Data.VoiceList
-          ? Data.VoiceList.map((item) => {
-              return { name: item.Name, PlaySeconds: item.PlaySeconds, url: item.Url };
-            })
-          : [];
-        if (Data.PublishStatus == 1) {
-          this.forbidden = Data.CustomerTypeIds ? Data.CustomerTypeIds.split(",") : [];
-          this.checkAllIs = this.forbidden.length >= 1;
-        }
-        if (this.astrict > 0 && this.showType == 2) {
-          this.radio = "2";
-        }
-        this.valTemporary = res.Data.TemporaryLabel;
-        this.radioTemporary = this.valTemporary ? true : false;
-        this.industryCascade = res.Data.ListIndustrial ? res.Data.ListIndustrial.map((item) => [item.ChartPermissionId, item.IndustrialManagementId]) : "";
-
-        this.markValue = res.Data.ListSubject ? res.Data.ListSubject.map((item) => item.IndustrialSubjectId) : "";
-        if (this.markValue) {
-          this.markSelectFocus();
-        }
-      });
-    },
-    //提交发布活保存前的校验
-    submitForm(type) {
-      if (this.checkedCities) {
-        this.checkedCitiesTwo = this.checkedCities.join(",");
-      }
-      if (!this.radioTemporary && !this.industryCascade.length) return this.$message.error("请选择产业!");
-      if (this.radioTemporary && !this.valTemporary) return this.$message.error("请输入临时标签！");
-      let arr = [];
-      if (this.industryCascade.length) {
-        arr = this.industryCascade.map((item) => {
-          return item[1];
-        });
-      }
-      if (this.showType == "3" || this.radio == "2") {
-        if (!this.astrict) return this.$message.error("请在输入框输入人数上限!");
-      }
-      if (!this.cactivityType || !this.optionFormregion) return this.$message.error("请选择行业或活动类型");
-      if (this.subjectRadio == 2) {
-        let labelArr = this.addSubjectLabel.map((item) => {
-          let labelArrList = [];
-          item.IndustrialManagementIdS.forEach((val) => {
-            labelArrList.push(val[1]);
-          });
-          return {
-            IndustrialManagementIdS: labelArrList.join(","),
-            IndustrialSubjectIdS: item.IndustrialSubjectIdS.join(","),
-            IsShowSubjectName: item.isMark ? 1 : 0,
-            TemporaryLabel: item.temporary ? item.temporaryText : "",
-            IsCanAppointmentMinutes: item.subscribe ? 1 : 0,
-          };
-        });
-        this.ListSubject = [
-          {
-            IndustrialManagementIdS: arr.length ? arr.join(",") : "",
-            IndustrialSubjectIdS: this.markValue.length ? this.markValue.join(",") : "",
-            IsShowSubjectName: this.isMark ? 1 : 0,
-            TemporaryLabel: this.radioTemporary ? this.valTemporary : "",
-            IsCanAppointmentMinutes: this.$refs.researchSelect.isCanAppointmentMinutes ? 1 : 0,
-          },
-          ...labelArr,
-        ];
-      } else {
-        this.ListSubject = [
-          {
-            IndustrialManagementIdS: arr.length ? arr.join(",") : "",
-            IndustrialSubjectIdS: this.markValue.length ? this.markValue.join(",") : "",
-            IsShowSubjectName: this.isMark ? 1 : 0,
-            TemporaryLabel: this.radioTemporary ? this.valTemporary : "",
-            IsCanAppointmentMinutes: this.$refs.researchSelect.isCanAppointmentMinutes ? 1 : 0,
-          },
-        ];
-      }
-      let VoiceList = this.fileListAudio.map((item) => {
-        return {
-          Name: item.name,
-          PlaySeconds: item.PlaySeconds.toString(),
-          Url: item.url,
-        };
-      });
-      let VideoDetail = this.addEditVideo.map((item) => {
-        return {
-          VideoName: item.name,
-          VideoDuration: item.PlaySeconds.toString(),
-          VideoUrl: item.url,
-        };
-      });
-      this.saveTheRelease(type, arr, VoiceList, VideoDetail[0]);
-    },
-    //保存或发布
-    saveTheRelease: _.debounce(async function (type, arr, VoiceList, VideoDetail) {
-      let RefPage = this.$refs.researchSelect;
-      let PointsSet = RefPage.PointsSet;
-      const res = await raiInterface.preserveAndPublishAdd({
-        DoType: type == "发布" ? 1 : 0,
-        ActivityId: Number(this.$route.query.id) || 0,
-        ActivityTypeId: Number(this.cactivityType),
-        Body: this.content,
-        PermissionName: this.optionFormregion,
-        CustomerTypeIds: this.checkedCitiesTwo,
-        IsAllCustomerType: this.checkAll ? 1 : 0,
-        LimitPeopleNum: Number(this.astrict) || 0,
-        IndustrialManagementIdS: arr.length ? arr.join(",") : "",
-        IndustrialSubjectIdS: this.markValue.length ? this.markValue.join(",") : "",
-        List: this.ListSubject,
-        Scale: this.checkScaleList.length ? this.checkScaleList.join(",") : "",
-        LabelType: Number(this.subjectRadio),
-        IsShowSubjectName: this.isMark ? 1 : 0,
-        IsMakerShow: this.decisionChecked ? 1 : 0,
-        VisibleRange: this.radioVisibleActivity,
-        VoiceList,
-        VideoDetail,
-        IsYidongConduct: RefPage.isYidongConduct ? 1 : 0,
-        IsExternalLabel: RefPage.isExternalLabel ? 1 : 0,
-        IsCanOutboundCall: RefPage.isCanOutboundCall ? 1 : 0,
-        IsResearchPoints: RefPage.isDeduct ? 1 : 0,
-        IsNeedEmail: RefPage.provideEmail ? 1 : 0,
-        IsBClass: RefPage.isBClass ? 1 : 0,
-        SiginupDeadline: RefPage.SiginupDeadline,
-        PointsSet,
-        BackgroundImg: this.defaultImage,
-        ShareImg: this.shareImg,
-        IsResearch: this.optionFormregion.includes("研选") ? true : false,
-        IsShowHz: RefPage.isShowHz ? 1 : 0,
-        AreaType: this.areaType,
-      });
-
-      if (res.Ret !== 200) return;
-      this.$message.success("操作成功！");
-      this.$router.back();
-    }, 500),
-    //获取行业
-    chartPermission() {
-      raiInterface.chartPermissionList({ IsHideResearch: !this.isResearch }).then((res) => {
-        if (res.Ret === 200) {
-          this.chartPermissionList = res.Data.List;
-        }
-      });
-    },
-    //获取活动类型
-    getActivityType() {
-      raiInterface.getActivityType({ IsResearch: this.isResearch }).then((res) => {
-        if (res.Ret === 200) {
-          this.isShowAddIcon = res.Data.IsShowAddIcon;
-          this.cactivityTypeList = res.Data.List;
-        }
-      });
-    },
-    //获取活动类型详情
-    activityTypeDetail(e) {
-      this.radio = "1"; //单选按钮
-      this.astrict = ""; //人数限制
-      this.contentTemplateTitle = "1";
-      this.subjectRadio = "1";
-      this.checkedCities = [];
-      this.$refs.researchSelect.isBClass = false;
-      this.radioVisibleActivity = this.cactivityType == 7 ? 1 : 2;
-      if (!this.cactivityType) return;
-      raiInterface
-        .activityTypeDetail({
-          ActivityTypeId: this.cactivityType - 0,
-        })
-        .then((res) => {
-          if (res.Ret === 200) {
-            this.copyTxt = res.Data.Template;
-            this.templatePText = res.Data.TemplateP;
-            this.zoomTemplate = res.Data.ZoomTemplate;
-            this.ZoomTemplateP = res.Data.ZoomTemplateP;
-            this.showType = res.Data.ShowType;
-            this.activityTypeName = res.Data.ActivityTypeName;
-          }
-        });
-    },
-    // 操作：点击了复制按钮
-    handleCopyFun() {
-      let clipboard = new Clipboard("#copy_text");
-      clipboard.on("success", (e) => {
-        this.$message({
-          type: "success",
-          message: "复制成功!",
-        });
-        this.dialogVisible = false;
-        clipboard.destroy(); // 释放内存
-      });
-      clipboard.on("error", (e) => {
-        // 不支持复制
-        this.$Message.info("该浏览器不支持自动复制");
-        clipboard.destroy(); // 释放内存
-      });
-    },
-    //点击了复制模版
-    templateBtn() {
-      if (!this.cactivityType) return this.$message.error("请选择活动类型");
-      this.dialogVisible = true;
-    },
-    //获取多选的客户列表
-    customerTypelist() {
-      raiInterface.customerTypelist().then((res) => {
-        if (res.Ret === 200) {
-          this.cities = res.Data.List;
-        }
-      });
-    },
-    // 子组件来的事件 产业
-    commitIndustryDlg(data, type = "") {
-      this.getIndustry();
-      this.industryCascade.push([Number(data.ChartPermissionId), Number(data.NewId)]);
-    },
-    // 子组件来的事件 标的
-    commitMarkDlg(data) {
-      let arr = this.industryCascade.flat(Infinity);
-      raiInterface
-        .getindustrialSubjectlistIds({
-          IndustrialManagementIdStr: arr[1],
-        })
-        .then((res) => {
-          if (res.Ret === 200) {
-            this.markOptions = res.Data.List || [];
-          }
-        });
-      this.markValue = data.split(",").map((item) => Number(item));
-    },
-    /* 获取全部的行业 */
-    getIndustry() {
-      raiInterface.getListIndustrial().then((res) => {
-        if (res.Ret === 200) {
-          this.industryArr = res.Data.List || [];
-        }
-      });
-    },
-    //top 行业清除的事件
-    clearTopIndustry() {
-      this.industryCascade = [];
-      this.radioTemporary = false;
-      this.valTemporary = "";
-      this.markValue = "";
-      this.radioVisibleActivity = 2;
-    },
-    //添加标的的点击事件
-    isAddMarketDlg() {
-      let arr = this.industryCascade.flat(Infinity);
-      this.industryArr.forEach((item) => {
-        if (item.ChartPermissionId == arr[0]) {
-          this.addMarkUpVal.industrialId = arr[1];
-          item.List.forEach((key) => {
-            if (key.ChartPermissionId == arr[1]) {
-              this.addMarkUpVal.industrialName = key.PermissionName;
-            }
-          });
-        }
-      });
-      if (this.industryCascade.length == 1) {
-        this.addMarkDlg = true;
-      } else if (this.industryCascade.length > 1) {
-        this.$message.error("已选多个产业，无法添加标的");
-      } else {
-        this.$message.error("请先选择产业");
-      }
-    },
-    //点击添加标的的下拉选择框
-    markSelectFocus() {
-      if (!this.industryCascade.length) {
-        this.$message.error("请先选择产业");
-      } else {
-        let arr = [];
-        arr = this.industryCascade.map((item) => {
-          return item[1];
-        });
-        raiInterface
-          .getindustrialSubjectlistIds({
-            IndustrialManagementIdStr: arr.join(","),
-          })
-          .then((res) => {
-            if (res.Ret === 200) {
-              this.markOptions = res.Data.List || [];
-            }
-          });
-      }
-    },
-    handleCheckAllChange(val) {
-      if (val) {
-        let newCodeList = this.cities.map((item) => item.CustomerTypeId);
-        this.checkedCities = newCodeList;
-      } else {
-        this.checkedCities = [];
-      }
-      this.checkedCitiesTwo = this.checkedCities.join(",");
-      this.isIndeterminate = false;
-    },
-    handleCheckedCitiesChange(value) {
-      let checkedCount = value.length;
-      this.checkAll = checkedCount === this.cities.length;
-      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
-    },
-    cancelBtn() {
-      this.$router.back();
-    },
-    contentTemplate(type) {
-      this.contentTemplateTitle = type;
-    },
-    handleCloseSubject() {
-      this.nameSubjectOptions = [];
-      this.addSubjectName = "";
-      this.addSubjectOptions = [];
-      this.dialogVisibleSubject = false;
-    },
-    async remoteMethod(query) {
-      if (query !== "") {
-        const res = await raiInterface.industrialSubjectSearch({
-          KeyWord: query,
-        });
-        if (res.Ret === 200) {
-          this.addSubjectOptions = res.Data.List || [];
-        }
-      }
-    },
-    async searchInfo(val) {
-      if (val !== "") {
-        const res = await raiInterface.industrialSubjectSearchInfo({
-          KeyWord: val,
-        });
-        if (res.Ret === 200) {
-          this.isShowSubject = res.Data.List ? false : true;
-          let arrList = [];
-          arrList = res.Data.List
-            ? res.Data.List.map((item) => {
-                let arr = [];
-                item.List.forEach((key) => {
-                  arr.push(key.Name);
-                });
-                return {
-                  ...item,
-                  value: arr.join(","),
-                };
-              })
-            : [];
-          this.nameSubjectOptions = arrList;
-        }
-      } else {
-        this.nameSubjectOptions = [];
-      }
-    },
-    //套餐类型的 提升文本
-    checkboxTooltip(val) {
-      let str = "";
-      switch (val) {
-        case "全选":
-          str = "所有客户均可看到该活动（冻结、流失客户也可看到，但会提示无权限参会）";
-          break;
-        case "活动可见":
-          str = "套餐类型和管理规模两项下，均有勾选时，只要满足其中之一的条件，客户就可见此活动。例如：勾选了大套餐客户和100亿以上，则大套餐客户和100亿以上规模的客户都可以看到此活动";
-          break;
-      }
-      return str;
-    },
-    //删除上传
-    handleRemoveAudio(file, fileList) {
-      this.fileListAudio = [];
-    },
-    //删除上传前得确认
-    beforeRemoveAudio(file, fileList) {
-      return this.$confirm(`确定移除 ${file.name}？`);
-    },
-    //删除视频的上传
-    handleRemoveVideo(file, fileList) {
-      this.addEditVideo = [];
-    },
-    //获取视频时长的promise
-    handleGetDuration(file) {
-      return new Promise((resolve, reject) => {
-        const fileUrl = URL.createObjectURL(file);
-        const audioEl = new Audio(fileUrl);
-        audioEl.addEventListener("loadedmetadata", (e) => {
-          resolve(audioEl.duration);
-        });
-      });
-    },
-
-    //上传视频判断格式
-    handelBeforeUploadVideo(e) {
-      if (e.type != "video/mp4") {
-        this.$message.warning("上传失败，上传视频格式不正确");
-        return false;
-      }
-    },
-
-    // 上传视频
-    async handleUpload(e) {
-      const duration = await this.handleGetDuration(e.file);
-      this.addEditVideo.push({
-        name: e.file.name,
-        PlaySeconds: duration + "",
-        url: "",
-      });
-      const res = await getOSSSign();
-
-      if (res.Ret === 200) {
-        let accessKeyId = res.Data.AccessKeyId;
-        let accessKeySecret = res.Data.AccessKeySecret;
-        let stsToken = res.Data.SecurityToken;
-        this.handleUploadToOSS(e.file, accessKeyId, accessKeySecret, stsToken);
-      }
-    },
-    //上传到阿里云
-    async handleUploadToOSS(file, accessKeyId, accessKeySecret, stsToken) {
-      this.startUpload = true;
-      const ALOSSINS = new OSS({
-        // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
-        region: "oss-cn-shanghai",
-        // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
-        accessKeyId: accessKeyId,
-        accessKeySecret: accessKeySecret,
-        // 从STS服务获取的安全令牌（SecurityToken）。
-        stsToken: stsToken,
-        // 填写Bucket名称，例如examplebucket。
-        bucket: "hzchart",
-        endpoint: "hzstatic.hzinsights.com",
-        cname: true,
-        timeout: 600000,
-      });
-      // 生成文件名
-      const t = new Date().getTime().toString();
-      const temName = `static/yb/video/${MD5(t)}.${file.name.split(".")[1]}`;
-      console.log(temName);
-
-      const options = {
-        // 获取分片上传进度、断点和返回值。
-        progress: (p, cpt, res) => {
-          console.log(p);
-          this.percentage = parseInt(p * 100);
-        },
-        // 设置并发上传的分片数量。
-        parallel: 10,
-        // 设置分片大小。默认值为1 MB，最小值为100 KB。
-        partSize: 1024 * 1024 * 10, // 10MB
-      };
-      try {
-        const res = await ALOSSINS.multipartUpload(temName, file, { ...options });
-        console.log("上传结果", res);
-        if (res.res.status === 200) {
-          this.getVideoAndImg(2);
-          let VideoUrl = "https://hzstatic.hzinsights.com/" + res.name;
-          this.addEditVideo[0].url = VideoUrl;
-          this.startUpload = false;
-          this.percentage = 0;
-        }
-      } catch (error) {
-        this.$message.warning("上传失败，请刷新重试");
-        this.startUpload = false;
-        this.percentage = 0;
-      }
-    },
-    errorUpload() {
-      this.$message.error("音频文件和视频文件，仅支•持•上•传一个");
-    },
-    // 公司线下调研 调研电话会 的选择
-    isCheckAllType(newval) {
-      if (newval) {
-        let newCodeList = [];
-        this.cities.forEach((item) => {
-          if (![5, 6, 7].includes(item.CustomerTypeId)) {
-            newCodeList.push(item.CustomerTypeId);
-          }
-        });
-        this.checkedCities = newCodeList;
-        this.checkedCitiesTwo = this.checkedCities.join(",");
-        this.isIndeterminate = true;
-        this.checkAll = false;
-      } else {
-        this.checkedCities = [];
-        this.checkedCitiesTwo = "";
-        this.checkAll = false;
-      }
-    },
-    // 点击修改图片的弹框
-    modifyImgHandler() {
-      let type = this.addEditVideo.length > 0 ? 2 : 1;
-      this.getVideoAndImg(type, "修改");
-      this.modifyImgVisible = true;
-    },
-    // video_and_voiceImgActivityVideo（）
-    async getVideoAndImg(type, isOne = "") {
-      const res = await raiInterface.video_and_voiceImgActivityVideo({
-        FileType: type,
-        ActivityId: Number(this.$route.query.id),
-      });
-      if (res.Ret === 200) {
-        isOne == "修改" ? "" : (this.defaultImage = res.Data.List[0].ImgUrl);
-        this.videoAndVoiceList = res.Data.List;
-      }
-    },
-  },
-};
-</script>
 <style lang="scss">
 .container-addAct {
   .content-template {

src/views/rai_manage/activityManage/components/addComopnents/ResearchDeduct.vue

@@ -1,3 +1,159 @@
+<script setup>
+import { ref, reactive, watch, onMounted, toRefs } from "vue";
+import { raiInterface } from "@/api/api.js";
+import { DeductUser, DeductForm } from "./addOfEditData";
+import { useRouter, useRoute } from "vue-router";
+
+const $route = useRoute();
+const $router = useRouter();
+
+const props = defineProps({
+  cactivityType: {
+    required: true,
+    default: "",
+  },
+  optionFormregion: {
+    required: true,
+    type: String,
+    default: "",
+  },
+  isResearch: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const pageState = reactive({
+  isCanAppointmentMinutes: false, // 可预约纪要
+  isYidongConduct: false, // 易懂办会
+  isCanOutboundCall: false, // 可提供外呼
+  isExternalLabel: false, //外部资源
+  institutionName: "", //机构名称
+  isDeduct: false, // 研选扣点
+  isBClass: false, // B类非公开
+  provideEmail: "", //提供邮箱
+  SiginupDeadline: "", //
+  nameCompany: [],
+  dataPointsSet: [],
+  PointsSet: {
+    PointsObject: "", //扣点对象
+    CompanyId: 0, //公司ID
+    CompanyName: "", //公司名称
+    UserPointsNum: "", //参会人扣点数量
+    PointsType: "", //扣点形式，1:报名即扣点，2:到会即扣点
+    CompanyPointsNum: "", //办会人扣点数量
+    CancelDeadlineType: "", //截至报名时间
+  },
+  dataDeadlineSet: [],
+  isShowHz: false,
+});
+
+const deductUser = computed(() => {
+  return DeductUser;
+});
+
+const pointsTypeList = computed(() => {
+  return DeductForm;
+});
+
+watch(
+  () => props.cactivityType,
+  () => {
+    if ($route.query.id) return;
+    if (newval == 1) {
+      pageState.isCanAppointmentMinutes = true;
+    } else {
+      pageState.isCanAppointmentMinutes = false;
+    }
+  }
+);
+
+function updateSonDate(item) {
+  pageState.defaultImage = item.ImgUrl;
+  pageState.shareImg = item.ShareImg;
+}
+// 获取扣点点数的
+async function getActivityPointsSet() {
+  const res = await raiInterface.activityPointsSet();
+  if (res.Ret === 200) {
+    pageState.dataPointsSet = res.Data.List;
+  }
+}
+// 获取截取时间的
+async function getActivityDeadlineSet() {
+  const res = await raiInterface.activityDeadlineSet();
+  if (res.Ret === 200) {
+    pageState.dataDeadlineSet = res.Data;
+  }
+}
+// 远程搜索公司
+async function querySearchAsync(query, cb) {
+  cb([]);
+  if (query) {
+    const res = await raiInterface.activityCompanySearch({
+      KeyWord: query,
+    });
+    if (res.Ret === 200) {
+      let arr = res.Data.List.map((_) => {
+        return {
+          ..._,
+          value: `${_.CompanyName}  --  ${_.RealName}`,
+        };
+      });
+      pageState.nameCompany = arr;
+      cb(arr);
+    }
+  } else {
+    cb([]);
+  }
+}
+// 选择后的事件
+function companyChangeHandler() {
+  let itemData = pageState.nameCompany.find((item) => pageState.institutionName === item.value);
+  pageState.PointsSet.CompanyId = itemData.CompanyId;
+  pageState.PointsSet.CompanyName = itemData.value;
+}
+// 点击清楚
+function companyClearHandler() {
+  pageState.PointsSet.CompanyId = 0;
+  pageState.PointsSet.CompanyName = "";
+}
+// 数据的初始
+function ObjectChangeHandler() {
+  pageState.PointsSet.CompanyId = 0; //公司ID
+  pageState.PointsSet.CompanyName = ""; //公司名称
+  pageState.PointsSet.UserPointsNum = ""; //参会人扣点数量
+  pageState.PointsSet.PointsType = ""; //扣点形式，1=报名即扣点，2=到会即扣点
+  pageState.PointsSet.CompanyPointsNum = ""; //办会人扣点数量
+  pageState.PointsSet.CancelDeadlineType = ""; //办会人扣点数量
+  pageState.institutionName = ""; //
+}
+
+onMounted(() => {
+  let time = new Date().toISOString().substr(0, 10);
+  pageState.SiginupDeadline = time + " 15:30:00";
+  getActivityPointsSet();
+  getActivityDeadlineSet();
+});
+
+const {
+  isCanAppointmentMinutes, // 可预约纪要
+  isYidongConduct, // 易懂办会
+  isCanOutboundCall, // 可提供外呼
+  isExternalLabel, //外部资源
+  institutionName, //机构名称
+  isDeduct, // 研选扣点
+  isBClass, // B类非公开
+  provideEmail, //提供邮箱
+  SiginupDeadline, //
+  nameCompany,
+  dataPointsSet,
+  PointsSet,
+  dataDeadlineSet,
+  isShowHz,
+} = toRefs(pageState);
+</script>
+
 <template>
   <div style="margin-top: 20px" class="add-activity-deduct-page">
     <el-checkbox v-model="isCanAppointmentMinutes">
@@ -6,9 +162,9 @@
         <i class="el-icon-info" />
       </el-tooltip>
     </el-checkbox>
-    <el-checkbox v-if="isResearch && [1, 3, 5, 8].includes(cactivityType)" v-model="isShowHz"> 同时在弘则活动页展示 </el-checkbox>
-    <el-checkbox v-if="cactivityType == 3" v-model="isExternalLabel"> 外部资源 </el-checkbox>
-    <template v-if="cactivityType == 7 || cactivityType == 2">
+    <el-checkbox v-if="props.isResearch && [1, 3, 5, 8].includes(props.cactivityType)" v-model="isShowHz"> 同时在弘则活动页展示 </el-checkbox>
+    <el-checkbox v-if="props.cactivityType == 3" v-model="isExternalLabel"> 外部资源 </el-checkbox>
+    <template v-if="props.cactivityType == 7 || props.cactivityType == 2">
       <el-checkbox v-model="isYidongConduct">
         易董办会
         <el-tooltip placement="top-start" content="在易董举办的活动，请勾选此选项">
@@ -21,9 +177,9 @@
           <i class="el-icon-info" />
         </el-tooltip>
       </el-checkbox>
-      <el-checkbox v-if="isYidongConduct && cactivityType == 2" v-model="isBClass"> B类非公开会议 </el-checkbox>
+      <el-checkbox v-if="isYidongConduct && props.cactivityType == 2" v-model="isBClass"> B类非公开会议 </el-checkbox>
     </template>
-    <template v-if="optionFormregion.includes('研选')">
+    <template v-if="props.optionFormregion.includes('研选')">
       <el-checkbox v-model="isDeduct" style="margin-right: 20px"> 研选扣点 </el-checkbox>
       <el-select clearable @change="ObjectChangeHandler" v-model="PointsSet.PointsObject" placeholder="请选择扣点对象" v-if="isDeduct" style="width: 160px">
         <el-option v-for="item in deductUser" :key="item.value" :label="item.label" :value="item.value"> </el-option>
@@ -70,141 +226,6 @@
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-import { DeductUser, DeductForm } from "./addOfEditData";
-export default {
-  name: "",
-  components: {},
-  props: {
-    cactivityType: {
-      required: true,
-      default: "",
-    },
-    optionFormregion: {
-      required: true,
-      type: String,
-      default: "",
-    },
-    isResearch: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      isCanAppointmentMinutes: false, // 可预约纪要
-      isYidongConduct: false, // 易懂办会
-      isCanOutboundCall: false, // 可提供外呼
-      isExternalLabel: false, //外部资源
-      institutionName: "", //机构名称
-      isDeduct: false, // 研选扣点
-      isBClass: false, // B类非公开
-      provideEmail: "", //提供邮箱
-      SiginupDeadline: "", //
-      nameCompany: [],
-      dataPointsSet: [],
-      PointsSet: {
-        PointsObject: "", //扣点对象
-        CompanyId: 0, //公司ID
-        CompanyName: "", //公司名称
-        UserPointsNum: "", //参会人扣点数量
-        PointsType: "", //扣点形式，1:报名即扣点，2:到会即扣点
-        CompanyPointsNum: "", //办会人扣点数量
-        CancelDeadlineType: "", //截至报名时间
-      },
-      dataDeadlineSet: [],
-      isShowHz: false,
-    };
-  },
-  computed: {
-    deductUser() {
-      return DeductUser;
-    },
-    pointsTypeList() {
-      return DeductForm;
-    },
-  },
-  watch: {
-    cactivityType: {
-      handler(newval) {
-        if (this.$route.query.id) return;
-        if (newval == 1) {
-          this.isCanAppointmentMinutes = true;
-        } else {
-          this.isCanAppointmentMinutes = false;
-        }
-      },
-    },
-  },
-  created() {
-    let time = new Date().toISOString().substr(0, 10);
-    this.SiginupDeadline = time + " 15:30:00";
-  },
-  mounted() {
-    this.getActivityPointsSet();
-    this.getActivityDeadlineSet();
-  },
-  methods: {
-    // 获取扣点点数的
-    async getActivityPointsSet() {
-      const res = await raiInterface.activityPointsSet();
-      if (res.Ret === 200) {
-        this.dataPointsSet = res.Data.List;
-      }
-    },
-    // 获取截取时间的
-    async getActivityDeadlineSet() {
-      const res = await raiInterface.activityDeadlineSet();
-      if (res.Ret === 200) {
-        this.dataDeadlineSet = res.Data;
-      }
-    },
-    // 远程搜索公司
-    async querySearchAsync(query, cb) {
-      cb([]);
-      if (query) {
-        const res = await raiInterface.activityCompanySearch({
-          KeyWord: query,
-        });
-        if (res.Ret === 200) {
-          let arr = res.Data.List.map((_) => {
-            return {
-              ..._,
-              value: `${_.CompanyName}  --  ${_.RealName}`,
-            };
-          });
-          this.nameCompany = arr;
-          cb(arr);
-        }
-      } else {
-        cb([]);
-      }
-    },
-    // 选择后的事件
-    companyChangeHandler() {
-      let itemData = this.nameCompany.find((item) => this.institutionName === item.value);
-      this.PointsSet.CompanyId = itemData.CompanyId;
-      this.PointsSet.CompanyName = itemData.value;
-    },
-    // 点击清楚
-    companyClearHandler() {
-      this.PointsSet.CompanyId = 0;
-      this.PointsSet.CompanyName = "";
-    },
-    // 数据的初始
-    ObjectChangeHandler() {
-      this.PointsSet.CompanyId = 0; //公司ID
-      this.PointsSet.CompanyName = ""; //公司名称
-      this.PointsSet.UserPointsNum = ""; //参会人扣点数量
-      this.PointsSet.PointsType = ""; //扣点形式，1=报名即扣点，2=到会即扣点
-      this.PointsSet.CompanyPointsNum = ""; //办会人扣点数量
-      this.PointsSet.CancelDeadlineType = ""; //办会人扣点数量
-      this.institutionName = ""; //
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .add-activity-deduct-page {
   .el-select,

src/views/rai_manage/activityManage/components/addComopnents/modifyImgDlg.vue

@@ -1,65 +1,51 @@
+<script setup>
+import { ref } from "vue";
+
+import { raiInterface } from "@/api/api.js";
+
+const props = defineProps({
+  modifyImgVisible: {
+    type: Boolean,
+    default: false,
+  },
+  videoAndVoiceList: {
+    type: Array,
+    default: [],
+  },
+});
+
+const page_no = ref(1);
+
+// 选择图片的分页
+function handleCurrentChangeSelectImg(page) {
+  page_no.value = page;
+  getSelectImgList();
+}
+
+const $emit = defineEmits(["updateSonDate"]);
+function cancelHandle() {
+  $emit("update:modifyImgVisible", false);
+}
+
+function clickSelectImg(item) {
+  $emit("updateSonDate", item);
+  cancelHandle();
+}
+</script>
+
 <template>
   <div class="container">
     <!-- 选择图片的弹框 -->
-    <el-dialog title="选择图片" :visible.sync="modifyImgVisible" width="80%" v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center @close="cancelHandle">
+    <el-dialog title="选择图片" v-model="props.modifyImgVisible" width="80%" draggable :close-on-click-modal="false" :modal-append-to-body="false" center @close="cancelHandle">
       <div class="seleect-img-box">
-        <div class="content-img" @click="clickSelectImg(item)" v-for="(item, index) in videoAndVoiceList" :key="index">
+        <div class="content-img" @click="clickSelectImg(item)" v-for="(item, index) in props.videoAndVoiceList" :key="index">
           <img :src="item.ImgUrl" alt="" class="item-img" />
         </div>
       </div>
-      <!-- <el-col :span="24" class="toolbar">
-        <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChangeSelectImg" />
-      </el-col> -->
     </el-dialog>
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-
-export default {
-  name: "",
-  components: {},
-  props: {
-    modifyImgVisible: {
-      type: Boolean,
-      default: false,
-    },
-    videoAndVoiceList: {
-      type: Array,
-      default: [],
-    },
-  },
-  data() {
-    return {
-      imgListArr: [],
-      total: 0,
-      page_no: 1,
-    };
-  },
-  computed: {},
-  watch: {},
-  created() {},
-  mounted() {
-    // this.getSelectImgListAll();
-  },
-  methods: {
-    // 选择图片的分页
-    handleCurrentChangeSelectImg(page) {
-      this.page_no = page;
-      this.getSelectImgList();
-    },
-    cancelHandle() {
-      this.$emit("update:modifyImgVisible", false);
-    },
-    clickSelectImg(item) {
-      this.$parent.defaultImage = item.ImgUrl;
-      this.$parent.shareImg = item.ShareImg;
-      this.cancelHandle();
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .seleect-img-box {
   display: flex;

src/views/rai_manage/activityManage/components/appointment.vue

@@ -1,13 +1,105 @@
+<script setup>
+import { ref, onMounted, nextTick, computed, watch } from "vue";
+
+import mPage from "@/components/mPage.vue";
+import { raiInterface } from "@/api/api.js";
+import { ElMessage } from "element-plus";
+
+import { Search } from "@element-plus/icons-vue";
+
+const page_no = ref(sessionStorage.getItem("interviewListBack") ? JSON.parse(sessionStorage.getItem("interviewListBack")).page_no : 1);
+const total = ref(0); //条数
+const PageSize = ref(10); //每页显示几条
+const dataList = ref([]); //表格的列表
+const keyWord = ref("");
+const sellerName = ref("");
+const sellerList = ref([]);
+const dialogVisiblepartica = ref(false);
+const detailList = ref(null);
+
+const roleIdentity = computed(() => {
+  return localStorage.getItem("RoleIdentity");
+});
+
+function sellerNameChange() {
+  page_no.value = 1;
+  getsDataList();
+}
+//列表表格
+function getsDataList() {
+  raiInterface
+    .breakAppointmentList({
+      CurrentIndex: page_no.value,
+      PageSize: PageSize.value,
+      KeyWord: keyWord.value,
+      SellerName: sellerName.value,
+    })
+    .then((res) => {
+      if (res.Ret !== 200) return;
+      dataList.value = res.Data.List;
+      total.value = res.Data.Paging.Totals;
+    });
+}
+//分页
+function handleCurrentChange(page) {
+  page_no.value = page;
+  getsDataList();
+}
+function detail(id) {
+  raiInterface.breakAppointmentDetail({ UserId: id }).then((res) => {
+    if (res.Ret !== 200) return;
+    dialogVisiblepartica.value = true;
+    nextTick(() => {
+      detailList.value = res.Data.List;
+    });
+  });
+}
+function confirmPerson() {
+  dialogVisiblepartica.value = false;
+}
+function sellerNameListList() {
+  raiInterface.sellerNameListList().then((res) => {
+    if (res.Ret === 200) {
+      sellerList.value = res.Data.List;
+    }
+  });
+}
+function switchChange(id) {
+  raiInterface
+    .signUpRestrictUid({
+      UserId: id,
+    })
+    .then((res) => {
+      if (res.Ret === 200) {
+        ElMessage.success("操作成功");
+      } else {
+        getsDataList();
+      }
+    });
+}
+
+watch(
+  () => keyWord.value,
+  () => {
+    page_no.value = 1;
+    getsDataList();
+  }
+);
+
+onMounted(() => {
+  getsDataList();
+  sellerNameListList();
+});
+</script>
+
 <template>
- <div class="container-appointment">
-     <!-- 头部el-card -->
-    <el-card style="margin-bottom: 20px;">
+  <div class="container-appointment">
+    <!-- 头部el-card -->
+    <el-card style="margin-bottom: 20px">
       <div class="top-card-box">
         <div></div>
-       <div>  
-           <el-input style="width:521px" v-model="keyWord" placeholder="请输入手机号/公司名称" clearable>
-            <i slot="prefix" class="el-input__icon el-icon-search"></i>
-          </el-input>
+        <div>
+          <el-input style="width: 521px" v-model="keyWord" placeholder="请输入手机号/公司名称" clearable :prefix-icon="Search"> </el-input>
         </div>
       </div>
     </el-card>
@@ -15,183 +107,71 @@
     <el-card>
       <div>
         <el-select v-model="sellerName" @change="sellerNameChange" placeholder="所属销售" clearable>
-             <el-option v-for="item in sellerList" :key="item.SellerName" :label="item.SellerName" :value="item.SellerName"></el-option>
-          </el-select>
-          </div>
-        <!-- 表格部分 -->
-     <el-table :data="dataList"  style="width: 100%; margin-top: 20px;" border="">
+          <el-option v-for="item in sellerList" :key="item.SellerName" :label="item.SellerName" :value="item.SellerName"></el-option>
+        </el-select>
+      </div>
+      <!-- 表格部分 -->
+      <el-table :data="dataList" style="width: 100%; margin-top: 20px" border="">
         <el-table-column prop="RealName" align="center" label="姓名"></el-table-column>
         <el-table-column prop="Mobile" align="center" label="手机号"></el-table-column>
         <el-table-column prop="CompanyName" align="center" label="公司名称"></el-table-column>
         <el-table-column prop="SellerName" align="center" label="所属销售"></el-table-column>
         <el-table-column prop="BreakAppointmentNum" align="center" label="爽约次数"></el-table-column>
         <el-table-column prop="" align="center" label="操作">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span class="editsty" @click="detail(scope.row.UserId)">查看详情</span>
           </template>
         </el-table-column>
         <el-table-column width="170" prop="" align="center" label="报名限制">
-          <template slot-scope="scope">
-            <el-switch
-            :disabled="roleIdentity==='rai_seller'"
-             @change="switchChange(scope.row.UserId)"
-              v-model="scope.row.Operation"
-             active-text="已限制"
-            inactive-text="不限制">
-            </el-switch>
+          <template #default="scope">
+            <el-switch :disabled="roleIdentity === 'rai_seller'" @change="switchChange(scope.row.UserId)" v-model="scope.row.Operation" active-text="已限制" inactive-text="不限制"> </el-switch>
           </template>
         </el-table-column>
-     </el-table>
+      </el-table>
       <el-col :span="24" class="toolbar">
-				<m-page 
-				:total="total"
-				:page_no="page_no"
-        :pageSize="10"
-				@handleCurrentChange="handleCurrentChange"/>
-			</el-col>
+        <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
+      </el-col>
     </el-card>
-     <el-dialog
-    
-      v-dialogDrag 
-      :close-on-click-modal="false"
-      :modal-append-to-body="false"
-      center
-      :visible.sync="dialogVisiblepartica"
-      customClass="custom-appoinetdialog"
-      :before-close="confirmPerson"
-    >
-    <div slot="title" style="display: flex; align-items: center">
-        <img
-          :src="$icons.warntop"
-          style="color: #fff; width: 16px; height: 16px; margin-right: 5px"
-        />
-        <span style="font-size: 16px">爽约详情</span>
-      </div>
+    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center v-model="dialogVisiblepartica" customClass="custom-appoinetdialog" :before-close="confirmPerson">
+      <template #header>
+        <div style="display: flex; align-items: center">
+          <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
+          <span style="font-size: 16px">爽约详情</span>
+        </div>
+      </template>
       <div>
-        <el-table  max-height="260px" :data="detailList" border style="width: 100%; margin-top: 10px;">
-        <el-table-column width="250" prop="ActivityName" align="center" label="活动名称"></el-table-column>
-        <el-table-column prop="ChartPermissionName" align="center" label="行业"></el-table-column>
-        <el-table-column prop="ActivityTypeName" align="center" label="活动类型"></el-table-column>
-        <el-table-column width="230" prop="ActivityTimeText" align="center" label="活动时间"></el-table-column>
+        <el-table max-height="260px" :data="detailList" border style="width: 100%; margin-top: 10px">
+          <el-table-column width="250" prop="ActivityName" align="center" label="活动名称"></el-table-column>
+          <el-table-column prop="ChartPermissionName" align="center" label="行业"></el-table-column>
+          <el-table-column prop="ActivityTypeName" align="center" label="活动类型"></el-table-column>
+          <el-table-column width="230" prop="ActivityTimeText" align="center" label="活动时间"></el-table-column>
         </el-table>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="confirmPerson">知道了</el-button>
-      </span>
-     </el-dialog>
- </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="confirmPerson">知道了</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
-<script>
-import mPage from '@/components/mPage.vue'
-import {raiInterface} from '@/api/api.js'
-export default {
-  name: '',
-  components: {mPage},
-  props: {},
-  data () {
-    return {
-        page_no:sessionStorage.getItem('interviewListBack')?JSON.parse(sessionStorage.getItem('interviewListBack')).page_no:1,
-        total:0,//条数
-        PageSize:10,//每页显示几条
-        dataList: [],//表格的列表
-        keyWord:'',
-        sellerName:'',
-        sellerList:[],
-        dialogVisiblepartica:false,
-        detailList:null
-    }
-  },
-  computed: {
-    roleIdentity(){
-      
-      return localStorage.getItem('RoleIdentity')
-    }
-  },
-  watch: {
-    keyWord(){
-      this.page_no=1
-      this.getsDataList()
-    }
-  },
-  created () {},
-  mounted () {
-    this.getsDataList()
-    this.sellerNameListList()
-  },
-  methods: {
-    sellerNameChange(){
-      this.page_no=1
-      this.getsDataList()
-    },
-      //列表表格
-    getsDataList(){
-      raiInterface.breakAppointmentList({
-        CurrentIndex:this.page_no,
-        PageSize:this.PageSize,
-        KeyWord:this.keyWord,
-        SellerName:this.sellerName
-      }).then((res) => {
-        if(res.Ret !== 200) return
-        this.dataList=res.Data.List
-        this.total= res.Data.Paging.Totals
-      })
-    },
-      //分页
-    handleCurrentChange(page){
-     	this.page_no = page
-      this.getsDataList()
-    },
-    detail(id){
-        raiInterface.breakAppointmentDetail({ UserId:id}).then((res)=>{
-         if(res.Ret !== 200) return
-          this.dialogVisiblepartica=true
-          this.$nextTick(()=>{
-            this.detailList=res.Data.List
-          })
-        })
-    },
-    confirmPerson(){
-       this.dialogVisiblepartica=false
-    },
-    sellerNameListList(){
-      raiInterface.sellerNameListList().then((res)=>{
-        if(res.Ret===200){
-          this.sellerList=res.Data.List
-        }
-      })
-    },
-    switchChange(id){
-       raiInterface.signUpRestrictUid({
-        UserId:id,
-     }).then((res) =>{
-       if(res.Ret === 200){
-          this.$message.success('操作成功')
-       }else{
-          this.getsDataList()
-       }
-       
-     })   
-    }
-  }
-}
-</script>
-<style  lang="scss">
-.container-appointment{
+<style lang="scss">
+.container-appointment {
   .custom-appoinetdialog {
     width: 800px;
   }
-    .top-card-box {
-        display: flex;
-        justify-content: space-between;
-    }
-    .el-switch__label  {
-    color: #606266 ;
-   font-size: 14px;
-   font-weight:400;
+  .top-card-box {
+    display: flex;
+    justify-content: space-between;
+  }
+  .el-switch__label {
+    color: #606266;
+    font-size: 14px;
+    font-weight: 400;
   }
-   .is-active {
-    color: #409EFF !important;
+  .is-active {
+    color: #409eff !important;
   }
 }
 </style>

src/views/rai_manage/activityManage/components/attendMeeting.vue

@@ -1,3 +1,96 @@
+<script setup>
+import { ref, onMounted, nextTick, computed,onUnmounted } from "vue";
+
+import { raiInterface } from "@/api/api.js";
+import { ElMessage } from "element-plus";
+
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+const $route = useRoute();
+const $router = useRouter();
+
+const makeList = ref([]);
+const notMakeList = ref([]);
+const potentialList = ref([]);
+const examineOrAddDlg = ref(false); //弹窗
+const examineOrAddShow = ref(false); //区分弹窗显示
+const addRemarText = ref(""); //备注输入框
+const lableRemarkList = ref([]); //备注数据
+const addRemarksFrom = ref({}); //item 的数据
+const remainTime = ref(0);
+const remainTiming = ref(null); //
+const articleId = ref(null); //
+
+onMounted(() => {
+  remainTiming.value = setInterval(() => {
+    remainTime.value++;
+  }, 1000);
+  articleId.value = +$route.query.id;
+  attendanceDetail();
+});
+
+    async function attendanceDetail() {
+      const res = await raiInterface.attendanceDetail({
+        ActivityId: articleId.value,
+      });
+      try {
+        if (res.Ret === 200) {
+          makeList.value = res.Data.List1;
+          notMakeList.value = res.Data.List2;
+          potentialList.value = res.Data.List3;
+        }
+      } catch (err) {}
+    }
+    //弹窗的开启事件
+    async function examineHandle(item, type) {
+      addRemarksFrom.value = item;
+      examineOrAddShow.value = type === "历史" ? true : false;
+      examineOrAddDlg.value = true;
+      if (examineOrAddShow.value) {
+        const res = await raiInterface.activityMeetRemarkList({ Mobile: item.Mobile });
+        if (res.Ret === 200) {
+          nextTick(() => {
+            lableRemarkList.value = res.Data.List || [];
+          });
+        }
+      }
+    }
+    //弹窗的关闭事件
+     functioncancelHandle() {
+      addRemarksFrom.value = {};
+      addRemarText.value = "";
+      examineOrAddDlg.value = false;
+    }
+    //添加备注的确定事件
+    async function saveHandle() {
+      if (!addRemarText.value) return ElMessage.error("请输入备注内容");
+      const res = await raiInterface.activityMeetAddRemarks({
+        ActivityId: addRemarksFrom.value.ActivityId,
+        Mobile: addRemarksFrom.value.Mobile,
+        Content: addRemarText.value,
+      });
+      if (res.Ret === 200) {
+        addRemarksFrom.value = {};
+        addRemarText.value = "";
+        examineOrAddDlg.value = false;
+        ElMessage.success("添加成功");
+        attendanceDetail();
+      }
+    }
+    //添加阅读时长
+    async function activityMeetAddStopTime() {
+      const res = await raiInterface.activityMeetAddStopTime({
+        ActivityId: articleId.value,
+        StopTime: remainTime.value,
+      });
+      if (res.Ret === 200) {
+      }
+    }
+onUnmounted(()=>{
+  clearInterval(remainTiming.value);
+    activityMeetAddStopTime();
+})
+</script>
+
 <template>
   <div class="container-attendMeeting">
     <el-card style="margin-bottom: 20px">
@@ -9,7 +102,7 @@
         <el-table-column min-width="150" align="center" prop="CompanyName" label="公司名称" width=""> </el-table-column>
         <el-table-column min-width="115" align="center" prop="SellerName" label="所属销售" width=""> </el-table-column>
         <el-table-column align="center" prop="" label="是否到会" width="">
-          <template slot-scope="scope">
+          <template #default="scope">
             {{ scope.row.IsMeeting == 1 ? "已到会" : "未到会" }}
           </template>
         </el-table-column>
@@ -40,7 +133,7 @@
       <h4 style="margin-bottom: 10px">潜在客户</h4>
       <el-table :data="potentialList" style="width: 100%" border>
         <el-table-column width="300" align="center" prop="RealName" label="备注">
-          <template slot-scope="{ row }">
+          <template #default="{ row }">
             <div class="remark-list">
               <span>{{ row.Content }}</span>
               <div class="button">
@@ -62,11 +155,13 @@
         <el-table-column min-width="91" align="center" prop="MeetingStatusStr" label="参会状态" width=""> </el-table-column>
       </el-table>
     </el-card>
-    <el-dialog v-dialogDrag :visible.sync="examineOrAddDlg" :close-on-click-modal="false" :modal-append-to-body="false" @close="cancelHandle" center :width="examineOrAddShow ? '800px' : '500px'">
-      <div slot="title">
-        <i class="el-icon-close" style="fontsize: 24px; cursor: pointer; position: absolute; right: 20px; top: 50%; transform: translateY(-50%)" @click="cancelHandle"></i>
-        <span style="fontsize: 16px">{{ examineOrAddShow ? "历史备注" : "添加备注" }}</span>
-      </div>
+    <el-dialog draggable v-model="examineOrAddDlg" :close-on-click-modal="false" :modal-append-to-body="false" @close="cancelHandle" center :width="examineOrAddShow ? '800px' : '500px'">
+      <template #header>
+        <div>
+          <i class="el-icon-close" style="fontsize: 24px; cursor: pointer; position: absolute; right: 20px; top: 50%; transform: translateY(-50%)" @click="cancelHandle"></i>
+          <span style="fontsize: 16px">{{ examineOrAddShow ? "历史备注" : "添加备注" }}</span>
+        </div>
+      </template>
       <div v-if="examineOrAddShow">
         <el-table :data="lableRemarkList" style="width: 100%" border height="350">
           <el-table-column align="center" prop="Content" label="备注信息"> </el-table-column>
@@ -87,103 +182,6 @@
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-export default {
-  name: "",
-  components: {},
-  props: {},
-  data() {
-    return {
-      makeList: [],
-      notMakeList: [],
-      potentialList: [],
-      examineOrAddDlg: false, //弹窗
-      examineOrAddShow: false, //区分弹窗显示
-      addRemarText: "", //备注输入框
-      lableRemarkList: [], //备注数据
-      addRemarksFrom: {}, //item 的数据
-      remainTime: 0,
-      remainTiming: null, //
-      articleId: null, //
-    };
-  },
-  computed: {},
-  watch: {},
-  created() {
-    this.remainTiming = setInterval(() => {
-      this.remainTime++;
-    }, 1000);
-  },
-  mounted() {
-    this.articleId = +this.$route.query.id;
-    this.attendanceDetail();
-  },
-  methods: {
-    async attendanceDetail() {
-      const res = await raiInterface.attendanceDetail({
-        ActivityId: this.articleId,
-      });
-      try {
-        if (res.Ret === 200) {
-          this.makeList = res.Data.List1;
-          this.notMakeList = res.Data.List2;
-          this.potentialList = res.Data.List3;
-        }
-      } catch (err) {}
-    },
-    //弹窗的开启事件
-    async examineHandle(item, type) {
-      this.addRemarksFrom = item;
-      this.examineOrAddShow = type === "历史" ? true : false;
-      this.examineOrAddDlg = true;
-      if (this.examineOrAddShow) {
-        const res = await raiInterface.activityMeetRemarkList({ Mobile: item.Mobile });
-        if (res.Ret === 200) {
-          this.$nextTick(() => {
-            this.lableRemarkList = res.Data.List || [];
-          });
-        }
-      }
-    },
-    //弹窗的关闭事件
-    cancelHandle() {
-      this.addRemarksFrom = {};
-      this.addRemarText = "";
-      this.examineOrAddDlg = false;
-    },
-    //添加备注的确定事件
-    async saveHandle() {
-      if (!this.addRemarText) return this.$message.error("请输入备注内容");
-      const res = await raiInterface.activityMeetAddRemarks({
-        ActivityId: this.addRemarksFrom.ActivityId,
-        Mobile: this.addRemarksFrom.Mobile,
-        Content: this.addRemarText,
-      });
-      if (res.Ret === 200) {
-        this.addRemarksFrom = {};
-        this.addRemarText = "";
-        this.examineOrAddDlg = false;
-        this.$message.success("添加成功");
-        this.attendanceDetail();
-      }
-    },
-    //添加阅读时长
-    async activityMeetAddStopTime() {
-      const res = await raiInterface.activityMeetAddStopTime({
-        ActivityId: this.articleId,
-        StopTime: this.remainTime,
-      });
-      if (res.Ret === 200) {
-      }
-    },
-  },
-  destroyed() {
-    clearInterval(this.remainTiming);
-    this.activityMeetAddStopTime();
-  },
-};
-</script>
 <style scoped lang="scss">
 .container-attendMeeting {
   .remark-list {

src/views/rai_manage/activityManage/components/imgMeeting.vue

@@ -1,15 +1,59 @@
+<script setup>
+import { ref } from "vue";
+import { raiInterface } from "@/api/api.js";
+import { ElMessageBox, ElMessage } from "element-plus";
+
+const props = defineProps({
+  isShowImgMeetingDlg: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  imgMeetingData: {
+    default: [],
+    required: true,
+    type: Array,
+  },
+  page_no: {},
+});
+
+const $emit = defineEmits(["childrenImgMeetingHandler", "deleteLabelItem", "getsummaryManageList"]);
+// 确定事件
+async function confirmPerson() {
+  let isConfirm = props.imgMeetingData.every((item) => item.TitmeYMD && item.TitmeHM && item.Company);
+  if (!isConfirm) return ElMessage.error("每格的内容都必填。");
+  const res = await raiInterface.preserveAndPublishAdd({
+    ListImgToText: props.imgMeetingData,
+  });
+  if (res.Ret === 200) {
+    ElMessage.success("新增成功！");
+    $emit("update:page_no", 1);
+    $emit("getsummaryManageList");
+    handleClose();
+  }
+}
+function handleClose() {
+  $emit("update:isShowImgMeetingDlg", false);
+
+  $emit("childrenImgMeetingHandler");
+}
+function deleteLabelItem(item, index) {
+  $emit("deleteLabelItem");
+}
+</script>
+
 <template>
   <div class="container-img-meeting">
-    <el-dialog width="800px" v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center title="新建标的" :visible.sync="isShowImgMeetingDlg" :before-close="handleClose">
+    <el-dialog width="800px" draggable :close-on-click-modal="false" :modal-append-to-body="false" center title="新建标的" v-model="props.isShowImgMeetingDlg" :before-close="handleClose">
       <div style="margin-bottom: 10px">
         <p>请确认建会信息:</p>
-        <div class="box-content" style="padding-left:20px">
+        <div class="box-content" style="padding-left: 20px">
           <div class="box-date">日期</div>
           <div class="box-time">时间</div>
           <div class="box-name">公司名称</div>
         </div>
       </div>
-      <div class="box-content hover-box-content" v-for="(item, index) in imgMeetingData" :key="item.id">
+      <div class="box-content hover-box-content" v-for="(item, index) in props.imgMeetingData" :key="item.id">
         <div class="box-date">
           <el-date-picker v-model="item.TitmeYMD" type="date" value-format="yyyy年MM月dd日" format="yyyy年MM月dd日  (周ddd)" placeholder="选择日期" style="width: 230px"> </el-date-picker>
         </div>
@@ -23,68 +67,16 @@
           <img src="~@/assets/img/icons/delete-Item.png" alt="" />
         </div>
       </div>
-
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="confirmPerson">确定</el-button>
-        <el-button @click="handleClose">取消</el-button>
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="confirmPerson">确定</el-button>
+          <el-button @click="handleClose">取消</el-button>
+        </span>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-export default {
-  name: "",
-  components: {},
-  props: {
-    isShowImgMeetingDlg: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    imgMeetingData: {
-      default: [],
-      required: true,
-      type: Array,
-    },
-  },
-  data() {
-    return {
-      value1: "",
-    };
-  },
-  computed: {},
-  watch: {},
-  created() {},
-  mounted() {},
-  methods: {
-    // 确定事件
-    async confirmPerson() {
-      let isConfirm = this.imgMeetingData.every((item) => item.TitmeYMD && item.TitmeHM && item.Company);
-      if (!isConfirm) return this.$message.error("每格的内容都必填。");
-      const res = await raiInterface.preserveAndPublishAdd({
-        ListImgToText: this.imgMeetingData,
-      });
-      console.log(res);
-      if (res.Ret === 200) {
-        this.$message.success("新增成功！");
-        this.$parent.page_no = 1;
-        this.$parent.getsummaryManageList();
-        this.handleClose();
-      }
-    },
-    handleClose() {
-      this.$emit("update:isShowImgMeetingDlg", false);
-
-      this.$emit("childrenImgMeetingHandler");
-    },
-    deleteLabelItem(item, index) {
-      this.$parent.imgMeetingData.splice(index, 1);
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .container-img-meeting {
   .box-content {

src/views/rai_manage/activityManage/meetingManagement.vue

@@ -1,3 +1,279 @@
+<script setup>
+import { ref, watch, onMounted, reactive, computed, toRefs } from "vue";
+
+import mPage from "@/components/mPage.vue";
+import { raiInterface } from "@/api/api.js";
+import AtcParticulars from "../components/atcParticulars.vue";
+import MatchingDlg from "../components/matchingDlg.vue";
+import ParticalDialog from "../components/particalDialog.vue";
+import SearchCustomerDlg from "../components/apply/searchCustomerDlg.vue";
+import { Search } from "@element-plus/icons-vue";
+
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  meetingTab: 1,
+  dataList: [], //表格的列表
+  tableDataSub: [],
+  page_no: sessionStorage.getItem("interviewListBack") ? JSON.parse(sessionStorage.getItem("interviewListBack")).page_no : 1,
+  total: 0, //条数
+  PageSize: 10, //每页显示几条
+  keyWord: "",
+  industry: "", //行业
+  cactivityTypeVal: "", //活动
+  chartPermissionList: [], //行业的数组
+  cactivityTypeList: [], //活动类型
+  issueTime: "", //时间
+  tabsPitchonType: 1,
+  detailData: {}, //
+  dialogVisible: false,
+  dialogLeparticaShow: false,
+  companyId: "", //
+  excelType: "",
+  isLimitPeople: "",
+  totalDlg: 0,
+  myTotalDlg: 0,
+  memberType: "",
+  matchingDlgShow: false, //匹配弹框
+  matchingId: "",
+  gridData: [],
+  submitDialog: false, //
+  offlineId: "",
+  dialogVisiblepartica: false, //
+  searchCustomer: false, //搜索流失客户
+  isYidongConduct: 0,
+  particlaDlg: {
+    isSpecial: false,
+    id: "",
+    title: "",
+    type: "",
+  },
+});
+
+// 弘则 研选 是否是研选
+const isResearch = computed(() => {
+  return $route.path.indexOf("purchaser") != -1 ? true : false;
+});
+
+watch(
+  () => pageState.keyWord,
+  () => {
+    pageState.page_no = 1;
+    init();
+    getsDataList();
+  }
+);
+watch(
+  () => pageState.meetingTab,
+  (value) => {
+    if (!pageState.keyWord) {
+      pageState.page_no = 1;
+      init();
+      getsDataList();
+    } else pageState.keyWord = "";
+  }
+);
+
+onMounted(() => {
+  !isResearch.value && chartPermission();
+  getsDataList();
+});
+
+function init() {
+  pageState.industry = ""; //行业
+  pageState.issueTime = ""; //时间
+  pageState.cactivityTypeVal = ""; //活动
+}
+//获取行业
+function chartPermission() {
+  raiInterface.chartPermission({ IsHideResearch: !isResearch.value }).then((res) => {
+    if (res.Ret === 200) {
+      pageState.chartPermissionList = res.Data.List;
+    }
+  });
+}
+//活动类型
+function activityType() {
+  raiInterface
+    .activityTypeMeetType({
+      MeetType: pageState.meetingTab,
+      IsResearch: isResearch.value,
+    })
+    .then((res) => {
+      if (res.Ret === 200) {
+        pageState.cactivityTypeList = res.Data.List;
+      }
+    });
+}
+//change事件
+function conditionChange() {
+  pageState.page_no = 1;
+  getsDataList();
+}
+//列表表格
+function getsDataList() {
+  raiInterface
+    .activityMeetList({
+      CurrentIndex: pageState.page_no,
+      PageSize: pageState.PageSize,
+      StartDate: pageState.issueTime[0],
+      EndDate: pageState.issueTime[1],
+      KeyWord: pageState.keyWord,
+      SearchType: pageState.tabsPitchonType,
+      ChartPermissionId: pageState.industry,
+      ActivityTypeId: pageState.cactivityTypeVal,
+      MeetType: pageState.meetingTab,
+      IsResearch: isResearch.value,
+    })
+    .then((res) => {
+      if (res.Ret !== 200) return;
+      pageState.dataList = res.Data.List;
+      pageState.total = res.Data.Paging.Totals;
+    });
+}
+//分页
+function handleCurrentChange(page) {
+  pageState.page_no = page;
+  getsDataList();
+}
+//手动匹配
+function matching(id) {
+  pageState.matchingId = id;
+  pageState.matchingDlgShow = true;
+}
+//到会详情
+function attendMeeting(item, text) {
+  if (item.SubmitMeetingType == 1 || item.YidongActivityId) {
+    pageState.offlineId = item.ActivityId;
+    pageState.particlaDlg = {
+      id: item.ActivityId,
+      title: text,
+      type: item.SubmitMeetingType,
+    };
+    pageState.dialogVisiblepartica = true;
+  } else {
+    goDetail(item.ActivityId);
+  }
+}
+//详情弹框
+function particulars(id) {
+  if (pageState.meetingTab == 1) {
+    raiInterface
+      .appointmentList({
+        ActivityId: id,
+      })
+      .then((res) => {
+        if (res.Ret !== 200) return;
+        pageState.excelType = res.Data.ExcelType;
+        pageState.isLimitPeople = res.Data.IsLimitPeople;
+        pageState.totalDlg = res.Data.Total;
+        pageState.myTotalDlg = res.Data.MyTotal;
+        pageState.memberType = res.Data.MemberType;
+        pageState.isYidongConduct = res.Data.IsYidongConduct;
+        nextTick(() => {
+          pageState.tableDataSub = res.Data.List;
+        });
+      });
+    pageState.dialogLeparticaShow = true;
+  } else if (pageState.meetingTab == 2) {
+    particularsOffline(id, "报名详情");
+  }
+}
+function particularsOffline(id, text) {
+  pageState.offlineId = id;
+  pageState.particlaDlg = {
+    id,
+    title: text,
+  };
+  pageState.dialogVisiblepartica = true;
+}
+
+//点击标题的弹框
+function titleBtnClick(id) {
+  raiInterface.activityDetail({ ActivityId: Number(id) }).then((res) => {
+    if (res.Ret == 200) {
+      pageState.detailData = res.Data;
+    }
+  });
+  pageState.dialogVisible = true;
+}
+//关闭弹框
+function confirmPerson() {
+  pageState.tableDataSub = [];
+  pageState.dialogLeparticaShow = false;
+}
+//到会情况
+function arriveHandel(id) {
+  pageState.offlineId = id;
+  pageState.submitDialog = true;
+}
+
+function goDetail(id) {
+  let routerUrl = $router.resolve({
+    path: "attendMeeting",
+    query: {
+      id: id,
+    },
+  });
+  window.open(routerUrl.href, "_blank");
+}
+async function popoverMouseenter(id) {
+  const res = await raiInterface.activityMeetHistoryList({
+    ActivityId: id,
+  });
+  if (res.Ret === 200) {
+    pageState.gridData = res.Data.List || [];
+  }
+}
+
+// 下面这个三个是判断的
+const isYiDongShow = computed(() => {
+  return pageState.isYidongConduct === 1 || pageState.excelType !== "CClass";
+});
+const isCClassNot = computed(() => {
+  return pageState.isYidongConduct != 1 && pageState.excelType == "CClass";
+});
+const attendType = computed(() => {
+  return pageState.meetingTab == 1 ? "" : "线下到会";
+});
+
+const {
+  meetingTab,
+  dataList,
+  tableDataSub,
+  page_no,
+  total,
+  PageSize,
+  keyWord,
+  industry,
+  cactivityTypeVal,
+  chartPermissionList,
+  cactivityTypeList,
+  issueTime,
+  tabsPitchonType,
+  detailData,
+  dialogVisible,
+  dialogLeparticaShow,
+  companyId,
+  excelType,
+  isLimitPeople,
+  totalDlg,
+  myTotalDlg,
+  memberType,
+  matchingDlgShow,
+  matchingId,
+  gridData,
+  submitDialog,
+  offlineId,
+  dialogVisiblepartica,
+  searchCustomer,
+  isYidongConduct,
+  particlaDlg,
+} = toRefs(pageState);
+</script>
+
 <template>
   <!-- 实际到会管理页面 -->
   <div class="container-practical">
@@ -9,9 +285,7 @@
           <el-radio-button :label="2">线下到会管理</el-radio-button>
         </el-radio-group>
         <div>
-          <el-input v-model="keyWord" placeholder="请输入活动名称" style="width: 521px" clearable>
-            <i slot="prefix" class="el-input__icon el-icon-search"></i>
-          </el-input>
+          <el-input v-model="keyWord" placeholder="请输入活动名称" style="width: 521px" clearable :prefix-icon="Search"> </el-input>
         </div>
       </div>
     </el-card>
@@ -20,42 +294,23 @@
       <!-- 选择部分 -->
       <div class="screen-box">
         <div>
-          <el-select placeholder="行业" clearable v-model="industry" @change="conditionChange" style="margin-bottom: 20px"
-          v-if="!isResearch">
-            <el-option
-              v-for="item in chartPermissionList"
-              :label="item.PermissionName"
-              :key="item.ChartPermissionId"
-              :value="item.ChartPermissionId"
-            ></el-option>
+          <el-select placeholder="行业" clearable v-model="industry" @change="conditionChange" style="margin-bottom: 20px" v-if="!isResearch">
+            <el-option v-for="item in chartPermissionList" :label="item.PermissionName" :key="item.ChartPermissionId" :value="item.ChartPermissionId"></el-option>
           </el-select>
-          <el-select
-            placeholder="活动类型"
-            clearable
-            @focus="activityType"
-            v-model="cactivityTypeVal"
-            @change="conditionChange"
-            style="margin-bottom: 20px"
-          >
-            <el-option
-              v-for="item in cactivityTypeList"
-              :label="item.ActivityTypeName"
-              :key="item.ActivityTypeId"
-              :value="item.ActivityTypeId"
-            ></el-option>
+          <el-select placeholder="活动类型" clearable @focus="activityType" v-model="cactivityTypeVal" @change="conditionChange" style="margin-bottom: 20px">
+            <el-option v-for="item in cactivityTypeList" :label="item.ActivityTypeName" :key="item.ActivityTypeId" :value="item.ActivityTypeId"></el-option>
           </el-select>
           <date-picker v-model="issueTime" type="date" range placeholder="活动时间" value-type="format" @change="conditionChange"> </date-picker>
         </div>
         <div class="top-buttons">
-          <el-button type="primary" @click="searchCustomer = true" v-if="meetingTab==1">搜索流失客户</el-button>
-          <el-button style="margin-left: 20px" type="primary" 
-          @click="$router.push(isResearch?'/purchaserAppointment':'/appointment')">查看客户爽约记录</el-button>
+          <el-button type="primary" @click="searchCustomer = true" v-if="meetingTab == 1">搜索流失客户</el-button>
+          <el-button style="margin-left: 20px" type="primary" @click="$router.push(isResearch ? '/purchaserAppointment' : '/appointment')">查看客户爽约记录</el-button>
         </div>
       </div>
       <!-- 表格部分 -->
       <el-table :data="dataList" style="width: 100%; margin-top: 20px" border="">
         <el-table-column min-width="400" align="center" label="活动名称">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span class="editsty" @click="titleBtnClick(scope.row.ActivityId)"> {{ scope.row.ActivityName }}</span>
           </template>
         </el-table-column>
@@ -63,14 +318,14 @@
         <el-table-column min-width="120" prop="ActivityTypeName" align="center" label="活动类型"></el-table-column>
         <el-table-column min-width="219" prop="ActivityTimeText" align="center" label="活动时间"></el-table-column>
         <el-table-column prop="" align="center" label="报名人数">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span class="editsty" @click="particulars(scope.row.ActivityId)">{{ scope.row.SignupPeopleNum }}</span>
           </template>
         </el-table-column>
         <el-table-column min-width="105" prop="MeetPeopleNum" align="center" label="实际参会人数"></el-table-column>
-        <el-table-column min-width="105" prop="UpdateTime" align="center" label="数据更新时间" v-if="meetingTab==1"></el-table-column>
-        <el-table-column min-width="115" align="center" label="操作" v-if="meetingTab==1">
-          <template slot-scope="scope">
+        <el-table-column min-width="105" prop="UpdateTime" align="center" label="数据更新时间" v-if="meetingTab == 1"></el-table-column>
+        <el-table-column min-width="115" align="center" label="操作" v-if="meetingTab == 1">
+          <template #default="scope">
             <!-- <input type="file" size="small" name="file" @change="fileSelected()" id="fileImport" class="true-file" style="display: none" /> -->
             <p class="editsty" v-if="scope.row.IsShowHandMovement" @click="matching(scope.row.ActivityId)">&nbsp;&nbsp;手动匹配</p>
             <!-- <span class="editsty" v-if="scope.row.IsYidongConduct === 1" @click="particularsSubmit(scope.row.ActivityId)"
@@ -85,32 +340,23 @@
                 <el-table-column align="center" property="RealName" label="浏览人"></el-table-column>
                 <el-table-column align="center" property="CreateTime" label="浏览时间"></el-table-column>
                 <el-table-column align="center" property="StopTime" label="停留时长">
-                  <template slot-scope="{ row }">
+                  <template #default="{ row }">
                     {{ row.StopTime }}
                     <span v-if="row.StopTime">s</span>
                   </template>
                 </el-table-column>
               </el-table>
-              <p slot="reference" class="editsty" @mouseenter="popoverMouseenter(scope.row.ActivityId)" @click="goDetail(scope.row.ActivityId)">
-                &nbsp;&nbsp;到会详情
-              </p>
+              <p class="editsty" @mouseenter="popoverMouseenter(scope.row.ActivityId)" @click="goDetail(scope.row.ActivityId)">&nbsp;&nbsp;到会详情</p>
             </el-popover>
           </template>
         </el-table-column>
-        <el-table-column min-width="200" align="center" label="操作" v-else-if="meetingTab==2">
-          <template slot-scope="scope">
-            <span v-if="scope.row.OperationStyle == 1" class="editsty" @click="arriveHandel(scope.row.ActivityId)"
-              >&nbsp;&nbsp;提交到会情况</span
-            >
+        <el-table-column min-width="200" align="center" label="操作" v-else-if="meetingTab == 2">
+          <template #default="scope">
+            <span v-if="scope.row.OperationStyle == 1" class="editsty" @click="arriveHandel(scope.row.ActivityId)">&nbsp;&nbsp;提交到会情况</span>
 
-            <span class="editsty" v-if="scope.row.OperationStyle == 2" @click="arriveHandel(scope.row.ActivityId)"
-              >&nbsp;&nbsp;修改到会情况</span
-            >
+            <span class="editsty" v-if="scope.row.OperationStyle == 2" @click="arriveHandel(scope.row.ActivityId)">&nbsp;&nbsp;修改到会情况</span>
 
-            <span class="editsty" v-if="scope.row.OperationStyle == 2" @click="particularsOffline(scope.row.ActivityId, '到会详情')"
-              >&nbsp;&nbsp;到会详情</span
-            >
-           
+            <span class="editsty" v-if="scope.row.OperationStyle == 2" @click="particularsOffline(scope.row.ActivityId, '到会详情')">&nbsp;&nbsp;到会详情</span>
           </template>
         </el-table-column>
       </el-table>
@@ -119,31 +365,21 @@
       </el-col>
     </el-card>
     <!-- 详情弹框 -->
-    <atc-particulars :dialogVisible.sync="dialogVisible" :detailData.sync="detailData" />
-    <el-dialog
-      v-dialogDrag
-      :close-on-click-modal="false"
-      :modal-append-to-body="false"
-      center
-      :visible.sync="dialogLeparticaShow"
-      customClass="custom-applydialog"
-      :before-close="confirmPerson"
-    >
-      <div slot="title" style="display: flex; align-items: center">
-        <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
-        <span style="font-size: 16px">
-          {{ excelType == "Teleconference" && isLimitPeople == 1 ? "预约外呼详情" : "报名详情" }}
-        </span>
-      </div>
+    <atc-particulars v-model:dialogVisible="dialogVisible" v-model::detailData="detailData" />
+    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center v-model="dialogLeparticaShow" customClass="custom-applydialog" :before-close="confirmPerson">
+      <template #header>
+        <div style="display: flex; align-items: center">
+          <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
+          <span style="font-size: 16px">
+            {{ excelType == "Teleconference" && isLimitPeople == 1 ? "预约外呼详情" : "报名详情" }}
+          </span>
+        </div>
+      </template>
       <div>
         <p style="margin-bottom: 10px" v-if="isYiDongShow">
           <template v-if="memberType == 'Admin'"> 共有{{ totalDlg }}人{{ excelType == "AppointmentCall" ? "预约外呼" : "报名" }} </template>
-          <template v-else-if="memberType == 'Sale'">
-            共有{{ totalDlg }}人{{ excelType == "AppointmentCall" ? "预约外呼" : "报名" }}，其中本人名下客户{{ myTotalDlg }}人
-          </template>
-          <template v-else>
-            共有{{ totalDlg }}人{{ excelType == "AppointmentCall" ? "预约外呼" : "报名" }}，其中本组名下客户{{ myTotalDlg }}人
-          </template>
+          <template v-else-if="memberType == 'Sale'"> 共有{{ totalDlg }}人{{ excelType == "AppointmentCall" ? "预约外呼" : "报名" }}，其中本人名下客户{{ myTotalDlg }}人 </template>
+          <template v-else> 共有{{ totalDlg }}人{{ excelType == "AppointmentCall" ? "预约外呼" : "报名" }}，其中本组名下客户{{ myTotalDlg }}人 </template>
         </p>
         <p style="margin-bottom: 10px" v-else>
           <template v-if="memberType == 'Admin'"> 共有{{ totalDlg }}人报名</template>
@@ -151,18 +387,11 @@
         <el-table max-height="260px" :data="tableDataSub" border style="width: 100%">
           <el-table-column width="130" align="center" prop="RealName" key="name" label="姓名"></el-table-column>
           <el-table-column width="150" align="center" prop="Mobile" key="mobile" label="手机号" v-if="isYiDongShow"></el-table-column>
-          <el-table-column
-            width="150"
-            align="center"
-            prop="OutboundMobile"
-            key="outboundMobile"
-            label="外呼号码"
-            v-if="isYiDongShow"
-          ></el-table-column>
+          <el-table-column width="150" align="center" prop="OutboundMobile" key="outboundMobile" label="外呼号码" v-if="isYiDongShow"></el-table-column>
           <el-table-column align="center" prop="CompanyName" key="company" label="公司名称" v-if="isCClassNot"></el-table-column>
           <el-table-column width="150" align="center" prop="SellerName" key="seller" label="所属销售"></el-table-column>
           <el-table-column min-width="110" key="meeting" align="center" label="参会方式" v-if="isYiDongShow">
-            <template slot-scope="{ row }">
+            <template #default="{ row }">
               <span>
                 {{ row.SignupType == 1 ? "预约外呼" : row.SignupType == 2 ? "自主拨入" : row.SignupType == 4 ? "自主入会" : "" }}
               </span>
@@ -170,327 +399,18 @@
           </el-table-column>
         </el-table>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="confirmPerson">知道了</el-button>
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="confirmPerson">知道了</el-button>
+        </span>
+      </template>
     </el-dialog>
-    <matching-dlg :matchingDlgShow.sync="matchingDlgShow" :matchingId="matchingId" />
-    <partical-dialog
-      :type="attendType"
-      :offlineId="offlineId"
-      :submitDialog.sync="submitDialog"
-      :dialogVisiblepartica.sync="dialogVisiblepartica"
-      :particlaDlg="particlaDlg"
-    />
-    <search-customer-dlg :searchCustomer.sync="searchCustomer" />
+    <matching-dlg v-model:matchingDlgShow="matchingDlgShow" :matchingId="matchingId" @getsDataList="getsDataList"/>
+    <partical-dialog  @getsDataList="getsDataList" @particulars="particulars" :type="attendType" :offlineId="offlineId" v-model:submitDialog="submitDialog" v-model:dialogVisiblepartica="dialogVisiblepartica" :particlaDlg="particlaDlg" />
+    <search-customer-dlg v-model:searchCustomer="searchCustomer" />
   </div>
 </template>
 
-<script>
-import mPage from "@/components/mPage.vue";
-import { raiInterface } from "@/api/api.js";
-import AtcParticulars from "../components/atcParticulars.vue";
-import MatchingDlg from "../components/matchingDlg.vue";
-import ParticalDialog from "../components/particalDialog.vue";
-import SearchCustomerDlg from "../components/apply/searchCustomerDlg.vue";
-
-export default {
-  name: "meetingManagement",
-  components: { mPage, AtcParticulars, MatchingDlg, ParticalDialog, SearchCustomerDlg },
-  props: {},
-  data() {
-    return {
-      meetingTab:1,
-      dataList: [], //表格的列表
-      tableDataSub: [],
-      page_no: sessionStorage.getItem("interviewListBack") ? JSON.parse(sessionStorage.getItem("interviewListBack")).page_no : 1,
-      total: 0, //条数
-      PageSize: 10, //每页显示几条
-      keyWord: "",
-      industry: "", //行业
-      cactivityTypeVal: "", //活动
-      chartPermissionList: [], //行业的数组
-      cactivityTypeList: [], //活动类型
-      issueTime: "", //时间
-      tabsPitchonType: 1,
-      detailData: {}, //
-      dialogVisible: false,
-      dialogLeparticaShow: false,
-      companyId: "", //
-      excelType: "",
-      isLimitPeople: "",
-      totalDlg: 0,
-      myTotalDlg: 0,
-      memberType: "",
-      matchingDlgShow: false, //匹配弹框
-      matchingId: "",
-      gridData: [],
-      submitDialog: false, //
-      offlineId: "",
-      dialogVisiblepartica: false, //
-      searchCustomer: false, //搜索流失客户
-      isYidongConduct: 0,
-      particlaDlg: {
-        isSpecial: false,
-        id: "",
-        title: "",
-        type: "",
-      },
-    };
-  },
-  computed: {
-    // 弘则 研选 是否是研选
-    isResearch(){
-      return this.$route.path.indexOf("purchaser")!=-1?true:false
-    },
-    exportUser() {
-      return import.meta.env.VITE_APP_API_ROOT + "/cygx/activityMeet/meetingExport?" + localStorage.getItem("auth") || "";
-    },
-    isYiDongShow() {
-      return this.isYidongConduct === 1 || this.excelType !== "CClass";
-    },
-    isCClassNot() {
-      return this.isYidongConduct != 1 && this.excelType == "CClass";
-    },
-    attendType(){
-      return this.meetingTab == 1 ? "" : "线下到会";
-    }
-  },
-  watch: {
-    keyWord() {
-      this.page_no = 1;
-      this.init();
-      this.getsDataList();
-    },
-    meetingTab(value) {
-      if(!this.keyWord){
-        this.page_no = 1;
-        this.init();
-        this.getsDataList();
-      } else this.keyWord=""
-    },
-  },
-  created() {},
-  mounted() {
-    !this.isResearch && this.chartPermission();
-    this.getsDataList();
-  },
-  methods: {
-    init() {
-      this.industry = ""; //行业
-      this.issueTime = ""; //时间
-      this.cactivityTypeVal = ""; //活动
-    },
-    //获取行业
-    chartPermission() {
-      raiInterface.chartPermission({IsHideResearch:!this.isResearch}).then((res) => {
-        if (res.Ret === 200) {
-          this.chartPermissionList = res.Data.List;
-        }
-      });
-    },
-    //活动类型
-    activityType() {
-      raiInterface
-        .activityTypeMeetType({
-          MeetType: this.meetingTab,
-          IsResearch:this.isResearch
-        })
-        .then((res) => {
-          if (res.Ret === 200) {
-            this.cactivityTypeList = res.Data.List;
-          }
-        });
-    },
-    //change事件
-    conditionChange() {
-      this.page_no = 1;
-      this.getsDataList();
-    },
-    //列表表格
-    getsDataList() {
-      raiInterface
-        .activityMeetList({
-          CurrentIndex: this.page_no,
-          PageSize: this.PageSize,
-          StartDate: this.issueTime[0],
-          EndDate: this.issueTime[1],
-          KeyWord: this.keyWord,
-          SearchType: this.tabsPitchonType,
-          ChartPermissionId: this.industry,
-          ActivityTypeId: this.cactivityTypeVal,
-          MeetType: this.meetingTab,
-          IsResearch:this.isResearch
-        })
-        .then((res) => {
-          if (res.Ret !== 200) return;
-          this.dataList = res.Data.List;
-          this.total = res.Data.Paging.Totals;
-        });
-    },
-    //分页
-    handleCurrentChange(page) {
-      this.page_no = page;
-      this.getsDataList();
-    },
-    //手动匹配
-    matching(id) {
-      this.matchingId = id;
-      this.matchingDlgShow = true;
-    },
-    //到会详情
-    attendMeeting(item, text) {
-      if (item.SubmitMeetingType == 1 || item.YidongActivityId) {
-        this.offlineId = item.ActivityId;
-        this.particlaDlg = {
-          id: item.ActivityId,
-          title: text,
-          type: item.SubmitMeetingType,
-        };
-        this.dialogVisiblepartica = true;
-      } else {
-        this.goDetail(item.ActivityId);
-      }
-    },
-    //详情弹框
-    particulars(id) {
-      if(this.meetingTab == 1){
-        raiInterface
-        .appointmentList({
-          ActivityId: id,
-        })
-        .then((res) => {
-          if (res.Ret !== 200) return;
-          this.excelType = res.Data.ExcelType;
-          this.isLimitPeople = res.Data.IsLimitPeople;
-          this.totalDlg = res.Data.Total;
-          this.myTotalDlg = res.Data.MyTotal;
-          this.memberType = res.Data.MemberType;
-          this.isYidongConduct = res.Data.IsYidongConduct;
-          this.$nextTick(() => {
-            this.tableDataSub = res.Data.List;
-          });
-        });
-        this.dialogLeparticaShow = true;
-      }else if(this.meetingTab == 2){
-        this.particularsOffline(id,'报名详情')
-      }
-
-    },
-    particularsOffline(id,text){
-      this.offlineId = id;
-      this.particlaDlg = {
-        id,
-        title: text,
-      };
-      this.dialogVisiblepartica = true;
-    },
-    // meetingExport() {
-    //   const loading = this.$loading({
-    //     lock: true,
-    //     text: "客户参会详情文件下载中...",
-    //     spinner: "el-icon-loading",
-    //     background: "rgba(0, 0, 0, 0.7)",
-    //   });
-    //   const xhr = new XMLHttpRequest();
-    //   xhr.open("GET", this.exportUser, true);
-    //   xhr.responseType = "blob";
-    //   xhr.onload = function () {
-    //     if (this.status == 200) {
-    //       loading.close();
-    //       var blob = this.response;
-    //       var a = document.createElement("a");
-    //       var url = window.URL.createObjectURL(blob); //创建url对象
-    //       a.href = url;
-    //       a.download = "客户参会详情.xlsx";
-    //       a.click();
-    //       window.URL.revokeObjectURL(url); //释放url对象
-    //     } else {
-    //       this.$message.error("下载失败！");
-    //     }
-    //   };
-    //   xhr.send();
-    // },
-    //到会情况
-    // particularsSubmit(id) {
-    //   this.companyId = id;
-    //   $("#fileImport").click();
-    // },
-    //点击标题的弹框
-    titleBtnClick(id) {
-      raiInterface.activityDetail({ ActivityId: Number(id) }).then((res) => {
-        if (res.Ret == 200) {
-          this.detailData = res.Data;
-        }
-      });
-      this.dialogVisible = true;
-    },
-    //关闭弹框
-    confirmPerson() {
-      this.tableDataSub = [];
-      this.dialogLeparticaShow = false;
-    },
-    //到会情况
-    arriveHandel(id) {
-      this.offlineId = id;
-      this.submitDialog = true;
-    },
-    // 上传
-    // fileSelected(type) {
-    //   const that = this;
-    //   if (document.getElementById("fileImport").files[0]) {
-    //     let hostfile = document.getElementById("fileImport").files[0];
-    //     let size = Math.floor(hostfile.size / 1024 / 1024);
-    //     if (size > 200) {
-    //       that.$message.error("上传文件大小不能大于200M！");
-    //       hostfile = {};
-    //       return false;
-    //     }
-    //     if (hostfile.name.toLowerCase().includes(".xlsx")) {
-    //       let form = new FormData();
-    //       form.append("File", hostfile); //hostfile.name
-    //       form.append("ActivityId", that.companyId);
-
-    //       raiInterface.activityMeetImport(form).then((res) => {
-    //         if (res.Ret === 200) {
-    //           that.isShowImportDia = true;
-    //           that.importParams = form;
-    //           that.importData = res.Data || [];
-    //           this.$confirm("参会情况已提交成功，可点击【到会详情】查看", "提示", {
-    //             confirmButtonText: "知道了",
-    //             type: "warning",
-    //             showCancelButton: false,
-    //           });
-    //           this.getsDataList();
-    //         }
-    //         $("#fileImport").val("");
-    //         hostfile = {};
-    //       });
-    //     } else {
-    //       that.$message.error("请上传.xlsx的文件格式！");
-    //     }
-    //   }
-    // },
-    goDetail(id) {
-      let routerUrl = this.$router.resolve({
-        path: "attendMeeting",
-        query: {
-          id: id,
-        },
-      });
-      window.open(routerUrl.href, "_blank");
-    },
-    async popoverMouseenter(id) {
-      const res = await raiInterface.activityMeetHistoryList({
-        ActivityId: id,
-      });
-      if (res.Ret === 200) {
-        this.gridData = res.Data.List || [];
-      }
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .container-practical {
   .top-card-box {
@@ -500,7 +420,7 @@ export default {
   .screen-box {
     display: flex;
     justify-content: space-between;
-    .top-buttons{
+    .top-buttons {
       display: flex;
       align-items: flex-start;
     }

src/views/rai_manage/activityManage/onLineManage.vue

@@ -1,3 +1,289 @@
+<script setup>
+import { ref, watch, onMounted, reactive, computed, toRefs } from "vue";
+
+import mPage from "@/components/mPage.vue";
+import { raiInterface } from "@/api/api.js";
+import AtcParticulars from "../components/atcParticulars.vue";
+import { Loading } from "element-ui";
+import MatchingDlg from "../components/matchingDlg.vue";
+import ParticalDialog from "../components/particalDialog.vue";
+import SearchCustomerDlg from "../components/apply/searchCustomerDlg.vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+
+import { Search } from "@element-plus/icons-vue";
+
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  dataList: [], //表格的列表
+  tableDataSub: [],
+  page_no: sessionStorage.getItem("interviewListBack") ? JSON.parse(sessionStorage.getItem("interviewListBack")).page_no : 1,
+  total: 0, //条数
+  PageSize: 10, //每页显示几条
+  keyWord: "",
+  industry: "", //行业
+  cactivityTypeVal: "", //活动
+  chartPermissionList: [], //行业的数组
+  cactivityTypeList: [], //活动类型
+  issueTime: "", //时间
+  tabsPitchonType: 1,
+  detailData: {}, //
+  dialogVisible: false,
+  dialogLeparticaShow: false,
+  companyId: "", //
+  excelType: "",
+  isLimitPeople: "",
+  totalDlg: 0,
+  myTotalDlg: 0,
+  memberType: "",
+  matchingDlgShow: false, //匹配弹框
+  matchingId: "",
+  gridData: [],
+  submitDialog: false, //
+  offlineId: "",
+  dialogVisiblepartica: false, //
+  searchCustomer: false, //搜索流失客户
+  isYidongConduct: 0,
+  particlaDlg: {
+    isSpecial: false,
+    id: "",
+    title: "",
+    type: "",
+  },
+});
+
+const exportUser = computed(() => {
+  return import.meta.env.VITE_APP_API_ROOT + "/cygx/activityMeet/meetingExport?" + localStorage.getItem("auth") || "";
+});
+const isYiDongShow = computed(() => {
+  return pageState.isYidongConduct === 1 || pageState.excelType !== "CClass";
+});
+const isCClassNot = computed(() => {
+  return pageState.isYidongConduct != 1 && pageState.excelType == "CClass";
+});
+
+watch(
+  () => pageState.keyWord,
+  () => {
+    pageState.page_no = 1;
+    init();
+    getsDataList();
+  }
+);
+
+function init() {
+  pageState.industry = ""; //行业
+  pageState.issueTime = ""; //时间
+  pageState.cactivityTypeVal = ""; //活动
+}
+//获取行业
+function chartPermission() {
+  raiInterface.chartPermission().then((res) => {
+    if (res.Ret === 200) {
+      pageState.chartPermissionList = res.Data.List;
+    }
+  });
+}
+//活动类型
+function activityType() {
+  raiInterface
+    .activityTypeMeetType({
+      MeetType: 1,
+    })
+    .then((res) => {
+      if (res.Ret === 200) {
+        pageState.cactivityTypeList = res.Data.List;
+      }
+    });
+}
+//change事件
+function conditionChange() {
+  pageState.page_no = 1;
+  getsDataList();
+}
+//列表表格
+function getsDataList() {
+  raiInterface
+    .activityMeetList({
+      CurrentIndex: pageState.page_no,
+      PageSize: pageState.PageSize,
+      StartDate: pageState.issueTime[0],
+      EndDate: pageState.issueTime[1],
+      KeyWord: pageState.keyWord,
+      SearchType: pageState.tabsPitchonType,
+      ChartPermissionId: pageState.industry,
+      ActivityTypeId: pageState.cactivityTypeVal,
+      MeetType: 1,
+    })
+    .then((res) => {
+      if (res.Ret !== 200) return;
+      pageState.dataList = res.Data.List;
+      pageState.total = res.Data.Paging.Totals;
+    });
+}
+//到会详情
+function attendMeeting(item, text) {
+  if (item.SubmitMeetingType == 1 || item.YidongActivityId) {
+    pageState.offlineId = item.ActivityId;
+    pageState.particlaDlg = {
+      id: item.ActivityId,
+      title: text,
+      type: item.SubmitMeetingType,
+    };
+    pageState.dialogVisiblepartica = true;
+  } else {
+    goDetail(item.ActivityId);
+  }
+}
+//分页
+function handleCurrentChange(page) {
+  pageState.page_no = page;
+  getsDataList();
+}
+//详情弹框
+function particulars(id) {
+  raiInterface
+    .appointmentList({
+      ActivityId: id,
+    })
+    .then((res) => {
+      if (res.Ret !== 200) return;
+      pageState.excelType = res.Data.ExcelType;
+      pageState.isLimitPeople = res.Data.IsLimitPeople;
+      pageState.totalDlg = res.Data.Total;
+      pageState.myTotalDlg = res.Data.MyTotal;
+      pageState.memberType = res.Data.MemberType;
+      pageState.isYidongConduct = res.Data.IsYidongConduct;
+      $nextTick(() => {
+        pageState.tableDataSub = res.Data.List;
+      });
+    });
+  pageState.dialogLeparticaShow = true;
+}
+
+//到会情况
+function particularsSubmit(id) {
+  pageState.companyId = id;
+  $("#fileImport").click();
+}
+//点击标题的弹框
+function titleBtnClick(id) {
+  raiInterface.activityDetail({ ActivityId: Number(id) }).then((res) => {
+    if (res.Ret == 200) {
+      pageState.detailData = res.Data;
+    }
+  });
+  pageState.dialogVisible = true;
+}
+//关闭弹框
+function confirmPerson() {
+  pageState.tableDataSub = [];
+  pageState.dialogLeparticaShow = false;
+}
+//到会情况
+function arriveHandel(id) {
+  pageState.offlineId = id;
+  pageState.submitDialog = true;
+}
+// 上传
+function fileSelected(type) {
+  const that = pageState;
+  if (document.getElementById("fileImport").files[0]) {
+    let hostfile = document.getElementById("fileImport").files[0];
+    let size = Math.floor(hostfile.size / 1024 / 1024);
+    if (size > 200) {
+      that.$message.error("上传文件大小不能大于200M！");
+      hostfile = {};
+      return false;
+    }
+    if (hostfile.name.toLowerCase().includes(".xlsx")) {
+      let form = new FormData();
+      form.append("File", hostfile); //hostfile.name
+      form.append("ActivityId", that.companyId);
+
+      raiInterface.activityMeetImport(form).then((res) => {
+        if (res.Ret === 200) {
+          that.isShowImportDia = true;
+          that.importParams = form;
+          that.importData = res.Data || [];
+          ElMessageBox.confirm("参会情况已提交成功，可点击【到会详情】查看", "提示", {
+            confirmButtonText: "知道了",
+            type: "warning",
+            showCancelButton: false,
+          });
+          getsDataList();
+        }
+        $("#fileImport").val("");
+        hostfile = {};
+      });
+    } else {
+      that.$message.error("请上传.xlsx的文件格式！");
+    }
+  }
+}
+function goDetail(id) {
+  let routerUrl = $router.resolve({
+    path: "attendMeeting",
+    query: {
+      id: id,
+    },
+  });
+  window.open(routerUrl.href, "_blank");
+}
+//手动匹配
+function matching(id) {
+  pageState.matchingId = id;
+  pageState.matchingDlgShow = true;
+}
+async function popoverMouseenter(id) {
+  const res = await raiInterface.activityMeetHistoryList({
+    ActivityId: id,
+  });
+  if (res.Ret === 200) {
+    pageState.gridData = res.Data.List || [];
+  }
+}
+onMounted(() => {
+  chartPermission();
+  getsDataList();
+});
+
+const {
+  dataList, //表格的列表
+  tableDataSub,
+  page_no,
+  total, //条数
+  PageSize, //每页显示几条
+  keyWord,
+  industry, //行业
+  cactivityTypeVal, //活动
+  chartPermissionList, //行业的数组
+  cactivityTypeList, //活动类型
+  issueTime, //时间
+  tabsPitchonType,
+  detailData, //
+  dialogVisible,
+  dialogLeparticaShow,
+  companyId, //
+  excelType,
+  isLimitPeople,
+  totalDlg,
+  myTotalDlg,
+  memberType,
+  matchingDlgShow, //匹配弹框
+  matchingId,
+  gridData,
+  submitDialog, //
+  offlineId,
+  dialogVisiblepartica, //
+  searchCustomer, //搜索流失客户
+  isYidongConduct,
+  particlaDlg,
+} = toRefs(pageState);
+</script>
+
 <template>
   <!-- 实际到会管理页面 -->
   <div class="container-practical">
@@ -6,9 +292,7 @@
       <div class="top-card-box">
         <div class="tabs-box"></div>
         <div>
-          <el-input v-model="keyWord" placeholder="请输入活动名称" style="width: 521px" clearable>
-            <i slot="prefix" class="el-input__icon el-icon-search"></i>
-          </el-input>
+          <el-input v-model="keyWord" placeholder="请输入活动名称" style="width: 521px" clearable :prefix-icon="Search"> </el-input>
         </div>
       </div>
     </el-card>
@@ -18,27 +302,10 @@
       <div class="screen-box">
         <div>
           <el-select placeholder="行业" clearable v-model="industry" @change="conditionChange" style="margin-bottom: 20px">
-            <el-option
-              v-for="item in chartPermissionList"
-              :label="item.PermissionName"
-              :key="item.ChartPermissionId"
-              :value="item.ChartPermissionId"
-            ></el-option>
+            <el-option v-for="item in chartPermissionList" :label="item.PermissionName" :key="item.ChartPermissionId" :value="item.ChartPermissionId"></el-option>
           </el-select>
-          <el-select
-            placeholder="活动类型"
-            clearable
-            @focus="activityType"
-            v-model="cactivityTypeVal"
-            @change="conditionChange"
-            style="margin-bottom: 20px"
-          >
-            <el-option
-              v-for="item in cactivityTypeList"
-              :label="item.ActivityTypeName"
-              :key="item.ActivityTypeId"
-              :value="item.ActivityTypeId"
-            ></el-option>
+          <el-select placeholder="活动类型" clearable @focus="activityType" v-model="cactivityTypeVal" @change="conditionChange" style="margin-bottom: 20px">
+            <el-option v-for="item in cactivityTypeList" :label="item.ActivityTypeName" :key="item.ActivityTypeId" :value="item.ActivityTypeId"></el-option>
           </el-select>
           <date-picker v-model="issueTime" type="date" range placeholder="活动时间" value-type="format" @change="conditionChange"> </date-picker>
         </div>
@@ -50,7 +317,7 @@
       <!-- 表格部分 -->
       <el-table :data="dataList" style="width: 100%; margin-top: 20px" border="">
         <el-table-column min-width="400" align="center" label="活动名称">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span class="editsty" @click="titleBtnClick(scope.row.ActivityId)"> {{ scope.row.ActivityName }}</span>
           </template>
         </el-table-column>
@@ -58,14 +325,14 @@
         <el-table-column min-width="120" prop="ActivityTypeName" align="center" label="活动类型"></el-table-column>
         <el-table-column min-width="219" prop="ActivityTimeText" align="center" label="活动时间"></el-table-column>
         <el-table-column prop="" align="center" label="报名人数">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span class="editsty" @click="particulars(scope.row.ActivityId)">{{ scope.row.SignupPeopleNum }}</span>
           </template>
         </el-table-column>
         <el-table-column min-width="105" prop="MeetPeopleNum" align="center" label="实际参会人数"></el-table-column>
         <el-table-column min-width="105" prop="UpdateTime" align="center" label="数据更新时间"></el-table-column>
         <el-table-column min-width="115" align="center" label="操作">
-          <template slot-scope="scope">
+          <template #default="scope">
             <input type="file" size="small" name="file" @change="fileSelected()" id="fileImport" class="true-file" style="display: none" />
             <p class="editsty" v-if="scope.row.IsShowHandMovement" @click="matching(scope.row.ActivityId)">&nbsp;&nbsp;手动匹配</p>
             <!-- <span class="editsty" v-if="scope.row.IsYidongConduct === 1" @click="particularsSubmit(scope.row.ActivityId)"
@@ -80,15 +347,13 @@
                 <el-table-column align="center" property="RealName" label="浏览人"></el-table-column>
                 <el-table-column align="center" property="CreateTime" label="浏览时间"></el-table-column>
                 <el-table-column align="center" property="StopTime" label="停留时长">
-                  <template slot-scope="{ row }">
+                  <template #default="{ row }">
                     {{ row.StopTime }}
                     <span v-if="row.StopTime">s</span>
                   </template>
                 </el-table-column>
               </el-table>
-              <p slot="reference" class="editsty" @mouseenter="popoverMouseenter(scope.row.ActivityId)" @click="goDetail(scope.row.ActivityId)">
-                &nbsp;&nbsp;到会详情
-              </p>
+              <p class="editsty" @mouseenter="popoverMouseenter(scope.row.ActivityId)" @click="goDetail(scope.row.ActivityId)">&nbsp;&nbsp;到会详情</p>
             </el-popover>
           </template>
         </el-table-column>
@@ -98,31 +363,21 @@
       </el-col>
     </el-card>
     <!-- 详情弹框 -->
-    <atc-particulars :dialogVisible.sync="dialogVisible" :detailData.sync="detailData" />
-    <el-dialog
-      v-dialogDrag
-      :close-on-click-modal="false"
-      :modal-append-to-body="false"
-      center
-      :visible.sync="dialogLeparticaShow"
-      customClass="custom-applydialog"
-      :before-close="confirmPerson"
-    >
-      <div slot="title" style="display: flex; align-items: center">
-        <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
-        <span style="font-size: 16px">
-          {{ excelType == "Teleconference" && isLimitPeople == 1 ? "预约外呼详情" : "报名详情" }}
-        </span>
-      </div>
+    <atc-particulars v-model:dialogVisible="dialogVisible" v-model:detailData="detailData" />
+    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center v-model="dialogLeparticaShow" customClass="custom-applydialog" :before-close="confirmPerson">
+      <template #header>
+        <div style="display: flex; align-items: center">
+          <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
+          <span style="font-size: 16px">
+            {{ excelType == "Teleconference" && isLimitPeople == 1 ? "预约外呼详情" : "报名详情" }}
+          </span>
+        </div>
+      </template>
       <div>
         <p style="margin-bottom: 10px" v-if="isYiDongShow">
           <template v-if="memberType == 'Admin'"> 共有{{ totalDlg }}人{{ excelType == "AppointmentCall" ? "预约外呼" : "报名" }} </template>
-          <template v-else-if="memberType == 'Sale'">
-            共有{{ totalDlg }}人{{ excelType == "AppointmentCall" ? "预约外呼" : "报名" }}，其中本人名下客户{{ myTotalDlg }}人
-          </template>
-          <template v-else>
-            共有{{ totalDlg }}人{{ excelType == "AppointmentCall" ? "预约外呼" : "报名" }}，其中本组名下客户{{ myTotalDlg }}人
-          </template>
+          <template v-else-if="memberType == 'Sale'"> 共有{{ totalDlg }}人{{ excelType == "AppointmentCall" ? "预约外呼" : "报名" }}，其中本人名下客户{{ myTotalDlg }}人 </template>
+          <template v-else> 共有{{ totalDlg }}人{{ excelType == "AppointmentCall" ? "预约外呼" : "报名" }}，其中本组名下客户{{ myTotalDlg }}人 </template>
         </p>
         <p style="margin-bottom: 10px" v-else>
           <template v-if="memberType == 'Admin'"> 共有{{ totalDlg }}人报名</template>
@@ -130,18 +385,11 @@
         <el-table max-height="260px" :data="tableDataSub" border style="width: 100%">
           <el-table-column width="130" align="center" prop="RealName" key="name" label="姓名"></el-table-column>
           <el-table-column width="150" align="center" prop="Mobile" key="mobile" label="手机号" v-if="isYiDongShow"></el-table-column>
-          <el-table-column
-            width="150"
-            align="center"
-            prop="OutboundMobile"
-            key="outboundMobile"
-            label="外呼号码"
-            v-if="isYiDongShow"
-          ></el-table-column>
+          <el-table-column width="150" align="center" prop="OutboundMobile" key="outboundMobile" label="外呼号码" v-if="isYiDongShow"></el-table-column>
           <el-table-column align="center" prop="CompanyName" key="company" label="公司名称" v-if="isCClassNot"></el-table-column>
           <el-table-column width="150" align="center" prop="SellerName" key="seller" label="所属销售"></el-table-column>
           <el-table-column min-width="110" key="meeting" align="center" label="参会方式" v-if="isYiDongShow">
-            <template slot-scope="{ row }">
+            <template #default="{ row }">
               <span>
                 {{ row.SignupType == 1 ? "预约外呼" : row.SignupType == 2 ? "自主拨入" : row.SignupType == 4 ? "自主入会" : "" }}
               </span>
@@ -149,297 +397,18 @@
           </el-table-column>
         </el-table>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="confirmPerson">知道了</el-button>
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="confirmPerson">知道了</el-button>
+        </span>
+      </template>
     </el-dialog>
-    <matching-dlg :matchingDlgShow.sync="matchingDlgShow" :matchingId="matchingId" />
-    <partical-dialog
-      :offlineId="offlineId"
-      :submitDialog.sync="submitDialog"
-      :dialogVisiblepartica.sync="dialogVisiblepartica"
-      :particlaDlg="particlaDlg"
-    />
-    <search-customer-dlg :searchCustomer.sync="searchCustomer" />
+    <matching-dlg v-model:matchingDlgShow="matchingDlgShow" :matchingId="matchingId" @getsDataList="getsDataList" />
+    <partical-dialog @getsDataList="getsDataList" @particulars="particulars" :offlineId="offlineId" v-model:submitDialog="submitDialog" v-model:dialogVisiblepartica="dialogVisiblepartica" :particlaDlg="particlaDlg" />
+    <search-customer-dlg v-model:searchCustomer="searchCustomer" />
   </div>
 </template>
 
-<script>
-import mPage from "@/components/mPage.vue";
-import { raiInterface } from "@/api/api.js";
-import AtcParticulars from "../components/atcParticulars.vue";
-import { Loading } from "element-ui";
-import MatchingDlg from "../components/matchingDlg.vue";
-import ParticalDialog from "../components/particalDialog.vue";
-import SearchCustomerDlg from "../components/apply/searchCustomerDlg.vue";
-
-export default {
-  name: "",
-  components: { mPage, AtcParticulars, MatchingDlg, ParticalDialog, SearchCustomerDlg },
-  props: {},
-  data() {
-    return {
-      dataList: [], //表格的列表
-      tableDataSub: [],
-      page_no: sessionStorage.getItem("interviewListBack") ? JSON.parse(sessionStorage.getItem("interviewListBack")).page_no : 1,
-      total: 0, //条数
-      PageSize: 10, //每页显示几条
-      keyWord: "",
-      industry: "", //行业
-      cactivityTypeVal: "", //活动
-      chartPermissionList: [], //行业的数组
-      cactivityTypeList: [], //活动类型
-      issueTime: "", //时间
-      tabsPitchonType: 1,
-      detailData: {}, //
-      dialogVisible: false,
-      dialogLeparticaShow: false,
-      companyId: "", //
-      excelType: "",
-      isLimitPeople: "",
-      totalDlg: 0,
-      myTotalDlg: 0,
-      memberType: "",
-      matchingDlgShow: false, //匹配弹框
-      matchingId: "",
-      gridData: [],
-      submitDialog: false, //
-      offlineId: "",
-      dialogVisiblepartica: false, //
-      searchCustomer: false, //搜索流失客户
-      isYidongConduct: 0,
-      particlaDlg: {
-        isSpecial: false,
-        id: "",
-        title: "",
-        type: "",
-      },
-    };
-  },
-  computed: {
-    exportUser() {
-      return import.meta.env.VITE_APP_API_ROOT + "/cygx/activityMeet/meetingExport?" + localStorage.getItem("auth") || "";
-    },
-    isYiDongShow() {
-      return this.isYidongConduct === 1 || this.excelType !== "CClass";
-    },
-    isCClassNot() {
-      return this.isYidongConduct != 1 && this.excelType == "CClass";
-    },
-  },
-  watch: {
-    keyWord() {
-      this.page_no = 1;
-      this.init();
-      this.getsDataList();
-    },
-  },
-  created() {},
-  mounted() {
-    this.chartPermission();
-    this.getsDataList();
-  },
-  methods: {
-    init() {
-      this.industry = ""; //行业
-      this.issueTime = ""; //时间
-      this.cactivityTypeVal = ""; //活动
-    },
-    //获取行业
-    chartPermission() {
-      raiInterface.chartPermission().then((res) => {
-        if (res.Ret === 200) {
-          this.chartPermissionList = res.Data.List;
-        }
-      });
-    },
-    //活动类型
-    activityType() {
-      raiInterface
-        .activityTypeMeetType({
-          MeetType: 1,
-        })
-        .then((res) => {
-          if (res.Ret === 200) {
-            this.cactivityTypeList = res.Data.List;
-          }
-        });
-    },
-    //change事件
-    conditionChange() {
-      this.page_no = 1;
-      this.getsDataList();
-    },
-    //列表表格
-    getsDataList() {
-      raiInterface
-        .activityMeetList({
-          CurrentIndex: this.page_no,
-          PageSize: this.PageSize,
-          StartDate: this.issueTime[0],
-          EndDate: this.issueTime[1],
-          KeyWord: this.keyWord,
-          SearchType: this.tabsPitchonType,
-          ChartPermissionId: this.industry,
-          ActivityTypeId: this.cactivityTypeVal,
-          MeetType: 1,
-        })
-        .then((res) => {
-          if (res.Ret !== 200) return;
-          this.dataList = res.Data.List;
-          this.total = res.Data.Paging.Totals;
-        });
-    },
-    //到会详情
-    attendMeeting(item, text) {
-      if (item.SubmitMeetingType == 1 || item.YidongActivityId) {
-        this.offlineId = item.ActivityId;
-        this.particlaDlg = {
-          id: item.ActivityId,
-          title: text,
-          type: item.SubmitMeetingType,
-        };
-        this.dialogVisiblepartica = true;
-      } else {
-        this.goDetail(item.ActivityId);
-      }
-    },
-    //分页
-    handleCurrentChange(page) {
-      this.page_no = page;
-      this.getsDataList();
-    },
-    //详情弹框
-    particulars(id) {
-      raiInterface
-        .appointmentList({
-          ActivityId: id,
-        })
-        .then((res) => {
-          if (res.Ret !== 200) return;
-          this.excelType = res.Data.ExcelType;
-          this.isLimitPeople = res.Data.IsLimitPeople;
-          this.totalDlg = res.Data.Total;
-          this.myTotalDlg = res.Data.MyTotal;
-          this.memberType = res.Data.MemberType;
-          this.isYidongConduct = res.Data.IsYidongConduct;
-          this.$nextTick(() => {
-            this.tableDataSub = res.Data.List;
-          });
-        });
-      this.dialogLeparticaShow = true;
-    },
-    // meetingExport() {
-    //   const loading = this.$loading({
-    //     lock: true,
-    //     text: "客户参会详情文件下载中...",
-    //     spinner: "el-icon-loading",
-    //     background: "rgba(0, 0, 0, 0.7)",
-    //   });
-    //   const xhr = new XMLHttpRequest();
-    //   xhr.open("GET", this.exportUser, true);
-    //   xhr.responseType = "blob";
-    //   xhr.onload = function () {
-    //     if (this.status == 200) {
-    //       loading.close();
-    //       var blob = this.response;
-    //       var a = document.createElement("a");
-    //       var url = window.URL.createObjectURL(blob); //创建url对象
-    //       a.href = url;
-    //       a.download = "客户参会详情.xlsx";
-    //       a.click();
-    //       window.URL.revokeObjectURL(url); //释放url对象
-    //     } else {
-    //       this.$message.error("下载失败！");
-    //     }
-    //   };
-    //   xhr.send();
-    // },
-    //到会情况
-    particularsSubmit(id) {
-      this.companyId = id;
-      $("#fileImport").click();
-    },
-    //点击标题的弹框
-    titleBtnClick(id) {
-      raiInterface.activityDetail({ ActivityId: Number(id) }).then((res) => {
-        if (res.Ret == 200) {
-          this.detailData = res.Data;
-        }
-      });
-      this.dialogVisible = true;
-    },
-    //关闭弹框
-    confirmPerson() {
-      this.tableDataSub = [];
-      this.dialogLeparticaShow = false;
-    },
-    //到会情况
-    arriveHandel(id) {
-      this.offlineId = id;
-      this.submitDialog = true;
-    },
-    // 上传
-    fileSelected(type) {
-      const that = this;
-      if (document.getElementById("fileImport").files[0]) {
-        let hostfile = document.getElementById("fileImport").files[0];
-        let size = Math.floor(hostfile.size / 1024 / 1024);
-        if (size > 200) {
-          that.$message.error("上传文件大小不能大于200M！");
-          hostfile = {};
-          return false;
-        }
-        if (hostfile.name.toLowerCase().includes(".xlsx")) {
-          let form = new FormData();
-          form.append("File", hostfile); //hostfile.name
-          form.append("ActivityId", that.companyId);
-
-          raiInterface.activityMeetImport(form).then((res) => {
-            if (res.Ret === 200) {
-              that.isShowImportDia = true;
-              that.importParams = form;
-              that.importData = res.Data || [];
-              this.$confirm("参会情况已提交成功，可点击【到会详情】查看", "提示", {
-                confirmButtonText: "知道了",
-                type: "warning",
-                showCancelButton: false,
-              });
-              this.getsDataList();
-            }
-            $("#fileImport").val("");
-            hostfile = {};
-          });
-        } else {
-          that.$message.error("请上传.xlsx的文件格式！");
-        }
-      }
-    },
-    goDetail(id) {
-      let routerUrl = this.$router.resolve({
-        path: "attendMeeting",
-        query: {
-          id: id,
-        },
-      });
-      window.open(routerUrl.href, "_blank");
-    },
-    //手动匹配
-    matching(id) {
-      this.matchingId = id;
-      this.matchingDlgShow = true;
-    },
-    async popoverMouseenter(id) {
-      const res = await raiInterface.activityMeetHistoryList({
-        ActivityId: id,
-      });
-      if (res.Ret === 200) {
-        this.gridData = res.Data.List || [];
-      }
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .container-practical {
   .top-card-box {

src/views/rai_manage/activityManage/practicalMeeting.vue

@@ -1,3 +1,167 @@
+<script setup>
+import { ref, watch, onMounted, reactive, computed, toRefs } from "vue";
+
+import mPage from "@/components/mPage.vue";
+import { raiInterface } from "@/api/api.js";
+import AtcParticulars from "../components/atcParticulars.vue";
+import ParticalDialog from "../components/particalDialog.vue";
+
+import { ElMessageBox, ElMessage, ElLoading } from "element-plus";
+
+import { Search } from "@element-plus/icons-vue";
+
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  dataList: [], //表格的列表
+  page_no: sessionStorage.getItem("interviewListBack") ? JSON.parse(sessionStorage.getItem("interviewListBack")).page_no : 1,
+  total: 0, //条数
+  PageSize: 10, //每页显示几条
+  keyWord: "",
+  dialogVisiblepartica: false, //详情弹框
+  particlaDlg: {
+    isSpecial: false,
+    id: "",
+    title: "",
+  },
+  submitDialog: false,
+  industry: "", //行业
+  cactivityTypeVal: "", //活动
+  chartPermissionList: [], //行业的数组
+  cactivityTypeList: [], //活动类型
+  issueTime: "", //时间
+  tabsPitchonType: 1,
+  detailData: {}, //
+  dialogVisible: false,
+  offlineId: "",
+});
+
+const exportUser = computed(() => {
+  return import.meta.env.VITE_APP_API_ROOT + "/cygx/activityMeet/meetingExport?" + localStorage.getItem("auth") || "";
+});
+
+watch(
+  () => pageState.keyWord,
+  () => {
+    pageState.page_no = 1;
+    init();
+    getsDataList();
+  }
+);
+
+onMounted(() => {
+  chartPermission();
+  getsDataList();
+});
+
+function init() {
+  pageState.industry = ""; //行业
+  pageState.issueTime = ""; //时间
+  pageState.cactivityTypeVal = ""; //活动
+}
+function meetingExport() {
+  const loading = ElLoading.service({
+    lock: true,
+    text: "客户参会详情文件下载中...",
+    spinner: "el-icon-loading",
+    background: "rgba(0, 0, 0, 0.7)",
+  });
+  const xhr = new XMLHttpRequest();
+  xhr.open("GET", pageState.exportUser, true);
+  xhr.responseType = "blob";
+  xhr.onload = function () {
+    if (pageState.status == 200) {
+      loading.close();
+      var blob = pageState.response;
+      var a = document.createElement("a");
+      var url = window.URL.createObjectURL(blob); //创建url对象
+      a.href = url;
+      a.download = "客户参会详情.xlsx";
+      a.click();
+      window.URL.revokeObjectURL(url); //释放url对象
+    } else {
+      ElMessage.error("下载失败！");
+    }
+  };
+  xhr.send();
+}
+//获取行业
+function chartPermission() {
+  raiInterface.chartPermission().then((res) => {
+    if (res.Ret === 200) {
+      pageState.chartPermissionList = res.Data.List;
+    }
+  });
+}
+//活动类型
+function activityType() {
+  raiInterface
+    .activityTypeMeetType({
+      MeetType: 2,
+    })
+    .then((res) => {
+      if (res.Ret === 200) {
+        pageState.cactivityTypeList = res.Data.List;
+      }
+    });
+}
+//change事件
+function conditionChange() {
+  pageState.page_no = 1;
+  getsDataList();
+}
+//列表表格
+function getsDataList() {
+  raiInterface
+    .activityMeetList({
+      CurrentIndex: pageState.page_no,
+      PageSize: pageState.PageSize,
+      StartDate: pageState.issueTime[0],
+      EndDate: pageState.issueTime[1],
+      KeyWord: pageState.keyWord,
+      SearchType: pageState.tabsPitchonType,
+      ChartPermissionId: pageState.industry,
+      ActivityTypeId: pageState.cactivityTypeVal,
+      MeetType: 2,
+    })
+    .then((res) => {
+      if (res.Ret !== 200) return;
+      pageState.dataList = res.Data.List;
+      pageState.total = res.Data.Paging.Totals;
+    });
+}
+//分页
+function handleCurrentChange(page) {
+  pageState.page_no = page;
+  getsDataList();
+}
+//详情弹框
+function particulars(id, text) {
+  pageState.offlineId = id;
+  pageState.particlaDlg = {
+    id: id,
+    title: text,
+  };
+  pageState.dialogVisiblepartica = true;
+}
+//到会情况
+function particularsSubmit(id) {
+  pageState.offlineId = id;
+  pageState.submitDialog = true;
+}
+//点击标题的弹框
+function titleBtnClick(id) {
+  raiInterface.activityDetail({ ActivityId: Number(id) }).then((res) => {
+    if (res.Ret == 200) {
+      pageState.detailData = res.Data;
+    }
+  });
+  pageState.dialogVisible = true;
+}
+</script>
+
 <template>
   <!-- 实际到会管理页面 -->
   <div class="container-practical">
@@ -6,9 +170,7 @@
       <div class="top-card-box">
         <div class="tabs-box"></div>
         <div>
-          <el-input v-model="keyWord" placeholder="请输入活动名称" style="width: 521px" clearable>
-            <i slot="prefix" class="el-input__icon el-icon-search"></i>
-          </el-input>
+          <el-input v-model="keyWord" placeholder="请输入活动名称" style="width: 521px" clearable :prefix-icon="Search"> </el-input>
         </div>
       </div>
     </el-card>
@@ -18,27 +180,10 @@
       <div class="screen-box">
         <div>
           <el-select placeholder="行业" clearable v-model="industry" @change="conditionChange" style="margin-bottom: 20px">
-            <el-option
-              v-for="item in chartPermissionList"
-              :label="item.PermissionName"
-              :key="item.ChartPermissionId"
-              :value="item.ChartPermissionId"
-            ></el-option>
+            <el-option v-for="item in chartPermissionList" :label="item.PermissionName" :key="item.ChartPermissionId" :value="item.ChartPermissionId"></el-option>
           </el-select>
-          <el-select
-            placeholder="活动类型"
-            clearable
-            @focus="activityType"
-            v-model="cactivityTypeVal"
-            @change="conditionChange"
-            style="margin-bottom: 20px"
-          >
-            <el-option
-              v-for="item in cactivityTypeList"
-              :label="item.ActivityTypeName"
-              :key="item.ActivityTypeId"
-              :value="item.ActivityTypeId"
-            ></el-option>
+          <el-select placeholder="活动类型" clearable @focus="activityType" v-model="cactivityTypeVal" @change="conditionChange" style="margin-bottom: 20px">
+            <el-option v-for="item in cactivityTypeList" :label="item.ActivityTypeName" :key="item.ActivityTypeId" :value="item.ActivityTypeId"></el-option>
           </el-select>
           <date-picker v-model="issueTime" type="date" range placeholder="活动时间" value-type="format" @change="conditionChange"> </date-picker>
         </div>
@@ -52,7 +197,7 @@
       <!-- 表格部分 -->
       <el-table :data="dataList" style="width: 100%; margin-top: 20px" border="">
         <el-table-column min-width="350" align="center" label="活动名称">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span class="editsty" @click="titleBtnClick(scope.row.ActivityId)"> {{ scope.row.ActivityName }}</span>
           </template>
         </el-table-column>
@@ -60,25 +205,18 @@
         <el-table-column min-width="120" prop="ActivityTypeName" align="center" label="活动类型"></el-table-column>
         <el-table-column min-width="219" prop="ActivityTimeText" align="center" label="活动时间"></el-table-column>
         <el-table-column prop="" align="center" label="报名人数">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span class="editsty" @click="particulars(scope.row.ActivityId, '报名详情')">{{ scope.row.SignupPeopleNum }}</span>
           </template>
         </el-table-column>
         <el-table-column min-width="105" prop="MeetPeopleNum" align="center" label="实际参会人数"></el-table-column>
         <el-table-column min-width="200" align="center" label="操作">
-          <template slot-scope="scope">
-            <span v-if="scope.row.OperationStyle == 1" class="editsty" @click="particularsSubmit(scope.row.ActivityId)"
-              >&nbsp;&nbsp;提交到会情况</span
-            >
+          <template #default="scope">
+            <span v-if="scope.row.OperationStyle == 1" class="editsty" @click="particularsSubmit(scope.row.ActivityId)">&nbsp;&nbsp;提交到会情况</span>
 
-            <span class="editsty" v-if="scope.row.OperationStyle == 2" @click="particularsSubmit(scope.row.ActivityId)"
-              >&nbsp;&nbsp;修改到会情况</span
-            >
+            <span class="editsty" v-if="scope.row.OperationStyle == 2" @click="particularsSubmit(scope.row.ActivityId)">&nbsp;&nbsp;修改到会情况</span>
 
-            <span class="editsty" v-if="scope.row.OperationStyle == 2" @click="particulars(scope.row.ActivityId, '到会详情')"
-              >&nbsp;&nbsp;到会详情</span
-            >
-           
+            <span class="editsty" v-if="scope.row.OperationStyle == 2" @click="particulars(scope.row.ActivityId, '到会详情')">&nbsp;&nbsp;到会详情</span>
           </template>
         </el-table-column>
       </el-table>
@@ -88,180 +226,11 @@
     </el-card>
 
     <!-- 详情弹框 -->
-    <atc-particulars :dialogVisible.sync="dialogVisible" :detailData.sync="detailData" />
-    <partical-dialog
-      type="线下到会"
-      :offlineId="offlineId"
-      :dialogVisiblepartica.sync="dialogVisiblepartica"
-      :particlaDlg="particlaDlg"
-      :submitDialog.sync="submitDialog"
-    />
+    <atc-particulars v-model:dialogVisible="dialogVisible" v-model:detailData="detailData" />
+    <partical-dialog  @getsDataList="getsDataList" @particulars="particulars" type="线下到会" :offlineId="offlineId" v-model:dialogVisibleparticav-model="dialogVisiblepartica" :particlaDlg="particlaDlg" v-model:submitDialog="submitDialog" />
   </div>
 </template>
 
-<script>
-import mPage from "@/components/mPage.vue";
-import { raiInterface } from "@/api/api.js";
-import AtcParticulars from "../components/atcParticulars.vue";
-import ParticalDialog from "../components/particalDialog.vue";
-export default {
-  name: "",
-  components: { mPage, ParticalDialog, AtcParticulars },
-  props: {},
-  data() {
-    return {
-      dataList: [], //表格的列表
-      page_no: sessionStorage.getItem("interviewListBack") ? JSON.parse(sessionStorage.getItem("interviewListBack")).page_no : 1,
-      total: 0, //条数
-      PageSize: 10, //每页显示几条
-      keyWord: "",
-      dialogVisiblepartica: false, //详情弹框
-      particlaDlg: {
-        isSpecial: false,
-        id: "",
-        title: "",
-      },
-      submitDialog: false,
-      industry: "", //行业
-      cactivityTypeVal: "", //活动
-      chartPermissionList: [], //行业的数组
-      cactivityTypeList: [], //活动类型
-      issueTime: "", //时间
-      tabsPitchonType: 1,
-      detailData: {}, //
-      dialogVisible: false,
-      offlineId: "",
-    };
-  },
-  computed: {
-    exportUser() {
-      return import.meta.env.VITE_APP_API_ROOT + "/cygx/activityMeet/meetingExport?" + localStorage.getItem("auth") || "";
-    },
-  },
-  watch: {
-    keyWord() {
-      this.page_no = 1;
-      this.init();
-      this.getsDataList();
-    },
-  },
-  created() {},
-  mounted() {
-    this.chartPermission();
-    this.getsDataList();
-  },
-  methods: {
-    init() {
-      this.industry = ""; //行业
-      this.issueTime = ""; //时间
-      this.cactivityTypeVal = ""; //活动
-    },
-    meetingExport() {
-      const loading = this.$loading({
-        lock: true,
-        text: "客户参会详情文件下载中...",
-        spinner: "el-icon-loading",
-        background: "rgba(0, 0, 0, 0.7)",
-      });
-      const xhr = new XMLHttpRequest();
-      xhr.open("GET", this.exportUser, true);
-      xhr.responseType = "blob";
-      xhr.onload = function () {
-        if (this.status == 200) {
-          loading.close();
-          //var _b = xhr.getResponseHeader('Content-Disposition');
-          //var _c = _b.split('filename=')[1];
-          //var _d = decodeURIComponent(_c.split('.')[0])+'.'+_c.split('.')[1];
-          var blob = this.response;
-          var a = document.createElement("a");
-          var url = window.URL.createObjectURL(blob); //创建url对象
-          a.href = url;
-          // a.download = _d;
-          a.download = "客户参会详情.xlsx";
-          a.click();
-          window.URL.revokeObjectURL(url); //释放url对象
-        } else {
-          this.$message.error("下载失败！");
-        }
-      };
-      xhr.send();
-    },
-    //获取行业
-    chartPermission() {
-      raiInterface.chartPermission().then((res) => {
-        if (res.Ret === 200) {
-          this.chartPermissionList = res.Data.List;
-        }
-      });
-    },
-    //活动类型
-    activityType() {
-      raiInterface
-        .activityTypeMeetType({
-          MeetType: 2,
-        })
-        .then((res) => {
-          if (res.Ret === 200) {
-            this.cactivityTypeList = res.Data.List;
-          }
-        });
-    },
-    //change事件
-    conditionChange() {
-      this.page_no = 1;
-      this.getsDataList();
-    },
-    //列表表格
-    getsDataList() {
-      raiInterface
-        .activityMeetList({
-          CurrentIndex: this.page_no,
-          PageSize: this.PageSize,
-          StartDate: this.issueTime[0],
-          EndDate: this.issueTime[1],
-          KeyWord: this.keyWord,
-          SearchType: this.tabsPitchonType,
-          ChartPermissionId: this.industry,
-          ActivityTypeId: this.cactivityTypeVal,
-          MeetType: 2,
-        })
-        .then((res) => {
-          if (res.Ret !== 200) return;
-          this.dataList = res.Data.List;
-          this.total = res.Data.Paging.Totals;
-        });
-    },
-    //分页
-    handleCurrentChange(page) {
-      this.page_no = page;
-      this.getsDataList();
-    },
-    //详情弹框
-    particulars(id, text) {
-      this.offlineId = id;
-      this.particlaDlg = {
-        id: id,
-        title: text,
-      };
-      this.dialogVisiblepartica = true;
-    },
-    //到会情况
-    particularsSubmit(id) {
-      this.offlineId = id;
-      this.submitDialog = true;
-    },
-    //点击标题的弹框
-    titleBtnClick(id) {
-      raiInterface.activityDetail({ ActivityId: Number(id) }).then((res) => {
-        if (res.Ret == 200) {
-          this.detailData = res.Data;
-        }
-      });
-      this.dialogVisible = true;
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .container-practical {
   .top-card-box {

src/views/rai_manage/activityManage/roadShow/components/addVideoDlg.vue

@@ -1,13 +1,268 @@
+<script setup>
+import { ref, onMounted, watch } from "vue";
+
+import { raiInterface, raiVideoApi, getOSSSign } from "@/api/api.js";
+
+import { ElMessageBox, ElMessage, ElLoading } from "element-plus";
+
+import MD5 from "js-md5";
+
+
+const props = defineProps({
+  addEditdialogVisib: {
+    type: Boolean,
+    default: false,
+  },
+  chartPermissionList: {
+    type: Array,
+    default: [],
+  },
+  playDetailsList: {
+    default: {},
+    type: Object,
+  },
+});
+
+const addEditVideo = ref({
+  videoName: "", //音频名称
+  industryId: "", //行业id
+  property: "", //产业名称
+  publishDate: "", //发布时间
+  videoUrl: "", //视频链接
+  VideoSeconds: "", //时长
+  imgUrl: "", // 视频封面
+  shareImgUrl: "", // 分享的视频封面
+  detailImgUrl: "", // 详情的视频封面
+});
+const rules = ref({
+  videoName: [{ required: true, message: "请上传视频", trigger: "blur" }],
+  industryId: [{ required: true, message: "请选择行业", trigger: "change" }],
+  property: { required: true, message: "请选择产业", trigger: "change" },
+  publishDate: [{ required: true, message: "请选择发布时间", trigger: "change" }],
+  imgUrl: { required: true, message: "请选择列表页封面", trigger: "change" },
+  shareImgUrl: { required: true, message: "请选择视频分享图", trigger: "change" },
+  detailImgUrl: { required: true, message: "请选择详情页封面", trigger: "change" },
+});
+const videoId = ref(0);
+const publishStatus = ref(0);
+const industryArr = ref([]);
+const selectedIndustryArr = ref([]);
+const defaultProps = ref({
+  label: "PermissionName",
+  children: "List",
+  value: "ChartPermissionId",
+});
+const percentage = ref(0);
+const startUpload = ref(false); //开始上传
+
+watch(
+  () => props.playDetailsList,
+  async (newval) => {
+    if (JSON.stringify(newval) != "{}") {
+      await getIndustry(newval.ChartPermissionId);
+      console.log(newval);
+      addEditVideo.value = {
+        videoName: newval.VideoName, //音频名称
+        industryId: newval.ChartPermissionId, //行业id
+        property: newval.IndustryId || "", //产业名称
+        publishDate: newval.PublishDate, //发布时间
+        videoUrl: newval.VideoUrl, //视频链接
+        VideoSeconds: newval.VideoDuration, //时长
+        imgUrl: newval.ImgUrl, // 视频封面
+        shareImgUrl: newval.ShareImgUrl, // 分享的视频封面
+        detailImgUrl: newval.DetailImgUrl,
+      };
+      videoId.value = newval.VideoId;
+      publishStatus.value = newval.PublishStatus;
+    } else {
+      videoId.value = 0;
+      selectedIndustryArr.value = [];
+      publishStatus.value = 0;
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
+/* 获取全部的行业 前的判断 */
+function industrySelectFocus() {
+  if (!addEditVideo.value.industryId) {
+    ElMessage.error("请先选择行业");
+  }
+}
+// 行业更改
+function selectChangeHandle(value) {
+  addEditVideo.value.property = "";
+  value ? getIndustry(value) : (selectedIndustryArr.value = []);
+}
+/* 获取选择的行业 */
+function getIndustry(industryId) {
+  if (industryArr.value.length) {
+    selectedIndustryArr.value = industryArr.value.filter((item) => item.ChartPermissionId == industryId)[0].List;
+    return;
+  }
+  raiInterface.getListIndustrial().then((res) => {
+    if (res.Ret === 200) {
+      industryArr.value = res.Data.List || [];
+      selectedIndustryArr.value = industryArr.value.filter((item) => item.ChartPermissionId == industryId)[0].List;
+    }
+  });
+}
+//获取视频时长的promise
+function handleGetDuration(file) {
+  return new Promise((resolve, reject) => {
+    const fileUrl = URL.createObjectURL(file);
+    const audioEl = new Audio(fileUrl);
+    audioEl.addEventListener("loadedmetadata", (e) => {
+      resolve(audioEl.duration);
+    });
+  });
+}
+
+//上传视频判断格式
+function handelBeforeUploadVideo(e) {
+  if (e.type != "video/mp4") {
+    ElMessage.warning("上传失败，上传视频格式不正确");
+    return false;
+  }
+}
+
+// 上传视频
+async function handleUpload(e) {
+  const duration = await handleGetDuration(e.file);
+  addEditVideo.value.videoName = e.file.name;
+  addEditVideo.value.VideoSeconds = duration + ""; //时常
+  const res = await getOSSSign();
+  if (res.Ret === 200) {
+    let accessKeyId = res.Data.AccessKeyId;
+    let accessKeySecret = res.Data.AccessKeySecret;
+    let stsToken = res.Data.SecurityToken;
+    handleUploadToOSS(e.file, accessKeyId, accessKeySecret, stsToken);
+  }
+}
+//上传到阿里云
+async function handleUploadToOSS(file, accessKeyId, accessKeySecret, stsToken) {
+  startUpload.value = true;
+  const ALOSSINS = new OSS({
+    // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
+    region: "oss-cn-shanghai",
+    // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
+    accessKeyId: accessKeyId,
+    accessKeySecret: accessKeySecret,
+    // 从STS服务获取的安全令牌（SecurityToken）。
+    stsToken: stsToken,
+    // 填写Bucket名称，例如examplebucket。
+    bucket: "hzchart",
+    endpoint: "hzstatic.hzinsights.com",
+    cname: true,
+    timeout: 600000,
+  });
+  // 生成文件名
+  const t = new Date().getTime().toString();
+  const temName = `static/yb/video/${MD5(t)}.${file.name.split(".")[1]}`;
+
+  const options = {
+    // 获取分片上传进度、断点和返回值。
+    progress: (p, cpt, res) => {
+      percentage.value = parseInt(p * 100);
+    },
+    // 设置并发上传的分片数量。
+    parallel: 10,
+    // 设置分片大小。默认值为1 MB，最小值为100 KB。
+    partSize: 1024 * 1024 * 10, // 10MB
+  };
+  try {
+    const res = await ALOSSINS.multipartUpload(temName, file, { ...options });
+    if (res.res.status === 200) {
+      addEditVideo.value.videoUrl = "https://hzstatic.hzinsights.com/" + res.name;
+      startUpload.value = false;
+      percentage.value = 0;
+    }
+  } catch (error) {
+    ElMessage.warning("上传失败，请刷新重试");
+    startUpload.value = false;
+    percentage.value = 0;
+  }
+}
+const $emit = defineEmits(["getVideoList"]);
+const ruleFormVideo = ref(null);
+//保存或发布
+function confirmSubmit(type) {
+  ruleFormVideo.value.validate(async (valid) => {
+    if (valid) {
+      const res = await raiVideoApi.addVideo({
+        VideoName: addEditVideo.value.videoName,
+        ChartPermissionId: addEditVideo.value.industryId,
+        IndustryId: addEditVideo.value.property || 0,
+        VideoUrl: addEditVideo.value.videoUrl,
+        VideoDuration: addEditVideo.value.VideoSeconds,
+        PublishDate: addEditVideo.value.publishDate,
+        PublishOrSave: type == 1 ? type : publishStatus.value,
+        VideoId: videoId.value,
+        ImgUrl: addEditVideo.value.imgUrl,
+        ShareImgUrl: addEditVideo.value.shareImgUrl,
+        DetailImgUrl: addEditVideo.value.detailImgUrl,
+      });
+      if (res.Ret === 200) {
+        ElMessage.success("添加成功");
+        cancelHandle();
+        $emit("getVideoList");
+      }
+    } else {
+      console.log("error submit!!");
+      return false;
+    }
+  });
+}
+// ------------------图片上传
+function handleImageUpload(e, type) {
+  let formData = new FormData();
+  formData.append("file", e.file);
+  raiInterface.upload(formData).then((res) => {
+    if (type == "imgUrl") {
+      addEditVideo.value.imgUrl = res.Data.ResourceUrl;
+    } else if (type == "shareImgUrl") {
+      addEditVideo.value.shareImgUrl = res.Data.ResourceUrl;
+    } else {
+      addEditVideo.value.detailImgUrl = res.Data.ResourceUrl;
+    }
+    // 触发表单验证
+    ruleFormVideo.value.validateField(type);
+  });
+}
+//详情进来编辑
+async function editVideo() {
+  const res = await raiVideoApi.editVideo({});
+}
+function cancelHandle() {
+  ruleFormVideo.value.resetFields();
+  addEditVideo.value = {
+    videoName: "", //音频名称
+    industryId: "", //行业id
+    property: "", //产业名称
+    publishDate: "", //发布时间
+    videoUrl: "", //视频链接
+    VideoSeconds: "", //时长
+    imgUrl: "", // 视频封面
+    shareImgUrl: "", // 分享的视频封面
+    detailImgUrl: "",
+  };
+  $emit("update:addEditdialogVisib", false);
+  $emit("update:playDetailsList", {});
+}
+</script>
+
 <template>
   <div class="container add-edit-video">
     <el-dialog
-      v-dialogDrag
+      draggable
       :close-on-click-modal="false"
       :modal-append-to-body="false"
       center
       width="568px"
       title="添加视频"
-      :visible.sync="addEditdialogVisib"
+      v-model="props.addEditdialogVisib"
       customClass="add-edit-video-dlg"
       :before-close="cancelHandle"
     >
@@ -25,9 +280,12 @@
           </el-form-item>
           <el-form-item prop="industryId">
             <el-select style="width: 100%" placeholder="请选择行业" v-model="addEditVideo.industryId" clearable @change="selectChangeHandle">
-              <el-option 
-              v-for="item in chartPermissionList.filter(item => item.PermissionName != '宏观' && item.PermissionName != '策略' && item.PermissionName != '研选订阅')" 
-                :label="item.PermissionName" :key="item.ChartPermissionId" :value="item.ChartPermissionId"></el-option>
+              <el-option
+                v-for="item in props.chartPermissionList.filter((item) => item.PermissionName != '宏观' && item.PermissionName != '策略' && item.PermissionName != '研选订阅')"
+                :label="item.PermissionName"
+                :key="item.ChartPermissionId"
+                :value="item.ChartPermissionId"
+              ></el-option>
             </el-select>
           </el-form-item>
           <el-form-item prop="property">
@@ -42,10 +300,8 @@
               filterable
               clearable
             ></el-cascader> -->
-            <el-select v-model="addEditVideo.property" placeholder="请选择产业" clearable filterable
-            style="width: 100%;" @focus="industrySelectFocus">
-              <el-option :label="item.PermissionName" :value="item.ChartPermissionId" 
-              v-for="item in selectedIndustryArr" :key="item.ChartPermissionId"></el-option>
+            <el-select v-model="addEditVideo.property" placeholder="请选择产业" clearable filterable style="width: 100%" @focus="industrySelectFocus">
+              <el-option :label="item.PermissionName" :value="item.ChartPermissionId" v-for="item in selectedIndustryArr" :key="item.ChartPermissionId"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item prop="publishDate">
@@ -63,341 +319,61 @@
           <div class="uploadImageContain">
             <el-form-item prop="imgUrl">
               <div class="imgUploadBox">
-                <el-upload action="" :http-request="(e)=>handleImageUpload(e,'imgUrl')"
-                :multiple="false" :show-file-list="false" v-if="!addEditVideo.imgUrl">
+                <el-upload action="" :http-request="(e) => handleImageUpload(e, 'imgUrl')" :multiple="false" :show-file-list="false" v-if="!addEditVideo.imgUrl">
                   <div class="image-upload-item">
-                    <img src="~@/assets/icons/uploadImg-blue.svg"/>
+                    <img src="~@/assets/icons/uploadImg-blue.svg" />
                     <span>添加列表页封面</span>
                   </div>
                 </el-upload>
                 <div v-else class="uploaded-image-item">
-                  <el-image :src="addEditVideo.imgUrl" 
-                  class="videoImage"
-                  :preview-src-list="[addEditVideo.imgUrl]"/>
-                  <span class="del-image" @click="addEditVideo.imgUrl=''">删除</span>
-                </div>   
+                  <el-image :src="addEditVideo.imgUrl" class="videoImage" :preview-src-list="[addEditVideo.imgUrl]" />
+                  <span class="del-image" @click="addEditVideo.imgUrl = ''">删除</span>
+                </div>
               </div>
             </el-form-item>
-          
+
             <el-form-item prop="detailImgUrl">
               <div class="imgUploadBox">
-                <el-upload action="" :http-request="(e)=>handleImageUpload(e,'detailImgUrl')"
-                :multiple="false" :show-file-list="false" v-if="!addEditVideo.detailImgUrl" >
-                <div class="image-upload-item">
-                    <img src="~@/assets/icons/uploadImg-blue.svg"/>
+                <el-upload action="" :http-request="(e) => handleImageUpload(e, 'detailImgUrl')" :multiple="false" :show-file-list="false" v-if="!addEditVideo.detailImgUrl">
+                  <div class="image-upload-item">
+                    <img src="~@/assets/icons/uploadImg-blue.svg" />
                     <span>添加详情页封面</span>
                   </div>
                 </el-upload>
                 <div v-else class="uploaded-image-item">
-                  <el-image :src="addEditVideo.detailImgUrl" 
-                  class="videoImage"
-                  :preview-src-list="[addEditVideo.detailImgUrl]"/>
-                  <span class="del-image" @click="addEditVideo.detailImgUrl=''">删除</span>
-                </div>            
+                  <el-image :src="addEditVideo.detailImgUrl" class="videoImage" :preview-src-list="[addEditVideo.detailImgUrl]" />
+                  <span class="del-image" @click="addEditVideo.detailImgUrl = ''">删除</span>
+                </div>
               </div>
             </el-form-item>
             <el-form-item prop="shareImgUrl">
               <div class="imgUploadBox">
-                <el-upload action="" :http-request="(e)=>handleImageUpload(e,'shareImgUrl')"
-                :multiple="false" :show-file-list="false" v-if="!addEditVideo.shareImgUrl" >
-                <div class="image-upload-item">
-                    <img src="~@/assets/icons/uploadImg-blue.svg"/>
+                <el-upload action="" :http-request="(e) => handleImageUpload(e, 'shareImgUrl')" :multiple="false" :show-file-list="false" v-if="!addEditVideo.shareImgUrl">
+                  <div class="image-upload-item">
+                    <img src="~@/assets/icons/uploadImg-blue.svg" />
                     <span>添加视频分享图</span>
                   </div>
                 </el-upload>
                 <div v-else class="uploaded-image-item">
-                  <el-image :src="addEditVideo.shareImgUrl" 
-                  class="videoImage"
-                  :preview-src-list="[addEditVideo.shareImgUrl]"/>
-                  <span class="del-image" @click="addEditVideo.shareImgUrl=''">删除</span>
-                </div>            
+                  <el-image :src="addEditVideo.shareImgUrl" class="videoImage" :preview-src-list="[addEditVideo.shareImgUrl]" />
+                  <span class="del-image" @click="addEditVideo.shareImgUrl = ''">删除</span>
+                </div>
               </div>
             </el-form-item>
           </div>
         </el-form>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="confirmSubmit(0)">保存</el-button>
-        <el-button type="primary" v-if="publishStatus != 1" @click="confirmSubmit(1)">发布</el-button>
-        <el-button @click="cancelHandle">取消</el-button>
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="confirmSubmit(0)">保存</el-button>
+          <el-button type="primary" v-if="publishStatus != 1" @click="confirmSubmit(1)">发布</el-button>
+          <el-button @click="cancelHandle">取消</el-button>
+        </span>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
-import { getOSSSign } from "@/api/api.js";
-import MD5 from "js-md5";
-import { raiInterface, raiVideoApi } from "@/api/api.js";
-export default {
-  name: "",
-  components: {},
-  props: {
-    addEditdialogVisib: {
-      type: Boolean,
-      default: false,
-    },
-    chartPermissionList: {
-      type: Array,
-      default: [],
-    },
-    playDetailsList: {
-      default: {},
-      type: Object,
-    },
-  },
-  data() {
-    return {
-      addEditVideo: {
-        videoName: "", //音频名称
-        industryId: "", //行业id
-        property: "", //产业名称
-        publishDate: "", //发布时间
-        videoUrl: "", //视频链接
-        VideoSeconds: "", //时长
-        imgUrl:"", // 视频封面
-        shareImgUrl:"", // 分享的视频封面
-        detailImgUrl:""// 详情的视频封面
-      },
-      rules: {
-        videoName: [{ required: true, message: "请上传视频", trigger: "blur" }],
-        industryId: [{ required: true, message: "请选择行业", trigger: "change" }],
-        property: { required: true, message: "请选择产业", trigger: "change" },
-        publishDate: [{ required: true, message: "请选择发布时间", trigger: "change" }],
-        imgUrl:{ required: true, message: "请选择列表页封面", trigger: "change" },
-        shareImgUrl:{ required: true, message: "请选择视频分享图", trigger: "change" },
-        detailImgUrl:{ required: true, message: "请选择详情页封面", trigger: "change" }
-      },
-      videoId: 0,
-      publishStatus: 0,
-      industryArr: [],
-      selectedIndustryArr:[],
-      defaultProps: {
-        label: "PermissionName",
-        children: "List",
-        value: "ChartPermissionId",
-      },
-      percentage: 0,
-      startUpload: false, //开始上传
-    };
-  },
-  computed: {},
-  watch: {
-    playDetailsList: {
-      async handler(newval) {
-        if (JSON.stringify(newval) != "{}") {
-          await this.getIndustry(newval.ChartPermissionId);
-          console.log(newval);
-          this.addEditVideo = {
-            videoName: newval.VideoName, //音频名称
-            industryId: newval.ChartPermissionId, //行业id
-            property: newval.IndustryId || "", //产业名称
-            publishDate: newval.PublishDate, //发布时间
-            videoUrl: newval.VideoUrl, //视频链接
-            VideoSeconds: newval.VideoDuration, //时长
-            imgUrl:newval.ImgUrl, // 视频封面
-            shareImgUrl:newval.ShareImgUrl, // 分享的视频封面
-            detailImgUrl:newval.DetailImgUrl
-          };
-          this.videoId = newval.VideoId;
-          this.publishStatus = newval.PublishStatus;
-        } else {
-          this.videoId = 0;
-          this.selectedIndustryArr=[]
-          this.publishStatus = 0;
-        }
-      },
-      deep: true,
-    },
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    /* 获取全部的行业 前的判断 */
-    industrySelectFocus() {
-      if (!this.addEditVideo.industryId) {
-        this.$message.error("请先选择行业");
-      }
-    },
-    // 行业更改
-    selectChangeHandle(value){
-      this.addEditVideo.property=""
-      value?this.getIndustry(value):this.selectedIndustryArr =[]
-    },
-    /* 获取选择的行业 */
-    getIndustry(industryId) {
-      if (this.industryArr.length){
-        this.selectedIndustryArr = this.industryArr.filter(item => item.ChartPermissionId == industryId)[0].List
-        return;
-      } 
-      raiInterface.getListIndustrial().then((res) => {
-        if (res.Ret === 200) {
-          this.industryArr = res.Data.List || [];
-          this.selectedIndustryArr = this.industryArr.filter(item => item.ChartPermissionId == industryId)[0].List
-          // if (this.addEditVideo.property) {
-            // let valId = "";
-            // this.industryArr.forEach((item) => {
-            //   if (item.List.some((key) => key.ChartPermissionId == this.addEditVideo.property)) {
-            //     valId = item.ChartPermissionId;
-            //   }
-            // });
-          //   this.addEditVideo.property = [industryId, this.addEditVideo.property];
-          // }
-        }
-      });
-    },
-    //获取视频时长的promise
-    handleGetDuration(file) {
-      return new Promise((resolve, reject) => {
-        const fileUrl = URL.createObjectURL(file);
-        const audioEl = new Audio(fileUrl);
-        audioEl.addEventListener("loadedmetadata", (e) => {
-          resolve(audioEl.duration);
-        });
-      });
-    },
-
-    //上传视频判断格式
-    handelBeforeUploadVideo(e) {
-      if (e.type != "video/mp4") {
-        this.$message.warning("上传失败，上传视频格式不正确");
-        return false;
-      }
-    },
-
-    // 上传视频
-    async handleUpload(e) {
-      const duration = await this.handleGetDuration(e.file);
-      // 取消视频的大小校验 -- 查研观向 8.4
-      // if (duration > 600) {
-      //   this.$message.warning("视频时长不得超过10分钟");
-      //   return;
-      // }
-      console.log(e, duration);
-      this.addEditVideo.videoName = e.file.name;
-      this.addEditVideo.VideoSeconds = duration + ""; //时常
-      const res = await getOSSSign();
-      if (res.Ret === 200) {
-        let accessKeyId = res.Data.AccessKeyId;
-        let accessKeySecret = res.Data.AccessKeySecret;
-        let stsToken = res.Data.SecurityToken;
-        this.handleUploadToOSS(e.file, accessKeyId, accessKeySecret, stsToken);
-      }
-    },
-    //上传到阿里云
-    async handleUploadToOSS(file, accessKeyId, accessKeySecret, stsToken) {
-      this.startUpload = true;
-      const ALOSSINS = new OSS({
-        // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
-        region: "oss-cn-shanghai",
-        // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
-        accessKeyId: accessKeyId,
-        accessKeySecret: accessKeySecret,
-        // 从STS服务获取的安全令牌（SecurityToken）。
-        stsToken: stsToken,
-        // 填写Bucket名称，例如examplebucket。
-        bucket: "hzchart",
-        endpoint: "hzstatic.hzinsights.com",
-        cname: true,
-        timeout: 600000,
-      });
-      // 生成文件名
-      const t = new Date().getTime().toString();
-      const temName = `static/yb/video/${MD5(t)}.${file.name.split(".")[1]}`;
-      console.log(temName);
-
-      const options = {
-        // 获取分片上传进度、断点和返回值。
-        progress: (p, cpt, res) => {
-          console.log(p);
-          this.percentage = parseInt(p * 100);
-        },
-        // 设置并发上传的分片数量。
-        parallel: 10,
-        // 设置分片大小。默认值为1 MB，最小值为100 KB。
-        partSize: 1024 * 1024 * 10, // 10MB
-      };
-      try {
-        const res = await ALOSSINS.multipartUpload(temName, file, { ...options });
-        console.log("上传结果", res);
-        if (res.res.status === 200) {
-          this.addEditVideo.videoUrl = "https://hzstatic.hzinsights.com/" + res.name;
-          this.startUpload = false;
-          this.percentage = 0;
-        }
-      } catch (error) {
-        this.$message.warning("上传失败，请刷新重试");
-        this.startUpload = false;
-        this.percentage = 0;
-      }
-    },
-    //保存或发布
-    confirmSubmit(type) {
-      this.$refs.ruleFormVideo.validate(async (valid) => {
-        if (valid) {
-          const res = await raiVideoApi.addVideo({
-            VideoName: this.addEditVideo.videoName,
-            ChartPermissionId: this.addEditVideo.industryId,
-            IndustryId: this.addEditVideo.property || 0,
-            VideoUrl: this.addEditVideo.videoUrl,
-            VideoDuration: this.addEditVideo.VideoSeconds,
-            PublishDate: this.addEditVideo.publishDate,
-            PublishOrSave: type==1?type:this.publishStatus,
-            VideoId: this.videoId,
-            ImgUrl:this.addEditVideo.imgUrl,
-            ShareImgUrl:this.addEditVideo.shareImgUrl,
-            DetailImgUrl:this.addEditVideo.detailImgUrl
-          });
-          if (res.Ret === 200) {
-            this.$message.success("添加成功");
-            this.cancelHandle();
-            this.$parent.getVideoList();
-          }
-        } else {
-          console.log("error submit!!");
-          return false;
-        }
-      });
-    },
-    // ------------------图片上传
-    handleImageUpload(e,type){
-      let formData = new FormData()
-      formData.append("file", e.file)
-      raiInterface.upload(formData).then(res=>{
-        if(type=='imgUrl'){
-          this.addEditVideo.imgUrl = res.Data.ResourceUrl
-        }else if(type=='shareImgUrl'){
-          this.addEditVideo.shareImgUrl = res.Data.ResourceUrl
-        }else{
-          this.addEditVideo.detailImgUrl = res.Data.ResourceUrl
-        }
-        // 触发表单验证
-        this.$refs.ruleFormVideo.validateField(type)
-      })  
-    },
-    //详情进来编辑
-    async editVideo() {
-      const res = await raiVideoApi.editVideo({});
-    },
-    cancelHandle() {
-      this.$refs.ruleFormVideo.resetFields();
-      this.addEditVideo = {
-        videoName: "", //音频名称
-        industryId: "", //行业id
-        property: "", //产业名称
-        publishDate: "", //发布时间
-        videoUrl: "", //视频链接
-        VideoSeconds: "", //时长
-        imgUrl:"", // 视频封面
-        shareImgUrl:"", // 分享的视频封面
-        detailImgUrl:""
-      };
-      this.$emit("update:addEditdialogVisib", false);
-      this.$emit("update:playDetailsList", {});
-    },
-  },
-};
-</script>
 <style lang="scss">
 .add-edit-video {
   .add-edit-video-dlg {
@@ -408,37 +384,37 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
-.uploadImageContain{
+.uploadImageContain {
   display: flex;
   justify-content: space-between;
-  .imgUploadBox{
+  .imgUploadBox {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 110px;
     height: 110px;
-    .image-upload-item{
+    .image-upload-item {
       display: flex;
       flex-direction: column;
       justify-content: center;
-      img{
+      img {
         height: 32px;
       }
-      span{
+      span {
         color: #409eff;
         font-weight: 400;
         font-size: 14px;
       }
     }
-    .uploaded-image-item{
+    .uploaded-image-item {
       height: 110px;
       width: 110px;
       display: flex;
       justify-content: center;
-      .videoImage{
+      .videoImage {
         border-radius: 1px;
       }
-      .del-image{
+      .del-image {
         display: none;
         color: #fff;
         position: absolute;
@@ -451,8 +427,8 @@ export default {
         background-color: rgba($color: #000000, $alpha: 0.8);
         cursor: pointer;
       }
-      &:hover{
-        .del-image{
+      &:hover {
+        .del-image {
           display: block;
         }
       }

src/views/rai_manage/activityManage/roadShow/components/playDetailsDlg.vue

@@ -1,15 +1,119 @@
+<script setup>
+import { ref, onMounted, watch, computed } from "vue";
+
+import { PalyTable } from "../tableTabs";
+import { raiVideoApi } from "@/api/api.js";
+
+const props = defineProps({
+  playDetailsVisible: {
+    default: false,
+    required: true,
+    type: Boolean,
+  },
+  playDetailsList: {
+    default: {},
+    required: true,
+    type: Object,
+  },
+  tabActive: {
+    required: true,
+    type: Number,
+  },
+});
+const dataList = ref([]);
+
+const tableColums = computed(() => {
+  return PalyTable;
+});
+
+watch(
+  () => props.playDetailsList.VideoId,
+  () => {
+    if (newval) {
+      props.tabActive == 4 && getVideoDeatil();
+    }
+  }
+);
+
+watch(
+  () => props.playDetailsList.FileName,
+  () => {
+    if (newval) {
+      if (newval) {
+        newval == "视频" && activityVideoDeatil();
+        newval == "音频" && getVoiceDeatil();
+      }
+    }
+  }
+);
+
+watch(
+  () => props.playDetailsList.AskserieVideoId,
+  () => {
+    if (newval) {
+      if (newval) {
+        askserieVideoHistoryList();
+      }
+    }
+  }
+);
+
+const $emit = defineEmits();
+
+function cancelHandle() {
+  $emit("update:playDetailsVisible", false);
+  $emit("update:playDetailsList", {});
+  dataList.value = [];
+}
+async function getVideoDeatil() {
+  const res = await raiVideoApi.videoDeatil({ VideoId: props.playDetailsList.VideoId });
+  if (res.Ret === 200) {
+    dataList.value = res.Data || [];
+  }
+}
+async function getVoiceDeatil() {
+  const res = await raiVideoApi.voiceDeatil({ VideoId: props.playDetailsList.VideoId });
+  if (res.Ret === 200) {
+    dataList.value = res.Data || [];
+  }
+}
+async function activityVideoDeatil() {
+  const res = await raiVideoApi.activityVideoDeatil({ VideoId: props.playDetailsList.VideoId });
+  if (res.Ret === 200) {
+    dataList.value = res.Data || [];
+  }
+}
+async function askserieVideoHistoryList() {
+  const res = await raiVideoApi.askserie_videoHistory_list({ AskserieVideoId: props.playDetailsList.AskserieVideoId });
+  if (res.Ret === 200) {
+    dataList.value = res.Data.List || [];
+  }
+}
+function handleRowContent(row, key) {
+  if (key == "PlaySeconds") {
+    if (!row[key] || row[key] == 0) return "--";
+    let m = parseInt(row[key] / 60);
+    let s = parseInt(row[key] % 60);
+    let ms = `${m > 9 ? m : "0" + m}分${s > 9 ? s : "0" + s}秒`;
+    return ms;
+  } else {
+    return row[key];
+  }
+}
+</script>
+
 <template>
   <div class="container paly-details-dlg">
-    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center title="播放详情" :visible.sync="playDetailsVisible" width="1242px" :before-close="cancelHandle">
+    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center title="播放详情" v-model="props.playDetailsVisible" width="1242px" :before-close="cancelHandle">
       <el-table :data="dataList" style="width: 100%" border height="400">
         <template v-for="item in tableColums">
-          <el-table-column :key="item.label" :label="item.label" :width="item.widthsty" :min-width="item.minwidthsty" align="center" v-if="tabActive == 4 && item.key != 'PlaySeconds'">
-            <template slot-scope="{ row }">
+          <el-table-column :key="item.label" :label="item.label" :width="item.widthsty" :min-width="item.minwidthsty" align="center" v-if="props.tabActive == 4 && item.key != 'PlaySeconds'">
+            <template #default="{ row }">
               <span>{{ handleRowContent(row, item.key) }}</span>
             </template>
           </el-table-column>
-          <el-table-column :key="item.label" :label="item.label" :width="item.widthsty" :min-width="item.minwidthsty" align="center" v-else-if="tabActive != 4">
-            <template slot-scope="{ row }">
+          <el-table-column :key="item.label" :label="item.label" :width="item.widthsty" :min-width="item.minwidthsty" align="center" v-else-if="props.tabActive != 4">
+            <template #default="{ row }">
               <span>{{ handleRowContent(row, item.key) }}</span>
             </template>
           </el-table-column>
@@ -19,109 +123,6 @@
   </div>
 </template>
 
-<script>
-import { PalyTable } from "../tableTabs";
-import { raiVideoApi } from "@/api/api.js";
-
-export default {
-  name: "",
-  components: {},
-  props: {
-    playDetailsVisible: {
-      default: false,
-      required: true,
-      type: Boolean,
-    },
-    playDetailsList: {
-      default: {},
-      required: true,
-      type: Object,
-    },
-    tabActive: {
-      required: true,
-      type: Number,
-    },
-  },
-  data() {
-    return {
-      dataList: [],
-    };
-  },
-  computed: {
-    tableColums() {
-      return PalyTable;
-    },
-  },
-  watch: {
-    "playDetailsList.VideoId": {
-      handler(newval) {
-        if (newval) {
-          this.tabActive == 4 && this.getVideoDeatil();
-        }
-      },
-    },
-    "playDetailsList.FileName": {
-      handler(newval) {
-        if (newval) {
-          newval == "视频" && this.activityVideoDeatil();
-          newval == "音频" && this.getVoiceDeatil();
-        }
-      },
-    },
-    "playDetailsList.AskserieVideoId": {
-      handler(newval) {
-        if (newval) {
-          this.askserieVideoHistoryList();
-        }
-      },
-    },
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    cancelHandle() {
-      this.$emit("update:playDetailsVisible", false);
-      this.$emit("update:playDetailsList", {});
-      this.dataList = [];
-    },
-    async getVideoDeatil() {
-      const res = await raiVideoApi.videoDeatil({ VideoId: this.playDetailsList.VideoId });
-      if (res.Ret === 200) {
-        this.dataList = res.Data || [];
-      }
-    },
-    async getVoiceDeatil() {
-      const res = await raiVideoApi.voiceDeatil({ VideoId: this.playDetailsList.VideoId });
-      if (res.Ret === 200) {
-        this.dataList = res.Data || [];
-      }
-    },
-    async activityVideoDeatil() {
-      const res = await raiVideoApi.activityVideoDeatil({ VideoId: this.playDetailsList.VideoId });
-      if (res.Ret === 200) {
-        this.dataList = res.Data || [];
-      }
-    },
-    async askserieVideoHistoryList() {
-      const res = await raiVideoApi.askserie_videoHistory_list({ AskserieVideoId: this.playDetailsList.AskserieVideoId });
-      if (res.Ret === 200) {
-        this.dataList = res.Data.List || [];
-      }
-    },
-    handleRowContent(row, key) {
-      if (key == "PlaySeconds") {
-        if (!row[key] || row[key] == 0) return '--';
-        let m = parseInt(row[key] / 60);
-        let s = parseInt(row[key] % 60);
-        let ms = `${m > 9 ? m : "0" + m}分${s > 9 ? s : "0" + s}秒`;
-        return ms;
-      } else {
-        return row[key];
-      }
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .paly-details-dlg {
   .el-table {

src/views/rai_manage/activityManage/roadShow/components/releaseAudio.vue

@@ -1,13 +1,219 @@
+<script setup>
+import { ref, onMounted, watch, computed } from "vue";
+
+import { raiInterface, resourceVoiceupload, raiVideoApi } from "@/api/api.js";
+import ModifyImgDlg from "../../components/addComopnents/modifyImgDlg.vue";
+import { ElMessage } from "element-plus";
+
+const $emit = defineEmits();
+const props = defineProps({
+  addEditdialogReleaseAudio: {
+    type: Boolean,
+    default: false,
+  },
+  chartPermissionList: {
+    type: Array,
+    default: [],
+  },
+  playDetailsList: {
+    default: {},
+    type: Object,
+  },
+});
+
+const addEditAudio = ref({
+  audioName: "", //音频名称
+  industryId: "", //行业id
+  property: "", //产业名称
+  audioUrl: "", //视频链接
+  AudioSeconds: "", //时长
+});
+const rules = ref({
+  industryId: [{ required: true, message: "请选择行业", trigger: "change" }],
+});
+const industryArr = ref([]);
+const selectedIndustryArr = ref([]);
+const percentage = ref(0);
+const startUpload = ref(false); //开始上传
+const fileListAudio = ref([]);
+const videoAndVoiceList = ref([]);
+const defaultImage = ref([]);
+const modifyImgVisible = ref(false);
+const defaultImage = ref("");
+const shareImg = ref("");
+const dlgTitle = ref("发布问答");
+
+watch(
+  () => props.playDetailsList.AskserieVideoId,
+  () => {
+    if (newval) {
+      newVal && newVal > 0 && askserieVideoDetail();
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+
+function updateSonDate(item) {
+  defaultImage.value = item.ImgUrl;
+  shareImg.value = item.ShareImg;
+}
+/* 获取全部的行业 前的判断 */
+function industrySelectFocus() {
+  if (!addEditAudio.value.industryId) {
+    ElMessage.error("请先选择行业");
+  }
+}
+// 行业更改
+function selectChangeHandle(value) {
+  addEditAudio.value.property = "";
+  value ? getIndustry(value) : (selectedIndustryArr.value = []);
+  value && getVideoAndImg();
+}
+/* 获取选择的行业 */
+function getIndustry(industryId) {
+  if (industryArr.value.length) {
+    selectedIndustryArr.value = industryArr.value.filter((item) => item.ChartPermissionId == industryId)[0].List;
+    return;
+  }
+  raiInterface.getListIndustrial().then((res) => {
+    if (res.Ret === 200) {
+      industryArr.value = res.Data.List || [];
+      selectedIndustryArr.value = industryArr.value.filter((item) => item.ChartPermissionId == industryId)[0].List;
+    }
+  });
+}
+
+const ruleFormAudio = ref(null);
+//保存或发布
+function confirmSubmit(type) {
+  ruleFormAudio.value.validate(async (valid) => {
+    if (valid) {
+      if (!fileListAudio[0].value.url) return ElMessage.error("请上传音频");
+      if (!addEditAudio.value.audioName) return ElMessage.error("请输入音频名称");
+      let ChartPermissionName = "";
+      props.chartPermissionList.forEach((item) => {
+        if (item.ChartPermissionId == addEditAudio.value.industryId) {
+          ChartPermissionName = item.PermissionName;
+        }
+      });
+      const res = await raiVideoApi.askseriePreserveAndEdit({
+        AskserieVideoId: props.playDetailsList.AskserieVideoId ? props.playDetailsList.AskserieVideoId : 0,
+        VideoName: addEditAudio.value.audioName,
+        ChartPermissionId: addEditAudio.value.industryId,
+        ChartPermissionName,
+        IndustrialManagementIds: addEditAudio.value.property ? addEditAudio.value.property.join(",") : "",
+        VideoUrl: addEditAudio.value.audioUrl,
+        VideoDuration: addEditAudio.value.AudioSeconds + "",
+        BackgroundImg: defaultImage.value,
+        ShareImg: shareImg.value,
+      });
+      if (res.Ret === 200) {
+        ElMessage.success("添加成功");
+        cancelHandle();
+        $emit("getVideoList");
+      }
+    } else {
+      console.log("error submit!!");
+      return false;
+    }
+  });
+}
+// 上传音频
+async function handleUploadAudio(e) {
+  startUpload.value = true;
+  let form = new FormData();
+  form.append("file", e.file);
+  const res = await resourceVoiceupload(form);
+  if (res.Ret === 200) {
+    let obj = {
+      name: res.Data.ResourceName,
+      url: res.Data.ResourceUrl,
+      PlaySeconds: res.Data.PlaySeconds,
+    };
+    addEditAudio.value.audioName = res.Data.ResourceName; //音频名称
+    addEditAudio.value.audioUrl = res.Data.ResourceUrl; //视频链接
+    addEditAudio.value.AudioSeconds = res.Data.PlaySeconds; //时长
+    fileListAudio.value = [obj];
+  }
+  startUpload.value = false;
+}
+// 封面图
+async function getVideoAndImg(isOne = "") {
+  const res = await raiInterface.video_and_voiceImgActivityVideo({
+    ChartPermissionId: addEditAudio.value.industryId,
+  });
+  if (res.Ret === 200) {
+    isOne == "修改" ? "" : ((defaultImage.value = res.Data.List[0].ImgUrl), (shareImg.value = res.Data.List[0].ShareImg));
+    videoAndVoiceList.value = res.Data.List;
+  }
+}
+// 点击修改图片的弹框
+function modifyImgHandler() {
+  getVideoAndImg("修改");
+  modifyImgVisible.value = true;
+}
+function cancelHandle() {
+  ruleFormAudio.value.resetFields();
+  addEditAudio.value = {
+    audioName: "", //音频名称
+    industryId: "", //行业id
+    property: "", //产业名称
+    audioUrl: "", //视频链接
+    AudioSeconds: "", //时长
+  };
+  fileListAudio.value = [];
+  defaultImage.value = "";
+  shareImg.value = "";
+  dlgTitle.value = "发布问答";
+  $emit("update:addEditdialogReleaseAudio", false);
+  $emit("update:playDetailsList", {});
+}
+// 获取详情
+async function askserieVideoDetail() {
+  const res = await raiVideoApi.askserieVideoDetail({
+    AskserieVideoId: props.playDetailsList.AskserieVideoId,
+  });
+  if (res.Ret === 200) {
+    dlgTitle.value = "编辑";
+    let { Detail } = res.Data;
+    getIndustry(Detail.ChartPermissionId);
+    let str = [];
+    Detail.ListIndustrial &&
+      Detail.ListIndustrial.forEach((item) => {
+        str.push(item.IndustrialManagementId);
+      });
+    addEditAudio.value = {
+      audioName: Detail.VideoName, //音频名称
+      industryId: Detail.ChartPermissionId, //行业id
+      property: str, //产业名称
+      audioUrl: Detail.VideoUrl, //视频链接
+      AudioSeconds: Detail.VideoDuration, //时长
+    };
+    defaultImage.value = Detail.BackgroundImg;
+    shareImg.value = Detail.ShareImg;
+    let obj = {
+      name: Detail.VideoName,
+      url: Detail.VideoUrl,
+      PlaySeconds: Detail.VideoDuration,
+    };
+    fileListAudio.value = [obj];
+  }
+}
+</script>
+
 <template>
   <div class="container add-edit-release-audio">
     <el-dialog
-      v-dialogDrag
+      draggable
       :close-on-click-modal="false"
       :modal-append-to-body="false"
       center
       width="568px"
       :title="dlgTitle"
-      :visible.sync="addEditdialogReleaseAudio"
+      v-model="props.addEditdialogReleaseAudio"
       customClass="add-edit-video-dlg"
       :before-close="cancelHandle"
     >
@@ -25,7 +231,7 @@
           <el-form-item prop="industryId">
             <el-select style="width: 100%" placeholder="请选择行业" v-model="addEditAudio.industryId" clearable @change="selectChangeHandle">
               <el-option
-                v-for="item in chartPermissionList.filter((item) => item.PermissionName != '宏观' && item.PermissionName != '策略' && item.PermissionName != '研选订阅')"
+                v-for="item in props.chartPermissionList.filter((item) => item.PermissionName != '宏观' && item.PermissionName != '策略' && item.PermissionName != '研选订阅')"
                 :label="item.PermissionName"
                 :key="item.ChartPermissionId"
                 :value="item.ChartPermissionId"
@@ -39,224 +245,23 @@
           </el-form-item>
         </el-form>
       </div>
-      <div class="cover-content" style="margin: 10px 0" v-if="this.addEditAudio.industryId && defaultImage">
+      <div class="cover-content" style="margin: 10px 0" v-if="addEditAudio.industryId && defaultImage">
         <span class="text" style="width: 46px; text-align: right">封面：</span>
         <div class="img-content">
           <img :src="defaultImage" alt="" />
           <div class="modify" @click="modifyImgHandler">修改</div>
         </div>
       </div>
-      <span slot="footer" class="dialog-footer">
+      <template #footer></template>
+      <span class="dialog-footer">
         <el-button type="primary" @click="confirmSubmit(1)">确定</el-button>
         <el-button @click="cancelHandle">取消</el-button>
       </span>
     </el-dialog>
-    <modify-img-dlg :modifyImgVisible.sync="modifyImgVisible" :videoAndVoiceList.sync="videoAndVoiceList" />
+    <modify-img-dlg v-model:modifyImgVisible="modifyImgVisible" v-model:videoAndVoiceList="videoAndVoiceList" @updateSonDate="updateSonDate" />
   </div>
 </template>
 
-<script>
-import { raiInterface, resourceVoiceupload, raiVideoApi } from "@/api/api.js";
-import ModifyImgDlg from "../../components/addComopnents/modifyImgDlg.vue";
-export default {
-  name: "",
-  components: { ModifyImgDlg },
-  props: {
-    addEditdialogReleaseAudio: {
-      type: Boolean,
-      default: false,
-    },
-    chartPermissionList: {
-      type: Array,
-      default: [],
-    },
-    playDetailsList: {
-      default: {},
-      type: Object,
-    },
-  },
-  watch: {
-    "playDetailsList.AskserieVideoId": {
-      handler(newVal) {
-        newVal && newVal > 0 && this.askserieVideoDetail();
-      },
-      deep: true,
-      immediate: true,
-    },
-  },
-  data() {
-    return {
-      addEditAudio: {
-        audioName: "", //音频名称
-        industryId: "", //行业id
-        property: "", //产业名称
-        audioUrl: "", //视频链接
-        AudioSeconds: "", //时长
-      },
-      rules: {
-        // audioName: [{ required: true, message: "请上传音频", trigger: "blur" }],
-        industryId: [{ required: true, message: "请选择行业", trigger: "change" }],
-      },
-      industryArr: [],
-      selectedIndustryArr: [],
-      percentage: 0,
-      startUpload: false, //开始上传
-      fileListAudio: [],
-      videoAndVoiceList: [],
-      defaultImage: [],
-      modifyImgVisible: false,
-      defaultImage: "",
-      shareImg: "",
-      dlgTitle: "发布问答",
-    };
-  },
-  computed: {},
-  created() {},
-  mounted() {},
-  methods: {
-    /* 获取全部的行业 前的判断 */
-    industrySelectFocus() {
-      if (!this.addEditAudio.industryId) {
-        this.$message.error("请先选择行业");
-      }
-    },
-    // 行业更改
-    selectChangeHandle(value) {
-      this.addEditAudio.property = "";
-      value ? this.getIndustry(value) : (this.selectedIndustryArr = []);
-      value && this.getVideoAndImg();
-    },
-    /* 获取选择的行业 */
-    getIndustry(industryId) {
-      if (this.industryArr.length) {
-        this.selectedIndustryArr = this.industryArr.filter((item) => item.ChartPermissionId == industryId)[0].List;
-        return;
-      }
-      raiInterface.getListIndustrial().then((res) => {
-        if (res.Ret === 200) {
-          this.industryArr = res.Data.List || [];
-          this.selectedIndustryArr = this.industryArr.filter((item) => item.ChartPermissionId == industryId)[0].List;
-        }
-      });
-    },
-    //保存或发布
-    confirmSubmit(type) {
-      this.$refs.ruleFormAudio.validate(async (valid) => {
-        if (valid) {
-          if (!this.fileListAudio[0].url) return this.$message.error("请上传音频");
-          if (!this.addEditAudio.audioName) return this.$message.error("请输入音频名称");
-          let ChartPermissionName = "";
-          this.chartPermissionList.forEach((item) => {
-            if (item.ChartPermissionId == this.addEditAudio.industryId) {
-              ChartPermissionName = item.PermissionName;
-            }
-          });
-          const res = await raiVideoApi.askseriePreserveAndEdit({
-            AskserieVideoId: this.playDetailsList.AskserieVideoId ? this.playDetailsList.AskserieVideoId : 0,
-            VideoName: this.addEditAudio.audioName,
-            ChartPermissionId: this.addEditAudio.industryId,
-            ChartPermissionName,
-            IndustrialManagementIds: this.addEditAudio.property ? this.addEditAudio.property.join(",") : "",
-            VideoUrl: this.addEditAudio.audioUrl,
-            VideoDuration: this.addEditAudio.AudioSeconds + "",
-            BackgroundImg: this.defaultImage,
-            ShareImg: this.shareImg,
-          });
-          if (res.Ret === 200) {
-            this.$message.success("添加成功");
-            this.cancelHandle();
-            this.$parent.getVideoList();
-          }
-        } else {
-          console.log("error submit!!");
-          return false;
-        }
-      });
-    },
-    // 上传音频
-    async handleUploadAudio(e) {
-      this.startUpload = true;
-      let form = new FormData();
-      form.append("file", e.file);
-      const res = await resourceVoiceupload(form);
-      if (res.Ret === 200) {
-        let obj = {
-          name: res.Data.ResourceName,
-          url: res.Data.ResourceUrl,
-          PlaySeconds: res.Data.PlaySeconds,
-        };
-        this.addEditAudio.audioName = res.Data.ResourceName; //音频名称
-        this.addEditAudio.audioUrl = res.Data.ResourceUrl; //视频链接
-        this.addEditAudio.AudioSeconds = res.Data.PlaySeconds; //时长
-        this.fileListAudio = [obj];
-      }
-      this.startUpload = false;
-    },
-    // 封面图
-    async getVideoAndImg(isOne = "") {
-      const res = await raiInterface.video_and_voiceImgActivityVideo({
-        ChartPermissionId: this.addEditAudio.industryId,
-      });
-      if (res.Ret === 200) {
-        isOne == "修改" ? "" : ((this.defaultImage = res.Data.List[0].ImgUrl), (this.shareImg = res.Data.List[0].ShareImg));
-        this.videoAndVoiceList = res.Data.List;
-      }
-    },
-    // 点击修改图片的弹框
-    modifyImgHandler() {
-      this.getVideoAndImg("修改");
-      this.modifyImgVisible = true;
-    },
-    cancelHandle() {
-      this.$refs.ruleFormAudio.resetFields();
-      this.addEditAudio = {
-        audioName: "", //音频名称
-        industryId: "", //行业id
-        property: "", //产业名称
-        audioUrl: "", //视频链接
-        AudioSeconds: "", //时长
-      };
-      this.fileListAudio = [];
-      this.defaultImage = "";
-      this.shareImg = "";
-      this.dlgTitle = "发布问答";
-      this.$emit("update:addEditdialogReleaseAudio", false);
-      this.$emit("update:playDetailsList", {});
-    },
-    // 获取详情
-    async askserieVideoDetail() {
-      const res = await raiVideoApi.askserieVideoDetail({
-        AskserieVideoId: this.playDetailsList.AskserieVideoId,
-      });
-      if (res.Ret === 200) {
-        this.dlgTitle = "编辑";
-        let { Detail } = res.Data;
-        this.getIndustry(Detail.ChartPermissionId);
-        let str = [];
-        Detail.ListIndustrial &&
-          Detail.ListIndustrial.forEach((item) => {
-            str.push(item.IndustrialManagementId);
-          });
-        this.addEditAudio = {
-          audioName: Detail.VideoName, //音频名称
-          industryId: Detail.ChartPermissionId, //行业id
-          property: str, //产业名称
-          audioUrl: Detail.VideoUrl, //视频链接
-          AudioSeconds: Detail.VideoDuration, //时长
-        };
-        this.defaultImage = Detail.BackgroundImg;
-        this.shareImg = Detail.ShareImg;
-        let obj = {
-          name: Detail.VideoName,
-          url: Detail.VideoUrl,
-          PlaySeconds: Detail.VideoDuration,
-        };
-        this.fileListAudio = [obj];
-      }
-    },
-  },
-};
-</script>
 <style lang="scss">
 .add-edit-release-audio {
   .add-edit-video-dlg {

src/views/rai_manage/activityManage/roadShowList.vue

@@ -1,12 +1,312 @@
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  beforeRouteEnter(to, from, next) {
+    if (from.path !== "/editActivity") {
+      sessionStorage.removeItem("backRoadShowListPage");
+    }
+    next();
+  },
+});
+</script>
+
+<script setup>
+import { ref, watch, onMounted, reactive, computed, toRefs } from "vue";
+
+import { raiInterface, raiVideoApi } from "@/api/api.js";
+import { tableColums, TopTabs } from "./roadShow/tableTabs";
+import { PublishSelect } from "../components/apply/applyTableColums";
+import mPage from "@/components/mPage.vue";
+import playDetails from "./roadShow/components/playDetailsDlg.vue";
+import addVideoDlg from "./roadShow/components/addVideoDlg.vue";
+import moment from "moment";
+import AtcParticulars from "../components/atcParticulars.vue";
+import GenerationAsk from "../components/generationAsk.vue";
+import ReleaseAudio from "./roadShow/components/releaseAudio.vue";
+
+import { ElMessageBox, ElMessage } from "element-plus";
+
+import { Search } from "@element-plus/icons-vue";
+
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  tableColums: [],
+  dataList: [],
+  tabActive: 1, //tabs 选中
+  chartPermissionList: [], //行业的数组
+  chartPermissionId: "", //行业的id
+  issueTime: "", //活动时间
+  cactivityTypeVal: "", //活动类型
+  cactivityTypeList: [],
+  publishStatus: "", //发布状态
+  fileName: "", //文件名称
+  total: 0, //条数
+  PageSize: 10, //每页显示几条
+  page_no: 1, //页码
+  playDetailsVisible: false, //播放详情的弹框
+  playDetailsList: {}, //播放详情的数据//编辑的详情
+  editDetails: {}, //播放详情的数据//编辑的详情
+  addEditdialogVisib: false, //添加视频的弹框
+  sortType: "",
+  detailData: [],
+  dialogVisible: false,
+  generaitondialogVisib: false, //代问的弹框
+  generaitonId: "",
+  generaitonType: "微路演",
+  addEditdialogReleaseAudio: false,
+});
+
+const topTabs = computed(() => {
+  return TopTabs;
+});
+
+//发布状态
+const publishSelect = computed(() => {
+  return PublishSelect;
+});
+
+onMounted(() => {
+  if (sessionStorage.getItem("backRoadShowListPage")) {
+    let { page_no, fileName, chartPermissionId, cactivityTypeVal, issueTime, tabActive } = JSON.parse(sessionStorage.getItem("backRoadShowListPage"));
+    pageState.page_no = page_no;
+    pageState.fileName = fileName;
+    pageState.chartPermissionId = chartPermissionId;
+    pageState.cactivityTypeVal = cactivityTypeVal;
+    pageState.issueTime = issueTime;
+    pageState.tabActive = tabActive;
+  }
+
+  pageState.tableColums = tableColums(pageState.tabActive);
+  chartPermission();
+  activityType();
+  getVideoList();
+});
+
+function topTabsHandler(item) {
+  pageState.tabActive = item.value;
+  pageState.tableColums = tableColums(pageState.tabActive);
+  pageState.publishStatus = "";
+  pageState.cactivityTypeVal = "";
+  pageState.page_no = 1;
+  getVideoList();
+}
+//获取行业
+async function chartPermission() {
+  const res = await raiInterface.chartPermission({
+    IsHideResearch: true,
+  });
+  if (res.Ret === 200) {
+    pageState.chartPermissionList = res.Data.List;
+  }
+}
+//活动类型
+async function activityType() {
+  const res = await raiInterface.getActivityType();
+  if (res.Ret === 200) {
+    pageState.cactivityTypeList = res.Data.List;
+  }
+}
+async function getVideoList() {
+  let params = {
+    PageSize: pageState.PageSize,
+    CurrentIndex: pageState.page_no,
+    KeyWord: pageState.fileName,
+    StartDate: pageState.issueTime ? pageState.issueTime[0] : "",
+    EndDate: pageState.issueTime ? pageState.issueTime[1] : "",
+    PublishStatus: pageState.publishStatus ? Number(pageState.publishStatus) : "",
+    ChartPermissionId: pageState.chartPermissionId,
+    ActivityTypeId: pageState.cactivityTypeVal,
+    SortType: pageState.sortType,
+    SortParam: "videoCounts",
+    SearchType: pageState.tabActive,
+  };
+  const res =
+    pageState.tabActive == 4
+      ? await raiVideoApi.videoList(params)
+      : pageState.tabActive == 1
+      ? await raiVideoApi.activityVoiceAndVideoList(params)
+      : pageState.tabActive == 3
+      ? await raiVideoApi.askserie_videoList(params)
+      : await raiVideoApi.activityVoiceAndVideoList(params);
+  if (res.Ret === 200) {
+    pageState.dataList = res.Data.List;
+    pageState.total = res.Data.Paging.Totals;
+  }
+}
+//select 筛选条件后的事件
+function selectChangeHandle() {
+  pageState.page_no = 1;
+  getVideoList();
+}
+//文件名称的搜索
+function fileNameHandle() {
+  pageState.issueTime = "";
+  pageState.publishStatus = "";
+  pageState.chartPermissionId = "";
+  pageState.page_no = 1;
+  getVideoList();
+}
+/* 点击表格的排序 */
+function sortChangeHandle({ prop, order }) {
+  pageState.sortType = order == "ascending" ? "asc" : order == "descending" ? "desc" : "";
+  getVideoList();
+}
+//分页
+function handleCurrentChange(page) {
+  pageState.page_no = page;
+  getVideoList();
+}
+/*
+    表格三件套
+    */
+function handleRowContent(row, key) {
+  if (key == "PublishStatus") {
+    let status = row["PublishStatus"] == 1 ? "已发布" : row["PublishStatus"] == 3 ? "已取消" : "未发布";
+    return status;
+  } else if (key == "VideoDuration" || key == "VoicePlaySeconds") {
+    let m = parseInt(row[key] / 60);
+    let s = parseInt(row[key] % 60);
+    let ms = `${m > 9 ? m : "0" + m}分${s > 9 ? s : "0" + s}秒`;
+    return ms;
+  } else {
+    return row[key];
+  }
+}
+function handleRowStyle(key) {
+  const style = {
+    VideoCounts: "color: #409eff; cursor: pointer",
+    VoiceCounts: "color: #409eff; cursor: pointer",
+    CommentNum: "color: #409eff; cursor: pointer",
+  };
+  return style[key] ? style[key] : "";
+}
+//
+function handleRowClick(row, key) {
+  if (key == "VideoCounts" || key == "VoiceCounts") {
+    pageState.playDetailsVisible = true;
+    pageState.playDetailsList = row;
+  } else if (key == "CommentNum") {
+    pageState.generaitondialogVisib = true;
+    pageState.generaitonId = pageState.tabActive == 1 || pageState.tabActive == 2 ? row.ActivityId : pageState.tabActive == 3 ? row.AskserieVideoId : row.VideoId;
+  }
+}
+/*
+    表格三件套
+    */
+//点击标题的弹框
+function titleBtnClick(id) {
+  raiInterface.activityDetail({ ActivityId: Number(id) }).then((res) => {
+    if (res.Ret == 200) {
+      pageState.detailData = res.Data;
+    }
+  });
+  pageState.dialogVisible = true;
+}
+//发布或者取消发布
+function handlePublish(item) {
+  let str = pageState.tabActive == 3 ? "音频" : "视频";
+  ElMessageBox.confirm(item.PublishStatus == 1 ? `确认取消发布该${str}吗？` : `确认发布该${str}吗？`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      const res =
+        pageState.tabActive == 3
+          ? await raiVideoApi.askseriePublishAndcancel({
+              AskserieVideoId: item.AskserieVideoId,
+              PublishOrCancle: item.PublishStatus == 1 ? 0 : 1,
+            })
+          : await raiVideoApi.videoPublish({
+              VideoId: item.VideoId,
+              PublishOrCancle: item.PublishStatus == 1 ? 0 : 1,
+            });
+      if (res.Ret === 200) {
+        ElMessage.success("操作成功！");
+        getVideoList();
+      }
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: "已取消",
+      });
+    });
+}
+//编辑
+function handleEditVideo(item, type) {
+  if (type == "活动") {
+    $router.push({
+      path: "/editActivity",
+      query: {
+        id: item.ActivityId,
+        isShow: 1,
+      },
+    });
+  } else {
+    pageState.editDetails = item;
+    if (pageState.tabActive == 3) {
+      pageState.addEditdialogReleaseAudio = true;
+    } else {
+      pageState.addEditdialogVisib = true;
+    }
+  }
+}
+
+onBeforeRouteLeave((to, from, next) => {
+  let backData = {
+    page_no: pageState.page_no,
+    fileName: pageState.fileName,
+    chartPermissionId: pageState.chartPermissionId,
+    cactivityTypeVal: pageState.cactivityTypeVal,
+    issueTime: pageState.issueTime,
+    tabActive: pageState.tabActive,
+  };
+  sessionStorage.setItem("backRoadShowListPage", JSON.stringify(backData));
+  next();
+});
+
+const {
+  tableColums,
+  dataList,
+  tabActive, //tabs 选中
+  chartPermissionList, //行业的数组
+  chartPermissionId, //行业的id
+  issueTime, //活动时间
+  cactivityTypeVal, //活动类型
+  cactivityTypeList,
+  publishStatus, //发布状态
+  fileName, //文件名称
+  total, //条数
+  PageSize, //每页显示几条
+  page_no, //页码
+  playDetailsVisible, //播放详情的弹框
+  playDetailsList, //播放详情的数据//编辑的详情
+  editDetails, //播放详情的数据//编辑的详情
+  addEditdialogVisib, //添加视频的弹框
+  sortType,
+  detailData,
+  dialogVisible,
+  generaitondialogVisib, //代问的弹框
+  generaitonId,
+  generaitonType,
+  addEditdialogReleaseAudio,
+} = toRefs(pageState);
+</script>
+
 <template>
   <div class="container container-road-show">
     <div class="top-wrap">
       <div style="display: flex">
-        <span @click="topTabsHandler(item)" :class="['item', tabActive === item.value && 'active']" v-for="item in topTabs" :key="item.value">{{ item.name }}</span>
+        <span @click="topTabsHandler(item)" :class="['item', tabActive === item.value && 'active']" v-for="item in topTabs" :key="item.value">
+          {{ item.name }}
+        </span>
       </div>
-      <el-input v-model="fileName" @input="fileNameHandle" placeholder="请输入文件名称" clearable style="display: inline-block; width: 350px">
-        <i slot="prefix" class="el-input__icon el-icon-search"></i>
-      </el-input>
+      <el-input v-model="fileName" @input="fileNameHandle" placeholder="请输入文件名称" clearable style="display: inline-block; width: 350px" :prefix-icon="Search"> </el-input>
     </div>
 
     <!-- // 筛选 表格 -->
@@ -14,10 +314,10 @@
       <div class="select-content">
         <div>
           <el-select style="margin-bottom: 20px" placeholder="行业" v-model="chartPermissionId" clearable @change="selectChangeHandle">
-            <el-option v-for="item in chartPermissionList" :label="item.PermissionName" :key="item.ChartPermissionId" :value="item.ChartPermissionId"></el-option>
+            <el-option v-for="item in chartPermissionList" :label="item.PermissionName" :key="item.ChartPermissionId" :value="item.ChartPermissionId"> </el-option>
           </el-select>
           <el-select v-if="tabActive == 1 || tabActive == 2" placeholder="活动类型" clearable v-model="cactivityTypeVal" @change="selectChangeHandle">
-            <el-option v-for="item in cactivityTypeList" :label="item.ActivityTypeName" :key="item.ActivityTypeId" :value="item.ActivityTypeId"></el-option>
+            <el-option v-for="item in cactivityTypeList" :label="item.ActivityTypeName" :key="item.ActivityTypeId" :value="item.ActivityTypeId"> </el-option>
           </el-select>
           <date-picker
             style="margin-bottom: 20px"
@@ -30,12 +330,12 @@
           >
           </date-picker>
           <el-select v-if="tabActive == 4 || tabActive == 3" placeholder="发布状态" clearable v-model="publishStatus" @change="selectChangeHandle" style="margin-bottom: 20px">
-            <el-option v-for="item in publishSelect" :label="item.name" :key="item.value" :value="item.value"></el-option>
+            <el-option v-for="item in publishSelect" :label="item.name" :key="item.value" :value="item.value"> </el-option>
           </el-select>
         </div>
         <div>
-          <el-button type="primary" v-if="tabActive === 4" @click="addEditdialogVisib = true">添加视频</el-button>
-          <el-button type="primary" v-if="tabActive === 3" @click="addEditdialogReleaseAudio = true">发布问答</el-button>
+          <el-button type="primary" v-if="tabActive === 4" @click="addEditdialogVisib = true"> 添加视频 </el-button>
+          <el-button type="primary" v-if="tabActive === 3" @click="addEditdialogReleaseAudio = true"> 发布问答 </el-button>
         </div>
       </div>
       <el-table :data="dataList" style="width: 100%" border @sort-change="sortChangeHandle">
@@ -48,20 +348,24 @@
           align="center"
           :sortable="item.key === 'VideoCounts' || item.key === 'VoiceCounts' ? 'custom' : false"
         >
-          <template slot-scope="{ row }">
-            <span @click="handleRowClick(row, item.key)" :style="handleRowStyle(item.key)">{{ handleRowContent(row, item.key) }}</span>
+          <template #default="{ row }">
+            <span @click="handleRowClick(row, item.key)" :style="handleRowStyle(item.key)">
+              {{ handleRowContent(row, item.key) }}
+            </span>
           </template></el-table-column
         >
         <el-table-column align="center" prop="LastUpdatedTime" width="170" label="操作">
-          <template slot-scope="{ row }">
+          <template #default="{ row }">
             <div v-if="tabActive === 4 || tabActive === 3">
-              <span class="editsty" @click="handlePublish(row)">{{ row.PublishStatus == 1 ? "取消发布" : "发布" }}</span>
+              <span class="editsty" @click="handlePublish(row)">
+                {{ row.PublishStatus == 1 ? "取消发布" : "发布" }}
+              </span>
               &nbsp;&nbsp;
-              <span class="editsty" @click="handleEditVideo(row, '产业')">编辑</span>
+              <span class="editsty" @click="handleEditVideo(row, '产业')"> 编辑 </span>
             </div>
             <template v-else>
-              <span class="editsty" @click="titleBtnClick(row.ActivityId)">活动详情</span>
-              <span class="editsty" @click="handleEditVideo(row, '活动')">&nbsp;&nbsp;&nbsp;&nbsp;编辑活动</span>
+              <span class="editsty" @click="titleBtnClick(row.ActivityId)"> 活动详情 </span>
+              <span class="editsty" @click="handleEditVideo(row, '活动')"> &nbsp;&nbsp;&nbsp;&nbsp;编辑活动 </span>
             </template>
           </template>
         </el-table-column>
@@ -71,279 +375,14 @@
         <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
       </el-col>
     </el-card>
-    <playDetails :playDetailsVisible.sync="playDetailsVisible" :playDetailsList.sync="playDetailsList" :tabActive="tabActive" />
-    <addVideoDlg :addEditdialogVisib.sync="addEditdialogVisib" :chartPermissionList="chartPermissionList" :playDetailsList.sync="editDetails" />
-    <atc-particulars :dialogVisible.sync="dialogVisible" :detailData.sync="detailData" />
-    <generation-ask :generaitondialogVisib.sync="generaitondialogVisib" :generaitonId="generaitonId" :generaitonType="generaitonType" :tabActiveRoadshow="tabActive" />
-    <release-audio :addEditdialogReleaseAudio.sync="addEditdialogReleaseAudio" :chartPermissionList="chartPermissionList" :playDetailsList.sync="editDetails" />
+    <playDetails v-model:playDetailsVisible="playDetailsVisible" v-model:playDetailsList="playDetailsList" :tabActive="tabActive" />
+    <addVideoDlg @getVideoList="getVideoList" v-model:addEditdialogVisib="addEditdialogVisib" :chartPermissionList="chartPermissionList" v-model:playDetailsList="editDetails" />
+    <atc-particulars v-model:dialogVisible="dialogVisible" v-model:detailData="detailData" />
+    <generation-ask v-model:generaitondialogVisib="generaitondialogVisib" :generaitonId="generaitonId" :generaitonType="generaitonType" :tabActiveRoadshow="tabActive" />
+    <release-audio @getVideoList="getVideoList" v-model:addEditdialogReleaseAudio="addEditdialogReleaseAudio" :chartPermissionList="chartPermissionList" v-model:playDetailsList="editDetails" />
   </div>
 </template>
 
-<script>
-import { raiInterface, raiVideoApi } from "@/api/api.js";
-import { tableColums, TopTabs } from "./roadShow/tableTabs";
-import { PublishSelect } from "../components/apply/applyTableColums";
-import mPage from "@/components/mPage.vue";
-import playDetails from "./roadShow/components/playDetailsDlg.vue";
-import addVideoDlg from "./roadShow/components/addVideoDlg.vue";
-import moment from "moment";
-import AtcParticulars from "../components/atcParticulars.vue";
-import GenerationAsk from "../components/generationAsk.vue";
-import ReleaseAudio from "./roadShow/components/releaseAudio.vue";
-
-export default {
-  name: "",
-  components: { mPage, playDetails, addVideoDlg, AtcParticulars, GenerationAsk, ReleaseAudio },
-  props: {},
-  data() {
-    return {
-      tableColums: [],
-      dataList: [],
-      tabActive: 1, //tabs 选中
-      chartPermissionList: [], //行业的数组
-      chartPermissionId: "", //行业的id
-      issueTime: "", //活动时间
-      cactivityTypeVal: "", //活动类型
-      cactivityTypeList: [],
-      publishStatus: "", //发布状态
-      fileName: "", //文件名称
-      total: 0, //条数
-      PageSize: 10, //每页显示几条
-      page_no: 1, //页码
-      playDetailsVisible: false, //播放详情的弹框
-      playDetailsList: {}, //播放详情的数据//编辑的详情
-      editDetails: {}, //播放详情的数据//编辑的详情
-      addEditdialogVisib: false, //添加视频的弹框
-      sortType: "",
-      detailData: [],
-      dialogVisible: false,
-      generaitondialogVisib: false, //代问的弹框
-      generaitonId: "",
-      generaitonType: "微路演",
-      addEditdialogReleaseAudio: false,
-    };
-  },
-  computed: {
-    topTabs() {
-      return TopTabs;
-    },
-    //发布状态
-    publishSelect() {
-      return PublishSelect;
-    },
-  },
-  watch: {},
-  created() {
-    if (sessionStorage.getItem("backRoadShowListPage")) {
-      let { page_no, fileName, chartPermissionId, cactivityTypeVal, issueTime, tabActive } = JSON.parse(sessionStorage.getItem("backRoadShowListPage"));
-      this.page_no = page_no;
-      this.fileName = fileName;
-      this.chartPermissionId = chartPermissionId;
-      this.cactivityTypeVal = cactivityTypeVal;
-      this.issueTime = issueTime;
-      this.tabActive = tabActive;
-    }
-  },
-  mounted() {
-    this.tableColums = tableColums(this.tabActive);
-    this.chartPermission();
-    this.activityType();
-    this.getVideoList();
-  },
-  methods: {
-    topTabsHandler(item) {
-      this.tabActive = item.value;
-      this.tableColums = tableColums(this.tabActive);
-      this.publishStatus = "";
-      this.cactivityTypeVal = "";
-      this.page_no = 1;
-      this.getVideoList();
-    },
-    //获取行业
-    async chartPermission() {
-      const res = await raiInterface.chartPermission();
-      if (res.Ret === 200) {
-        this.chartPermissionList = res.Data.List;
-      }
-    },
-    //活动类型
-    async activityType() {
-      const res = await raiInterface.getActivityType();
-      if (res.Ret === 200) {
-        this.cactivityTypeList = res.Data.List;
-      }
-    },
-    async getVideoList() {
-      // let SortParam = this.sortType && this.tabActive == 4 ? "videoCounts" : this.sortType && this.tabActive == 1 ? "voiceCounts" : "";
-      let params = {
-        PageSize: this.PageSize,
-        CurrentIndex: this.page_no,
-        KeyWord: this.fileName,
-        StartDate: this.issueTime ? this.issueTime[0] : "",
-        EndDate: this.issueTime ? this.issueTime[1] : "",
-        PublishStatus: this.publishStatus ? Number(this.publishStatus) : "",
-        ChartPermissionId: this.chartPermissionId,
-        ActivityTypeId: this.cactivityTypeVal,
-        SortType: this.sortType,
-        SortParam: "videoCounts",
-        SearchType: this.tabActive,
-      };
-      const res =
-        this.tabActive == 4
-          ? await raiVideoApi.videoList(params)
-          : this.tabActive == 1
-          ? await raiVideoApi.activityVoiceAndVideoList(params)
-          : this.tabActive == 3
-          ? await raiVideoApi.askserie_videoList(params)
-          : await raiVideoApi.activityVoiceAndVideoList(params);
-      if (res.Ret === 200) {
-        this.dataList = res.Data.List;
-        this.total = res.Data.Paging.Totals;
-      }
-    },
-    //select 筛选条件后的事件
-    selectChangeHandle() {
-      this.page_no = 1;
-      this.getVideoList();
-    },
-    //文件名称的搜索
-    fileNameHandle() {
-      this.issueTime = "";
-      this.publishStatus = "";
-      this.chartPermissionId = "";
-      this.page_no = 1;
-      this.getVideoList();
-    },
-    /* 点击表格的排序 */
-    sortChangeHandle({ prop, order }) {
-      this.sortType = order == "ascending" ? "asc" : order == "descending" ? "desc" : "";
-      this.getVideoList();
-    },
-    //分页
-    handleCurrentChange(page) {
-      this.page_no = page;
-      this.getVideoList();
-    },
-    /*
-    表格三件套
-    */
-    handleRowContent(row, key) {
-      if (key == "PublishStatus") {
-        let status = row["PublishStatus"] == 1 ? "已发布" : row["PublishStatus"] == 3 ? "已取消" : "未发布";
-        return status;
-      } else if (key == "VideoDuration" || key == "VoicePlaySeconds") {
-        let m = parseInt(row[key] / 60);
-        let s = parseInt(row[key] % 60);
-        let ms = `${m > 9 ? m : "0" + m}分${s > 9 ? s : "0" + s}秒`;
-        return ms;
-      } else {
-        return row[key];
-      }
-    },
-    handleRowStyle(key) {
-      const style = {
-        VideoCounts: "color: #409eff; cursor: pointer",
-        VoiceCounts: "color: #409eff; cursor: pointer",
-        CommentNum: "color: #409eff; cursor: pointer",
-      };
-      return style[key] ? style[key] : "";
-    },
-    //
-    handleRowClick(row, key) {
-      if (key == "VideoCounts" || key == "VoiceCounts") {
-        this.playDetailsVisible = true;
-        this.playDetailsList = row;
-      } else if (key == "CommentNum") {
-        this.generaitondialogVisib = true;
-        this.generaitonId = this.tabActive == 1 || this.tabActive == 2 ? row.ActivityId : this.tabActive == 3 ? row.AskserieVideoId : row.VideoId;
-      }
-    },
-    /*
-    表格三件套
-    */
-    //点击标题的弹框
-    titleBtnClick(id) {
-      raiInterface.activityDetail({ ActivityId: Number(id) }).then((res) => {
-        if (res.Ret == 200) {
-          this.detailData = res.Data;
-        }
-      });
-      this.dialogVisible = true;
-    },
-    //发布或者取消发布
-    handlePublish(item) {
-      let str = this.tabActive == 3 ? "音频" : "视频";
-      this.$confirm(item.PublishStatus == 1 ? `确认取消发布该${str}吗？` : `确认发布该${str}吗？`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(async () => {
-          const res =
-            this.tabActive == 3
-              ? await raiVideoApi.askseriePublishAndcancel({
-                  AskserieVideoId: item.AskserieVideoId,
-                  PublishOrCancle: item.PublishStatus == 1 ? 0 : 1,
-                })
-              : await raiVideoApi.videoPublish({
-                  VideoId: item.VideoId,
-                  PublishOrCancle: item.PublishStatus == 1 ? 0 : 1,
-                });
-          if (res.Ret === 200) {
-            this.$message.success("操作成功！");
-            this.getVideoList();
-          }
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消",
-          });
-        });
-    },
-    //编辑
-    handleEditVideo(item, type) {
-      if (type == "活动") {
-        this.$router.push({
-          path: "/editActivity",
-          query: {
-            id: item.ActivityId,
-            isShow: 1,
-          },
-        });
-      } else {
-        this.editDetails = item;
-        if (this.tabActive == 3) {
-          this.addEditdialogReleaseAudio = true;
-        } else {
-          this.addEditdialogVisib = true;
-        }
-      }
-    },
-  },
-  // 进入
-  beforeRouteEnter(to, from, next) {
-    console.log(from);
-    if (from.path !== "/editActivity") {
-      sessionStorage.removeItem("backRoadShowListPage");
-    }
-    next();
-  },
-  // 离开
-  beforeRouteLeave(to, from, next) {
-    let backData = {
-      page_no: this.page_no,
-      fileName: this.fileName,
-      chartPermissionId: this.chartPermissionId,
-      cactivityTypeVal: this.cactivityTypeVal,
-      issueTime: this.issueTime,
-      tabActive: this.tabActive,
-    };
-    sessionStorage.setItem("backRoadShowListPage", JSON.stringify(backData));
-    next();
-  },
-};
-</script>
 <style scoped lang="scss">
 .container-road-show {
   .top-wrap {

src/views/rai_manage/activityManage/specialResearch.vue

@@ -1,3 +1,368 @@
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  beforeRouteEnter(to, from, next) {
+    if (from.path !== "/addResearch" && from.path !== "/determineTravel" && from.path !== "/editResearch") {
+      sessionStorage.removeItem("specialResearchListBack");
+    }
+    next();
+  },
+});
+</script>
+
+<script setup>
+import { ref, watch, onMounted, reactive, computed, toRefs } from "vue";
+import { raiInterface, raiSpecial } from "@/api/api.js";
+import mPage from "@/components/mPage.vue";
+import { inAdvanceOptions, tableColums, TabsTop, ConfirmOptions } from "../components/special/optionsTabs";
+import ParticalDialog from "../components/particalDialog.vue";
+import ApplyDialog from "../components/apply/applyDialog.vue";
+import ParticularsAll from "./specialResearch/particularsAll.vue";
+import SpecialResearchDlg from "../components/special/specialResearchDlg.vue";
+import TemplateMessage from "../components/apply/templateMessage.vue";
+
+import { ElMessageBox, ElMessage } from "element-plus";
+import moment from "moment";
+
+import { Search } from "@element-plus/icons-vue";
+
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  status: "",
+  industryValue: "",
+  chartPermissionList: [],
+  themeVal: "",
+  dataList: [],
+  page_no: 1,
+  total: 0,
+  dialogVisibleActivity: false,
+  dialogTitle: "",
+  activityDetail: {},
+  previewList: [],
+  interestData: [], //感兴趣人数
+  exportInterest: "",
+  tableColums: [],
+  tabsActive: 1,
+  offlineId: 0, //提交的ID
+  dialogVisiblepartica: false, //到会详情的隐现
+  particlaDlg: {
+    isSpecial: true,
+    title: "到会详情",
+  }, //提交的标题
+  submitDialog: false, //提交到会情况的隐现
+  addDialogVisible: false,
+  signUpAdd: "专项",
+  addDialogType: "新增报名",
+
+  particularsDialogVisible: false,
+  dialogVisibleList: {},
+  specialDetailId: 0,
+  selectList: [],
+  messageDialogVisible: false, // 发送模版消息
+  selectionArr: {},
+});
+
+const options = computed(() => {
+  return pageState.tabsActive == 1 ? inAdvanceOptions : ConfirmOptions;
+});
+
+const tabsTop = computed(() => {
+  return TabsTop;
+});
+
+//点击了头部切换
+function tabsHandle(item) {
+  pageState.tabsActive = item.id;
+  pageState.tableColums = tableColums(pageState.tabsActive);
+  pageState.status = "";
+  pageState.page_no = 1;
+  getsDataList();
+}
+//change 变化
+function changeHandel() {
+  pageState.page_no = 1;
+  getsDataList();
+}
+//分页
+function handleCurrentChange(page) {
+  pageState.page_no = page;
+  getsDataList();
+}
+//获取表格
+async function getsDataList() {
+  const res = await raiSpecial.getSpecialList({
+    PageSize: 10,
+    CurrentIndex: pageState.page_no,
+    PublishStatus: pageState.status ? Number(pageState.status) : 2,
+    ChartPermissionId: pageState.industryValue,
+    IsTrip: pageState.tabsActive == 2,
+    KeyWord: pageState.themeVal,
+  });
+  if (res.Ret === 200) {
+    pageState.dataList = res.Data.List;
+    pageState.total = res.Data.Paging.Totals;
+  }
+}
+//获取行业
+function chartPermission() {
+  raiInterface.getActivitySpecial().then((res) => {
+    if (res.Ret === 200) {
+      pageState.chartPermissionList = res.Data.List;
+    }
+  });
+}
+//获取调研主题详情
+async function themeDetails(id) {
+  pageState.specialDetailId = id;
+  pageState.dialogVisibleActivity = true;
+  pageState.dialogTitle = "活动详情";
+
+  return;
+  const res = await raiSpecial.specialDetail({ ActivityId: id });
+  if (res.Ret === 200) {
+    pageState.previewList = [];
+    pageState.activityDetail = res.Data;
+    pageState.previewList.push(pageState.tabsActive == 1 ? pageState.activityDetail.TripImgLink : pageState.activityDetail.TripImgLinkFix);
+  }
+}
+//感兴趣人数
+async function interestDetails(id) {
+  pageState.specialDetailId = id;
+  pageState.dialogTitle = "感兴趣人数";
+  pageState.dialogVisibleActivity = true;
+  return;
+  const res = await raiSpecial.specialInterested({ ActivityId: id });
+  if (res.Ret === 200) {
+    pageState.exportInterest = `${import.meta.env.VITE_APP_API_ROOT}/cygx/special/export?${localStorage.getItem("auth") || ""}&ActivityId=${id}`;
+    nextTick(() => {
+      pageState.interestData = res.Data.List;
+    });
+  }
+}
+//发布、取消发布 、删除、下线、重新发布、取消发布
+function applyHandleAllOperate(id, value) {
+  ElMessageBox.confirm(`确定${value}该活动吗？`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      const res =
+        value == "删除"
+          ? await raiSpecial.specialDelete({
+              ActivityId: id,
+            })
+          : value == "发布"
+          ? await raiSpecial.specialPublishAndCancel({
+              ActivityId: id,
+            })
+          : value == "下线"
+          ? await await raiSpecial.postSpecialOffline({
+              ActivityId: id,
+            })
+          : value == "取消发布"
+          ? await raiSpecial.specialPublishAndCancel({
+              ActivityId: id,
+            })
+          : value == "重新发布" && pageState.tabsActive == 1
+          ? await await await raiSpecial.postSpecialOffline({
+              ActivityId: id,
+            })
+          : await await raiSpecial.specialPublishAndCancel({
+              ActivityId: id,
+            });
+
+      if (res.Ret !== 200) return;
+      ElMessage.success(`${value}成功!`);
+      if (value == "删除") {
+        let page_num = Math.ceil((pageState.total - 1) / 10);
+        if (pageState.page_no > page_num) {
+          pageState.page_no = page_num;
+        }
+      }
+      getsDataList();
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: `已取消${value}`,
+      });
+    });
+}
+//点击了编辑
+function editBtn(id, show, type = "") {
+  type == ""
+    ? $router.push({
+        path: "/editResearch",
+        query: { id, isShow: show },
+      })
+    : $router.push({
+        path: "/determineTravel",
+        query: { id },
+      });
+}
+//提交到会情况
+function particularsSubmit(id) {
+  pageState.offlineId = id;
+  pageState.submitDialog = true;
+}
+//到会详情
+function particulars(id) {
+  pageState.offlineId = id;
+  pageState.dialogVisiblepartica = true;
+}
+function handleCloseSubject() {
+  pageState.dialogTitle = "";
+  pageState.exportInterest = "";
+  pageState.activityDetail = {};
+  pageState.dialogVisibleActivity = false;
+}
+//感兴趣人数总览
+function interestHandler() {
+  let routeUrl = $router.resolve("/interestAllPreview");
+  window.open(routeUrl.href, "_blank");
+}
+function applyNum(item) {
+  pageState.particularsDialogVisible = true;
+  pageState.dialogVisibleList = item;
+}
+/* 表格行的样式 */
+function handleRowStyle(key) {
+  const style = {
+    ResearchTheme: "color: #409eff; cursor: pointer",
+    InterestedNum: "color: #409eff; cursor: pointer",
+    SignupPeopleNum: "color: #409eff; cursor: pointer",
+  };
+  return style[key] ? style[key] : "";
+}
+/* 表格行的点击事件 */
+function handleRowClick(row, key) {
+  if (key === "ResearchTheme") {
+    themeDetails(row.ActivityId);
+  } else if (key === "InterestedNum") {
+    interestDetails(row.ActivityId);
+  } else if (key === "SignupPeopleNum") {
+    applyNum(row);
+  }
+}
+/* 表格行的数据处理 */
+function handleRowContent(row, key) {
+  if (key == "SpecialType") {
+    return row[key] == 1 ? "线上" : `线下(${row["City"]})`;
+  } else if (key == "PublishStatus") {
+    return row[key] == 1
+      ? "已发布"
+      : row[key] == 0 && pageState.tabsActive == 1
+      ? "未发布"
+      : row[key] == 0 && pageState.tabsActive == 2
+      ? "已取消"
+      : row[key] == 3
+      ? "已下线"
+      : row[key] == 4
+      ? "已确定行程"
+      : "";
+  } else if (key == "InterestedNum") {
+    return row[key] ? row[key] : "";
+  } else {
+    return row[key];
+  }
+}
+// 新增活动报名
+function addapply() {
+  if (!this.selectList) returnElMessage.error("请先选择活动");
+  pageState.addDialogVisible = true;
+}
+// 新增活动报名的表格选择
+function selectChange(selection) {
+  pageState.selectionArr = selection;
+  let arr = [];
+  selection.forEach((item) => {
+    arr.push(item.ActivityId);
+  });
+  pageState.selectList = arr.join(",");
+}
+// 判断活动时间对比当前时间
+function isStart(val) {
+  return moment().isBefore(val);
+}
+// 主题名称的输入框
+function themeInput() {
+  pageState.page_no = 1;
+  pageState.status = "";
+  pageState.industryValue = "";
+  getsDataList();
+}
+// 发送模版消息
+function sendMessage() {
+  if (pageState.selectList && pageState.selectList.split(",").length === 1) {
+    pageState.messageDialogVisible = true;
+  } else {
+    ElMessage.error("请选择一个活动");
+  }
+}
+
+onMounted(() => {
+  if (sessionStorage.getItem("specialResearchListBack")) {
+    let { tabsActive, page, status, industryValue, themeVal } = JSON.parse(sessionStorage.getItem("specialResearchListBack"));
+    pageState.themeVal = themeVal;
+    pageState.page_no = page;
+    pageState.tabsActive = tabsActive;
+    pageState.status = status;
+    pageState.industryValue = industryValue;
+  }
+  chartPermission();
+  getsDataList();
+  pageState.tableColums = tableColums(pageState.tabsActive);
+});
+
+onBeforeRouteLeave((to, from, next) => {
+  let obj = {
+    page: pageState.page_no,
+    tabsActive: pageState.tabsActive,
+    status: pageState.status,
+    industryValue: pageState.industryValue,
+    themeVal: pageState.themeVal,
+  };
+  sessionStorage.setItem("specialResearchListBack", JSON.stringify(obj));
+  next();
+});
+
+const {
+  status,
+  industryValue,
+  chartPermissionList,
+  themeVal,
+  dataList,
+  page_no,
+  total,
+  dialogVisibleActivity,
+  dialogTitle,
+  activityDetail,
+  previewList,
+  interestData, //感兴趣人数
+  exportInterest,
+  tableColums,
+  tabsActive,
+  offlineId, //提交的ID
+  dialogVisiblepartica, //到会详情的隐现
+  particlaDlg, //提交的标题
+  submitDialog, //提交到会情况的隐现
+  addDialogVisible,
+  signUpAdd,
+  addDialogType,
+  particularsDialogVisible,
+  dialogVisibleList,
+  specialDetailId,
+  selectList,
+  messageDialogVisible, // 发送模版消息
+  selectionArr,
+} = toRefs(pageState);
+</script>
+
 <template>
   <div class="container special-research">
     <div class="top-wrap">
@@ -21,21 +386,19 @@
         </template>
       </div>
       <div style="width: 520px">
-        <el-input v-model="themeVal" @input="themeInput" placeholder="请输入主题名称" clearable>
-          <i slot="prefix" class="el-input__icon el-icon-search"></i>
-        </el-input>
+        <el-input v-model="themeVal" @input="themeInput" placeholder="请输入主题名称" clearable :prefix-icon="Search"> </el-input>
       </div>
     </div>
     <el-card>
       <el-table @selection-change="selectChange" :data="dataList" style="width: 100%; margin-top: 20px" border>
         <el-table-column v-if="tabsActive == 2" align="center" type="selection" width="55"> </el-table-column>
         <el-table-column v-for="item in tableColums" :key="item.label" :label="item.label" :width="item.widthsty" :min-width="item.minwidthsty" align="center">
-          <template slot-scope="{ row }">
+          <template #default="{ row }">
             <span @click="handleRowClick(row, item.key)" :style="handleRowStyle(item.key)">{{ handleRowContent(row, item.key) }}</span>
           </template>
         </el-table-column>
         <el-table-column width="230" prop="" align="center" label="操作">
-          <template slot-scope="{ row }">
+          <template #default="{ row }">
             <div v-if="tabsActive == 1">
               <template v-if="row.PublishStatus !== 4">
                 <span class="editsty" v-if="row.PublishStatus == 1" @click="applyHandleAllOperate(row.ActivityId, '下线')">下线 &nbsp;&nbsp;</span>
@@ -62,336 +425,14 @@
         <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
       </el-col>
     </el-card>
-    <special-research-dlg :specialDetailId="specialDetailId" :dialogVisibleActivity.sync="dialogVisibleActivity" :dialogTitle="dialogTitle" :tabsActive="tabsActive" />
-    <partical-dialog :offlineId="offlineId" :dialogVisiblepartica.sync="dialogVisiblepartica" :particlaDlg="particlaDlg" :submitDialog.sync="submitDialog" />
-    <apply-dialog :addDialogVisible.sync="addDialogVisible" :selectList="selectList" :signUpAdd="signUpAdd" :addDialogType="addDialogType" />
-    <particulars-all :particularsDialogVisible.sync="particularsDialogVisible" :dialogVisibleList="dialogVisibleList" />
-    <template-message :messageDialog.sync="messageDialogVisible" :selectionArr="selectionArr" typeMessage="确定行程"/>
+    <special-research-dlg :specialDetailId="specialDetailId" v-model:dialogVisibleActivity="dialogVisibleActivity" :dialogTitle="dialogTitle" :tabsActive="tabsActive" />
+    <partical-dialog @getsDataList="getsDataList" @particulars="particulars" :offlineId="offlineId" v-model:dialogVisiblepartica="dialogVisiblepartica" :particlaDlg="particlaDlg" v-model:submitDialog="submitDialog" />
+    <apply-dialog v-model:addDialogVisible="addDialogVisible" :selectList="selectList" :signUpAdd="signUpAdd" :addDialogType="addDialogType" @getsDataList="getsDataList" />
+    <particulars-all v-model:particularsDialogVisible="particularsDialogVisible" :dialogVisibleList="dialogVisibleList"  @getsDataList="getsDataList"/>
+    <template-message v-model:messageDialog="messageDialogVisible" :selectionArr="selectionArr" typeMessage="确定行程" />
   </div>
 </template>
 
-<script>
-import { raiInterface, raiSpecial } from "@/api/api.js";
-import mPage from "@/components/mPage.vue";
-import { inAdvanceOptions, tableColums, TabsTop, ConfirmOptions } from "../components/special/optionsTabs";
-import ParticalDialog from "../components/particalDialog.vue";
-import ApplyDialog from "../components/apply/applyDialog.vue";
-import ParticularsAll from "./specialResearch/particularsAll.vue";
-import SpecialResearchDlg from "../components/special/specialResearchDlg.vue";
-import TemplateMessage from "../components/apply/templateMessage.vue";
-export default {
-  name: "",
-  components: { mPage, ParticalDialog, ApplyDialog, ParticularsAll, SpecialResearchDlg, TemplateMessage },
-  props: {},
-  data() {
-    return {
-      status: "",
-      industryValue: "",
-      chartPermissionList: [],
-      themeVal: "",
-      dataList: [],
-      page_no: 1,
-      total: 0,
-      dialogVisibleActivity: false,
-      dialogTitle: "",
-      activityDetail: {},
-      previewList: [],
-      interestData: [], //感兴趣人数
-      exportInterest: "",
-      tableColums: [],
-      tabsActive: 1,
-      offlineId: 0, //提交的ID
-      dialogVisiblepartica: false, //到会详情的隐现
-      particlaDlg: {
-        isSpecial: true,
-        title: "到会详情",
-      }, //提交的标题
-      submitDialog: false, //提交到会情况的隐现
-      addDialogVisible: false,
-      signUpAdd: "专项",
-      addDialogType: "新增报名",
-
-      particularsDialogVisible: false,
-      dialogVisibleList: {},
-      specialDetailId: 0,
-      selectList: [],
-      messageDialogVisible: false, // 发送模版消息
-      selectionArr: {},
-    };
-  },
-  computed: {
-    options() {
-      return this.tabsActive == 1 ? inAdvanceOptions : ConfirmOptions;
-    },
-    tabsTop() {
-      return TabsTop;
-    },
-  },
-  created() {},
-  mounted() {
-    if (sessionStorage.getItem("specialResearchListBack")) {
-      let { tabsActive, page, status, industryValue, themeVal } = JSON.parse(sessionStorage.getItem("specialResearchListBack"));
-      this.themeVal = themeVal;
-      this.page_no = page;
-      this.tabsActive = tabsActive;
-      this.status = status;
-      this.industryValue = industryValue;
-    }
-    this.chartPermission();
-    this.getsDataList();
-    this.tableColums = tableColums(this.tabsActive);
-  },
-  methods: {
-    //点击了头部切换
-    tabsHandle(item) {
-      this.tabsActive = item.id;
-      this.tableColums = tableColums(this.tabsActive);
-      this.status = "";
-      this.page_no = 1;
-      this.getsDataList();
-    },
-    //change 变化
-    changeHandel() {
-      this.page_no = 1;
-      this.getsDataList();
-    },
-    //分页
-    handleCurrentChange(page) {
-      this.page_no = page;
-      this.getsDataList();
-    },
-    //获取表格
-    async getsDataList() {
-      const res = await raiSpecial.getSpecialList({
-        PageSize: 10,
-        CurrentIndex: this.page_no,
-        PublishStatus: this.status ? Number(this.status) : 2,
-        ChartPermissionId: this.industryValue,
-        IsTrip: this.tabsActive == 2,
-        KeyWord: this.themeVal,
-      });
-      if (res.Ret === 200) {
-        this.dataList = res.Data.List;
-        this.total = res.Data.Paging.Totals;
-      }
-    },
-    //获取行业
-    chartPermission() {
-      raiInterface.getActivitySpecial().then((res) => {
-        if (res.Ret === 200) {
-          this.chartPermissionList = res.Data.List;
-        }
-      });
-    },
-    //获取调研主题详情
-    async themeDetails(id) {
-      this.specialDetailId = id;
-      this.dialogVisibleActivity = true;
-      this.dialogTitle = "活动详情";
-
-      return;
-      const res = await raiSpecial.specialDetail({ ActivityId: id });
-      if (res.Ret === 200) {
-        this.previewList = [];
-        this.activityDetail = res.Data;
-        this.previewList.push(this.tabsActive == 1 ? this.activityDetail.TripImgLink : this.activityDetail.TripImgLinkFix);
-      }
-    },
-    //感兴趣人数
-    async interestDetails(id) {
-      this.specialDetailId = id;
-      this.dialogTitle = "感兴趣人数";
-      this.dialogVisibleActivity = true;
-      return;
-      const res = await raiSpecial.specialInterested({ ActivityId: id });
-      if (res.Ret === 200) {
-        this.exportInterest = `${import.meta.env.VITE_APP_API_ROOT}/cygx/special/export?${localStorage.getItem("auth") || ""}&ActivityId=${id}`;
-        this.$nextTick(() => {
-          this.interestData = res.Data.List;
-        });
-      }
-    },
-    //发布、取消发布 、删除、下线、重新发布、取消发布
-    applyHandleAllOperate(id, value) {
-      this.$confirm(`确定${value}该活动吗？`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(async () => {
-          const res =
-            value == "删除"
-              ? await raiSpecial.specialDelete({
-                  ActivityId: id,
-                })
-              : value == "发布"
-              ? await raiSpecial.specialPublishAndCancel({
-                  ActivityId: id,
-                })
-              : value == "下线"
-              ? await await raiSpecial.postSpecialOffline({
-                  ActivityId: id,
-                })
-              : value == "取消发布"
-              ? await raiSpecial.specialPublishAndCancel({
-                  ActivityId: id,
-                })
-              : value == "重新发布" && this.tabsActive == 1
-              ? await await await raiSpecial.postSpecialOffline({
-                  ActivityId: id,
-                })
-              : await await raiSpecial.specialPublishAndCancel({
-                  ActivityId: id,
-                });
-
-          if (res.Ret !== 200) return;
-          this.$message.success(`${value}成功!`);
-          if (value == "删除") {
-            let page_num = Math.ceil((this.total - 1) / 10);
-            if (this.page_no > page_num) {
-              this.page_no = page_num;
-            }
-          }
-          this.getsDataList();
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: `已取消${value}`,
-          });
-        });
-    },
-    //点击了编辑
-    editBtn(id, show, type = "") {
-      type == ""
-        ? this.$router.push({
-            path: "/editResearch",
-            query: { id, isShow: show },
-          })
-        : this.$router.push({
-            path: "/determineTravel",
-            query: { id },
-          });
-    },
-    //提交到会情况
-    particularsSubmit(id) {
-      this.offlineId = id;
-      this.submitDialog = true;
-    },
-    //到会详情
-    particulars(id) {
-      this.offlineId = id;
-      this.dialogVisiblepartica = true;
-    },
-    handleCloseSubject() {
-      this.dialogTitle = "";
-      this.exportInterest = "";
-      this.activityDetail = {};
-      this.dialogVisibleActivity = false;
-    },
-    //感兴趣人数总览
-    interestHandler() {
-      let routeUrl = this.$router.resolve("/interestAllPreview");
-      window.open(routeUrl.href, "_blank");
-    },
-    applyNum(item) {
-      this.particularsDialogVisible = true;
-      this.dialogVisibleList = item;
-    },
-    /* 表格行的样式 */
-    handleRowStyle(key) {
-      const style = {
-        ResearchTheme: "color: #409eff; cursor: pointer",
-        InterestedNum: "color: #409eff; cursor: pointer",
-        SignupPeopleNum: "color: #409eff; cursor: pointer",
-      };
-      return style[key] ? style[key] : "";
-    },
-    /* 表格行的点击事件 */
-    handleRowClick(row, key) {
-      if (key === "ResearchTheme") {
-        this.themeDetails(row.ActivityId);
-      } else if (key === "InterestedNum") {
-        this.interestDetails(row.ActivityId);
-      } else if (key === "SignupPeopleNum") {
-        this.applyNum(row);
-      }
-    },
-    /* 表格行的数据处理 */
-    handleRowContent(row, key) {
-      if (key == "SpecialType") {
-        return row[key] == 1 ? "线上" : `线下(${row["City"]})`;
-      } else if (key == "PublishStatus") {
-        return row[key] == 1
-          ? "已发布"
-          : row[key] == 0 && this.tabsActive == 1
-          ? "未发布"
-          : row[key] == 0 && this.tabsActive == 2
-          ? "已取消"
-          : row[key] == 3
-          ? "已下线"
-          : row[key] == 4
-          ? "已确定行程"
-          : "";
-      } else if (key == "InterestedNum") {
-        return row[key] ? row[key] : "";
-      } else {
-        return row[key];
-      }
-    },
-    // 新增活动报名
-    addapply() {
-      if (!this.selectList) return this.$message.error("请先选择活动");
-      this.addDialogVisible = true;
-    },
-    // 新增活动报名的表格选择
-    selectChange(selection) {
-      this.selectionArr = selection;
-      let arr = [];
-      selection.forEach((item) => {
-        arr.push(item.ActivityId);
-      });
-      this.selectList = arr.join(",");
-    },
-    // 判断活动时间对比当前时间
-    isStart(val) {
-      return this.$moment().isBefore(val);
-    },
-    // 主题名称的输入框
-    themeInput() {
-      this.page_no = 1;
-      this.status = "";
-      this.industryValue = "";
-      this.getsDataList();
-    },
-    // 发送模版消息
-    sendMessage() {
-      if (this.selectList && this.selectList.split(",").length === 1) {
-        this.messageDialogVisible = true;
-      } else {
-        this.$message.error("请选择一个活动");
-      }
-    },
-  },
-  beforeRouteEnter(to, from, next) {
-    if (from.path !== "/addResearch" && from.path !== "/determineTravel" && from.path !== "/editResearch") {
-      sessionStorage.removeItem("specialResearchListBack");
-    }
-    next();
-  },
-  beforeRouteLeave(to, from, next) {
-    let obj = {
-      page: this.page_no,
-      tabsActive: this.tabsActive,
-      status: this.status,
-      industryValue: this.industryValue,
-      themeVal: this.themeVal,
-    };
-    sessionStorage.setItem("specialResearchListBack", JSON.stringify(obj));
-    next();
-  },
-};
-</script>
 <style scoped lang="scss">
 .special-research {
   .top-wrap {

src/views/rai_manage/activityManage/specialResearch/addResearch.vue

@@ -1,3 +1,375 @@
+<script setup>
+import { ref, watch, onMounted, reactive, computed, toRefs } from "vue";
+
+import { raiInterface, raiSpecial } from "@/api/api.js";
+import CryptoJS from "@/api/crypto.js";
+import _ from "lodash";
+
+import { ElMessage } from "element-plus";
+
+import { useRouter, useRoute } from "vue-router";
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  baseApi: import.meta.env.VITE_APP_API_ROOT,
+  ruleForm: {
+    theme: "", //主题
+    industry: "", //行业
+    date: "", //时间
+    property: [], //产业
+    mark: [], //标的
+    checkAll: true, ////套餐类型
+    checkedCities: [], //套餐类型
+    Poster: [],
+    modality: "", //调研形式
+    city: "", //城市
+    isMark: false, //小程序内显示标的名称
+  },
+  rules: {
+    industry: [{ required: true, message: "请选择行业", trigger: "change" }],
+    theme: [{ required: true, message: "请输入调研主题", trigger: "blur" }],
+    date: [{ required: true, message: "请输入预期活动时间", trigger: "blur" }],
+    checkedCities: [{ required: true, message: "请选择套餐类型", trigger: "change" }],
+    property: [{ required: true, message: "请选择产业名称", trigger: "change" }],
+    modality: [{ required: true, message: "请选择调研形式", trigger: "change" }],
+    Poster: [{ required: true, message: "请上传行程", trigger: "change" }],
+  },
+  dialogImageUrl: "",
+  dialogVisible: false,
+  chartPermissionList: [],
+  defaultProps: {
+    label: "PermissionName",
+    children: "List",
+    value: "ChartPermissionId",
+  },
+  markOptions: [],
+  industryArr: [],
+  radioTemporary: false, //临时标签
+  valTemporary: "", //标签名称
+  cities: [],
+  isIndeterminate: false,
+  dialogVisibleSubject: false,
+  addSubjectName: "",
+  addSubjectOptions: "",
+  nameSubjectOptions: [],
+  isShowSubject: false,
+  ListSubject: [],
+  checkedCitiesTwo: "",
+  modalityRadio: [
+    { name: "线上", id: 1 },
+    { name: "线下", id: 2 },
+  ],
+  publishStatus: true,
+  addSubjectData: [],
+});
+
+watch(
+  () => pageState.radioTemporary,
+  () => {
+    if (pageState.radioTemporary) {
+      pageState.selectDisabled = true;
+    } else {
+      pageState.valTemporary = "";
+      pageState.selectDisabled = false;
+    }
+  }
+);
+
+watch(
+  () => pageState.ruleForm.modality,
+  () => {
+    if (newval) {
+      pageState.ruleForm.city = "";
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
+const uploadDisabled = computed(() => {
+  return pageState.ruleForm.Poster.length > 0;
+});
+
+onMounted(() => {
+  customerTypelist();
+  chartPermission();
+  getIndustry();
+  if ($route.query.id) {
+    themeDetails($route.query.id);
+  }
+  if ($route.query.isShow == 1) {
+    pageState.publishStatus = false;
+  }
+});
+
+//获取行业
+function chartPermission() {
+  raiInterface.getActivitySpecial().then((res) => {
+    if (res.Ret === 200) {
+      pageState.chartPermissionList = res.Data.List;
+    }
+  });
+}
+/* 获取全部的行业 */
+function getIndustry() {
+  raiInterface.getListIndustrial().then((res) => {
+    if (res.Ret === 200) {
+      pageState.industryArr = res.Data.List || [];
+    }
+  });
+}
+//点击添加标的的下拉选择框
+function markSelectFocus() {
+  if (!pageState.ruleForm.property.length) {
+    ElMessage.error("请先选择产业");
+  } else {
+    let arr = [];
+    arr = pageState.ruleForm.property.map((item) => {
+      return item[1];
+    });
+    raiInterface
+      .getindustrialSubjectlistIds({
+        IndustrialManagementIdStr: arr.join(","),
+      })
+      .then((res) => {
+        if (res.Ret === 200) {
+          pageState.markOptions = res.Data.List || [];
+        }
+      });
+  }
+}
+//获取多选的客户列表
+function customerTypelist() {
+  raiInterface.customerTypelist({ IsZxdy: true }).then((res) => {
+    if (res.Ret === 200) {
+      pageState.ruleForm.checkedCities = res.Data.List && res.Data.List.map((item) => item.CustomerTypeId);
+      pageState.cities = res.Data.List;
+    }
+  });
+}
+// 上传成功回调
+function handleUploadPosterSuccess(response, file, fileList) {
+  let upload_list = [];
+  fileList.forEach((item) => {
+    let obj = {
+      ...item,
+      response: process.env.NODE_ENV === "production" ? JSON.parse(CryptoJS.Des3Decrypt(item.response)) : item.response,
+    };
+    upload_list.push(obj);
+  });
+  console.log(upload_list);
+  pageState.ruleForm.Poster = upload_list.map((item) => {
+    return { name: item.response.Data.ResourceName, ...item };
+  });
+}
+// 删除上传的
+function handlePosterRemove(file, fileList) {
+  pageState.ruleForm.Poster = fileList;
+}
+//预览查看
+function handlePictureCardPreview(file) {
+  pageState.dialogImageUrl = file.url;
+  pageState.dialogVisible = true;
+}
+//全选框
+function handleCheckAllChange(val) {
+  if (val) {
+    let newCodeList = pageState.cities.map((item) => item.CustomerTypeId);
+    pageState.ruleForm.checkedCities = newCodeList;
+  } else {
+    pageState.ruleForm.checkedCities = [];
+  }
+  pageState.checkedCitiesTwo = pageState.ruleForm.checkedCities.join(",");
+  pageState.isIndeterminate = false;
+}
+//全选框
+function handleCheckedCitiesChange(value) {
+  let checkedCount = value.length;
+  pageState.ruleForm.checkAll = checkedCount === pageState.cities.length;
+  pageState.isIndeterminate = checkedCount > 0 && checkedCount < pageState.cities.length;
+}
+//弹框的删除标的
+async function remoteMethod(query) {
+  if (query !== "") {
+    const res = await raiInterface.industrialSubjectSearch({
+      KeyWord: query,
+    });
+    if (res.Ret === 200) {
+      pageState.addSubjectOptions = res.Data.List || [];
+    }
+  }
+}
+//弹框的表的 change 事件
+async function searchInfo(val) {
+  if (val !== "") {
+    const res = await raiInterface.industrialSubjectSearchInfo({
+      KeyWord: val,
+    });
+    if (res.Ret === 200) {
+      pageState.isShowSubject = res.Data.List ? false : true;
+      let arrList = [];
+      arrList = res.Data.List
+        ? res.Data.List.map((item) => {
+            let arr = [];
+            item.List.forEach((key) => {
+              arr.push(key.Name);
+            });
+            return {
+              ...item,
+              value: arr.join(","),
+            };
+          })
+        : [];
+      pageState.nameSubjectOptions = arrList;
+    }
+  } else {
+    pageState.nameSubjectOptions = [];
+  }
+}
+//获取调研主题详情
+async function themeDetails(id) {
+  const res = await raiSpecial.specialDetail({ ActivityId: id });
+  if (res.Ret === 200) {
+    let { Data } = res;
+    let checkedCount = Data.CustomerTypeIds ? res.Data.CustomerTypeIds.split(",").length : "";
+    let checkAll = checkedCount === pageState.cities.length;
+    pageState.isIndeterminate = checkedCount > 0 && checkedCount < pageState.cities.length;
+    pageState.ruleForm = {
+      theme: Data.ResearchTheme, //主题
+      industry: Data.ChartPermissionName, //行业
+      date: Data.ActivityTimeText, //时间
+      property: Data.ListIndustrial ? Data.ListIndustrial.map((item) => [item.ChartPermissionId, item.IndustrialManagementId]) : [], //产业
+      mark: Data.ListSubject ? Data.ListSubject.map((item) => item.IndustrialSubjectId) : [], //标的
+      checkAll, ////套餐类型
+      checkedCities: Data.CustomerTypeIds.split(",").map((item) => Number(item)), //套餐类型
+      Poster: [{ name: "xxx.jpeg", url: Data.TripImgLink }],
+      modality: Data.SpecialType,
+      city: Data.City,
+      isMark: Data.IsShowSubjectName == 1 ? true : false,
+    };
+    pageState.valTemporary = Data.TemporaryLabel;
+    pageState.radioTemporary = pageState.valTemporary ? true : false;
+    Data.TemporarySubject &&
+      Data.TemporarySubject.split(",").forEach((item) => {
+        pageState.addSubjectData.push({ subjectVal: item });
+      });
+    if (pageState.ruleForm.mark.length) {
+      markSelectFocus();
+    }
+  }
+}
+function handleCloseSubject() {
+  pageState.nameSubjectOptions = [];
+  pageState.addSubjectName = "";
+  pageState.addSubjectOptions = [];
+  pageState.dialogVisibleSubject = false;
+}
+
+const ruleFormList = ref(null);
+//保持或者发布
+const submitForm = _.debounce(function (type) {
+  if (pageState.selectDisabled) {
+    if (!pageState.valTemporary) return ElMessage.error("请输入临时标签");
+    let validateFieldList = [];
+    ruleFormList.value.validateField(["industry", "theme", "date", "checkedCities", "Poster", "modality"], (valid) => {
+      validateFieldList.push(valid);
+    });
+    if (pageState.ruleForm.modality == 2 && !pageState.ruleForm.city) {
+      return ElMessage.error("请输入调研城市");
+    }
+    let isPost = validateFieldList.every((item) => item === "");
+    if (isPost) {
+      postPublish(type);
+    }
+  } else {
+    ruleFormList.value.validate((valid) => {
+      if (valid) {
+        if (pageState.ruleForm.modality == 2 && !pageState.ruleForm.city) {
+          return ElMessage.error("请输入调研城市");
+        }
+        postPublish(type);
+      } else {
+        return false;
+      }
+    });
+  }
+}, 500);
+async function postPublish(type) {
+  let arr = pageState.ruleForm.property.map((item) => {
+    return item[1];
+  });
+  let PosterList = pageState.ruleForm.Poster.map((item) => {
+    if (item.response) {
+      return item.response.Data.ResourceUrl;
+    } else {
+      return item.url;
+    }
+  });
+  let subjectData = [];
+  pageState.addSubjectData.forEach((item) => subjectData.push(item.subjectVal));
+  const res = await raiSpecial.specialPreserveAndPublish({
+    ActivityId: Number($route.query.id) || 0,
+    ActivityTimeText: pageState.ruleForm.date,
+    CustomerTypeIds: pageState.ruleForm.checkedCities.join(","),
+    TemporaryLabel: pageState.valTemporary,
+    TripImgLink: PosterList.join(","),
+    IndustrialSubjectIdS: pageState.ruleForm.mark.join(","),
+    IndustrialManagementIdS: arr.join(","),
+    DoType: type == "发布" ? 1 : 0,
+    PermissionName: pageState.ruleForm.industry,
+    ResearchTheme: pageState.ruleForm.theme,
+    SpecialType: pageState.ruleForm.modality,
+    City: pageState.ruleForm.city,
+    IsShowSubjectName: pageState.ruleForm.isMark ? 1 : 0,
+    TemporarySubject: subjectData.join(","),
+  });
+  if (res.Ret === 200) {
+    ElMessage.success(type + "成功");
+    $router.back();
+  }
+}
+//点击取消的事件
+function cancelBtn() {
+  $router.back();
+}
+//点击添加标的
+function addLabelClick() {
+  pageState.addSubjectData.push({ subjectVal: "" });
+}
+//删除新增的主题标签
+function deleteSubject(index, item) {
+  pageState.addSubjectData.splice(index, 1);
+}
+
+const {
+  baseApi,
+  ruleForm,
+  rules,
+  dialogImageUrl,
+  dialogVisible,
+  chartPermissionList,
+  defaultProps,
+  markOptions,
+  industryArr,
+  radioTemporary, //临时标签
+  valTemporary, //标签名称
+  cities,
+  isIndeterminate,
+  dialogVisibleSubject,
+  addSubjectName,
+  addSubjectOptions,
+  nameSubjectOptions,
+  isShowSubject,
+  ListSubject,
+  checkedCitiesTwo,
+  modalityRadio,
+  publishStatus,
+  addSubjectData,
+} = toRefs(pageState);
+</script>
+
 <template>
   <div class="container add-research">
     <el-card>
@@ -82,7 +454,7 @@
           >
             <i class="el-icon-plus"></i>
           </el-upload>
-          <el-dialog customClass="custom-addPoster" :visible.sync="dialogVisible" :modal-append-to-body="false">
+          <el-dialog customClass="custom-addPoster" v-model="dialogVisible" :modal-append-to-body="false">
             <div class="addPoster-img">
               <img width="100%" :src="dialogImageUrl" />
             </div>
@@ -95,7 +467,7 @@
         </div>
       </el-form>
     </el-card>
-    <el-dialog width="500px" v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center title="查询标的" :visible.sync="dialogVisibleSubject" :before-close="handleCloseSubject">
+    <el-dialog width="500px" v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center title="查询标的" v-model="dialogVisibleSubject" :before-close="handleCloseSubject">
       <div>
         <el-select style="width: 100%" v-model="addSubjectName" remote :remote-method="remoteMethod" clearable filterable @change="searchInfo" placeholder="请输入标的名称">
           <el-option v-for="item in addSubjectOptions" :key="item.IndustrialSubjectId" :label="item.SubjectName" :value="item.SubjectName"> </el-option>
@@ -110,342 +482,6 @@
   </div>
 </template>
 
-<script>
-import { raiInterface, raiSpecial } from "@/api/api.js";
-import CryptoJS from "@/api/crypto.js";
-export default {
-  name: "",
-  components: {},
-  props: {},
-  data() {
-    return {
-      baseApi: import.meta.env.VITE_APP_API_ROOT,
-      ruleForm: {
-        theme: "", //主题
-        industry: "", //行业
-        date: "", //时间
-        property: [], //产业
-        mark: [], //标的
-        checkAll: true, ////套餐类型
-        checkedCities: [], //套餐类型
-        Poster: [],
-        modality: "", //调研形式
-        city: "", //城市
-        isMark: false, //小程序内显示标的名称
-      },
-      rules: {
-        industry: [{ required: true, message: "请选择行业", trigger: "change" }],
-        theme: [{ required: true, message: "请输入调研主题", trigger: "blur" }],
-        date: [{ required: true, message: "请输入预期活动时间", trigger: "blur" }],
-        checkedCities: [{ required: true, message: "请选择套餐类型", trigger: "change" }],
-        property: [{ required: true, message: "请选择产业名称", trigger: "change" }],
-        modality: [{ required: true, message: "请选择调研形式", trigger: "change" }],
-        Poster: [{ required: true, message: "请上传行程", trigger: "change" }],
-      },
-      dialogImageUrl: "",
-      dialogVisible: false,
-      chartPermissionList: [],
-      defaultProps: {
-        label: "PermissionName",
-        children: "List",
-        value: "ChartPermissionId",
-      },
-      markOptions: [],
-      industryArr: [],
-      radioTemporary: false, //临时标签
-      valTemporary: "", //标签名称
-      cities: [],
-      isIndeterminate: false,
-      dialogVisibleSubject: false,
-      addSubjectName: "",
-      addSubjectOptions: "",
-      nameSubjectOptions: [],
-      isShowSubject: false,
-      ListSubject: [],
-      checkedCitiesTwo: "",
-      modalityRadio: [
-        { name: "线上", id: 1 },
-        { name: "线下", id: 2 },
-      ],
-      publishStatus: true,
-      addSubjectData: [],
-    };
-  },
-  computed: {
-    uploadDisabled: function () {
-      return this.ruleForm.Poster.length > 0;
-    },
-  },
-  watch: {
-    radioTemporary() {
-      if (this.radioTemporary) {
-        this.selectDisabled = true;
-      } else {
-        this.valTemporary = "";
-        this.selectDisabled = false;
-      }
-    },
-    "ruleForm.modality": {
-      handler(newval) {
-        if (newval == 1) {
-          this.ruleForm.city = "";
-        }
-      },
-      deep: true,
-    },
-  },
-  created() {},
-  mounted() {
-    this.customerTypelist();
-    this.chartPermission();
-    this.getIndustry();
-    if (this.$route.query.id) {
-      this.themeDetails(this.$route.query.id);
-    }
-    if (this.$route.query.isShow == 1) {
-      this.publishStatus = false;
-    }
-  },
-  methods: {
-    //获取行业
-    chartPermission() {
-      raiInterface.getActivitySpecial().then((res) => {
-        if (res.Ret === 200) {
-          this.chartPermissionList = res.Data.List;
-        }
-      });
-    },
-    /* 获取全部的行业 */
-    getIndustry() {
-      raiInterface.getListIndustrial().then((res) => {
-        if (res.Ret === 200) {
-          this.industryArr = res.Data.List || [];
-        }
-      });
-    },
-    //点击添加标的的下拉选择框
-    markSelectFocus() {
-      if (!this.ruleForm.property.length) {
-        this.$message.error("请先选择产业");
-      } else {
-        let arr = [];
-        arr = this.ruleForm.property.map((item) => {
-          return item[1];
-        });
-        raiInterface
-          .getindustrialSubjectlistIds({
-            IndustrialManagementIdStr: arr.join(","),
-          })
-          .then((res) => {
-            if (res.Ret === 200) {
-              this.markOptions = res.Data.List || [];
-            }
-          });
-      }
-    },
-    //获取多选的客户列表
-    customerTypelist() {
-      raiInterface.customerTypelist({ IsZxdy: true }).then((res) => {
-        if (res.Ret === 200) {
-          this.ruleForm.checkedCities = res.Data.List && res.Data.List.map((item) => item.CustomerTypeId);
-          this.cities = res.Data.List;
-        }
-      });
-    },
-    // 上传成功回调
-    handleUploadPosterSuccess(response, file, fileList) {
-      let upload_list = [];
-      fileList.forEach((item) => {
-        let obj = {
-          ...item,
-          response: process.env.NODE_ENV === "production" ? JSON.parse(CryptoJS.Des3Decrypt(item.response)) : item.response,
-        };
-        upload_list.push(obj);
-      });
-      console.log(upload_list);
-      this.ruleForm.Poster = upload_list.map((item) => {
-        return { name: item.response.Data.ResourceName, ...item };
-      });
-    },
-    // 删除上传的
-    handlePosterRemove(file, fileList) {
-      this.ruleForm.Poster = fileList;
-    },
-    //预览查看
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
-    },
-    //全选框
-    handleCheckAllChange(val) {
-      if (val) {
-        let newCodeList = this.cities.map((item) => item.CustomerTypeId);
-        this.ruleForm.checkedCities = newCodeList;
-      } else {
-        this.ruleForm.checkedCities = [];
-      }
-      this.checkedCitiesTwo = this.ruleForm.checkedCities.join(",");
-      this.isIndeterminate = false;
-    },
-    //全选框
-    handleCheckedCitiesChange(value) {
-      let checkedCount = value.length;
-      this.ruleForm.checkAll = checkedCount === this.cities.length;
-      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
-    },
-    //弹框的删除标的
-    async remoteMethod(query) {
-      if (query !== "") {
-        const res = await raiInterface.industrialSubjectSearch({
-          KeyWord: query,
-        });
-        if (res.Ret === 200) {
-          this.addSubjectOptions = res.Data.List || [];
-        }
-      }
-    },
-    //弹框的表的 change 事件
-    async searchInfo(val) {
-      if (val !== "") {
-        const res = await raiInterface.industrialSubjectSearchInfo({
-          KeyWord: val,
-        });
-        if (res.Ret === 200) {
-          this.isShowSubject = res.Data.List ? false : true;
-          let arrList = [];
-          arrList = res.Data.List
-            ? res.Data.List.map((item) => {
-                let arr = [];
-                item.List.forEach((key) => {
-                  arr.push(key.Name);
-                });
-                return {
-                  ...item,
-                  value: arr.join(","),
-                };
-              })
-            : [];
-          this.nameSubjectOptions = arrList;
-        }
-      } else {
-        this.nameSubjectOptions = [];
-      }
-    },
-    //获取调研主题详情
-    async themeDetails(id) {
-      const res = await raiSpecial.specialDetail({ ActivityId: id });
-      if (res.Ret === 200) {
-        let { Data } = res;
-        let checkedCount = Data.CustomerTypeIds ? res.Data.CustomerTypeIds.split(",").length : "";
-        let checkAll = checkedCount === this.cities.length;
-        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
-        this.ruleForm = {
-          theme: Data.ResearchTheme, //主题
-          industry: Data.ChartPermissionName, //行业
-          date: Data.ActivityTimeText, //时间
-          property: Data.ListIndustrial ? Data.ListIndustrial.map((item) => [item.ChartPermissionId, item.IndustrialManagementId]) : [], //产业
-          mark: Data.ListSubject ? Data.ListSubject.map((item) => item.IndustrialSubjectId) : [], //标的
-          checkAll, ////套餐类型
-          checkedCities: Data.CustomerTypeIds.split(",").map((item) => Number(item)), //套餐类型
-          Poster: [{ name: "xxx.jpeg", url: Data.TripImgLink }],
-          modality: Data.SpecialType,
-          city: Data.City,
-          isMark: Data.IsShowSubjectName == 1 ? true : false,
-        };
-        this.valTemporary = Data.TemporaryLabel;
-        this.radioTemporary = this.valTemporary ? true : false;
-        Data.TemporarySubject &&
-          Data.TemporarySubject.split(",").forEach((item) => {
-            this.addSubjectData.push({ subjectVal: item });
-          });
-        if (this.ruleForm.mark.length) {
-          this.markSelectFocus();
-        }
-      }
-    },
-    handleCloseSubject() {
-      this.nameSubjectOptions = [];
-      this.addSubjectName = "";
-      this.addSubjectOptions = [];
-      this.dialogVisibleSubject = false;
-    },
-    //保持或者发布
-    submitForm: _.debounce(function (type) {
-      if (this.selectDisabled) {
-        if (!this.valTemporary) return this.$message.error("请输入临时标签");
-        let validateFieldList = [];
-        this.$refs.ruleFormList.validateField(["industry", "theme", "date", "checkedCities", "Poster", "modality"], (valid) => {
-          validateFieldList.push(valid);
-        });
-        if (this.ruleForm.modality == 2 && !this.ruleForm.city) {
-          return this.$message.error("请输入调研城市");
-        }
-        let isPost = validateFieldList.every((item) => item === "");
-        if (isPost) {
-          this.postPublish(type);
-        }
-      } else {
-        this.$refs.ruleFormList.validate((valid) => {
-          if (valid) {
-            if (this.ruleForm.modality == 2 && !this.ruleForm.city) {
-              return this.$message.error("请输入调研城市");
-            }
-            this.postPublish(type);
-          } else {
-            return false;
-          }
-        });
-      }
-    }, 500),
-    async postPublish(type) {
-      let arr = this.ruleForm.property.map((item) => {
-        return item[1];
-      });
-      let PosterList = this.ruleForm.Poster.map((item) => {
-        if (item.response) {
-          return item.response.Data.ResourceUrl;
-        } else {
-          return item.url;
-        }
-      });
-      let subjectData = [];
-      this.addSubjectData.forEach((item) => subjectData.push(item.subjectVal));
-      const res = await raiSpecial.specialPreserveAndPublish({
-        ActivityId: Number(this.$route.query.id) || 0,
-        ActivityTimeText: this.ruleForm.date,
-        CustomerTypeIds: this.ruleForm.checkedCities.join(","),
-        TemporaryLabel: this.valTemporary,
-        TripImgLink: PosterList.join(","),
-        IndustrialSubjectIdS: this.ruleForm.mark.join(","),
-        IndustrialManagementIdS: arr.join(","),
-        DoType: type == "发布" ? 1 : 0,
-        PermissionName: this.ruleForm.industry,
-        ResearchTheme: this.ruleForm.theme,
-        SpecialType: this.ruleForm.modality,
-        City: this.ruleForm.city,
-        IsShowSubjectName: this.ruleForm.isMark ? 1 : 0,
-        TemporarySubject: subjectData.join(","),
-      });
-      if (res.Ret === 200) {
-        this.$message.success(type + "成功");
-        this.$router.back();
-      }
-    },
-    //点击取消的事件
-    cancelBtn() {
-      this.$router.back();
-    },
-    //点击添加标的
-    addLabelClick() {
-      this.addSubjectData.push({ subjectVal: "" });
-    },
-    //删除新增的主题标签
-    deleteSubject(index, item) {
-      this.addSubjectData.splice(index, 1);
-    },
-  },
-};
-</script>
 <style lang="scss">
 .el-form-item__label:before {
   display: none;

src/views/rai_manage/activityManage/specialResearch/determineTravel.vue

@@ -1,15 +1,438 @@
+<script setup>
+import { ref, watch, onMounted, reactive, computed, toRefs } from "vue";
+import { raiInterface, raiSpecial } from "@/api/api.js";
+import CryptoJS from "@/api/crypto.js";
+
+import { ElMessage } from "element-plus";
+
+import { useRouter, useRoute } from "vue-router";
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  baseApi: import.meta.env.VITE_APP_API_ROOT,
+  ruleForm: {
+    theme: "", //主题
+    industry: "", //行业
+    property: [], //产业
+    mark: [], //标的
+    checkAll: true, ////套餐类型
+    checkedCities: [], //套餐类型
+    Poster: [],
+    modality: "", //调研形式
+    city: "", //城市
+    isMark: false, //小程序内显示标的名称
+    dayNumber: null, //调研天数
+    host: "", //主持人
+    personCharge: "", //负责人
+    restrictNum: "",
+  },
+  rules: {
+    industry: [{ required: true, message: "请选择行业", trigger: "change" }],
+    theme: [{ required: true, message: "请输入调研主题", trigger: "blur" }],
+    host: [{ required: true, message: "请输入主持人", trigger: "blur" }],
+    personCharge: [{ required: true, message: "请输入纪要负责人", trigger: "blur" }],
+    restrictNum: [{ required: true, message: "请输入人数限制", trigger: "blur" }],
+    checkedCities: [{ required: true, message: "请选择套餐类型", trigger: "change" }],
+    property: [{ required: true, message: "请选择产业名称", trigger: "change" }],
+    modality: [{ required: true, message: "请选择调研形式", trigger: "change" }],
+    dayNumber: [{ required: true, message: "请选择调研天数", trigger: "change" }],
+    Poster: [{ required: true, message: "请上传行程", trigger: "change" }],
+  },
+  dialogImageUrl: "",
+  dialogVisible: false,
+  chartPermissionList: [],
+  defaultProps: {
+    label: "PermissionName",
+    children: "List",
+    value: "ChartPermissionId",
+  },
+  markOptions: [],
+  industryArr: [],
+  radioTemporary: false, //临时标签
+  valTemporary: "", //标签名称
+  cities: [],
+  isIndeterminate: false,
+  dialogVisibleSubject: false,
+  addSubjectName: "",
+  addSubjectOptions: "",
+  nameSubjectOptions: [],
+  isShowSubject: false,
+  ListSubject: [],
+  checkedCitiesTwo: "",
+  modalityRadio: [
+    { name: "线上", id: 1 },
+    { name: "线下", id: 2 },
+  ],
+  publishStatus: true,
+  addSubjectData: [],
+  isDayNumber: [1, 2, 3, 4, 5],
+  isDateTime: [],
+});
+
+const uploadDisabled = computed(() => {
+  return pageState.ruleForm.Poster.length > 0;
+});
+
+watch(
+  () => pageState.radioTemporary,
+  () => {
+    if (pageState.radioTemporary) {
+      pageState.selectDisabled = true;
+    } else {
+      pageState.valTemporary = "";
+      pageState.selectDisabled = false;
+    }
+  }
+);
+
+watch(
+  () => pageState.ruleForm.modality,
+  () => {
+    if (newval) {
+      pageState.ruleForm.city = "";
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
+onMounted(() => {
+  customerTypelist();
+  chartPermission();
+  getIndustry();
+  if ($route.query.id) {
+    themeDetails($route.query.id);
+  }
+  if ($route.query.isShow == 1) {
+    pageState.publishStatus = false;
+  }
+});
+
+//获取行业
+function chartPermission() {
+  raiInterface.getActivitySpecial().then((res) => {
+    if (res.Ret === 200) {
+      pageState.chartPermissionList = res.Data.List;
+    }
+  });
+}
+/* 获取全部的行业 */
+function getIndustry() {
+  raiInterface.getListIndustrial().then((res) => {
+    if (res.Ret === 200) {
+      pageState.industryArr = res.Data.List || [];
+    }
+  });
+}
+//点击添加标的的下拉选择框
+function markSelectFocus() {
+  if (!pageState.ruleForm.property.length) {
+    ElMessage.error("请先选择产业");
+  } else {
+    let arr = [];
+    arr = pageState.ruleForm.property.map((item) => {
+      return item[1];
+    });
+    raiInterface
+      .getindustrialSubjectlistIds({
+        IndustrialManagementIdStr: arr.join(","),
+      })
+      .then((res) => {
+        if (res.Ret === 200) {
+          pageState.markOptions = res.Data.List || [];
+        }
+      });
+  }
+}
+//获取多选的客户列表
+function customerTypelist() {
+  raiInterface.customerTypelist({ IsZxdy: true }).then((res) => {
+    if (res.Ret === 200) {
+      pageState.ruleForm.checkedCities = res.Data.List && res.Data.List.map((item) => item.CustomerTypeId);
+      pageState.cities = res.Data.List;
+    }
+  });
+}
+// 上传成功回调
+function handleUploadPosterSuccess(response, file, fileList) {
+  let upload_list = [];
+  fileList.forEach((item) => {
+    let obj = {
+      ...item,
+      response: process.env.NODE_ENV === "production" ? JSON.parse(CryptoJS.Des3Decrypt(item.response)) : item.response,
+    };
+    upload_list.push(obj);
+  });
+  pageState.ruleForm.Poster = upload_list.map((item) => {
+    return { name: item.response.Data.ResourceName, ...item };
+  });
+}
+// 删除上传的
+function handlePosterRemove(file, fileList) {
+  pageState.ruleForm.Poster = fileList;
+}
+//预览查看
+function handlePictureCardPreview(file) {
+  pageState.dialogImageUrl = file.url;
+  pageState.dialogVisible = true;
+}
+//全选框
+function handleCheckAllChange(val) {
+  if (val) {
+    let newCodeList = pageState.cities.map((item) => item.CustomerTypeId);
+    pageState.ruleForm.checkedCities = newCodeList;
+  } else {
+    pageState.ruleForm.checkedCities = [];
+  }
+  pageState.checkedCitiesTwo = pageState.ruleForm.checkedCities.join(",");
+  pageState.isIndeterminate = false;
+}
+//全选框
+function handleCheckedCitiesChange(value) {
+  let checkedCount = value.length;
+  pageState.ruleForm.checkAll = checkedCount === pageState.cities.length;
+  pageState.isIndeterminate = checkedCount > 0 && checkedCount < pageState.cities.length;
+}
+//弹框的删除标的
+async function remoteMethod(query) {
+  if (query !== "") {
+    const res = await raiInterface.industrialSubjectSearch({
+      KeyWord: query,
+    });
+    if (res.Ret === 200) {
+      pageState.addSubjectOptions = res.Data.List || [];
+    }
+  }
+}
+//弹框的表的 change 事件
+async function searchInfo(val) {
+  if (val !== "") {
+    const res = await raiInterface.industrialSubjectSearchInfo({
+      KeyWord: val,
+    });
+    if (res.Ret === 200) {
+      pageState.isShowSubject = res.Data.List ? false : true;
+      let arrList = [];
+      arrList = res.Data.List
+        ? res.Data.List.map((item) => {
+            let arr = [];
+            item.List.forEach((key) => {
+              arr.push(key.Name);
+            });
+            return {
+              ...item,
+              value: arr.join(","),
+            };
+          })
+        : [];
+      pageState.nameSubjectOptions = arrList;
+    }
+  } else {
+    pageState.nameSubjectOptions = [];
+  }
+}
+//获取调研主题详情
+async function themeDetails(id) {
+  const res = await raiSpecial.specialDetail({ ActivityId: id });
+  if (res.Ret === 200) {
+    let { Data } = res;
+    let checkedCount = Data.CustomerTypeIds ? res.Data.CustomerTypeIds.split(",").length : "";
+    pageState.isIndeterminate = checkedCount > 0 && checkedCount < pageState.cities.length;
+    let checkAll = checkedCount === pageState.cities.length;
+    pageState.ruleForm = {
+      theme: Data.ResearchTheme, //主题
+      industry: Data.ChartPermissionName, //行业
+      property: Data.ListIndustrial ? Data.ListIndustrial.map((item) => [item.ChartPermissionId, item.IndustrialManagementId]) : [], //产业
+      mark: Data.ListSubject ? Data.ListSubject.map((item) => item.IndustrialSubjectId) : [], //标的
+      checkAll, ////套餐类型
+      checkedCities: Data.CustomerTypeIds.split(",").map((item) => Number(item)), //套餐类型
+      Poster: Data.TripImgLinkFix ? [{ name: "xxx.jpeg", url: Data.TripImgLinkFix }] : [],
+      modality: Data.SpecialType,
+      city: Data.City,
+      isMark: Data.IsShowSubjectName == 1 ? true : false,
+      dayNumber: Data.Days > 0 ? Data.Days : null,
+      host: Data.Host,
+      personCharge: Data.PersonInCharge,
+      restrictNum: Data.LimitPeopleNum > 0 ? Data.LimitPeopleNum : null,
+    };
+
+    pageState.isDateTime = Data.DateYmdList;
+    pageState.valTemporary = Data.TemporaryLabel;
+    pageState.radioTemporary = pageState.valTemporary ? true : false;
+    Data.TemporarySubject &&
+      Data.TemporarySubject.split(",").forEach((item) => {
+        pageState.addSubjectData.push({ subjectVal: item });
+      });
+    if (pageState.ruleForm.mark.length) {
+      markSelectFocus();
+    }
+  }
+}
+function handleCloseSubject() {
+  pageState.nameSubjectOptions = [];
+  pageState.addSubjectName = "";
+  pageState.addSubjectOptions = [];
+  pageState.dialogVisibleSubject = false;
+}
+const ruleFormList = ref(null);
+
+//保持或者发布
+function submitForm(type) {
+  let isTimeArr = [];
+  let isDate = false;
+  pageState.isDateTime &&
+    pageState.isDateTime.forEach((item) => {
+      if (!item.DateYmd) {
+        isDate = true;
+      }
+      let isTrue = item.DateHmsList.some((key) => !key.DateHms);
+      isTimeArr.push(isTrue);
+    });
+  if (isDate || isTimeArr.includes(true)) {
+    ElMessage.error("请填写调研时间");
+    return;
+  }
+  if (pageState.selectDisabled) {
+    if (!pageState.valTemporary) return ElMessage.error("请输入临时标签");
+    let validateFieldList = [];
+    ruleFormList.value.validateField(["industry", "personCharge", "host", "dayNumber", "theme", "checkedCities", "Poster", "modality", "restrictNum"], (valid) => {
+      validateFieldList.push(valid);
+    });
+    if (pageState.ruleForm.modality == 2 && !pageState.ruleForm.city) {
+      return ElMessage.error("请输入调研城市");
+    }
+    let isPost = validateFieldList.every((item) => item === "");
+    if (isPost) {
+      postPublish(type);
+    }
+  } else {
+    ruleFormList.value.validate((valid) => {
+      if (valid) {
+        if (pageState.ruleForm.modality == 2 && !pageState.ruleForm.city) {
+          return ElMessage.error("请输入调研城市");
+        }
+        postPublish(type);
+      } else {
+        return false;
+      }
+    });
+  }
+}
+async function postPublish(type) {
+  let arr = pageState.ruleForm.property.map((item) => {
+    return item[1];
+  });
+  let PosterList = pageState.ruleForm.Poster.map((item) => {
+    if (item.response) {
+      return item.response.Data.ResourceUrl;
+    } else {
+      return item.url;
+    }
+  });
+  let subjectData = [];
+  pageState.addSubjectData.forEach((item) => subjectData.push(item.subjectVal));
+  const res = await raiSpecial.postSpecialTripPreserveAndPublish({
+    ActivityId: Number($route.query.id) || 0,
+    CustomerTypeIds: pageState.ruleForm.checkedCities.join(","),
+    TemporaryLabel: pageState.valTemporary,
+    TripImgLinkFix: PosterList.join(","),
+    IndustrialSubjectIdS: pageState.ruleForm.mark.join(","),
+    IndustrialManagementIdS: arr.join(","),
+    PermissionName: pageState.ruleForm.industry,
+    ResearchTheme: pageState.ruleForm.theme,
+    SpecialType: pageState.ruleForm.modality,
+    City: pageState.ruleForm.city,
+    IsShowSubjectName: pageState.ruleForm.isMark ? 1 : 0,
+    TemporarySubject: subjectData.join(","),
+    Days: pageState.ruleForm.dayNumber,
+    DateYmdList: pageState.isDateTime,
+    Host: pageState.ruleForm.host,
+    PersonInCharge: pageState.ruleForm.personCharge,
+    LimitPeopleNum: +pageState.ruleForm.restrictNum,
+  });
+  if (res.Ret === 200) {
+    ElMessage.success("操作成功");
+    $router.back();
+  }
+}
+//点击取消的事件
+function cancelBtn() {
+  $router.back();
+}
+//点击添加标的
+function addLabelClick() {
+  pageState.addSubjectData.push({ subjectVal: "" });
+}
+//删除新增的主题标签
+function deleteSubject(index, item) {
+  pageState.addSubjectData.splice(index, 1);
+}
+function dayChangeHandel() {
+  let arr = [];
+  if (pageState.ruleForm.dayNumber) {
+    for (let i = 0; i < pageState.ruleForm.dayNumber; i++)
+      arr.push({
+        DateYmd: "",
+        DateHmsList: [{ DateHms: "" }],
+      });
+  }
+  pageState.isDateTime = arr;
+}
+function addDayList(item, key) {
+  item.DateHmsList.push({ DateHms: "" });
+}
+function deleteDayList(item, index) {
+  item.DateHmsList.splice(index, 1);
+}
+function dateHmsChange(key, index, item) {
+  if (index > 0) {
+    let onwTime = item.DateHmsList[index - 1].DateHms[1].replace(":", "");
+    let twoTime = key.DateHms && key.DateHms[0].replace(":", "");
+    if (onwTime && twoTime && onwTime >= twoTime) {
+      ElMessage.error("下一个时间段必须晚于上一个时间段!");
+      key.DateHms = "";
+    }
+  }
+}
+
+const {
+  baseApi,
+  ruleForm,
+  rules,
+  dialogImageUrl,
+  dialogVisible,
+  chartPermissionList,
+  defaultProps,
+  markOptions,
+  industryArr,
+  radioTemporary, //临时标签
+  valTemporary, //标签名称
+  cities,
+  isIndeterminate,
+  dialogVisibleSubject,
+  addSubjectName,
+  addSubjectOptions,
+  nameSubjectOptions,
+  isShowSubject,
+  ListSubject,
+  checkedCitiesTwo,
+  modalityRadio,
+  publishStatus,
+  addSubjectData,
+  isDayNumber,
+  isDateTime,
+} = toRefs(pageState);
+</script>
+
 <template>
   <div class="container determine-travel">
     <el-card>
       <el-form :model="ruleForm" :rules="rules" ref="ruleFormList" label-width="100px" class="demo-ruleForm">
         <el-form-item label="所属行业：" prop="industry">
           <el-select placeholder="请选择行业" style="width: 396px" clearable v-model="ruleForm.industry" @change="changeHandel">
-            <el-option
-              v-for="item in chartPermissionList"
-              :label="item.PermissionName"
-              :key="item.PermissionName"
-              :value="item.PermissionName"
-            ></el-option>
+            <el-option v-for="item in chartPermissionList" :label="item.PermissionName" :key="item.PermissionName" :value="item.PermissionName"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="调研主题：" prop="theme">
@@ -24,14 +447,7 @@
           <div v-for="(item, num) in isDateTime" :key="num" class="day-item">
             <span class="day-nub"> DAY {{ num + 1 }} : </span>
             <div>
-              <el-date-picker
-                style="width: 186px; margin-right: 25px"
-                v-model="item.DateYmd"
-                type="date"
-                value-format="yyyy-MM-dd"
-                placeholder="请选择日期"
-              >
-              </el-date-picker>
+              <el-date-picker style="width: 186px; margin-right: 25px" v-model="item.DateYmd" type="date" value-format="yyyy-MM-dd" placeholder="请选择日期"> </el-date-picker>
             </div>
             <div>
               <div v-for="(key, index) in item.DateHmsList" :key="index">
@@ -49,12 +465,7 @@
                   style="width: 186px; margin-bottom: 10px"
                 >
                 </el-time-picker>
-                <img
-                  v-if="index != 0"
-                  @click="deleteDayList(item, index)"
-                  style="width: 18px; margin-left: 20px; vertical-align: middle"
-                  src="~@/assets/img/icons/delete-Item.png"
-                />
+                <img v-if="index != 0" @click="deleteDayList(item, index)" style="width: 18px; margin-left: 20px; vertical-align: middle" src="~@/assets/img/icons/delete-Item.png" />
               </div>
               <img @click="addDayList(item, key)" class="editsty" src="~@/assets/img/set_m/add_ico.png" />
             </div>
@@ -64,12 +475,7 @@
           <el-radio-group v-model="ruleForm.modality">
             <el-radio v-for="item in modalityRadio" :key="item.id" :label="item.id">{{ item.name }}</el-radio>
           </el-radio-group>
-          <el-input
-            v-model="ruleForm.city"
-            v-if="ruleForm.modality == 2"
-            style="width: 248px; margin-left: 10px"
-            placeholder="请输入调研城市,多个城市以','隔开"
-          ></el-input>
+          <el-input v-model="ruleForm.city" v-if="ruleForm.modality == 2" style="width: 248px; margin-left: 10px" placeholder="请输入调研城市,多个城市以','隔开"></el-input>
         </el-form-item>
         <el-form-item label="主持人：" prop="host">
           <el-input style="width: 396px" v-model="ruleForm.host" placeholder="请输入主持人"></el-input>
@@ -95,25 +501,13 @@
               </el-cascader>
             </el-form-item>
             <el-form-item>
-              <el-select
-                style="margin: 0 15px 10px 0"
-                v-model="ruleForm.mark"
-                :disabled="selectDisabled"
-                @focus="markSelectFocus"
-                multiple
-                placeholder="请选择关联标的"
-              >
-                <el-option v-for="item in markOptions" :key="item.IndustrialSubjectId" :value="item.IndustrialSubjectId" :label="item.SubjectName">
-                </el-option>
+              <el-select style="margin: 0 15px 10px 0" v-model="ruleForm.mark" :disabled="selectDisabled" @focus="markSelectFocus" multiple placeholder="请选择关联标的">
+                <el-option v-for="item in markOptions" :key="item.IndustrialSubjectId" :value="item.IndustrialSubjectId" :label="item.SubjectName"> </el-option>
               </el-select>
             </el-form-item>
             <div v-for="(item, index) in addSubjectData" :key="index" style="display: inline-block">
               <el-input style="width: 220px; margin: 0 5px 10px 0" v-model="item.subjectVal" placeholder="请输入标的名称" type="text"> </el-input>
-              <img
-                @click="deleteSubject(item, index)"
-                style="width: 18px; margin-right: 20px; vertical-align: middle"
-                src="~@/assets/img/icons/delete-Item.png"
-              />
+              <img @click="deleteSubject(item, index)" style="width: 18px; margin-right: 20px; vertical-align: middle" src="~@/assets/img/icons/delete-Item.png" />
             </div>
             <el-tooltip class="item" effect="dark" content="添加标的" placement="top-start">
               <img @click="addLabelClick" class="editsty" src="~@/assets/img/set_m/add_ico.png" style="margin: 0 10px 10px" />
@@ -122,27 +516,14 @@
           <div style="display: flex; align-items: center; margin-top: 10px">
             <el-checkbox v-model="ruleForm.isMark">小程序内显示标的名称</el-checkbox>
             <el-checkbox style="margin-left: 10px" v-model="radioTemporary">临时标签</el-checkbox>
-            <el-input
-              style="width: 300px; margin: 0 10px"
-              v-model="valTemporary"
-              @focus="radioTemporary = true"
-              placeholder="请输入标签名称"
-              type="text"
-            ></el-input>
+            <el-input style="width: 300px; margin: 0 10px" v-model="valTemporary" @focus="radioTemporary = true" placeholder="请输入标签名称" type="text"></el-input>
             <div class="editsty" @click="dialogVisibleSubject = true">查询标的</div>
           </div>
         </el-form-item>
         <el-form-item label="活动可见：" prop="checkedCities">
           <div style="display: flex">
             <span style="width: 70px; flex-shrink: 0" class="text-right"> 套餐类型： </span>
-            <el-checkbox
-              :indeterminate="isIndeterminate"
-              v-model="ruleForm.checkAll"
-              @change="handleCheckAllChange"
-              :disabled="checkAllIs"
-              style="margin-right: 30px"
-              >全选</el-checkbox
-            >
+            <el-checkbox :indeterminate="isIndeterminate" v-model="ruleForm.checkAll" @change="handleCheckAllChange" :disabled="checkAllIs" style="margin-right: 30px">全选</el-checkbox>
             <el-checkbox-group v-model="ruleForm.checkedCities" @change="handleCheckedCitiesChange">
               <el-checkbox v-for="item in cities" :label="item.CustomerTypeId" :key="item.CustomerTypeId">{{ item.CustomerName }} </el-checkbox>
             </el-checkbox-group>
@@ -163,7 +544,7 @@
           >
             <i class="el-icon-plus"></i>
           </el-upload>
-          <el-dialog customClass="custom-addPoster" :visible.sync="dialogVisible" :modal-append-to-body="false">
+          <el-dialog customClass="custom-addPoster" v-model="dialogVisible" :modal-append-to-body="false">
             <div class="addPoster-img">
               <img width="100%" :src="dialogImageUrl" />
             </div>
@@ -175,29 +556,10 @@
         </div>
       </el-form>
     </el-card>
-    <el-dialog
-      width="500px"
-      v-dialogDrag
-      :close-on-click-modal="false"
-      :modal-append-to-body="false"
-      center
-      title="查询标的"
-      :visible.sync="dialogVisibleSubject"
-      :before-close="handleCloseSubject"
-    >
+    <el-dialog width="500px" v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center title="查询标的" v-model="dialogVisibleSubject" :before-close="handleCloseSubject">
       <div>
-        <el-select
-          style="width: 100%"
-          v-model="addSubjectName"
-          remote
-          :remote-method="remoteMethod"
-          clearable
-          filterable
-          @change="searchInfo"
-          placeholder="请输入标的名称"
-        >
-          <el-option v-for="item in addSubjectOptions" :key="item.IndustrialSubjectId" :label="item.SubjectName" :value="item.SubjectName">
-          </el-option>
+        <el-select style="width: 100%" v-model="addSubjectName" remote :remote-method="remoteMethod" clearable filterable @change="searchInfo" placeholder="请输入标的名称">
+          <el-option v-for="item in addSubjectOptions" :key="item.IndustrialSubjectId" :label="item.SubjectName" :value="item.SubjectName"> </el-option>
         </el-select>
       </div>
       <p class="subject-text" v-if="isShowSubject">暂无数据</p>
@@ -209,402 +571,6 @@
   </div>
 </template>
 
-<script>
-import { raiInterface, raiSpecial } from "@/api/api.js";
-import CryptoJS from "@/api/crypto.js";
-
-export default {
-  name: "",
-  components: {},
-  props: {},
-  data() {
-    return {
-      baseApi: import.meta.env.VITE_APP_API_ROOT,
-      ruleForm: {
-        theme: "", //主题
-        industry: "", //行业
-        property: [], //产业
-        mark: [], //标的
-        checkAll: true, ////套餐类型
-        checkedCities: [], //套餐类型
-        Poster: [],
-        modality: "", //调研形式
-        city: "", //城市
-        isMark: false, //小程序内显示标的名称
-        dayNumber: null, //调研天数
-        host: "", //主持人
-        personCharge: "", //负责人
-        restrictNum: "",
-      },
-      rules: {
-        industry: [{ required: true, message: "请选择行业", trigger: "change" }],
-        theme: [{ required: true, message: "请输入调研主题", trigger: "blur" }],
-        host: [{ required: true, message: "请输入主持人", trigger: "blur" }],
-        personCharge: [{ required: true, message: "请输入纪要负责人", trigger: "blur" }],
-        restrictNum: [{ required: true, message: "请输入人数限制", trigger: "blur" }],
-        checkedCities: [{ required: true, message: "请选择套餐类型", trigger: "change" }],
-        property: [{ required: true, message: "请选择产业名称", trigger: "change" }],
-        modality: [{ required: true, message: "请选择调研形式", trigger: "change" }],
-        dayNumber: [{ required: true, message: "请选择调研天数", trigger: "change" }],
-        Poster: [{ required: true, message: "请上传行程", trigger: "change" }],
-      },
-      dialogImageUrl: "",
-      dialogVisible: false,
-      chartPermissionList: [],
-      defaultProps: {
-        label: "PermissionName",
-        children: "List",
-        value: "ChartPermissionId",
-      },
-      markOptions: [],
-      industryArr: [],
-      radioTemporary: false, //临时标签
-      valTemporary: "", //标签名称
-      cities: [],
-      isIndeterminate: false,
-      dialogVisibleSubject: false,
-      addSubjectName: "",
-      addSubjectOptions: "",
-      nameSubjectOptions: [],
-      isShowSubject: false,
-      ListSubject: [],
-      checkedCitiesTwo: "",
-      modalityRadio: [
-        { name: "线上", id: 1 },
-        { name: "线下", id: 2 },
-      ],
-      publishStatus: true,
-      addSubjectData: [],
-      isDayNumber: [1, 2, 3, 4, 5],
-      isDateTime: [],
-    };
-  },
-  computed: {
-    uploadDisabled: function () {
-      return this.ruleForm.Poster.length > 0;
-    },
-  },
-  watch: {
-    radioTemporary() {
-      if (this.radioTemporary) {
-        this.selectDisabled = true;
-      } else {
-        this.valTemporary = "";
-        this.selectDisabled = false;
-      }
-    },
-    "ruleForm.modality": {
-      handler(newval) {
-        if (newval == 1) {
-          this.ruleForm.city = "";
-        }
-      },
-      deep: true,
-    },
-  },
-  created() {},
-  mounted() {
-    this.customerTypelist();
-    this.chartPermission();
-    this.getIndustry();
-    if (this.$route.query.id) {
-      this.themeDetails(this.$route.query.id);
-    }
-    if (this.$route.query.isShow == 1) {
-      this.publishStatus = false;
-    }
-  },
-  methods: {
-    //获取行业
-    chartPermission() {
-      raiInterface.getActivitySpecial().then((res) => {
-        if (res.Ret === 200) {
-          this.chartPermissionList = res.Data.List;
-        }
-      });
-    },
-    /* 获取全部的行业 */
-    getIndustry() {
-      raiInterface.getListIndustrial().then((res) => {
-        if (res.Ret === 200) {
-          this.industryArr = res.Data.List || [];
-        }
-      });
-    },
-    //点击添加标的的下拉选择框
-    markSelectFocus() {
-      if (!this.ruleForm.property.length) {
-        this.$message.error("请先选择产业");
-      } else {
-        let arr = [];
-        arr = this.ruleForm.property.map((item) => {
-          return item[1];
-        });
-        raiInterface
-          .getindustrialSubjectlistIds({
-            IndustrialManagementIdStr: arr.join(","),
-          })
-          .then((res) => {
-            if (res.Ret === 200) {
-              this.markOptions = res.Data.List || [];
-            }
-          });
-      }
-    },
-    //获取多选的客户列表
-    customerTypelist() {
-      raiInterface.customerTypelist({ IsZxdy: true }).then((res) => {
-        if (res.Ret === 200) {
-          this.ruleForm.checkedCities = res.Data.List && res.Data.List.map((item) => item.CustomerTypeId);
-          this.cities = res.Data.List;
-        }
-      });
-    },
-    // 上传成功回调
-    handleUploadPosterSuccess(response, file, fileList) {
-      let upload_list = [];
-      fileList.forEach((item) => {
-        let obj = {
-          ...item,
-          response: process.env.NODE_ENV === "production" ? JSON.parse(CryptoJS.Des3Decrypt(item.response)) : item.response,
-        };
-        upload_list.push(obj);
-      });
-      this.ruleForm.Poster = upload_list.map((item) => {
-        return { name: item.response.Data.ResourceName, ...item };
-      });
-    },
-    // 删除上传的
-    handlePosterRemove(file, fileList) {
-      this.ruleForm.Poster = fileList;
-    },
-    //预览查看
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
-    },
-    //全选框
-    handleCheckAllChange(val) {
-      if (val) {
-        let newCodeList = this.cities.map((item) => item.CustomerTypeId);
-        this.ruleForm.checkedCities = newCodeList;
-      } else {
-        this.ruleForm.checkedCities = [];
-      }
-      this.checkedCitiesTwo = this.ruleForm.checkedCities.join(",");
-      this.isIndeterminate = false;
-    },
-    //全选框
-    handleCheckedCitiesChange(value) {
-      let checkedCount = value.length;
-      this.ruleForm.checkAll = checkedCount === this.cities.length;
-      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
-    },
-    //弹框的删除标的
-    async remoteMethod(query) {
-      if (query !== "") {
-        const res = await raiInterface.industrialSubjectSearch({
-          KeyWord: query,
-        });
-        if (res.Ret === 200) {
-          this.addSubjectOptions = res.Data.List || [];
-        }
-      }
-    },
-    //弹框的表的 change 事件
-    async searchInfo(val) {
-      if (val !== "") {
-        const res = await raiInterface.industrialSubjectSearchInfo({
-          KeyWord: val,
-        });
-        if (res.Ret === 200) {
-          this.isShowSubject = res.Data.List ? false : true;
-          let arrList = [];
-          arrList = res.Data.List
-            ? res.Data.List.map((item) => {
-                let arr = [];
-                item.List.forEach((key) => {
-                  arr.push(key.Name);
-                });
-                return {
-                  ...item,
-                  value: arr.join(","),
-                };
-              })
-            : [];
-          this.nameSubjectOptions = arrList;
-        }
-      } else {
-        this.nameSubjectOptions = [];
-      }
-    },
-    //获取调研主题详情
-    async themeDetails(id) {
-      const res = await raiSpecial.specialDetail({ ActivityId: id });
-      if (res.Ret === 200) {
-        let { Data } = res;
-        let checkedCount = Data.CustomerTypeIds ? res.Data.CustomerTypeIds.split(",").length : "";
-        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
-        let checkAll = checkedCount === this.cities.length;
-        this.ruleForm = {
-          theme: Data.ResearchTheme, //主题
-          industry: Data.ChartPermissionName, //行业
-          property: Data.ListIndustrial ? Data.ListIndustrial.map((item) => [item.ChartPermissionId, item.IndustrialManagementId]) : [], //产业
-          mark: Data.ListSubject ? Data.ListSubject.map((item) => item.IndustrialSubjectId) : [], //标的
-          checkAll, ////套餐类型
-          checkedCities: Data.CustomerTypeIds.split(",").map((item) => Number(item)), //套餐类型
-          Poster: Data.TripImgLinkFix ? [{ name: "xxx.jpeg", url: Data.TripImgLinkFix }] : [],
-          modality: Data.SpecialType,
-          city: Data.City,
-          isMark: Data.IsShowSubjectName == 1 ? true : false,
-          dayNumber: Data.Days > 0 ? Data.Days : null,
-          host: Data.Host,
-          personCharge: Data.PersonInCharge,
-          restrictNum: Data.LimitPeopleNum > 0 ? Data.LimitPeopleNum : null,
-        };
-
-        this.isDateTime = Data.DateYmdList;
-        this.valTemporary = Data.TemporaryLabel;
-        this.radioTemporary = this.valTemporary ? true : false;
-        Data.TemporarySubject &&
-          Data.TemporarySubject.split(",").forEach((item) => {
-            this.addSubjectData.push({ subjectVal: item });
-          });
-        if (this.ruleForm.mark.length) {
-          this.markSelectFocus();
-        }
-      }
-    },
-    handleCloseSubject() {
-      this.nameSubjectOptions = [];
-      this.addSubjectName = "";
-      this.addSubjectOptions = [];
-      this.dialogVisibleSubject = false;
-    },
-    //保持或者发布
-    submitForm(type) {
-      let isTimeArr = [];
-      let isDate = false;
-      this.isDateTime &&
-        this.isDateTime.forEach((item) => {
-          if (!item.DateYmd) {
-            isDate = true;
-          }
-          let isTrue = item.DateHmsList.some((key) => !key.DateHms);
-          isTimeArr.push(isTrue);
-        });
-      if (isDate || isTimeArr.includes(true)) {
-        this.$message.error("请填写调研时间");
-        return;
-      }
-      if (this.selectDisabled) {
-        if (!this.valTemporary) return this.$message.error("请输入临时标签");
-        let validateFieldList = [];
-        this.$refs.ruleFormList.validateField(
-          ["industry", "personCharge", "host", "dayNumber", "theme", "checkedCities", "Poster", "modality", "restrictNum"],
-          (valid) => {
-            validateFieldList.push(valid);
-          }
-        );
-        if (this.ruleForm.modality == 2 && !this.ruleForm.city) {
-          return this.$message.error("请输入调研城市");
-        }
-        let isPost = validateFieldList.every((item) => item === "");
-        if (isPost) {
-          this.postPublish(type);
-        }
-      } else {
-        this.$refs.ruleFormList.validate((valid) => {
-          if (valid) {
-            if (this.ruleForm.modality == 2 && !this.ruleForm.city) {
-              return this.$message.error("请输入调研城市");
-            }
-            this.postPublish(type);
-          } else {
-            return false;
-          }
-        });
-      }
-    },
-    async postPublish(type) {
-      let arr = this.ruleForm.property.map((item) => {
-        return item[1];
-      });
-      let PosterList = this.ruleForm.Poster.map((item) => {
-        if (item.response) {
-          return item.response.Data.ResourceUrl;
-        } else {
-          return item.url;
-        }
-      });
-      let subjectData = [];
-      this.addSubjectData.forEach((item) => subjectData.push(item.subjectVal));
-      const res = await raiSpecial.postSpecialTripPreserveAndPublish({
-        ActivityId: Number(this.$route.query.id) || 0,
-        CustomerTypeIds: this.ruleForm.checkedCities.join(","),
-        TemporaryLabel: this.valTemporary,
-        TripImgLinkFix: PosterList.join(","),
-        IndustrialSubjectIdS: this.ruleForm.mark.join(","),
-        IndustrialManagementIdS: arr.join(","),
-        PermissionName: this.ruleForm.industry,
-        ResearchTheme: this.ruleForm.theme,
-        SpecialType: this.ruleForm.modality,
-        City: this.ruleForm.city,
-        IsShowSubjectName: this.ruleForm.isMark ? 1 : 0,
-        TemporarySubject: subjectData.join(","),
-        Days: this.ruleForm.dayNumber,
-        DateYmdList: this.isDateTime,
-        Host: this.ruleForm.host,
-        PersonInCharge: this.ruleForm.personCharge,
-        LimitPeopleNum: +this.ruleForm.restrictNum,
-      });
-      if (res.Ret === 200) {
-        this.$message.success("操作成功");
-        this.$router.back();
-      }
-    },
-    //点击取消的事件
-    cancelBtn() {
-      this.$router.back();
-    },
-    //点击添加标的
-    addLabelClick() {
-      this.addSubjectData.push({ subjectVal: "" });
-    },
-    //删除新增的主题标签
-    deleteSubject(index, item) {
-      this.addSubjectData.splice(index, 1);
-    },
-    dayChangeHandel() {
-      let arr = [];
-      if (this.ruleForm.dayNumber) {
-        for (let i = 0; i < this.ruleForm.dayNumber; i++)
-          arr.push({
-            DateYmd: "",
-            DateHmsList: [{ DateHms: "" }],
-          });
-      }
-      this.isDateTime = arr;
-    },
-    addDayList(item, key) {
-      item.DateHmsList.push({ DateHms: "" });
-    },
-    deleteDayList(item, index) {
-      item.DateHmsList.splice(index, 1);
-    },
-    dateHmsChange(key, index, item) {
-      if (index > 0) {
-        let onwTime = item.DateHmsList[index - 1].DateHms[1].replace(":", "");
-        let twoTime = key.DateHms && key.DateHms[0].replace(":", "");
-        if (onwTime && twoTime && onwTime >= twoTime) {
-          this.$message.error("下一个时间段必须晚于上一个时间段!");
-          key.DateHms = "";
-        }
-      }
-    },
-  },
-};
-</script>
 <style lang="scss">
 .el-form-item__label:before {
   display: none;

src/views/rai_manage/activityManage/specialResearch/interestAllPreview.vue

@@ -1,3 +1,59 @@
+<script setup>
+import { ref, watch, onMounted, reactive, computed, toRefs } from "vue";
+
+import mPage from "@/components/mPage.vue";
+import { raiInterface, raiSpecial } from "@/api/api.js";
+
+const dataList = ref([]);
+const page_no = ref(1);
+const total = ref("");
+const pageSize = ref(10);
+const previewList = ref([]);
+const activityDetail = ref({});
+const dialogVisibleActivity = ref(false);
+const dialogTitle = ref("");
+
+onMounted(() => {
+  getList();
+});
+
+//获取数据
+async function getList() {
+  const res = await raiSpecial.getSpecialSpecialList({
+    PageSize: pageSize.value,
+    CurrentIndex: page_no.value,
+  });
+  if (res.Ret === 200) {
+    dataList.value = res.Data.List;
+    total.value = res.Data.Paging.Totals;
+  }
+}
+//分页
+function handleCurrentChange(page) {
+  page_no.value = page;
+  getList();
+}
+//获取调研主题详情
+async function themeDetails(id) {
+  const res = await raiSpecial.specialDetail({ ActivityId: id });
+  if (res.Ret === 200) {
+    previewList.value = [];
+    activityDetail.value = res.Data;
+    dialogVisibleActivity.value = true;
+    dialogTitle.value = "活动详情";
+    previewList.value.push(activityDetail.value.TripImgLink);
+  }
+}
+//预览图片
+function imgLink() {
+  $("#TripImgLink").click();
+}
+//弹框的关闭
+function handleCloseSubject() {
+  dialogVisibleActivity.value = false;
+}
+</script>
+
 <template>
   <div class="container-interest">
     <el-card>
@@ -6,7 +62,7 @@
         <el-table-column width="100" prop="SellerName" align="center" label="所属销售"> </el-table-column>
         <el-table-column min-width="100" prop="RealName" align="center" label="姓名"> </el-table-column>
         <el-table-column prop="ResearchTheme" align="center" label="调研主题">
-          <template slot-scope="{ row }">
+          <template #default="{ row }">
             <span class="editsty" @click="themeDetails(row.ActivityId)">{{ row.ResearchTheme }}</span>
           </template>
         </el-table-column>
@@ -21,7 +77,7 @@
         <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
       </el-col>
     </el-card>
-    <el-dialog width="1000px" v-dialogDrag :modal-append-to-body="false" center :title="dialogTitle" :visible.sync="dialogVisibleActivity" :before-close="handleCloseSubject">
+    <el-dialog width="1000px" v-dialogDrag :modal-append-to-body="false" center :title="dialogTitle" v-model="dialogVisibleActivity" :before-close="handleCloseSubject">
       <div class="rai-detail-wrap" v-if="dialogTitle == '活动详情'">
         <div class="activity-top">
           {{ activityDetail.ResearchTheme }}
@@ -56,71 +112,6 @@
   </div>
 </template>
 
-<script>
-import mPage from "@/components/mPage.vue";
-import { raiInterface, raiSpecial } from "@/api/api.js";
-
-export default {
-  name: "",
-  components: { mPage },
-  props: {},
-  data() {
-    return {
-      dataList: [],
-      page_no: 1,
-      total: "",
-      pageSize: 10,
-      previewList: [],
-      activityDetail: {},
-      dialogVisibleActivity: false,
-      dialogTitle: "",
-    };
-  },
-  computed: {},
-  watch: {},
-  created() {},
-  mounted() {
-    this.getList();
-  },
-  methods: {
-    //获取数据
-    async getList() {
-      const res = await raiSpecial.getSpecialSpecialList({
-        PageSize: this.pageSize,
-        CurrentIndex: this.page_no,
-      });
-      if (res.Ret === 200) {
-        this.dataList = res.Data.List;
-        this.total = res.Data.Paging.Totals;
-      }
-    },
-    //分页
-    handleCurrentChange(page) {
-      this.page_no = page;
-      this.getList();
-    },
-    //获取调研主题详情
-    async themeDetails(id) {
-      const res = await raiSpecial.specialDetail({ ActivityId: id });
-      if (res.Ret === 200) {
-        this.previewList = [];
-        this.activityDetail = res.Data;
-        this.dialogVisibleActivity = true;
-        this.dialogTitle = "活动详情";
-        this.previewList.push(this.activityDetail.TripImgLink);
-      }
-    },
-    //预览图片
-    imgLink() {
-      $("#TripImgLink").click();
-    },
-    //弹框的关闭
-    handleCloseSubject() {
-      this.dialogVisibleActivity = false;
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .container-interest {
   .rai-detail-wrap {

src/views/rai_manage/activityManage/specialResearch/particularsAll.vue

@@ -1,3 +1,103 @@
+<script setup>
+import { computed, watch, nextTick, ref } from "vue";
+
+import { raiInterface, raiSpecial } from "@/api/api.js";
+import EditMobile from "../../components/editMobile.vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+
+const props = defineProps({
+  particularsDialogVisible: {
+    type: Boolean,
+    default: false,
+  },
+  subscribe: {
+    type: String,
+    default: "报名详情",
+  },
+  dialogVisibleList: {
+    type: Object,
+  },
+});
+
+const dataList = ref([]); //表格
+const total = ref("");
+const myTotal = ref("");
+const memberType = ref("");
+const editMobileDialogVisible = ref(false); //
+const editMobileId = ref(""); //
+const outboundMobile = ref("");
+const isFullNum = ref(false); //报名人数是否已满
+
+const exportUser = computed(() => {
+  let param_token = localStorage.getItem("auth") || "";
+  return import.meta.env.VITE_APP_API_ROOT + "/cygx/special/tripList?ActivityId=" + props.dialogVisibleList.ActivityId + "&IsExport=" + true + "&" + param_token;
+});
+
+watch(
+  () => props.particularsDialogVisible,
+  (newval) => {
+    if (newval) {
+      getsDataList();
+    }
+  }
+);
+
+const $emit = defineEmits(["getsDataList"]);
+
+function okBtn() {
+  $emit("update:particularsDialogVisible", false);
+}
+//列表表格
+function getsDataList() {
+  raiSpecial
+    .getSpecialtripList({
+      ActivityId: props.dialogVisibleList.ActivityId,
+    })
+    .then((res) => {
+      if (res.Ret !== 200) return;
+      nextTick(() => {
+        dataList.value = res.Data.List;
+        total.value = res.Data.Total;
+        memberType.value = res.Data.MemberType;
+        myTotal.value = res.Data.MyTotal;
+      });
+    });
+}
+
+function modification(id, value) {
+  editMobileDialogVisible.value = true;
+  editMobileId.value = id;
+  outboundMobile.value = value;
+}
+//取消报名
+function cancelApply(item) {
+  ElMessageBox.confirm(`确定要取消该用户的报名吗？`, `取消报名`, {
+    confirmButtonText: "是",
+    cancelButtonText: "否",
+    type: "warning",
+  })
+    .then(async () => {
+      const res = await raiSpecial.cancelSpecialtripList({
+        UserId: item.UserId,
+        ActivityId: item.ActivityId,
+      });
+      if (res.Ret !== 200) return;
+      ElMessage({
+        type: "success",
+        message: `取消报名成功!`,
+      });
+      getsDataList();
+      $emit("getsDataList");
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: "已取消操作",
+      });
+    });
+}
+</script>
+
 <template>
   <div class="container-particulars">
     <el-dialog
@@ -6,14 +106,16 @@
       :modal-append-to-body="false"
       center
       :append-to-body="true"
-      :visible.sync="particularsDialogVisible"
+      v-model="props.particularsDialogVisible"
       :before-close="okBtn"
-      :width="subscribe == '报名失败详情' ? '1000px' : '1100px'"
+      :width="props.subscribe == '报名失败详情' ? '1000px' : '1100px'"
     >
-      <div slot="title" style="display: flex; align-items: center">
-        <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
-        <span style="font-size: 16px">报名人数</span>
-      </div>
+      <template #header>
+        <div style="display: flex; align-items: center">
+          <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
+          <span style="font-size: 16px">报名人数</span>
+        </div>
+      </template>
       <div class="content-box">
         <div class="top-text" style="margin-bottom: 20px">
           <template v-if="memberType == 'Admin'"> 共有{{ total }}人报名</template>
@@ -23,9 +125,9 @@
         <div class="table-box">
           <el-table height="400px" :data="dataList" border style="width: 100%">
             <el-table-column min-width="80" align="center" prop="RealName" key="name" label="姓名"></el-table-column>
-            <el-table-column v-if="dialogVisibleList.SpecialType == 1" min-width="115" align="center" prop="Mobile" key="mobile" label="手机号"></el-table-column>
-            <el-table-column v-if="dialogVisibleList.SpecialType == 1" min-width="140" align="center" key="outboundMobile" label="外呼号码">
-              <template slot-scope="scope">
+            <el-table-column v-if="props.dialogVisibleList.SpecialType == 1" min-width="115" align="center" prop="Mobile" key="mobile" label="手机号"></el-table-column>
+            <el-table-column v-if="props.dialogVisibleList.SpecialType == 1" min-width="140" align="center" key="outboundMobile" label="外呼号码">
+              <template #default="scope">
                 <span>{{ scope.row.OutboundMobile }}</span>
                 <img @click="modification(scope.row.Id, scope.row.OutboundMobile)" :src="$icons.amend" style="color: #fff; width: 12px; height: 12px; margin-left: 5px; vertical-align: middle" />
               </template>
@@ -34,133 +136,31 @@
             <el-table-column min-width="110" align="center" prop="SellerName" key="seller" label="所属销售"></el-table-column>
             <el-table-column min-width="160" align="center" prop="CreateTime" key="seller" label="报名时间"></el-table-column>
             <el-table-column min-width="135" align="center" prop="" key="cz1" label="操作">
-              <template slot-scope="scope">
+              <template #default="scope">
                 <span class="editsty" @click="cancelApply(scope.row)">取消报名</span>
               </template>
             </el-table-column>
           </el-table>
         </div>
       </div>
-      <div slot="footer" class="dialog-footer">
-        <div style="margin: 10px 0">
-          <span style="margin-left: 30px">
-            <a :href="exportUser" download>
-              <el-button type="primary">下载名单</el-button>
-            </a>
-          </span>
-          <el-button style="margin-left: 30px" type="primary" plain @click="okBtn">知道了</el-button>
+      <template #footer>
+        <div class="dialog-footer">
+          <div style="margin: 10px 0">
+            <span style="margin-left: 30px">
+              <a :href="exportUser" download>
+                <el-button type="primary">下载名单</el-button>
+              </a>
+            </span>
+            <el-button style="margin-left: 30px" type="primary" plain @click="okBtn">知道了</el-button>
+          </div>
         </div>
-      </div>
+      </template>
     </el-dialog>
-    <edit-mobile :editMobileDialogVisible.sync="editMobileDialogVisible" :editMobileId="editMobileId" :outboundMobile="outboundMobile" isType="专项" />
+    <edit-mobile v-model:editMobileDialogVisible="editMobileDialogVisible" :editMobileId="editMobileId" :outboundMobile="outboundMobile" @getsDataList="getsDataList" isType="专项" />
   </div>
 </template>
 
-<script>
-import { raiInterface, raiSpecial } from "@/api/api.js";
-import EditMobile from "../../components/editMobile.vue";
-export default {
-  name: "",
-  components: { EditMobile },
-  props: {
-    particularsDialogVisible: {
-      type: Boolean,
-      default: false,
-    },
-    subscribe: {
-      type: String,
-      default: "报名详情",
-    },
-    dialogVisibleList: {
-      type: Object,
-    },
-  },
-  data() {
-    return {
-      dataList: [], //表格
-      total: "",
-      myTotal: "",
-      memberType: "",
-      editMobileDialogVisible: false, //
-      editMobileId: "", //
-      outboundMobile: "",
-      isFullNum: false, //报名人数是否已满
-    };
-  },
-  computed: {
-    exportUser() {
-      let param_token = localStorage.getItem("auth") || "";
-      return import.meta.env.VITE_APP_API_ROOT + "/cygx/special/tripList?ActivityId=" + this.dialogVisibleList.ActivityId + "&IsExport=" + true + "&" + param_token;
-    },
-  },
-  watch: {
-    particularsDialogVisible: {
-      handler(newval) {
-        if (newval) {
-          this.getsDataList();
-        }
-      },
-    },
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    okBtn() {
-      this.$parent.particularsDialogVisible = false;
-    },
-    //列表表格
-    getsDataList() {
-      raiSpecial
-        .getSpecialtripList({
-          ActivityId: this.dialogVisibleList.ActivityId,
-        })
-        .then((res) => {
-          if (res.Ret !== 200) return;
-          this.$nextTick(() => {
-            this.dataList = res.Data.List;
-            this.total = res.Data.Total;
-            this.memberType = res.Data.MemberType;
-            this.myTotal = res.Data.MyTotal;
-          });
-        });
-    },
-
-    modification(id, value) {
-      this.editMobileDialogVisible = true;
-      this.editMobileId = id;
-      this.outboundMobile = value;
-    },
-    //取消报名
-    cancelApply(item) {
-      this.$confirm(`确定要取消该用户的报名吗？`, `取消报名`, {
-        confirmButtonText: "是",
-        cancelButtonText: "否",
-        type: "warning",
-      })
-        .then(async () => {
-          const res = await raiSpecial.cancelSpecialtripList({
-            UserId: item.UserId,
-            ActivityId: item.ActivityId,
-          });
-          if (res.Ret !== 200) return;
-          this.$message({
-            type: "success",
-            message: `取消报名成功!`,
-          });
-          this.getsDataList();
-          this.$parent.getsDataList();
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消操作",
-          });
-        });
-    },
-  },
-};
-</script>
-<style lang="scss">
+<style lang="less">
 .container-particulars {
   .table-box {
     margin: 20px auto;

src/views/rai_manage/activityManage/themeSurveyPage.vue

@@ -1,8 +1,57 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { raiInterface, raiSpecial } from "@/api/api.js";
+import mPage from "@/components/mPage.vue";
+import VoteDlg from "./components/ThemeSurvey/voteDlg.vue";
+import VotingResultsDlg from "./components/ThemeSurvey/votingResultsDlg.vue";
+
+const dataList = ref([]);
+const page_no = ref(1);
+const total = ref(0);
+
+// 获取列表
+async function getDataList() {
+  const res = await raiInterface.questionnaireList({
+    PageSize: 10,
+    CurrentIndex: page_no.value,
+  });
+  if (res.Ret === 200) {
+    dataList.value = res.Data.List || [];
+    total.value = res.Data.Paging.Totals;
+  }
+}
+//分页
+function handleCurrentChange(page) {
+  page_no.value = page;
+  getDataList();
+}
+
+const initiateVotingDlg = ref(false); // 发起投票的弹框
+const isVotinRgesultsDlg = ref(false); // 投票结果的弹框
+const theRemainingThemeDlg = ref(false); // 其余主题的弹框
+const rowForm = ref({});
+
+// 查看投票结果
+function lookResultHandler(item, type) {
+  rowForm.value = item;
+  if (type == "编辑") {
+    initiateVotingDlg.value = true;
+  } else if (type == "查看") {
+    isVotinRgesultsDlg.value = true;
+  } else {
+    theRemainingThemeDlg.value = true;
+  }
+}
+onMounted(() => {
+  getDataList();
+});
+</script>
+
 <template>
   <div class="container">
     <el-card>
       <div style="display: flex; justify-content: flex-end">
-        <el-button type="primary" @click="initiateVotingDlg = true">发起投票</el-button>
+        <el-button type="primary" @click="initiateVotingDlg = true"> 发起投票 </el-button>
       </div>
     </el-card>
     <el-card style="margin-top: 20px">
@@ -13,23 +62,27 @@
           <el-table-column align="center" prop="EndTime" key="EndTime" label="投票截止时间"></el-table-column>
           <el-table-column align="center" prop="ModifyTime" key="ModifyTime" label="更新时间"></el-table-column>
           <el-table-column align="center" prop="State" key="State" label="状态">
-            <template slot-scope="{ row }">
-              <span :class="[row.State == '发布中' && 'editsty']">{{ row.State }}</span>
+            <template #default="{ row }">
+              <span :class="[row.State == '发布中' && 'editsty']">
+                {{ row.State }}
+              </span>
             </template>
           </el-table-column>
           <el-table-column align="center" prop="RealName" key="name" label="投票结果">
-            <template slot-scope="{ row }">
-              <span class="editsty" @click="lookResultHandler(row, '查看')">查看</span>
+            <template #default="{ row }">
+              <span class="editsty" @click="lookResultHandler(row, '查看')"> 查看 </span>
             </template>
           </el-table-column>
           <el-table-column align="center" prop="OtherThemeTotal" key="name" label="其余主题">
-            <template slot-scope="{ row }">
-              <span class="editsty" @click="lookResultHandler(row, '其余')">{{ row.OtherThemeTotal }}</span>
+            <template #default="{ row }">
+              <span class="editsty" @click="lookResultHandler(row, '其余')">
+                {{ row.OtherThemeTotal }}
+              </span>
             </template>
           </el-table-column>
           <el-table-column align="center" prop="RealName" key="name" label="操作">
-            <template slot-scope="{ row }">
-              <span v-if="row.State == '发布中'" class="editsty" @click="lookResultHandler(row, '编辑')">编辑</span>
+            <template #default="{ row }">
+              <span v-if="row.State == '发布中'" class="editsty" @click="lookResultHandler(row, '编辑')"> 编辑 </span>
             </template>
           </el-table-column>
         </el-table>
@@ -39,67 +92,7 @@
         <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
       </el-col>
     </el-card>
-    <vote-dlg :initiateVotingDlg.sync="initiateVotingDlg" :rowForm.sync="rowForm" />
-    <voting-results-dlg :isVotinRgesultsDlg.sync="isVotinRgesultsDlg" :theRemainingThemeDlg.sync="theRemainingThemeDlg" :rowForm.sync="rowForm" />
+    <vote-dlg v-model:initiateVotingDlg="initiateVotingDlg" v-model:rowForm="rowForm"  @getDataList="getDataList"/>
+    <voting-results-dlg v-model:isVotinRgesultsDlg="isVotinRgesultsDlg" v-model:theRemainingThemeDlg="theRemainingThemeDlg" v-model:rowForm="rowForm" />
   </div>
 </template>
-
-<script>
-import { raiInterface, raiSpecial } from "@/api/api.js";
-import mPage from "@/components/mPage.vue";
-import VoteDlg from "./components/ThemeSurvey/voteDlg.vue";
-import VotingResultsDlg from "./components/ThemeSurvey/votingResultsDlg.vue";
-export default {
-  name: "",
-  components: { VoteDlg, VotingResultsDlg, mPage },
-  props: {},
-  data() {
-    return {
-      dataList: [],
-      page_no: 1,
-      total: 0,
-      initiateVotingDlg: false, // 发起投票的弹框
-      isVotinRgesultsDlg: false, // 投票结果的弹框
-      theRemainingThemeDlg: false, // 其余主题的弹框
-      rowForm: {},
-    };
-  },
-  computed: {},
-  watch: {},
-  created() {},
-  mounted() {
-    this.getDataList();
-  },
-  methods: {
-    // 查看投票结果
-    lookResultHandler(item, type) {
-      this.rowForm = item;
-      console.log(this.rowForm, " this.rowForm");
-      if (type == "编辑") {
-        this.initiateVotingDlg = true;
-      } else if (type == "查看") {
-        this.isVotinRgesultsDlg = true;
-      } else {
-        this.theRemainingThemeDlg = true;
-      }
-    },
-    // 获取列表
-    async getDataList() {
-      const res = await raiInterface.questionnaireList({
-        PageSize: 10,
-        CurrentIndex: this.page_no,
-      });
-      if (res.Ret === 200) {
-        this.dataList = res.Data.List || [];
-        this.total = res.Data.Paging.Totals;
-      }
-    },
-    //分页
-    handleCurrentChange(page) {
-      this.page_no = page;
-      this.getDataList();
-    },
-  },
-};
-</script>
-<style scoped lang="scss"></style>

src/views/rai_manage/components/addChoiceness.vue

@@ -597,7 +597,7 @@ onBeforeRouteLeave((to, from, next) => {
       </div>
     </el-card>
     <!-- 弹框部分 -->
-    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center v-model="addDialogVisible" width="560px" :before-close="handleClose">
+    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center v-model="addDialogVisible" width="560px" :before-close="handleClose">
       <template #header>
         <div style="display: flex; align-items: center">
           <img :src="dialogText == '编辑' ? $icons.editicon : $icons.add" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />

src/views/rai_manage/components/addIndustryMark.vue

@@ -1,18 +1,143 @@
+<script setup>
+import { ref } from "vue";
+
+import { raiInterface } from "@/api/api.js";
+import { ElMessageBox, ElMessage } from "element-plus";
+
+const props = defineProps({
+  addIndustryDlg: {
+    type: Boolean,
+    default: false,
+  },
+  addMarkDlg: {
+    type: Boolean,
+    default: false,
+  },
+  optionFormregion: {
+    type: String,
+  },
+  addMarkUpVal: {
+    type: Object,
+    default: {},
+  },
+  source: {
+    type: Number,
+    required: true,
+  },
+});
+
+const inputIndustry = ref("");
+const mark = ref([{ name: "" }]);
+const chartPermissionList = ref([]);
+const addIndustryForm = ref({
+  //添加产业分类
+  tradeValue: "",
+  industryName: "",
+  recommendedIndex: null,
+});
+const industryAdd = ref({
+  industryName: [{ required: true, message: "请输入产业名称（最多输入10个字）", trigger: "blur" }],
+  recommendedIndex: [{ required: true, message: "请输入推荐指数", trigger: "blur" }],
+  tradeValue: [{ required: true, message: "请选择行业", trigger: "change" }],
+});
+
+//获取行业
+function chartPermission() {
+  raiInterface.chartPermissionFirstHaveIco().then((res) => {
+    if (res.Ret === 200) {
+      chartPermissionList.value = res.Data.List;
+    }
+  });
+}
+
+const $emit = defineEmits(["commitMarkDlg"]);
+
+const addIndustryRef = ref(null);
+//添加行业的确定事件
+async function commitIndustry() {
+  if (props.optionFormregion != "研选") {
+    addIndustryRef.value.validate(async (val) => {
+      if (val) {
+        //添加产业
+        const res = await raiInterface.industrialManagement({
+          IndustryName: addIndustryForm.value.industryName,
+          RecommendedIndex: addIndustryForm.value.recommendedIndex - 0,
+          ChartPermissionId: addIndustryForm.value.tradeValue,
+        });
+        if (!res.Success) return;
+        $emit("commitIndustryDlg", res.Data);
+        ElMessage.success("添加成功！");
+        confirmIndustry();
+      }
+    });
+  } else {
+    if (inputIndustry.value) {
+      const res = await raiInterface.industrialManagement({
+        Source: props.source,
+        IndustryName: inputIndustry.value,
+        PermissionName: props.optionFormregion,
+      });
+      if (res.Ret === 200) {
+        $emit("commitIndustryDlg", res.Data);
+        ElMessage.success("添加成功！");
+        confirmIndustry();
+      }
+    } else {
+      ElMessage.error("请输入产业！");
+    }
+  }
+}
+//添加行业的取消事件
+function confirmIndustry() {
+  inputIndustry.value = "";
+  $emit("update:addIndustryDlg", false);
+}
+//添加标的的确定事件
+async function commitMark() {
+  let arr = [];
+  mark.value.forEach((item) => {
+    if (item.name) {
+      arr.push(item.name);
+    }
+  });
+  if (!arr.length) returnElMessage.error("请输入标的！");
+  const res = await raiInterface.industrialSubjectAdd({
+    IndustrialManagementId: props.addMarkUpVal.industrialId,
+    Source: props.source,
+    SubjectName: arr.join(",").replace(/,/g, "{|}"),
+  });
+  if (res.Ret === 200) {
+    $emit("commitMarkDlg", res.Data.NewId);
+    ElMessage.success("添加成功！");
+    confirmMark();
+  }
+}
+//添加标的的取消事件
+function confirmMark() {
+  mark.value = [{ name: "" }];
+  $emit("update:addMarkDlg", false);
+}
+//添加标的的输入框
+function addMarkInput() {
+  mark.value.push({ name: "" });
+}
+</script>
+
 <template>
   <div class="industry-mark">
     <!-- 添加行业 -->
     <el-dialog
-      v-dialogDrag
+      draggable
       :close-on-click-modal="false"
       :modal-append-to-body="false"
       center
       title="添加产业"
-      :visible.sync="addIndustryDlg"
+      v-model="props.addIndustryDlg"
       customClass="custom-addIndustryMark"
       :before-close="confirmIndustry"
     >
-      <div v-if="optionFormregion === '研选'">
-        <p>所属行业：{{ optionFormregion }}</p>
+      <div v-if="props.optionFormregion === '研选'">
+        <p>所属行业：{{ props.optionFormregion }}</p>
         <el-input v-model="inputIndustry" maxlength="10" placeholder="请输入产业名称（最多输入10个字）"></el-input>
       </div>
       <div v-else>
@@ -30,166 +155,42 @@
           </el-form-item>
         </el-form>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="commitIndustry">确定</el-button>
-        <el-button @click="confirmIndustry">取消</el-button>
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="commitIndustry">确定</el-button>
+          <el-button @click="confirmIndustry">取消</el-button>
+        </span>
+      </template>
     </el-dialog>
 
     <!-- 添加标的 -->
     <el-dialog
-      v-dialogDrag
+      draggable
       :close-on-click-modal="false"
       :modal-append-to-body="false"
       center
       title="添加标的"
-      :visible.sync="addMarkDlg"
+      v-model="props.addMarkDlg"
       customClass="custom-addIndustryMark"
       :before-close="confirmMark"
     >
       <div>
-        <p>所属产业：{{ addMarkUpVal.industrialName }}</p>
+        <p>所属产业：{{ props.addMarkUpVal.industrialName }}</p>
         <div v-for="(item, index) in mark" :key="index">
           <el-input v-model="item.name" maxlength="6" placeholder="请输入标的名称（最多输入6个字）"></el-input>
         </div>
         <div class="add-mark" @click="addMarkInput"><img src="~@/assets/img/set_m/add_ico.png" /> 继续添加</div>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="commitMark">确定</el-button>
-        <el-button @click="confirmMark">取消</el-button>
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="commitMark">确定</el-button>
+          <el-button @click="confirmMark">取消</el-button>
+        </span>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-export default {
-  name: "",
-  components: {},
-  props: {
-    addIndustryDlg: {
-      type: Boolean,
-      default: false,
-    },
-    addMarkDlg: {
-      type: Boolean,
-      default: false,
-    },
-    optionFormregion: {
-      type: String,
-    },
-    addMarkUpVal: {
-      type: Object,
-      default: {},
-    },
-    source: {
-      type: Number,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      inputIndustry: "",
-      mark: [{ name: "" }],
-      chartPermissionList: [],
-      addIndustryForm: {
-        //添加产业分类
-        tradeValue: "",
-        industryName: "",
-        recommendedIndex: null,
-      },
-      industryAdd: {
-        industryName: [{ required: true, message: "请输入产业名称（最多输入10个字）", trigger: "blur" }],
-        recommendedIndex: [{ required: true, message: "请输入推荐指数", trigger: "blur" }],
-        tradeValue: [{ required: true, message: "请选择行业", trigger: "change" }],
-      },
-    };
-  },
-  computed: {},
-  watch: {},
-  created() {},
-  mounted() {},
-  methods: {
-    //获取行业
-    chartPermission() {
-      raiInterface.chartPermissionFirstHaveIco().then((res) => {
-        if (res.Ret === 200) {
-          this.chartPermissionList = res.Data.List;
-        }
-      });
-    },
-    //添加行业的确定事件
-    async commitIndustry() {
-      if (this.optionFormregion != "研选") {
-        this.$refs.addIndustryRef.validate(async (val) => {
-          if (val) {
-            //添加产业
-            const res = await raiInterface.industrialManagement({
-              IndustryName: this.addIndustryForm.industryName,
-              RecommendedIndex: this.addIndustryForm.recommendedIndex - 0,
-              ChartPermissionId: this.addIndustryForm.tradeValue,
-            });
-            if (!res.Success) return;
-            this.$emit("commitIndustryDlg", res.Data);
-            this.$message.success("添加成功！");
-            this.confirmIndustry();
-          }
-        });
-      } else {
-        if (this.inputIndustry) {
-          const res = await raiInterface.industrialManagement({
-            Source: this.source,
-            IndustryName: this.inputIndustry,
-            PermissionName: this.optionFormregion,
-          });
-          if (res.Ret === 200) {
-            this.$emit("commitIndustryDlg", res.Data);
-            this.$message.success("添加成功！");
-            this.confirmIndustry();
-          }
-        } else {
-          this.$message.error("请输入产业！");
-        }
-      }
-    },
-    //添加行业的取消事件
-    confirmIndustry() {
-      this.inputIndustry = "";
-      this.$emit("update:addIndustryDlg", false);
-    },
-    //添加标的的确定事件
-    async commitMark() {
-      let arr = [];
-      this.mark.forEach((item) => {
-        if (item.name) {
-          arr.push(item.name);
-        }
-      });
-      if (!arr.length) return this.$message.error("请输入标的！");
-      const res = await raiInterface.industrialSubjectAdd({
-        IndustrialManagementId: this.addMarkUpVal.industrialId,
-        Source: this.source,
-        SubjectName: arr.join(",").replace(/,/g, "{|}"),
-      });
-      if (res.Ret === 200) {
-        this.$emit("commitMarkDlg", res.Data.NewId);
-        this.$message.success("添加成功！");
-        this.confirmMark();
-      }
-    },
-    //添加标的的取消事件
-    confirmMark() {
-      this.mark = [{ name: "" }];
-      this.$emit("update:addMarkDlg", false);
-    },
-    //添加标的的输入框
-    addMarkInput() {
-      this.mark.push({ name: "" });
-    },
-  },
-};
-</script>
 <style lang="scss">
 .industry-mark {
   .custom-addIndustryMark {

src/views/rai_manage/components/addLabelDialog.vue

@@ -1,214 +1,187 @@
+<script setup>
+import { ref, watch } from "vue";
+import { raiInterface } from "@/api/api.js";
+
+const props = defineProps({
+  addLabeldialogVisib: {
+    type: Boolean,
+    default: false,
+  },
+  addLabelType: {
+    type: String,
+    required: true,
+  },
+});
+
+const dynamicItem = ref([]);
+
+watch(
+  () => props.addLabeldialogVisib,
+  (newValue) => {
+    newValue && getList();
+  }
+);
+function getList() {
+  raiInterface.activityFastSearchKeWord().then((res) => {
+    if (res.Ret === 200) {
+      dynamicItem.value = res.Data.List;
+    }
+  });
+}
+
+const $emit = defineEmits()
+//弹框取消事件
+function confirmPerson() {
+  dynamicItem.value = [];
+  $emit("update:addLabeldialogVisib", false);
+}
+//弹框确认事件
+function confirmSubmit() {
+  dynamicItem.value = [];
+  $emit("update:addLabeldialogVisib", false);
+}
+//添加活动标签
+function addItem() {
+  if (dynamicItem.value.length == 20) return;
+  dynamicItem.value.push({ KeyWord: "", ListWords: [] });
+}
+//删除活动标签
+function deleteItem(index) {
+  dynamicItem.value.splice(index, 1);
+}
+//添加标签下的相关公司
+function addChildren(index) {
+  dynamicItem.value[index].ListWords.push({ MirrorWord: "" });
+}
+//删除标签下的相关公司
+function deleteChildren(index, indexs) {
+  dynamicItem.value[index].ListWords.splice(indexs, 1);
+}
+</script>
+
 <template>
- <div class="container-addLabel">
-     <el-dialog
-      v-dialogDrag 
-      :close-on-click-modal="false"
-      :modal-append-to-body="false"
-      center
-      top="5vh"
-      :visible.sync="addLabeldialogVisib"
-      customClass="custom-addLabel"
-      :before-close="confirmPerson"
-    >
-    <div slot="title" style="display: flex; align-items: center">
-        <img
-          :src="$icons.add"
-          style="color: #fff; width: 16px; height: 16px; margin-right: 5px"
-        />
-        <span style="font-size: 16px">
-         {{addLabelType=='活动'?'活动标签':'快捷检索标签'}}   
-            </span>
-      </div>
-     <div  class="inline"  v-for="(item, index) in dynamicItem"  :key="index" >
+  <div class="container-addLabel">
+    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center top="5vh" v-model="props.addLabeldialogVisib" customClass="custom-addLabel" :before-close="confirmPerson">
+      <template #header>
+        <div style="display: flex; align-items: center">
+          <img :src="$icons.add" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
+          <span style="font-size: 16px">
+            {{ props.addLabelType == "活动" ? "活动标签" : "快捷检索标签" }}
+          </span>
+        </div>
+      </template>
+      <div class="inline" v-for="(item, index) in dynamicItem" :key="index">
         <div class="inline-content">
-        <span>{{index+1}}</span>
-          <el-input
-          class="inline-input"
-          v-model="item.KeyWord"
-          placeholder="请输入标签名称"
-          clearable
-        ></el-input>
-         <img @click="deleteItem(index)" src="~@/assets/img/icons/delete-Item.png"  :class="index == 0 ? 'defaultyi' : ''" alt="">
-      </div>
-      <div class="children-item">
-        <div class="children-item" v-for="(key, indexs) in item.ListWords"  :key="indexs">
-         <el-input
-          class="inline-input"
-          v-model="key.MirrorWord"
-          placeholder="请输入标签名称"
-          clearable
-        ></el-input>
-         <img @click="deleteChildren(index,indexs)" src="~@/assets/img/icons/delete-Item.png"  :class="indexs == 0 ? 'defaultyi' : ''" alt="">
-      </div>
-       <div class="children-box">
-          <img  @click="addChildren(index)" :src="$icons.addblue">
-          <span @click="addChildren(index)" >添加相关公司</span>
+          <span>{{ index + 1 }}</span>
+          <el-input class="inline-input" v-model="item.KeyWord" placeholder="请输入标签名称" clearable></el-input>
+          <img @click="deleteItem(index)" src="~@/assets/img/icons/delete-Item.png" :class="index == 0 ? 'defaultyi' : ''" alt="" />
+        </div>
+        <div class="children-item">
+          <div class="children-item" v-for="(key, indexs) in item.ListWords" :key="indexs">
+            <el-input class="inline-input" v-model="key.MirrorWord" placeholder="请输入标签名称" clearable></el-input>
+            <img @click="deleteChildren(index, indexs)" src="~@/assets/img/icons/delete-Item.png" :class="indexs == 0 ? 'defaultyi' : ''" alt="" />
+          </div>
+          <div class="children-box">
+            <img @click="addChildren(index)" :src="$icons.addblue" />
+            <span @click="addChildren(index)">添加相关公司</span>
+          </div>
+        </div>
       </div>
+      <div class="add-box">
+        <img @click="addItem" :src="$icons.addblue" />
+        <span @click="addItem">添加</span>
       </div>
-     </div>
-    <div class="add-box">
-          <img  @click="addItem" :src="$icons.addblue">
-          <span @click="addItem" >添加</span>
-      </div>
-       <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="confirmSubmit">确定</el-button>
-        <el-button @click="confirmPerson">取消</el-button>
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="confirmSubmit">确定</el-button>
+          <el-button @click="confirmPerson">取消</el-button>
+        </span>
+      </template>
     </el-dialog>
- </div>
+  </div>
 </template>
 
-<script>
-import { raiInterface } from '@/api/api.js'
-export default {
-  name: '',
-  components: {},
-  props: {
-      addLabeldialogVisib:{
-          type: Boolean,
-          default: false
-      },
-      addLabelType:{
-          type:String,
-          required: true,
-      }
-  },
-  data () {
-    return {
-        dynamicItem:[]
-    }
-  },
-  computed: {},
-  watch: {
-    addLabeldialogVisib(){
-      if(this.addLabeldialogVisib){
-        this.getList()
-      }
-    }
-  },
-  created () {},
-  mounted () {},
-  methods: {
-    getList(){
-      raiInterface.activityFastSearchKeWord().then(res=>{
-        if(res.Ret === 200){
-          this.dynamicItem= res.Data.List
-        }
-      })
-    },
-      //弹框取消事件
-      confirmPerson(){
-          this.dynamicItem=[]
-          this.$emit('update:addLabeldialogVisib',false);
-      },
-      //弹框确认事件
-      confirmSubmit(){
-        this.dynamicItem=[]
-        this.$emit('update:addLabeldialogVisib',false);
-      },
-      //添加活动标签
-      addItem(){
-          if(this.dynamicItem.length == 20) return 
-          this.dynamicItem.push({KeyWord: "",ListWords:[]})
-      },
-      //删除活动标签
-      deleteItem(index){
-          this.dynamicItem.splice(index,1)
-      },
-      //添加标签下的相关公司
-      addChildren(index){
-         this.dynamicItem[index].ListWords.push({MirrorWord: ""})
-      },
-      //删除标签下的相关公司
-      deleteChildren(index,indexs){
-        this.dynamicItem[index].ListWords.splice(indexs,1)
-      }
-  }
-}
-</script>
-<style  lang="scss">
+<style lang="scss">
 .container-addLabel {
- .custom-addLabel {
-    width: 600px;  
+  .custom-addLabel {
+    width: 600px;
   }
   .add-box {
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    color: #5882EF;
+    color: #5882ef;
     margin-top: 30px;
     margin-bottom: 17px;
-    img {   
-    width: 16px;
-    height: 16px;
-    margin-right: 10px;
+    img {
+      width: 16px;
+      height: 16px;
+      margin-right: 10px;
     }
   }
-    .inline {
+  .inline {
     margin-bottom: 20px;
     width: 440px;
     .inline-input {
-     width: 370px !important;
+      width: 370px !important;
     }
-  p{
+    p {
       padding-top: 5px;
       font-size: 14px;
       font-family: PingFang SC;
       font-weight: 500;
       line-height: 20px;
-      color: #EF5858;
+      color: #ef5858;
       opacity: 1;
     }
     .children-item {
-
       .children-item {
-      margin-top: 20px;
-      padding-right:20px;
-      padding-left: 25px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      img { 
-        width: 14px;
-        height: 14px;
-      }
+        margin-top: 20px;
+        padding-right: 20px;
+        padding-left: 25px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        img {
+          width: 14px;
+          height: 14px;
+        }
       }
       .children-box {
         margin-top: 15px;
         padding-left: 25px;
         display: flex;
         align-items: center;
-        color: #5882EF;
-        img { 
+        color: #5882ef;
+        img {
           margin-right: 10px;
         }
       }
     }
   }
   .inline-content {
-    padding-right:20px;
+    padding-right: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    img { 
+    img {
       width: 14px;
       height: 14px;
     }
   }
-   .el-input {
+  .el-input {
     width: 360px !important;
   }
-  .el-switch__label  {
-    color: #606266 ;
-   font-size: 14px;
-   font-weight:400;
+  .el-switch__label {
+    color: #606266;
+    font-size: 14px;
+    font-weight: 400;
   }
-   .is-active {
-    color: #409EFF !important;
+  .is-active {
+    color: #409eff !important;
   }
   .el-radio__label {
-    font-weight:400;
+    font-weight: 400;
   }
 }
-
 </style>

src/views/rai_manage/components/addSummarizing.vue

@@ -35,7 +35,7 @@ const pageState = reactive({
   //产业调研纪要篇 上市公司调研纪要篇 输入框是否高亮
   isSortCydyjyShow: true,
   isSortSsgsShow: true,
-  isShowStatus:true
+  isShowStatus: true,
 });
 
 function beforeunloadFn(e) {
@@ -209,17 +209,7 @@ onUnmounted(() => {
   window.removeEventListener("beforeunload", beforeunloadFn);
 });
 
-const {
-  ruleForm,
-  rules,
-  ListCydyjy,
-  SortCydyjy,
-  ListSsgs,
-  SortSsgs,
-  isSortCydyjyShow,
-  isSortSsgsShow,
-  isShowStatus
-} = toRefs(pageState);
+const { ruleForm, rules, ListCydyjy, SortCydyjy, ListSsgs, SortSsgs, isSortCydyjyShow, isSortSsgsShow, isShowStatus } = toRefs(pageState);
 </script>
 
 <template>

src/views/rai_manage/components/addSummary.vue

@@ -391,7 +391,6 @@ onBeforeRouteLeave((to, from, next) => {
   next();
 });
 
-
 const {
   copyText,
   copyTxt,
@@ -513,7 +512,7 @@ const {
       </el-card>
     </el-form>
 
-    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center title="纪要内容模板" v-model="dialogVisible" width="35%" :before-close="handleClose">
+    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center title="纪要内容模板" v-model="dialogVisible" width="35%" :before-close="handleClose">
       <div id="dialog" v-html="copyText"></div>
       <div style="margin-bottom: 60px">
         <p class="no-cv" style="color: #f00">注：多场调研访谈时，请插入水平线分隔</p>
@@ -535,7 +534,7 @@ const {
       :addMarkUpVal="addMarkUpVal"
     />
     <el-dialog
-      v-dialogDrag
+      draggable
       :close-on-click-modal="false"
       :modal-append-to-body="false"
       center

src/views/rai_manage/components/apply/applyDialog.vue

@@ -1,18 +1,230 @@
+<script setup>
+import { ref, watch, onMounted, computed } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import { raiInterface, raiSpecial } from "@/api/api.js";
+
+const props = defineProps({
+  addDialogVisible: {
+    type: Boolean,
+    default: false,
+  },
+  selectList: {
+    type: String,
+  },
+  signUpAdd: {
+    type: String,
+  },
+  minimumSummation: {
+    type: Number,
+  },
+
+  selectionArr: {
+    type: Array,
+    required: true,
+    default: [],
+  },
+  addDialogType: {
+    type: String,
+    required: true,
+  },
+});
+
+const dynamicItem = ref([{ name: "", isShow: false, radio: "1", checked: false }]);
+const companyList = ref([]); //客户名称的数组
+const userTyepa = ref([]); //客户名称的数组
+const timeout = ref(null);
+const warningIsShow = ref(false);
+const isShow = ref("");
+const userId = ref("");
+
+const isType = computed(() => {
+  if (props.selectionArr.length > 0) {
+    return props.selectionArr.some(
+      (item) => item.ActivityTypeName == "公司调研电话会" || item.ActivityTypeName == "专家电话会" || item.ActivityTypeName == "分析师电话会" || item.IsYidongConduct == 1
+    );
+  }
+});
+
+const isShowSummary = computed(() => {
+  if (props.selectionArr.length > 0) {
+    return (props.addDialogType == "新增外呼人员" || props.addDialogType == "新增报名") && !props.selectionArr.some((item) => item.ActivityTypeName == "公司调研电话会" && item.LimitPeopleNum !== 0);
+  }
+});
+
+const $emit = defineEmits(["getsDataList"]);
+
+async function confirmPerson() {
+  let addSignuUser = addSignuUser();
+  measurement();
+  const is = dynamicItem.value.some((item) => item.isShow == true);
+  if (is) return ElMessage.error("姓名有误");
+  if (!userId.value) return ElMessage.error("请输入姓名！");
+  const res =
+    (isType.value && props.addDialogType != "新增预约纪要") || props.signUpAdd == "报名" || props.signUpAdd == "易董" || props.signUpAdd == "c类"
+      ? await raiInterface.activitySignupAddSignuUser({
+          ActivityIds: props.selectList,
+          List: addSignuUser,
+        })
+      : props.signUpAdd == "专项"
+      ? await raiSpecial.addUserSpecial({
+          ActivityIds: props.selectList,
+          List: addSignuUser,
+        })
+      : props.addDialogType == "新增预约纪要"
+      ? await raiInterface.activityAddSummaryUser({
+          ActivityIds: props.selectList,
+          UserIds: userId.value,
+        })
+      : await raiInterface.activitySignupAddUser({
+          ActivityIds: props.selectList,
+          List: addSignuUser,
+        });
+
+  if (res.Ret === 200) {
+    ElMessage.success("添加成功");
+    $emit.getsDataList();
+  }
+  userId.value = "";
+  userTyep.value = [];
+  (dynamicItem.value = [{ name: "", isShow: false, radio: "1", checked: false }]), $emit("update:addDialogVisible", false);
+}
+function addSignuUser() {
+  let arr = [];
+  dynamicItem.value.forEach((item) => {
+    if (item.name) {
+      arr.push({
+        IsAppointment: item.checked ? 1 : 0,
+        UserId: item.id,
+        SignupType: isType.value ? +item.radio : 0,
+      });
+    }
+  });
+  return arr;
+}
+// 添加数组
+function addItem() {
+  if (props.signUpAdd == "报名" && props.minimumSummation == dynamicItem.value.length) return ElMessage.warning(`所选活动最多还能添加${props.minimumSummation}人`);
+  dynamicItem.value.push({
+    name: "",
+    isShow: false,
+    radio: "1",
+    checked: false,
+  });
+}
+// 删除数组的某一项
+function deleteItem(item, index) {
+  dynamicItem.value.splice(index, 1);
+}
+/* 获取客户名称 */
+function getCompany(query) {
+  if (query.includes(",")) return;
+  if (query) {
+    raiInterface
+      .activitySignupUserList({
+        KeyWord: query,
+      })
+      .then((res) => {
+        if (res.Ret === 200) {
+          let arr = [];
+          res.Data.List &&
+            res.Data.List.forEach((item) => {
+              let obj = {
+                ...item,
+                value: item.RealName + " , " + item.Mobile + " , " + item.CompanyName,
+              };
+              arr.push(obj);
+            });
+          companyList.value = arr;
+        }
+      });
+  } else {
+    companyList.value = [];
+  }
+}
+function callbackHandle(data, cb) {
+  let results = data
+    ? companyList.value.filter((item) => {
+        return item.value.includes(data);
+      })
+    : companyList.value;
+  clearTimeout(timeout.value);
+  timeout.value = setTimeout(() => {
+    cb(results);
+  }, 300);
+  if (results.length == 0) {
+    warningIsShow.value = true;
+  } else {
+    warningIsShow.value = false;
+  }
+}
+//退出弹框
+function handleClose() {
+  userId.value = "";
+  userTyep.value = [];
+  dynamicItem.value = [{ name: "", isShow: false, radio: "1", checked: false }];
+  $emit("update:addDialogVisible", false);
+}
+//失去焦点
+function focusCompany(name) {
+  if ((name.length && companyList.value.length == 0) || warningIsShow.value) {
+    dynamicItem.value.forEach((item) => {
+      if (item.name == name) {
+        item.isShow = true;
+      }
+    });
+  } else {
+    dynamicItem.value.forEach((item) => {
+      if (item.name == name) {
+        item.isShow = false;
+      }
+    });
+  }
+}
+//联想选择后
+
+function selectCompany(val, index) {
+  companyList.value.forEach((item) => {
+    if (item.value == val.name) {
+      dynamicItem.value.splice(index, 1, { name: val.name, isShow: false, radio: val.radio, id: item.UserId, checked: dynamicItem.value[index].checked });
+    }
+  });
+}
+//最后的确定 遍历
+function measurement() {
+  const arr = [];
+  const userIds = [];
+  dynamicItem.value.forEach((item) => {
+    if (item.name) {
+      let obj = {
+        Uid: item.id,
+        Type: item.radio,
+      };
+      userIds.push(item.id);
+      arr.push(obj);
+    }
+  });
+  userId.value = userIds.length ? userIds.join(",") : "";
+  userTyep.value = JSON.stringify(arr);
+}
+</script>
+
 <template>
   <div class="container-applydialog">
     <el-dialog
-      v-dialogDrag
+      draggable
       :close-on-click-modal="false"
       :modal-append-to-body="false"
       center
-      :visible.sync="addDialogVisible"
-      :customClass="[isType && addDialogType !== '新增预约纪要' ? 'container-applydial' : 'container-custom']"
+      v-model="props.addDialogVisible"
+      :customClass="[isType && props.addDialogType !== '新增预约纪要' ? 'container-applydial' : 'container-custom']"
       :before-close="handleClose"
     >
-      <div slot="title" style="display: flex; align-items: center">
-        <img :src="$icons.add" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
-        <span style="font-size: 16px">{{ addDialogType }}</span>
-      </div>
+      <template #header>
+        <div style="display: flex; align-items: center">
+          <img :src="$icons.add" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
+          <span style="font-size: 16px">{{ props.addDialogType }}</span>
+        </div>
+      </template>
       <div class="inline" v-for="(item, index) in dynamicItem" :key="index">
         <div class="inline-content">
           <el-autocomplete
@@ -26,21 +238,21 @@
             :trigger-on-focus="false"
             clearable
           ></el-autocomplete>
-          <template v-if="selectionArr && selectionArr.length && selectionArr[0].ActivityTypeName == '公司调研电话会'">
-            <div class="radio-content" v-if="selectionArr[0].IsResearchPoints != 1">
+          <template v-if="props.selectionArr && props.selectionArr.length && props.selectionArr[0].ActivityTypeName == '公司调研电话会'">
+            <div class="radio-content" v-if="props.selectionArr[0].IsResearchPoints != 1">
               <el-radio v-model="item.radio" label="1">预约外呼</el-radio>
-              <el-radio v-model="item.radio" label="2" v-if="selectionArr[0].LimitPeopleNum > 0">自主拨入</el-radio>
+              <el-radio v-model="item.radio" label="2" v-if="props.selectionArr[0].LimitPeopleNum > 0">自主拨入</el-radio>
             </div>
-            <div style="margin: 0 20px" v-if="selectionArr[0].IsCanAppointmentMinutes > 0">
+            <div style="margin: 0 20px" v-if="props.selectionArr[0].IsCanAppointmentMinutes > 0">
               <el-checkbox v-model="item.checked">同时预约纪要</el-checkbox>
             </div>
           </template>
           <template v-else>
-            <div v-if="isType && addDialogType !== '新增预约纪要'" class="radio-content">
+            <div v-if="isType && props.addDialogType !== '新增预约纪要'" class="radio-content">
               <el-radio v-model="item.radio" label="1">预约外呼</el-radio>
               <el-radio v-model="item.radio" label="2">自主拨入</el-radio>
             </div>
-            <div style="margin: 0 20px" v-if="isShowSummary && signUpAdd !== '易董' && signUpAdd !== '专项'">
+            <div style="margin: 0 20px" v-if="isShowSummary && props.signUpAdd !== '易董' && props.signUpAdd !== '专项'">
               <el-checkbox v-model="item.checked">同时预约纪要</el-checkbox>
             </div>
           </template>
@@ -52,231 +264,16 @@
         <img @click="addItem" :src="$icons.addblue" alt="" />
         <span @click="addItem">添加</span>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="confirmPerson">确定</el-button>
-        <el-button @click="handleClose">取消</el-button>
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="confirmPerson">确定</el-button>
+          <el-button @click="handleClose">取消</el-button>
+        </span>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
-import { raiInterface, raiSpecial } from "@/api/api.js";
-export default {
-  name: "",
-  components: {},
-  props: {
-    addDialogVisible: {
-      type: Boolean,
-      default: false,
-    },
-    dialogVisibleId: {
-      type: Number,
-    },
-    selectList: {
-      type: String,
-    },
-    signUpAdd: {
-      type: String,
-    },
-    minimumSummation: {
-      type: Number,
-    },
-    tabsPitchonType: {
-      type: Number,
-    },
-    selectionArr: {
-      type: Array,
-      required: true,
-      default: [],
-    },
-    addDialogType: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      dynamicItem: [{ name: "", isShow: false, radio: "1", checked: false }],
-      companyList: [], //客户名称的数组
-      timeout: null, //
-      isShow: "",
-      warningIsShow: false,
-      userId: "",
-      userTyepa: [],
-    };
-  },
-  computed: {
-    isType() {
-      if (this.selectionArr.length > 0) {
-        return this.selectionArr.some(
-          (item) => item.ActivityTypeName == "公司调研电话会" || item.ActivityTypeName == "专家电话会" || item.ActivityTypeName == "分析师电话会" || item.IsYidongConduct == 1
-        );
-      }
-    },
-    isShowSummary() {
-      return (this.addDialogType == "新增外呼人员" || this.addDialogType == "新增报名") && !this.selectionArr.some((item) => item.ActivityTypeName == "公司调研电话会" && item.LimitPeopleNum !== 0);
-    },
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    async confirmPerson() {
-      let addSignuUser = this.addSignuUser();
-      this.measurement();
-      const is = this.dynamicItem.some((item) => item.isShow == true);
-      if (is) return this.$message.error("姓名有误");
-      if (!this.userId) return this.$message.error("请输入姓名！");
-      const res =
-        (this.isType && this.addDialogType != "新增预约纪要") || this.signUpAdd == "报名" || this.signUpAdd == "易董" || this.signUpAdd == "c类"
-          ? await raiInterface.activitySignupAddSignuUser({
-              ActivityIds: this.selectList,
-              List: addSignuUser,
-            })
-          : this.signUpAdd == "专项"
-          ? await raiSpecial.addUserSpecial({
-              ActivityIds: this.selectList,
-              List: addSignuUser,
-            })
-          : this.addDialogType == "新增预约纪要"
-          ? await raiInterface.activityAddSummaryUser({
-              ActivityIds: this.selectList,
-              UserIds: this.userId,
-            })
-          : await raiInterface.activitySignupAddUser({
-              ActivityIds: this.selectList,
-              List: addSignuUser,
-            });
-
-      if (res.Ret === 200) {
-        this.$message.success("添加成功");
-        this.$parent.getsDataList();
-      }
-      this.userId = "";
-      this.userTyep = [];
-      (this.dynamicItem = [{ name: "", isShow: false, radio: "1", checked: false }]), this.$emit("update:addDialogVisible", false);
-    },
-    addSignuUser() {
-      let arr = [];
-      this.dynamicItem.forEach((item) => {
-        if (item.name) {
-          arr.push({
-            IsAppointment: item.checked ? 1 : 0,
-            UserId: item.id,
-            SignupType: this.isType ? +item.radio : 0,
-          });
-        }
-      });
-      return arr;
-    },
-    // 添加数组
-    addItem() {
-      if (this.signUpAdd == "报名" && this.minimumSummation == this.dynamicItem.length) return this.$message.warning(`所选活动最多还能添加${this.minimumSummation}人`);
-      this.dynamicItem.push({
-        name: "",
-        isShow: false,
-        radio: "1",
-        checked: false,
-      });
-    },
-    // 删除数组的某一项
-    deleteItem(item, index) {
-      this.dynamicItem.splice(index, 1);
-    },
-    /* 获取客户名称 */
-    getCompany(query) {
-      if (query.includes(",")) return;
-      if (query) {
-        raiInterface
-          .activitySignupUserList({
-            KeyWord: query,
-          })
-          .then((res) => {
-            if (res.Ret === 200) {
-              let arr = [];
-              res.Data.List &&
-                res.Data.List.forEach((item) => {
-                  let obj = {
-                    ...item,
-                    value: item.RealName + " , " + item.Mobile + " , " + item.CompanyName,
-                  };
-                  arr.push(obj);
-                });
-              this.companyList = arr;
-            }
-          });
-      } else {
-        this.companyList = [];
-      }
-    },
-    callbackHandle(data, cb) {
-      let results = data
-        ? this.companyList.filter((item) => {
-            return item.value.includes(data);
-          })
-        : this.companyList;
-      clearTimeout(this.timeout);
-      this.timeout = setTimeout(() => {
-        cb(results);
-      }, 300);
-      if (results.length == 0) {
-        this.warningIsShow = true;
-      } else {
-        this.warningIsShow = false;
-      }
-    },
-    //退出弹框
-    handleClose() {
-      this.userId = "";
-      this.userTyep = [];
-      this.dynamicItem = [{ name: "", isShow: false, radio: "1", checked: false }];
-      this.$parent.addDialogVisible = false;
-    },
-    //失去焦点
-    focusCompany(name) {
-      if ((name.length && this.companyList.length == 0) || this.warningIsShow) {
-        this.dynamicItem.forEach((item) => {
-          if (item.name == name) {
-            item.isShow = true;
-          }
-        });
-      } else {
-        this.dynamicItem.forEach((item) => {
-          if (item.name == name) {
-            item.isShow = false;
-          }
-        });
-      }
-    },
-    //联想选择后
-
-    selectCompany(val, index) {
-      this.companyList.forEach((item) => {
-        if (item.value == val.name) {
-          this.dynamicItem.splice(index, 1, { name: val.name, isShow: false, radio: val.radio, id: item.UserId, checked: this.dynamicItem[index].checked });
-        }
-      });
-    },
-    //最后的确定 遍历
-    measurement() {
-      const arr = [];
-      const userIds = [];
-      this.dynamicItem.forEach((item) => {
-        if (item.name) {
-          let obj = {
-            Uid: item.id,
-            Type: item.radio,
-          };
-          userIds.push(item.id);
-          arr.push(obj);
-        }
-      });
-      this.userId = userIds.length ? userIds.join(",") : "";
-      this.userTyep = JSON.stringify(arr);
-    },
-  },
-};
-</script>
 <style lang="scss">
 .container-applydialog {
   .container-custom {

src/views/rai_manage/components/apply/particularsDialog.vue

@@ -1,28 +1,279 @@
+<script setup>
+import { ref, watch, onMounted, computed, reactive, nextTick } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import { raiInterface } from "@/api/api.js";
+import EditMobile from "../editMobile.vue";
+import { NameListDownload } from "./applyTableColums";
+
+const props = defineProps({
+  particularsDialogVisible: {
+    type: Boolean,
+    default: false,
+  },
+  subscribe: {
+    type: String,
+    default: "报名详情",
+  },
+  dialogVisibleId: {
+    type: Number,
+  },
+});
+
+const pageState = reactive({
+  page_no: 1,
+  PageSize: 10,
+  dataList: [], //表格
+  value1: true,
+  radioArr: [
+    {
+      name: "限制报名",
+      id: 3,
+    },
+    {
+      name: "预约外呼",
+      id: 1,
+    },
+    {
+      name: "自主拨入",
+      id: 2,
+    },
+  ],
+  excelType: "", //下载类型
+  excelId: "", //下载的id
+  total: "", //条数
+  myTotal: "", //条数
+  isLimitPeople: "", //条数
+  memberType: "", //
+  editMobileDialogVisible: false, //
+  editMobileId: "", //
+  outboundMobile: "",
+  isFullNum: false, //报名人数是否已满
+  isNameListDownloadShow: false, //下载名单弹框
+  downloadTypeName: 0,
+  isYidongConduct: false, // 是否是易懂
+});
+
+// 下载
+const exportUser = computed(() => {
+  if (props.selectionArr.length > 0) {
+    if (pageState.Teleconference || props.subscribe == "预约外呼详情") {
+      return import.meta.env.VITE_APP_API_ROOT + "/cygx/activitySignup/callExport?ActivityId=" + pageState.excelId + "&" + localStorage.getItem("auth") || "";
+    } else {
+      return import.meta.env.VITE_APP_API_ROOT + "/cygx/activitySignup/signupFailExport?ActivityId=" + pageState.excelId + "&" + localStorage.getItem("auth") || "";
+    }
+  }
+});
+
+// 手机号是否展示
+const isMobileShow = computed(() => {
+  return pageState.AppointmentCall || pageState.Teleconference || pageState.excelType == "YiDong" || pageState.isYidongConduct || pageState.excelType == "OfflineResearch";
+});
+
+// 预约外呼是否展示
+const isOutboundMobileShow = computed(() => {
+  return (pageState.AppointmentCall || pageState.Teleconference || pageState.isYidongConduct || pageState.excelType == "OfflineResearch") && pageState.isCancelApply;
+});
+
+// 是否展示参会方式
+const isSignupTypeShow = computed(() => {
+  return (pageState.Teleconference || pageState.AppointmentCall || pageState.isYidongConduct || pageState.excelType == "OfflineResearch") && props.subscribe == "报名详情";
+});
+const isCancelApply = computed(() => {
+  return props.subscribe !== "报名失败详情";
+});
+const nameListDownload = computed(() => {
+  return NameListDownload;
+});
+const Teleconference = computed(() => {
+  return pageState.excelType == "Teleconference";
+});
+const AppointmentCall = computed(() => {
+  return pageState.excelType == "AppointmentCall";
+});
+
+watch(
+  () => props.particularsDialogVisible,
+  () => {
+    if (props.particularsDialogVisible) {
+      if (props.subscribe == "报名失败详情") {
+        pageState.dataList = [];
+        salonFailSignupList();
+      } else {
+        pageState.dataList = [];
+        getsDataList();
+      }
+    }
+  }
+);
+const $emit = defineEmits(["getsDataList"]);
+// 关闭弹框
+function okBtn() {
+  $emit("update:particularsDialogVisible", false);
+}
+//列表表格
+function getsDataList() {
+  raiInterface
+    .appointmentList({
+      ActivityId: props.dialogVisibleId,
+    })
+    .then((res) => {
+      if (res.Ret !== 200) return;
+      pageState.excelType = res.Data.ExcelType;
+      pageState.excelId = res.Data.ActivityId;
+      pageState.total = res.Data.Total;
+      pageState.myTotal = res.Data.MyTotal;
+      pageState.isLimitPeople = res.Data.IsLimitPeople;
+      pageState.memberType = res.Data.MemberType;
+      pageState.isFullNum = res.Data.IsFull;
+      pageState.isYidongConduct = res.Data.IsYidongConduct == 1 ? true : false;
+      nextTick(() => {
+        pageState.dataList = res.Data.List;
+      });
+    });
+}
+// 报名失败的列表
+function salonFailSignupList() {
+  raiInterface
+    .salonFailSignupList({
+      ActivityId: props.dialogVisibleId,
+    })
+    .then((res) => {
+      if (res.Ret !== 200) return;
+      pageState.excelType = res.Data.ExcelType;
+      pageState.excelId = res.Data.ActivityId;
+      pageState.total = res.Data.Total;
+      pageState.myTotal = res.Data.MyTotal;
+      pageState.isLimitPeople = res.Data.IsLimitPeople;
+      pageState.memberType = res.Data.MemberType;
+      pageState.isFullNum = res.Data.IsFull;
+      pageState.isYidongConduct = res.Data.IsYidongConduct == 1 ? true : false;
+      nextTick(() => {
+        pageState.dataList = res.Data.List;
+      });
+    });
+}
+// 报名方式的选择
+function redioChange(name, id, row) {
+  raiInterface
+    .callSignupEdit({
+      Id: id,
+      OperationStatus: name,
+    })
+    .then((res) => {
+      if (res.Ret !== 200) return;
+      ElMessage.success("操作成功");
+    });
+}
+function switchChange(item) {
+  raiInterface
+    .salonSignupEdit({
+      Id: item.Id,
+    })
+    .then((res) => {
+      if (res.Ret === 200) {
+        ElMessage.success("操作成功");
+        $emit("getsDataList");
+      } else {
+        item.SalonOperation = !item.SalonOperation;
+      }
+    });
+}
+// 点击了修改预约外呼
+function modification(id, value) {
+  pageState.editMobileDialogVisible = true;
+  pageState.editMobileId = id;
+  pageState.outboundMobile = value;
+}
+//取消报名
+function cancelApply(item, num) {
+  if (num == 1) {
+    const str = item.ActivityTime.replace(/-/g, "/");
+    const date = new Date(str);
+    const times = date.getTime();
+    const num = new Date().getTime();
+    if (times - num <= 3600000) return ElMessage.error("外呼名单已发送专家组，请联系专家组取消");
+  }
+  let str = num == 1 ? "外呼" : "报名";
+  ElMessageBox.confirm(`确定要取消该用户的${str}吗？`, `取消${str}`, {
+    confirmButtonText: "是",
+    cancelButtonText: "否",
+    type: "warning",
+  })
+    .then(async () => {
+      const res = await raiInterface.activitySignupApply({
+        SignupId: item.Id,
+        CancelClass: num,
+      });
+      console.log(res);
+      if (res.Ret !== 200) return;
+      ElMessage({
+        type: "success",
+        message: `取消${str}成功!`,
+      });
+      getsDataList();
+      $emit("getsDataList");
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: "已取消操作",
+      });
+    });
+}
+//文字显示
+function yidongStatus(row) {
+  let str = row.YidongExamineStatus == 0 ? "待审核" : row.YidongExamineStatus == 1 ? "审核通过" : "未通过";
+  return str;
+}
+function yidongStyle(row) {
+  const style = row.YidongExamineStatus == 0 ? "color: #3385FF" : row.YidongExamineStatus == 1 ? "color: #07C635" : "color: #D7584F";
+  return style;
+}
+// 专家/分析师电话会 下载名单 弹框
+function appointmentCallDownloadHandler() {
+  pageState.downloadTypeName = 0;
+  pageState.isNameListDownloadShow = true;
+}
+// 专家/分析师电话会 下载名单 确定事件
+function handleConfirmDownload() {
+  let url =
+    import.meta.env.VITE_APP_API_ROOT + "/cygx/activitySignup/signupFailExport?ActivityId=" + pageState.excelId + "&ExcelType=" + pageState.downloadTypeName + "&" + localStorage.getItem("auth") || "";
+  let a = document.createElement("a"); // 创建a标签
+  a.href = url; // 设置下载地址
+  a.download = ""; // 设置下载文件名
+  a.click();
+  pageState.isNameListDownloadShow = false;
+  pageState.downloadTypeName = 0;
+}
+</script>
+
 <template>
   <div class="container-particulars">
     <el-dialog
-      v-dialogDrag
+      draggable
       :close-on-click-modal="false"
       :modal-append-to-body="false"
       center
       :append-to-body="true"
-      :visible.sync="particularsDialogVisible"
+      v-model="props.particularsDialogVisible"
       :before-close="okBtn"
-      :width="subscribe == '报名失败详情' ? '1000px' : '1100px'"
+      :width="props.subscribe == '报名失败详情' ? '1000px' : '1100px'"
     >
-      <div slot="title" style="display: flex; align-items: center">
-        <img v-if="subscribe == '预约外呼详情'" :src="$icons.delay" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
-        <img v-else :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
-        <span style="font-size: 16px">{{ subscribe }}</span>
-      </div>
+      <template #header>
+        <div style="display: flex; align-items: center">
+          <img v-if="props.subscribe == '预约外呼详情'" :src="$icons.delay" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
+          <img v-else :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
+          <span style="font-size: 16px">{{ props.subscribe }}</span>
+        </div>
+      </template>
       <div class="content-box">
         <div class="top-text" style="margin-bottom: 20px">
-          <span v-if="subscribe == '报名失败详情'">
+          <span v-if="props.subscribe == '报名失败详情'">
             <template v-if="memberType == 'Admin'"> 共有{{ total }}人名失败 </template>
             <template v-else-if="memberType == 'Sale'"> 共有{{ total }}名失败，其中本人名下客户{{ myTotal }}人 </template>
             <template v-else> 共有{{ total }}名失败，其中本组名下客户{{ myTotal }}人 </template>
           </span>
-          <span v-else-if="subscribe == '预约外呼详情' || subscribe == '报名详情' || Teleconference">
+          <span v-else-if="props.subscribe == '预约外呼详情' || props.subscribe == '报名详情' || Teleconference">
             <template v-if="memberType == 'Admin'"> 共有{{ total }}人{{ AppointmentCall ? "预约外呼" : "报名" }} </template>
             <template v-else-if="memberType == 'Sale'"> 共有{{ total }}人{{ AppointmentCall ? "预约外呼" : "报名" }}，其中本人名下客户{{ myTotal }}人 </template>
             <template v-else> 共有{{ total }}人{{ AppointmentCall ? "预约外呼" : "报名" }}，其中本组名下客户{{ myTotal }}人 </template>
@@ -33,7 +284,7 @@
             <el-table-column min-width="80" align="center" prop="RealName" key="name" label="姓名"></el-table-column>
             <el-table-column v-if="isMobileShow" min-width="115" align="center" prop="Mobile" key="mobile" label="手机号"></el-table-column>
             <el-table-column v-if="isOutboundMobileShow" min-width="140" align="center" key="outboundMobile" label="外呼号码">
-              <template slot-scope="scope">
+              <template #default="scope">
                 <span>{{ scope.row.OutboundMobile }}</span>
                 <img @click="modification(scope.row.Id, scope.row.OutboundMobile)" :src="$icons.amend" style="color: #fff; width: 12px; height: 12px; margin-left: 5px; vertical-align: middle" />
               </template>
@@ -42,70 +293,70 @@
             <el-table-column min-width="135" align="center" prop="CompanyName" key="company" label="公司名称"></el-table-column>
             <el-table-column min-width="110" align="center" prop="SellerName" key="seller" label="所属销售"></el-table-column>
             <el-table-column v-if="isSignupTypeShow" min-width="110" key="meeting" align="center" label="参会方式">
-              <template slot-scope="{ row }">
+              <template #default="{ row }">
                 <span>
                   {{ row.SignupType == 1 ? "预约外呼" : row.SignupType == 2 ? "自主拨入" : row.SignupType == 4 ? "自主入会" : "--" }}
                 </span>
               </template>
             </el-table-column>
-
-            <!-- <el-table-column v-if="subscribe !== '报名失败详情' && Teleconference && isLimitPeople == 0" align="center" prop="CreateTime" key="create" min-width="160" label="预约时间"></el-table-column> -->
             <el-table-column prop="CreateTime" key="createTime" align="center" min-width="160" label="报名时间"></el-table-column>
-            <el-table-column v-if="subscribe == '报名失败详情'" align="center" prop="" key="fail" label="失败原因">
-              <template slot-scope="scope">
+            <el-table-column v-if="props.subscribe == '报名失败详情'" align="center" prop="" key="fail" label="失败原因">
+              <template #default="scope">
                 <span>{{ scope.row.FailType == 1 ? "总人数已满" : scope.row.FailType == 2 ? "单机构超限制" : scope.row.FailType == 3 ? "爽约次数超限" : "" }}</span>
               </template>
             </el-table-column>
-            <el-table-column v-if="subscribe == '报名失败详情' && Teleconference && isLimitPeople == 1" key="callopen" min-width="330" align="center" prop="" label="操作">
-              <template slot-scope="scope">
+            <el-table-column v-if="props.subscribe == '报名失败详情' && Teleconference && isLimitPeople == 1" key="callopen" min-width="330" align="center" prop="" label="操作">
+              <template #default="scope">
                 <el-radio-group v-model="scope.row.CallOperation">
                   <el-radio :disabled="isFullNum" v-for="item in radioArr" :key="item.id" :label="item.id" @change="redioChange(item.id, scope.row.Id, scope.row)">{{ item.name }}</el-radio>
                 </el-radio-group>
               </template>
             </el-table-column>
             <el-table-column v-if="excelType == 'YiDong'" align="center" prop="" key="YiDong" label="操作">
-              <template slot-scope="{ row }">
+              <template #default="{ row }">
                 <span :style="yidongStyle(row)">{{ yidongStatus(row) }}</span>
               </template>
             </el-table-column>
             <el-table-column v-if="isCancelApply" min-width="135" align="center" prop="" key="cz1" label="操作">
-              <template slot-scope="scope">
+              <template #default="scope">
                 <span class="editsty" @click="cancelApply(scope.row, 0)">取消报名</span>
               </template>
             </el-table-column>
             <el-table-column
               min-width="215"
               key="salonopen"
-              v-if="subscribe == '报名失败详情' && ((Teleconference && isLimitPeople == 0) || AppointmentCall || excelType == 'ExpertSalon' || excelType == 'OfflineResearch')"
+              v-if="props.subscribe == '报名失败详情' && ((Teleconference && isLimitPeople == 0) || AppointmentCall || excelType == 'ExpertSalon' || excelType == 'OfflineResearch')"
               align="center"
               prop=""
               label="操作"
             >
-              <template slot-scope="scope">
+              <template #default="scope">
                 <el-switch :disabled="isFullNum" @change="switchChange(scope.row)" v-model="scope.row.SalonOperation" active-text="加入报名" inactive-text="限制报名"> </el-switch>
               </template>
             </el-table-column>
           </el-table>
         </div>
       </div>
-      <div slot="footer" class="dialog-footer">
-        <div style="margin: 10px 0" v-if="subscribe !== '报名失败详情' && subscribe !== '预约外呼详情'">
-          <span style="margin-left: 30px">
-            <el-button type="primary" v-if="AppointmentCall || this.excelType == 'CClass'|| this.excelType == 'Teleconference'" @click="appointmentCallDownloadHandler">下载名单</el-button>
-            <a :href="exportUser" download v-else>
-              <el-button type="primary">下载名单</el-button>
-            </a>
-          </span>
-          <el-button style="margin-left: 30px" v-if="subscribe == '预约外呼详情' || (Teleconference && subscribe !== '报名失败详情')" type="primary" plain @click="okBtn">取消</el-button>
-          <el-button v-else style="margin-left: 30px" type="primary" plain @click="okBtn">知道了</el-button>
-        </div>
-        <div v-if="subscribe == '报名失败详情'">
-          <el-button style="margin: 10px 0" type="primary" @click="okBtn">知道了</el-button>
+      <template #footer>
+        <div class="dialog-footer">
+          <div style="margin: 10px 0" v-if="props.subscribe !== '报名失败详情' && props.subscribe !== '预约外呼详情'">
+            <span style="margin-left: 30px">
+              <el-button type="primary" v-if="AppointmentCall || excelType == 'CClass' || excelType == 'Teleconference'" @click="appointmentCallDownloadHandler">下载名单</el-button>
+              <a :href="exportUser" download v-else>
+                <el-button type="primary">下载名单</el-button>
+              </a>
+            </span>
+            <el-button style="margin-left: 30px" v-if="props.subscribe == '预约外呼详情' || (Teleconference && props.subscribe !== '报名失败详情')" type="primary" plain @click="okBtn">取消</el-button>
+            <el-button v-else style="margin-left: 30px" type="primary" plain @click="okBtn">知道了</el-button>
+          </div>
+          <div v-if="props.subscribe == '报名失败详情'">
+            <el-button style="margin: 10px 0" type="primary" @click="okBtn">知道了</el-button>
+          </div>
         </div>
-      </div>
+      </template>
     </el-dialog>
-    <edit-mobile :editMobileDialogVisible.sync="editMobileDialogVisible" :editMobileId="editMobileId" :outboundMobile="outboundMobile" />
-    <el-dialog v-dialogDrag width="390px" title="下载名单" :append-to-body="true" :visible.sync="isNameListDownloadShow" :modal-append-to-body="false" @close="isNameListDownloadShow = false">
+    <edit-mobile v-model:editMobileDialogVisible="editMobileDialogVisible" @getsDataList="getsDataList" :editMobileId="editMobileId" :outboundMobile="outboundMobile" />
+    <el-dialog draggable width="390px" title="下载名单" :append-to-body="true" v-model="isNameListDownloadShow" :modal-append-to-body="false" @close="isNameListDownloadShow = false">
       <div>
         <el-select style="width: 100%" v-model="downloadTypeName" placeholder="请选择">
           <el-option v-for="item in nameListDownload" :key="item.value" :label="item.type" :value="item.value"> </el-option>
@@ -119,252 +370,6 @@
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-import EditMobile from "../editMobile.vue";
-import { NameListDownload } from "./applyTableColums";
-export default {
-  name: "",
-  components: { EditMobile },
-  props: {
-    particularsDialogVisible: {
-      type: Boolean,
-      default: false,
-    },
-    subscribe: {
-      type: String,
-      default: "报名详情",
-    },
-    dialogVisibleId: {
-      type: Number,
-    },
-  },
-  data() {
-    return {
-      page_no: 1,
-      PageSize: 10,
-      dataList: [], //表格
-      value1: true,
-      radioArr: [
-        {
-          name: "限制报名",
-          id: 3,
-        },
-        {
-          name: "预约外呼",
-          id: 1,
-        },
-        {
-          name: "自主拨入",
-          id: 2,
-        },
-      ],
-      excelType: "", //下载类型
-      excelId: "", //下载的id
-      total: "", //条数
-      myTotal: "", //条数
-      isLimitPeople: "", //条数
-      memberType: "", //
-      editMobileDialogVisible: false, //
-      editMobileId: "", //
-      outboundMobile: "",
-      isFullNum: false, //报名人数是否已满
-      isNameListDownloadShow: false, //下载名单弹框
-      downloadTypeName: 0,
-      isYidongConduct: false, // 是否是易懂
-    };
-  },
-  computed: {
-    // 下载
-    exportUser() {
-      if (this.Teleconference || this.subscribe == "预约外呼详情") {
-        return import.meta.env.VITE_APP_API_ROOT + "/cygx/activitySignup/callExport?ActivityId=" + this.excelId + "&" + localStorage.getItem("auth") || "";
-      } else {
-        return import.meta.env.VITE_APP_API_ROOT + "/cygx/activitySignup/signupFailExport?ActivityId=" + this.excelId + "&" + localStorage.getItem("auth") || "";
-      }
-    },
-    // 手机号是否展示
-    isMobileShow() {
-      return this.AppointmentCall || this.Teleconference || this.excelType == "YiDong" || this.isYidongConduct || this.excelType == "OfflineResearch";
-    },
-    // 预约外呼是否展示
-    isOutboundMobileShow() {
-      return (this.AppointmentCall || this.Teleconference || this.isYidongConduct || this.excelType == "OfflineResearch") && this.isCancelApply;
-    },
-    // 是否展示参会方式
-    isSignupTypeShow() {
-      return (this.Teleconference || this.AppointmentCall || this.isYidongConduct || this.excelType == "OfflineResearch") && this.subscribe == "报名详情";
-    },
-    isCancelApply() {
-      return this.subscribe !== "报名失败详情";
-    },
-    nameListDownload() {
-      return NameListDownload;
-    },
-    Teleconference() {
-      return this.excelType == "Teleconference";
-    },
-    AppointmentCall() {
-      return this.excelType == "AppointmentCall";
-    },
-  },
-  watch: {
-    particularsDialogVisible() {
-      if (this.particularsDialogVisible) {
-        if (this.subscribe == "报名失败详情") {
-          this.dataList = [];
-          this.salonFailSignupList();
-        } else {
-          this.dataList = [];
-          this.getsDataList();
-        }
-      }
-    },
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    // 关闭弹框
-    okBtn() {
-      this.$parent.particularsDialogVisible = false;
-    },
-    //列表表格
-    getsDataList() {
-      raiInterface
-        .appointmentList({
-          ActivityId: this.dialogVisibleId,
-        })
-        .then((res) => {
-          if (res.Ret !== 200) return;
-          this.excelType = res.Data.ExcelType;
-          this.excelId = res.Data.ActivityId;
-          this.total = res.Data.Total;
-          this.myTotal = res.Data.MyTotal;
-          this.isLimitPeople = res.Data.IsLimitPeople;
-          this.memberType = res.Data.MemberType;
-          this.isFullNum = res.Data.IsFull;
-          this.isYidongConduct = res.Data.IsYidongConduct == 1 ? true : false;
-          this.$nextTick(() => {
-            this.dataList = res.Data.List;
-          });
-        });
-    },
-    // 报名失败的列表
-    salonFailSignupList() {
-      raiInterface
-        .salonFailSignupList({
-          ActivityId: this.dialogVisibleId,
-        })
-        .then((res) => {
-          if (res.Ret !== 200) return;
-          this.excelType = res.Data.ExcelType;
-          this.excelId = res.Data.ActivityId;
-          this.total = res.Data.Total;
-          this.myTotal = res.Data.MyTotal;
-          this.isLimitPeople = res.Data.IsLimitPeople;
-          this.memberType = res.Data.MemberType;
-          this.isFullNum = res.Data.IsFull;
-          this.isYidongConduct = res.Data.IsYidongConduct == 1 ? true : false;
-          this.$nextTick(() => {
-            this.dataList = res.Data.List;
-          });
-        });
-    },
-    // 报名方式的选择
-    redioChange(name, id, row) {
-      raiInterface
-        .callSignupEdit({
-          Id: id,
-          OperationStatus: name,
-        })
-        .then((res) => {
-          if (res.Ret !== 200) return;
-          this.$message.success("操作成功");
-        });
-    },
-    switchChange(item) {
-      raiInterface
-        .salonSignupEdit({
-          Id: item.Id,
-        })
-        .then((res) => {
-          if (res.Ret === 200) {
-            this.$message.success("操作成功");
-            this.$parent.getsDataList();
-          } else {
-            item.SalonOperation = !item.SalonOperation;
-          }
-        });
-    },
-    // 点击了修改预约外呼
-    modification(id, value) {
-      this.editMobileDialogVisible = true;
-      this.editMobileId = id;
-      this.outboundMobile = value;
-    },
-    //取消报名
-    cancelApply(item, num) {
-      if (num == 1) {
-        const str = item.ActivityTime.replace(/-/g, "/");
-        const date = new Date(str);
-        const times = date.getTime();
-        const num = new Date().getTime();
-        if (times - num <= 3600000) return this.$message.error("外呼名单已发送专家组，请联系专家组取消");
-      }
-      let str = num == 1 ? "外呼" : "报名";
-      this.$confirm(`确定要取消该用户的${str}吗？`, `取消${str}`, {
-        confirmButtonText: "是",
-        cancelButtonText: "否",
-        type: "warning",
-      })
-        .then(async () => {
-          const res = await raiInterface.activitySignupApply({
-            SignupId: item.Id,
-            CancelClass: num,
-          });
-          console.log(res);
-          if (res.Ret !== 200) return;
-          this.$message({
-            type: "success",
-            message: `取消${str}成功!`,
-          });
-          this.getsDataList();
-          this.$parent.getsDataList();
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消操作",
-          });
-        });
-    },
-    //文字显示
-    yidongStatus(row) {
-      let str = row.YidongExamineStatus == 0 ? "待审核" : row.YidongExamineStatus == 1 ? "审核通过" : "未通过";
-      return str;
-    },
-    yidongStyle(row) {
-      const style = row.YidongExamineStatus == 0 ? "color: #3385FF" : row.YidongExamineStatus == 1 ? "color: #07C635" : "color: #D7584F";
-      return style;
-    },
-    // 专家/分析师电话会 下载名单 弹框
-    appointmentCallDownloadHandler() {
-      this.downloadTypeName = 0;
-      this.isNameListDownloadShow = true;
-    },
-    // 专家/分析师电话会 下载名单 确定事件
-    handleConfirmDownload() {
-      let url = import.meta.env.VITE_APP_API_ROOT + "/cygx/activitySignup/signupFailExport?ActivityId=" + this.excelId + "&ExcelType=" + this.downloadTypeName + "&" + localStorage.getItem("auth") || "";
-      let a = document.createElement("a"); // 创建a标签
-      a.href = url; // 设置下载地址
-      a.download = ""; // 设置下载文件名
-      a.click();
-      this.isNameListDownloadShow = false;
-      this.downloadTypeName = 0;
-    },
-  },
-};
-</script>
 <style lang="scss">
 .container-particulars {
   .table-box {

src/views/rai_manage/components/apply/searchCustomerDlg.vue

@@ -1,31 +1,136 @@
+<script setup>
+import { ref, watch, onMounted, computed, reactive, toRefs } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import { raiInterface } from "@/api/api.js";
+
+import { SearchResultTable, DetailedTable } from "./applyTableColums";
+
+const props = defineProps({
+  searchCustomer: {
+    default: false,
+  },
+});
+
+const pageState = reactive({
+  clientName: "", //无相关流失客户
+  clientList: "", //
+  //结果
+  resultCustomer: false,
+  resultDateList: [],
+  resultDate: {},
+  //明细
+  detailedVisibleDlg: false,
+  detailedDateList: [],
+  detailedDate: {},
+});
+
+const searchResultTable = computed(() => {
+  return SearchResultTable;
+});
+const detailedTable = computed(() => {
+  return DetailedTable;
+});
+
+//搜索的确定
+async function searchConfirmHandle() {
+  if (!pageState.clientName) return ElMessage.error("请输入客户名称");
+  if (!pageState.clientList.length) return ElMessage.error("无相关流失客户");
+  const res = await raiInterface.getActivityLossUser({ CompanyName: pageState.clientName });
+  if (res.Ret === 200) {
+    pageState.resultDate = res.Data;
+    pageState.resultDateList = res.Data.List || [];
+    pageState.resultCustomer = true;
+  }
+}
+//搜索的联想
+async function querySearch(queryString, cb) {
+  cb([]);
+  if (queryString) {
+    const res = await raiInterface.getActivityLossCompany({ KeyWord: queryString });
+    if (res.Ret === 200) {
+      pageState.clientList = res.Data.List || [];
+      if (res.Data && res.Data.List.length > 0) {
+        let arr = res.Data.List.map((item) => {
+          return { value: item.CompanyName, ...item };
+        });
+        cb(arr);
+      } else {
+        cb([{}]);
+      }
+    }
+  }
+}
+
+function handleRowContent(row, key) {
+  return row[key];
+}
+async function handleRowClick(row, key) {
+  if (key == "TotalMeeting") {
+    const res = await raiInterface.getActivityLossMeet({
+      Mobile: row.Mobile,
+    });
+    if (res.Ret === 200) {
+      pageState.detailedDate = res.Data;
+      pageState.detailedDateList = res.Data.List || [];
+      pageState.detailedVisibleDlg = true;
+    }
+  }
+}
+
+const $emit =defineEmits()
+
+//搜索的取消
+function searchCancelHandle() {
+  $emit("update:searchCustomer", false);
+  pageState.clientName = "";
+}
+//搜索结果的取消
+function resultCancelHandle() {
+  pageState.resultCustomer = false;
+  pageState.resultDateList = [];
+}
+//参会明细的取消
+function detaileCancelHandle() {
+  //明细
+  pageState.detailedVisibleDlg = false;
+  pageState.detailedDateList = [];
+}
+
+
+cosnt {
+  clientName,
+  clientList,
+  resultCustomer,
+  resultDateList,
+  resultDate,
+  detailedVisibleDlg,
+  detailedDateList,
+  detailedDate,
+} =toRefs(pageState)
+</script>
+
 <template>
   <div class="container search-customer-dlg">
-    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center title="搜索流失客户" :visible.sync="searchCustomer" :before-close="searchCancelHandle" width="529px">
+    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center title="搜索流失客户" v-model="props.searchCustomer" :before-close="searchCancelHandle" width="529px">
       <div>
         <p style="margin: 10px 0 10px">搜索有线上参会记录的流失客户</p>
-        <el-autocomplete
-          class="inline-input"
-          style="width: 100%"
-          v-model="clientName"
-          clearable
-          :fetch-suggestions="querySearch"
-          placeholder="请输入客户名称"
-          :trigger-on-focus="false"
-        >
-        <template slot-scope="scope">
-           <div v-if="scope.item.CompanyName">
-            {{ scope.item.CompanyName }}
-          </div>
-          <div v-else style="text-align: center">暂无数据</div>
-        </template>
+        <el-autocomplete class="inline-input" style="width: 100%" v-model="clientName" clearable :fetch-suggestions="querySearch" placeholder="请输入客户名称" :trigger-on-focus="false">
+          <template #default="scope">
+            <div v-if="scope.item.CompanyName">
+              {{ scope.item.CompanyName }}
+            </div>
+            <div v-else style="text-align: center">暂无数据</div>
+          </template>
         </el-autocomplete>
       </div>
-      <div slot="footer" class="dialog-footer">
-        <el-button style="width: 224px; margin-right: 20px" type="primary" @click="searchConfirmHandle">确 定</el-button>
-        <el-button style="width: 224px" @click="searchCancelHandle">取 消</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button style="width: 224px; margin-right: 20px" type="primary" @click="searchConfirmHandle">确 定</el-button>
+          <el-button style="width: 224px" @click="searchCancelHandle">取 消</el-button>
+        </div>
+      </template>
     </el-dialog>
-    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center title="搜索结果" :visible.sync="resultCustomer" :before-close="resultCancelHandle" width="529px">
+    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center title="搜索结果" v-model="resultCustomer" :before-close="resultCancelHandle" width="529px">
       <div class="result-table">
         <div class="result-text">
           <p>客户名称：{{ resultDate.CompanyName }}</p>
@@ -33,7 +138,7 @@
         </div>
         <el-table :data="resultDateList" content border height="300">
           <el-table-column v-for="item in searchResultTable" :key="item.key" :label="item.label" :width="item.widthsty" align="center">
-            <template slot-scope="{ row }">
+            <template #default="{ row }">
               <span @click="handleRowClick(row, item.key)" :class="item.key == 'TotalMeeting' ? 'editsty' : ''">
                 {{ handleRowContent(row, item.key) }}
               </span>
@@ -42,7 +147,7 @@
         </el-table>
       </div>
     </el-dialog>
-    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center title="参会明细" :visible.sync="detailedVisibleDlg" :before-close="detaileCancelHandle" width="1242px">
+    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center title="参会明细" v-model="detailedVisibleDlg" :before-close="detaileCancelHandle" width="1242px">
       <div style="margin-bottom: 30px">
         <div style="margin-bottom: 20px">
           <span style="margin-right: 30px">姓名：{{ detailedDate.RealName }}</span>
@@ -50,7 +155,7 @@
         </div>
         <el-table :data="detailedDateList" content border height="350">
           <el-table-column v-for="item in detailedTable" :key="item.key" :label="item.label" :width="item.widthsty" :min-width="item.minwidthsty" align="center">
-            <template slot-scope="{ row }">
+            <template #default="{ row }">
               <span> {{ row[item.key] }}</span>
             </template>
           </el-table-column>
@@ -60,109 +165,6 @@
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-
-import { SearchResultTable, DetailedTable } from "./applyTableColums";
-export default {
-  name: "",
-  components: {},
-  props: {
-    searchCustomer: {
-      default: false,
-    },
-  },
-  data() {
-    return {
-      clientName: "", //无相关流失客户
-      clientList: "", //
-      //结果
-      resultCustomer: false,
-      resultDateList: [],
-      resultDate: {},
-      //明细
-      detailedVisibleDlg: false,
-      detailedDateList: [],
-      detailedDate: {},
-    };
-  },
-  computed: {
-    searchResultTable() {
-      return SearchResultTable;
-    },
-    detailedTable() {
-      return DetailedTable;
-    },
-  },
-  watch: {},
-  created() {},
-  mounted() {},
-  methods: {
-    //搜索的确定
-    async searchConfirmHandle() {
-      if (!this.clientName) return this.$message.error("请输入客户名称");
-      if (!this.clientList.length) return this.$message.error("无相关流失客户");
-      const res = await raiInterface.getActivityLossUser({ CompanyName: this.clientName });
-      if (res.Ret === 200) {
-        this.resultDate = res.Data;
-        this.resultDateList = res.Data.List || [];
-        this.resultCustomer = true;
-      }
-    },
-    //搜索的联想
-    async querySearch(queryString, cb) {
-      cb([]);
-      if (queryString) {
-        const res = await raiInterface.getActivityLossCompany({ KeyWord: queryString });
-        if (res.Ret === 200) {
-          this.clientList = res.Data.List || [];
-          if (res.Data && res.Data.List.length > 0) {
-            let arr = res.Data.List.map((item) => {
-              return { value: item.CompanyName, ...item };
-            });
-            cb(arr);
-          } else {
-            cb([{}]);
-          }
-        }
-      }
-    },
-
-    handleRowContent(row, key) {
-      return row[key];
-    },
-    async handleRowClick(row, key) {
-      if (key == "TotalMeeting") {
-        const res = await raiInterface.getActivityLossMeet({
-          Mobile: row.Mobile,
-        });
-        if (res.Ret === 200) {
-          this.detailedDate = res.Data;
-          this.detailedDateList = res.Data.List || [];
-           this.detailedVisibleDlg = true;
-        }
-      }
-    },
-
-    //搜索的取消
-    searchCancelHandle() {
-      this.$emit("update:searchCustomer", false);
-      this.clientName = "";
-    },
-    //搜索结果的取消
-    resultCancelHandle() {
-      this.resultCustomer = false;
-      this.resultDateList = [];
-    },
-    //参会明细的取消
-    detaileCancelHandle() {
-      //明细
-      this.detailedVisibleDlg = false;
-      this.detailedDateList = [];
-    },
-  },
-};
-</script>
 <style scoed lang="scss">
 .search-customer-dlg {
   .el-dialog .el-input {

src/views/rai_manage/components/apply/summaryRemind.vue

@@ -1,12 +1,102 @@
+<script setup>
+import { ref, watch, onMounted, nextTick } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import { raiInterface } from "@/api/api.js";
+
+const props = defineProps({
+  summaryRemindDlg: {
+    type: Boolean,
+    default: false,
+  },
+  subscribe: {
+    type: String,
+    default: "",
+  },
+  dialogVisibleId: {
+    type: Number,
+  },
+});
+
+const fromData = ref({}); //数据
+const dataList = ref([]); //表格
+
+watch(
+  () => props.summaryRemindDlg,
+  (newval) => {
+    if (newval) {
+      getsDataList();
+    }
+  }
+);
+
+//获取表格数据
+async function getsDataList() {
+  const res =
+    props.subscribe === "纪要预约人数"
+      ? await raiInterface.activitySignupSummaryList({
+          ActivityId: props.dialogVisibleId,
+        })
+      : await raiInterface.activitySignupReminder({
+          ActivityId: props.dialogVisibleId,
+        });
+  if (res.Ret === 200) {
+    fromData.value = res.Data;
+    nextTick(() => {
+      dataList.value = res.Data.List;
+    });
+  }
+}
+
+const $emit = defineEmits(["getsDataList"]);
+//弹框的关闭事件
+function confirmPerson() {
+  $emit("update:summaryRemindDlg", false);
+}
+//取消提醒、取消外呼
+function cancelTableHandler(item) {
+  let str = props.subscribe === "纪要预约人数" ? "纪要预约" : "会议提醒";
+  ElMessageBox.confirm(`确定要取消该用户的${str}吗？`, `取消${str}`, {
+    confirmButtonText: "是",
+    cancelButtonText: "否",
+    type: "warning",
+  })
+    .then(async () => {
+      const res =
+        props.subscribe === "纪要预约人数"
+          ? await raiInterface.activityAppointmentCancel({
+              SignupId: item.Id,
+            })
+          : await raiInterface.activityReminderCancel({
+              SignupId: item.Id,
+            });
+      if (!res.Ret === 200) return;
+      ElMessage({
+        type: "success",
+        message: `取消${str}成功!`,
+      });
+      getsDataList();
+      $emit("getsDataList");
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: "已取消操作",
+      });
+    });
+}
+</script>
+
 <template>
   <div class="container-summaryRemind">
-    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center :visible.sync="summaryRemindDlg" width="1000px" :before-close="confirmPerson" :append-to-body="true">
-      <div slot="title" style="display: flex; align-items: center">
-        <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
-        <span style="font-size: 16px">{{ subscribe }}</span>
-      </div>
+    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center v-model="props.summaryRemindDlg" width="1000px" :before-close="confirmPerson" :append-to-body="true">
+      <template #header>
+        <div style="display: flex; align-items: center">
+          <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
+          <span style="font-size: 16px">{{ props.subscribe }}</span>
+        </div>
+      </template>
       <div>
-        <template v-if="subscribe === '纪要预约人数'">
+        <template v-if="props.subscribe === '纪要预约人数'">
           <span v-if="fromData.ExcelType !== 'ExpertSalon' && fromData.ExcelType !== 'OfflineResearch'">共有{{ fromData.Total }}人预约纪要，其中本人名下{{ fromData.MyTotal }}人</span>
         </template>
         <template v-else>共有{{ fromData.Total }}人设置会议提醒，其中本人名下{{ fromData.MyTotal }}人</template>
@@ -23,11 +113,11 @@
             ></el-table-column>
             <el-table-column min-width="135" align="center" prop="CompanyName" key="company" label="公司名称"></el-table-column>
             <el-table-column min-width="110" align="center" prop="SellerName" key="seller" label="所属销售"></el-table-column>
-            <el-table-column v-if="subscribe === '纪要预约人数'" align="center" prop="CreateTime" key="create" label="预约时间"></el-table-column>
+            <el-table-column v-if="props.subscribe === '纪要预约人数'" align="center" prop="CreateTime" key="create" label="预约时间"></el-table-column>
             <el-table-column v-else align="center" prop="CreateTime" key="createTime" min-width="160" label="报名时间"></el-table-column>
             <el-table-column align="center" label="操作">
-              <template slot-scope="{ row }">
-                <span class="editsty" @click="cancelTableHandler(row)"> {{ subscribe === "纪要预约人数" ? "取消预约" : "取消提醒" }}</span>
+              <template #default="{ row }">
+                <span class="editsty" @click="cancelTableHandler(row)"> {{ props.subscribe === "纪要预约人数" ? "取消预约" : "取消提醒" }}</span>
               </template>
             </el-table-column>
           </el-table>
@@ -37,86 +127,4 @@
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-export default {
-  name: "",
-  components: {},
-  props: {
-    summaryRemindDlg: {
-      type: Boolean,
-      default: false,
-    },
-    subscribe: {
-      type: String,
-      default: "",
-    },
-    dialogVisibleId: {
-      type: Number,
-    },
-  },
-  data() {
-    return {
-      fromData: {}, //数据
-      dataList: [], //表格
-    };
-  },
-  computed: {},
-  watch: {
-    summaryRemindDlg: {
-      handler(newval) {
-        if (newval) {
-          this.getsDataList();
-        }
-      },
-    },
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    //获取表格数据
-    async getsDataList() {
-      const res =
-        this.subscribe === "纪要预约人数"
-          ? await raiInterface.activitySignupSummaryList({ ActivityId: this.dialogVisibleId })
-          : await raiInterface.activitySignupReminder({ ActivityId: this.dialogVisibleId });
-      if (res.Ret === 200) {
-        this.fromData = res.Data;
-        this.$nextTick(() => {
-          this.dataList = res.Data.List;
-        });
-      }
-    },
-    //弹框的关闭事件
-    confirmPerson() {
-      this.$parent.summaryRemindDlg = false;
-    },
-    //取消提醒、取消外呼
-    cancelTableHandler(item) {
-      let str = this.subscribe === "纪要预约人数" ? "纪要预约" : "会议提醒";
-      this.$confirm(`确定要取消该用户的${str}吗？`, `取消${str}`, {
-        confirmButtonText: "是",
-        cancelButtonText: "否",
-        type: "warning",
-      })
-        .then(async () => {
-          const res = this.subscribe === "纪要预约人数" ? await raiInterface.activityAppointmentCancel({ SignupId: item.Id }) : await raiInterface.activityReminderCancel({ SignupId: item.Id });
-          if (!res.Ret === 200) return;
-          this.$message({
-            type: "success",
-            message: `取消${str}成功!`,
-          });
-          this.getsDataList();
-          this.$parent.getsDataList();
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消操作",
-          });
-        });
-    },
-  },
-};
-</script>
 <style lang="scss"></style>

src/views/rai_manage/components/apply/templateMessage.vue

@@ -1,6 +1,121 @@
+<script setup>
+import { ref, watch, onMounted, nextTick } from "vue";
+import { raiInterface } from "@/api/api.js";
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+  selectionArr: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+  messageDialog: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  typeMessage: {
+    type: String,
+    default: "",
+  },
+});
+
+const previewList = ref(["https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/template.png"]);
+const messageForm = ref({
+  sendId: [7],
+  beforeText: "",
+  activityName: "",
+  content: "",
+});
+const rules = ref({
+  sendId: [{ required: true, message: "请选择发送对象", trigger: "change" }],
+  activityName: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
+  content: [{ required: true, message: "请输入变更内容", trigger: "blur" }],
+});
+const defaultSalesProps = ref({
+  multiple: true,
+  label: "Name",
+  value: "Id",
+});
+const sendOptions = ref([]);
+
+async function activitySendGroupList() {
+  const res = props.typeMessage == "确定行程" ? await raiInterface.activityTripSendGroupList() : await raiInterface.activitySendGroupList();
+  if (res.Ret === 200) {
+    sendOptions.value = res.Data;
+    messageForm.value.sendId = props.typeMessage == "确定行程" ? [1] : [7];
+  }
+}
+
+// 点击了注释
+function annotationHandler() {
+  $("#TripImgLink").click();
+}
+
+function handleClickStop() {
+  nextTick(() => {
+    let domImageView = document.querySelector(".el-image-viewer__mask"); // 获取遮罩层dom
+    if (!domImageView) {
+      return;
+    }
+    domImageView.addEventListener("click", () => {
+      // 点击遮罩层时调用关闭按钮的 click 事件
+      document.querySelector(".el-image-viewer__close").click();
+    });
+  });
+}
+
+const messageFormRef = ref(null);
+
+const $emit = defineEmits();
+// 弹框关闭
+function handleClose() {
+  messageFormRef.value.resetFields();
+  previewList.value = [];
+  messageForm.value = {
+    sendId: [7],
+    beforeText: "",
+    activityName: "",
+    content: "",
+  };
+  $emit("update:messageDialog", false);
+}
+
+// 弹框确定饰件
+function confirmPerson() {
+  messageFormRef.value.validate(async (valid) => {
+    if (valid) {
+      let params = {
+        ActivityIds: props.selectionArr[0].ActivityId + "",
+        ResearchTheme: props.selectionArr[0].ResearchTheme || "",
+        SendGroup: messageForm.value.sendId.join(","),
+        ActivityName: messageForm.value.activityName,
+        Content: messageForm.value.content,
+      };
+      const res = props.typeMessage == "确定行程" ? await raiInterface.activityTripSignupTempMsg(params) : await raiInterface.activitySignupTempMsg(params);
+      if (res.Ret === 200) {
+        ElMessage.success("发送成功");
+        handleClose();
+      }
+    } else {
+      console.log("error submit!!");
+      return false;
+    }
+  });
+}
+
+watch(
+  () => props.messageDialog,
+  (newValue) => {
+    if (newValue) messageForm.value.activityName = props.selectionArr[0].ActivityName || props.selectionArr[0].ResearchTheme;
+    activitySendGroupList();
+  }
+);
+</script>
+
 <template>
   <div class="container container-message-dlg">
-    <el-dialog width="560px" v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center :visible.sync="messageDialog" title="发送模板消息" :before-close="handleClose">
+    <el-dialog width="560px" draggable :close-on-click-modal="false" :modal-append-to-body="false" center v-model="props.messageDialog" title="发送模板消息" :before-close="handleClose">
       <div class="content">
         <div class="annotation">
           <div class="annotation-box" @click="annotationHandler">
@@ -10,12 +125,12 @@
         </div>
         <el-form :model="messageForm" :rules="rules" ref="messageFormRef" class="demo-ruleForm">
           <el-form-item prop="sendId">
-            <el-select style="width: 100%" v-model="messageForm.sendId" multiple placeholder="请选择发送对象（可多选）" :disabled="typeMessage == '确定行程'">
+            <el-select style="width: 100%" v-model="messageForm.sendId" multiple placeholder="请选择发送对象（可多选）" :disabled="props.typeMessage == '确定行程'">
               <el-option v-for="item in sendOptions" :key="item.Id" :label="item.Name" :value="item.Id"> </el-option>
             </el-select>
           </el-form-item>
           <el-form-item prop="activityName">
-            <el-input type="textarea" :rows="2" :placeholder="`请输入${this.typeMessage == '确定行程' ? '调研主题' : '活动名称'}（20字内）`" v-model="messageForm.activityName"> </el-input>
+            <el-input type="textarea" :rows="2" :placeholder="`请输入${props.typeMessage == '确定行程' ? '调研主题' : '活动名称'}（20字内）`" v-model="messageForm.activityName"> </el-input>
           </el-form-item>
           <el-form-item prop="content">
             <el-input type="content" :rows="2" placeholder="请输入变更内容（20字内）" v-model="messageForm.content"> </el-input>
@@ -28,131 +143,16 @@
         id="TripImgLink"
         :preview-src-list="['https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/templet_new.png']"
       ></el-image>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="confirmPerson">确定</el-button>
-        <el-button @click="handleClose">取消</el-button>
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="confirmPerson">确定</el-button>
+          <el-button @click="handleClose">取消</el-button>
+        </span>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-export default {
-  name: "",
-  components: {},
-  props: {
-    selectionArr: {
-      type: Array,
-      required: true,
-      default: () => [],
-    },
-    messageDialog: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    typeMessage: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      previewList: ["https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/template.png"],
-      messageForm: {
-        sendId: [7],
-        beforeText: "",
-        activityName: "",
-        content: "",
-      },
-      rules: {
-        sendId: [{ required: true, message: "请选择发送对象", trigger: "change" }],
-        activityName: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
-        content: [{ required: true, message: "请输入变更内容", trigger: "blur" }],
-      },
-      defaultSalesProps: {
-        multiple: true,
-        label: "Name",
-        value: "Id",
-      },
-      sendOptions: [],
-    };
-  },
-  computed: {},
-  watch: {
-    messageDialog: {
-      handler(newValue) {
-        console.log(this.selectionArr);
-        if (newValue) this.messageForm.activityName = this.selectionArr[0].ActivityName || this.selectionArr[0].ResearchTheme;
-        this.activitySendGroupList();
-      },
-    },
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    async activitySendGroupList() {
-      const res = this.typeMessage == "确定行程" ? await raiInterface.activityTripSendGroupList() : await raiInterface.activitySendGroupList();
-      if (res.Ret === 200) {
-        this.sendOptions = res.Data;
-        this.messageForm.sendId = this.typeMessage == "确定行程" ? [1] : [7];
-      }
-    },
-    // 点击了注释
-    annotationHandler() {
-      $("#TripImgLink").click();
-    },
-    handleClickStop() {
-      this.$nextTick(() => {
-        let domImageView = document.querySelector(".el-image-viewer__mask"); // 获取遮罩层dom
-        if (!domImageView) {
-          return;
-        }
-        console.log(domImageView);
-        domImageView.addEventListener("click", () => {
-          // 点击遮罩层时调用关闭按钮的 click 事件
-          document.querySelector(".el-image-viewer__close").click();
-        });
-      });
-    }, // 弹框关闭
-    handleClose() {
-      this.$refs.messageFormRef.resetFields();
-      this.previewList = [];
-      this.messageForm = {
-        sendId: [7],
-        beforeText: "",
-        activityName: "",
-        content: "",
-      };
-      this.$emit("update:messageDialog", false);
-    },
-    // 弹框确定饰件
-    confirmPerson() {
-      this.$refs["messageFormRef"].validate(async (valid) => {
-        if (valid) {
-          let params = {
-            ActivityIds: this.selectionArr[0].ActivityId + "",
-            ResearchTheme: this.selectionArr[0].ResearchTheme || "",
-            SendGroup: this.messageForm.sendId.join(","),
-            // FirstText: this.messageForm.beforeText,
-            ActivityName: this.messageForm.activityName,
-            Content: this.messageForm.content,
-          };
-          const res = this.typeMessage == "确定行程" ? await raiInterface.activityTripSignupTempMsg(params) : await raiInterface.activitySignupTempMsg(params);
-          if (res.Ret === 200) {
-            this.$message.success("发送成功");
-            this.handleClose();
-          }
-        } else {
-          console.log("error submit!!");
-          return false;
-        }
-      });
-    },
-  },
-};
-</script>
 <style lang="scss">
 .container-message-dlg {
   .content {

src/views/rai_manage/components/atcParticulars.vue

@@ -1,95 +1,149 @@
+<script setup>
+import { ref, watch, onMounted, computed } from "vue";
+import { raiInterface } from "@/api/api.js";
+import { ElMessageBox, ElMessage } from "element-plus";
+
+const props = defineProps({
+  detailData: {
+    type: Object,
+  },
+  dialogVisible: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const cities = ref([]); //
+const checkedCities = ref([]);
+const checkScaleList = ref([]);
+
+watch(
+  () => props.detailData,
+  (newValue) => {
+    if (Object.values(newValue).length > 0) {
+      checkedCities.value = newValue.CustomerTypeIds ? newValue.CustomerTypeIds.split(",").map((item) => Number(item)) : [];
+      checkScaleList.value = newValue.Scale ? newValue.Scale.split(",") : [];
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
+onMounted(() => {
+  customerTypelist();
+});
+
+const $emit = defineEmits();
+
+function clickBtn() {
+  $emit("update:detailData", {});
+  $emit("update:dialogVisible", false);
+}
+//获取多选的客户列表
+function customerTypelist() {
+  raiInterface.customerTypelist().then((res) => {
+    if (res.Ret === 200) {
+      cities.value = res.Data.List;
+    }
+  });
+}
+</script>
+
 <template>
   <div class="container">
-    <el-dialog :modal-append-to-body="false" v-dialogDrag center top="5vh" :visible.sync="dialogVisible" customClass="customParticulars" :before-close="clickBtn">
-      <div slot="title" style="display: flex; align-items: center">
-        <img :src="$icons.particulars" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
-        <span style="font-size: 16px">活动详情</span>
-      </div>
+    <el-dialog :modal-append-to-body="false" draggable center top="5vh" v-model="props.dialogVisible" customClass="customParticulars" :before-close="clickBtn">
+      <template #header>
+        <div style="display: flex; align-items: center">
+          <img :src="$icons.particulars" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
+          <span style="font-size: 16px">活动详情</span>
+        </div>
+      </template>
       <div class="dialog-box">
-        <div v-if="detailData.ActivityName" class="dialog-title">{{ detailData.ActivityName }}</div>
-        <div class="test" v-if="detailData.ActivityTypeName">
+        <div v-if="props.detailData.ActivityName" class="dialog-title">{{ props.detailData.ActivityName }}</div>
+        <div class="test" v-if="props.detailData.ActivityTypeName">
           <p>活动类型：</p>
-          <div class="paragraph" v-html="detailData.ActivityTypeName"></div>
+          <div class="paragraph" v-html="props.detailData.ActivityTypeName"></div>
         </div>
-        <div class="test" v-if="detailData.ChartPermissionName">
+        <div class="test" v-if="props.detailData.ChartPermissionName">
           <p>所属行业：</p>
-          <div class="paragraph" v-html="detailData.ChartPermissionName"></div>
+          <div class="paragraph" v-html="props.detailData.ChartPermissionName"></div>
         </div>
-        <div class="test" v-if="detailData.ActivityTimeText">
+        <div class="test" v-if="props.detailData.ActivityTimeText">
           <p>活动时间：</p>
-          <div class="paragraph" v-html="detailData.ActivityTimeText"></div>
+          <div class="paragraph" v-html="props.detailData.ActivityTimeText"></div>
         </div>
-        <div class="test" v-if="detailData.DistinguishedGuest">
+        <div class="test" v-if="props.detailData.DistinguishedGuest">
           <p>嘉&nbsp;&nbsp; &nbsp; &nbsp;宾：</p>
-          <div class="paragraph" v-html="detailData.DistinguishedGuest"></div>
+          <div class="paragraph" v-html="props.detailData.DistinguishedGuest"></div>
         </div>
-        <div class="test" v-if="detailData.Host">
+        <div class="test" v-if="props.detailData.Host">
           <p>主&nbsp; 持&nbsp; 人：</p>
-          <div class="paragraph" v-html="detailData.Host"></div>
+          <div class="paragraph" v-html="props.detailData.Host"></div>
         </div>
-        <div class="test" v-if="detailData.Speaker">
+        <div class="test" v-if="props.detailData.Speaker">
           <p>主&nbsp; 讲&nbsp; 人：</p>
-          <div class="paragraph" v-html="detailData.Speaker"></div>
+          <div class="paragraph" v-html="props.detailData.Speaker"></div>
         </div>
-        <div class="test" v-if="detailData.Expert">
+        <div class="test" v-if="props.detailData.Expert">
           <p>专&nbsp;&nbsp; &nbsp; &nbsp;家：</p>
-          <div class="paragraph" v-html="detailData.Expert"></div>
+          <div class="paragraph" v-html="props.detailData.Expert"></div>
         </div>
-        <div class="test" v-if="detailData.City">
+        <div class="test" v-if="props.detailData.City">
           <p>城&nbsp;&nbsp; &nbsp; &nbsp;市：</p>
-          <div class="paragraph" v-html="detailData.City"></div>
+          <div class="paragraph" v-html="props.detailData.City"></div>
         </div>
-        <div class="test" v-if="detailData.MainlandTell">
+        <div class="test" v-if="props.detailData.MainlandTell">
           <p>大陆拨入：</p>
-          <div class="paragraph" v-html="detailData.MainlandTell"></div>
+          <div class="paragraph" v-html="props.detailData.MainlandTell"></div>
         </div>
-        <div class="test" v-if="detailData.HongKongTell">
+        <div class="test" v-if="props.detailData.HongKongTell">
           <p>香港拨入：</p>
-          <div class="paragraph" v-html="detailData.HongKongTell"></div>
+          <div class="paragraph" v-html="props.detailData.HongKongTell"></div>
         </div>
-        <div class="test" v-if="detailData.TaiwanTell">
+        <div class="test" v-if="props.detailData.TaiwanTell">
           <p>台湾拨入：</p>
-          <div class="paragraph" v-html="detailData.TaiwanTell"></div>
+          <div class="paragraph" v-html="props.detailData.TaiwanTell"></div>
         </div>
-        <div class="test" v-if="detailData.AmericaTell">
+        <div class="test" v-if="props.detailData.AmericaTell">
           <p>美国拨入：</p>
-          <div class="paragraph" v-html="detailData.AmericaTell"></div>
+          <div class="paragraph" v-html="props.detailData.AmericaTell"></div>
         </div>
-        <div class="test" v-if="detailData.ParticipationCode">
+        <div class="test" v-if="props.detailData.ParticipationCode">
           <p>参会密码：</p>
-          <div class="paragraph" v-html="detailData.ParticipationCode"></div>
+          <div class="paragraph" v-html="props.detailData.ParticipationCode"></div>
         </div>
-        <div class="test" v-if="detailData.OnlineParticipation">
+        <div class="test" v-if="props.detailData.OnlineParticipation">
           <p>网络参会：</p>
-          <div class="paragraph" v-html="detailData.OnlineParticipation"></div>
+          <div class="paragraph" v-html="props.detailData.OnlineParticipation"></div>
         </div>
-        <div class="test" v-if="detailData.Address">
+        <div class="test" v-if="props.detailData.Address">
           <p>活动地址：</p>
-          <div class="paragraph" v-html="detailData.Address"></div>
+          <div class="paragraph" v-html="props.detailData.Address"></div>
         </div>
-        <div class="test" v-if="detailData.Highlights">
+        <div class="test" v-if="props.detailData.Highlights">
           <p>活动亮点：</p>
-          <div class="paragraph" v-html="detailData.Highlights"></div>
+          <div class="paragraph" v-html="props.detailData.Highlights"></div>
         </div>
-        <div class="test" v-if="detailData.ReportLink">
+        <div class="test" v-if="props.detailData.ReportLink">
           <p>报告链接：</p>
-          <div class="paragraph" v-html="detailData.ReportLink"></div>
+          <div class="paragraph" v-html="props.detailData.ReportLink"></div>
         </div>
-        <div class="test" v-if="detailData.Theme">
+        <div class="test" v-if="props.detailData.Theme">
           <p>主&nbsp;&nbsp; &nbsp; &nbsp;题：</p>
-          <div class="paragraph" v-html="detailData.Theme"></div>
+          <div class="paragraph" v-html="props.detailData.Theme"></div>
         </div>
-        <div class="test" v-if="detailData.TencentConferenceNumber">
+        <div class="test" v-if="props.detailData.TencentConferenceNumber">
           <p>腾讯会议号：</p>
-          <div class="paragraph" v-html="detailData.TencentConferenceNumber"></div>
+          <div class="paragraph" v-html="props.detailData.TencentConferenceNumber"></div>
         </div>
-        
-        <div class="test" v-if="detailData.Remarks">
+
+        <div class="test" v-if="props.detailData.Remarks">
           <p>备&nbsp;&nbsp; &nbsp; &nbsp;注：</p>
-          <div class="paragraph" v-html="detailData.Remarks"></div>
+          <div class="paragraph" v-html="props.detailData.Remarks"></div>
         </div>
       </div>
-      <div class="type-scale" v-if="detailData.IsLimitPeople == 1">
+      <div class="type-scale" v-if="props.detailData.IsLimitPeople == 1">
         <div style="flex-shrink: 0; margin-right: 10px">活动可见：</div>
         <div>
           <div class="item" v-if="checkedCities.length">
@@ -118,59 +172,6 @@
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-export default {
-  name: "",
-  components: {},
-  props: {
-    detailData: {
-      type: Object,
-    },
-    dialogVisible: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      cities: [], //
-      checkedCities: [],
-      checkScaleList: [],
-    };
-  },
-  computed: {},
-  watch: {
-    detailData: {
-      handler(newValue) {
-        if (Object.values(newValue).length > 0) {
-          this.checkedCities = newValue.CustomerTypeIds ? newValue.CustomerTypeIds.split(",").map((item) => Number(item)) : [];
-          this.checkScaleList = newValue.Scale ? newValue.Scale.split(",") : [];
-        }
-      },
-      deep: true,
-    },
-  },
-  created() {},
-  mounted() {
-    this.customerTypelist();
-  },
-  methods: {
-    clickBtn() {
-      this.$emit("update:detailData", {});
-      this.$emit("update:dialogVisible", false);
-    },
-    //获取多选的客户列表
-    customerTypelist() {
-      raiInterface.customerTypelist().then((res) => {
-        if (res.Ret === 200) {
-          this.cities = res.Data.List;
-        }
-      });
-    },
-  },
-};
-</script>
 <style lang="scss">
 .customParticulars {
   width: 550px !important;

src/views/rai_manage/components/editMobile.vue

@@ -1,10 +1,93 @@
+<script setup>
+import { ref, watch } from "vue";
+import { raiInterface, raiSpecial } from "@/api/api.js";
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+  editMobileDialogVisible: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
+  editMobileId: {
+    type: Number,
+    required: true,
+  },
+  outboundMobile: {
+    type: String,
+    required: true,
+  },
+  isType: {
+    type: String,
+    default: "",
+  },
+});
+
+const selectValue = ref("86");
+const optionsMobile = ref([
+  { value: "+86", key: "86" },
+  { value: "+852", key: "852" },
+  { value: "+886", key: "886" },
+  { value: "+1", key: "1" },
+  { value: "+65", key: "65" },
+]);
+const modelKey = ref("");
+
+watch(
+  () => props.editMobileDialogVisible,
+  (newval) => {
+    if (newval) {
+      activitySignupSignupDetail();
+    }
+  }
+);
+async function activitySignupSignupDetail() {
+  const res = props.isType ? await "" : await raiInterface.activitySignupSignupDetail({ Id: props.editMobileId });
+  if (res.Ret === 200) {
+    selectValue.value = res.Data.CountryCode ? res.Data.CountryCode : "86";
+    modelKey.value = res.Data.OutboundMobile;
+  }
+}
+
+const $emit = defineEmits(['getsDataList']);
+function handleClose() {
+  selectValue.value = "86";
+  modelKey.value = "";
+  $emit("update:editMobileDialogVisible", false);
+  $emit("update:outboundMobile", "");
+}
+async function btnOk() {
+  const res = props.isType
+    ? await raiSpecial.outboundMobileEdit({
+        CountryCode: selectValue.value,
+        OutboundMobile: modelKey.value,
+        Id: props.editMobileId,
+      })
+    : await raiInterface.outboundMobileEdit({
+        CountryCode: selectValue.value,
+        OutboundMobile: modelKey.value,
+        Id: props.editMobileId,
+      });
+
+  if (res.Ret !== 200) return;
+  ElMessage.success("操作成功");
+  selectValue.value = "86";
+  modelKey.value = "";
+  $emit("update:editMobileDialogVisible", false);
+  $emit("update:outboundMobile", "");
+  $emit("getsDataList");
+}
+</script>
+
 <template>
   <div class="container-editMobile">
-    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center :append-to-body="true" width="40%" :visible.sync="editMobileDialogVisible" :before-close="handleClose">
-      <div slot="title" style="display: flex; align-items: center">
-        <img :src="$icons.edit_garden" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
-        <span style="font-size: 16px">修改外呼号码</span>
-      </div>
+    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center :append-to-body="true" width="40%" v-model="props.editMobileDialogVisible" :before-close="handleClose">
+      <template #header>
+        <div style="display: flex; align-items: center">
+          <img :src="$icons.edit_garden" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
+          <span style="font-size: 16px">修改外呼号码</span>
+        </div>
+      </template>
       <div class="content-box" style="margin-top: 20px; margin-bottom: 60px">
         <el-select style="width: 80px" v-model="selectValue" placeholder="请选择">
           <el-option v-for="item in optionsMobile" :key="item.key" :label="item.value" :value="item.key"> </el-option>
@@ -12,99 +95,16 @@
         <el-input style="width: 368px" v-model="modelKey" placeholder="请输入手机号或座机号" />
         <p style="margin-top: 15px">座机号请填写区号，分机号用"-"分隔，例：02150509999-8888</p>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="handleClose">取 消</el-button>
-        <el-button type="primary" @click="btnOk">确 定</el-button>
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="handleClose">取 消</el-button>
+          <el-button type="primary" @click="btnOk">确 定</el-button>
+        </span>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
-import { raiInterface,raiSpecial } from "@/api/api.js";
-export default {
-  name: "",
-  components: {},
-  props: {
-    editMobileDialogVisible: {
-      type: Boolean,
-      default: false,
-      required: true,
-    },
-    editMobileId: {
-      type: Number,
-      required: true,
-    },
-    outboundMobile: {
-      type: String,
-      required: true,
-    },
-    isType: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      selectValue: "86",
-      optionsMobile: [
-        { value: "+86", key: "86" },
-        { value: "+852", key: "852" },
-        { value: "+886", key: "886" },
-        { value: "+1", key: "1" },
-        { value: "+65", key: "65" },
-      ],
-      modelKey: "",
-    };
-  },
-  computed: {},
-  watch: {
-    editMobileDialogVisible(newval) {
-      if (newval) {
-        this.activitySignupSignupDetail();
-      }
-    },
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    async activitySignupSignupDetail() {
-      const res = this.isType ? await "" : await raiInterface.activitySignupSignupDetail({ Id: this.editMobileId });
-      if (res.Ret === 200) {
-        this.selectValue = res.Data.CountryCode ? res.Data.CountryCode : "86";
-        this.modelKey = res.Data.OutboundMobile;
-      }
-    },
-    handleClose() {
-      this.selectValue = "86";
-      this.modelKey = "";
-      this.$parent.outboundMobile = "";
-      this.$emit("update:editMobileDialogVisible", false);
-    },
-    async btnOk() {
-      const res = this.isType
-        ? await raiSpecial.outboundMobileEdit({
-            CountryCode: this.selectValue,
-            OutboundMobile: this.modelKey,
-            Id: this.editMobileId,
-          })
-        : await raiInterface.outboundMobileEdit({
-            CountryCode: this.selectValue,
-            OutboundMobile: this.modelKey,
-            Id: this.editMobileId,
-          });
-
-      if (res.Ret !== 200) return;
-      this.$message.success("操作成功");
-      this.selectValue = "86";
-      this.modelKey = "";
-      this.$emit("update:editMobileDialogVisible", false);
-      this.$parent.outboundMobile = "";
-      this.$parent.getsDataList();
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .container-editMobile {
   .content-box {

src/views/rai_manage/components/focusCollection.vue

@@ -3,7 +3,7 @@ import { ref, watch } from "vue";
 
 import { raiInterface } from "@/api/api.js";
 
-const props =  defineProps({
+const props = defineProps({
   collectionDlgShow: {
     type: Boolean,
     default: false,

src/views/rai_manage/components/interviewDia.vue

@@ -2,7 +2,7 @@
 import { ref } from "vue";
 import { raiInterface } from "@/api/api.js";
 
-import { ElMessage } from 'element-plus'
+import { ElMessage } from "element-plus";
 const props = defineProps({
   isShowDia: Boolean,
   title: String,
@@ -11,7 +11,7 @@ const props = defineProps({
   applyId: Number,
 });
 
-const emit = defineEmits(['cancel','saveOver'])
+const emit = defineEmits(["cancel", "saveOver"]);
 const datetime = ref("");
 
 /* 保存 */

src/views/rai_manage/components/mapDialog.vue

@@ -94,10 +94,10 @@ const cancelHandle = () => {
       <!-- 新增子级 -->
       <template v-if="props.title == 'add'">
         <div class="node_name">父级名称:&nbsp;{{ nodeData.name }}</div>
-        <el-input v-model="add_name" placeholder="请输入子级名称" class="node_ipt" @keyup.enter.native="saveHandle"> </el-input>
+        <el-input v-model="add_name" placeholder="请输入子级名称" class="node_ipt" @keyup.enter="saveHandle"> </el-input>
       </template>
       <!-- 编辑 -->
-      <el-input v-model="nodeData.name" placeholder="请输入名称" class="node_ipt" v-else-if="props.title == 'edit'" @keyup.enter.native="saveHandle"> </el-input>
+      <el-input v-model="nodeData.name" placeholder="请输入名称" class="node_ipt" v-else-if="props.title == 'edit'" @keyup.enter="saveHandle"> </el-input>
       <!-- 删除 -->
       <div class="node_name" v-else-if="props.title == 'del'">确定要删除此节点吗？</div>
     </div>

src/views/rai_manage/components/matchingDlg.vue

@@ -1,93 +1,89 @@
+<script setup>
+import { ref, watch, nextTick } from "vue";
+
+import mDialog from "@/components/mDialog.vue";
+import { raiInterface } from "@/api/api.js";
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+  matchingDlgShow: {
+    type: Boolean,
+    default: false,
+  },
+  matchingId: {
+    type: Number,
+  },
+});
+
+const dataQueryList = ref([]);
+const matchingValue = ref("");
+
+const $emit = defineEmits(["getsDataList"]);
+function closeDlg() {
+  matchingValue.value = "";
+  dataQueryList.value = [];
+  $emit("update:matchingDlgShow", false);
+}
+//作者的搜索
+async function remoteMethod(query) {
+  if (query !== "") {
+    dataQueryList.value = [];
+    const res = await raiInterface.activityMeetMatchingList({ KeyWord: query });
+    if (res.Ret === 200) {
+      let obj = {};
+      res.Data.List &&
+        res.Data.List.forEach((item) => {
+          obj = {
+            ...item,
+            value: item.RoadshowTitle + `【` + item.ActivityTime + "】",
+          };
+          dataQueryList.value.push(obj);
+        });
+    }
+  } else {
+    dataQueryList.value = [];
+  }
+}
+async function confirm() {
+  if (!matchingValue) return ElMessage.error("请输入活动名称关键字");
+  const res = await raiInterface.activityMeetMatchingByHand({
+    ActivityId: props.matchingId,
+    KeyWord: matchingValue.value,
+  });
+  if (res.Ret === 200) {
+    dataQueryList.value = [];
+    matchingValuev.value = "";
+    ElMessage.success("操作成功!");
+    $emit("update:matchingDlgShow", false);
+    $emit("getsDataList");
+  }
+}
+</script>
+
 <template>
   <div class="container-macthing">
-    <mDialog :show.sync="matchingDlgShow" @beforeClose="closeDlg" :width="'40%'">
+    <mDialog v-model="props.matchingDlgShow" @beforeClose="closeDlg" :width="'40%'">
       <div class="content-macthing">
         <el-select style="width: 100%" v-model="matchingValue" filterable clearable :filter-method="remoteMethod" placeholder="请输入活动名称关键字">
-          <el-option v-for="item in dataQueryList" :key="item.RoadshowTitle + item.ActivityTime" :label="item.value" :value="item.RoadshowTitle +'{|}'+ item.ActivityTime"> </el-option>
+          <el-option v-for="item in dataQueryList" :key="item.RoadshowTitle + item.ActivityTime" :label="item.value" :value="item.RoadshowTitle + '{|}' + item.ActivityTime"> </el-option>
         </el-select>
       </div>
-      <div slot="title" style="display: flex; align-items: center">
-        <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
-        <span style="fontsize: 16px">手动匹配</span>
-      </div>
-      <div slot="footer" style="margin-top: 40px">
-        <el-button type="primary" @click="confirm">确定</el-button>
-        <el-button type="primary" @click="closeDlg">取消</el-button>
-      </div>
+      <template #header>
+        <div style="display: flex; align-items: center">
+          <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
+          <span style="fontsize: 16px">手动匹配</span>
+        </div>
+      </template>
+      <template #footer>
+        <div style="margin-top: 40px">
+          <el-button type="primary" @click="confirm">确定</el-button>
+          <el-button type="primary" @click="closeDlg">取消</el-button>
+        </div>
+      </template>
     </mDialog>
   </div>
 </template>
 
-<script>
-import mDialog from "@/components/mDialog.vue";
-import { raiInterface } from "@/api/api.js";
-export default {
-  name: "",
-  components: {
-    mDialog,
-  },
-  props: {
-    matchingDlgShow: {
-      type: Boolean,
-      default: false,
-    },
-    matchingId:{
-        type: Number, 
-    }
-  },
-  data() {
-    return {
-      dataQueryList: [],
-      matchingValue: "",
-    };
-  },
-  computed: {},
-  watch: {},
-  created() {},
-  mounted() {},
-  methods: {
-    closeDlg() {
-      this.matchingValue=''
-      this.dataQueryList = [];
-      this.$parent.matchingDlgShow = false;
-    },
-    //作者的搜索
-    async remoteMethod(query) {
-      if (query !== "") {
-        this.dataQueryList = [];
-        const res = await raiInterface.activityMeetMatchingList({ KeyWord: query });
-        if (res.Ret === 200) {
-          let obj = {};
-          res.Data.List &&
-            res.Data.List.forEach((item) => {
-              obj = {
-                ...item,
-                value: item.RoadshowTitle + `【` + item.ActivityTime + "】",
-              };
-              this.dataQueryList.push(obj);
-            });
-        }
-      } else {
-        this.dataQueryList = [];
-      }
-    },
-    async confirm() {
-      if(!this.matchingValue) return this.$message.error("请输入活动名称关键字")
-      const res = await raiInterface.activityMeetMatchingByHand({
-        ActivityId: this.matchingId,
-        KeyWord: this.matchingValue,
-      });
-      if(res.Ret === 200){
-        this.dataQueryList = [];
-        this.matchingValue=''
-        this.$message.success('操作成功!')
-        this.$emit('update:matchingDlgShow',false)
-        this.$parent.getsDataList()
-      }
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .content-macthing {
   margin: 30px;

src/views/rai_manage/components/particalDialog.vue

@@ -1,80 +1,288 @@
+<script setup>
+import { ref, watch, nextTick } from "vue";
+
+import { ElMessage } from "element-plus";
+
+import { raiInterface, raiSpecial } from "@/api/api.js";
+
+const props = defineProps({
+  dialogVisiblepartica: {
+    type: Boolean,
+    default: false,
+  },
+  particlaDlg: {
+    type: Object,
+  },
+  submitDialog: {
+    type: Boolean,
+    default: false,
+  },
+  offlineId: {
+    type: Number,
+    default: 0,
+  },
+  type: {
+    type: String,
+    default: "",
+  },
+});
+
+const tableData = ref([]);
+const tableDataSub = ref([]);
+const dynamicItem = ref([]);
+const companyList = ref([]);
+const user = ref([]);
+const listSignin = ref([]);
+const isShow = ref("");
+const userId = ref("");
+const isShowparticulars = ref("到会详情");
+const timeout = ref(null);
+const warningIsShow = ref(false);
+
+watch(
+  () => props.particlaDlg.title,
+  (newValue) => {
+    newValue && (isShowparticulars.value = props.particlaDlg.title);
+  }
+);
+
+watch(
+  () => props.dialogVisiblepartica,
+  (newValue) => {
+    if (newval) {
+      if (isShowparticulars.value == "报名详情") {
+        offlineListDetail();
+      } else {
+        arriveOfflineListDetail();
+      }
+    }
+  }
+);
+watch(
+  () => props.submitDialog,
+  (newValue) => {
+    if (newval) {
+      if (newval) {
+        arriveOfflineListDetail();
+      }
+    }
+  }
+);
+
+// //报名人数
+async function offlineListDetail() {
+  const res = await raiInterface.offlineListDetail({
+    ActivityId: props.offlineId,
+  });
+  if (res.Ret == 200) {
+    tableDataSub.value = res.Data.List;
+  }
+}
+
+const $emit = defineEmits(["getsDataList",'particulars']);
+
+//到会详情
+async function arriveOfflineListDetail() {
+  const res = props.particlaDlg.isSpecial
+    ? await raiSpecial.getSpecialtripmeetDetial({
+        ActivityId: props.offlineId,
+      })
+    : await raiInterface.activityMeetoffline({
+        ActivityId: props.offlineId,
+      });
+  if (res.Ret == 200) {
+    tableDataSub.value = res.Data.List;
+    listSignin.value = res.Data.ListSignin || [];
+  }
+}
+function confirmPerson() {
+  tableDataSub.value = [];
+  user.value = [];
+  userId.value = "";
+  dynamicItem.value = [];
+  $emit("update:dialogVisiblepartica", false);
+}
+async function confirmSubmit() {
+  const is = dynamicItem.value.some((item) => item.isShow == true);
+  if (is) return ElMessage.error("姓名有误");
+  if (tableDataSub.value) {
+    tableDataSub.value.forEach((item) => {
+      if (item.Operation) {
+        user.value.push(item.UserId);
+      }
+    });
+  }
+  dynamicItem.value.forEach((item) => user.value.push(item.id));
+  userId.value = user.value.join(",");
+  const res = props.particlaDlg.isSpecial
+    ? await raiSpecial.postSpecialtripMeetingDo({
+        ActivityId: props.offlineId,
+        UserIds: userId.value,
+      })
+    : await raiInterface.activityMeetmeetingDo({
+        ActivityId: props.offlineId,
+        Ids: userId.value,
+      });
+  if (res.Ret === 200) {
+    user.value = [];
+    userId.value = "";
+    dynamicItem.value = [];
+    $emit("update:submitDialog", false);
+    this.$parent.getsDataList();
+    $emit("getsDataList");
+    $nextTick(() => {
+    $emit("particulars",props.offlineId, "到会详情");
+
+    });
+  }
+}
+function addItem() {
+  dynamicItem.value.push({
+    name: "",
+    isShow: false,
+  });
+}
+function deleteItem(item, index) {
+  dynamicItem.value.splice(index, 1);
+}
+/* 获取客户名称 */
+function getCompany(query) {
+  if (query.includes(",")) return;
+  if (query) {
+    raiInterface
+      .activitySignupUserList({
+        KeyWord: query,
+      })
+      .then((res) => {
+        if (res.Ret === 200) {
+          let arr = [];
+          res.Data.List &&
+            res.Data.List.forEach((item) => {
+              let obj = {
+                ...item,
+                value: item.RealName + " , " + item.Mobile + " , " + item.CompanyName,
+              };
+              arr.push(obj);
+            });
+          companyList.value = arr;
+        }
+      });
+  } else {
+    companyList.value = [];
+  }
+}
+function callbackHandle(data, cb) {
+  let results = data
+    ? companyList.value.filter((item) => {
+        return item.value.includes(data);
+      })
+    : companyList.value;
+  clearTimeout(timeout.value);
+  timeout.value = setTimeout(() => {
+    cb(results);
+  }, 300);
+  if (results.length == 0) {
+    warningIsShow.value = true;
+  } else {
+    warningIsShow.value = false;
+  }
+}
+function handleClose() {
+  dynamicItem.value = [];
+  $emit("update:submitDialog", false);
+}
+function focusCompany(name) {
+  if ((name.length && companyList.value.length == 0) || warningIsShow.value) {
+    dynamicItem.value.forEach((item) => {
+      if (item.name == name) {
+        item.isShow = true;
+      }
+    });
+  } else {
+    dynamicItem.value.forEach((item) => {
+      if (item.name == name) {
+        item.isShow = false;
+      }
+    });
+  }
+}
+function selectCompany(val, index) {
+  companyList.value.forEach((item) => {
+    if (item.value == val.name) {
+      dynamicItem.value.splice(index, 1, { id: item.UserId, ...val });
+    }
+  });
+}
+</script>
+
 <template>
   <div class="container-applydialog">
     <!-- 详情的弹框 -->
-    <div v-if="dialogVisiblepartica">
+    <div v-if="props.dialogVisiblepartica">
       <el-dialog
-        v-dialogDrag
+        draggable
         :close-on-click-modal="false"
         :modal-append-to-body="false"
         center
         top="10vh"
-        :visible.sync="dialogVisiblepartica"
+        v-model="props.dialogVisiblepartica"
         customClass="custom-applydialog"
         :before-close="confirmPerson"
       >
-        <div slot="title" style="display: flex; align-items: center">
-          <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
-          <span style="font-size: 16px">{{ particlaDlg.title }}</span>
-        </div>
-        <div v-if="particlaDlg">
+        <template #header>
+          <div style="display: flex; align-items: center">
+            <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
+            <span style="font-size: 16px">{{ props.particlaDlg.title }}</span>
+          </div>
+        </template>
+        <div v-if="props.particlaDlg">
           <el-table :data="tableDataSub" border height="500px" style="width: 100%">
             <el-table-column align="center" prop="RealName" label="姓名"> </el-table-column>
             <el-table-column align="center" prop="CompanyName" label="公司名称"> </el-table-column>
             <el-table-column align="center" v-if="isShowparticulars == '报名详情'" prop="CreateTime" label="报名时间"> </el-table-column>
             <el-table-column align="center" v-if="isShowparticulars == '到会详情'" prop="" label="是否到会">
-              <template slot-scope="scope">
+              <template #default="scope">
                 {{ scope.row.IsMeeting == 1 ? (scope.row.IsAirborne == 1 ? "已到会(空降)" : "已到会") : scope.row.IsMeeting == 2 ? "空降" : "未到会" }}
               </template>
             </el-table-column>
-            <el-table-column v-if="type === '线下到会'" align="center" prop="SigninTime" label="签到时间"> </el-table-column>
+            <el-table-column v-if="props.type === '线下到会'" align="center" prop="SigninTime" label="签到时间"> </el-table-column>
           </el-table>
         </div>
-        <div v-if="particlaDlg.title == '到会详情' && type == '线下到会' && listSignin.length > 0" class="meeting-box">
+        <div v-if="props.particlaDlg.title == '到会详情' && props.type == '线下到会' && listSignin.length > 0" class="meeting-box">
           <div>潜在客户:</div>
           <div>
             <div class="signin-content" v-for="item in listSignin" :key="item.Id">
-              <el-image
-                v-if="item.BusinessCard"
-                style="width: 180px; height: 100px; margin-right: 5px"
-                :src="item.BusinessCard"
-                :preview-src-list="[item.BusinessCard]"
-              >
-              </el-image>
+              <el-image v-if="item.BusinessCard" style="width: 180px; height: 100px; margin-right: 5px" :src="item.BusinessCard" :preview-src-list="[item.BusinessCard]"> </el-image>
               <span v-else>{{ item.RealName }} {{ item.Mobile }}</span>
               <span>{{ item.CreateTime }}</span>
             </div>
           </div>
         </div>
-        <span slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="confirmPerson">知道了</el-button>
-        </span>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button type="primary" @click="confirmPerson">知道了</el-button>
+          </span>
+        </template>
       </el-dialog>
     </div>
     <div>
-      <el-dialog
-        v-dialogDrag
-        :close-on-click-modal="false"
-        :modal-append-to-body="false"
-        center
-        top="10vh"
-        :visible.sync="submitDialog"
-        customClass="custom-applydialog"
-        :before-close="handleClose"
-      >
-        <div slot="title" style="display: flex; align-items: center">
-          <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
-          <span style="font-size: 16px">提交到会情况</span>
-        </div>
+      <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center top="10vh" v-model="props.submitDialog" customClass="custom-applydialog" :before-close="handleClose">
+        <template #header>
+          <div style="display: flex; align-items: center">
+            <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
+            <span style="font-size: 16px">提交到会情况</span>
+          </div>
+        </template>
         <div>
           <el-table height="500px" :data="tableDataSub" border style="width: 100%">
             <el-table-column align="center" prop="RealName" label="姓名"> </el-table-column>
             <el-table-column align="center" prop="CompanyName" label="公司名称"> </el-table-column>
             <el-table-column align="center" prop="" label="操作">
-              <template slot-scope="scope">
+              <template #default="scope">
                 <el-switch v-model="scope.row.Operation" active-text="已到会" inactive-text="未到会"> </el-switch>
               </template>
             </el-table-column>
-            <el-table-column v-if="type === '线下到会'" align="center" prop="SigninTime" label="签到时间"> </el-table-column>
+            <el-table-column v-if="props.type === '线下到会'" align="center" prop="SigninTime" label="签到时间"> </el-table-column>
           </el-table>
           <div class="add-box">
             <img @click="addItem" :src="$icons.addblue" alt="" />
@@ -98,227 +306,17 @@
             <p v-if="item.isShow">系统中无此人，请先将其添加到对应公司的联系人列表下</p>
           </div>
         </div>
-
-        <span slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="confirmSubmit">提交</el-button>
-          <el-button @click="handleClose">取消</el-button>
-        </span>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button type="primary" @click="confirmSubmit">提交</el-button>
+            <el-button @click="handleClose">取消</el-button>
+          </span>
+        </template>
       </el-dialog>
     </div>
   </div>
 </template>
 
-<script>
-import { raiInterface, raiSpecial } from "@/api/api.js";
-export default {
-  name: "",
-  components: {},
-  props: {
-    dialogVisiblepartica: {
-      type: Boolean,
-      default: false,
-    },
-    particlaDlg: {
-      type: Object,
-    },
-    submitDialog: {
-      type: Boolean,
-      default: false,
-    },
-    offlineId: {
-      type: Number,
-      default: 0,
-    },
-    type: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      tableData: [],
-      isShow: "",
-      tableDataSub: [],
-      dynamicItem: [],
-      companyList: [], //客户名称的数组
-      timeout: null, //
-      isShowparticulars: "到会详情",
-      user: [],
-      warningIsShow: false,
-      userId: "",
-      listSignin: [],
-    };
-  },
-  computed: {},
-  watch: {
-    "particlaDlg.title"() {
-      if (this.particlaDlg.title) {
-        this.isShowparticulars = this.particlaDlg.title;
-      }
-    },
-    dialogVisiblepartica: {
-      handler(newval) {
-        if (newval) {
-          if (this.isShowparticulars == "报名详情") {
-            this.offlineListDetail();
-          } else {
-            this.arriveOfflineListDetail();
-          }
-        }
-      },
-    },
-    submitDialog: {
-      handler(newval) {
-        if (newval) {
-          this.arriveOfflineListDetail();
-        }
-      },
-    },
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    // //报名人数
-    async offlineListDetail() {
-      const res = await raiInterface.offlineListDetail({
-        ActivityId: this.offlineId,
-      });
-      if (res.Ret == 200) {
-        this.tableDataSub = res.Data.List;
-      }
-    },
-    //到会详情
-    async arriveOfflineListDetail() {
-      const res = this.particlaDlg.isSpecial
-        ? await raiSpecial.getSpecialtripmeetDetial({
-            ActivityId: this.offlineId,
-          })
-        : await raiInterface.activityMeetoffline({
-            ActivityId: this.offlineId,
-          });
-      if (res.Ret == 200) {
-        this.tableDataSub = res.Data.List;
-        this.listSignin = res.Data.ListSignin || [];
-      }
-    },
-    confirmPerson() {
-      this.tableDataSub = [];
-      this.user = [];
-      this.userId = "";
-      this.dynamicItem = [];
-      this.$emit("update:dialogVisiblepartica", false);
-    },
-    async confirmSubmit() {
-      const is = this.dynamicItem.some((item) => item.isShow == true);
-      if (is) return this.$message.error("姓名有误");
-      if (this.tableDataSub) {
-        this.tableDataSub.forEach((item) => {
-          if (item.Operation) {
-            this.user.push(item.UserId);
-          }
-        });
-      }
-      this.dynamicItem.forEach((item) => this.user.push(item.id));
-      this.userId = this.user.join(",");
-      const res = this.particlaDlg.isSpecial
-        ? await raiSpecial.postSpecialtripMeetingDo({
-            ActivityId: this.offlineId,
-            UserIds: this.userId,
-          })
-        : await raiInterface.activityMeetmeetingDo({
-            ActivityId: this.offlineId,
-            Ids: this.userId,
-          });
-      if (res.Ret === 200) {
-        this.user = [];
-        this.userId = "";
-        this.dynamicItem = [];
-        this.$emit("update:submitDialog", false);
-        this.$parent.getsDataList();
-        this.$nextTick(() => {
-          this.$parent.particulars(this.offlineId, "到会详情");
-        });
-      }
-    },
-    addItem() {
-      this.dynamicItem.push({
-        name: "",
-        isShow: false,
-      });
-    },
-    deleteItem(item, index) {
-      this.dynamicItem.splice(index, 1);
-    },
-    /* 获取客户名称 */
-    getCompany(query) {
-      if (query.includes(",")) return;
-      if (query) {
-        raiInterface
-          .activitySignupUserList({
-            KeyWord: query,
-          })
-          .then((res) => {
-            if (res.Ret === 200) {
-              let arr = [];
-              res.Data.List &&
-                res.Data.List.forEach((item) => {
-                  let obj = {
-                    ...item,
-                    value: item.RealName + " , " + item.Mobile + " , " + item.CompanyName,
-                  };
-                  arr.push(obj);
-                });
-              this.companyList = arr;
-            }
-          });
-      } else {
-        this.companyList = [];
-      }
-    },
-    callbackHandle(data, cb) {
-      let results = data
-        ? this.companyList.filter((item) => {
-            return item.value.includes(data);
-          })
-        : this.companyList;
-      clearTimeout(this.timeout);
-      this.timeout = setTimeout(() => {
-        cb(results);
-      }, 300);
-      if (results.length == 0) {
-        this.warningIsShow = true;
-      } else {
-        this.warningIsShow = false;
-      }
-    },
-    handleClose() {
-      (this.dynamicItem = []), (this.$parent.submitDialog = false);
-    },
-    focusCompany(name) {
-      if ((name.length && this.companyList.length == 0) || this.warningIsShow) {
-        this.dynamicItem.forEach((item) => {
-          if (item.name == name) {
-            item.isShow = true;
-          }
-        });
-      } else {
-        this.dynamicItem.forEach((item) => {
-          if (item.name == name) {
-            item.isShow = false;
-          }
-        });
-      }
-    },
-    selectCompany(val, index) {
-      this.companyList.forEach((item) => {
-        if (item.value == val.name) {
-          this.dynamicItem.splice(index, 1, { id: item.UserId, ...val });
-        }
-      });
-    },
-  },
-};
-</script>
 <style lang="scss">
 .container-applydialog {
   .custom-applydialog {

src/views/rai_manage/components/reportComponents/CompanyDetail.vue

@@ -71,7 +71,7 @@ function handleClose() {
 
 <template>
   <div class="container-company-detail">
-    <el-dialog v-dialogDrag title="公司点击详情" width="800px" :close-on-click-modal="false" :modal-append-to-body="false" center v-model="props.isCompanyDetailShow" :before-close="handleClose">
+    <el-dialog draggable title="公司点击详情" width="800px" :close-on-click-modal="false" :modal-append-to-body="false" center v-model="props.isCompanyDetailShow" :before-close="handleClose">
       <p v-if="companyCount" style="margin">公司总点击次数{{ companyCount }}次</p>
       <div class="table-body">
         <table>

src/views/rai_manage/components/report_preview/choicenessPre.vue

@@ -1,3 +1,120 @@
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import Disclaimer from "./components/disclaimer.vue";
+import toTop from "./components/toTop.vue";
+import moment from "moment";
+import { raiInterface } from "@/api/api.js";
+
+const $route = useRoute();
+const $router = useRouter();
+
+const publishTime = computed(() => {
+  return moment(reportInfo.value.PublishDate).format("YYYY-MM-DD hh:mm:ss");
+});
+
+const reportInfo = ref("");
+const showTips = ref(false);
+const dataListSubject = ref([]);
+// 报告列表
+const reportList = ref([]);
+// route 列表点击进来，有route参数  storage 从sessionStorage取
+const from = ref("route");
+// 21消费 22：医药 20：科技 19：智造
+const ChartPermissionTextMap = ref(
+  new Map([
+    [21, "消费领域深度调研报告"],
+    [22, "医药领域深度调研报告"],
+    [20, "科技领域深度调研报告"],
+    [19, "智造领域深度调研报告"],
+  ])
+);
+const ChartPermissionIconMap = ref(
+  new Map([
+    [21, "https://hongze.oss-accelerate.aliyuncs.com/static/images/202110/20211026/p1Oce2z0Hd7LOAhsMAcnelTc869X.png"],
+    [22, "https://hongze.oss-accelerate.aliyuncs.com/static/images/202110/20211026/x19sqGUZTXXsaZiCl7BdCliARB9X.png"],
+    [20, "https://hongze.oss-accelerate.aliyuncs.com/static/images/202110/20211026/sByLMApvMcKfpMYWANNMNOQGurH7.png"],
+    [19, "https://hongze.oss-accelerate.aliyuncs.com/static/images/202110/20211026/D5UPmQ53dsHGrtdVmC9gJ7qSQ8zp.png"],
+  ])
+);
+
+function showDisclaimer() {
+  showTips.value = true;
+}
+// 将reportInfo中的list解出来 方便页面展示
+async function init() {
+  if ($route.query.ArticleId) {
+    // 有ArticleId 是通过列表点击进来的
+    let res = await raiInterface.reportSelectionDetail({ ArticleId: $route.query.ArticleId || "" });
+    if (res.Ret == 200) {
+      reportInfo.value = res.Data;
+      from.value = "route";
+    } else {
+      reportInfo.value = JSON.parse(sessionStorage.getItem("choicenessPre")) || {};
+      from.value = "storage";
+    }
+  } else {
+    reportInfo.value = JSON.parse(sessionStorage.getItem("choicenessPre")) || {};
+    from.value = "storage";
+  }
+  if (from.value == "storage") {
+    reportInfo.value.List.map((item) => {
+      if (reportList.value.length == 0 || reportList.value.every((it) => it.ChartPermissionId != item.ChartPermissionId)) {
+        reportList.value.push({
+          ChartPermissionId: item.ChartPermissionId,
+          ChartPermissionText: ChartPermissionTextMap.value.get(item.ChartPermissionId),
+          ChartPermissionIcon: ChartPermissionIconMap.value.get(item.ChartPermissionId),
+          contetList: [item],
+        });
+      } else {
+        for (const report of reportList.value) {
+          if (report.ChartPermissionId == item.ChartPermissionId) {
+            report.contetList.push(item);
+            break;
+          }
+        }
+      }
+    });
+    dataListSubject.value = reportInfo.value.ListChartSummary;
+  } else {
+    reportInfo.value.List.map((item) => {
+      if (reportList.value.length == 0 || reportList.value.every((it) => it.ChartPermissionId != item.ChartPermissionId)) {
+        reportList.value.push({
+          ChartPermissionId: item.ChartPermissionId,
+          ChartPermissionText: ChartPermissionTextMap.value.get(item.ChartPermissionId),
+          ChartPermissionIcon: ChartPermissionIconMap.value.get(item.ChartPermissionId),
+          contetList: item.List,
+        });
+      } else {
+        for (const report of reportList.value) {
+          if (report.ChartPermissionId == item.ChartPermissionId) {
+            report.contetList.push(item.List);
+            break;
+          }
+        }
+      }
+    });
+    reportList.value = reportList.value.filter((item) => item.contetList && item.contetList.length > 0);
+  }
+}
+function reportDetailLink() {
+  window.open(reportInfo.value.ReportLink, "_blank");
+}
+function strFontSize(str) {
+  let font = str
+    .replace(/font-size:\s\w+;?/g, "")
+    .replace(/font-size\s:\w+;?/g, "")
+    .replace(/font-size:\w+;?/g, "");
+  return `<div style="font-size:16px">${font}</div>`;
+}
+function goArticle(id) {
+  window.open(`https://vmp.hzinsights.com/v2/articles/${id}`, "_blank");
+}
+onMounted(() => {
+  $("#report-content-box img").css("max-width", "100%");
+});
+</script>
+
 <template>
   <div>
     <div class="report-container">
@@ -63,128 +180,7 @@
     <toTop />
   </div>
 </template>
-<script>
-import Disclaimer from "./components/disclaimer.vue";
-import toTop from "./components/toTop.vue";
-import moment from "moment";
-import { raiInterface } from "@/api/api.js";
-export default {
-  name: "summaryPre",
-  components: {
-    Disclaimer,
-    toTop,
-  },
-  computed: {
-    publishTime() {
-      return moment(this.reportInfo.PublishDate).format("YYYY-MM-DD hh:mm:ss");
-    },
-  },
-  data() {
-    return {
-      reportInfo: "",
-      showTips: false,
-      dataListSubject: [],
-      // 报告列表
-      reportList: [],
-      // route 列表点击进来，有route参数  storage 从sessionStorage取
-      from: "route",
-      // 21: 消费 22：医药 20：科技 19：智造
-      ChartPermissionTextMap: new Map([
-        [21, "消费领域深度调研报告"],
-        [22, "医药领域深度调研报告"],
-        [20, "科技领域深度调研报告"],
-        [19, "智造领域深度调研报告"],
-      ]),
-      ChartPermissionIconMap: new Map([
-        [21, "https://hongze.oss-accelerate.aliyuncs.com/static/images/202110/20211026/p1Oce2z0Hd7LOAhsMAcnelTc869X.png"],
-        [22, "https://hongze.oss-accelerate.aliyuncs.com/static/images/202110/20211026/x19sqGUZTXXsaZiCl7BdCliARB9X.png"],
-        [20, "https://hongze.oss-accelerate.aliyuncs.com/static/images/202110/20211026/sByLMApvMcKfpMYWANNMNOQGurH7.png"],
-        [19, "https://hongze.oss-accelerate.aliyuncs.com/static/images/202110/20211026/D5UPmQ53dsHGrtdVmC9gJ7qSQ8zp.png"],
-      ]),
-    };
-  },
-  created() {
-    this.init();
-  },
-  methods: {
-    showDisclaimer() {
-      this.showTips = true;
-    },
-    // 将reportInfo中的list解出来 方便页面展示
-    async init() {
-      if (this.$route.query.ArticleId) {
-        // 有ArticleId 是通过列表点击进来的
-        let res = await raiInterface.reportSelectionDetail({ ArticleId: this.$route.query.ArticleId || "" });
-        if (res.Ret == 200) {
-          this.reportInfo = res.Data;
-          this.from = "route";
-        } else {
-          this.reportInfo = JSON.parse(sessionStorage.getItem("choicenessPre")) || {};
-          this.from = "storage";
-        }
-      } else {
-        this.reportInfo = JSON.parse(sessionStorage.getItem("choicenessPre")) || {};
-        this.from = "storage";
-      }
-      if (this.from == "storage") {
-        this.reportInfo.List.map((item) => {
-          if (this.reportList.length == 0 || this.reportList.every((it) => it.ChartPermissionId != item.ChartPermissionId)) {
-            this.reportList.push({
-              ChartPermissionId: item.ChartPermissionId,
-              ChartPermissionText: this.ChartPermissionTextMap.get(item.ChartPermissionId),
-              ChartPermissionIcon: this.ChartPermissionIconMap.get(item.ChartPermissionId),
-              contetList: [item],
-            });
-          } else {
-            for (const report of this.reportList) {
-              if (report.ChartPermissionId == item.ChartPermissionId) {
-                report.contetList.push(item);
-                break;
-              }
-            }
-          }
-        });
-        this.dataListSubject = this.reportInfo.ListChartSummary;
-      } else {
-        this.reportInfo.List.map((item) => {
-          if (this.reportList.length == 0 || this.reportList.every((it) => it.ChartPermissionId != item.ChartPermissionId)) {
-            this.reportList.push({
-              ChartPermissionId: item.ChartPermissionId,
-              ChartPermissionText: this.ChartPermissionTextMap.get(item.ChartPermissionId),
-              ChartPermissionIcon: this.ChartPermissionIconMap.get(item.ChartPermissionId),
-              contetList: item.List,
-            });
-          } else {
-            for (const report of this.reportList) {
-              if (report.ChartPermissionId == item.ChartPermissionId) {
-                report.contetList.push(item.List);
-                break;
-              }
-            }
-          }
-        });
-        this.reportList = this.reportList.filter((item) => item.contetList && item.contetList.length > 0);
-      }
-    },
-    reportDetailLink() {
-      window.open(this.reportInfo.ReportLink, "_blank");
-    },
-    strFontSize(str) {
-      let font = str
-        .replace(/font-size:\s\w+;?/g, "")
-        .replace(/font-size\s:\w+;?/g, "")
-        .replace(/font-size:\w+;?/g, "");
-      return `<div style="font-size:16px">${font}</div>`;
-    },
-    goArticle(id) {
-      window.open(`https://vmp.hzinsights.com/v2/articles/${id}`, "_blank");
-    },
-  },
-  mounted() {
-    $("#report-content-box img").css("max-width", "100%");
-  },
-};
-</script>
+
 <style lang="scss" scoped>
 .report-container {
   padding: 20px;

src/views/rai_manage/components/report_preview/components/disclaimer.vue

@@ -1,8 +1,27 @@
+<script setup>
+const props = defineProps({
+  showTips: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  // 1: 研选报告 路演精华 2: 报告精选 本周汇总 上周汇总
+  disclaimerType: {
+    type: String,
+    default: "1",
+  },
+});
+const $emit = defineEmits();
+function isHide() {
+  $emit("hideDlg");
+}
+</script>
+
 <template>
   <div class="container-dlg" v-show="showTips">
     <div class="text">
       <h1>免责声明</h1>
-      <p v-if="disclaimerType=='1'">
+      <p v-if="disclaimerType == '1'">
         本文为用户投稿，用户在平台中发表的所有资料、言论等仅代表个人观点，与本平台立场无关，不对您构成任何投资建议。本平台对文中陈述、观点判断保持中立，不对所包含内容及数据的真实性、准确性、可靠性或完整性提供任何明示或暗示的保证。请读者仅作参考，并请自行承担全部责任。
       </p>
       <template v-else>
@@ -19,30 +38,9 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  name:'disclaimer',
-  props:{
-    showTips: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    // 1: 研选报告 路演精华 2: 报告精选 本周汇总 上周汇总
-    disclaimerType:{
-      type:String,
-      default:'1'
-    }
-  },
-  methods:{
-    isHide(){
-      this.$emit('hideDlg')
-    }
-  }
-}
-</script>
+
 <style lang="scss" scoped>
-  .container-dlg {
+.container-dlg {
   position: fixed;
   top: 0;
   left: 0;
@@ -55,7 +53,7 @@ export default {
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  @media screen and (min-width:790px) {
+  @media screen and (min-width: 790px) {
     padding: 0px 30px;
     width: 1200px;
     top: 0;
@@ -66,32 +64,32 @@ export default {
     width: 100%;
     background-color: #fff;
     border-radius: 2.66667vw;
-    @media screen and (min-width:790px) {
-    width: 50%;
-    border-radius: 20px;
-  }
-  h1 {
+    @media screen and (min-width: 790px) {
+      width: 50%;
+      border-radius: 20px;
+    }
+    h1 {
       padding-top: 4vw;
       text-align: center;
       font: 4.26667vw "PingFang-SC-Regular";
       color: #333;
       text-align: center;
       margin-bottom: 2.26667vw;
-    @media screen and (min-width:790px) {
-      padding-top: 15px;
-      margin-bottom: 17px;
-      font: 16px "PingFang-SC-Regular";
-    }
+      @media screen and (min-width: 790px) {
+        padding-top: 15px;
+        margin-bottom: 17px;
+        font: 16px "PingFang-SC-Regular";
+      }
     }
     p {
       padding: 0 4vw;
       font-size: 3.46667vw;
-       @media screen and (min-width:790px) {
-    padding: 0 15px;
-      font-size: 14px;
-    }
+      @media screen and (min-width: 790px) {
+        padding: 0 15px;
+        font-size: 14px;
+      }
     }
-    .disTypeTwo{
+    .disTypeTwo {
       color: #666;
     }
     .hide-tips {
@@ -102,12 +100,12 @@ export default {
       color: #2680eb;
       text-align: center;
       border-top: 1px solid #eaeaea;
-    @media screen and (min-width:790px) {
-      margin-top: 10px;
-      font-size: 14px;
-      line-height: 40px;
-    }
+      @media screen and (min-width: 790px) {
+        margin-top: 10px;
+        font-size: 14px;
+        line-height: 40px;
+      }
     }
   }
 }
-</style>
+</style>

src/views/rai_manage/components/report_preview/components/toTop.vue

@@ -1,30 +1,24 @@
+<script setup>
+function toTop() {
+  document.body.scrollTop = document.documentElement.scrollTop = 0;
+}
+</script>
+
 <template>
   <div class="toTop-image">
     <img src="~@/assets/img/icons/returntop.png" @click="toTop" />
   </div>
 </template>
-<script>
-export default {
-  name:'toTop',
-  methods:{
-    toTop(){
-      document.body.scrollTop = document.documentElement.scrollTop = 0;
-    }
-  }
-}
-</script>
+
 <style lang="scss" scoped>
-  .toTop-image{
-    position: fixed;
-    right: 20px;
-    bottom: 150px;
-    z-index: 10;
-    // @media screen and (max-width:790px) {
-    //   bottom: 40px;
-    // }
-    img{
-      width: 40px;
-      cursor: pointer;
-    }
+.toTop-image {
+  position: fixed;
+  right: 20px;
+  bottom: 150px;
+  z-index: 10;
+  img {
+    width: 40px;
+    cursor: pointer;
   }
-</style>
+}
+</style>

src/views/rai_manage/components/report_preview/lastWeekSummary.vue

@@ -1,307 +1,288 @@
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+import Disclaimer from "./components/disclaimer.vue";
+import toTop from "./components/toTop.vue";
+import moment from "moment";
+import { raiInterface } from "@/api/api.js";
+
+const $route = useRoute();
+const $router = useRouter();
+
+const publishTime = computed(() => {
+  return moment(reportInfo.value.PublishDate).format("YYYY-MM-DD hh:mm:ss");
+});
+
+const reportInfo = ref({});
+const showTips = ref(false);
+// 报告数据
+const reportList = ref([]);
+
+onMounted(() => {
+  init();
+  $("#report-content-box img").css("max-width", "100%");
+});
+
+function showDisclaimer() {
+  showTips.value = true;
+}
+// 将reportInfo中的list解出来 方便页面展示
+async function init() {
+  let Content = "";
+  if ($route.query.ArticleId) {
+    // 有ArticleId 是通过列表点击进来的
+    let res = await raiInterface.minutesSummaryDetail({ ArticleId: $route.query.ArticleId || "" });
+    if (res.Ret == 200) {
+      reportInfo.value = res.Data;
+      Content = reportInfo.value;
+    } else {
+      reportInfo.value = JSON.parse(sessionStorage.getItem("lastWeekPre")) || {};
+      Content = reportInfo.value.Content;
+    }
+  } else {
+    reportInfo.value = JSON.parse(sessionStorage.getItem("lastWeekPre")) || {};
+    Content = reportInfo.value.Content;
+  }
+  // let {Content} = reportInfo.value
+
+  if (Content.SortCydyjy != "") {
+    reportList.value.push({
+      // 报告列表
+      list: Content.ListCydyjy,
+      // 名称
+      name: "产业调研纪要",
+      // 排序
+      sort: Content.SortCydyjy,
+      icon: "",
+    });
+  }
+  if (Content.SortSsgs != "") {
+    reportList.value.push({
+      // 报告列表
+      list: Content.ListSsgs,
+      // 名称
+      name: "上市公司调研纪要",
+      // 排序
+      sort: Content.SortSsgs,
+      icon: "",
+    });
+  }
+  if (Content.SortYanx != "") {
+    reportList.value.push({
+      // 报告列表
+      list: Content.ListYanx,
+      // 名称
+      name: "买方研选纪要",
+      // 排序
+      sort: Content.SortYanx,
+      icon: "",
+    });
+  }
+  for (let report of reportList.value) {
+    if (report.name == "上市公司调研纪要") {
+      report.icon = "https://hongze.oss-cn-shanghai.aliyuncs.com/static/images/202111/20211101/ujHXB48I8ay9T0XoPRI7lorz7OkL.png";
+    } else if (report.name == "产业调研纪要") {
+      report.icon = "https://hongze.oss-cn-shanghai.aliyuncs.com/static/images/202110/20211020/UPAdozy96z9ypzY04vi0Y3Ogqzji.png";
+    } else {
+      report.icon = "https://hongze.oss-cn-shanghai.aliyuncs.com/static/images/202111/20211104/QbTGTNhD9MxYp24cJ7V5WpCN0oNl.png";
+    }
+  }
+  // 买方研选纪要里面没有排序项目
+  for (let report of reportList.value.filter((it) => it.name != "买方研选纪要")) {
+    for (const item of report.list) {
+      if (item.ChartPermissionName == "智造") {
+        item.IcoLink = "https://hzstatic.hzinsights.com/static/temp/20220707202207/20220707/1sZLc8DnXMPkB29QQATstvtEvi20.png";
+      } else if (item.ChartPermissionName == "医药") {
+        item.IcoLink = "https://hzstatic.hzinsights.com/static/temp/20220707202207/20220707/5Xa9gP3A2dyR2AXoXcTyrboTEYl4.png";
+      } else if (item.ChartPermissionName == "消费") {
+        item.IcoLink = "https://hzstatic.hzinsights.com/static/temp/20220707202207/20220707/yAcPQU6iAgO3tgP1yNSlOmRhgfl9.png";
+      } else {
+        item.IcoLink = "https://hzstatic.hzinsights.com/static/temp/20220707202207/20220707/GIMrrZKC1GEOzGbaTBCkE5i6N9DJ.png";
+      }
+    }
+    // 清除没有写排序的项目 没有排序就没有内容
+    report.list = report.list.filter((item) => item.ChartPermissionSort != "");
+    // 里层排序
+    report.list.sort((a, b) => a.ChartPermissionSort - b.ChartPermissionSort);
+  }
+  // 外层排序
+  reportList.value.sort((a, b) => a.sort.charCodeAt() - b.sort.charCodeAt());
+}
+function toReportDetail(reportLink) {
+  window.open(reportLink, "_blank");
+}
+</script>
+
 <template>
-    <div>
-        <div class="report-container">
-            <div class="report-title">{{reportInfo.Title}}</div>
-            <div class="report-author-box">
-                <div class="report-author-name">
-                    {{reportInfo.Department}}
-                </div>
-                <div class="report-publishTime">
-                    {{publishTime}}
-                </div>
-            </div>
-            <div class="report-disclaimer">
-                注：请务必阅读<span @click="showDisclaimer">免责声明</span>
-            </div>
-            <div class="report-abstract">
-                摘要：{{reportInfo.Abstract}}
+  <div>
+    <div class="report-container">
+      <div class="report-title">{{ reportInfo.Title }}</div>
+      <div class="report-author-box">
+        <div class="report-author-name">
+          {{ reportInfo.Department }}
+        </div>
+        <div class="report-publishTime">
+          {{ publishTime }}
+        </div>
+      </div>
+      <div class="report-disclaimer">注：请务必阅读<span @click="showDisclaimer">免责声明</span></div>
+      <div class="report-abstract">摘要：{{ reportInfo.Abstract }}</div>
+      <div class="report-content-box" id="report-content-box">
+        <div class="report-big-content" v-for="item1 in reportList" :key="item1.name">
+          <template v-if="item1.name != '买方研选纪要'">
+            <div class="report-big-content-title"><img :src="item1.icon" />{{ item1.name }}</div>
+            <div class="report-small-content" v-for="item2 in item1.list" :key="item2.ChartPermissionId">
+              <div class="report-type-tag">
+                <img :src="item2.IcoLink" />
+                {{ item2.ChartPermissionName }}
+              </div>
+              <div class="report-content" v-for="(item3, index3) in item2.List" :key="index3">
+                <div class="report-body" v-html="item3.Body"></div>
+                <div class="report-detail-link" @click="toReportDetail(item3.ReportLink)" v-if="item3.ReportLink">点击查看详情</div>
+              </div>
             </div>
-            <div class="report-content-box" id="report-content-box">
-              <div class="report-big-content" v-for="item1 in reportList" :key="item1.name">
-                <template v-if="item1.name != '买方研选纪要'">
-                  <div class="report-big-content-title">
-                    <img :src="item1.icon"/>{{item1.name}}
-                  </div>
-                  <div class="report-small-content" v-for="item2 in item1.list" :key="item2.ChartPermissionId">
-                    <div class="report-type-tag">
-                      <img :src="item2.IcoLink"/>
-                      {{item2.ChartPermissionName}}
-                    </div>
-                    <div class="report-content" v-for="(item3,index3) in item2.List" :key="index3">
-                      <div class="report-body" v-html="item3.Body"></div>
-                      <div class="report-detail-link"  @click="toReportDetail(item3.ReportLink)" v-if="item3.ReportLink">点击查看详情</div>
-                    </div>
-                  </div>
-                </template>
-                <template v-else>
-                  <div class="report-big-content-title">
-                    <img :src="item1.icon"/>{{item1.name}}
-                  </div>
-                  <div class="report-small-content">
-                    <div class="report-content" v-for="(item4,index4) in item1.list" :key="index4">
-                      <div class="report-body" v-html="item4.Body"></div>
-                      <div class="report-detail-link"  @click="toReportDetail(item4.ReportLink)" v-if="item4.ReportLink">点击查看详情</div>
-                    </div>
-                  </div>
-
-                </template>
+          </template>
+          <template v-else>
+            <div class="report-big-content-title"><img :src="item1.icon" />{{ item1.name }}</div>
+            <div class="report-small-content">
+              <div class="report-content" v-for="(item4, index4) in item1.list" :key="index4">
+                <div class="report-body" v-html="item4.Body"></div>
+                <div class="report-detail-link" @click="toReportDetail(item4.ReportLink)" v-if="item4.ReportLink">点击查看详情</div>
               </div>
             </div>
-
+          </template>
         </div>
-        <Disclaimer :showTips="showTips" @hideDlg="showTips = false" disclaimerType='2'/>
-        <toTop />
+      </div>
     </div>
+    <Disclaimer :showTips="showTips" @hideDlg="showTips = false" disclaimerType="2" />
+    <toTop />
+  </div>
 </template>
-<script>
-import Disclaimer from './components/disclaimer.vue'
-import toTop from "./components/toTop.vue"
-import moment from "moment";
-import { raiInterface } from "@/api/api.js";
 
-export default {
-    name:"summaryPre",
-    components:{
-        Disclaimer,
-        toTop
-    },
-    computed:{
-        publishTime(){
-            return moment(this.reportInfo.PublishDate).format('YYYY-MM-DD hh:mm:ss')
-        }
-    },
-    data(){
-        return {
-            reportInfo:{},
-            showTips:false,
-            // 报告数据
-            reportList:[]
-        }
-    },
-    created(){
-      this.init()
-    },
-    mounted() {
-        $("#report-content-box img").css('max-width','100%')
-    },
-    methods:{
-      showDisclaimer(){
-          this.showTips = true
-      },
-      // 将reportInfo中的list解出来 方便页面展示
-      async init(){
-        let Content=''
-        console.log(this.reportInfo);
-        if(this.$route.query.ArticleId){
-          // 有ArticleId 是通过列表点击进来的
-          let res = await raiInterface.minutesSummaryDetail({ ArticleId: this.$route.query.ArticleId || ""})
-          if(res.Ret == 200){
-              this.reportInfo = res.Data
-              Content = this.reportInfo
-          }else{
-              this.reportInfo = JSON.parse(sessionStorage.getItem('lastWeekPre')) || {}
-              Content = this.reportInfo.Content
-          }
-        }else{
-          this.reportInfo = JSON.parse(sessionStorage.getItem('lastWeekPre')) || {}
-          Content = this.reportInfo.Content
-        }
-        // let {Content} = this.reportInfo
-        
-        if(Content.SortCydyjy != ''){
-          this.reportList.push({
-            // 报告列表
-            list:Content.ListCydyjy,
-            // 名称
-            name:'产业调研纪要',
-            // 排序
-            sort:Content.SortCydyjy,
-            icon:''
-          })
-        }
-        if(Content.SortSsgs != ''){
-          this.reportList.push({
-            // 报告列表
-            list:Content.ListSsgs,
-            // 名称
-            name:'上市公司调研纪要',
-            // 排序
-            sort:Content.SortSsgs,
-            icon:''
-          })
-        }
-        if(Content.SortYanx != ''){
-          this.reportList.push({
-            // 报告列表
-            list:Content.ListYanx,
-            // 名称
-            name:'买方研选纪要',
-            // 排序
-            sort:Content.SortYanx,
-            icon:''
-          })
+<style lang="scss" scoped>
+.report-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+  word-break: break-all;
+  box-sizing: border-box;
+  .report-title {
+    font-style: normal;
+    font-weight: bold;
+    font-size: 18px;
+    color: #333333;
+    margin-bottom: 10px;
+  }
+  .report-author-box {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .report-author-name {
+      font-style: normal;
+      font-weight: 500;
+      font-size: 16px;
+      color: #333333;
+      margin-bottom: 4px;
+    }
+    .report-publishTime {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      color: #999999;
+    }
+  }
+  .report-disclaimer {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    color: #999999;
+    span {
+      color: #3385ff;
+      cursor: pointer;
+      margin-left: 4px;
+    }
+  }
+  .report-abstract {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    color: #666666;
+    padding: 12px 0;
+    text-indent: 14px;
+    word-break: break-all;
+    position: relative;
+    border-bottom: 1px dashed #dcdfe6;
+    &:before {
+      content: "";
+      height: 20px;
+      width: 4px;
+      background-color: #3385ff;
+      position: absolute;
+      left: 0;
+      top: 12px;
+    }
+  }
+  .report-content-box {
+    margin-top: 30px;
+    .report-big-content {
+      .report-big-content-title {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        color: #333333;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 20px;
+        img {
+          height: 14px;
+          margin-right: 10px;
         }
-        for (let report of this.reportList) {
-          if(report.name == "上市公司调研纪要"){
-            report.icon = 'https://hongze.oss-cn-shanghai.aliyuncs.com/static/images/202111/20211101/ujHXB48I8ay9T0XoPRI7lorz7OkL.png'
-          }else if(report.name == "产业调研纪要"){
-            report.icon = 'https://hongze.oss-cn-shanghai.aliyuncs.com/static/images/202110/20211020/UPAdozy96z9ypzY04vi0Y3Ogqzji.png'
-          }else{
-            report.icon = 'https://hongze.oss-cn-shanghai.aliyuncs.com/static/images/202111/20211104/QbTGTNhD9MxYp24cJ7V5WpCN0oNl.png'
+      }
+      .report-small-content {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 30px;
+        .report-type-tag {
+          height: 24px;
+          min-width: 90px;
+          padding: 2px 10px;
+          box-sizing: border-box;
+          background-color: #3385ff;
+          border-radius: 2px;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          align-self: flex-start;
+          margin-bottom: 16px;
+          img {
+            height: 14px;
+            margin-right: 6px;
           }
         }
-        // 买方研选纪要里面没有排序项目
-        for (let report of this.reportList.filter(it => it.name!='买方研选纪要')) {
-          for (const item of report.list) {
-            if(item.ChartPermissionName == '智造'){
-              item.IcoLink = "https://hzstatic.hzinsights.com/static/temp/20220707202207/20220707/1sZLc8DnXMPkB29QQATstvtEvi20.png"
-            }else if(item.ChartPermissionName == '医药'){
-              item.IcoLink = "https://hzstatic.hzinsights.com/static/temp/20220707202207/20220707/5Xa9gP3A2dyR2AXoXcTyrboTEYl4.png"
-            }else if(item.ChartPermissionName == '消费'){
-              item.IcoLink = "https://hzstatic.hzinsights.com/static/temp/20220707202207/20220707/yAcPQU6iAgO3tgP1yNSlOmRhgfl9.png"
-            }else{
-              item.IcoLink = "https://hzstatic.hzinsights.com/static/temp/20220707202207/20220707/GIMrrZKC1GEOzGbaTBCkE5i6N9DJ.png"
-            }
+        .report-content {
+          margin-bottom: 38px;
+          &:last-child {
+            margin-bottom: 0;
           }
-          // 清除没有写排序的项目 没有排序就没有内容
-          report.list = report.list.filter(item => item.ChartPermissionSort!='')
-          // 里层排序
-          report.list.sort((a,b) => a.ChartPermissionSort - b.ChartPermissionSort)
-        }
-        // 外层排序
-        this.reportList.sort((a,b)=> a.sort.charCodeAt()-b.sort.charCodeAt())
-        console.log(this.reportList);
-      },
-      toReportDetail(reportLink){
-        window.open(reportLink, '_blank');
-      }
-    },
-}
-</script>
-<style lang="scss" scoped>
-    .report-container{
-        padding: 20px;
-        max-width: 1200px;
-        margin: 0 auto;
-        word-break: break-all;
-        box-sizing: border-box;
-        .report-title{
-            font-style: normal;
-            font-weight: bold;
-            font-size: 18px;
-            color: #333333;
-            margin-bottom: 10px;
-        }
-        .report-author-box{
-            margin-bottom: 10px;
-            display:flex;
-            align-items:center;
-            justify-content:space-between;
-            flex-wrap: wrap;
-            .report-author-name{
-                font-style: normal;
-                font-weight: 500;
-                font-size: 16px;
-                color: #333333;
-                margin-bottom: 4px;
-            }
-            .report-publishTime{
-                font-style: normal;
-                font-weight: 400;
-                font-size: 16px;
-                color: #999999;
-            }
-        }
-        .report-disclaimer{
-            font-style: normal;
+          .report-detail-link {
             font-weight: 400;
             font-size: 16px;
-            line-height: 22px;
-            color: #999999;
-            span{
-                color: #3385FF;
-                cursor: pointer;
-                margin-left: 4px;
-            }
-        }
-        .report-abstract{
-            font-style: normal;
-            font-weight: 400;
-            font-size: 16px;
-            color: #666666;
-            padding: 12px 0;
-            text-indent: 14px;
-            word-break: break-all;
-            position: relative;
-            border-bottom: 1px dashed #DCDFE6;
-            &:before{
-                content: '';
-                height: 20px;
-                width: 4px;
-                background-color: #3385FF;
-                position: absolute;
-                left: 0;
-                top: 12px;
-            }
-        }
-        .report-content-box{
-          margin-top: 30px;
-          .report-big-content{
-            .report-big-content-title{
-              font-style: normal;
-              font-weight: 400;
-              font-size: 14px;
-              color: #333333;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              margin-bottom: 20px;
-              img{
-                height: 14px;
-                margin-right: 10px;
-              }
-            }
-            .report-small-content{
-              display: flex;
-              flex-direction: column;
-              margin-bottom: 30px;
-              .report-type-tag{
-                height: 24px;
-                min-width: 90px;
-                padding: 2px 10px;
-                box-sizing: border-box;
-                background-color: #3385FF;
-                border-radius: 2px;
-                font-weight: 400;
-                font-size: 14px;
-                color: #FFFFFF;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                align-self: flex-start;
-                margin-bottom: 16px;
-                img{
-                  height: 14px;
-                  margin-right: 6px;
-                }
-              }
-              .report-content{
-                margin-bottom: 38px;
-                &:last-child{
-                  margin-bottom: 0;
-                }
-                .report-detail-link{
-                  font-weight: 400;
-                  font-size: 16px;
-                  color: #2A65F5;
-                  margin-top: 14px;
-                  text-align: right;
-                  cursor: pointer;
-                }
-              }
-            }
+            color: #2a65f5;
+            margin-top: 14px;
+            text-align: right;
+            cursor: pointer;
           }
-
         }
+      }
     }
-</style>
+  }
+}
+</style>

src/views/rai_manage/components/report_preview/roadshowPre.vue

@@ -1,176 +1,163 @@
-<template>
-    <div>
-        <div class="report-container">
-            <div class="report-title">{{reportInfo.Title}}</div>
-            <div class="report-author-box">
-                <div class="report-author-name">
-                    {{reportInfo.SellerAndMobile}}
-                </div>
-                <div class="report-publishTime">
-                    <div>
-                        {{publishDate}}
-                    </div>
-                    <div>
-                        {{publishTime}}
-                    </div>
-                </div>
-            </div>
-            <div class="report-disclaimer">
-                注：请务必阅读<span @click="showDisclaimer">免责声明</span>
-            </div>
-            <div class="report-abstract">
-                摘要：{{reportInfo.Abstract}}
-            </div>
-            <div class="report-content-item">
-                <div class="report-content" id="report-content" v-html="reportInfo.Body"></div>
-                <div class="deeperReport" @click="lookDeeperReport" v-if="reportInfo.ReportLink">
-                    查看深度报告
-                </div>
-            </div>
-        </div>
-        <Disclaimer :showTips="showTips" @hideDlg="showTips = false" />
-        <toTop />
-    </div>
-</template>
-<script>
-import Disclaimer from './components/disclaimer.vue'
-import toTop from "./components/toTop.vue"
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+import Disclaimer from "./components/disclaimer.vue";
+import toTop from "./components/toTop.vue";
 import moment from "moment";
 import { raiInterface } from "@/api/api.js";
 
-export default {
-    name:"summaryPre",
-    components:{
-        Disclaimer,
-        toTop
-    },
-    computed:{
-        publishDate(){
-            return moment(this.reportInfo.PublishDate).format('YYYY-MM-DD')
-        },
-        publishTime(){
-            return moment(this.reportInfo.PublishDate).format('hh:mm:ss')
-        },
-    },
-    data(){
-        return {
-            reportInfo:{},
-            showTips:false
-        }
-    },
-    created(){
-        this.init()
-    },
-    methods:{
-        showDisclaimer(){
-            this.showTips = true
-        },
-        lookDeeperReport(){
-            window.open(this.reportInfo.ReportLink, '_blank');
-        },
-        async init(){
-            if(this.$route.query.ArticleId){
-                // 有ArticleId 是通过列表点击进来的
-                let res = await raiInterface.roadshowEssenceDetail({ ArticleId: this.$route.query.ArticleId || ""})
-                if(res.Ret == 200){
-                    this.reportInfo = res.Data
-                }else{
-                    this.reportInfo = JSON.parse(sessionStorage.getItem('roadShowPre')) || {}
-                }
-            }else{
-                this.reportInfo = JSON.parse(sessionStorage.getItem('roadShowPre')) || {}
-            }
-            // console.log(this.reportInfo);
-        }
-    },
-    mounted() {
-        $("#report-content img").css('max-width','100%')
-    },
+const $route = useRoute();
+const $router = useRouter();
+
+const publishTime = computed(() => {
+  return moment(reportInfo.value.PublishDate).format("YYYY-MM-DD hh:mm:ss");
+});
+
+const publishDate = computed(() => {
+  return moment(reportInfo.value.PublishDate).format("YYYY-MM-DD");
+});
+const reportInfo = ref({});
+const showTips = ref(false);
+
+onMounted(() => {
+  init();
+  $("#report-content img").css("max-width", "100%");
+});
+
+function showDisclaimer() {
+  showTips.value = true;
+}
+function lookDeeperReport() {
+  window.open(reportInfo.value.ReportLink, "_blank");
+}
+async function init() {
+  if ($route.query.ArticleId) {
+    // 有ArticleId 是通过列表点击进来的
+    let res = await raiInterface.roadshowEssenceDetail({ ArticleId: $route.query.ArticleId || "" });
+    if (res.Ret == 200) {
+      reportInfo.value = res.Data;
+    } else {
+      reportInfo.value = JSON.parse(sessionStorage.getItem("roadShowPre")) || {};
+    }
+  } else {
+    reportInfo.value = JSON.parse(sessionStorage.getItem("roadShowPre")) || {};
+  }
 }
 </script>
+
+<template>
+  <div>
+    <div class="report-container">
+      <div class="report-title">{{ reportInfo.Title }}</div>
+      <div class="report-author-box">
+        <div class="report-author-name">
+          {{ reportInfo.SellerAndMobile }}
+        </div>
+        <div class="report-publishTime">
+          <div>
+            {{ publishDate }}
+          </div>
+          <div>
+            {{ publishTime }}
+          </div>
+        </div>
+      </div>
+      <div class="report-disclaimer">注：请务必阅读<span @click="showDisclaimer">免责声明</span></div>
+      <div class="report-abstract">摘要：{{ reportInfo.Abstract }}</div>
+      <div class="report-content-item">
+        <div class="report-content" id="report-content" v-html="reportInfo.Body"></div>
+        <div class="deeperReport" @click="lookDeeperReport" v-if="reportInfo.ReportLink">查看深度报告</div>
+      </div>
+    </div>
+    <Disclaimer :showTips="showTips" @hideDlg="showTips = false" />
+    <toTop />
+  </div>
+</template>
+
 <style lang="scss" scoped>
-    .report-container{
-        word-break: break-all;
-        padding: 20px;
-        max-width: 1200px;
-        margin: 0 auto;
-        box-sizing: border-box;
-        .report-title{
-            font-style: normal;
-            font-weight: bold;
-            font-size: 18px;
-            color: #333333;
-            margin-bottom: 10px;
-        }
-        .report-author-box{
-            margin-bottom: 10px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            .report-author-name{
-                font-style: normal;
-                font-weight: 500;
-                font-size: 16px;
-                color: #333333;
-                margin-bottom: 4px;
-            }
-            .report-publishTime{
-                font-style: normal;
-                font-weight: 400;
-                font-size: 16px;
-                color: #999999;
-                text-align: right;
-            }
-        }
-        .report-disclaimer{
-            font-style: normal;
-            font-weight: 400;
-            font-size: 16px;
-            line-height: 22px;
-            color: #999999;
-            span{
-                color: #3385FF;
-                cursor: pointer;
-                margin-left: 4px;
-            }
-        }
-        .report-abstract{
-            font-style: normal;
-            font-weight: 400;
-            font-size: 16px;
-            color: #666666;
-            padding: 12px 0;
-            text-indent: 14px;
-            word-break: break-all;
-            position: relative;
-            border-bottom: 1px dashed #DCDFE6;
-            &:before{
-                content: '';
-                height: 20px;
-                width: 4px;
-                background-color: #3385FF;
-                position: absolute;
-                left: 0;
-                top: 12px;
-            }
-        }
-        .report-content-item{
-            margin-top: 10px;
-            .deeperReport{
-                width: 128px;
-                height: 40px;
-                background: #1890FF;
-                box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.0400);
-                border-radius: 2px 2px 2px 2px;
-                font-size: 16px;
-                font-weight: 400;
-                color: #FFFFFF;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                margin: 30px auto 0 auto;
-                cursor: pointer;
-            }
-        }
+.report-container {
+  word-break: break-all;
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  .report-title {
+    font-style: normal;
+    font-weight: bold;
+    font-size: 18px;
+    color: #333333;
+    margin-bottom: 10px;
+  }
+  .report-author-box {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .report-author-name {
+      font-style: normal;
+      font-weight: 500;
+      font-size: 16px;
+      color: #333333;
+      margin-bottom: 4px;
+    }
+    .report-publishTime {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      color: #999999;
+      text-align: right;
+    }
+  }
+  .report-disclaimer {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    color: #999999;
+    span {
+      color: #3385ff;
+      cursor: pointer;
+      margin-left: 4px;
     }
-</style>
+  }
+  .report-abstract {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    color: #666666;
+    padding: 12px 0;
+    text-indent: 14px;
+    word-break: break-all;
+    position: relative;
+    border-bottom: 1px dashed #dcdfe6;
+    &:before {
+      content: "";
+      height: 20px;
+      width: 4px;
+      background-color: #3385ff;
+      position: absolute;
+      left: 0;
+      top: 12px;
+    }
+  }
+  .report-content-item {
+    margin-top: 10px;
+    .deeperReport {
+      width: 128px;
+      height: 40px;
+      background: #1890ff;
+      box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04);
+      border-radius: 2px 2px 2px 2px;
+      font-size: 16px;
+      font-weight: 400;
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 30px auto 0 auto;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/views/rai_manage/components/report_preview/summaryPre.vue

@@ -1,3 +1,36 @@
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+import Disclaimer from "./components/disclaimer.vue";
+import toTop from "./components/toTop.vue";
+import moment from "moment";
+
+const $route = useRoute();
+const $router = useRouter();
+
+const publishTime = computed(() => {
+  return moment(new Date()).format("YYYY-MM-DD");
+});
+
+const reportInfo = ref(JSON.parse(sessionStorage.getItem("summaryPre")) || "");
+const showTips = ref(false);
+
+
+ function  showDisclaimer() {
+      showTips.value = true;
+    },
+   function lookDeeperReport() {
+      window.open(reportInfo.value.ReportLink, "_blank");
+    },
+
+
+onMounted(()=>{
+    $("#report-content img").css("max-width", "100%");
+
+})
+</script>
+
 <template>
   <div>
     <div class="report-container">
@@ -29,42 +62,7 @@
     <toTop />
   </div>
 </template>
-<script>
-import Disclaimer from "./components/disclaimer.vue";
-import toTop from "./components/toTop.vue";
-import moment from "moment";
 
-export default {
-  name: "summaryPre",
-  components: {
-    Disclaimer,
-    toTop,
-  },
-  computed: {
-    publishTime() {
-      return moment(new Date()).format("YYYY-MM-DD");
-    },
-  },
-  data() {
-    return {
-      reportInfo: JSON.parse(sessionStorage.getItem("summaryPre")) || "",
-      showTips: false,
-    };
-  },
-  methods: {
-    showDisclaimer() {
-      this.showTips = true;
-    },
-    lookDeeperReport() {
-      window.open(this.reportInfo.ReportLink, "_blank");
-    },
-  },
-  mounted() {
-    console.log(this.reportInfo);
-    $("#report-content img").css("max-width", "100%");
-  },
-};
-</script>
 <style lang="scss" scoped>
 .report-container {
   word-break: break-all;
@@ -127,7 +125,7 @@ export default {
   .report-abstract {
     border-left: 3px solid #001529;
     padding-left: 12px;
-    :nth-child(1){
+    :nth-child(1) {
       margin-bottom: 0.6em;
       font-size: 20px;
       color: #000;

src/views/rai_manage/components/report_preview/thisWeekSummary.vue

@@ -1,334 +1,317 @@
+<script>
+import { ref, computed, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+import Disclaimer from "./components/disclaimer.vue";
+import toTop from "./components/toTop.vue";
+import moment from "moment";
+import { raiInterface } from "@/api/api.js";
+
+const $route = useRoute();
+const $router = useRouter();
+
+const publishTime = computed(() => {
+  return moment(reportInfo.value.PublishDate).format("YYYY-MM-DD hh:mm:ss");
+});
+
+const reportInfo = ref({});
+const showTips = ref(false);
+// 报告数据
+const reportList = ref([]);
+
+onMounted(() => {
+  init();
+  $("#report-content-box img").css("max-width", "100%");
+});
+
+function showDisclaimer() {
+  showTips.value = true;
+}
+// 将reportInfo中的list解出来 方便页面展示
+async function init() {
+  let Content = "";
+  if ($route.query.ArticleId) {
+    // 有ArticleId 是通过列表点击进来的
+    let res = await raiInterface.researchSummaryDetail({ ArticleId: $route.query.ArticleId || "" });
+    if (res.Ret == 200) {
+      reportInfo.value = res.Data;
+      Content = reportInfo.value;
+    } else {
+      reportInfo.value = JSON.parse(sessionStorage.getItem("thisWeekPre")) || {};
+      Content = reportInfo.value.Content;
+    }
+  } else {
+    reportInfo.value = JSON.parse(sessionStorage.getItem("thisWeekPre")) || {};
+    Content = reportInfo.value.Content;
+  }
+  // console.log(Content);
+
+  if (Content.SortBzchjh != "") {
+    reportList.value.push({
+      // 报告列表
+      list: Content.ListBzchjh,
+      // 名称
+      name: "本周晨会精华",
+      // 排序
+      sort: Content.SortBzchjh,
+      icon: "",
+    });
+  }
+  if (Content.SortCydyjy != "") {
+    reportList.value.push({
+      // 报告列表
+      list: Content.ListCydyjy,
+      // 名称
+      name: "产业调研纪要",
+      // 排序
+      sort: Content.SortCydyjy,
+      icon: "",
+    });
+  }
+  if (Content.SortSdbg != "") {
+    reportList.value.push({
+      // 报告列表
+      list: Content.ListSdbg,
+      // 名称
+      name: "深度报告",
+      // 排序
+      sort: Content.SortSdbg,
+      icon: "",
+    });
+  }
+  if (Content.SortSjdp != "") {
+    reportList.value.push({
+      // 报告列表
+      list: Content.ListSjdp,
+      // 名称
+      name: "市场QA汇总",
+      // 排序
+      sort: Content.SortSjdp,
+      icon: "",
+    });
+  }
+  if (Content.SortSsgs != "") {
+    reportList.value.push({
+      // 报告列表
+      list: Content.ListSsgs,
+      // 名称
+      name: "上市公司调研纪要",
+      // 排序
+      sort: Content.SortSsgs,
+      icon: "",
+    });
+  }
+  for (let report of reportList.value) {
+    if (report.name == "深度报告") {
+      report.icon = "https://hongze.oss-cn-shanghai.aliyuncs.com/static/images/202110/20211027/le8AcRjDz0MhA72bVDiaf3d5ALSe.png";
+    } else if (report.name == "产业调研纪要") {
+      report.icon = "https://hongze.oss-cn-shanghai.aliyuncs.com/static/images/202110/20211020/UPAdozy96z9ypzY04vi0Y3Ogqzji.png";
+    } else if (report.name == "本周晨会精华") {
+      report.icon = "https://hongze.oss-cn-shanghai.aliyuncs.com/static/images/202110/20211020/DCfekcxaIKGePBsNVu1ULfmNcJBY.png";
+    } else if (report.name == "市场QA汇总") {
+      report.icon = "https://hongze.oss-cn-shanghai.aliyuncs.com/static/images/202110/20211020/2a5cXafO3Iws4QcFp1bd5WPdYikV.png";
+    } else {
+      report.icon = "https://hongze.oss-cn-shanghai.aliyuncs.com/static/images/202111/20211101/ujHXB48I8ay9T0XoPRI7lorz7OkL.png";
+    }
+  }
+  // 市场QA汇总里面没有排序项目
+  for (let report of reportList.value.filter((it) => it.name != "市场QA汇总")) {
+    for (const item of report.list) {
+      if (item.ChartPermissionName == "智造") {
+        item.IcoLink = "https://hzstatic.hzinsights.com/static/temp/20220707202207/20220707/1sZLc8DnXMPkB29QQATstvtEvi20.png";
+      } else if (item.ChartPermissionName == "医药") {
+        item.IcoLink = "https://hzstatic.hzinsights.com/static/temp/20220707202207/20220707/5Xa9gP3A2dyR2AXoXcTyrboTEYl4.png";
+      } else if (item.ChartPermissionName == "消费") {
+        item.IcoLink = "https://hzstatic.hzinsights.com/static/temp/20220707202207/20220707/yAcPQU6iAgO3tgP1yNSlOmRhgfl9.png";
+      } else if (item.ChartPermissionName == "策略") {
+        item.IcoLink = "";
+      } else {
+        item.IcoLink = "https://hzstatic.hzinsights.com/static/temp/20220707202207/20220707/GIMrrZKC1GEOzGbaTBCkE5i6N9DJ.png";
+      }
+    }
+    // 清除没有写排序的项目 没有排序就没有内容
+    report.list = report.list.filter((item) => item.ChartPermissionSort != "");
+    // 里层排序
+    report.list.sort((a, b) => a.ChartPermissionSort - b.ChartPermissionSort);
+  }
+  // 外层排序
+  reportList.value.sort((a, b) => a.sort.charCodeAt() - b.sort.charCodeAt());
+  console.log(reportList.value);
+}
+function toReportDetail(reportLink) {
+  window.open(reportLink, "_blank");
+}
+</script>
+
 <template>
-    <div>
-        <div class="report-container">
-            <div class="report-title">{{reportInfo.Title}}</div>
-            <div class="report-author-box">
-                <div class="report-author-name">
-                    {{reportInfo.Department}}
-                </div>
-                <div class="report-publishTime">
-                    {{publishTime}}
-                </div>
-            </div>
-            <div class="report-disclaimer">
-                注：请务必阅读<span @click="showDisclaimer">免责声明</span>
-            </div>
-            <div class="report-abstract">
-                摘要：{{reportInfo.Abstract}}
+  <div>
+    <div class="report-container">
+      <div class="report-title">{{ reportInfo.Title }}</div>
+      <div class="report-author-box">
+        <div class="report-author-name">
+          {{ reportInfo.Department }}
+        </div>
+        <div class="report-publishTime">
+          {{ publishTime }}
+        </div>
+      </div>
+      <div class="report-disclaimer">注：请务必阅读<span @click="showDisclaimer">免责声明</span></div>
+      <div class="report-abstract">摘要：{{ reportInfo.Abstract }}</div>
+      <div class="report-content-box" id="report-content-box">
+        <div class="report-big-content" v-for="item1 in reportList" :key="item1.name">
+          <template v-if="item1.name != '市场QA汇总'">
+            <div class="report-big-content-title"><img :src="item1.icon" />{{ item1.name }}</div>
+            <div class="report-small-content" v-for="item2 in item1.list" :key="item2.ChartPermissionId">
+              <div class="report-type-tag">
+                <img :src="item2.IcoLink" />
+                {{ item2.ChartPermissionName }}
+              </div>
+              <div class="report-content" v-for="(item3, index3) in item2.List" :key="index3">
+                <div class="report-body" v-html="item3.Body"></div>
+                <div class="report-detail-link" @click="toReportDetail(item3.ReportLink)" v-if="item3.ReportLink">点击查看详情</div>
+              </div>
             </div>
-            <div class="report-content-box" id="report-content-box">
-              <div class="report-big-content" v-for="item1 in reportList" :key="item1.name">
-                <template v-if="item1.name != '市场QA汇总'">
-                  <div class="report-big-content-title">
-                    <img :src="item1.icon"/>{{item1.name}}
-                  </div>
-                  <div class="report-small-content" v-for="item2 in item1.list" :key="item2.ChartPermissionId">
-                    <div class="report-type-tag">
-                      <img :src="item2.IcoLink"/>
-                      {{item2.ChartPermissionName}}
-                    </div>
-                    <div class="report-content" v-for="(item3,index3) in item2.List" :key="index3">
-                      <div class="report-body" v-html="item3.Body"></div>
-                      <div class="report-detail-link" @click="toReportDetail(item3.ReportLink)" v-if="item3.ReportLink">点击查看详情</div>
-                    </div>
-                  </div>
-                </template>
-                <template v-else>
-                  <div class="report-big-content-title">
-                    <img :src="item1.icon"/>{{item1.name}}
-                  </div>
-                  <div class="report-small-content">
-                    <div class="report-content" v-for="(item4,index4) in item1.list" :key="index4">
-                      <div class="report-body" v-html="item4.Body"></div>
-                      <div class="report-detail-link" @click="toReportDetail(item4.ReportLink)" v-if="item4.ReportLink">点击查看详情</div>
-                    </div>
-                  </div>
-
-                </template>
+          </template>
+          <template v-else>
+            <div class="report-big-content-title"><img :src="item1.icon" />{{ item1.name }}</div>
+            <div class="report-small-content">
+              <div class="report-content" v-for="(item4, index4) in item1.list" :key="index4">
+                <div class="report-body" v-html="item4.Body"></div>
+                <div class="report-detail-link" @click="toReportDetail(item4.ReportLink)" v-if="item4.ReportLink">点击查看详情</div>
               </div>
             </div>
-
+          </template>
         </div>
-        <Disclaimer :showTips="showTips" @hideDlg="showTips = false" disclaimerType='2'/>
-        <toTop />
+      </div>
     </div>
+    <Disclaimer :showTips="showTips" @hideDlg="showTips = false" disclaimerType="2" />
+    <toTop />
+  </div>
 </template>
-<script>
-import Disclaimer from './components/disclaimer.vue'
-import toTop from "./components/toTop.vue"
-import moment from "moment";
-import { raiInterface } from "@/api/api.js";
 
-export default {
-    name:"summaryPre",
-    components:{
-        Disclaimer,
-        toTop
-    },
-    computed:{
-        publishTime(){
-            return moment(this.reportInfo.PublishDate).format('YYYY-MM-DD hh:mm:ss')
-        }
-    },
-    data(){
-        return {
-            reportInfo:{},
-            showTips:false,
-            // 报告数据
-            reportList:[]
-        }
-    },
-    created(){
-      this.init()
-    },
-    mounted() {
-        $("#report-content-box img").css('max-width','100%')
-    },
-    methods:{
-      showDisclaimer(){
-          this.showTips = true
-      },
-      // 将reportInfo中的list解出来 方便页面展示
-      async init(){
-        let Content=''
-        if(this.$route.query.ArticleId){
-          // 有ArticleId 是通过列表点击进来的
-          let res = await raiInterface.researchSummaryDetail({ ArticleId: this.$route.query.ArticleId || ""})
-          if(res.Ret == 200){
-              this.reportInfo = res.Data
-              Content = this.reportInfo
-          }else{
-              this.reportInfo = JSON.parse(sessionStorage.getItem('thisWeekPre')) || {}
-              Content = this.reportInfo.Content
-          }
-        }else{
-          this.reportInfo = JSON.parse(sessionStorage.getItem('thisWeekPre')) || {}
-          Content = this.reportInfo.Content
-        }
-        // console.log(Content);
-        
-        if(Content.SortBzchjh != ''){
-          this.reportList.push({
-            // 报告列表
-            list:Content.ListBzchjh,
-            // 名称
-            name:'本周晨会精华',
-            // 排序
-            sort:Content.SortBzchjh,
-            icon:''
-          })
-        }
-        if(Content.SortCydyjy != ''){
-          this.reportList.push({
-            // 报告列表
-            list:Content.ListCydyjy,
-            // 名称
-            name:'产业调研纪要',
-            // 排序
-            sort:Content.SortCydyjy,
-            icon:''
-          })
-        }
-        if(Content.SortSdbg != ''){
-          this.reportList.push({
-            // 报告列表
-            list:Content.ListSdbg,
-            // 名称
-            name:'深度报告',
-            // 排序
-            sort:Content.SortSdbg,
-            icon:''
-          })
-        }
-        if(Content.SortSjdp != ''){
-          this.reportList.push({
-            // 报告列表
-            list:Content.ListSjdp,
-            // 名称
-            name:'市场QA汇总',
-            // 排序
-            sort:Content.SortSjdp,
-            icon:''
-          })
-        }
-        if(Content.SortSsgs != ''){
-          this.reportList.push({
-            // 报告列表
-            list:Content.ListSsgs,
-            // 名称
-            name:'上市公司调研纪要',
-            // 排序
-            sort:Content.SortSsgs,
-            icon:''
-          })
+<style lang="scss" scoped>
+.report-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+  word-break: break-all;
+  box-sizing: border-box;
+  .report-title {
+    font-style: normal;
+    font-weight: bold;
+    font-size: 18px;
+    color: #333333;
+    margin-bottom: 10px;
+  }
+  .report-author-box {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .report-author-name {
+      font-style: normal;
+      font-weight: 500;
+      font-size: 16px;
+      color: #333333;
+      margin-bottom: 4px;
+    }
+    .report-publishTime {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      color: #999999;
+    }
+  }
+  .report-disclaimer {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    color: #999999;
+    span {
+      color: #3385ff;
+      cursor: pointer;
+      margin-left: 4px;
+    }
+  }
+  .report-abstract {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    color: #666666;
+    padding: 12px 0;
+    text-indent: 14px;
+    word-break: break-all;
+    position: relative;
+    border-bottom: 1px dashed #dcdfe6;
+    &:before {
+      content: "";
+      height: 20px;
+      width: 4px;
+      background-color: #3385ff;
+      position: absolute;
+      left: 0;
+      top: 12px;
+    }
+  }
+  .report-content-box {
+    margin-top: 30px;
+    .report-big-content {
+      .report-big-content-title {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        color: #333333;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 20px;
+        img {
+          height: 14px;
+          margin-right: 10px;
         }
-        for (let report of this.reportList) {
-          if(report.name == "深度报告"){
-            report.icon = 'https://hongze.oss-cn-shanghai.aliyuncs.com/static/images/202110/20211027/le8AcRjDz0MhA72bVDiaf3d5ALSe.png'
-          }else if(report.name == "产业调研纪要"){
-            report.icon = 'https://hongze.oss-cn-shanghai.aliyuncs.com/static/images/202110/20211020/UPAdozy96z9ypzY04vi0Y3Ogqzji.png'
-          }else if(report.name == "本周晨会精华"){
-            report.icon = 'https://hongze.oss-cn-shanghai.aliyuncs.com/static/images/202110/20211020/DCfekcxaIKGePBsNVu1ULfmNcJBY.png'
-          }else if(report.name == "市场QA汇总"){
-            report.icon = 'https://hongze.oss-cn-shanghai.aliyuncs.com/static/images/202110/20211020/2a5cXafO3Iws4QcFp1bd5WPdYikV.png'
-          }else {
-            report.icon = 'https://hongze.oss-cn-shanghai.aliyuncs.com/static/images/202111/20211101/ujHXB48I8ay9T0XoPRI7lorz7OkL.png'
+      }
+      .report-small-content {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 30px;
+        .report-type-tag {
+          height: 24px;
+          min-width: 90px;
+          padding: 2px 10px;
+          box-sizing: border-box;
+          background-color: #3385ff;
+          border-radius: 2px;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          align-self: flex-start;
+          margin-bottom: 16px;
+          img {
+            height: 14px;
+            margin-right: 6px;
           }
         }
-        // 市场QA汇总里面没有排序项目
-        for (let report of this.reportList.filter(it => it.name!='市场QA汇总')) {
-          for (const item of report.list) {
-            if(item.ChartPermissionName == '智造'){
-              item.IcoLink = "https://hzstatic.hzinsights.com/static/temp/20220707202207/20220707/1sZLc8DnXMPkB29QQATstvtEvi20.png"
-            }else if(item.ChartPermissionName == '医药'){
-              item.IcoLink = "https://hzstatic.hzinsights.com/static/temp/20220707202207/20220707/5Xa9gP3A2dyR2AXoXcTyrboTEYl4.png"
-            }else if(item.ChartPermissionName == '消费'){
-              item.IcoLink = "https://hzstatic.hzinsights.com/static/temp/20220707202207/20220707/yAcPQU6iAgO3tgP1yNSlOmRhgfl9.png"
-            }else if(item.ChartPermissionName == '策略'){
-              item.IcoLink = ""
-            }else{
-              item.IcoLink = "https://hzstatic.hzinsights.com/static/temp/20220707202207/20220707/GIMrrZKC1GEOzGbaTBCkE5i6N9DJ.png"
-            }
+        .report-content {
+          margin-bottom: 38px;
+          &:last-child {
+            margin-bottom: 0;
           }
-          // 清除没有写排序的项目 没有排序就没有内容
-          report.list = report.list.filter(item => item.ChartPermissionSort!='')
-          // 里层排序
-          report.list.sort((a,b) => a.ChartPermissionSort - b.ChartPermissionSort)
-        }
-        // 外层排序
-        this.reportList.sort((a,b)=> a.sort.charCodeAt()-b.sort.charCodeAt())
-        console.log(this.reportList);
-      },
-      toReportDetail(reportLink){
-        window.open(reportLink, '_blank');
-      }
-    },
-}
-</script>
-<style lang="scss" scoped>
-    .report-container{
-        padding: 20px;
-        max-width: 1200px;
-        margin: 0 auto;
-        word-break: break-all;
-        box-sizing: border-box;
-        .report-title{
-            font-style: normal;
-            font-weight: bold;
-            font-size: 18px;
-            color: #333333;
-            margin-bottom: 10px;
-        }
-        .report-author-box{
-            margin-bottom: 10px;
-            display:flex;
-            align-items:center;
-            justify-content:space-between;
-            flex-wrap: wrap;
-            .report-author-name{
-                font-style: normal;
-                font-weight: 500;
-                font-size: 16px;
-                color: #333333;
-                margin-bottom: 4px;
-            }
-            .report-publishTime{
-                font-style: normal;
-                font-weight: 400;
-                font-size: 16px;
-                color: #999999;
-            }
-        }
-        .report-disclaimer{
-            font-style: normal;
+          .report-detail-link {
             font-weight: 400;
             font-size: 16px;
-            line-height: 22px;
-            color: #999999;
-            span{
-                color: #3385FF;
-                cursor: pointer;
-                margin-left: 4px;
-            }
-        }
-        .report-abstract{
-            font-style: normal;
-            font-weight: 400;
-            font-size: 16px;
-            color: #666666;
-            padding: 12px 0;
-            text-indent: 14px;
-            word-break: break-all;
-            position: relative;
-            border-bottom: 1px dashed #DCDFE6;
-            &:before{
-                content: '';
-                height: 20px;
-                width: 4px;
-                background-color: #3385FF;
-                position: absolute;
-                left: 0;
-                top: 12px;
-            }
-        }
-        .report-content-box{
-          margin-top: 30px;
-          .report-big-content{
-            .report-big-content-title{
-              font-style: normal;
-              font-weight: 400;
-              font-size: 14px;
-              color: #333333;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              margin-bottom: 20px;
-              img{
-                height: 14px;
-                margin-right: 10px;
-              }
-            }
-            .report-small-content{
-              display: flex;
-              flex-direction: column;
-              margin-bottom: 30px;
-              .report-type-tag{
-                height: 24px;
-                min-width: 90px;
-                padding: 2px 10px;
-                box-sizing: border-box;
-                background-color: #3385FF;
-                border-radius: 2px;
-                font-weight: 400;
-                font-size: 14px;
-                color: #FFFFFF;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                align-self: flex-start;
-                margin-bottom: 16px;
-                img{
-                  height: 14px;
-                  margin-right: 6px;
-                }
-              }
-              .report-content{
-                margin-bottom: 38px;
-                &:last-child{
-                  margin-bottom: 0;
-                }
-                .report-detail-link{
-                  font-weight: 400;
-                  font-size: 16px;
-                  color: #2A65F5;
-                  margin-top: 14px;
-                  text-align: right;
-                  cursor: pointer;
-                }
-              }
-            }
+            color: #2a65f5;
+            margin-top: 14px;
+            text-align: right;
+            cursor: pointer;
           }
-
         }
+      }
     }
-</style>
+  }
+}
+</style>

src/views/rai_manage/components/shortcutDialog.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, onMounted, reactive, toRefs, watch } from "vue";
+import { ref, watch, onMounted } from "vue";
 import { raiInterface } from "@/api/api.js";
 const dynamicItem = ref([]);
 
@@ -13,7 +13,7 @@ const props = defineProps({
 const $emit = defineEmits();
 
 watch(
-  () => shortcutIsDialog.value,
+  () => props.shortcutIsDialog,
   () => {
     if (props.shortcutIsDialog) {
       fastSearchKeWord();
@@ -57,7 +57,7 @@ function deleteItem(index) {
 
 <template>
   <div class="container-shortcut">
-    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center top="5vh" v-model="props.shortcutIsDialog" customClass="custom-shortcut" :before-close="confirmPerson">
+    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center top="5vh" v-model="props.shortcutIsDialog" customClass="custom-shortcut" :before-close="confirmPerson">
       <template #header>
         <div style="display: flex; align-items: center">
           <img :src="$icons.add" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />

src/views/rai_manage/components/special/specialResearchDlg.vue

@@ -1,12 +1,86 @@
+<script>
+import { ref, nextTick, watch } from "vue";
+
+import { raiInterface, raiSpecial } from "@/api/api.js";
+
+const props = defineProps({
+  dialogTitle: {
+    type: String,
+    required: true,
+    default: "",
+  },
+  dialogVisibleActivity: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  specialDetailId: {
+    type: Number,
+    required: true,
+    default: "",
+  },
+  tabsActive: {
+    type: Number,
+    required: true,
+    default: "",
+  },
+});
+
+const interestData = ref([]); //感兴趣人数
+const exportInterest = ref("");
+const previewList = ref([]);
+const activityDetail = ref({});
+
+watch(
+  () => props.dialogTitle,
+  (newValue) => {
+    newValue == "活动详情" && themeDetails();
+    newValue == "感兴趣人数" && interestDetails();
+  }
+);
+// 预览图片
+function imgLink() {
+  $("#TripImgLink").click();
+}
+
+const $emit = defineEmits();
+
+function handleCloseSubject() {
+  $emit("update:dialogTitle", "");
+  exportInterest.value = "";
+  activityDetail.value = {};
+  previewList.value = [];
+  $emit("update:dialogVisibleActivity", false);
+}
+//感兴趣人数
+async function interestDetails() {
+  const res = await raiSpecial.specialInterested({ ActivityId: props.specialDetailId });
+  if (res.Ret === 200) {
+    exportInterest.value = `${import.meta.env.VITE_APP_API_ROOT}/cygx/special/export?${localStorage.getItem("auth") || ""}&ActivityId=${this.specialDetailId}`;
+    nextTick(() => {
+      interestData.value = res.Data.List;
+    });
+  }
+}
+//获取调研主题详情
+async function themeDetails() {
+  const res = await raiSpecial.specialDetail({ ActivityId: props.specialDetailId });
+  if (res.Ret === 200) {
+    previewList.value = res.Data;
+    previewList.value.push(props.tabsActive == 1 ? previewList.value.TripImgLink : previewList.value.TripImgLinkFix);
+  }
+}
+</script>
+
 <template>
   <div class="container">
-    <el-dialog width="1000px" v-dialogDrag :modal-append-to-body="false" center :title="dialogTitle" :visible.sync="dialogVisibleActivity" :before-close="handleCloseSubject">
+    <el-dialog width="1000px" draggable :modal-append-to-body="false" center :title="dialogTitle" v-model="props.dialogVisibleActivity" :before-close="handleCloseSubject">
       <div class="rai-detail-wrap" v-if="dialogTitle == '活动详情'">
         <div class="activity-top">
           {{ activityDetail.ResearchTheme }}
         </div>
         <p>所属行业： {{ activityDetail.ChartPermissionName }}</p>
-        <p v-if="tabsActive == 1">预期时间： {{ activityDetail.ActivityTimeText }}</p>
+        <p v-if="props.tabsActive == 1">预期时间： {{ activityDetail.ActivityTimeText }}</p>
         <p v-else>活动开始时间： {{ activityDetail.ActivityTimeTextByDay }}</p>
         <p>调研形式： {{ activityDetail.SpecialType == 1 ? "线上" : "线下" }} {{ activityDetail.SpecialType == 2 && activityDetail.City ? "(" + activityDetail.City + ")" : "" }}</p>
         <template v-if="!activityDetail.IndustrialName && !activityDetail.IndustrialSubjectName">
@@ -28,7 +102,7 @@
         </div>
         <p v-if="activityDetail.Host">主持人： {{ activityDetail.Host }}</p>
         <p v-if="activityDetail.Host">主持人： {{ activityDetail.PersonInCharge }}</p>
-        <el-image v-if="tabsActive == 1" style="width: 0px; height: 0px" :src="activityDetail.TripImgLink" id="TripImgLink" :preview-src-list="previewList"></el-image>
+        <el-image v-if="props.tabsActive == 1" style="width: 0px; height: 0px" :src="activityDetail.TripImgLink" id="TripImgLink" :preview-src-list="previewList"></el-image>
         <el-image v-else style="width: 0px; height: 0px" :src="activityDetail.TripImgLinkFix" id="TripImgLink" :preview-src-list="previewList"></el-image>
         <div class="arrange" @click.stop="imgLink">
           查看行程安排
@@ -53,86 +127,6 @@
   </div>
 </template>
 
-<script>
-import { raiInterface, raiSpecial } from "@/api/api.js";
-
-export default {
-  name: "",
-  components: {},
-  props: {
-    dialogTitle: {
-      type: String,
-      required: true,
-      default: "",
-    },
-    dialogVisibleActivity: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    specialDetailId: {
-      type: Number,
-      required: true,
-      default: "",
-    },
-    tabsActive: {
-      type: Number,
-      required: true,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      interestData: [], //感兴趣人数
-      exportInterest: "",
-      previewList: [],
-      activityDetail: {},
-    };
-  },
-  computed: {},
-  watch: {
-    dialogTitle: {
-      handler(newValue) {
-        newValue == "活动详情" && this.themeDetails();
-        newValue == "感兴趣人数" && this.interestDetails();
-      },
-    },
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    // 预览图片
-    imgLink() {
-      $("#TripImgLink").click();
-    },
-    handleCloseSubject() {
-      this.$parent.dialogTitle = "";
-      this.$parent.exportInterest = "";
-      this.activityDetail = {};
-      this.previewList = [];
-      this.$emit("update:dialogVisibleActivity", false);
-    },
-    //感兴趣人数
-    async interestDetails() {
-      const res = await raiSpecial.specialInterested({ ActivityId: this.specialDetailId });
-      if (res.Ret === 200) {
-        this.exportInterest = `${import.meta.env.VITE_APP_API_ROOT}/cygx/special/export?${localStorage.getItem("auth") || ""}&ActivityId=${this.specialDetailId}`;
-        this.$nextTick(() => {
-          this.interestData = res.Data.List;
-        });
-      }
-    },
-    //获取调研主题详情
-    async themeDetails() {
-      const res = await raiSpecial.specialDetail({ ActivityId: this.specialDetailId });
-      if (res.Ret === 200) {
-        this.activityDetail = res.Data;
-        this.previewList.push(this.tabsActive == 1 ? this.activityDetail.TripImgLink : this.activityDetail.TripImgLinkFix);
-      }
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .rai-detail-wrap {
   .activity-top {

src/views/rai_manage/cygxManage/bannerCommon/addBannerDlg.vue

@@ -19,6 +19,10 @@ const props = defineProps({
     required: true,
     default: "",
   },
+  isResearch: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const addBannerForm = ref({
@@ -30,7 +34,6 @@ const addBannerForm = ref({
   imgId: "",
 });
 
-
 watch(
   () => props.bannerVisibleText,
   (val) => {
@@ -43,10 +46,9 @@ const addTypes = computed(() => {
 });
 
 const labelName = computed(() => {
-  let type = addBannerForm.value.type;
   let obj = {
-    name: type == 1 || type == 2 ? "报告链接" : type == 3 ? "视频" : type == 4 ? "音频" : "活动链接",
-    placeholder: type == 1 || type == 2 ? "请输入报告链接（网页版详情页地址）" : type == 3 || type == 4 ? "请输入网页版详情页地址" : "请输入活动链接（网页版详情页地址）",
+    name: props.isResearch ? "活动链接" : "报告链接",
+    placeholder: props.isResearch ? "请输入活动链接（网页版详情页地址）" : "请输入报告链接（网页版详情页地址）",
   };
   return obj;
 });

src/views/rai_manage/cygxManage/bannerCommon/bannerData.js

@@ -1,8 +1,5 @@
 export const AddTypes = [
   { name: "现有报告", id: 1 },
-  { name: "自拟报告", id: 2 },
-  { name: "视频", id: 3 },
-  { name: "音频", id: 4 },
   { name: "活动", id: 5 },
 ];
 

src/views/rai_manage/cygxManage/bannerCommon/previewBanner.vue

@@ -1,3 +1,40 @@
+<script setup>
+import { ref, watch, nextTick } from "vue";
+
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+  previewList: {
+    type: Object,
+  },
+});
+
+const $emit = defineEmits();
+// 关闭预览
+function previewImgShowHanlder() {
+  $emit("update:isShowPreview", false);
+}
+
+// 渲染主标题
+function renderMainTitle(num) {
+  let size = props.previewList.mainTitle.length < num ? 32 : 24;
+  return size + "px";
+}
+
+// 渲染标题
+function renderMainTitleApplet() {
+  let size =
+    props.previewList.twoTitle.length && props.previewList.mainTitle.length > 15
+      ? 18
+      : props.previewList.twoTitle.length && props.previewList.mainTitle.length < 15
+      ? 20
+      : props.previewList.twoTitle.length
+      ? 22
+      : 24;
+  return size + "px";
+}
+</script>
+
 <template>
   <div class="viewer__mask_banner_manage">
     <div class="content">
@@ -16,34 +53,34 @@
       <div class="pc-preview">
         <h6>网页版预览图</h6>
         <!-- T1 预览图 -->
-        <div class="pc-item one-item" :style="`background-image:url(${previewList.Img1})`">
-          <p :style="{ 'font-size': renderMainTitle(35) }">{{ previewList.mainTitle }}</p>
-          <p>{{ previewList.twoTitle }}</p>
+        <div class="pc-item one-item" :style="`background-image:url(${props.previewList.Img1})`">
+          <p :style="{ 'font-size': renderMainTitle(35) }">{{ props.previewList.mainTitle }}</p>
+          <p>{{ props.previewList.twoTitle }}</p>
         </div>
         <!-- T2 预览图 -->
         <div class="box-img-text tow-item">
-          <div class="pc-item" :style="`background-image:url(${previewList.Img2})`">
-            <p :style="{ 'font-size': renderMainTitle(26) }">{{ previewList.mainTitle }}</p>
-            <p>{{ previewList.twoTitle }}</p>
+          <div class="pc-item" :style="`background-image:url(${props.previewList.Img2})`">
+            <p :style="{ 'font-size': renderMainTitle(26) }">{{ props.previewList.mainTitle }}</p>
+            <p>{{ props.previewList.twoTitle }}</p>
           </div>
-          <div class="pc-item" :style="`background-image:url(${previewList.Img3})`">
-            <p :style="{ 'font-size': renderMainTitle(18) }">{{ previewList.mainTitle }}</p>
-            <p>{{ previewList.twoTitle }}</p>
+          <div class="pc-item" :style="`background-image:url(${props.previewList.Img3})`">
+            <p :style="{ 'font-size': renderMainTitle(18) }">{{ props.previewList.mainTitle }}</p>
+            <p>{{ props.previewList.twoTitle }}</p>
           </div>
         </div>
         <!-- T3 预览图 -->
         <div class="box-img-text three-item">
-          <div class="pc-item" :style="`background-image:url(${previewList.Img2})`">
-            <p :style="{ 'font-size': renderMainTitle(26) }">{{ previewList.mainTitle }}</p>
-            <p>{{ previewList.twoTitle }}</p>
+          <div class="pc-item" :style="`background-image:url(${props.previewList.Img2})`">
+            <p :style="{ 'font-size': renderMainTitle(26) }">{{ props.previewList.mainTitle }}</p>
+            <p>{{ props.previewList.twoTitle }}</p>
           </div>
-          <div class="pc-item" :style="`background-image:url(${previewList.Img4})`">
-            <p :style="{ 'font-size': renderMainTitle(0) }">{{ previewList.mainTitle }}</p>
-            <p>{{ previewList.twoTitle }}</p>
+          <div class="pc-item" :style="`background-image:url(${props.previewList.Img4})`">
+            <p :style="{ 'font-size': renderMainTitle(0) }">{{ props.previewList.mainTitle }}</p>
+            <p>{{ props.previewList.twoTitle }}</p>
           </div>
-          <div class="pc-item" :style="`background-image:url(${previewList.Img4})`">
-            <p :style="{ 'font-size': renderMainTitle(0) }">{{ previewList.mainTitle }}</p>
-            <p>{{ previewList.twoTitle }}</p>
+          <div class="pc-item" :style="`background-image:url(${props.previewList.Img4})`">
+            <p :style="{ 'font-size': renderMainTitle(0) }">{{ props.previewList.mainTitle }}</p>
+            <p>{{ props.previewList.twoTitle }}</p>
           </div>
         </div>
       </div>
@@ -51,48 +88,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "",
-  components: {},
-  props: {
-    previewList: {
-      type: Object,
-    },
-  },
-  data() {
-    return {};
-  },
-  computed: {},
-  created() {},
-  mounted() {},
-  methods: {
-    // 关闭预览
-    previewImgShowHanlder() {
-      this.$parent.isShowPreview = false;
-    },
-
-    // 渲染主标题
-    renderMainTitle(num) {
-      let size = this.previewList.mainTitle.length < num ? 32 : 24;
-      return size + "px";
-    },
-
-    // 渲染标题
-    renderMainTitleApplet() {
-      let size =
-        this.previewList.twoTitle.length && this.previewList.mainTitle.length > 15
-          ? 18
-          : this.previewList.twoTitle.length && this.previewList.mainTitle.length < 15
-          ? 20
-          : this.previewList.twoTitle.length
-          ? 22
-          : 24;
-      return size + "px";
-    },
-  },
-};
-</script>
 <style lang="scss">
 .viewer__mask_banner_manage {
   position: fixed;
@@ -100,7 +95,7 @@ export default {
   right: 0;
   top: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, .9);
+  background: rgba(0, 0, 0, 0.9);
   z-index: 9999999;
   .content {
     position: relative;

src/views/rai_manage/cygxManage/bannerManage.vue

@@ -8,7 +8,12 @@ import AddBannerDlg from "./bannerCommon/addBannerDlg.vue";
 import PreviewBanner from "./bannerCommon/previewBanner.vue";
 import DetailsDlg from "./bannerCommon/detailsDlg.vue";
 import Sortable from "sortablejs";
-import _ from 'lodash'
+import _ from "lodash";
+import { useRouter, useRoute } from "vue-router";
+
+const $route = useRoute();
+const $router = useRouter();
+
 const bannerTableColumn = computed(() => {
   return BannerTableColumn;
 });
@@ -316,6 +321,9 @@ onMounted(async () => {
   await getDataList();
   getSelectImgListAll();
 });
+const isResearch = computed(() => {
+  return $route.path.indexOf("purchaser") != -1 ? true : false;
+});
 
 setTimeout(() => {}, 1000);
 </script>
@@ -372,7 +380,7 @@ setTimeout(() => {}, 1000);
       </el-col>
     </el-dialog>
     <!-- 预览图片 -->
-    <preview-banner v-if="isShowPreview" :previewList="previewList" />
+    <preview-banner v-if="isShowPreview" v-model:previewList="previewList" v-model:isShowPreview="isShowPreview"/>
     <!-- 添加或者编辑banner -->
     <add-banner-dlg
       ref="addBannerRef"
@@ -382,6 +390,7 @@ setTimeout(() => {}, 1000);
       @showImgPop="handleshowChooseImgPop"
       @previewImg="handlePreviewImg"
       @preserveAndPublish="preserveAndPublish"
+      :isResearch="isResearch"
     />
     <!-- 详情的弹框 -->
     <!-- <details-dlg :detailsDlgVisible="detailsDlgVisible" :tableDetailList="tableDetailList" @previewImg="handlePreviewImg" /> -->