报告中途

.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
-}

package.json

@@ -12,7 +12,9 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@vueuse/core": "^10.9.0",
     "axios": "^1.6.7",
+    "clipboard": "^2.0.11",
     "crypto-js": "^4.2.0",
     "element-plus": "2.4.4",
     "froala-editor": "^4.1.4",
@@ -26,7 +28,8 @@
     "vue": "^3.4.19",
     "vue-froala-wysiwyg": "^4.1.4",
     "vue-router": "^4.3.0",
-    "vue3-tree-org": "^4.2.2"
+    "vue3-tree-org": "^4.2.2",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

pnpm-lock.yaml

@@ -1,12 +1,22 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
   '@element-plus/icons-vue':
     specifier: ^2.3.1
     version: 2.3.1(vue@3.4.20)
+  '@vueuse/core':
+    specifier: ^10.9.0
+    version: 10.9.0(vue@3.4.20)
   axios:
     specifier: ^1.6.7
     version: 1.6.7
+  clipboard:
+    specifier: ^2.0.11
+    version: 2.0.11
   crypto-js:
     specifier: ^4.2.0
     version: 4.2.0
@@ -49,6 +59,9 @@ dependencies:
   vue3-tree-org:
     specifier: ^4.2.2
     version: 4.2.2(vue@3.4.20)
+  vuedraggable:
+    specifier: ^4.1.0
+    version: 4.1.0(vue@3.4.20)
 
 devDependencies:
   '@vitejs/plugin-vue':
@@ -195,7 +208,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]
@@ -204,7 +217,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]
@@ -213,7 +226,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]
@@ -222,7 +235,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]
@@ -231,7 +244,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]
@@ -240,7 +253,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]
@@ -249,7 +262,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]
@@ -258,7 +271,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]
@@ -267,7 +280,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]
@@ -276,7 +289,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]
@@ -285,7 +298,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]
@@ -294,7 +307,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]
@@ -303,7 +316,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]
@@ -312,7 +325,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]
@@ -321,7 +334,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]
@@ -330,7 +343,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]
@@ -339,7 +352,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]
@@ -348,7 +361,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]
@@ -357,7 +370,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]
@@ -366,7 +379,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]
@@ -375,7 +388,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]
@@ -384,7 +397,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]
@@ -393,7 +406,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]
@@ -448,7 +461,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
@@ -456,7 +469,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
@@ -464,7 +477,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
@@ -472,7 +485,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
@@ -480,7 +493,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
@@ -488,7 +501,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]
@@ -497,7 +510,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]
@@ -506,7 +519,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]
@@ -515,7 +528,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]
@@ -524,7 +537,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]
@@ -533,7 +546,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
@@ -541,7 +554,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
@@ -549,7 +562,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
@@ -557,7 +570,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:
@@ -575,7 +588,11 @@ packages:
     dev: false
 
   /@types/web-bluetooth@0.0.16:
-    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
+    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==, tarball: https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz}
+    dev: false
+
+  /@types/web-bluetooth@0.0.20:
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==, tarball: https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz}
     dev: false
 
   /@vitejs/plugin-vue@5.0.4(vite@5.1.4)(vue@3.4.20):
@@ -657,8 +674,20 @@ packages:
   /@vue/shared@3.4.20:
     resolution: {integrity: sha512-KTEngal0aiUvNJ6I1Chk5Ew5XqChsFsxP4GKAYXWb99zKJWjNU72p2FWEOmZWHxHcqtniOJsgnpd3zizdpfEag==}
 
+  /@vueuse/core@10.9.0(vue@3.4.20):
+    resolution: {integrity: sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==, tarball: https://registry.npmmirror.com/@vueuse/core/-/core-10.9.0.tgz}
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.9.0
+      '@vueuse/shared': 10.9.0(vue@3.4.20)
+      vue-demi: 0.14.7(vue@3.4.20)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@vueuse/core@9.13.0(vue@3.4.20):
-    resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
+    resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==, tarball: https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz}
     dependencies:
       '@types/web-bluetooth': 0.0.16
       '@vueuse/metadata': 9.13.0
@@ -669,12 +698,25 @@ packages:
       - vue
     dev: false
 
+  /@vueuse/metadata@10.9.0:
+    resolution: {integrity: sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==, tarball: https://registry.npmmirror.com/@vueuse/metadata/-/metadata-10.9.0.tgz}
+    dev: false
+
   /@vueuse/metadata@9.13.0:
-    resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
+    resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==, tarball: https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz}
+    dev: false
+
+  /@vueuse/shared@10.9.0(vue@3.4.20):
+    resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==, tarball: https://registry.npmmirror.com/@vueuse/shared/-/shared-10.9.0.tgz}
+    dependencies:
+      vue-demi: 0.14.7(vue@3.4.20)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
     dev: false
 
   /@vueuse/shared@9.13.0(vue@3.4.20):
-    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
+    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==, tarball: https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz}
     dependencies:
       vue-demi: 0.14.7(vue@3.4.20)
     transitivePeerDependencies:
@@ -758,6 +800,14 @@ packages:
       fsevents: 2.3.3
     dev: true
 
+  /clipboard@2.0.11:
+    resolution: {integrity: sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==, tarball: https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz}
+    dependencies:
+      good-listener: 1.2.2
+      select: 1.1.2
+      tiny-emitter: 2.1.0
+    dev: false
+
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -831,6 +881,10 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: false
 
+  /delegate@3.2.0:
+    resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==, tarball: https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz}
+    dev: false
+
   /element-plus@2.4.4(vue@3.4.20):
     resolution: {integrity: sha512-TlKubXJgxwhER0dw+8ULn9hr9kZjraV4R6Q/eidwWUwCKxwXYPBGmMKsZ/85tlxlhMYbcLZd/YZh6G3QkHX4fg==}
     peerDependencies:
@@ -934,7 +988,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
@@ -953,6 +1007,12 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /good-listener@1.2.2:
+    resolution: {integrity: sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==, tarball: https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz}
+    dependencies:
+      delegate: 3.2.0
+    dev: false
+
   /has-flag@3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
     engines: {node: '>=4'}
@@ -1166,6 +1226,10 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /select@1.1.2:
+    resolution: {integrity: sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==, tarball: https://registry.npmmirror.com/select/-/select-1.1.2.tgz}
+    dev: false
+
   /shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -1178,6 +1242,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /sortablejs@1.14.0:
+    resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==, tarball: https://registry.npmmirror.com/sortablejs/-/sortablejs-1.14.0.tgz}
+    dev: false
+
   /sortablejs@1.15.2:
     resolution: {integrity: sha512-FJF5jgdfvoKn1MAKSdGs33bIqLi3LmsgVTliuX6iITj834F+JRQZN90Z93yql8h0K2t0RwDPBmxwlbZfDcxNZA==, tarball: https://registry.npmmirror.com/sortablejs/-/sortablejs-1.15.2.tgz}
     dev: false
@@ -1193,6 +1261,10 @@ packages:
       has-flag: 3.0.0
     dev: true
 
+  /tiny-emitter@2.1.0:
+    resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==, tarball: https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz}
+    dev: false
+
   /to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
@@ -1310,6 +1382,15 @@ packages:
       '@vue/server-renderer': 3.4.20(vue@3.4.20)
       '@vue/shared': 3.4.20
 
+  /vuedraggable@4.1.0(vue@3.4.20):
+    resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==, tarball: https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz}
+    peerDependencies:
+      vue: ^3.0.1
+    dependencies:
+      sortablejs: 1.14.0
+      vue: 3.4.20
+    dev: false
+
   /which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -1317,7 +1398,3 @@ packages:
     dependencies:
       isexe: 2.0.0
     dev: true
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false

src/main.js

@@ -24,11 +24,15 @@ import 'froala-editor/js/third_party/image_tui.min';
 import 'froala-editor/css/froala_editor.pkgd.min.css';
 import 'froala-editor/css/froala_style.min.css';
 
+import icons from '@/utils/icon.js'
+
+
 import VueFroala from 'vue-froala-wysiwyg';
 
 function setupApp() {
   const app = createApp(App)
   initStore(app)
+  app.config.globalProperties.$icons = icons
 
   initRouter(app)
 

src/router/modules/cygxRoutes.js

@@ -33,321 +33,416 @@ export default [
   //   hidden: true,
   // },
   // //  ------------------------------------------------
-  // /* 查研观向报告 */
-  // {
-  //   path: "/",
-  //   component: home,
-  //   name: "查研观向报告",
-  //   hidden: false,
-  //   icon_path: require("@/assets/img/home/rai_report.png"),
-  //   children: [
-  //     {
-  //       path: "RaiDetail",
-  //       component: () => import("@/views/custom_manage/customList/customDetail.vue"),
-  //       name: "客户详情",
-  //       hidden: true,
-  //     },
-  //     {
-  //       path: "appletsReport",
-  //       component: () => import("@/views/rai_manage/reportManage/appletsReport.vue"),
-  //       name: "弘则报告管理",
-  //       hidden: false,
-  //     },
-  //     {
-  //       path: "appIndustry",
-  //       component: () => import("@/views/rai_manage/reportManage/components/appIndustry.vue"),
-  //       name: "产业管理",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "appletsReport",
-  //         pathName: "弘则报告管理",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "addSummaryHz",
-  //       component: () => import("@/views/rai_manage/components/addSummary.vue"),
-  //       name: "添加报告",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "appletsReport",
-  //         pathName: "弘则报告管理",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "editSummaryHz",
-  //       component: () => import("@/views/rai_manage/components/addSummary.vue"),
-  //       name: "编辑报告",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "appletsReport",
-  //         pathName: "弘则报告管理",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "summaryManage",
-  //       component: () => import("@/views/rai_manage/reportManage/summaryManage.vue"),
-  //       name: "研选报告管理",
-  //       hidden: false,
-  //     },
-  //     {
-  //       path: "addSummary",
-  //       component: () => import("@/views/rai_manage/components/addSummary.vue"),
-  //       name: "添加报告",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "summaryManage",
-  //         pathName: "研选报告管理",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "editSummary",
-  //       component: () => import("@/views/rai_manage/components/addSummary.vue"),
-  //       name: "编辑报告",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "summaryManage",
-  //         pathName: "研选报告管理",
-  //         keepAlive: false,
-  //       },
-  //     },
+  /* 查研观向报告 */
+  {
+    path: "/",
+    component: Home,
+    name: "CYGXREPORT",
+    mate: {
+      title: "查研观向报告",
+    },
+    hidden: false,
+    // icon_path: require("@/assets/img/home/rai_report.png"),
+    children: [
+      // {
+      //   path: "RaiDetail",
+      //   component: () => import("@/views/custom_manage/customList/customDetail.vue"),
+      //   name: "RaiDetail",
+      //   hidden: true,
+      //   mate: {
+      //     title: "客户详情",
+      //     keepAlive: false,
+      //   },
+      // },
+      {
+        path: "appletsReport",
+        component: () => import("@/views/rai_manage/reportManage/appletsReport.vue"),
+        name: "appletsReport",
+        hidden: false,
+        mate: {
+          title: "弘则报告管理",
+          keepAlive: false,
+        },
+      },
+      {
+        path: "appIndustry",
+        component: () => import("@/views/rai_manage/reportManage/components/appIndustry.vue"),
+        name: "appIndustry",
+        hidden: true,
+        meta: {
+          pathFrom: "appletsReport",
+          pathName: "弘则报告管理",
+          keepAlive: false,
+          title: "产业管理",
+        },
+      },
+      {
+        path: "addSummaryHz",
+        component: () => import("@/views/rai_manage/components/addSummary.vue"),
+        name: "addSummaryHz",
+        hidden: true,
+        meta: {
+          pathFrom: "appletsReport",
+          pathName: "弘则报告管理",
+          keepAlive: false,
+          title: "添加报告",
+        },
+      },
+      {
+        path: "editSummaryHz",
+        component: () => import("@/views/rai_manage/components/addSummary.vue"),
+        name: "editSummaryHz",
+        hidden: true,
+        meta: {
+          pathFrom: "appletsReport",
+          pathName: "弘则报告管理",
+          keepAlive: false,
+          title: "编辑报告",
+        },
+      },
+      {
+        path: "summaryManage",
+        component: () => import("@/views/rai_manage/reportManage/summaryManage.vue"),
+        name: "summaryManage",
+        hidden: false,
+        meta: {
+          title: "研选报告管理",
+          keepAlive: false,
+        },
+      },
+      {
+        path: "addSummary",
+        component: () => import("@/views/rai_manage/components/addSummary.vue"),
+        name: "addSummary",
+        hidden: true,
+        meta: {
+          pathFrom: "summaryManage",
+          pathName: "研选报告管理",
+          keepAlive: false,
+          title: "添加报告",
+        },
+      },
+      {
+        path: "editSummary",
+        component: () => import("@/views/rai_manage/components/addSummary.vue"),
+        name: "editSummary",
+        hidden: true,
+        meta: {
+          pathFrom: "summaryManage",
+          pathName: "研选报告管理",
+          keepAlive: false,
+          title: "编辑报告",
+        },
+      },
 
-  //     {
-  //       path: "reportChoiceness",
-  //       component: () => import("@/views/rai_manage/reportManage/reportChoiceness.vue"),
-  //       name: "报告精选",
-  //       hidden: false,
-  //     },
-  //     {
-  //       path: "addChoiceness",
-  //       component: () => import("@/views/rai_manage/components/addChoiceness.vue"),
-  //       name: "添加",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "reportChoiceness",
-  //         pathName: "报告精选",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "editChoiceness",
-  //       component: () => import("@/views/rai_manage/components/addChoiceness.vue"),
-  //       name: "编辑",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "reportChoiceness",
-  //         pathName: "报告精选",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "studyThisWeek",
-  //       component: () => import("@/views/rai_manage/reportManage/thisWeek.vue"),
-  //       name: "本周研究汇总",
-  //       hidden: false,
-  //     },
-  //     {
-  //       path: "addThisWeek",
-  //       component: () => import("@/views/rai_manage/components/addThisWeek.vue"),
-  //       name: "添加",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "studyThisWeek",
-  //         pathName: "本周研究汇总",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "editThisWeek",
-  //       component: () => import("@/views/rai_manage/components/addThisWeek.vue"),
-  //       name: "编辑",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "studyThisWeek",
-  //         pathName: "本周研究汇总",
-  //         keepAlive: false,
-  //       },
-  //     },
+      {
+        path: "reportChoiceness",
+        component: () => import("@/views/rai_manage/reportManage/reportChoiceness.vue"),
+        name: "reportChoiceness",
+        hidden: false,
+        mate: {
+          title: "报告精选",
+          keepAlive: false,
+        },
+      },
+      {
+        path: "addChoiceness",
+        component: () => import("@/views/rai_manage/components/addChoiceness.vue"),
+        name: "addChoiceness",
+        hidden: true,
+        meta: {
+          pathFrom: "reportChoiceness",
+          pathName: "报告精选",
+          keepAlive: false,
+          title: "添加",
+        },
+      },
+      {
+        path: "editChoiceness",
+        component: () => import("@/views/rai_manage/components/addChoiceness.vue"),
+        name: "editChoiceness",
+        hidden: true,
+        meta: {
+          pathFrom: "reportChoiceness",
+          pathName: "报告精选",
+          keepAlive: false,
+          title: "编辑",
+        },
+      },
+      {
+        path: "studyThisWeek",
+        component: () => import("@/views/rai_manage/reportManage/thisWeek.vue"),
+        name: "studyThisWeek",
+        hidden: false,
+        meta: {
+          title: "本周研究汇总",
+          keepAlive: false,
+        },
+      },
+      {
+        path: "addThisWeek",
+        component: () => import("@/views/rai_manage/components/addThisWeek.vue"),
+        name: "addThisWeek",
+        hidden: true,
+        meta: {
+          pathFrom: "studyThisWeek",
+          pathName: "本周研究汇总",
+          keepAlive: false,
+          title: "添加",
+        },
+      },
+      {
+        path: "editThisWeek",
+        component: () => import("@/views/rai_manage/components/addThisWeek.vue"),
+        name: "editThisWeek",
+        hidden: true,
+        meta: {
+          pathFrom: "studyThisWeek",
+          pathName: "本周研究汇总",
+          keepAlive: false,
+          title: "编辑",
+        },
+      },
 
-  //     {
-  //       path: "theLastWeek",
-  //       component: () => import("@/views/rai_manage/reportManage/theLastWeek.vue"),
-  //       name: "上周纪要汇总",
-  //       hidden: false,
-  //     },
-  //     {
-  //       path: "addSummarizing",
-  //       component: () => import("@/views/rai_manage/components/addSummarizing.vue"),
-  //       name: "添加",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "theLastWeek",
-  //         pathName: "上周纪要汇总",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "editSummarizing",
-  //       component: () => import("@/views/rai_manage/components/addSummarizing.vue"),
-  //       name: "编辑",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "theLastWeek",
-  //         pathName: "上周纪要汇总",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "roadshowEssence",
-  //       component: () => import("@/views/rai_manage/reportManage/roadshowEssence.vue"),
-  //       name: "路演精华",
-  //       hidden: false,
-  //     },
-  //     {
-  //       path: "addRoadshow",
-  //       component: () => import("@/views/rai_manage/components/addRoadshow.vue"),
-  //       name: "添加",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "roadshowEssence",
-  //         pathName: "路演精华",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "editRoadshow",
-  //       component: () => import("@/views/rai_manage/components/addRoadshow.vue"),
-  //       name: "编辑",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "roadshowEssence",
-  //         pathName: "路演精华",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "morningMeetingManage",
-  //       component: () => import("@/views/rai_manage/reportManage/morningMeetingManage.vue"),
-  //       name: "晨会精华",
-  //       hidden: false,
-  //     },
-  //     {
-  //       path: "addMorningMeeting",
-  //       component: () => import("@/views/rai_manage/components/addMorningMeeting.vue"),
-  //       name: "添加晨会精华",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "morningMeetingManage",
-  //         pathName: "晨会精华",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "editMorningMeeting",
-  //       component: () => import("@/views/rai_manage/components/addMorningMeeting.vue"),
-  //       name: "编辑晨会精华",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "morningMeetingManage",
-  //         pathName: "晨会精华",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "tacticsTimeLine",
-  //       component: () => import("@/views/rai_manage/reportManage/tacticsTimeLine.vue"),
-  //       name: "策略时间线",
-  //       hidden: false,
-  //     },
-  //     {
-  //       path: "internalTesting",
-  //       component: () => import("@/views/rai_manage/reportManage/internalTesting.vue"),
-  //       name: "产品内测",
-  //       hidden: false,
-  //     },
-  //     {
-  //       path: "addHaveReport",
-  //       component: () => import("@/views/rai_manage/reportManage/components/addHaveReport.vue"),
-  //       name: "添加报告",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "internalTesting",
-  //         pathName: "产品内测",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "editHaveReport",
-  //       component: () => import("@/views/rai_manage/reportManage/components/addHaveReport.vue"),
-  //       name: "编辑报告",
-  //       hidden: true,
-  //       meta: {
-  //         pathFrom: "internalTesting",
-  //         pathName: "产品内测",
-  //         keepAlive: false,
-  //       },
-  //     },
-  //     {
-  //       path: "yanXuanSpecial",
-  //       component: () => import("@/views/rai_manage/reportManage/yanXuanSpecial.vue"),
-  //       name: "研选专栏",
-  //       hidden: false,
-  //     },
-  //   ],
-  // },
+      {
+        path: "theLastWeek",
+        component: () => import("@/views/rai_manage/reportManage/theLastWeek.vue"),
+        name: "theLastWeek",
+        hidden: false,
+        meta: {
+          title: "上周纪要汇总",
+          keepAlive: false,
+        },
+      },
+      {
+        path: "addSummarizing",
+        component: () => import("@/views/rai_manage/components/addSummarizing.vue"),
+        name: "addSummarizing",
+        hidden: true,
+        meta: {
+          pathFrom: "theLastWeek",
+          pathName: "上周纪要汇总",
+          keepAlive: false,
+          title: "添加",
+        },
+      },
+      {
+        path: "editSummarizing",
+        component: () => import("@/views/rai_manage/components/addSummarizing.vue"),
+        name: "editSummarizing",
+        hidden: true,
+        meta: {
+          pathFrom: "theLastWeek",
+          pathName: "上周纪要汇总",
+          keepAlive: false,
+          title: "编辑",
+        },
+      },
+      {
+        path: "roadshowEssence",
+        component: () => import("@/views/rai_manage/reportManage/roadshowEssence.vue"),
+        name: "roadshowEssence",
+        hidden: false,
+        meta: {
+          title: "路演精华",
+          keepAlive: false,
+        },
+      },
+      {
+        path: "addRoadshow",
+        component: () => import("@/views/rai_manage/components/addRoadshow.vue"),
+        name: "addRoadshow",
+        hidden: true,
+        meta: {
+          pathFrom: "roadshowEssence",
+          pathName: "路演精华",
+          keepAlive: false,
+          title: "添加",
+        },
+      },
+      {
+        path: "editRoadshow",
+        component: () => import("@/views/rai_manage/components/addRoadshow.vue"),
+        name: "editRoadshow",
+        hidden: true,
+        meta: {
+          pathFrom: "roadshowEssence",
+          pathName: "路演精华",
+          keepAlive: false,
+          title: "编辑",
+        },
+      },
+      {
+        path: "morningMeetingManage",
+        component: () => import("@/views/rai_manage/reportManage/morningMeetingManage.vue"),
+        name: "morningMeetingManage",
+        hidden: false,
+        meta: {
+          title: "晨会精华",
+          keepAlive: false,
+        },
+      },
+      {
+        path: "addMorningMeeting",
+        component: () => import("@/views/rai_manage/components/addMorningMeeting.vue"),
+        name: "addMorningMeeting",
+        hidden: true,
+        meta: {
+          pathFrom: "morningMeetingManage",
+          pathName: "晨会精华",
+          keepAlive: false,
+          title: "添加晨会精华",
+        },
+      },
+      {
+        path: "editMorningMeeting",
+        component: () => import("@/views/rai_manage/components/addMorningMeeting.vue"),
+        name: "editMorningMeeting",
+        hidden: true,
+        meta: {
+          pathFrom: "morningMeetingManage",
+          pathName: "晨会精华",
+          keepAlive: false,
+          title: "编辑晨会精华",
+        },
+      },
+      {
+        path: "tacticsTimeLine",
+        component: () => import("@/views/rai_manage/reportManage/tacticsTimeLine.vue"),
+        name: "tacticsTimeLine",
+        hidden: false,
+        meta: {
+          title: "策略时间线",
+          keepAlive: false,
+        },
+      },
+      {
+        path: "internalTesting",
+        component: () => import("@/views/rai_manage/reportManage/internalTesting.vue"),
+        name: "internalTesting",
+        hidden: false,
+        meta: {
+          keepAlive: false,
+          title: "产品内测",
+        },
+      },
+      {
+        path: "addHaveReport",
+        component: () => import("@/views/rai_manage/reportManage/components/addHaveReport.vue"),
+        name: "addHaveReport",
+        hidden: true,
+        meta: {
+          pathFrom: "internalTesting",
+          pathName: "产品内测",
+          keepAlive: false,
+          title: "添加报告",
+        },
+      },
+      {
+        path: "editHaveReport",
+        component: () => import("@/views/rai_manage/reportManage/components/addHaveReport.vue"),
+        name: "editHaveReport",
+        hidden: true,
+        meta: {
+          pathFrom: "internalTesting",
+          pathName: "产品内测",
+          keepAlive: false,
+          title: "编辑报告",
+        },
+      },
+      {
+        path: "yanXuanSpecial",
+        component: () => import("@/views/rai_manage/reportManage/yanXuanSpecial.vue"),
+        name: "yanXuanSpecial",
+        hidden: false,
+        meta: {
+          keepAlive: false,
+          title: "研选专栏",
+        },
+      },
+    ],
+  },
 
   /* 查研观向管理 */
   {
     path: "/",
     component: Home,
-    name: "查研观向管理",
+    name: "CYGXGL",
     hidden: false,
+    mate: {
+      title: "查研观向管理",
+    },
     // icon_path: require("@/assets/img/home/rai_admin.png"),
     children: [
       {
         path: "Raimap",
         component: () => import("@/views/rai_manage/cygxManage/industryMap.vue"),
-        name: "行业图谱",
+        name: "Raimap",
         hidden: false,
+        mate: {
+          title: "行业图谱",
+          keepAlive: false,
+        },
       },
       {
         path: "RaiAdvice",
         component: () => import("@/views/rai_manage/cygxManage/adviceList.vue"),
-        name: "优化建议",
+        name: "RaiAdvice",
         hidden: false,
+        mate: {
+          title: "优化建议",
+          keepAlive: false,
+        },
       },
       {
         path: "searchManage",
         component: () => import("@/views/rai_manage/cygxManage/searchManage.vue"),
-        name: "搜索词管理",
+        name: "searchManage",
         hidden: false,
+        mate: {
+          title: "搜索词管理",
+          keepAlive: false,
+        },
       },
       {
         path: "applyList",
         component: () => import("@/views/rai_manage/cygxManage/applyUserList.vue"),
-        name: "权益申请记录",
+        name: "applyList",
         hidden: false,
+        mate: {
+          title: "权益申请记录",
+          keepAlive: false,
+        },
       },
       {
         path: "RaiInterview",
         component: () => import("@/views/rai_manage/cygxManage/interviewList.vue"),
-        name: "访谈申请",
+        name: "RaiInterview",
         hidden: false,
+        mate: {
+          title: "访谈申请",
+          keepAlive: false,
+        },
       },
       {
         path: "bannerManage",
         component: () => import("@/views/rai_manage/cygxManage/bannerManage.vue"),
-        name: "banner管理",
+        name: "bannerManage",
         hidden: false,
+        mate: {
+          title: "banner管理",
+          keepAlive: false,
+        },
       },
       {
         path: "lableManage",
         component: () => import("@/views/rai_manage/cygxManage/lableManage.vue"),
-        name: "标签管理",
+        name: "lableManage",
         hidden: false,
+        mate: {
+          title: "标签管理",
+          keepAlive: false,
+        },
       },
     ],
   },

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

@@ -160,7 +160,7 @@ export default {
   },
 };
 </script>
-<style lang="less">
+<style lang="scss">
 .container-particulars {
   .table-box {
     margin: 20px auto;

src/views/rai_manage/components/addChoiceness.vue

@@ -1,3 +1,475 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import RichText from "./richText.vue";
+import { raiInterface } from "@/api/api.js";
+import draggable from "vuedraggable";
+import TemplateMessage from "./apply/templateMessage.vue";
+import _ from "lodash";
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+import { ElMessageBox, ElMessage } from "element-plus";
+
+const route = useRoute();
+const router = useRouter();
+
+const contentValue = ref("one");
+const contentText = ref("市场策略核心逻辑汇总");
+const contentValueTwo = ref("two");
+const contentTextTwo = ref("公司核心逻辑汇总");
+const contentTextLogic = ref("行业核心逻辑汇总");
+const updateMode = ref(""); //更新方式
+const inheritNum = ref(""); //继承第几
+
+const ruleForm = ref({
+  title: "", //标题
+  author: "", //作者
+  time: "", //时间
+  explain: "", //说明
+  reportLink: "", //变更
+});
+const rules = ref({
+  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
+});
+const ruleFormRef = ref(null);
+const twoRich = ref(null);
+const industryList = ref([]); //行业
+const industryIndex = ref(0); //
+const ificationIndustrial = ref(0);
+const addDialogVisible = ref(false);
+const dialogText = ref("");
+const stateValue = ref("");
+const companyList = ref([]);
+const timeout = ref(null);
+const isShowStatus = ref(true);
+const industrialSubjectName = ref("");
+const chartPermissionId = ref(""); //分类id
+const subjectList = ref([]);
+const updateModeList = ref([]); //期数的数组
+const editNum = ref("");
+const overviewList = ref({});
+const marketStrategy = ref("");
+const timeInterval = ref(null); // 定时器
+
+// 报告的缓存处理数据
+function dataInit() {
+  if (sessionStorage.getItem("addChoicenessQY")) {
+    console.log('????');
+    let data = JSON.parse(sessionStorage.getItem("addChoicenessQY"));
+    setTimeout(() => {
+      industryList.value = data.industryList;
+      industryIndex.value = data.industryIndex;
+      ificationIndustrial.value = data.ificationIndustrial;
+      updateMode.value = data.updateMode;
+      inheritNum.value = data.inheritNum;
+      companyList.value = data.companyList;
+      industrialSubjectName.value = data.industrialSubjectName;
+      chartPermissionId.value = data.chartPermissionId;
+      subjectList.value = data.subjectList;
+      updateModeList.value = data.updateModeList;
+      editNum.value = data.editNum;
+      overviewList.value = data.overviewList;
+      ruleForm.value = data.ruleForm;
+      marketStrategy.value = data.MarketStrategy;
+    }, 200);
+  }
+  timeInterval.value = setInterval(() => {
+    let params = {
+      industryList: industryList.value,
+      industryIndex: industryIndex.value,
+      ificationIndustrial: ificationIndustrial.value,
+      updateMode: updateMode.value,
+      inheritNum: inheritNum.value,
+      companyList: companyList.value,
+      industrialSubjectName: industrialSubjectName.value,
+      chartPermissionId: chartPermissionId.value,
+      subjectList: subjectList.value,
+      updateModeList: updateModeList.value,
+      editNum: editNum.value,
+      overviewList: overviewList.value,
+      ruleForm: ruleForm.value,
+      MarketStrategy: marketStrategy.value,
+    };
+    sessionStorage.setItem("addChoicenessQY", JSON.stringify(params));
+  }, 120000);
+}
+function updateModeChange() {
+  if (updateMode.value == "重新编辑") {
+    init();
+    industryList.value = [];
+    getNoTacticsfirst();
+  }
+}
+//获取编辑详情
+async function getDetail() {
+  const res = await raiInterface.reportSelectionDetail({ ArticleId: route.query.id || "", Periods: inheritNum.value || "" });
+  if (res.Ret === 200) {
+    res.Data.List.forEach((item) => {
+      if (!item.List || !item.List.length > 0) {
+        item.List = [];
+      }
+    });
+    updateMode.value = inheritNum.value ? updateMode.value : res.Data.AddType == "1" ? "重新编辑" : "继承往期";
+    ruleForm.value = {
+      title: res.Data.Title, //标题
+      author: res.Data.Department, //作者
+      time: res.Data.PublishDate, //时间
+      explain: res.Data.ProductDescription, //说明
+      reportLink: res.Data.ReportLink, //变更
+    };
+    marketStrategy.value = res.Data.MarketStrategy;
+    inheritNum.value = inheritNum.value ? inheritNum.value : res.Data.InheritPeriods;
+    industryList.value = res.Data.List;
+    setTimeout(() => {
+      res.Data.List.forEach((item, index) => {
+        item.List.forEach((key, i) => {
+          key.CompanyLabel = key.CompanyLabel
+            ? key.CompanyLabel.map((val, i) => {
+                let obj = {
+                  name: val,
+                  value: i + 1,
+                };
+                return obj;
+              })
+            : [
+                {
+                  name: "",
+                  value: 1,
+                },
+              ];
+        });
+      });
+    }, 300);
+    chartPermissionId.value = res.Data.List[0].ChartPermissionId;
+    industrialSubjectName.value = res.Data.List[0].List ? res.Data.List[0].List[0].IndustrialManagementName : "";
+    overviewList.value = {
+      ArticleId: res.Data.List[0].List && res.Data.List[0].List[0].OverviewArticleId,
+      Title: res.Data.List[0].List && res.Data.List[0].List[0].OverviewArticleTitle,
+      IsShowOverviewArticle: res.Data.List[0].List && res.Data.List[0].List[0].IsShowOverviewArticle,
+    };
+  }
+}
+//获取模版
+async function getNoTacticsfirst() {
+  const res = await raiInterface.reportSereportSelectiondDetailTemplate();
+  if (res.Ret === 200) {
+    industryList.value = res.Data.List;
+    chartPermissionId.value = res.Data.List[0].ChartPermissionId;
+  }
+}
+//点击产业的事件
+function industryBtn(item, index) {
+  if (index !== industryIndex.value) {
+    industryIndex.value = index;
+    chartPermissionId.value = item.ChartPermissionId;
+    ificationIndustrial.value = 0;
+  }
+}
+//标的的点击事件 处理
+function ificationIndustrialBtn(item, index) {
+  if (index !== ificationIndustrial.value) {
+    ificationIndustrial.value = index;
+    industrialSubjectName.value = item.IndustrialManagementName || "";
+    overviewList.value = {
+      ArticleId: item.OverviewArticleId,
+      Title: item.OverviewArticleTitle,
+      IsShowOverviewArticle: item.IsShowOverviewArticle,
+    };
+  }
+}
+//编辑标的
+function editText(item, index) {
+  dialogText.value = "编辑";
+  chartPermissionId.value = item.ChartPermissionId;
+  stateValue.value = item.IndustrialSubjectName;
+  addDialogVisible.value = true;
+  editNum.value = index;
+}
+//删除标的
+function deleteClassify(item, index) {
+  ElMessageBox.confirm("确定要删除该标的吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      industryList[industryIndex.value].value.List.splice(index, 1);
+      ificationIndustrial.value = 0;
+      ElMessage({
+        type: "success",
+        message: "删除成功!",
+      });
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: "已取消删除",
+      });
+    });
+}
+//添加产业
+function addMulti() {
+  dialogText.value = "添加标的";
+  addDialogVisible.value = true;
+}
+//弹框的取消事件
+function handleClose() {
+  stateValue.value = "";
+  addDialogVisible.value = false;
+}
+//弹框的确认事件
+async function confirmPerson() {
+  if (stateValue.value) {
+    const arr = subjectList.value.find((item) => item.SubjectName === stateValue.value);
+    if (!arr) {
+      ElMessage.error("输入正确的标的");
+      return;
+    }
+    let overviewList = {};
+    const res = await raiInterface.getReportSelectionArticle({
+      IndustrialSubjectId: arr.IndustrialSubjectId,
+    });
+    if (res.Ret === 200) {
+      overviewList = res.Data;
+    }
+    industryList.value.forEach((item) => {
+      if (item.ChartPermissionId == chartPermissionId.value) {
+        if (item.List.length > 0) {
+          var isNext = item.List.some((item) => item.IndustrialSubjectName == arr.SubjectName);
+        }
+        if (isNext) return ElMessage.error("标的重复！");
+        item.List.push({
+          Body: "",
+          ChartPermissionId: chartPermissionId.value,
+          IndustrialManagementId: arr.IndustrialManagementId + "",
+          IndustrialManagementName: arr.IndustryName,
+          IndustrialSubjectId: arr.IndustrialSubjectId + "",
+          IndustrialSubjectName: arr.SubjectName,
+          CompanyLabel: [{ name: "", value: item.List.length + 1 }],
+          OverviewArticleId: overviewList.ArticleId,
+          OverviewArticleTitle: overviewList.Title,
+          IsShowOverviewArticle: overviewList.IsShowOverviewArticle,
+        });
+      }
+    });
+  }
+  stateValue.value = "";
+  addDialogVisible.value = false;
+}
+async function editconfirmPerson() {
+  if (stateValue.value) {
+    const arr = subjectList.value.find((item) => item.SubjectName === stateValue.value);
+    if (!arr) {
+      ElMessage.error("输入正确的标的");
+      return;
+    }
+    let overviewList = {};
+    const res = await raiInterface.getReportSelectionArticle({
+      IndustrialSubjectId: arr.IndustrialSubjectId,
+    });
+    if (res.Ret === 200) {
+      overviewList = res.Data;
+    }
+    industryList.value.forEach((item) => {
+      if (item.ChartPermissionId == chartPermissionId.value) {
+        if (item.List.length > 0) {
+          var isNext = item.List.some((item) => item.IndustrialSubjectName == arr.SubjectName);
+        }
+        if (isNext) return ElMessage.error("标的重复！");
+        const obj = {
+          Body: twoRich.value || "",
+          ChartPermissionId: chartPermissionId.value,
+          IndustrialManagementId: arr.IndustrialManagementId + "",
+          IndustrialManagementName: arr.IndustryName,
+          IndustrialSubjectId: arr.IndustrialSubjectId + "",
+          IndustrialSubjectName: arr.SubjectName,
+          CompanyLabel: item.List[editNum.value].CompanyLabel && item.List[editNum.value].CompanyLabel.length > 0 ? item.List[editNum.value].CompanyLabel : [{ name: "", value: item.List.length + 1 }],
+          OverviewArticleId: overviewList.ArticleId,
+          OverviewArticleTitle: overviewList.Title,
+          IsShowOverviewArticle: overviewList.IsShowOverviewArticle,
+        };
+        item.List.splice(editNum.value, 1, obj);
+      }
+    });
+  }
+  stateValue.value = "";
+  addDialogVisible.value = false;
+}
+// 申请内容搜索
+async function handleSearchResult(data, cb) {
+  if (data) {
+    cb([]);
+    let res = await raiInterface.industrialSubjectSearch({ KeyWord: data, ChartPermissionId: chartPermissionId.value });
+    if (res.Ret === 200) {
+      if (res.Data.List && res.Data.List.length > 0) {
+        let arr = res.Data.List.map((item) => {
+          return { value: item.SubjectName, ...item };
+        });
+        subjectList.value = arr;
+        cb(arr);
+      }
+    }
+  }
+}
+//保存 发布
+const confirm = _.debounce(function (type) {
+  ruleFormRef.value.validate(async (val) => {
+    if (val) {
+      let isText = [];
+      industryList.value.forEach((item) => {
+        item.List.forEach((key) => {
+          key.CompanyLabel && key.CompanyLabel.length > 0 && isText.push(key.CompanyLabel.some((val) => val.name));
+        });
+      });
+      if (isText && isText.includes(false)) {
+        return ElMessage.error("请输入公司标签");
+      }
+      let params = dataHandle(type);
+      if (type == "预览") {
+        sessionStorage.setItem("choicenessPre", JSON.stringify(params));
+        let { href } = router.resolve({ name: "预览报告精选" });
+        window.open(href, "_blank");
+      } else {
+        const res = await raiInterface.industrialSubjectPreserveAndPublish(params);
+        if (res.Ret === 200) {
+          clearInterval(timeInterval.value);
+          sessionStorage.removeItem("addChoicenessQY");
+          thElMessage.success("操作成功!");
+          init();
+          router.back();
+        }
+      }
+    }
+  });
+}, 500);
+//取消
+function cancel() {
+  clearInterval(timeInterval.value);
+  sessionStorage.removeItem("addChoicenessQY");
+  ruleFormRef.value.resetFields();
+  router.back();
+}
+async function getListPeriods() {
+  const res = await raiInterface.industrialSubjectListPeriods();
+  if (res.Ret === 200) {
+    updateModeList.value = res.Data.List || [];
+  }
+}
+function init() {
+  ruleForm.value = {
+    title: "", //标题
+    author: "", //作者
+    time: "", //时间
+    explain: "", //说明
+    reportLink: "", //变更
+  };
+  ruleFormRef.value.resetFields();
+  marketStrategy.value = "";
+}
+// 标的下添加公司标签
+function addLabelClick(item) {
+  item.CompanyLabel.push({ name: "", value: item.CompanyLabel.length + 1 });
+}
+// 处理保存的数据
+function dataHandle(type) {
+  let industryList = _.cloneDeep(industryList.value);
+  const arr = [];
+  let ListChartSummary = [];
+  industryList.forEach((item) => {
+    item.List.forEach((key) => {
+      key.CompanyLabel && (key.CompanyLabel = key.CompanyLabel.map((val) => val.name));
+      arr.push(key);
+    });
+    ListChartSummary.push({
+      ChartPermissionId: item.ChartPermissionId,
+      BodyChartSummary: item.BodyChartSummary,
+      ChartPermissionName: item.ChartPermissionName,
+      ListSubject: [...item.List],
+    });
+  });
+  if (marketStrategy.value == "") {
+    ElMessage.error("市场策略核心逻辑汇总不能为空");
+  }
+  let params = {
+    AddType: updateMode.value == "重新编辑" ? "1" : "2",
+    ArticleId: route.query.id ? Number(route.query.id) : 0,
+    Department: ruleForm.value.author,
+    Title: ruleForm.value.title,
+    DoType: type == "发布" ? 1 : 0,
+    MarketStrategy: marketStrategy.value,
+    InheritPeriods: inheritNum.value,
+    List: arr,
+    ProductDescription: ruleForm.value.explain,
+    PublishDate: ruleForm.value.time,
+    ReportLink: ruleForm.value.reportLink,
+    ListChartSummary,
+  };
+  return params;
+}
+function deleteLabelItem(item, index) {
+  item.CompanyLabel.splice(index, 1);
+}
+function switchChangeHandler(e) {
+  industryList.value.forEach((_) => {
+    _.List.forEach((item) => {
+      if (item.OverviewArticleId === overviewList.value.ArticleId) {
+        item.IsShowOverviewArticle = e;
+      }
+    });
+  });
+}
+// 拖拽排序更新
+function sortChange({ oldIndex, newIndex }) {
+  industryIndex.value = sortChangeFun(industryIndex.value, oldIndex, newIndex);
+}
+//标的拖拽排序更新
+function ificationSortChange({ oldIndex, newIndex }) {
+  ificationIndustrial.value = sortChangeFun(ificationIndustrial.value, oldIndex, newIndex);
+}
+// 排序更新后的逻辑
+function sortChangeFun(currentIndex, oldIndex, newIndex) {
+  let bigger, smaller;
+  if (oldIndex > newIndex) {
+    bigger = oldIndex;
+    smaller = newIndex;
+  } else {
+    bigger = newIndex;
+    smaller = oldIndex;
+  }
+  // 当前算中tab的排序 小于较小的 大于较大的 则不用做变动
+  if (currentIndex < smaller || currentIndex > bigger) return currentIndex;
+  // 移动的是当前选中的
+  if (currentIndex == oldIndex) return newIndex;
+  if (oldIndex > newIndex) {
+    // 向左移 加加
+    currentIndex++;
+  } else if (oldIndex < newIndex) {
+    // 向右移 减减
+    currentIndex--;
+  }
+  return currentIndex;
+}
+function onMove(e) {
+  // 返回false表示不允许停靠
+  return !!e.relatedContext.element;
+}
+
+onMounted(() => {
+  console.log(route);
+  if (route.query.id) {
+    isShowStatus.value = route.query.status == 0;
+    getDetail();
+  } else {
+    getNoTacticsfirst();
+    dataInit();
+  }
+  getListPeriods();
+});
+// 离开时清理定时器
+onBeforeRouteLeave((to, from, next) => {
+  clearInterval(timeInterval.value);
+  next();
+});
+</script>
+
 <template>
   <!-- 报告精选添加/编辑 -->
   <div class="add-choiceness">
@@ -17,7 +489,7 @@
         </el-col>
       </el-row>
       <div v-show="updateMode">
-        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
+        <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" class="demo-ruleForm">
           <!-- 标题 / 作者 /发布时间 -->
           <el-row :gutter="24" style="margin-top: 30px">
             <el-col :span="12">
@@ -51,7 +523,7 @@
           </el-form-item>
         </el-form>
         <!-- 产业/标的 模块 -->
-        <div class="content-module">
+        <div class="content-module" v-if="industryList.length">
           <draggable v-model="industryList" animation="300" @update="sortChange">
             <div class="content-industry" v-for="(item, index) in industryList" :key="item.ChartPermissionId">
               <div class="content-name" :class="industryIndex == index ? 'active' : ''" @click="industryBtn(item, index)">{{ item.ChartPermissionName }}</div>
@@ -60,7 +532,7 @@
           <div v-for="(item, index) in industryList" :key="item.ChartPermissionId">
             <div v-show="industryIndex == index">
               <RichText v-model="item.BodyChartSummary" :ref="'logic' + index" :spareId="'logictest' + index" :isText="contentTextLogic" />
-              <draggable :list="item.List" animation="300" class="classification" filter=".addIndustrial" :move="onMove" @update="ificationSortChange">
+              <!-- <draggable :list="item.List" animation="300" class="classification" filter=".addIndustrial" :move="onMove" @update="ificationSortChange"> -->
                 <div v-for="(val, num) in item.List" :key="val.IndustrialSubjectId" class="industrial" @click="ificationIndustrialBtn(val, num)" :class="num == ificationIndustrial ? 'pitch' : ''">
                   <span style="margin-right: 19px">{{ val.IndustrialSubjectName }}</span>
                   <span v-if="num == ificationIndustrial">
@@ -72,9 +544,9 @@
                   <i class="el-icon-plus"></i>
                   <span>添加标的</span>
                 </div>
-              </draggable>
-              <template v-for="(val, num) in item.List">
-                <div :key="val.IndustrialSubjectId" v-show="industryIndex == index">
+              <!-- </draggable> -->
+              <template v-for="(val, num) in item.List" :key="val.IndustrialSubjectId">
+                <div v-show="industryIndex == index">
                   <div class="industrial-is-new" v-show="num == ificationIndustrial">
                     <el-checkbox v-model="val.IsNew" :true-label="1" :false-label="0">显示new标签</el-checkbox>
                   </div>
@@ -117,493 +589,27 @@
       </div>
     </el-card>
     <!-- 弹框部分 -->
-    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center :visible.sync="addDialogVisible" width="560px" :before-close="handleClose">
-      <div slot="title" style="display: flex; align-items: center">
-        <img :src="dialogText == '编辑' ? $icons.editicon : $icons.add" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
-        <span style="font-size: 16px">{{ dialogText }}</span>
-      </div>
+    <el-dialog v-dialogDrag :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" />
+          <span style="font-size: 16px">{{ dialogText }}</span>
+        </div>
+      </template>
       <div class="dlg-content">
         <el-autocomplete class="inline-input" v-model="stateValue" :trigger-on-focus="false" :fetch-suggestions="handleSearchResult" placeholder="请输入标的名称" clearable></el-autocomplete>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button v-if="dialogText == '编辑'" type="primary" @click="editconfirmPerson">确定</el-button>
-        <el-button v-else type="primary" @click="confirmPerson">确定</el-button>
-        <el-button @click="handleClose">取消</el-button>
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button v-if="dialogText == '编辑'" type="primary" @click="editconfirmPerson">确定</el-button>
+          <el-button v-else type="primary" @click="confirmPerson">确定</el-button>
+          <el-button @click="handleClose">取消</el-button>
+        </span>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
-import RichText from "./richText.vue";
-import { raiInterface } from "@/api/api.js";
-import draggable from "vuedraggable";
-import TemplateMessage from "./apply/templateMessage.vue";
-
-export default {
-  name: "",
-  components: { RichText, draggable, TemplateMessage },
-  props: {},
-  data() {
-    return {
-      contentValue: "one",
-      contentText: "市场策略核心逻辑汇总",
-      contentValueTwo: "two",
-      contentTextTwo: "公司核心逻辑汇总",
-      contentTextLogic: "行业核心逻辑汇总",
-      updateMode: "", //更新方式
-      inheritNum: "", //继承第几
-      ruleForm: {
-        title: "", //标题
-        author: "", //作者
-        time: "", //时间
-        explain: "", //说明
-        reportLink: "", //变更
-      },
-      rules: {
-        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
-      },
-      industryList: [], //行业
-      industryIndex: 0, //
-      ificationIndustrial: 0,
-      addDialogVisible: false,
-      dialogText: "",
-      stateValue: "",
-      companyList: [],
-      timeout: null,
-      isShowStatus: true,
-      industrialSubjectName: "",
-      chartPermissionId: "", //分类id
-      subjectList: [],
-      updateModeList: [], //期数的数组
-      editNum: "",
-      overviewList: {},
-      marketStrategy: "",
-      timeInterval: null, // 定时器
-    };
-  },
-  computed: {},
-  mounted() {
-    if (this.$route.query.id) {
-      this.isShowStatus = this.$route.query.status == 0;
-      this.getDetail();
-    } else {
-      this.getNoTacticsfirst();
-      this.dataInit();
-    }
-    this.getListPeriods();
-  },
-  methods: {
-    // 报告的缓存处理数据
-    dataInit() {
-      if (sessionStorage.getItem("addChoicenessQY")) {
-        let data = JSON.parse(sessionStorage.getItem("addChoicenessQY"));
-        setTimeout(async () => {
-          this.industryList = data.industryList;
-          this.industryIndex = data.industryIndex;
-          this.ificationIndustrial = data.ificationIndustrial;
-          this.updateMode = data.updateMode;
-          this.inheritNum = data.inheritNum;
-          this.companyList = data.companyList;
-          this.industrialSubjectName = data.industrialSubjectName;
-          this.chartPermissionId = data.chartPermissionId;
-          this.subjectList = data.subjectList;
-          this.updateModeList = data.updateModeList;
-          this.editNum = data.editNum;
-          this.overviewList = data.overviewList;
-          this.ruleForm = data.ruleForm;
-          this.marketStrategy = data.MarketStrategy;
-        }, 200);
-      }
-      this.timeInterval = setInterval(() => {
-        let params = {
-          industryList: this.industryList,
-          industryIndex: this.industryIndex,
-          ificationIndustrial: this.ificationIndustrial,
-          updateMode: this.updateMode,
-          inheritNum: this.inheritNum,
-          companyList: this.companyList,
-          industrialSubjectName: this.industrialSubjectName,
-          chartPermissionId: this.chartPermissionId,
-          subjectList: this.subjectList,
-          updateModeList: this.updateModeList,
-          editNum: this.editNum,
-          overviewList: this.overviewList,
-          ruleForm: this.ruleForm,
-          MarketStrategy: this.marketStrategy,
-        };
-        sessionStorage.setItem("addChoicenessQY", JSON.stringify(params));
-      }, 120000);
-    },
-    updateModeChange() {
-      if (this.updateMode == "重新编辑") {
-        this.init();
-        this.industryList = [];
-        this.getNoTacticsfirst();
-      }
-    },
-    //获取编辑详情
-    async getDetail() {
-      const res = await raiInterface.reportSelectionDetail({ ArticleId: this.$route.query.id || "", Periods: this.inheritNum || "" });
-      if (res.Ret === 200) {
-        res.Data.List.forEach((item) => {
-          if (!item.List || !item.List.length > 0) {
-            item.List = [];
-          }
-        });
-        this.updateMode = this.inheritNum ? this.updateMode : res.Data.AddType == "1" ? "重新编辑" : "继承往期";
-        this.ruleForm = {
-          title: res.Data.Title, //标题
-          author: res.Data.Department, //作者
-          time: res.Data.PublishDate, //时间
-          explain: res.Data.ProductDescription, //说明
-          reportLink: res.Data.ReportLink, //变更
-        };
-        this.marketStrategy = res.Data.MarketStrategy;
-        this.inheritNum = this.inheritNum ? this.inheritNum : res.Data.InheritPeriods;
-        this.industryList = res.Data.List;
-        setTimeout(() => {
-          res.Data.List.forEach((item, index) => {
-            item.List.forEach((key, i) => {
-              key.CompanyLabel = key.CompanyLabel
-                ? key.CompanyLabel.map((val, i) => {
-                    let obj = {
-                      name: val,
-                      value: i + 1,
-                    };
-                    return obj;
-                  })
-                : [
-                    {
-                      name: "",
-                      value: 1,
-                    },
-                  ];
-            });
-          });
-        }, 300);
-        this.chartPermissionId = res.Data.List[0].ChartPermissionId;
-        this.industrialSubjectName = res.Data.List[0].List ? res.Data.List[0].List[0].IndustrialManagementName : "";
-        this.overviewList = {
-          ArticleId: res.Data.List[0].List && res.Data.List[0].List[0].OverviewArticleId,
-          Title: res.Data.List[0].List && res.Data.List[0].List[0].OverviewArticleTitle,
-          IsShowOverviewArticle: res.Data.List[0].List && res.Data.List[0].List[0].IsShowOverviewArticle,
-        };
-      }
-    },
-    //获取模版
-    async getNoTacticsfirst() {
-      const res = await raiInterface.reportSereportSelectiondDetailTemplate();
-      if (res.Ret === 200) {
-        this.industryList = res.Data.List;
-        this.chartPermissionId = res.Data.List[0].ChartPermissionId;
-      }
-    },
-    //点击产业的事件
-    industryBtn(item, index) {
-      if (index !== this.industryIndex) {
-        this.industryIndex = index;
-        this.chartPermissionId = item.ChartPermissionId;
-        this.ificationIndustrial = 0;
-      }
-    },
-    //标的的点击事件 处理
-    ificationIndustrialBtn(item, index) {
-      if (index !== this.ificationIndustrial) {
-        this.ificationIndustrial = index;
-        this.industrialSubjectName = item.IndustrialManagementName || "";
-        this.overviewList = {
-          ArticleId: item.OverviewArticleId,
-          Title: item.OverviewArticleTitle,
-          IsShowOverviewArticle: item.IsShowOverviewArticle,
-        };
-      }
-    },
-    //编辑标的
-    editText(item, index) {
-      this.dialogText = "编辑";
-      this.chartPermissionId = item.ChartPermissionId;
-      this.stateValue = item.IndustrialSubjectName;
-      this.addDialogVisible = true;
-      this.editNum = index;
-    },
-    //删除标的
-    deleteClassify(item, index) {
-      this.$confirm("确定要删除该标的吗？", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          this.industryList[this.industryIndex].List.splice(index, 1);
-          this.ificationIndustrial = 0;
-          this.$message({
-            type: "success",
-            message: "删除成功!",
-          });
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消删除",
-          });
-        });
-    },
-    //添加产业
-    addMulti() {
-      this.dialogText = "添加标的";
-      this.addDialogVisible = true;
-    },
-    //弹框的取消事件
-    handleClose() {
-      this.stateValue = "";
-      this.addDialogVisible = false;
-    },
-    //弹框的确认事件
-    async confirmPerson() {
-      if (this.stateValue) {
-        const arr = this.subjectList.find((item) => item.SubjectName === this.stateValue);
-        if (!arr) {
-          this.$message.error("输入正确的标的");
-          return;
-        }
-        let overviewList = {};
-        const res = await raiInterface.getReportSelectionArticle({
-          IndustrialSubjectId: arr.IndustrialSubjectId,
-        });
-        if (res.Ret === 200) {
-          overviewList = res.Data;
-        }
-        this.industryList.forEach((item) => {
-          if (item.ChartPermissionId == this.chartPermissionId) {
-            if (item.List.length > 0) {
-              var isNext = item.List.some((item) => item.IndustrialSubjectName == arr.SubjectName);
-            }
-            if (isNext) return this.$message.error("标的重复！");
-            item.List.push({
-              Body: "",
-              ChartPermissionId: this.chartPermissionId,
-              IndustrialManagementId: arr.IndustrialManagementId + "",
-              IndustrialManagementName: arr.IndustryName,
-              IndustrialSubjectId: arr.IndustrialSubjectId + "",
-              IndustrialSubjectName: arr.SubjectName,
-              CompanyLabel: [{ name: "", value: item.List.length + 1 }],
-              OverviewArticleId: overviewList.ArticleId,
-              OverviewArticleTitle: overviewList.Title,
-              IsShowOverviewArticle: overviewList.IsShowOverviewArticle,
-            });
-          }
-        });
-      }
-      this.stateValue = "";
-      this.addDialogVisible = false;
-    },
-    async editconfirmPerson() {
-      if (this.stateValue) {
-        const arr = this.subjectList.find((item) => item.SubjectName === this.stateValue);
-        if (!arr) {
-          this.$message.error("输入正确的标的");
-          return;
-        }
-        let overviewList = {};
-        const res = await raiInterface.getReportSelectionArticle({
-          IndustrialSubjectId: arr.IndustrialSubjectId,
-        });
-        if (res.Ret === 200) {
-          overviewList = res.Data;
-        }
-        this.industryList.forEach((item) => {
-          if (item.ChartPermissionId == this.chartPermissionId) {
-            if (item.List.length > 0) {
-              var isNext = item.List.some((item) => item.IndustrialSubjectName == arr.SubjectName);
-            }
-            if (isNext) return this.$message.error("标的重复！");
-            const obj = {
-              Body: this.$refs.twoRich.value || "",
-              ChartPermissionId: this.chartPermissionId,
-              IndustrialManagementId: arr.IndustrialManagementId + "",
-              IndustrialManagementName: arr.IndustryName,
-              IndustrialSubjectId: arr.IndustrialSubjectId + "",
-              IndustrialSubjectName: arr.SubjectName,
-              CompanyLabel:
-                item.List[this.editNum].CompanyLabel && item.List[this.editNum].CompanyLabel.length > 0 ? item.List[this.editNum].CompanyLabel : [{ name: "", value: item.List.length + 1 }],
-              OverviewArticleId: overviewList.ArticleId,
-              OverviewArticleTitle: overviewList.Title,
-              IsShowOverviewArticle: overviewList.IsShowOverviewArticle,
-            };
-            item.List.splice(this.editNum, 1, obj);
-          }
-        });
-      }
-      this.stateValue = "";
-      this.addDialogVisible = false;
-    },
-    // 申请内容搜索
-    async handleSearchResult(data, cb) {
-      if (data) {
-        cb([]);
-        let res = await raiInterface.industrialSubjectSearch({ KeyWord: data, ChartPermissionId: this.chartPermissionId });
-        if (res.Ret === 200) {
-          if (res.Data.List && res.Data.List.length > 0) {
-            let arr = res.Data.List.map((item) => {
-              return { value: item.SubjectName, ...item };
-            });
-            this.subjectList = arr;
-            cb(arr);
-          }
-        }
-      }
-    },
-    //保存 发布
-    confirm: _.debounce(function (type) {
-      this.$refs.ruleForm.validate(async (val) => {
-        if (val) {
-          let isText = [];
-          this.industryList.forEach((item) => {
-            item.List.forEach((key) => {
-              key.CompanyLabel && key.CompanyLabel.length > 0 && isText.push(key.CompanyLabel.some((val) => val.name));
-            });
-          });
-          if (isText && isText.includes(false)) {
-            return this.$message.error("请输入公司标签");
-          }
-          let params = this.dataHandle(type);
-          if (type == "预览") {
-            sessionStorage.setItem("choicenessPre", JSON.stringify(params));
-            let { href } = this.$router.resolve({ name: "预览报告精选" });
-            window.open(href, "_blank");
-          } else {
-            const res = await raiInterface.industrialSubjectPreserveAndPublish(params);
-            if (res.Ret === 200) {
-              clearInterval(this.timeInterval);
-              sessionStorage.removeItem("addChoicenessQY");
-              this.$message.success("操作成功!");
-              this.init();
-              this.$router.back();
-            }
-          }
-        }
-      });
-    }, 500),
-    //取消
-    cancel() {
-      clearInterval(this.timeInterval);
-      sessionStorage.removeItem("addChoicenessQY");
-      this.$refs["ruleForm"].resetFields();
-      this.$router.back();
-    },
-    async getListPeriods() {
-      const res = await raiInterface.industrialSubjectListPeriods();
-      if (res.Ret === 200) {
-        this.updateModeList = res.Data.List || [];
-      }
-    },
-    init() {
-      this.ruleForm = {
-        title: "", //标题
-        author: "", //作者
-        time: "", //时间
-        explain: "", //说明
-        reportLink: "", //变更
-      };
-      this.$refs["ruleForm"].resetFields();
-      this.marketStrategy = "";
-    },
-    // 标的下添加公司标签
-    addLabelClick(item) {
-      item.CompanyLabel.push({ name: "", value: item.CompanyLabel.length + 1 });
-    },
-    // 处理保存的数据
-    dataHandle(type) {
-      let industryList = _.cloneDeep(this.industryList);
-      const arr = [];
-      let ListChartSummary = [];
-      industryList.forEach((item) => {
-        item.List.forEach((key) => {
-          key.CompanyLabel && (key.CompanyLabel = key.CompanyLabel.map((val) => val.name));
-          arr.push(key);
-        });
-        ListChartSummary.push({
-          ChartPermissionId: item.ChartPermissionId,
-          BodyChartSummary: item.BodyChartSummary,
-          ChartPermissionName: item.ChartPermissionName,
-          ListSubject: [...item.List],
-        });
-      });
-      if (this.marketStrategy == "") {
-        this.$message.error("市场策略核心逻辑汇总不能为空");
-      }
-      let params = {
-        AddType: this.updateMode == "重新编辑" ? "1" : "2",
-        ArticleId: this.$route.query.id ? Number(this.$route.query.id) : 0,
-        Department: this.ruleForm.author,
-        Title: this.ruleForm.title,
-        DoType: type == "发布" ? 1 : 0,
-        MarketStrategy: this.marketStrategy,
-        InheritPeriods: this.inheritNum,
-        List: arr,
-        ProductDescription: this.ruleForm.explain,
-        PublishDate: this.ruleForm.time,
-        ReportLink: this.ruleForm.reportLink,
-        ListChartSummary,
-      };
-      return params;
-    },
-    deleteLabelItem(item, index) {
-      item.CompanyLabel.splice(index, 1);
-    },
-    switchChangeHandler(e) {
-      this.industryList.forEach((_) => {
-        _.List.forEach((item) => {
-          if (item.OverviewArticleId === this.overviewList.ArticleId) {
-            item.IsShowOverviewArticle = e;
-          }
-        });
-      });
-    },
-    // 拖拽排序更新
-    sortChange({ oldIndex, newIndex }) {
-      this.industryIndex = this.sortChangeFun(this.industryIndex, oldIndex, newIndex);
-    },
-    //标的拖拽排序更新
-    ificationSortChange({ oldIndex, newIndex }) {
-      this.ificationIndustrial = this.sortChangeFun(this.ificationIndustrial, oldIndex, newIndex);
-    },
-    // 排序更新后的逻辑
-    sortChangeFun(currentIndex, oldIndex, newIndex) {
-      let bigger, smaller;
-      if (oldIndex > newIndex) {
-        bigger = oldIndex;
-        smaller = newIndex;
-      } else {
-        bigger = newIndex;
-        smaller = oldIndex;
-      }
-      // 当前算中tab的排序 小于较小的 大于较大的 则不用做变动
-      if (currentIndex < smaller || currentIndex > bigger) return currentIndex;
-      // 移动的是当前选中的
-      if (currentIndex == oldIndex) return newIndex;
-      if (oldIndex > newIndex) {
-        // 向左移 加加
-        currentIndex++;
-      } else if (oldIndex < newIndex) {
-        // 向右移 减减
-        currentIndex--;
-      }
-      return currentIndex;
-    },
-    onMove(e) {
-      // 返回false表示不允许停靠
-      return !!e.relatedContext.element;
-    },
-  },
-  // 路由离开了 清除定时器
-  beforeRouteLeave(to, from, next) {
-    clearInterval(this.timeInterval);
-    next();
-  },
-};
-</script>
 <style lang="scss">
 .add-choiceness {
   .el-date-editor.el-input,

src/views/rai_manage/components/addLabelDialog.vue

@@ -126,7 +126,7 @@ export default {
   }
 }
 </script>
-<style  lang="less">
+<style  lang="scss">
 .container-addLabel {
  .custom-addLabel {
     width: 600px;  

src/views/rai_manage/components/addMorningMeeting.vue

@@ -1,3 +1,286 @@
+<script setup>
+import { ref, computed, onMounted, reactive, toRefs, watch } from "vue";
+import { Calendar, Search, InfoFilled } from "@element-plus/icons-vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+
+import { raiInterface } from "@/api/api.js";
+import _ from "lodash";
+import moment from "moment";
+
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  meettingDate: "",
+  meetingId: 0,
+  froalaConfig: {
+    key: "BWC6D-16D3B2F3C2H1A6A7wdwgacxuB-33c1fB2twtfG3A7A6B6A3B3B2G3D2H2==",
+    toolbarButtons: ["bold", "italic", "underline", "strikeThrough", "insertHR", "fontSize", "align", "undo", "redo"],
+    height: 260,
+    fontSizeDefaultSelection: "16",
+    quickInsertEnabled: false,
+    theme: "dark", //主题
+    placeholderText: "请输入晨会内容",
+    language: "zh_cn",
+    events: {
+      initialized: function () {
+        this.toolbar.hide();
+      },
+    },
+  },
+  sectionData: [
+    {
+      isJumpNot: false, //是否跳转
+      reportLink: "", //报告链接
+      headTitle: "", //报告标题
+      content: "", //晨会内容
+      industry: {
+        ChartPermissionId: "",
+        PermissionName: "",
+      }, //行业
+      property: "", //行业
+      subject: "", //标的
+    },
+  ],
+  industryData: [],
+  allPropertyData: [], //总的产业数据
+  PropertyData: [], //单个行业下的产业数据
+  subjectData: [],
+  isGoBack: true, //点击底部按钮时,是否进行页面跳转
+  isPublishShow: false, //是否显示发布按钮
+  dataLoading: false,
+});
+
+//添加段落
+function addSection() {
+  const section = {
+    content: "",
+    industry: "",
+    industryVal: "",
+    property: "",
+    subject: "",
+    isJumpNot: false, //是否跳转
+    reportLink: "", //报告链接
+    headTitle: "", //报告标题
+  };
+  pageState.sectionData.push(section);
+}
+//删除段落
+function deleteSection(index) {
+  pageState.sectionData.splice(index, 1);
+}
+//获取行业数据
+async function getIndustryData() {
+  const res = await raiInterface.chartPermissionFirstHaveIco();
+  if (res.Ret !== 200) return;
+  pageState.industryData = res.Data.List || [];
+}
+//根据行业获取产业数据
+function getPropertyData(industry) {
+  const industryId = industry.ChartPermissionId;
+  if (!industryId) return [];
+  let propertyData = [];
+  pageState.allPropertyData.forEach((item) => {
+    if (item.ChartPermissionId === industryId) {
+      propertyData = item.List || [];
+    }
+  });
+  return propertyData;
+}
+//根据产业获取标的数据
+async function getSubjectData(property) {
+  const propertyId = property.ChartPermissionId;
+  if (!propertyId) {
+    pageState.subjectData = [];
+    return;
+  }
+  const res = await raiInterface.getindustrialSubjectlistIds({ IndustrialManagementIdStr: propertyId });
+  if (res.Ret !== 200) return;
+  pageState.subjectData = res.Data.List || [];
+}
+//获取全部产业数据
+async function getAllPropertyData() {
+  const res = await raiInterface.getListIndustrial();
+  if (res.Ret !== 200) return;
+  pageState.allPropertyData = res.Data.List || [];
+}
+//行业 产业 选择框改变时触发
+function handleSelectChange(data, index, prop) {
+  if (prop === "industry") {
+    let value = pageState.industryData.find((item) => item.ChartPermissionId === data.industryVal);
+    data.industry = {
+      ChartPermissionId: value.ChartPermissionId || "",
+      PermissionName: value.PermissionName || "",
+    };
+    data.property = "";
+    data.subject = [];
+  }
+  if (prop === "property") {
+    data.subject = [];
+  }
+  pageState.sectionData.splice(index, 1, data);
+}
+//晨会详情
+async function getMeetingDetail(id) {
+  //获取晨会详情
+  const res = await raiInterface.getMorningMeetingDetail({
+    MeetingId: pageState.meetingId || id,
+  });
+  if (res.Ret !== 200) return;
+  //处理数据
+  const data = res.Data.List || [];
+  pageState.meettingDate = res.Data.MeetingTime;
+  pageState.isPublishShow = res.Data.Status === 1 ? false : true;
+  pageState.sectionData = data.map((item) => {
+    let temp = {
+      id: item.Id,
+      content: item.content,
+      industry: { ChartPermissionId: item.chartPermissionId, PermissionName: item.chartPermissionName },
+      property: { ChartPermissionId: item.industryId, PermissionName: item.industryName },
+      reportLink: item.reportLink,
+      headTitle: item.title,
+      isJumpNot: item.reportLink ? true : false,
+    };
+    let subject = [];
+    let industrialSubjectList = item.industrialSubjectList || [];
+    industrialSubjectList.map((i) => {
+      subject.push(i.IndustrialSubjectId);
+    });
+    temp.subject = subject;
+    getSubjectData(temp.property);
+    return temp;
+  });
+  pageState.dataLoading = false;
+}
+//保存 发布 取消 操作
+const comfirm = _.debounce(async function (type) {
+  if (type === "cancel") {
+    $router.back();
+    return;
+  }
+  if (!checkContent()) return;
+  if (type === "pub") {
+    pubMeeting();
+  }
+  if (type === "save") {
+    pageState.meetingId && editMeeting();
+    !pageState.meetingId && addMeeting();
+  }
+  /* if(type==="cancel"){} */
+
+  pageState.isGoBack && $router.back();
+}, 500);
+async function pubMeeting() {
+  const list = getSectionData();
+  const res = await raiInterface.publishMorningMeeting({
+    MeetingId: Number(pageState.meetingId),
+    MeetingTime: pageState.meettingDate,
+    List: list,
+  });
+  if (res.Ret !== 200) {
+    pageState.isGoBack = false;
+    return;
+  }
+  ElMessage.success("发布成功");
+}
+async function addMeeting() {
+  const list = getSectionData();
+  const res = await raiInterface.editMorningMeeting({
+    MeetingId: 0,
+    MeetingTime: pageState.meettingDate,
+    List: list,
+  });
+  if (res.Ret !== 200) {
+    pageState.isGoBack = false;
+    return;
+  }
+  await getMeetingDetail(res.Data);
+  pageState.meetingId = res.Data;
+  ElMessage.success("添加成功");
+}
+async function editMeeting() {
+  const list = pageState.getSectionData();
+  const res = await raiInterface.editMorningMeeting({
+    MeetingId: Number(pageState.meetingId),
+    MeetingTime: pageState.meettingDate,
+    List: list,
+  });
+  if (res.Ret !== 200) {
+    pageState.isGoBack = false;
+    return;
+  }
+  ElMessage.success("保存成功");
+}
+//转换页面段落的内容为接口的格式
+function getSectionData() {
+  //item.content做处理，把<p data-f-id=\"pbf\"....></p>替换成''
+  pageState.sectionData = pageState.sectionData.map((item) => {
+    item.content = item.content.replace(/<p data-f-id=\"pbf\".*?<\/p>/g, "");
+    return item;
+  });
+  let list = [];
+  pageState.sectionData.forEach((item) => {
+    let temp = {
+      ChapterId: item.id || 0,
+      Content: item.content,
+      ChartPermissionId: item.industry.ChartPermissionId,
+      ChartPermissionName: item.industry.PermissionName,
+      IndustryId: item.property.ChartPermissionId,
+      IndustryName: item.property.PermissionName,
+      IndustrialSubjectIds: item.subject.join(),
+      ReportLink: item.reportLink,
+      Title: item.headTitle,
+    };
+    list.push(temp);
+  });
+  return list;
+}
+//检查晨会内容
+function checkContent() {
+  for (let i = 0; i < pageState.sectionData.length; i++) {
+    if (pageState.sectionData[i].isJumpNot && pageState.sectionData[i].reportLink.length === 0) {
+      ElMessage.warning(`请输入段落${i + 1}报告链接`);
+      return false;
+    }
+    if (pageState.sectionData[i].isJumpNot && pageState.sectionData[i].headTitle.length === 0) {
+      ElMessage.warning(`请输入段落${i + 1}报告标题`);
+      return false;
+    }
+    //所有的段落有值
+    if (pageState.sectionData[i].content.length === 0) {
+      ElMessage.warning(`请输入段落${i + 1}的内容`);
+      return false;
+    }
+    //所有的段落 有产业,行业
+    if (!(pageState.sectionData[i].industry instanceof Object)) {
+      ElMessage.warning(`请选择段落${i + 1}的行业`);
+      return false;
+    }
+    if (!(pageState.sectionData[i].property instanceof Object)) {
+      ElMessage.warning(`请选择段落${i + 1}的产业`);
+      return false;
+    }
+  }
+  return true;
+}
+
+onMounted(() => {
+  getIndustryData();
+  getAllPropertyData();
+  if ($route.query.id) {
+    pageState.meetingId = $route.query.id;
+    pageState.dataLoading = true;
+    getMeetingDetail();
+  } else {
+    pageState.meettingDate = moment().format("yyyy-MM-DD");
+    pageState.isPublishShow = true;
+  }
+});
+
+const { meettingDate, meetingId, froalaConfig, sectionData, industryData, allPropertyData, PropertyData, subjectData, isGoBack, isPublishShow, dataLoading } = toRefs(pageState);
+</script>
+
 <template>
   <!-- 添加/编辑 晨会精华 -->
   <div class="add-morning-meeting-wrap" v-loading="dataLoading">
@@ -20,17 +303,12 @@
               </template>
             </div>
             <div class="fr-wrapper">
-              <froala :id="`froala-editor-${index}`" :ref="`froalaEditor${index}`" :tag="'textarea'" :config="froalaConfig" v-model="item.content"></froala>
+              <froala :id="`froala-editor-${index}`" :ref="`froalaEditor${index}`" :tag="'textarea'" :config="froalaConfig" v-model:value="item.content"></froala>
             </div>
           </div>
           <div class="classify-box">
-            <el-select placeholder="请选择行业" v-model="item.industry" value-key="ChartPermissionId" @change="handleSelectChange(item, index, 'industry')">
-              <el-option
-                v-for="industry in industryData"
-                :key="industry.ChartPermissionId"
-                :label="industry.PermissionName"
-                :value="{ ChartPermissionId: industry.ChartPermissionId, PermissionName: industry.PermissionName }"
-              />
+            <el-select placeholder="请选择行业1" v-model="item.industryVal" value-key="ChartPermissionId" @change="handleSelectChange(item, index, 'industry')">
+              <el-option v-for="industry in industryData" :key="industry.ChartPermissionId" :label="industry.PermissionName" :value="industry.ChartPermissionId" />
             </el-select>
             <el-select placeholder="请选择产业" filterable v-model="item.property" value-key="ChartPermissionId" @change="handleSelectChange(item, index, 'property')">
               <el-option v-for="property in getPropertyData(item.industry)" :key="property.ChartPermissionId" :label="property.PermissionName" :value="property" />
@@ -52,273 +330,6 @@
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-export default {
-  data() {
-    var that = this;
-    return {
-      meettingDate: "",
-      meetingId: 0,
-      froalaConfig: {
-        toolbarButtons: ["bold", "italic", "underline", "strikeThrough", "insertHR", "fontSize", "align", "undo", "redo"],
-        height: 260,
-        fontSizeDefaultSelection: "16",
-        quickInsertEnabled: false,
-        theme: "dark", //主题
-        placeholderText: "请输入晨会内容",
-        language: "zh_cn",
-        events: {
-          initialized: function () {
-            that.editor = this;
-            that.editor.toolbar.hide();
-          },
-        },
-      },
-      sectionData: [
-        {
-          isJumpNot: false, //是否跳转
-          reportLink: "", //报告链接
-          headTitle: "", //报告标题
-          content: "", //晨会内容
-          industry: "", //行业
-          property: "", //行业
-          subject: "", //标的
-        },
-      ],
-      industryData: [],
-      allPropertyData: [], //总的产业数据
-      PropertyData: [], //单个行业下的产业数据
-      subjectData: [],
-      isGoBack: true, //点击底部按钮时,是否进行页面跳转
-      isPublishShow: false, //是否显示发布按钮
-      dataLoading: false,
-    };
-  },
-  methods: {
-    //添加段落
-    addSection() {
-      const section = {
-        content: "",
-        industry: "",
-        property: "",
-        subject: "",
-        isJumpNot: false, //是否跳转
-        reportLink: "", //报告链接
-        headTitle: "", //报告标题
-      };
-      this.sectionData.push(section);
-    },
-    //删除段落
-    deleteSection(index) {
-      this.sectionData.splice(index, 1);
-    },
-    //获取行业数据
-    async getIndustryData() {
-      const res = await raiInterface.chartPermissionFirstHaveIco();
-      if (res.Ret !== 200) return;
-      this.industryData = res.Data.List || [];
-    },
-    //根据行业获取产业数据
-    getPropertyData(industry) {
-      const industryId = industry.ChartPermissionId;
-      if (!industryId) return [];
-      let propertyData = [];
-      this.allPropertyData.forEach((item) => {
-        if (item.ChartPermissionId === industryId) {
-          propertyData = item.List || [];
-        }
-      });
-      return propertyData;
-    },
-    //根据产业获取标的数据
-    async getSubjectData(property) {
-      const propertyId = property.ChartPermissionId;
-      if (!propertyId) {
-        this.subjectData = [];
-        return;
-      }
-      const res = await raiInterface.getindustrialSubjectlistIds({ IndustrialManagementIdStr: propertyId });
-      if (res.Ret !== 200) return;
-      this.subjectData = res.Data.List || [];
-    },
-    //获取全部产业数据
-    async getAllPropertyData() {
-      const res = await raiInterface.getListIndustrial();
-      if (res.Ret !== 200) return;
-      this.allPropertyData = res.Data.List || [];
-    },
-    //行业 产业 选择框改变时触发
-    handleSelectChange(data, index, prop) {
-      if (prop === "industry") {
-        data.property = "";
-        data.subject = [];
-      }
-      if (prop === "property") {
-        data.subject = [];
-      }
-      this.sectionData.splice(index, 1, data);
-    },
-    //晨会详情
-    async getMeetingDetail(id) {
-      //获取晨会详情
-      const res = await raiInterface.getMorningMeetingDetail({
-        MeetingId: this.meetingId || id,
-      });
-      if (res.Ret !== 200) return;
-      //处理数据
-      const data = res.Data.List || [];
-      this.meettingDate = res.Data.MeetingTime;
-      this.isPublishShow = res.Data.Status === 1 ? false : true;
-      this.sectionData = data.map((item) => {
-        let temp = {
-          id: item.Id,
-          content: item.content,
-          industry: { ChartPermissionId: item.chartPermissionId, PermissionName: item.chartPermissionName },
-          property: { ChartPermissionId: item.industryId, PermissionName: item.industryName },
-          reportLink: item.reportLink,
-          headTitle: item.title,
-          isJumpNot: item.reportLink ? true : false,
-        };
-        let subject = [];
-        let industrialSubjectList = item.industrialSubjectList || [];
-        industrialSubjectList.map((i) => {
-          subject.push(i.IndustrialSubjectId);
-        });
-        temp.subject = subject;
-        this.getSubjectData(temp.property);
-        return temp;
-      });
-      this.dataLoading = false;
-    },
-    //保存 发布 取消 操作
-    comfirm: _.debounce(async function (type) {
-      if (type === "cancel") {
-        this.$router.back();
-        return;
-      }
-      if (!this.checkContent()) return;
-      if (type === "pub") {
-        this.pubMeeting();
-      }
-      if (type === "save") {
-        this.meetingId && this.editMeeting();
-        !this.meetingId && this.addMeeting();
-      }
-      /* if(type==="cancel"){} */
-
-      this.isGoBack && this.$router.back();
-    }, 500),
-    async pubMeeting() {
-      const list = this.getSectionData();
-      const res = await raiInterface.publishMorningMeeting({
-        MeetingId: Number(this.meetingId),
-        MeetingTime: this.meettingDate,
-        List: list,
-      });
-      if (res.Ret !== 200) {
-        this.isGoBack = false;
-        return;
-      }
-      this.$message.success("发布成功");
-    },
-    async addMeeting() {
-      const list = this.getSectionData();
-      const res = await raiInterface.editMorningMeeting({
-        MeetingId: 0,
-        MeetingTime: this.meettingDate,
-        List: list,
-      });
-      if (res.Ret !== 200) {
-        this.isGoBack = false;
-        return;
-      }
-      await this.getMeetingDetail(res.Data);
-      this.meetingId = res.Data;
-      this.$message.success("添加成功");
-    },
-    async editMeeting() {
-      const list = this.getSectionData();
-      const res = await raiInterface.editMorningMeeting({
-        MeetingId: Number(this.meetingId),
-        MeetingTime: this.meettingDate,
-        List: list,
-      });
-      if (res.Ret !== 200) {
-        this.isGoBack = false;
-        return;
-      }
-      this.$message.success("保存成功");
-    },
-    //转换页面段落的内容为接口的格式
-    getSectionData() {
-      //item.content做处理，把<p data-f-id=\"pbf\"....></p>替换成''
-      this.sectionData = this.sectionData.map((item) => {
-        item.content = item.content.replace(/<p data-f-id=\"pbf\".*?<\/p>/g, "");
-        return item;
-      });
-      let list = [];
-      this.sectionData.forEach((item) => {
-        let temp = {
-          ChapterId: item.id || 0,
-          Content: item.content,
-          ChartPermissionId: item.industry.ChartPermissionId,
-          ChartPermissionName: item.industry.PermissionName,
-          IndustryId: item.property.ChartPermissionId,
-          IndustryName: item.property.PermissionName,
-          IndustrialSubjectIds: item.subject.join(),
-          ReportLink: item.reportLink,
-          Title: item.headTitle,
-        };
-        list.push(temp);
-      });
-      return list;
-    },
-    //检查晨会内容
-    checkContent() {
-      for (let i = 0; i < this.sectionData.length; i++) {
-        if (this.sectionData[i].isJumpNot && this.sectionData[i].reportLink.length === 0) {
-          this.$message.warning(`请输入段落${i + 1}报告链接`);
-          return false;
-        }
-        if (this.sectionData[i].isJumpNot && this.sectionData[i].headTitle.length === 0) {
-          this.$message.warning(`请输入段落${i + 1}报告标题`);
-          return false;
-        }
-        //所有的段落有值
-        if (this.sectionData[i].content.length === 0) {
-          this.$message.warning(`请输入段落${i + 1}的内容`);
-          return false;
-        }
-        //所有的段落 有产业,行业
-        if (!(this.sectionData[i].industry instanceof Object)) {
-          this.$message.warning(`请选择段落${i + 1}的行业`);
-          return false;
-        }
-        if (!(this.sectionData[i].property instanceof Object)) {
-          this.$message.warning(`请选择段落${i + 1}的产业`);
-          return false;
-        }
-      }
-      return true;
-    },
-  },
-  mounted() {
-    this.getIndustryData();
-    this.getAllPropertyData();
-    if (this.$route.query.id) {
-      this.meetingId = this.$route.query.id;
-      this.dataLoading = true;
-      this.getMeetingDetail();
-    } else {
-      this.meettingDate = this.$moment().format("yyyy-MM-DD");
-      this.isPublishShow = true;
-    }
-    //console.log('meetingId',this.meetingId,!this.meetingId)
-  },
-};
-</script>
-
 <style scoped lang="scss">
 .add-morning-meeting-wrap {
   .date-pick-wrap {

src/views/rai_manage/components/addRoadshow.vue

@@ -1,8 +1,205 @@
+<script setup>
+import { ref, computed, onMounted, reactive, toRefs, watch } from "vue";
+
+import RichText from "./richText.vue";
+import _ from "lodash";
+import { raiInterface } from "@/api/api.js";
+import { Calendar, Search, InfoFilled } from "@element-plus/icons-vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  listForm: {
+    title: "", //标题
+    author: "", //作者
+    time: "", //时间
+    industry: "", //行业
+    property: [], //产业
+    target: [], //标的
+    abstract: "",
+    reportLink: "",
+  },
+  property: [],
+  rules: {
+    title: [{ required: true, message: "请输入标题", trigger: "blur" }],
+    author: [{ required: true, message: "请输入作者", trigger: "blur" }],
+    time: [{ required: true, message: "请输入标题", trigger: "change" }],
+    industry: [{ required: true, message: "请选择行业", trigger: "change" }],
+    property: [{ required: true, message: "请选择所属产业", trigger: "change" }],
+    target: [{ required: true, message: "请选择关联标的", trigger: "change" }],
+  },
+  optionsIndustry: [],
+  optionsProperty: [],
+  optionsTarget: [],
+  contentValue: "请输入内容",
+  propertyDetai: [],
+  isShowStatus: true,
+  timeInterval: null,
+  richTetxValue: "", //
+});
+
+// 报告的缓存处理数据
+function dataInit() {
+  if (sessionStorage.getItem("addRoadshowReportQY")) {
+    let data = JSON.parse(sessionStorage.getItem("addRoadshowReportQY"));
+    setTimeout(async () => {
+      pageState.listForm = {
+        title: data.Title, //标题
+        author: data.SellerAndMobile, //作者
+        time: data.PublishDate, //时间
+        industry: data.ChartPermissionId, //行业
+        abstract: data.Abstract,
+        reportLink: data.ReportLink,
+        property: data.IndustrialManagementId,
+        target: data.IndustrialSubjectIdStr,
+      };
+      pageState.richTetxValue = data.Body;
+      if (pageState.listForm.industry) {
+        await getPropertyList();
+        await getTargetList();
+      }
+    }, 200);
+  }
+  pageState.timeInterval = setInterval(() => {
+    let params = {
+      Abstract: pageState.listForm.abstract,
+      Body: pageState.richTetxValue,
+      ChartPermissionId: pageState.listForm.industry,
+      IndustrialManagementId: pageState.listForm.property,
+      IndustrialSubjectIdStr: pageState.listForm.target,
+      ReportLink: pageState.listForm.reportLink,
+      PublishDate: pageState.listForm.time,
+      SellerAndMobile: pageState.listForm.author,
+      Title: pageState.listForm.title,
+    };
+    sessionStorage.setItem("addRoadshowReportQY", JSON.stringify(params));
+  }, 120000);
+}
+// 获取数据
+async function getDetail() {
+  const res = await raiInterface.roadshowEssenceDetail({ ArticleId: Number($route.query.id) });
+  if (res.Ret === 200) {
+    pageState.isShowStatus = res.Data.PublishStatus == 0;
+    pageState.listForm = {
+      title: res.Data.Title, //标题
+      author: res.Data.SellerAndMobile, //作者
+      time: res.Data.PublishDate, //时间
+      industry: res.Data.ChartPermissionId > 0 ? res.Data.ChartPermissionId : "", //行业
+      abstract: res.Data.Abstract,
+      reportLink: res.Data.ReportLink,
+      property: res.Data.IndustrialManagementId ? res.Data.IndustrialManagementId.split(",").map((item) => Number(item)) : [],
+      target: res.Data.IndustrialSubjectIdStr ? res.Data.IndustrialSubjectIdStr.split(",").map((item) => Number(item)) : [],
+    };
+    pageState.richTetxValue = res.Data.Body;
+    if (pageState.listForm.industry) {
+      await getPropertyList();
+      await getTargetList();
+    }
+  }
+}
+//获取行业
+async function getIndustryList() {
+  const res = await raiInterface.chartPermissionFirstHaveIco();
+  if (res.Ret === 200) {
+    pageState.optionsIndustry = res.Data.List || [];
+  }
+}
+//获取产业
+async function getPropertyList() {
+  const str = pageState.listForm.industry;
+  if (!str) return;
+  const res = await raiInterface.getIndustrialManagement({ ChartPermissionId: str });
+  if (res.Ret === 200) {
+    pageState.optionsProperty = res.Data.List || [];
+  }
+}
+//获取标的
+async function getTargetList() {
+  const str = pageState.listForm.property.join(",");
+  if (!str) return;
+  const res = await raiInterface.getindustrialSubjectlistIds({ IndustrialManagementIdStr: str });
+  if (res.Ret === 200) {
+    pageState.optionsTarget = res.Data.List || [];
+  }
+}
+
+const ruleFormRef = ref(null);
+//保存 / 发布
+const confirm = _.debounce(function (type) {
+  ruleFormRef.value.validate(async (value) => {
+    if (value) {
+      let params = {
+        Abstract: pageState.listForm.abstract,
+        Body: pageState.richTetxValue,
+        ChartPermissionId: pageState.listForm.industry,
+        IndustrialManagementId: pageState.listForm.property.join(","),
+        IndustrialSubjectIdStr: pageState.listForm.target.join(","),
+        ReportLink: pageState.listForm.reportLink,
+        PublishDate: pageState.listForm.time,
+        SellerAndMobile: pageState.listForm.author,
+        Title: pageState.listForm.title,
+        DoType: type == "发布" ? 1 : 0,
+        ArticleId: $route.query.id ? Number($route.query.id) : 0,
+      };
+      if (type == "预览") {
+        sessionStorage.setItem("roadShowPre", JSON.stringify(params));
+        let { href } = $router.resolve({ name: "预览路演精华" });
+        window.open(href, "_blank");
+      } else {
+        const res = await raiInterface.roadshowEssencePreserveAndPublish(params);
+        if (res.Ret === 200) {
+          ElMessage.success(`${type}成功!`);
+          ruleFormRef.value.resetFields();
+          clearInterval(pageState.timeInterval);
+          sessionStorage.removeItem("addRoadshowReportQY");
+          $router.back();
+        }
+      }
+    }
+  });
+}, 500);
+function industryClear() {
+  pageState.listForm.property = [];
+  pageState.optionsProperty = [];
+  pageState.listForm.target = [];
+  pageState.optionsTarget = [];
+}
+function propertyClear() {
+  pageState.listForm.target = [];
+  pageState.optionsTarget = [];
+}
+//取消事件
+function cancel() {
+  clearInterval(pageState.timeInterval);
+  sessionStorage.removeItem("addRoadshowReportQY");
+  ruleFormRef.value.resetFields();
+  $router.back();
+}
+
+onMounted(() => {
+  getIndustryList();
+  if ($route.query.id) {
+    getDetail();
+  } else {
+    dataInit();
+  }
+});
+
+onBeforeRouteLeave((to, from, next) => {
+  clearInterval(pageState.timeInterval);
+  next();
+});
+const { listForm, property, rules, optionsIndustry, optionsProperty, optionsTarget, contentValue, propertyDetai, isShowStatus, timeInterval, richTetxValue } = toRefs(pageState);
+</script>
+
 <template>
   <!-- 路演精华添加/编辑 -->
   <div class="add-roadshow">
     <el-card>
-      <el-form :model="listForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
+      <el-form :model="listForm" :rules="rules" ref="ruleFormRef" class="demo-ruleForm">
         <el-row :gutter="24">
           <el-col :span="12">
             <el-form-item prop="title">
@@ -47,7 +244,7 @@
           <el-input type="textarea" :rows="4" placeholder="请输入摘要" v-model="listForm.abstract"> </el-input>
         </div>
         <div style="margin: 30px 0">
-          <RichText ref="twoRich" :isText="contentValue" />
+          <RichText spareId="twoRich" :isText="contentValue" v-model="richTetxValue" />
         </div>
         <div class="content-link">
           <div class="txt">报告链接：</div>
@@ -66,200 +263,6 @@
   </div>
 </template>
 
-<script>
-import RichText from "./richText.vue";
-
-import { raiInterface } from "@/api/api.js";
-import { async } from "@antv/x6/lib/registry/marker/main";
-export default {
-  name: "",
-  components: { RichText },
-  props: {},
-  data() {
-    return {
-      listForm: {
-        title: "", //标题
-        author: "", //作者
-        time: "", //时间
-        industry: "", //行业
-        property: [], //产业
-        target: [], //标的
-        abstract: "",
-        reportLink: "",
-      },
-      property: [],
-      rules: {
-        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
-        author: [{ required: true, message: "请输入作者", trigger: "blur" }],
-        time: [{ required: true, message: "请输入标题", trigger: "change" }],
-        industry: [{ required: true, message: "请选择行业", trigger: "change" }],
-        property: [{ required: true, message: "请选择所属产业", trigger: "change" }],
-        target: [{ required: true, message: "请选择关联标的", trigger: "change" }],
-      },
-      optionsIndustry: [],
-      optionsProperty: [],
-      optionsTarget: [],
-      contentValue: "请输入内容",
-      propertyDetai: [],
-      isShowStatus: true,
-      timeInterval: null,
-    };
-  },
-  computed: {},
-  watch: {},
-  created() {},
-  mounted() {
-    this.getIndustryList();
-    if (this.$route.query.id) {
-      this.getDetail();
-    } else {
-      this.dataInit();
-    }
-  },
-  methods: {
-    // 报告的缓存处理数据
-    dataInit() {
-      if (sessionStorage.getItem("addRoadshowReportQY")) {
-        let data = JSON.parse(sessionStorage.getItem("addRoadshowReportQY"));
-        setTimeout(async () => {
-          this.listForm = {
-            title: data.Title, //标题
-            author: data.SellerAndMobile, //作者
-            time: data.PublishDate, //时间
-            industry: data.ChartPermissionId, //行业
-            abstract: data.Abstract,
-            reportLink: data.ReportLink,
-            property: data.IndustrialManagementId,
-            target: data.IndustrialSubjectIdStr,
-          };
-          this.$refs.twoRich.value = data.Body;
-          if (this.listForm.industry) {
-            await this.getPropertyList();
-            await this.getTargetList();
-          }
-        }, 200);
-      }
-      this.timeInterval = setInterval(() => {
-        let params = {
-          Abstract: this.listForm.abstract,
-          Body: this.$refs.twoRich.value,
-          ChartPermissionId: this.listForm.industry,
-          IndustrialManagementId: this.listForm.property,
-          IndustrialSubjectIdStr: this.listForm.target,
-          ReportLink: this.listForm.reportLink,
-          PublishDate: this.listForm.time,
-          SellerAndMobile: this.listForm.author,
-          Title: this.listForm.title,
-        };
-        sessionStorage.setItem("addRoadshowReportQY", JSON.stringify(params));
-      }, 120000);
-    },
-    // 获取数据
-    async getDetail() {
-      const res = await raiInterface.roadshowEssenceDetail({ ArticleId: Number(this.$route.query.id) });
-      if (res.Ret === 200) {
-        this.isShowStatus = res.Data.PublishStatus == 0;
-        this.listForm = {
-          title: res.Data.Title, //标题
-          author: res.Data.SellerAndMobile, //作者
-          time: res.Data.PublishDate, //时间
-          industry: res.Data.ChartPermissionId > 0 ? res.Data.ChartPermissionId : "", //行业
-          abstract: res.Data.Abstract,
-          reportLink: res.Data.ReportLink,
-          property: res.Data.IndustrialManagementId ? res.Data.IndustrialManagementId.split(",").map((item) => Number(item)) : [],
-          target: res.Data.IndustrialSubjectIdStr ? res.Data.IndustrialSubjectIdStr.split(",").map((item) => Number(item)) : [],
-        };
-        this.$refs.twoRich.value = res.Data.Body;
-        if (this.listForm.industry) {
-          await this.getPropertyList();
-          await this.getTargetList();
-        }
-      }
-    },
-    //获取行业
-    async getIndustryList() {
-      const res = await raiInterface.chartPermissionFirstHaveIco();
-      if (res.Ret === 200) {
-        this.optionsIndustry = res.Data.List || [];
-      }
-    },
-    //获取产业
-    async getPropertyList() {
-      const str = this.listForm.industry;
-      if (!str) return;
-      const res = await raiInterface.getIndustrialManagement({ ChartPermissionId: str });
-      if (res.Ret === 200) {
-        this.optionsProperty = res.Data.List || [];
-      }
-    },
-    //获取标的
-    async getTargetList() {
-      const str = this.listForm.property.join(",");
-      if (!str) return;
-      const res = await raiInterface.getindustrialSubjectlistIds({ IndustrialManagementIdStr: str });
-      if (res.Ret === 200) {
-        this.optionsTarget = res.Data.List || [];
-      }
-    },
-    //保存 / 发布
-    confirm: _.debounce(function (type) {
-      this.$refs.ruleForm.validate(async (value) => {
-        if (value) {
-          let params = {
-            Abstract: this.listForm.abstract,
-            Body: this.$refs.twoRich.value,
-            ChartPermissionId: this.listForm.industry,
-            IndustrialManagementId: this.listForm.property.join(","),
-            IndustrialSubjectIdStr: this.listForm.target.join(","),
-            ReportLink: this.listForm.reportLink,
-            PublishDate: this.listForm.time,
-            SellerAndMobile: this.listForm.author,
-            Title: this.listForm.title,
-            DoType: type == "发布" ? 1 : 0,
-            ArticleId: this.$route.query.id ? Number(this.$route.query.id) : 0,
-          };
-          if (type == "预览") {
-            sessionStorage.setItem("roadShowPre", JSON.stringify(params));
-            let { href } = this.$router.resolve({ name: "预览路演精华" });
-            window.open(href, "_blank");
-          } else {
-            const res = await raiInterface.roadshowEssencePreserveAndPublish(params);
-            if (res.Ret === 200) {
-              this.$message.success(`${type}成功!`);
-              this.$refs.ruleForm.resetFields();
-              clearInterval(this.timeInterval);
-              sessionStorage.removeItem("addRoadshowReportQY");
-              this.$router.back();
-            }
-          }
-        }
-      });
-    }, 500),
-    industryClear() {
-      this.listForm.property = [];
-      this.optionsProperty = [];
-      this.listForm.target = [];
-      this.optionsTarget = [];
-    },
-    propertyClear() {
-      this.listForm.target = [];
-      this.optionsTarget = [];
-    },
-    //取消事件
-    cancel() {
-      clearInterval(this.timeInterval);
-      sessionStorage.removeItem("addRoadshowReportQY");
-      this.$refs.ruleForm.resetFields();
-      this.$router.back();
-    },
-  },
-  // 路由离开了 清除定时器
-  beforeRouteLeave(to, from, next) {
-    clearInterval(this.timeInterval);
-    next();
-  },
-};
-</script>
 <style lang="scss">
 .add-roadshow {
   .el-date-editor.el-input,

src/views/rai_manage/components/addSummary.vue

@@ -1,6 +1,430 @@
+<script setup>
+import { ref, computed, onMounted, reactive, toRefs } from "vue";
+import { raiInterface } from "@/api/api.js";
+import Clipboard from "clipboard";
+import RichText from "./richText.vue";
+// import chartDialogVue from "../../dataEntry_manage/components/chartDialog.vue";
+// import AddIndustryMark from "../components/addIndustryMark.vue";
+import _ from "lodash";
+import { ElMessageBox, ElMessage } from "element-plus";
+import { Close, Plus } from "@element-plus/icons-vue";
+
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  copyText:
+    " <div><p>#核心观点：</p> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></div><div><p>#访谈时间：</p><p>2021.01.01</p></div><div><p>#纪要详情：</p><p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></div><div><p>#专家评价：</p><p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></div>",
+  copyTxt: `#核心观点：
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+#访谈时间：
+2021.01.01
+
+#纪要详情：
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+#专家评价：
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX`,
+  defaultProps: {
+    label: "PermissionName",
+    children: "List",
+    value: "ChartPermissionId",
+  },
+  industryArr: [], //
+  markValue: "",
+  markOptions: [],
+  addOfEditFormregion: "", //行业选择
+  addIndustryDlg: false, //
+  addMarkDlg: false,
+  addMarkUpVal: {
+    industrialName: "",
+    industrialId: "",
+  }, //弹框里的
+  articleId: 0,
+  addOfEditForm: {
+    content: "",
+    title: "",
+    synopsis: "",
+    mobile: "", // 预览的作者 用的 mobile 。。。。
+    // 头像
+    ImgUrl: "",
+    // 昵称
+    nickName: "",
+    reportLink: "",
+    regions: "",
+    property: "",
+    indication: "",
+    publishTime: "",
+    industry: "", //行业
+  },
+  rulesOption: {
+    regions: [{ required: true, message: "请选择报告类型", trigger: "change" }],
+    property: [{ required: true, message: "请选择产业", trigger: "change" }],
+    publishTime: [{ required: true, message: "请选择发布时间", trigger: "change" }],
+    title: [{ required: true, message: "请输入报告标题", trigger: "blur" }],
+    synopsis: [{ required: true, message: "请输入摘要", trigger: "blur" }],
+    mobile: [{ required: true, message: "请输入作者", trigger: "blur" }],
+    industry: [{ required: true, message: "请选择行业", trigger: "change" }],
+  },
+  chartPermissionList: [], //行业的数组
+  dialogVisible: false,
+  isShowStatus: true,
+  ummary: 0,
+  indicationPostOptins: [], //标的数组v-model
+  indicationOption: [], //行业数组
+  propertyOption: [], //产业数组
+  addReportDialogVisible: false, //添加报告类型
+  reportTypeVal: "", //添加报告类型的输入框
+  synopsisText: [], //
+  articleTypeName: "", //报告类型的名称
+  isSource: "",
+  isSource: 0,
+  timeInterval: null,
+});
+
+// 报告的缓存处理数据
+function dataInit() {
+  if (sessionStorage.getItem(pageState.isSource == "HZ" ? "addSummaryParamsHZ" : "addSummaryParamsQY")) {
+    let data = JSON.parse(sessionStorage.getItem(pageState.isSource == "HZ" ? "addSummaryParamsHZ" : "addSummaryParamsQY"));
+    setTimeout(() => {
+      pageState.addOfEditForm = {
+        industry: data.ChartPermissionId, //HZ  行业
+        regions: data.ArticleTypeId,
+        title: data.Title,
+        content: data.Body,
+        synopsis: data.Abstract,
+        mobile: data.SellerAndMobile,
+        ImgUrl: data.ImgUrl,
+        nickName: data.NickName,
+        reportLink: data.ReportLink,
+        publishTime: data.PublishDate,
+        property: data.IndustrialManagementIds,
+      };
+      pageState.articleTypeName = data.ArticleTypeName;
+      pageState.markValue = data.IndustrialSubjectIds;
+      data.IndustrialManagementIds && markSelectFocus();
+    }, 200);
+  }
+  pageState.timeInterval = setInterval(() => {
+    let params = {
+      Abstract: pageState.addOfEditForm.synopsis,
+      Body: pageState.addOfEditForm.content,
+      SellerAndMobile: pageState.addOfEditForm.mobile,
+      NickName: pageState.addOfEditForm.nickName,
+      ImgUrl: pageState.addOfEditForm.ImgUrl,
+      Title: pageState.addOfEditForm.title,
+      ArticleTypeId: pageState.addOfEditForm.regions,
+      IndustrialSubjectIds: pageState.markValue,
+      IndustrialManagementIds: pageState.addOfEditForm.property, //产业
+      PublishDate: pageState.addOfEditForm.publishTime,
+      ReportLink: pageState.addOfEditForm.reportLink,
+      ChartPermissionId: pageState.addOfEditForm.industry,
+    };
+    sessionStorage.setItem(pageState.isSource == "HZ" ? "addSummaryParamsHZ" : "addSummaryParamsQY", JSON.stringify(params));
+    pageState.numNum++;
+  }, 120000);
+}
+//点击了添加产业
+function addIndustryDlgIsShow() {
+  if (pageState.addOfEditForm.regions) {
+    pageState.addIndustryDlg = true;
+  } else {
+    pageState.addIndustryDlg = false;
+    pageState.$message.error("请选选择报告类型");
+  }
+}
+//报告类型的选择事件
+function regionsChange(e) {
+  pageState.articleTypeName = pageState.chartPermissionList.find((item) => item.ArticleTypeId == e).ArticleTypeName;
+  let str = pageState.synopsisText.find((item) => item.ArticleTypeId == e);
+}
+//进来编辑的 获取内容的事件
+async function getsummaryManagedetail() {
+  const res =
+    pageState.isSource === "HZ"
+      ? await raiInterface.reportArticleDetail({ ArticleId: $route.query.id })
+      : await raiInterface.getsummaryManagedetail({
+          ArticleId: $route.query.id,
+        });
+  if (res.Ret !== 200) return;
+  pageState.addOfEditForm = {
+    industry: res.Data.ChartPermissionId, //HZ  行业
+    regions: res.Data.ArticleTypeId,
+    content: res.Data.Body,
+    title: res.Data.Title,
+    synopsis: res.Data.Abstract,
+    mobile: res.Data.SellerAndMobile,
+    ImgUrl: res.Data.ImgUrl,
+    nickName: res.Data.NickName,
+    reportLink: res.Data.ReportLink,
+    publishTime: res.Data.PublishDate,
+    property: res.Data.ListIndustrial ? res.Data.ListIndustrial.map((item) => [item.ChartPermissionId, item.IndustrialManagementId]) : "",
+  };
+  pageState.articleId = res.Data.ArticleId;
+  pageState.articleTypeName = res.Data.ArticleTypeName;
+  pageState.markValue = res.Data.ListSubject ? res.Data.ListSubject.map((item) => item.IndustrialSubjectId) : [];
+  pageState.isShowStatus = res.Data.PublishStatus == 0;
+  markSelectFocus();
+}
+const addOfEditFormRef = ref(null);
+//表单保存发布事件
+const submitForm = _.debounce(async function (type) {
+  let validateFieldList = [];
+  addOfEditFormRef.value.validateField([pageState.isSource === "HZ" ? "industry" : "regions", "property", "publishTime", "title", "synopsis", "mobile"], (valid) => {
+    validateFieldList.push(valid);
+  });
+  let industrialManagementIds = pageState.addOfEditForm.property && pageState.addOfEditForm.property.map((item) => item[1]);
+  if (validateFieldList.every((item) => item === "")) {
+    let params = {
+      Abstract: pageState.addOfEditForm.synopsis,
+      Body: pageState.addOfEditForm.content,
+      SellerAndMobile: pageState.addOfEditForm.mobile,
+      NickName: pageState.addOfEditForm.nickName,
+      ImgUrl: pageState.addOfEditForm.ImgUrl,
+      DoType: type == "保存" ? 0 : 1,
+      Title: pageState.addOfEditForm.title,
+      ArticleTypeId: pageState.addOfEditForm.regions,
+      ArticleId: $route.query.id ? Number($route.query.id) : 0,
+      IndustrialSubjectIds: pageState.markValue.length ? pageState.markValue.join(",") : "",
+      IndustrialManagementIds: industrialManagementIds.join(","), //产业
+      PublishDate: pageState.addOfEditForm.publishTime,
+      ReportLink: pageState.addOfEditForm.reportLink,
+      ChartPermissionId: pageState.addOfEditForm.industry,
+    };
+    if (type == "预览") {
+      if (!pageState.isShowStatus) {
+        let href = `${process.env.CYGX_WEB}/material/info/${$route.query.id}`;
+        window.open(href, "_blank");
+      } else {
+        sessionStorage.setItem("summaryPre", JSON.stringify(params));
+        let { href } = $router.resolve({ name: "预览研选报告" });
+        window.open(href, "_blank");
+      }
+      return;
+    } else {
+      const res = pageState.isSource === "HZ" ? await raiInterface.reportPreserveAndPublish(params) : await raiInterface.preserveAndPublish(params);
+      if (res.Ret === 200) {
+        clearInterval(pageState.timeInterval);
+        ElMessage.success("操作成功！");
+        sessionStorage.removeItem(pageState.isSource == "HZ" ? "addSummaryParamsHZ" : "addSummaryParamsQY");
+        addOfEditFormRef.value.resetFields();
+        $router.back();
+      }
+    }
+  }
+}, 500);
+//表单取消事件
+function cancelBtn() {
+  clearInterval(pageState.timeInterval);
+  addOfEditFormRef.value.resetFields();
+  sessionStorage.removeItem(pageState.isSource == "HZ" ? "addSummaryParamsHZ" : "addSummaryParamsQY");
+  $router.back();
+}
+//获取行业
+async function chartPermission() {
+  const res = pageState.isSource === "HZ" ? await raiInterface.getNoTacticsfirst() : await raiInterface.summaryManageArticleType();
+  if (res.Ret === 200) {
+    pageState.chartPermissionList = res.Data.List || [];
+    pageState.synopsisText = res.Data.AbstractList || [];
+  }
+}
+// 操作：点击了复制按钮
+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(); // 释放内存
+  });
+}
+//作者的联想事件，单个 回调
+async function authorCallbackHandle(data, cb) {
+  const res = await raiInterface.departmentList({ KeyWord: data });
+  pageState.addOfEditForm.ImgUrl = "";
+  pageState.addOfEditForm.nickName = "";
+  if (res.Ret === 200) {
+    let arr = res.Data.List
+      ? res.Data.List.map((item) => {
+          return { ...item, value: item.Content };
+        })
+      : [];
+    cb(arr);
+  } else {
+    cb([]);
+  }
+}
+// 作者选择事件
+function authorSelectHandle(e) {
+  // 同步头像
+  pageState.addOfEditForm.ImgUrl = e.ImgUrl;
+  pageState.addOfEditForm.nickName = e.NickName;
+  // console.log(e);
+}
+//添加报告类型的事件
+function addRepotrTypeHandel() {
+  pageState.reportTypeVal = "";
+  pageState.addReportDialogVisible = true;
+}
+//添加报告类型弹框的取消事件
+function reportHandleClose() {
+  pageState.reportTypeVal = "";
+  pageState.addReportDialogVisible = false;
+}
+//添加报告类型弹框的确定事件
+async function addReportConfirm() {
+  if (!pageState.reportTypeVal) return ElMessage.error("输入内容不能为空");
+  const res = await raiInterface.addSummaryManageArticleType({ ArticleTypeName: pageState.reportTypeVal });
+  if (res.Ret === 200) {
+    pageState.reportTypeVal = "";
+    pageState.addReportDialogVisible = false;
+    ElMessage.success("添加成功");
+    chartPermission();
+  }
+}
+function propertyChange() {
+  pageState.markOptions = [];
+  pageState.markValue = "";
+}
+// 选择报告类型
+function industrySelectFocus(value) {
+  if (!value) return;
+  if (pageState.addOfEditForm.industry || pageState.addOfEditForm.regions) {
+    getIndustry();
+  } else {
+    pageState.industryArr = [];
+    ElMessage.error(pageState.isSource === "HZ" ? "请先选择行业" : "请先选择报告类型");
+  }
+}
+//添加标的的点击事件
+function isAddMarketDlg() {
+  if (pageState.addOfEditForm.property.length) {
+    let arr = pageState.addOfEditForm.property.flat(Infinity);
+    pageState.addMarkUpVal.industrialId = arr[1];
+    pageState.industryArr.forEach((item) => {
+      if (item.ChartPermissionId == arr[0]) {
+        item.List.forEach((key) => {
+          if (key.ChartPermissionId == arr[1]) {
+            pageState.addMarkUpVal.industrialName = key.PermissionName;
+          }
+        });
+      }
+    });
+    if (pageState.addOfEditForm.property.length > 1) {
+      ElMessage.error("已选多个产业，无法添加标的");
+    } else {
+      pageState.addMarkDlg = true;
+    }
+  } else {
+    ElMessage.error("未选择产业，无法添加标的");
+  }
+}
+//点击添加标的的下拉选择框
+function markSelectFocus() {
+  if (!pageState.addOfEditForm.property.length) {
+    ElMessage.error("请先选择产业");
+  } else {
+    let arr = pageState.addOfEditForm.property.map((item) => item[1]);
+    raiInterface
+      .getindustrialSubjectlistIds({
+        IndustrialManagementIdStr: arr.join(","),
+        ArticleId: pageState.articleId,
+      })
+      .then((res) => {
+        if (res.Ret === 200) {
+          pageState.markOptions = res.Data.List || [];
+        }
+      });
+  }
+}
+// 子组件来的事件 产业
+function commitIndustryDlg(data) {
+  getIndustry();
+  pageState.addOfEditForm.property.push([Number(data.ChartPermissionId), Number(data.NewId)]);
+  addOfEditFormRef.value.clearValidate();
+}
+// 子组件来的事件 标的
+function commitMarkDlg(data) {
+  raiInterface
+    .getindustrialSubjectlistIds({
+      IndustrialManagementIdStr: pageState.addMarkUpVal.industrialId,
+    })
+    .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 || [];
+    }
+  });
+}
+onMounted(() => {
+  pageState.isSource = $route.query.type;
+  pageState.addOfEditForm.mobile = pageState.isSource === "HZ" ? "弘则内容组" : "";
+  chartPermission(); //获取基础的报告类型数据
+  getIndustry();
+  if ($route.query.id) {
+    // 编辑进来的
+    getsummaryManagedetail();
+  } else {
+    dataInit();
+  }
+});
+
+onBeforeRouteLeave((to, from, next) => {
+  clearInterval(pageState.timeInterval);
+  next();
+});
+
+
+const {
+  copyText,
+  copyTxt,
+  defaultProps,
+  industryArr,
+  markValue,
+  markOptions,
+  addOfEditFormregion,
+  addIndustryDlg,
+  addMarkDlg,
+  addMarkUpVal,
+  articleId,
+  addOfEditForm,
+  rulesOption,
+  chartPermissionList,
+  dialogVisible,
+  isShowStatus,
+  ummary,
+  indicationPostOptins,
+  indicationOption,
+  propertyOption,
+  addReportDialogVisible,
+  reportTypeVal,
+  synopsisText,
+  articleTypeName,
+  isSource,
+  timeInterval,
+} = toRefs(pageState);
+</script>
+
 <template>
   <div class="container-summary">
-    <el-form :model="addOfEditForm" :rules="rulesOption" ref="addOfEditForm">
+    <el-form :model="addOfEditForm" :rules="rulesOption" ref="addOfEditFormRef">
       <el-card class="card-top">
         <el-form-item prop="industry" v-if="isSource === 'HZ'">
           <el-select placeholder="请选择行业" clearable v-model="addOfEditForm.industry" style="width: 360px; margin-right: 20px">
@@ -71,7 +495,7 @@
           </div>
         </div>
         <el-form-item prop="content">
-          <froala id="froala-editor" ref="froalaEditor" :tag="'textarea'" :config="froalaConfig" v-model="addOfEditForm.content"></froala>
+          <RichText v-model="addOfEditForm.content" spareId="report" isText="请输入报告内容" />
         </el-form-item>
         <el-form-item>
           <div class="report-link" v-if="articleTypeName === '路演精华'">
@@ -89,21 +513,23 @@
       </el-card>
     </el-form>
 
-    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center title="纪要内容模板" :visible.sync="dialogVisible" width="35%" :before-close="handleClose">
+    <el-dialog v-dialogDrag :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>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button id="copy_text" type="primary" :data-clipboard-text="copyTxt" @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" :data-clipboard-text="copyTxt" @click="handleCopyFun">复制模版</el-button>
+        </span>
+      </template>
     </el-dialog>
     <add-industry-mark
       optionFormregion="研选"
       :source="2"
-      :addIndustryDlg.sync="addIndustryDlg"
-      :addMarkDlg.sync="addMarkDlg"
+      v-model:addIndustryDlg="addIndustryDlg"
+      v-model:addMarkDlg="addMarkDlg"
       @commitIndustryDlg="commitIndustryDlg"
       @commitMarkDlg="commitMarkDlg"
       :addMarkUpVal="addMarkUpVal"
@@ -114,7 +540,7 @@
       :modal-append-to-body="false"
       center
       title="添加报告类型"
-      :visible.sync="addReportDialogVisible"
+      v-model="addReportDialogVisible"
       width="500px"
       :before-close="reportHandleClose"
       append-to-body
@@ -122,410 +548,16 @@
       <div>
         <el-input style="width: 100%; margin-bottom: 20px" placeholder="请输入类型名称" clear v-model.trim="reportTypeVal"></el-input>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="reportHandleClose">取消</el-button>
-        <el-button type="primary" @click="addReportConfirm">确定</el-button>
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="reportHandleClose">取消</el-button>
+          <el-button type="primary" @click="addReportConfirm">确定</el-button>
+        </span>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-import VueFroala from "vue-froala-wysiwyg";
-import Clipboard from "clipboard";
-import chartDialogVue from "../../dataEntry_manage/components/chartDialog.vue";
-import AddIndustryMark from "../components/addIndustryMark.vue";
-import RichTextMixins from "./reportComponents/RichTextMixins";
-export default {
-  name: "",
-  components: { AddIndustryMark },
-  mixins: [RichTextMixins],
-  data() {
-    var that = this;
-    return {
-      copyText:
-        " <div><p>#核心观点：</p> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></div><div><p>#访谈时间：</p><p>2021.01.01</p></div><div><p>#纪要详情：</p><p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></div><div><p>#专家评价：</p><p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></div>",
-      copyTxt: `#核心观点：
-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
-
-#访谈时间：
-2021.01.01
-
-#纪要详情：
-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
-
-#专家评价：
-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX`,
-      defaultProps: {
-        label: "PermissionName",
-        children: "List",
-        value: "ChartPermissionId",
-      },
-      industryArr: [], //
-      markValue: "",
-      markOptions: [],
-      addOfEditFormregion: "", //行业选择
-      addIndustryDlg: false, //
-      addMarkDlg: false,
-      addMarkUpVal: {
-        industrialName: "",
-        industrialId: "",
-      }, //弹框里的
-      articleId: 0,
-      addOfEditForm: {
-        content: "",
-        title: "",
-        synopsis: "",
-        mobile: "", // 预览的作者 用的 mobile 。。。。
-        // 头像
-        ImgUrl: "",
-        // 昵称
-        nickName: "",
-        reportLink: "",
-        regions: "",
-        property: "",
-        indication: "",
-        publishTime: "",
-        industry: "", //行业
-      },
-      rulesOption: {
-        regions: [{ required: true, message: "请选择报告类型", trigger: "change" }],
-        property: [{ required: true, message: "请选择产业", trigger: "change" }],
-        publishTime: [{ required: true, message: "请选择发布时间", trigger: "change" }],
-        title: [{ required: true, message: "请输入报告标题", trigger: "blur" }],
-        synopsis: [{ required: true, message: "请输入摘要", trigger: "blur" }],
-        mobile: [{ required: true, message: "请输入作者", trigger: "blur" }],
-        industry: [{ required: true, message: "请选择行业", trigger: "change" }],
-      },
-      chartPermissionList: [], //行业的数组
-      dialogVisible: false,
-      isShowStatus: true,
-      ummary: 0,
-      indicationPostOptins: [], //标的数组v-model
-      indicationOption: [], //行业数组
-      propertyOption: [], //产业数组
-      addReportDialogVisible: false, //添加报告类型
-      reportTypeVal: "", //添加报告类型的输入框
-      synopsisText: [], //
-      articleTypeName: "", //报告类型的名称
-      isSource: "",
-      numNum: 0,
-      timeInterval: null,
-    };
-  },
-  computed: {},
-  watch: {},
-  created() {},
-  mounted() {
-    this.isSource = this.$route.query.type;
-    this.addOfEditForm.mobile = this.isSource === "HZ" ? "弘则内容组" : "";
-    this.chartPermission(); //获取基础的报告类型数据
-    this.getIndustry();
-    if (this.$route.query.id) {
-      // 编辑进来的
-      this.getsummaryManagedetail();
-    } else {
-      this.dataInit();
-    }
-  },
-  methods: {
-    // 报告的缓存处理数据
-    dataInit() {
-      if (sessionStorage.getItem(this.isSource == "HZ" ? "addSummaryParamsHZ" : "addSummaryParamsQY")) {
-        let data = JSON.parse(sessionStorage.getItem(this.isSource == "HZ" ? "addSummaryParamsHZ" : "addSummaryParamsQY"));
-        setTimeout(() => {
-          this.addOfEditForm = {
-            industry: data.ChartPermissionId, //HZ  行业
-            regions: data.ArticleTypeId,
-            title: data.Title,
-            content: data.Body,
-            synopsis: data.Abstract,
-            mobile: data.SellerAndMobile,
-            ImgUrl: data.ImgUrl,
-            nickName: data.NickName,
-            reportLink: data.ReportLink,
-            publishTime: data.PublishDate,
-            property: data.IndustrialManagementIds,
-          };
-          this.articleTypeName = data.ArticleTypeName;
-          this.markValue = data.IndustrialSubjectIds;
-          data.IndustrialManagementIds && this.markSelectFocus();
-        }, 200);
-      }
-      this.timeInterval = setInterval(() => {
-        let params = {
-          Abstract: this.addOfEditForm.synopsis,
-          Body: this.addOfEditForm.content,
-          SellerAndMobile: this.addOfEditForm.mobile,
-          NickName: this.addOfEditForm.nickName,
-          ImgUrl: this.addOfEditForm.ImgUrl,
-          Title: this.addOfEditForm.title,
-          ArticleTypeId: this.addOfEditForm.regions,
-          IndustrialSubjectIds: this.markValue,
-          IndustrialManagementIds: this.addOfEditForm.property, //产业
-          PublishDate: this.addOfEditForm.publishTime,
-          ReportLink: this.addOfEditForm.reportLink,
-          ChartPermissionId: this.addOfEditForm.industry,
-        };
-        sessionStorage.setItem(this.isSource == "HZ" ? "addSummaryParamsHZ" : "addSummaryParamsQY", JSON.stringify(params));
-        this.numNum++;
-      }, 120000);
-    },
-    //点击了添加产业
-    addIndustryDlgIsShow() {
-      if (this.addOfEditForm.regions) {
-        this.addIndustryDlg = true;
-      } else {
-        this.addIndustryDlg = false;
-        this.$message.error("请选选择报告类型");
-      }
-    },
-    //报告类型的选择事件
-    regionsChange(e) {
-      this.articleTypeName = this.chartPermissionList.find((item) => item.ArticleTypeId == e).ArticleTypeName;
-      let str = this.synopsisText.find((item) => item.ArticleTypeId == e);
-    },
-    //进来编辑的 获取内容的事件
-    async getsummaryManagedetail() {
-      const res =
-        this.isSource === "HZ"
-          ? await raiInterface.reportArticleDetail({ ArticleId: this.$route.query.id })
-          : await raiInterface.getsummaryManagedetail({
-              ArticleId: this.$route.query.id,
-            });
-      if (res.Ret !== 200) return;
-      this.addOfEditForm = {
-        industry: res.Data.ChartPermissionId, //HZ  行业
-        regions: res.Data.ArticleTypeId,
-        content: res.Data.Body,
-        title: res.Data.Title,
-        synopsis: res.Data.Abstract,
-        mobile: res.Data.SellerAndMobile,
-        ImgUrl: res.Data.ImgUrl,
-        nickName: res.Data.NickName,
-        reportLink: res.Data.ReportLink,
-        publishTime: res.Data.PublishDate,
-        property: res.Data.ListIndustrial ? res.Data.ListIndustrial.map((item) => [item.ChartPermissionId, item.IndustrialManagementId]) : "",
-      };
-      this.articleId = res.Data.ArticleId;
-      this.articleTypeName = res.Data.ArticleTypeName;
-      this.markValue = res.Data.ListSubject ? res.Data.ListSubject.map((item) => item.IndustrialSubjectId) : [];
-      this.isShowStatus = res.Data.PublishStatus == 0;
-      this.markSelectFocus();
-    },
-    //表单保存发布事件
-    submitForm: _.debounce(async function (type) {
-      let validateFieldList = [];
-      this.$refs.addOfEditForm.validateField([this.isSource === "HZ" ? "industry" : "regions", "property", "publishTime", "title", "synopsis", "mobile"], (valid) => {
-        validateFieldList.push(valid);
-      });
-      let industrialManagementIds = this.addOfEditForm.property && this.addOfEditForm.property.map((item) => item[1]);
-      if (validateFieldList.every((item) => item === "")) {
-        let params = {
-          Abstract: this.addOfEditForm.synopsis,
-          Body: this.addOfEditForm.content,
-          SellerAndMobile: this.addOfEditForm.mobile,
-          NickName: this.addOfEditForm.nickName,
-          ImgUrl: this.addOfEditForm.ImgUrl,
-          DoType: type == "保存" ? 0 : 1,
-          Title: this.addOfEditForm.title,
-          ArticleTypeId: this.addOfEditForm.regions,
-          ArticleId: this.$route.query.id ? Number(this.$route.query.id) : 0,
-          IndustrialSubjectIds: this.markValue.length ? this.markValue.join(",") : "",
-          IndustrialManagementIds: industrialManagementIds.join(","), //产业
-          PublishDate: this.addOfEditForm.publishTime,
-          ReportLink: this.addOfEditForm.reportLink,
-          ChartPermissionId: this.addOfEditForm.industry,
-        };
-        if (type == "预览") {
-          if (!this.isShowStatus) {
-            let href = `${process.env.CYGX_WEB}/material/info/${this.$route.query.id}`;
-            window.open(href, "_blank");
-          } else {
-            sessionStorage.setItem("summaryPre", JSON.stringify(params));
-            let { href } = this.$router.resolve({ name: "预览研选报告" });
-            window.open(href, "_blank");
-          }
-          return;
-        } else {
-          const res = this.isSource === "HZ" ? await raiInterface.reportPreserveAndPublish(params) : await raiInterface.preserveAndPublish(params);
-          if (res.Ret === 200) {
-            clearInterval(this.timeInterval);
-            this.$message.success("操作成功！");
-            sessionStorage.removeItem(this.isSource == "HZ" ? "addSummaryParamsHZ" : "addSummaryParamsQY");
-            this.$refs.addOfEditForm.resetFields();
-            this.$router.back();
-          }
-        }
-      }
-    }, 500),
-    //表单取消事件
-    cancelBtn() {
-      clearInterval(this.timeInterval);
-      this.$refs.addOfEditForm.resetFields();
-      sessionStorage.removeItem(this.isSource == "HZ" ? "addSummaryParamsHZ" : "addSummaryParamsQY");
-      this.$router.back();
-    },
-    //获取行业
-    async chartPermission() {
-      const res = this.isSource === "HZ" ? await raiInterface.getNoTacticsfirst() : await raiInterface.summaryManageArticleType();
-      if (res.Ret === 200) {
-        this.chartPermissionList = res.Data.List || [];
-        this.synopsisText = res.Data.AbstractList || [];
-      }
-    },
-    // 操作：点击了复制按钮
-    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(); // 释放内存
-      });
-    },
-    //作者的联想事件，单个 回调
-    async authorCallbackHandle(data, cb) {
-      const res = await raiInterface.departmentList({ KeyWord: data });
-      this.addOfEditForm.ImgUrl = "";
-      this.addOfEditForm.nickName = "";
-      if (res.Ret === 200) {
-        let arr = res.Data.List
-          ? res.Data.List.map((item) => {
-              return { ...item, value: item.Content };
-            })
-          : [];
-        cb(arr);
-      } else {
-        cb([]);
-      }
-    },
-    // 作者选择事件
-    authorSelectHandle(e) {
-      // 同步头像
-      this.addOfEditForm.ImgUrl = e.ImgUrl;
-      this.addOfEditForm.nickName = e.NickName;
-      // console.log(e);
-    },
-    //添加报告类型的事件
-    addRepotrTypeHandel() {
-      this.reportTypeVal = "";
-      this.addReportDialogVisible = true;
-    },
-    //添加报告类型弹框的取消事件
-    reportHandleClose() {
-      this.reportTypeVal = "";
-      this.addReportDialogVisible = false;
-    },
-    //添加报告类型弹框的确定事件
-    async addReportConfirm() {
-      if (!this.reportTypeVal) return this.$message.error("输入内容不能为空");
-      const res = await raiInterface.addSummaryManageArticleType({ ArticleTypeName: this.reportTypeVal });
-      if (res.Ret === 200) {
-        this.reportTypeVal = "";
-        this.addReportDialogVisible = false;
-        this.$message.success("添加成功");
-        this.chartPermission();
-      }
-    },
-    propertyChange() {
-      this.markOptions = [];
-      this.markValue = "";
-    },
-    // 选择报告类型
-    industrySelectFocus(value) {
-      if (!value) return;
-      if (this.addOfEditForm.industry || this.addOfEditForm.regions) {
-        this.getIndustry();
-      } else {
-        this.industryArr = [];
-        this.$message.error(this.isSource === "HZ" ? "请先选择行业" : "请先选择报告类型");
-      }
-    },
-    //添加标的的点击事件
-    isAddMarketDlg() {
-      if (this.addOfEditForm.property.length) {
-        let arr = this.addOfEditForm.property.flat(Infinity);
-        this.addMarkUpVal.industrialId = arr[1];
-        this.industryArr.forEach((item) => {
-          if (item.ChartPermissionId == arr[0]) {
-            item.List.forEach((key) => {
-              if (key.ChartPermissionId == arr[1]) {
-                this.addMarkUpVal.industrialName = key.PermissionName;
-              }
-            });
-          }
-        });
-        if (this.addOfEditForm.property.length > 1) {
-          this.$message.error("已选多个产业，无法添加标的");
-        } else {
-          this.addMarkDlg = true;
-        }
-      } else {
-        this.$message.error("未选择产业，无法添加标的");
-      }
-    },
-    //点击添加标的的下拉选择框
-    markSelectFocus() {
-      if (!this.addOfEditForm.property.length) {
-        this.$message.error("请先选择产业");
-      } else {
-        let arr = this.addOfEditForm.property.map((item) => item[1]);
-        raiInterface
-          .getindustrialSubjectlistIds({
-            IndustrialManagementIdStr: arr.join(","),
-            ArticleId: this.articleId,
-          })
-          .then((res) => {
-            if (res.Ret === 200) {
-              this.markOptions = res.Data.List || [];
-            }
-          });
-      }
-    },
-    // 子组件来的事件 产业
-    commitIndustryDlg(data) {
-      this.getIndustry();
-      this.addOfEditForm.property.push([Number(data.ChartPermissionId), Number(data.NewId)]);
-      this.$refs["addOfEditForm"].clearValidate();
-    },
-    // 子组件来的事件 标的
-    commitMarkDlg(data) {
-      raiInterface
-        .getindustrialSubjectlistIds({
-          IndustrialManagementIdStr: this.addMarkUpVal.industrialId,
-        })
-        .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 || [];
-        }
-      });
-    },
-  },
-  // 路由离开了 清除定时器
-  beforeRouteLeave(to, from, next) {
-    clearInterval(this.timeInterval);
-    next();
-  },
-};
-</script>
 <style lang="scss">
 .add-report-type {
   padding-left: 20px;

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

@@ -365,7 +365,7 @@ export default {
   },
 };
 </script>
-<style lang="less">
+<style lang="scss">
 .container-particulars {
   .table-box {
     margin: 20px auto;

src/views/rai_manage/components/focusCollection.vue

@@ -1,8 +1,59 @@
+<script setup>
+import { ref, computed, watch } from "vue";
+
+import { raiInterface } from "@/api/api.js";
+
+const props =  defineProps({
+  collectionDlgShow: {
+    type: Boolean,
+    default: false,
+  },
+  collectionId: {
+    type: String,
+    default: "",
+  },
+  collectionType: {
+    type: String,
+    default: "",
+  },
+});
+
+watch(
+  () => props.collectionDlgShow,
+  (newValue) => {
+    if (newValue) {
+      this.getArticle();
+    }
+  }
+);
+
+const emit = defineEmits();
+function closeDlg() {
+  emit("update:collectionDlgShow", false);
+}
+
+const dataList = ref([]);
+const fllowNum = ref("");
+const nickName = ref("");
+async function getArticle() {
+  const res = props.collectionType == "关注" ? await raiInterface.departmentFollowList({ DepartmentId: props.collectionId }) : await raiInterface.articleCollection({ ArticleId: props.collectionId });
+  if (res.Ret === 200) {
+    if (props.collectionType == "关注") {
+      dataList.value = res.Data.List || [];
+      fllowNum.value = res.Data.FllowNum;
+      nickName.value = res.Data.NickName;
+    } else {
+      dataList.value = res.Data || [];
+    }
+  }
+}
+</script>
+
 <template>
   <div class="container-collection">
-    <mDialog :show.sync="collectionDlgShow" @beforeClose="closeDlg" :width="'50%'">
+    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center v-model="props.collectionDlgShow" customClass="generaiton-applydialog" :before-close="closeDlg">
       <div>
-        <div v-if="collectionType == '关注' && fllowNum" style="margin-bottom: 20px">
+        <div v-if="props.collectionType == '关注' && fllowNum" style="margin-bottom: 20px">
           <span>{{ nickName }}</span>
           <span>&nbsp;&nbsp;{{ fllowNum }}人关注</span>
         </div>
@@ -10,78 +61,22 @@
           <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="SellerName" label="所属销售"></el-table-column>
-          <el-table-column min-width="150" align="center" prop="CreateTime" :label="collectionType === '关注' ? '关注时间' : '收藏时间'"></el-table-column>
+          <el-table-column min-width="150" align="center" prop="CreateTime" :label="props.collectionType === '关注' ? '关注时间' : '收藏时间'"></el-table-column>
         </el-table>
       </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"> {{ collectionType === "关注" ? "关注详情" : "收藏详情" }}</span>
-      </div>
-      <div slot="footer" style="margin-top:40px">
-        <el-button type="primary" @click="closeDlg">关闭</el-button>
-      </div>
-    </mDialog>
+      <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"> {{ props.collectionType === "关注" ? "关注详情" : "收藏详情" }}</span>
+        </div>
+      </template>
+      <template #footer>
+        <div style="margin-top: 40px">
+          <el-button type="primary" @click="closeDlg">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
-<script>
-import mDialog from "@/components/mDialog.vue";
-import { raiInterface } from "@/api/api.js";
-export default {
-  name: "",
-  components: {
-    mDialog,
-  },
-  props: {
-    collectionDlgShow: {
-      type: Boolean,
-      default: false,
-    },
-    collectionId: {
-      type: String,
-      default: "",
-    },
-    collectionType: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      dataList: [],
-      fllowNum: "",
-      nickName: "",
-    };
-  },
-  computed: {},
-  watch: {
-    collectionDlgShow: {
-      handler(newValue) {
-        if (newValue) {
-          this.getArticle();
-        }
-      },
-    },
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    closeDlg() {
-      this.$parent.collectionDlgShow = false;
-    },
-    async getArticle() {
-      const res = this.collectionType == "关注" ? await raiInterface.departmentFollowList({ DepartmentId: this.collectionId }) : await raiInterface.articleCollection({ ArticleId: this.collectionId });
-      if (res.Ret === 200) {
-        if (this.collectionType == "关注") {
-          this.dataList = res.Data.List || [];
-          this.fllowNum = res.Data.FllowNum;
-          this.nickName = res.Data.NickName;
-        } else {
-          this.dataList = res.Data || [];
-        }
-      }
-    },
-  },
-};
-</script>
-<style scoped lang="less"></style>
+<style scoped lang="scss"></style>

src/views/rai_manage/components/generationAsk.vue

@@ -1,10 +1,137 @@
+<script setup>
+import { ref, computed, watch } from "vue";
+import { raiInterface, raiVideoApi } from "@/api/api.js";
+
+const props = defineProps({
+  generaitonId: {
+    type: Number,
+    required: true,
+  },
+  generaitondialogVisib: {
+    type: Boolean,
+    required: true,
+  },
+  generaitonType: {
+    type: String,
+    required: true,
+  },
+  tabActiveRoadshow: {
+    type: Number,
+  },
+});
+
+const tableData = ref([]);
+
+const exportUser = computed(() => {
+  let url = "";
+  if (props.generaitonType == "报告") {
+    url = "/cygx/reportArticle/askListExport?ReportId=";
+  } else if (props.generaitonType == "报名") {
+    url = "/cygx/activitySignup/askListExport?ActivityId=";
+  } else if (props.generaitonType == "微路演") {
+    props.tabActiveRoadshow == 4
+      ? (url = "/cygx/microRoadshow/commentListExport/video?VideoId=")
+      : props.tabActiveRoadshow == 3
+      ? (url = "/cygx/askserie_video/collection_list?IsExport=true&AskserieVideoId=")
+      : (url = "/cygx/activity_voice_and_video/commentList?IsExport=true&ActivityId=");
+  } else {
+    url = "/cygx/summaryManage/commentListExport?ArticleId=";
+  }
+  return import.meta.env.VITE_APP_API_ROOT + url + props.generaitonId + "&" + localStorage.getItem("auth") || "";
+});
+
+watch(
+  () => props.generaitondialogVisib,
+  (newVal) => {
+    if (newVal) {
+      switch (props.generaitonType) {
+        case "报告":
+          getReportList();
+          break;
+        case "报名":
+          getlist();
+          break;
+        case "微路演":
+          getRoadshowList();
+          break;
+        default:
+          getSummaryList();
+      }
+    }
+  }
+);
+
+const emit = defineEmits();
+function confirmPerson() {
+  tableData.value = [];
+  emit("update:generaitondialogVisib", false);
+}
+//报名 代问
+function getlist() {
+  raiInterface
+    .activitySignupAskList({
+      ActivityId: props.generaitonId,
+    })
+    .then((res) => {
+      if (res.Ret == 200) {
+        tableData.value = res.Data.List;
+      }
+    });
+}
+//报告 代问
+function getReportList() {
+  raiInterface
+    .reportArticleAskList({
+      ReportId: props.generaitonId,
+    })
+    .then((res) => {
+      if (res.Ret == 200) {
+        tableData.value = res.Data.List;
+      }
+    });
+}
+//纪要 代问
+function getSummaryList() {
+  raiInterface
+    .summaryManageAskList({
+      ArticleId: props.generaitonId,
+    })
+    .then((res) => {
+      if (res.Ret == 200) {
+        tableData.value = res.Data.List;
+      }
+    });
+}
+//微路演
+async function getRoadshowList() {
+  const res =
+    props.tabActiveRoadshow == 4
+      ? await raiVideoApi.getMicroRoadshowVideo({
+          VideoId: props.generaitonId,
+        })
+      : props.tabActiveRoadshow == 3
+      ? await raiVideoApi.askserieVideoCollectionList({
+          AskserieVideoId: props.generaitonId,
+        })
+      : await raiVideoApi.activityVoiceAndVideoCommentList({
+          ActivityId: props.generaitonId,
+        });
+
+  if (res.Ret == 200) {
+    tableData.value = res.Data.List;
+  }
+}
+</script>
+
 <template>
   <div class="container-generaiton">
-    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center :visible.sync="generaitondialogVisib" customClass="generaiton-applydialog" :before-close="confirmPerson">
-      <div slot="title" style="display: flex; align-items: center">
-        <img :src="$icons.delay" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
-        <span style="font-size: 16px">{{ generaitonType == "报名" ? "代问详情" : "留言详情" }}</span>
-      </div>
+    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center v-model="props.generaitondialogVisib" customClass="generaiton-applydialog" :before-close="confirmPerson">
+      <template #header>
+        <div style="display: flex; align-items: center">
+          <img :src="$icons.delay" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
+          <span style="font-size: 16px">{{ props.generaitonType == "报名" ? "代问详情" : "留言详情" }}</span>
+        </div>
+      </template>
       <div>
         <el-table :data="tableData" style="width: 100%" border max-height="260px">
           <el-table-column align="center" prop="RealName" label="姓名"> </el-table-column>
@@ -13,149 +140,21 @@
           <el-table-column align="center" prop="CreateTime" label="提交时间" width="180"> </el-table-column>
         </el-table>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <a :href="exportUser" download>
-          <el-button type="primary">
-            {{ generaitonType == "报名" ? "下载问题列表" : "下载留言列表" }}
-          </el-button>
-        </a>
-        <el-button @click="confirmPerson" style="margin-left: 20px">取 消</el-button>
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <a :href="exportUser" download>
+            <el-button type="primary">
+              {{ props.generaitonType == "报名" ? "下载问题列表" : "下载留言列表" }}
+            </el-button>
+          </a>
+          <el-button @click="confirmPerson" style="margin-left: 20px">取 消</el-button>
+        </span>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
-import { raiInterface, raiVideoApi } from "@/api/api.js";
-export default {
-  name: "",
-  components: {},
-  props: {
-    generaitonId: {
-      type: Number,
-      required: true,
-    },
-    generaitondialogVisib: {
-      type: Boolean,
-      required: true,
-    },
-    generaitonType: {
-      type: String,
-      required: true,
-    },
-    tabActiveRoadshow: {
-      type: Number,
-    },
-  },
-  data() {
-    return {
-      tableData: [],
-    };
-  },
-  computed: {
-    exportUser() {
-      let url = "";
-      if (this.generaitonType == "报告") {
-        url = "/cygx/reportArticle/askListExport?ReportId=";
-      } else if (this.generaitonType == "报名") {
-        url = "/cygx/activitySignup/askListExport?ActivityId=";
-      } else if (this.generaitonType == "微路演") {
-        this.tabActiveRoadshow == 4
-          ? (url = "/cygx/microRoadshow/commentListExport/video?VideoId=")
-          : this.tabActiveRoadshow == 3
-          ? (url = "/cygx/askserie_video/collection_list?IsExport=true&AskserieVideoId=")
-          : (url = "/cygx/activity_voice_and_video/commentList?IsExport=true&ActivityId=");
-      } else {
-        url = "/cygx/summaryManage/commentListExport?ArticleId=";
-      }
-      return import.meta.env.VITE_APP_API_ROOT + url + this.generaitonId + "&" + localStorage.getItem("auth") || "";
-    },
-  },
-  watch: {
-    generaitondialogVisib() {
-      if (this.generaitondialogVisib) {
-        switch (this.generaitonType) {
-          case "报告":
-            this.getReportList();
-            break;
-          case "报名":
-            this.getlist();
-            break;
-          case "微路演":
-            this.getRoadshowList();
-            break;
-          default:
-            this.getSummaryList();
-        }
-      }
-    },
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    confirmPerson() {
-      this.tableData = [];
-      this.$emit("update:generaitondialogVisib", false);
-    },
-    //报名 代问
-    getlist() {
-      raiInterface
-        .activitySignupAskList({
-          ActivityId: this.generaitonId,
-        })
-        .then((res) => {
-          if (res.Ret == 200) {
-            this.tableData = res.Data.List;
-          }
-        });
-    },
-    //报告 代问
-    getReportList() {
-      raiInterface
-        .reportArticleAskList({
-          ReportId: this.generaitonId,
-        })
-        .then((res) => {
-          if (res.Ret == 200) {
-            this.tableData = res.Data.List;
-          }
-        });
-    },
-    //纪要 代问
-    getSummaryList() {
-      raiInterface
-        .summaryManageAskList({
-          ArticleId: this.generaitonId,
-        })
-        .then((res) => {
-          if (res.Ret == 200) {
-            this.tableData = res.Data.List;
-          }
-        });
-    },
-    //微路演
-    async getRoadshowList() {
-      const res =
-        this.tabActiveRoadshow == 4
-          ? await raiVideoApi.getMicroRoadshowVideo({
-              VideoId: this.generaitonId,
-            })
-          : this.tabActiveRoadshow == 3
-          ? await raiVideoApi.askserieVideoCollectionList({
-              AskserieVideoId: this.generaitonId,
-            })
-          : await raiVideoApi.activityVoiceAndVideoCommentList({
-              ActivityId: this.generaitonId,
-            });
-
-      if (res.Ret == 200) {
-        this.tableData = res.Data.List;
-      }
-    },
-  },
-};
-</script>
-<style lang="less">
+<style lang="scss">
 .container-generaiton {
   .generaiton-applydialog {
     width: 800px;

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

@@ -1,6 +1,77 @@
+<script setup>
+import { ref, computed, onMounted, reactive, toRefs, watch } from "vue";
+import { raiInterface } from "@/api/api.js";
+
+const props = defineProps({
+  isCompanyDetailShow: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
+  companyDetailId: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+});
+
+const dataList = ref([]);
+const childrenList = ref([]);
+const companyCount = ref(0);
+
+watch(
+  () => props.isCompanyDetailShow,
+  (newVal) => {
+    newVal && getCompanyDetailList();
+  }
+);
+// 获取点击详情的数据
+async function getCompanyDetailList() {
+  const res = await raiInterface.reportSelectionHistory({
+    ArticleId: props.companyDetailId,
+  });
+  if (res.Ret === 200) {
+    companyCount.value = res.Data.Count;
+    let childrenIndex = 0;
+    res.Data.List &&
+      res.Data.List.forEach((item) => {
+        if (childrenIndex < item.List.length) {
+          childrenIndex = item.List.length;
+        }
+      });
+    dataList.value = res.Data.List;
+    for (let i = 0; i < childrenIndex; i++) {
+      let childrenArr = [];
+      dataList.value.forEach((item) => {
+        childrenArr.push({
+          name: item.List[i] ? item.List[i].SubjectName : "",
+          ...item.List[i],
+        });
+        childrenArr.push({
+          name: item.List[i] ? item.List[i].Count : "",
+          ...item.List[i],
+        });
+      });
+      childrenList.value.push(childrenArr);
+    }
+  }
+}
+
+const $emit = defineEmits();
+
+// 关闭弹框
+function handleClose() {
+  dataList.value = [];
+  childrenList.value = [];
+  companyCount.value = 0;
+  $emit("update:companyDetailId", 0);
+  $emit("update:isCompanyDetailShow", false);
+}
+</script>
+
 <template>
   <div class="container-company-detail">
-    <el-dialog v-dialogDrag title="公司点击详情" width="800px" :close-on-click-modal="false" :modal-append-to-body="false" center :visible.sync="isCompanyDetailShow" :before-close="handleClose">
+    <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">
       <p v-if="companyCount" style="margin">公司总点击次数{{ companyCount }}次</p>
       <div class="table-body">
         <table>
@@ -12,9 +83,9 @@
           <tr v-for="(item, index) in childrenList" :key="index">
             <td v-for="(i, unm) in item" :key="unm" class="new-box">
               <span class="thbody-rs">{{ i.name }}</span>
-              <template v-if="i.IsNew == 1">
+              <div v-if="i.IsNew == 1">
                 <img v-if="unm % 2 == 0" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/new_subject.png" alt="" class="new-img" />
-              </template>
+              </div>
             </td>
           </tr>
         </table>
@@ -23,78 +94,6 @@
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-export default {
-  props: {
-    isCompanyDetailShow: {
-      type: "boolean",
-      default: false,
-      required: true,
-    },
-    companyDetailId: {
-      type: Number,
-      required: true,
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      dataList: [],
-      childrenList: [],
-      companyCount: 0,
-    };
-  },
-  watch: {
-    isCompanyDetailShow: {
-      handler(newValue) {
-        newValue && this.getCompanyDetailList();
-      },
-    },
-  },
-  methods: {
-    // 获取点击详情的数据
-    async getCompanyDetailList() {
-      const res = await raiInterface.reportSelectionHistory({
-        ArticleId: this.companyDetailId,
-      });
-      if (res.Ret === 200) {
-        this.companyCount = res.Data.Count;
-        let childrenIndex = 0;
-        res.Data.List &&
-          res.Data.List.forEach((item) => {
-            if (childrenIndex < item.List.length) {
-              childrenIndex = item.List.length;
-            }
-          });
-        this.dataList = res.Data.List;
-        for (let i = 0; i < childrenIndex; i++) {
-          let childrenArr = [];
-          this.dataList.forEach((item) => {
-            childrenArr.push({
-              name: item.List[i] ? item.List[i].SubjectName : "",
-              ...item.List[i],
-            });
-            childrenArr.push({
-              name: item.List[i] ? item.List[i].Count : "",
-              ...item.List[i],
-            });
-          });
-          this.childrenList.push(childrenArr);
-        }
-      }
-    },
-    // 关闭弹框
-    handleClose() {
-      this.dataList = [];
-      this.childrenList = [];
-      this.companyCount = 0;
-      this.$emit("update:companyDetailId", 0);
-      this.$emit("update:isCompanyDetailShow", false);
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .container-company-detail {
   .table-body {

src/views/rai_manage/components/reportComponents/RichTextMixins.js

@@ -1,65 +1,152 @@
-export default {
-  data() {
-    var that = this;
-    return {
-      froalaConfig: {
-        key: "BWC6D-16D3B2F3C2H1A6A7wdwgacxuB-33c1fB2twtfG3A7A6B6A3B3B2G3D2H2==",
-        toolbarButtons: [
-          "textColor",
-          "bold",
-          "italic",
-          "underline",
-          "strikeThrough",
-          "fontFamily",
-          "fontSize",
-          "color",
-          "paragraphStyle",
-          "lineHeight",
-          "paragraphFormat",
-          "align",
-          "insertHR",
-          "undo",
-          "redo",
-        ],
-        height: 450,
-        fontSize: ["12", "14", "16", "18", "20", "24", "28", "32", "36", "40"],
-        fontSizeDefaultSelection: "16",
-        theme: "dark", //主题
-        placeholderText: "请输入报告内容",
-        language: "zh_cn", //国际化
-        imageUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url
-        videoUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url
-        fileUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options
-        imageDefaultWidth: false,
-        quickInsertButtons: ["image", "table", "ul", "ol", "hr"], //快速插入项
-        toolbarVisibleWithoutSelection: true, //是否开启 不选中模式
-        toolbarSticky: false, //操作栏是否自动吸顶
-        saveInterval: 0,
-        events: {
-          initialized: function () {
-            that.editor = this;
-          },
-          keyup: function (e, editor) {
-            //添加事件，在每次按键按下时，都记录一下最后停留位置
-            that.$nextTick(function () {
-              that.lastEditRange = getSelection().getRangeAt(0);
-            });
-          },
-          click: function (e, editor) {
-            //添加事件，在每次鼠标点击时，都记录一下最后停留位置
-            that.$nextTick(function () {
-              that.lastEditRange = getSelection().getRangeAt(0);
-            });
-          },
-        },
-        charCounterCount: false,
-        reportloadding: false,
-        lastsavetime: "",
-        isAddEnter: false, //是否已经添加过
-        timer: null,
-        ischange: false,
-        isPublishloading: false,
+// export default froalaConfig = {
+//   key: "BWC6D-16D3B2F3C2H1A6A7wdwgacxuB-33c1fB2twtfG3A7A6B6A3B3B2G3D2H2==",
+//   toolbarButtons: [
+//     "textColor",
+//     "bold",
+//     "italic",
+//     "underline",
+//     "strikeThrough",
+//     "fontFamily",
+//     "fontSize",
+//     "color",
+//     "paragraphStyle",
+//     "lineHeight",
+//     "paragraphFormat",
+//     "align",
+//     "insertHR",
+//     "undo",
+//     "redo",
+//   ],
+//   height: 450,
+//   fontSize: ["12", "14", "16", "18", "20", "24", "28", "32", "36", "40"],
+//   fontSizeDefaultSelection: "16",
+//   theme: "dark", //主题
+//   placeholderText: "请输入报告内容",
+//   language: "zh_cn", //国际化
+//   imageUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url
+//   videoUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url
+//   fileUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options
+//   imageDefaultWidth: false,
+//   quickInsertButtons: ["image", "table", "ul", "ol", "hr"], //快速插入项
+//   toolbarVisibleWithoutSelection: true, //是否开启 不选中模式
+//   toolbarSticky: false, //操作栏是否自动吸顶
+//   saveInterval: 0,
+//   events: {
+//     initialized: function () {
+//       that.editor = this;
+//     },
+//     keyup: function (e, editor) {
+//       //添加事件，在每次按键按下时，都记录一下最后停留位置
+//       that.$nextTick(function () {
+//         that.lastEditRange = getSelection().getRangeAt(0);
+//       });
+//     },
+//     click: function (e, editor) {
+//       //添加事件，在每次鼠标点击时，都记录一下最后停留位置
+//       that.$nextTick(function () {
+//         that.lastEditRange = getSelection().getRangeAt(0);
+//       });
+//     },
+//   },
+//   charCounterCount: false,
+//   reportloadding: false,
+//   lastsavetime: "",
+//   isAddEnter: false, //是否已经添加过
+//   timer: null,
+//   ischange: false,
+//   isPublishloading: false,
+// };
+import { ref, nextTick } from "vue";
+
+export function useInitFroalaEditor() {
+  let frolaEditorContentChange = ref(false); //富文本内容是否改变
+  let lastFocusPosition = ref(null); //最后焦点位置
+
+  const options = {
+    key: "BWC6D-16D3B2F3C2H1A6A7wdwgacxuB-33c1fB2twtfG3A7A6B6A3B3B2G3D2H2==",
+    toolbarButtons: [
+      "textColor",
+      "bold",
+      "italic",
+      "underline",
+      "strikeThrough",
+      "fontFamily",
+      "fontSize",
+      "color",
+      "paragraphStyle",
+      "lineHeight",
+      "paragraphFormat",
+      "align",
+      "insertHR",
+      "undo",
+      "redo",
+    ],
+    height: 450,
+    fontSize: ["12", "14", "16", "18", "20", "24", "28", "32", "36", "40"],
+
+    fontSizeDefaultSelection: "16",
+    theme: "dark", //主题
+    placeholderText: "请输入报告内容",
+    language: "zh_cn", //国际化
+    imageUploadURL: import.meta.env.VITE_APP_API_URL + "/report/uploadImg", //上传url
+    videoUploadURL: import.meta.env.VITE_APP_API_URL + "/report/uploadImg", //上传url
+    fileUploadURL: import.meta.env.VITE_APP_API_URL + "/report/uploadImg", //上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options
+    imageDefaultWidth: false,
+    quickInsertButtons:  ["image", "table", "ul", "ol", "hr"], //快速插入项
+    toolbarVisibleWithoutSelection: true, //是否开启 不选中模式
+    toolbarSticky: false, //操作栏是否自动吸顶
+    saveInterval: 0,
+    charCounterCount: false,
+    events: {
+      // 内容变化事件
+      contentChanged: function () {
+        frolaEditorContentChange.value = true;
+        getSelection().rangeCount && (lastFocusPosition.value = getSelection().getRangeAt(0));
       },
-    };
-  },
-};
+      keyup: function (e, editor) {
+        nextTick(() => {
+          getSelection().rangeCount && (lastFocusPosition.value = getSelection().getRangeAt(0));
+        });
+      },
+      click: function (e, editor) {
+        nextTick(() => {
+          getSelection().rangeCount && (lastFocusPosition.value = getSelection().getRangeAt(0));
+        });
+      }
+    },
+  };
+
+  /**
+   * 初始化编辑器
+   * @param  el domid
+   * @param  opts 配置项
+   * 由于要获取到富文本实例 要在new FroalaEditor(el,opt,callback)的callback中才能获取到
+   * 方案一返回一个promise
+   * 方案二直接返回富文本实例 无法在调用initFroalaEditor方法后立即执行实例上的一些方法或者读取属性
+   * 一般写个settimeout 可以解决
+   */
+  const initFroalaEditor = (el, opts) => {
+    // 方案一
+    // let ins=null
+    // return new Promise((resolve,reject)=>{
+    // 	options.height=opts?.height??500
+    // 	console.log(options);
+    // 	ins=new FroalaEditor(el, options,()=>{
+    // 		// console.log(ins);
+    // 		resolve(ins)
+    // 	})
+    // })
+
+    // 方案二
+    options.height = opts?.height ?? 500;
+    options.height = options.height < 350 ? 350 : options.height;
+    console.log(options);
+    return new FroalaEditor(el, options);
+  };
+
+  return {
+    lastFocusPosition,
+    frolaEditorContentChange,
+    initFroalaEditor,
+  };
+}

src/views/rai_manage/components/richText.vue

@@ -1,127 +1,115 @@
 <template>
   <div class="richtext">
-    <froala :id="'editor' + spareId" :tag="'textarea'" :config="froalaConfig" v-model="valueText" @input="inputHandler"></froala>
+    <froala :id="spareId" :tag="'textarea'" :config="froalaConfig" v-model:value="modelText"></froala>
   </div>
 </template>
 
-<script>
-import VueFroala from "vue-froala-wysiwyg";
-export default {
-  name: "",
-  components: {},
-  model: {
-    prop: "valueText",
-    event: "contentText",
+<script setup>
+import { ref, watch, nextTick } from "vue";
+const props = defineProps({
+  spareId: {
+    type: String,
+    required: true,
   },
-  props: {
-    spareId: {
-      type: String,
-      required: true,
+  isText: {
+    type: String,
+    required: true,
+    default: "",
+  },
+});
+
+const modelText = defineModel();
+
+let frolaEditorContentChange = ref(false); //富文本内容是否改变
+let lastFocusPosition = ref(null); //最后焦点位置
+let imgUploadFlag = ref(true); //图片是否上传完成
+const froalaConfig = ref({
+  key: "BWC6D-16D3B2F3C2H1A6A7wdwgacxuB-33c1fB2twtfG3A7A6B6A3B3B2G3D2H2==",
+  toolbarButtons: [
+    "insertImage",
+    "textColor",
+    "bold",
+    "italic",
+    "underline",
+    "strikeThrough",
+    "fontFamily",
+    "fontSize",
+    "color",
+    "paragraphStyle",
+    "lineHeight",
+    "paragraphFormat",
+    "align",
+    "insertHR",
+    "undo",
+    "redo",
+  ],
+  height: 400,
+  fontSize: ["12", "14", "16", "18", "20", "24", "28", "32", "36", "40"],
+  fontSizeDefaultSelection: "16",
+  theme: "dark", //主题
+  language: "zh_cn", //国际化
+  imageUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url
+  videoUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url
+  fileUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options
+  imageDefaultWidth: false,
+  quickInsertButtons: ["image", "table", "ul", "ol", "hr"], //快速插入项
+  toolbarVisibleWithoutSelection: true, //是否开启 不选中模式
+  toolbarSticky: false, //操作栏是否自动吸顶
+  saveInterval: 0,
+  charCounterCount: false,
+  reportloadding: false,
+  lastsavetime: "",
+  isAddEnter: false, //是否已经添加过
+  timer: null,
+  ischange: false,
+  isPublishloading: false,
+  events: {
+    // 内容变化事件
+    contentChanged: function () {
+      frolaEditorContentChange.value = true;
+      getSelection().rangeCount && (lastFocusPosition.value = getSelection().getRangeAt(0));
     },
-    isText: {
-      type: String,
-      required: true,
-      default: "",
+    keyup: function (e, editor) {
+      nextTick(() => {
+        getSelection().rangeCount && (lastFocusPosition.value = getSelection().getRangeAt(0));
+      });
     },
-    valueText: {
-      type: String,
-      required: true,
+    click: function (e, editor) {
+      nextTick(() => {
+        getSelection().rangeCount && (lastFocusPosition.value = getSelection().getRangeAt(0));
+      });
     },
-  },
-  watch: {
-    isText: {
-      handler(newVal) {
-        if (newVal) {
-          this.froalaConfig.placeholderText = newVal;
-        }
-      },
-      deep: true,
-      immediate: true,
+    "image.beforePasteUpload": function () {
+      imgUploadFlag.value = false;
     },
-  },
-  data() {
-    var that = this;
-    return {
-      editor: null,
-      froalaConfig: {
-        //More -> https://www.froala.com/wysiwyg-editor/docs/options
-        // toolbarButtons: ['undo', 'redo', 'clearFormatting', '|', 'bold', 'italic', 'underline','strikeThrough','|', 'fontFamily', 'fontSize', 'color', '|','paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', '|', 'print', 'spellChecker', 'help', '|', 'fullscreen'],//['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'spellChecker', 'help', 'html', '|', 'undo', 'redo'],//显示可操作项
-        toolbarButtons: [
-          "insertImage",
-          "textColor",
-          "bold",
-          "italic",
-          "underline",
-          "strikeThrough",
-          "fontFamily",
-          "fontSize",
-          "color",
-          "paragraphStyle",
-          "lineHeight",
-          "paragraphFormat",
-          "align",
-          "insertHR",
-          "undo",
-          "redo",
-        ],
-        height: 400,
-        fontSize: ["12", "14", "16", "18", "20", "24", "28", "32", "36", "40"],
-        fontSizeDefaultSelection: "16",
-        theme: "dark", //主题
-        // placeholderText: this.isText,
-        language: "zh_cn", //国际化
-        imageUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url
-        videoUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url
-        fileUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options
-        imageDefaultWidth: false,
-        // imageEditButtons:['imageAlign', 'imageCaption', 'imageRemove', '|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageStyle', 'imageAlt', 'imageSize'],
-        quickInsertButtons: ["image", "table", "ul", "ol", "hr"], //快速插入项
-        toolbarVisibleWithoutSelection: true, //是否开启 不选中模式
-        // disableRightClick:true,//是否屏蔽右击
-        // colorsHEXInput:false,//关闭16进制色值
-        toolbarSticky: false, //操作栏是否自动吸顶
-        // zIndex:99999,
-        saveInterval: 0,
-        events: {
-          initialized: function () {
-            // this.editor = editor;
-            that.editor = this;
-            // that.editor.html.set(that.value);
-            // that.setHtml()
-          },
-          keyup: function (e, editor) {
-            //添加事件，在每次按键按下时，都记录一下最后停留位置
-            that.$nextTick(function () {
-              that.lastEditRange = getSelection().getRangeAt(0);
-            });
-          },
-          click: function (e, editor) {
-            //添加事件，在每次鼠标点击时，都记录一下最后停留位置
-            that.$nextTick(function () {
-              that.lastEditRange = getSelection().getRangeAt(0);
-            });
-          },
-        },
-        charCounterCount: false,
-        reportloadding: false,
-        lastsavetime: "",
-        isAddEnter: false, //是否已经添加过
-        timer: null,
-        ischange: false,
-        isPublishloading: false,
-      },
-      value: "",
-    };
-  },
-  methods: {
-    inputHandler() {
-      this.$emit("contentText", this.valueText);
+    "image.beforeUpload": function () {
+      imgUploadFlag.value = false;
+    },
+    "image.inserted": function () {
+      imgUploadFlag.value = true;
+    },
+    "image.error": function () {
+      imgUploadFlag.value = true;
     },
   },
-};
+});
+
+watch(
+  () => props.isText,
+  (newVal) => {
+    if (newVal) {
+      froalaConfig.value.placeholderText = newVal;
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
 </script>
 <style lang="scss">
 .richtext {
+  width: 100%;
   .fr-placeholder {
     margin-top: 41px !important;
   }

src/views/rai_manage/components/shortcutDialog.vue

@@ -1,195 +1,171 @@
-<template>
- <div class="container-shortcut">
-     <el-dialog
-      v-dialogDrag 
-      :close-on-click-modal="false"
-      :modal-append-to-body="false"
-      center
-      top="5vh"
-      :visible.sync="shortcutIsDialog"
-      customClass="custom-shortcut"
-      :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">快捷检索标签</span>
-      </div>
-     <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.trim="item.KeyWord"
-          placeholder="请输入标签名称"
-          clearable
-        ></el-input>
-         <img @click="deleteItem(index)" src="~@/assets/img/icons/delete-Item.png"  :class="index == 0 ? 'defaultyi' : ''" alt="">
-      </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>
-    </el-dialog>
- </div>
-</template>
+<script setup>
+import { ref, computed, onMounted, reactive, toRefs, watch } from "vue";
+import { raiInterface } from "@/api/api.js";
+const dynamicItem = ref([]);
 
-<script>
-import { raiInterface } from '@/api/api.js'
-export default {
-  name: '',
-  components: {},
-  props: {
-      shortcutIsDialog:{
-          type: Boolean,
-          default: false
-      }
+const props = defineProps({
+  shortcutIsDialog: {
+    type: Boolean,
+    default: false,
   },
-  data () {
-    return {
-        dynamicItem:[]
+});
+
+const $emit = defineEmits();
+
+computed(
+  () => shortcutIsDialog.value,
+  () => {
+    if (props.shortcutIsDialog) {
+      fastSearchKeWord();
     }
-  },
-  computed: {},
-  watch: {
-      shortcutIsDialog:{
-          handler(){
-              if(this.shortcutIsDialog) {
-                  this.fastSearchKeWord()
-              }
-          }
-      }
-  },
-  created () {},
-  mounted () {},
-  methods: {
-      fastSearchKeWord(){
-          raiInterface.fastSearchKeWordsummaryManage().then((res)=>{
-              if(res.Ret === 200) {
-              this.dynamicItem = res.Data.List?res.Data.List:[]
-              }
-          })
-      },
-      //弹框取消事件
-      confirmPerson(){
-          this.dynamicItem=[]
-          this.$emit('update:shortcutIsDialog',false);
-      },
-      //弹框确认事件
-      confirmSubmit(){
-        const arr = []
-        this.dynamicItem.forEach(item =>arr.push(item.KeyWord))
-        const keyWord = arr.join(',')
-        raiInterface.editFastSearchKeWordsummary({keyWord}).then((res)=>{
-            if(res.Ret === 200) {
-            this.dynamicItem=[]
-            this.$emit('update:shortcutIsDialog',false);
-            }
-        })
-        
-      },
-      //添加活动标签
-      addItem(){
-          if(this.dynamicItem.length == 20) return 
-          this.dynamicItem.push({KeyWord: ""})
-      },
-      //删除活动标签
-      deleteItem(index){
-          this.dynamicItem.splice(index,1)
-      },
   }
+);
+function fastSearchKeWord() {
+  raiInterface.fastSearchKeWordsummaryManage().then((res) => {
+    if (res.Ret === 200) {
+      dynamicItem.value = res.Data.List ? res.Data.List : [];
+    }
+  });
+}
+//弹框取消事件
+function confirmPerson() {
+  dynamicItem.value = [];
+  $emit("update:shortcutIsDialog", false);
+}
+//弹框确认事件
+function confirmSubmit() {
+  const arr = [];
+  dynamicItem.value.forEach((item) => arr.push(item.KeyWord));
+  const keyWord = arr.join(",");
+  raiInterface.editFastSearchKeWordsummary({ keyWord }).then((res) => {
+    if (res.Ret === 200) {
+      dynamicItem.value = [];
+      $emit("update:shortcutIsDialog", false);
+    }
+  });
+}
+//添加活动标签
+function addItem() {
+  if (dynamicItem.length == 20) return;
+  dynamicItem.value.push({ KeyWord: "" });
+}
+//删除活动标签
+function deleteItem(index) {
+  dynamicItem.value.splice(index, 1);
 }
 </script>
-<style  lang="less">
+
+<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">
+      <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">快捷检索标签</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.trim="item.KeyWord" placeholder="请输入标签名称" clearable></el-input>
+          <img @click="deleteItem(index)" src="~@/assets/img/icons/delete-Item.png" :class="index == 0 ? 'defaultyi' : ''" alt="" />
+        </div>
+      </div>
+      <div class="add-box">
+        <img @click="addItem" :src="$icons.addblue" />
+        <span @click="addItem">添加</span>
+      </div>
+      <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>
+</template>
+
+<style lang="scss">
 .container-shortcut {
- .custom-shortcut {
-    width: 600px;  
+  .custom-shortcut {
+    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/cygxManage/bannerManage.vue

@@ -8,7 +8,7 @@ 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'
 const bannerTableColumn = computed(() => {
   return BannerTableColumn;
 });
@@ -217,10 +217,8 @@ function setupSortable(dom, index) {
       const fromIndex = parseInt(from.getAttribute("data-index"));
       const toIndex = parseInt(to.getAttribute("data-index"));
       if (newIndex == oldIndex && fromIndex == toIndex) return;
-      // const currRow = _.cloneDeep(dataList.value[fromIndex].tableList[oldIndex]); //拷贝数据
-      // const newList = _.cloneDeep(dataList.value[toIndex].tableList);
-      const currRow = dataList.value[fromIndex].tableList[oldIndex]; //拷贝数据
-      const newList = dataList.value[toIndex].tableList;
+      const currRow = _.cloneDeep(dataList.value[fromIndex].tableList[oldIndex]); //拷贝数据
+      const newList = _.cloneDeep(dataList.value[toIndex].tableList);
       let PreviousBannerId = 0;
       let NextBannerId = 0;
 

src/views/rai_manage/cygxManage/lableManage.vue

@@ -5,6 +5,7 @@ import mPage from "@/components/mPage.vue";
 import { raiInterface } from "@/api/api.js";
 import LableDlg from "./components/lableDlg.vue";
 import { ElMessage,ElMessageBox } from "element-plus";
+import _ from 'lodash'
 
 const labelForm = ref({
   TagName: "",
@@ -122,8 +123,7 @@ function setupSortable() {
     sort: true,
     onEnd(obj) {
       const { newIndex, oldIndex } = obj;
-      // const newList = _.cloneDeep(lableList.value);
-      const newList = lableList.value;
+      const newList = _.cloneDeep(lableList.value);
       let PrevTagId = 0;
       let NextTagId = 0;
       if (newIndex === 0) {

src/views/rai_manage/reportManage/components/addHaveReport.vue

@@ -1,6 +1,295 @@
+<script setup>
+import { ref, computed, onMounted, reactive, toRefs, watch } from "vue";
+import { Calendar, Search, InfoFilled } from "@element-plus/icons-vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+import { raiInterface } from "@/api/api.js";
+import _ from "lodash";
+
+import RichText from "../../components/richText.vue";
+
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  addOfEditForm: {
+    content: "",
+    title: "",
+    synopsis: "",
+    department: "", // 作者
+    regions: "",
+    publishTime: "",
+    industry: "", //行业
+    property: [], //产业
+    subject: [], // 标的
+    matchTypeName: "", //报告类型
+  },
+  rulesOption: {
+    regions: [{ required: true, message: "请输入标题栏名称（限10字以内）", trigger: "blur" }],
+    title: [{ required: true, message: "请输入标题", trigger: "blur" }],
+    publishTime: [{ required: true, message: "请选择发布时间", trigger: "change" }],
+    industry: [{ required: true, message: "请选择行业", trigger: "change" }],
+    matchTypeName: [{ required: true, message: "请选择报告类型", trigger: "change" }],
+  },
+  chartPermissionList: [], //行业的数组
+  selectedIndustryArr: [], //产业的数组
+  subjectData: [], //标的的数组
+  matchTypeNameList: [], //报告类型的数组
+  isShowStatus: true,
+  addMatchTypeDlg: false,
+  addMatchTypeData: {
+    name: "",
+    type: "",
+  },
+  matchTypeRules: {
+    name: [{ required: true, message: "输入类型名称", trigger: "blur" }],
+    type: [{ required: true, message: "请选择类型归属", trigger: "change" }],
+  },
+  dlgTextRender: "",
+  timeInterval: null,
+});
+
+// 报告的缓存处理数据
+function dataInit() {
+  if (sessionStorage.getItem("addHaveReportQY")) {
+    let data = JSON.parse(sessionStorage.getItem("addHaveReportQY"));
+    setTimeout(async () => {
+      pageState.addOfEditForm = {
+        regions: data.Detail.ColumnName,
+        content: data.Detail.Body,
+        title: data.Detail.Title,
+        synopsis: data.Detail.Abstract,
+        department: data.Detail.Department,
+        publishTime: data.Detail.PublishTime,
+        property: data.Detail.ListIndustrial,
+        subject: data.Detail.ListSubject,
+        industry: data.Detail.ChartPermissionId,
+        matchTypeName: data.Detail.MatchTypeId,
+      };
+      pageState.isShowStatus = data.Detail.Status == 0;
+      await industryChangeHandler();
+      await propertyChangeHandler();
+    }, 200);
+  }
+  pageState.timeInterval = setInterval(() => {
+    let params = {
+      PublishTime: pageState.addOfEditForm.publishTime,
+      ColumnName: pageState.addOfEditForm.regions,
+      Title: pageState.addOfEditForm.title,
+      Abstract: pageState.addOfEditForm.synopsis,
+      Department: pageState.addOfEditForm.department,
+      Body: pageState.addOfEditForm.content,
+      IndustrialManagementIds: pageState.addOfEditForm.property,
+      IndustrialSubjectIds: pageState.addOfEditForm.subject,
+      ChartPermissionId: pageState.addOfEditForm.industry,
+      MatchTypeId: pageState.addOfEditForm.matchTypeName,
+    };
+    sessionStorage.setItem("addHaveReportQY", JSON.stringify(params));
+  }, 120000);
+}
+// 产业的change事件
+function propertyChangeHandler(val) {
+  if (pageState.addOfEditForm.property && pageState.addOfEditForm.property.length) {
+    if (val) {
+      pageState.subjectData = [];
+      pageState.addOfEditForm.subject = [];
+    }
+    getSubjectList();
+  } else {
+    pageState.subjectData = [];
+    pageState.addOfEditForm.subject = [];
+  }
+}
+// 行业的change事件
+function industryChangeHandler(value) {
+  if (pageState.addOfEditForm.industry) {
+    if (value) {
+      industryDataInit();
+    }
+    getIndustryList();
+    getMatchTypeNameList();
+    pageState.chartPermissionList.forEach((item) => item.ChartPermissionId === pageState.addOfEditForm.industry && (pageState.dlgTextRender = item.PermissionName));
+  } else {
+    industryDataInit();
+  }
+}
+// 行业的筛选框发生change事件后 清理联动的数据
+function industryDataInit() {
+  pageState.selectedIndustryArr = [];
+  pageState.addOfEditForm.property = "";
+  //关联报告
+  pageState.matchTypeNameList = [];
+  pageState.addOfEditForm.matchTypeName = "";
+  pageState.dlgTextRender = "";
+  pageState.subjectData = [];
+  pageState.addOfEditForm.subject = [];
+}
+//添加报告类型
+function addMatchTypeDlgIsShow() {
+  if (!pageState.addOfEditForm.industry) return ElMessage.error("请先选择行业");
+  pageState.addMatchTypeDlg = true;
+}
+//获取报告类型
+async function getMatchTypeNameList() {
+  const res = await raiInterface.reportMappingMatchTypeRep({
+    ChartPermissionId: pageState.addOfEditForm.industry,
+  });
+  if (res.Ret !== 200) return;
+  pageState.matchTypeNameList = res.Data.List || [];
+}
+// 获取标的
+async function getSubjectList() {
+  const res = await raiInterface.getindustrialSubjectlistIds({
+    IndustrialManagementIdStr: pageState.addOfEditForm.property.join(","),
+  });
+  if (res.Ret === 200) {
+    pageState.subjectData = res.Data.List || [];
+  }
+}
+// 获取产业
+async function getIndustryList() {
+  const res = await raiInterface.getIndustrialManagement({
+    ChartPermissionId: pageState.addOfEditForm.industry,
+  });
+  if (res.Ret === 200) {
+    pageState.selectedIndustryArr = res.Data.List || [];
+  }
+}
+//获取行业
+async function chartPermission() {
+  const res = await raiInterface.reportChartPermissionFirstProduct();
+  if (res.Ret === 200) {
+    pageState.chartPermissionList = res.Data.List || [];
+  }
+}
+//进来编辑的 获取内容的事件
+async function getDetail() {
+  const res = await raiInterface.internalProductInteriorDetail({
+    ProductInteriorId: Number($route.query.id),
+  });
+  if (res.Ret !== 200) return;
+  pageState.addOfEditForm = {
+    regions: res.Data.Detail.ColumnName,
+    content: res.Data.Detail.Body,
+    title: res.Data.Detail.Title,
+    synopsis: res.Data.Detail.Abstract,
+    department: res.Data.Detail.Department,
+    publishTime: res.Data.Detail.PublishTime,
+    property: res.Data.Detail.ListIndustrial ? res.Data.Detail.ListIndustrial.map((item) => item.IndustrialManagementId) : [],
+    subject: res.Data.Detail.ListSubject ? res.Data.Detail.ListSubject.map((item) => item.IndustrialSubjectId) : [],
+    industry: res.Data.Detail.ChartPermissionId,
+    matchTypeName: res.Data.Detail.MatchTypeId,
+  };
+  pageState.isShowStatus = res.Data.Detail.Status == 0;
+  await industryChangeHandler();
+  await propertyChangeHandler();
+}
+
+const addOfEditFormRef = ref(null);
+
+//表单保存发布事件
+const submitForm = _.debounce(async function (type) {
+  addOfEditFormRef.value.validate(async (valid) => {
+    if (valid) {
+      let params = {
+        ProductInteriorId: $route.query.id ? Number($route.query.id) : 0,
+        DoType: type == "保存" ? 0 : 1,
+        PublishTime: pageState.addOfEditForm.publishTime,
+        ColumnName: pageState.addOfEditForm.regions,
+        Title: pageState.addOfEditForm.title,
+        Abstract: pageState.addOfEditForm.synopsis,
+        Department: pageState.addOfEditForm.department,
+        Body: pageState.addOfEditForm.content.replace(/<p data-f-id=\"pbf\".*?<\/p>/g, ""),
+        IndustrialManagementIds: pageState.addOfEditForm.property ? pageState.addOfEditForm.property.join(",") : "",
+        IndustrialSubjectIds: pageState.addOfEditForm.subject ? pageState.addOfEditForm.subject.join(",") : "",
+        ChartPermissionId: pageState.addOfEditForm.industry,
+        MatchTypeId: pageState.addOfEditForm.matchTypeName,
+      };
+      const res = await raiInterface.internalPreserveAndPublish(params);
+      if (res.Ret === 200) {
+        ElMessage.success("操作成功！");
+        clearInterval(pageState.timeInterval);
+        sessionStorage.removeItem("addHaveReportQY");
+        addOfEditFormRef.value.resetFields();
+        $router.push("/internalTesting");
+      }
+    }
+  });
+}, 500);
+//表单取消事件
+function cancelBtn() {
+  clearInterval(pageState.timeInterval);
+  sessionStorage.removeItem("addHaveReportQY");
+  addOfEditFormRef.value.resetFields();
+  $router.push("/internalTesting");
+}
+
+const addMatchTypeDataRef = ref(null);
+
+// 新增报告类型的确定事件
+function addMatchSubmitForm() {
+  addMatchTypeDataRef.value.validate(async (valid) => {
+    if (valid) {
+      console.log("ok");
+      const res = await raiInterface.reportMappingAdd({
+        ReportType: pageState.addMatchTypeData.type,
+        MatchTypeName: pageState.addMatchTypeData.name,
+        ChartPermissionId: pageState.addOfEditForm.industry,
+        ChartPermissionName: pageState.dlgTextRender,
+      });
+      if (res.Ret === 200) {
+        await getMatchTypeNameList();
+        ElMessage.success("添加成功");
+        pageState.addOfEditForm.matchTypeName = res.Data.Id;
+        pageState.confirmMatchType();
+      }
+    }
+  });
+}
+//关闭弹框事件
+function confirmMatchType() {
+  pageState.addMatchTypeDlg = false;
+  addMatchTypeDataRef.value.resetFields();
+  pageState.addMatchTypeData = {
+    name: "",
+    type: "",
+  };
+}
+
+onMounted(() => {
+  if ($route.query.id) {
+    // 编辑进来的
+    getDetail();
+  } else {
+    dataInit();
+  }
+  chartPermission();
+});
+
+onBeforeRouteLeave((to, from, next) => {
+  clearInterval(pageState.timeInterval);
+  next();
+});
+
+const {
+  addOfEditForm,
+  rulesOption,
+  chartPermissionList,
+  selectedIndustryArr,
+  subjectData,
+  matchTypeNameList,
+  isShowStatus,
+  addMatchTypeDlg,
+  addMatchTypeData,
+  matchTypeRules,
+  dlgTextRender,
+  timeInterval,
+} = toRefs(pageState);
+</script>
+
 <template>
   <div class="container-summary">
-    <el-form :model="addOfEditForm" :rules="rulesOption" ref="addOfEditForm">
+    <el-form :model="addOfEditForm" :rules="rulesOption" ref="addOfEditFormRef">
       <el-card class="card-top">
         <el-form-item prop="regions">
           <el-input placeholder="标题栏名称（限10字以内)" :maxlength="10" clearable v-model="addOfEditForm.regions" style="width: 360px"> </el-input>
@@ -38,7 +327,7 @@
         <el-form-item>
           <el-input style="width: 755px" clearable v-model="addOfEditForm.synopsis" placeholder="请输入摘要(选填)"></el-input>
         </el-form-item>
-        <froala id="froala-editor" ref="froalaEditor" :tag="'textarea'" :config="froalaConfig" v-model="addOfEditForm.content"></froala>
+        <RichText spareId="froala-editor" isText="请输入报告内容" v-model="addOfEditForm.content" />
         <div class="form-item-bootm">
           <el-button type="primary" @click="submitForm('保存')">保存</el-button>
           <el-button type="primary" @click="submitForm('发布')" v-if="isShowStatus">发布</el-button>
@@ -46,9 +335,9 @@
         </div>
       </el-card>
     </el-form>
-    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center title="新建报告类型" :visible.sync="addMatchTypeDlg" :before-close="confirmMatchType" width="500px">
+    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center title="新建报告类型" v-model="addMatchTypeDlg" :before-close="confirmMatchType" width="500px">
       <p style="margin-bottom: 10px">所属行业：{{ dlgTextRender }}</p>
-      <el-form :model="addMatchTypeData" :rules="matchTypeRules" ref="addMatchTypeData">
+      <el-form :model="addMatchTypeData" :rules="matchTypeRules" ref="addMatchTypeDataRef">
         <el-form-item prop="type">
           <el-radio-group v-model="addMatchTypeData.type">
             <el-radio :label="2">产业报告</el-radio>
@@ -67,271 +356,6 @@
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-import RichTextMixins from "../../components/reportComponents/RichTextMixins";
-export default {
-  name: "",
-  data() {
-    return {
-      addOfEditForm: {
-        content: "",
-        title: "",
-        synopsis: "",
-        department: "", // 作者
-        regions: "",
-        publishTime: "",
-        industry: "", //行业
-        property: [], //产业
-        subject: [], // 标的
-        matchTypeName: "", //报告类型
-      },
-      rulesOption: {
-        regions: [{ required: true, message: "请输入标题栏名称（限10字以内）", trigger: "blur" }],
-        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
-        publishTime: [{ required: true, message: "请选择发布时间", trigger: "change" }],
-        industry: [{ required: true, message: "请选择行业", trigger: "change" }],
-        matchTypeName: [{ required: true, message: "请选择报告类型", trigger: "change" }],
-      },
-      chartPermissionList: [], //行业的数组
-      selectedIndustryArr: [], //产业的数组
-      subjectData: [], //标的的数组
-      matchTypeNameList: [], //报告类型的数组
-      isShowStatus: true,
-      addMatchTypeDlg: false,
-      addMatchTypeData: {
-        name: "",
-        type: "",
-      },
-      matchTypeRules: {
-        name: [{ required: true, message: "输入类型名称", trigger: "blur" }],
-        type: [{ required: true, message: "请选择类型归属", trigger: "change" }],
-      },
-      dlgTextRender: "",
-      timeInterval: null,
-    };
-  },
-  mixins: [RichTextMixins],
-  computed: {},
-  created() {},
-  mounted() {
-    if (this.$route.query.id) {
-      // 编辑进来的
-      this.getDetail();
-    } else {
-      this.dataInit();
-    }
-    this.chartPermission();
-  },
-  methods: {
-    // 报告的缓存处理数据
-    dataInit() {
-      if (sessionStorage.getItem("addHaveReportQY")) {
-        let data = JSON.parse(sessionStorage.getItem("addHaveReportQY"));
-        setTimeout(async () => {
-          this.addOfEditForm = {
-            regions: data.Detail.ColumnName,
-            content: data.Detail.Body,
-            title: data.Detail.Title,
-            synopsis: data.Detail.Abstract,
-            department: data.Detail.Department,
-            publishTime: data.Detail.PublishTime,
-            property: data.Detail.ListIndustrial,
-            subject: data.Detail.ListSubject,
-            industry: data.Detail.ChartPermissionId,
-            matchTypeName: data.Detail.MatchTypeId,
-          };
-          this.isShowStatus = data.Detail.Status == 0;
-          await this.industryChangeHandler();
-          await this.propertyChangeHandler();
-        }, 200);
-      }
-      this.timeInterval = setInterval(() => {
-        let params = {
-          PublishTime: this.addOfEditForm.publishTime,
-          ColumnName: this.addOfEditForm.regions,
-          Title: this.addOfEditForm.title,
-          Abstract: this.addOfEditForm.synopsis,
-          Department: this.addOfEditForm.department,
-          Body: this.addOfEditForm.content,
-          IndustrialManagementIds: this.addOfEditForm.property,
-          IndustrialSubjectIds: this.addOfEditForm.subject,
-          ChartPermissionId: this.addOfEditForm.industry,
-          MatchTypeId: this.addOfEditForm.matchTypeName,
-        };
-        sessionStorage.setItem("addHaveReportQY", JSON.stringify(params));
-      }, 120000);
-    },
-    // 产业的change事件
-    propertyChangeHandler(val) {
-      if (this.addOfEditForm.property && this.addOfEditForm.property.length) {
-        if (val) {
-          this.subjectData = [];
-          this.addOfEditForm.subject = [];
-        }
-        this.getSubjectList();
-      } else {
-        this.subjectData = [];
-        this.addOfEditForm.subject = [];
-      }
-    },
-    // 行业的change事件
-    industryChangeHandler(value) {
-      if (this.addOfEditForm.industry) {
-        if (value) {
-          this.industryDataInit();
-        }
-        this.getIndustryList();
-        this.getMatchTypeNameList();
-        this.chartPermissionList.forEach((item) => item.ChartPermissionId === this.addOfEditForm.industry && (this.dlgTextRender = item.PermissionName));
-      } else {
-        this.industryDataInit();
-      }
-    },
-    // 行业的筛选框发生change事件后 清理联动的数据
-    industryDataInit() {
-      this.selectedIndustryArr = [];
-      this.addOfEditForm.property = "";
-      //关联报告
-      this.matchTypeNameList = [];
-      this.addOfEditForm.matchTypeName = "";
-      this.dlgTextRender = "";
-      this.subjectData = [];
-      this.addOfEditForm.subject = [];
-    },
-    //添加报告类型
-    addMatchTypeDlgIsShow() {
-      if (!this.addOfEditForm.industry) return this.$message.error("请先选择行业");
-      this.addMatchTypeDlg = true;
-    },
-    //获取报告类型
-    async getMatchTypeNameList() {
-      const res = await raiInterface.reportMappingMatchTypeRep({
-        ChartPermissionId: this.addOfEditForm.industry,
-      });
-      if (res.Ret !== 200) return;
-      this.matchTypeNameList = res.Data.List || [];
-    },
-    // 获取标的
-    async getSubjectList() {
-      const res = await raiInterface.getindustrialSubjectlistIds({
-        IndustrialManagementIdStr: this.addOfEditForm.property.join(","),
-      });
-      if (res.Ret === 200) {
-        this.subjectData = res.Data.List || [];
-      }
-    },
-    // 获取产业
-    async getIndustryList() {
-      const res = await raiInterface.getIndustrialManagement({
-        ChartPermissionId: this.addOfEditForm.industry,
-      });
-      if (res.Ret === 200) {
-        this.selectedIndustryArr = res.Data.List || [];
-      }
-    },
-    //获取行业
-    async chartPermission() {
-      const res = await raiInterface.reportChartPermissionFirstProduct();
-      if (res.Ret === 200) {
-        this.chartPermissionList = res.Data.List || [];
-      }
-    },
-    //进来编辑的 获取内容的事件
-    async getDetail() {
-      const res = await raiInterface.internalProductInteriorDetail({
-        ProductInteriorId: Number(this.$route.query.id),
-      });
-      if (res.Ret !== 200) return;
-      this.addOfEditForm = {
-        regions: res.Data.Detail.ColumnName,
-        content: res.Data.Detail.Body,
-        title: res.Data.Detail.Title,
-        synopsis: res.Data.Detail.Abstract,
-        department: res.Data.Detail.Department,
-        publishTime: res.Data.Detail.PublishTime,
-        property: res.Data.Detail.ListIndustrial ? res.Data.Detail.ListIndustrial.map((item) => item.IndustrialManagementId) : [],
-        subject: res.Data.Detail.ListSubject ? res.Data.Detail.ListSubject.map((item) => item.IndustrialSubjectId) : [],
-        industry: res.Data.Detail.ChartPermissionId,
-        matchTypeName: res.Data.Detail.MatchTypeId,
-      };
-      this.isShowStatus = res.Data.Detail.Status == 0;
-      await this.industryChangeHandler();
-      await this.propertyChangeHandler();
-    },
-    //表单保存发布事件
-    submitForm: _.debounce(async function (type) {
-      this.$refs.addOfEditForm.validate(async (valid) => {
-        if (valid) {
-          let params = {
-            ProductInteriorId: this.$route.query.id ? Number(this.$route.query.id) : 0,
-            DoType: type == "保存" ? 0 : 1,
-            PublishTime: this.addOfEditForm.publishTime,
-            ColumnName: this.addOfEditForm.regions,
-            Title: this.addOfEditForm.title,
-            Abstract: this.addOfEditForm.synopsis,
-            Department: this.addOfEditForm.department,
-            Body: this.addOfEditForm.content.replace(/<p data-f-id=\"pbf\".*?<\/p>/g, ""),
-            IndustrialManagementIds: this.addOfEditForm.property ? this.addOfEditForm.property.join(",") : "",
-            IndustrialSubjectIds: this.addOfEditForm.subject ? this.addOfEditForm.subject.join(",") : "",
-            ChartPermissionId: this.addOfEditForm.industry,
-            MatchTypeId: this.addOfEditForm.matchTypeName,
-          };
-          const res = await raiInterface.internalPreserveAndPublish(params);
-          if (res.Ret === 200) {
-            this.$message.success("操作成功！");
-            clearInterval(this.timeInterval);
-            sessionStorage.removeItem("addHaveReportQY");
-            this.$refs.addOfEditForm.resetFields();
-            this.$router.push("/internalTesting");
-          }
-        }
-      });
-    }, 500),
-    //表单取消事件
-    cancelBtn() {
-      clearInterval(this.timeInterval);
-      sessionStorage.removeItem("addHaveReportQY");
-      this.$refs.addOfEditForm.resetFields();
-      this.$router.push("/internalTesting");
-    },
-    // 新增报告类型的确定事件
-    addMatchSubmitForm() {
-      this.$refs.addMatchTypeData.validate(async (valid) => {
-        if (valid) {
-          console.log("ok");
-          const res = await raiInterface.reportMappingAdd({
-            ReportType: this.addMatchTypeData.type,
-            MatchTypeName: this.addMatchTypeData.name,
-            ChartPermissionId: this.addOfEditForm.industry,
-            ChartPermissionName: this.dlgTextRender,
-          });
-          if (res.Ret === 200) {
-            await this.getMatchTypeNameList();
-            this.$message.success("添加成功");
-            this.addOfEditForm.matchTypeName = res.Data.Id;
-            this.confirmMatchType();
-          }
-        }
-      });
-    },
-    //关闭弹框事件
-    confirmMatchType() {
-      this.addMatchTypeDlg = false;
-      this.$refs.addMatchTypeData.resetFields();
-      this.addMatchTypeData = {
-        name: "",
-        type: "",
-      };
-    },
-  },
-  // 路由离开了 清除定时器
-  beforeRouteLeave(to, from, next) {
-    clearInterval(this.timeInterval);
-    next();
-  },
-};
-</script>
 <style scoped lang="scss">
 .container-summary {
   .card-top {

src/views/rai_manage/reportManage/components/roadshowApplyDlg.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <!-- 选择图片的弹框 -->
-    <el-dialog title="路演申请" :visible.sync="isRadshowApplyShow" width="50%" :before-close="handleClose" draggable :close-on-click-modal="false" :modal-append-to-body="false" center>
+    <el-dialog title="路演申请" v-model="props.isRadshowApplyShow" width="50%" :before-close="handleClose" draggable :close-on-click-modal="false" :modal-append-to-body="false" center>
       <div>
         <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" border>
           <el-table-column prop="SubjectName" align="center" label="申请标的"></el-table-column>
@@ -15,53 +15,42 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, onMounted, reactive, toRefs, watch } from "vue";
 import { raiInterface } from "@/api/api.js";
 
-export default {
-  name: "",
-  components: {},
-  props: {
-    isRadshowApplyShow: {
-      type: Boolean,
-      default: false,
-    },
-    radshowApplyId: {
-      type: Number,
-      default: 0,
-    },
+const props = defineProps({
+  isRadshowApplyShow: {
+    type: Boolean,
+    default: false,
   },
-  data() {
-    return {
-      tableData: [],
-    };
+  radshowApplyId: {
+    type: Number,
+    default: 0,
   },
-  computed: {},
-  watch: {
-    isRadshowApplyShow: {
-      handler(newVal) {
-        newVal && this.getTableList();
-      },
-    },
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    // 关闭弹框
-    handleClose() {
-      this.$emit("update:isRadshowApplyShow", false);
-      this.$emit("update:radshowApplyId", 0);
-    },
-    // 获取表格数据
-    async getTableList() {
-      const res = await raiInterface.reportSelectionTarryList({
-        ArticleId: this.radshowApplyId,
-      });
-      if (res.Ret === 200) {
-        this.tableData = res.Data.List || [];
-      }
-    },
-  },
-};
+});
+const tableData = ref([]);
+
+watch(
+  () => props.isRadshowApplyShow,
+  (newVal) => {
+    newVal && getTableList();
+  }
+);
+
+const $emit = defineEmits();
+
+function handleClose() {
+  $emit("update:isRadshowApplyShow", false);
+  $emit("update:radshowApplyId", 0);
+}
+// 获取表格数据
+async function getTableList() {
+  const res = await raiInterface.reportSelectionTarryList({
+    ArticleId: props.radshowApplyId,
+  });
+  if (res.Ret === 200) {
+    tableData.value = res.Data.List || [];
+  }
+}
 </script>
-<style scoped lang="scss"></style>

src/views/rai_manage/reportManage/internalTesting.vue

@@ -1,3 +1,159 @@
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  beforeRouteEnter(to, from, next) {
+    if (from.path != "/editHaveReport") {
+      sessionStorage.removeItem("internalTestingBack");
+    }
+    next();
+  },
+});
+</script>
+
+<script setup>
+import { ref, computed, onMounted, reactive, toRefs, watch } from "vue";
+import { Calendar, Search, InfoFilled } from "@element-plus/icons-vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+
+import mPage from "@/components/mPage.vue";
+import { raiInterface } from "@/api/api.js";
+
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  page_no: sessionStorage.getItem("internalTestingBack") ? JSON.parse(sessionStorage.getItem("internalTestingBack")).page_no : 1,
+  total: 0, //条数
+  PageSize: 10, //每页显示几条
+  status: "", //发布状态
+  issueTime: "", //时间
+  options: [
+    { id: "未发布", name: "未发布" },
+    { id: "已发布", name: "已发布" },
+  ], //发布的数组
+  tableData: [], //表格
+});
+
+//获取list数组
+async function getList() {
+  const res = await raiInterface.internalProductInteriorList({
+    CurrentIndex: pageState.page_no,
+    PageSize: pageState.PageSize,
+    Status: pageState.status == "未发布" ? 0 : pageState.status == "已发布" ? 1 : 2,
+    StartDate: pageState.issueTime[0],
+    EndDate: pageState.issueTime[1],
+  });
+  if (res.Ret === 200) {
+    pageState.tableData = res.Data.List;
+    pageState.total = res.Data.Paging.Totals;
+  }
+}
+//选择后的事件
+function conditionChange() {
+  pageState.page_no = 1;
+  getList();
+}
+//发布，取消发布，删除
+function operationBtn(id, value) {
+  ElMessageBox.confirm(`确定${value}该文章吗？`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      if (value == "删除") {
+        const res = await raiInterface.internalProductInteriorDelete({ ProductInteriorId: id });
+        if (res.Ret === 200) {
+          ElMessage.success("删除成功！");
+          let page_num = Math.ceil((pageState.total - 1) / pageState.PageSize);
+          if (pageState.page_no > page_num) {
+            pageState.page_no = page_num;
+          }
+          getList();
+        }
+      } else {
+        const res = await raiInterface.internalProductInteriorPublish({ ProductInteriorId: id });
+        if (res.Ret === 200) {
+          ElMessage.success(value + "成功！");
+          getList();
+        }
+      }
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: `已取消${value}`,
+      });
+    });
+}
+//文章详情
+function goDetail(row) {
+  let url =
+    process.env.NODE_ENV === "production"
+      ? "https://web.hzinsights.com/internal/article"
+      : process.env.NODE_ENV === "test"
+      ? "https://clpttest.hzinsights.com/internal/article"
+      : "https://clpttest.hzinsights.com/internal/article";
+  let href = `${url}/${row.ProductInteriorId}`;
+  window.open(href, "_blank");
+}
+//分页
+function handleCurrentChange(page) {
+  pageState.page_no = page;
+  getList();
+}
+function editReport(id) {
+  $router.push({
+    path: "/editHaveReport",
+    query: { id },
+  });
+}
+function init() {
+  pageState.status = ""; //发布状态
+  pageState.issueTime = ""; //时间
+}
+//导出pv uv
+function exportPvUv(id) {
+  const url = import.meta.env.VITE_APP_API_ROOT + "/cygx/productInterior/PvExport?ProductInteriorId=" + id + "&" + localStorage.getItem("auth") || "";
+  return url;
+}
+// 可见范围
+async function reportVisibleRange(item) {
+  const res = await raiInterface.internalProductInteriorVisibleRange({
+    ProductInteriorId: item.ProductInteriorId,
+  });
+  if (res.Ret === 200) {
+    ElMessage.success("操作成功");
+    getList();
+  } else {
+    getList();
+  }
+}
+
+onMounted(() => {
+  if (sessionStorage.getItem("internalTestingBack")) {
+    const initialize = JSON.parse(sessionStorage.getItem("internalTestingBack"));
+    pageState.status = initialize.status;
+    pageState.issueTime = initialize.issueTime;
+  }
+  getList();
+});
+
+onBeforeRouteLeave((to, from, next) => {
+  let backData = {
+    page_no: pageState.page_no,
+    status: pageState.status, //状态
+    issueTime: pageState.issueTime, //时间
+  };
+  sessionStorage.setItem("internalTestingBack", JSON.stringify(backData));
+  next();
+});
+
+const { page_no, total, PageSize, status, issueTime, options, tableData } = toRefs(pageState);
+</script>
+
 <template>
   <div class="container-internal-testing">
     <el-card>
@@ -15,7 +171,7 @@
       <el-table :data="tableData" style="width: 100%" border>
         <el-table-column prop="ColumnName" align="center" width="180" label="标题栏名称"></el-table-column>
         <el-table-column prop="" align="center" label="报告标题" min-width="260">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span v-if="scope.row.Status == 1" class="editsty" @click="goDetail(scope.row)">{{ scope.row.Title }}</span>
             <span v-else>{{ scope.row.Title }}</span>
           </template>
@@ -26,12 +182,12 @@
         <el-table-column prop="PublishTime" align="center" label="发布时间" width="160"></el-table-column>
         <el-table-column prop="ModifyTime" align="center" label="更新时间" width="200"></el-table-column>
         <el-table-column align="center" label="发布状态" width="108">
-          <template slot-scope="scope">
+          <template #default="scope">
             {{ scope.row.Status == 1 ? "已发布" : scope.row.Status == 3 ? "已下线" : "未发布" }}
           </template>
         </el-table-column>
         <el-table-column width="135" label="PV / UV" align="center">
-          <template slot-scope="scope">
+          <template #default="scope">
             <div class="pv-uv-download">
               <span>{{ scope.row.Pv }}/{{ scope.row.Uv }}</span>
               <a :href="exportPvUv(scope.row.ProductInteriorId)" download>
@@ -41,15 +197,17 @@
           </template>
         </el-table-column>
         <el-table-column key="VisibleRange" width="180" label="可见范围" align="center">
-          <template slot-scope="{ row }" v-if="row.Status === 1">
-            <el-radio-group v-model="row.VisibleRange" @input="reportVisibleRange(row)">
-              <el-radio :label="1">全部</el-radio>
-              <el-radio :label="0">内部</el-radio>
-            </el-radio-group>
+          <template #default="{ row }">
+            <div v-if="row.Status === 1">
+              <el-radio-group v-model="row.VisibleRange" @input="reportVisibleRange(row)">
+                <el-radio :label="1">全部</el-radio>
+                <el-radio :label="0">内部</el-radio>
+              </el-radio-group>
+            </div>
           </template>
         </el-table-column>
         <el-table-column align="center" label="操作" width="180">
-          <template slot-scope="{ row }">
+          <template #default="{ row }">
             <span v-if="row.Status == 0" class="editsty" @click="operationBtn(row.ProductInteriorId, '发布')">发布&nbsp;&nbsp;</span>
             <span v-if="row.Status == 1" class="editsty" @click="operationBtn(row.ProductInteriorId, '取消发布')">取消发布&nbsp;&nbsp;</span>
             <span v-if="row.Status == 3" class="editsty" @click="operationBtn(row.ProductInteriorId, '重新发布')">重新发布&nbsp;&nbsp;</span>
@@ -65,153 +223,6 @@
     </el-card>
   </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("internalTestingBack") ? JSON.parse(sessionStorage.getItem("internalTestingBack")).page_no : 1,
-      total: 0, //条数
-      PageSize: 10, //每页显示几条
-      status: "", //发布状态
-      issueTime: "", //时间
-      options: [
-        { id: "未发布", name: "未发布" },
-        { id: "已发布", name: "已发布" },
-      ], //发布的数组
-      tableData: [], //表格
-    };
-  },
-  computed: {},
-  watch: {},
-  created() {},
-  mounted() {
-    if (sessionStorage.getItem("internalTestingBack")) {
-      const initialize = JSON.parse(sessionStorage.getItem("internalTestingBack"));
-      this.status = initialize.status;
-      this.issueTime = initialize.issueTime;
-    }
-    this.getList();
-  },
-  methods: {
-    //获取list数组
-    async getList() {
-      const res = await raiInterface.internalProductInteriorList({
-        CurrentIndex: this.page_no,
-        PageSize: this.PageSize,
-        Status: this.status == "未发布" ? 0 : this.status == "已发布" ? 1 : 2,
-        StartDate: this.issueTime[0],
-        EndDate: this.issueTime[1],
-      });
-      if (res.Ret === 200) {
-        this.tableData = res.Data.List;
-        this.total = res.Data.Paging.Totals;
-      }
-    },
-    //选择后的事件
-    conditionChange() {
-      this.page_no = 1;
-      this.getList();
-    },
-    //发布，取消发布，删除
-    operationBtn(id, value) {
-      this.$confirm(`确定${value}该文章吗？`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(async () => {
-          if (value == "删除") {
-            const res = await raiInterface.internalProductInteriorDelete({ ProductInteriorId: id });
-            if (res.Ret === 200) {
-              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.getList();
-            }
-          } else {
-            const res = await raiInterface.internalProductInteriorPublish({ ProductInteriorId: id });
-            if (res.Ret === 200) {
-              this.$message.success(value + "成功！");
-              this.getList();
-            }
-          }
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: `已取消${value}`,
-          });
-        });
-    },
-    //文章详情
-    goDetail(row) {
-      let url =
-        process.env.NODE_ENV === "production"
-          ? "https://web.hzinsights.com/internal/article"
-          : process.env.NODE_ENV === "test"
-          ? "https://clpttest.hzinsights.com/internal/article"
-          : "https://clpttest.hzinsights.com/internal/article";
-      let href = `${url}/${row.ProductInteriorId}`;
-      window.open(href, "_blank");
-    },
-    //分页
-    handleCurrentChange(page) {
-      this.page_no = page;
-      this.getList();
-    },
-    editReport(id) {
-      this.$router.push({
-        path: "/editHaveReport",
-        query: { id },
-      });
-    },
-    init() {
-      this.status = ""; //发布状态
-      this.issueTime = ""; //时间
-    },
-    //导出pv uv
-    exportPvUv(id) {
-      const url = import.meta.env.VITE_APP_API_ROOT + "/cygx/productInterior/PvExport?ProductInteriorId=" + id + "&" + localStorage.getItem("auth") || "";
-      return url;
-    },
-    // 可见范围
-    async reportVisibleRange(item) {
-      const res = await raiInterface.internalProductInteriorVisibleRange({
-        ProductInteriorId: item.ProductInteriorId,
-      });
-      if (res.Ret === 200) {
-        this.$message.success("操作成功");
-        this.getList();
-      } else {
-        this.getList();
-      }
-    },
-  },
-  beforeRouteEnter(to, from, next) {
-    if (from.path != "/editHaveReport") {
-      sessionStorage.removeItem("internalTestingBack");
-    }
-    next();
-  },
-  beforeRouteLeave(to, from, next) {
-    let backData = {
-      page_no: this.page_no,
-      status: this.status, //状态
-      issueTime: this.issueTime, //时间
-    };
-    sessionStorage.setItem("internalTestingBack", JSON.stringify(backData));
-    next();
-  },
-};
-</script>
 <style scoped lang="scss">
 .container-internal-testing {
   .top-box {

src/views/rai_manage/reportManage/morningMeetingManage.vue

@@ -1,3 +1,137 @@
+<script setup>
+import { ref, computed, onMounted, reactive, toRefs, watch } from "vue";
+
+import { Calendar, Search, InfoFilled } from "@element-plus/icons-vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+import moment from 'moment'; 
+
+const $route = useRoute();
+const $router = useRouter();
+
+import { raiInterface } from "@/api/api.js";
+
+const pageState = reactive({
+  tableColumn: [
+    {
+      key: "meetingTime",
+      label: "晨会日期",
+    },
+    {
+      key: "partNums",
+      label: "段落数",
+    },
+    {
+      key: "industryName",
+      label: "相关产业",
+      minWidth: 160,
+    },
+    {
+      key: "publishTime",
+      label: "发布时间",
+    },
+    {
+      key: "modifyTime",
+      label: "更新时间",
+    },
+    {
+      key: "status",
+      label: "发布状态",
+    },
+  ],
+  tableData: [],
+  //分页相关
+  page_no: 1,
+  pageSize: 10,
+  total: 11,
+  //搜索相关
+  searchPublish: "",
+  searchDate: "",
+  searchLabel: "",
+});
+function handleTableClick(data, type) {
+  if (type === "delete") {
+    ElMessageBox.confirm("确定要删除这篇报告吗？", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    }).then(() => {
+      deleteMeeting(data.Id);
+    });
+  }
+  if (type === "add") {
+    $router.push("/addMorningMeeting");
+  }
+  if (type === "edit") {
+    $router.push({
+      path: "/editMorningMeeting",
+      query: { id: data.Id },
+    });
+  }
+  if (type === "publish") {
+    publishMeeting(data);
+  }
+}
+function handleCurrentChange(current) {
+  pageState.page_no = current;
+  getListData();
+}
+async function getListData() {
+  const res = await raiInterface.getMorningMeetingList({
+    PageSize: pageState.pageSize,
+    CurrentIndex: pageState.page_no,
+    KeyWord: pageState.searchLabel,
+    MeetingTime: pageState.searchDate,
+    Status: pageState.searchPublish,
+  });
+  if (res.Ret !== 200) return;
+  const { CurrentIndex, Totals } = res.Data.Paging;
+  pageState.tableData = res.Data.List || [];
+  pageState.page_no = CurrentIndex;
+  pageState.total = Totals;
+}
+//删除晨会
+async function deleteMeeting(id) {
+  const res = await raiInterface.deleteListMeeting({ ReviewId: id });
+  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;
+  }
+  getListData();
+}
+//发布/取消发布晨会
+async function publishMeeting(data) {
+  let res = null;
+  if (data.status === 1) {
+    res = await raiInterface.cancelPublish({ ReviewId: data.Id });
+  } else {
+    res = await raiInterface.publishListMeeting({ ReviewIds: data.Id + "" });
+  }
+  if (res.Ret !== 200) return;
+  ElMessage.success(`${data.status === 0 ? "" : "取消"}发布成功`);
+  pageState.searchPublish = "";
+  pageState.searchDate = "";
+  pageState.searchLabel = "";
+  getListData();
+}
+//筛选条件更改
+function changeSelect() {
+  pageState.page_no = 1;
+  getListData();
+}
+function exportPvUv(row) {
+  return import.meta.env.VITE_APP_API_ROOT + "/cygx/morningMeeting/list_pv?MeetingId=" + row.Id + "&" + localStorage.getItem("auth") + `&IsExport=${true}`;
+}
+
+onMounted(() => {
+  getListData();
+});
+
+const { tableColumn, tableData, page_no, pageSize, total, searchPublish, searchDate, searchLabel } = toRefs(pageState);
+</script>
+
 <template>
   <!-- 晨会精华管理 -->
   <div class="moring-meeting-wrap">
@@ -18,30 +152,27 @@
               :value="item.value"
             />
           </el-select>
-          <!-- <date-picker  type="date" range placeholder="晨会时间" v-model="searchDate" value-type="format"/> -->
           <el-date-picker v-model="searchDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="changeSelect" class="date-pick" placeholder="晨会时间"> </el-date-picker>
         </div>
 
-        <el-input placeholder="请输入产业标签" clearable v-model="searchLabel" @input="changeSelect">
-          <i slot="prefix" class="el-input__icon el-icon-search"></i>
-        </el-input>
+        <el-input placeholder="请输入产业标签" clearable v-model="searchLabel" @input="changeSelect" :prefix-icon="Search"> </el-input>
       </div>
 
       <div class="table-wrap">
         <el-table :data="tableData" border>
           <el-table-column v-for="item in tableColumn" :key="item.key" :prop="item.key" :label="item.label" align="center" :min-width="item.minWidth">
-            <template slot-scope="{ row }">
-              <span v-if="item.key === 'meetingTime' && row[item.key]">{{ $moment(row[item.key]).format("YYYY.MM.DD") }}</span>
+            <template #default="{ row }">
+              <span v-if="item.key === 'meetingTime' && row[item.key]">{{ moment(row[item.key]).format("YYYY.MM.DD") }}</span>
               <span v-else-if="item.key === 'status'">{{ row[item.key] === 1 ? "已发布" : "未发布" }}</span>
               <span v-else>{{ row[item.key] || "-" }}</span>
             </template>
           </el-table-column>
-          <el-table-column width="150" label="PV / UV" align="center" key="pvUv" :render-header="renderHeader">
-            <template slot="header" slot-scope="scope">
+          <el-table-column width="150" label="PV / UV" align="center" key="pvUv">
+            <template #header>
               <div class="todolabel" style="width: 100%; display: flex; justify-content: center; align-items: center">
                 <span>PV / UV</span>
                 <el-tooltip style="margin-left: 10px" effect="dark" placement="top-start">
-                  <template slot="content">
+                  <template #content>
                     <p>pv：报告被打开的次数，每次打开都计算一次（只统计有权限用户）</p>
                     <p>uv：访问报告的人数，每篇报告同一个人访问只计算一次（只统计有权限用户）</p>
                   </template>
@@ -49,7 +180,7 @@
                 </el-tooltip>
               </div>
             </template>
-            <template slot-scope="{ row }">
+            <template #default="{ row }">
               <div class="pv-uv-download">
                 <span>{{ row.Pv }}/{{ row.Uv }}</span>
                 <a :href="`${exportPvUv(row)}`" download>
@@ -59,7 +190,7 @@
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" min-width="160">
-            <template slot-scope="{ row }">
+            <template #default="{ row }">
               <div style="color: #4099ef; font-size: 24px">
                 <span class="editsty" @click="handleTableClick(row, 'publish')">{{ row.status === 1 ? "取消发布" : "发布" }}</span>
                 <span class="editsty" @click="handleTableClick(row, 'edit')">编辑</span>
@@ -75,141 +206,13 @@
           @current-change="handleCurrentChange"
           :page-size="pageSize"
           :total="total"
-          style="text-align: end; margin-top: 20px"
+          style="display: flex; justify-content: end; margin-top: 20px"
         />
       </div>
     </div>
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-export default {
-  data() {
-    return {
-      tableColumn: [
-        {
-          key: "meetingTime",
-          label: "晨会日期",
-        },
-        {
-          key: "partNums",
-          label: "段落数",
-        },
-        {
-          key: "industryName",
-          label: "相关产业",
-          minWidth: 160,
-        },
-        {
-          key: "publishTime",
-          label: "发布时间",
-        },
-        {
-          key: "modifyTime",
-          label: "更新时间",
-        },
-        {
-          key: "status",
-          label: "发布状态",
-        },
-      ],
-      tableData: [],
-      //分页相关
-      page_no: 1,
-      pageSize: 10,
-      total: 11,
-      //搜索相关
-      searchPublish: "",
-      searchDate: "",
-      searchLabel: "",
-    };
-  },
-  watch: {},
-  methods: {
-    handleTableClick(data, type) {
-      if (type === "delete") {
-        this.$confirm("确定要删除这篇报告吗？", "提示", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-        }).then(() => {
-          this.deleteMeeting(data.Id);
-        });
-      }
-      if (type === "add") {
-        this.$router.push("/addMorningMeeting");
-      }
-      if (type === "edit") {
-        this.$router.push({
-          path: "/editMorningMeeting",
-          query: { id: data.Id },
-        });
-      }
-      if (type === "publish") {
-        this.publishMeeting(data);
-      }
-    },
-    handleCurrentChange(current) {
-      this.page_no = current;
-      this.getListData();
-    },
-    async getListData() {
-      const res = await raiInterface.getMorningMeetingList({
-        PageSize: this.pageSize,
-        CurrentIndex: this.page_no,
-        KeyWord: this.searchLabel,
-        MeetingTime: this.searchDate,
-        Status: this.searchPublish,
-      });
-      if (res.Ret !== 200) return;
-      const { CurrentIndex, Totals } = res.Data.Paging;
-      this.tableData = res.Data.List || [];
-      this.page_no = CurrentIndex;
-      this.total = Totals;
-    },
-    //删除晨会
-    async deleteMeeting(id) {
-      const res = await raiInterface.deleteListMeeting({ ReviewId: id });
-      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.getListData();
-    },
-    //发布/取消发布晨会
-    async publishMeeting(data) {
-      let res = null;
-      if (data.status === 1) {
-        res = await raiInterface.cancelPublish({ ReviewId: data.Id });
-      } else {
-        res = await raiInterface.publishListMeeting({ ReviewIds: data.Id + "" });
-      }
-      if (res.Ret !== 200) return;
-      this.$message.success(`${data.status === 0 ? "" : "取消"}发布成功`);
-      this.searchPublish = "";
-      this.searchDate = "";
-      this.searchLabel = "";
-      this.getListData();
-    },
-    //筛选条件更改
-    changeSelect() {
-      this.page_no = 1;
-      this.getListData();
-    },
-    exportPvUv(row) {
-      return import.meta.env.VITE_APP_API_ROOT + "/cygx/morningMeeting/list_pv?MeetingId=" + row.Id + "&" + localStorage.getItem("auth") + `&IsExport=${true}`;
-    },
-  },
-  computed: {},
-  mounted() {
-    this.getListData();
-  },
-};
-</script>
-
 <style scoped lang="scss">
 .moring-meeting-wrap {
   .add-btn,

src/views/rai_manage/reportManage/reportChoiceness.vue

@@ -1,3 +1,178 @@
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  beforeRouteEnter(to, from, next) {
+    if (from.path !== "/editChoiceness") {
+      sessionStorage.removeItem("choicenessListBack");
+    }
+    next();
+  },
+});
+</script>
+
+<script setup>
+import { ref, computed, onMounted, reactive, toRefs, watch } from "vue";
+
+import { Calendar, Search, InfoFilled } from "@element-plus/icons-vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+
+import mPage from "@/components/mPage.vue";
+import { raiInterface } from "@/api/api.js";
+import CompanyDetail from "../components/reportComponents/CompanyDetail.vue";
+import RoadshowApplyDlg from "./components/roadshowApplyDlg.vue";
+
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  page_no: sessionStorage.getItem("choicenessListBack") ? JSON.parse(sessionStorage.getItem("choicenessListBack")).page_no : 1,
+  total: 0, //条数
+  PageSize: 10, //每页显示几条
+  industry: "", //行业
+  status: "", //发布状态
+  issueTime: "", //时间
+  //chartPermissionList: [], //行业的数组
+  options: [
+    { id: 0, name: "未发布" },
+    { id: 1, name: "已发布" },
+  ], //发布的数组
+  tableData: [], //表格
+  isCompanyDetailShow: false, //公司点击详情弹框
+  companyDetailId: 0,
+  isRadshowApplyShow: false, // 路演申请
+  radshowApplyId: 0, // 路演申请查看的ID
+});
+
+const sta = computed(() => {
+  return pageState.status === 0 ? pageState.status : pageState.status === 1 ? pageState.status : 2;
+});
+
+//获取list数组
+async function getList() {
+  const res = await raiInterface.reportSelectionList({
+    CurrentIndex: pageState.page_no,
+    PageSize: pageState.PageSize,
+    PublishStatus: pageState.sta - 0,
+    CategoryName: pageState.industry,
+    StartDate: pageState.issueTime[0],
+    EndDate: pageState.issueTime[1],
+  });
+  if (res.Ret === 200) {
+    pageState.tableData = res.Data.List;
+    pageState.total = res.Data.Paging.Totals;
+  }
+}
+//导出pv uv
+function exportPvUv(id) {
+  const url = import.meta.env.VITE_APP_API_ROOT + "/cygx/reportSelection/articleHistoryExport?ArticleId=" + id + "&Source=1&" + localStorage.getItem("auth") || "";
+  return url;
+}
+//选择后的事件
+function conditionChange() {
+  pageState.page_no = 1;
+  getList();
+}
+//发布，取消发布，删除
+function operationBtn(id, value) {
+  ElMessageBox.confirm(`确定${value}该文章吗？`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      if (value == "删除") {
+        const res = await raiInterface.reportSelectionDelete({ ArticleId: id });
+        if (res.Ret === 200) {
+          ElMessage.success("删除成功！");
+          let page_num = Math.ceil((pageState.total - 1) / pageState.PageSize);
+          if (pageState.page_no > page_num) {
+            pageState.page_no = page_num;
+          }
+          getList();
+        }
+      } else {
+        const res = await raiInterface.reportSelectionPublishAndCancel({ ArticleId: id });
+        if (res.Ret === 200) {
+          ElMessage.success(value + "成功！");
+          getList();
+        }
+      }
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: `已取消${value}`,
+      });
+    });
+}
+//文章详情
+function goDetail(ArticleId) {
+  let url =
+    process.env.NODE_ENV === "production" ? "https://web.hzinsights.com/recent" : process.env.NODE_ENV === "test" ? "https://clpttest.hzinsights.com/recent" : "https://clpttest.hzinsights.com/recent";
+  let href = `${url}/${ArticleId}`;
+  window.open(href, "_blank");
+}
+//去往编辑页面
+function editReport(id, status) {
+  $router.push({
+    path: "/editChoiceness",
+    query: { id, status },
+  });
+}
+//分页
+function handleCurrentChange(page) {
+  pageState.page_no = page;
+  getList();
+}
+// 公司点击详情的弹框
+function clickCompanyDetail(id) {
+  pageState.companyDetailId = id;
+  pageState.isCompanyDetailShow = true;
+}
+// 可见范围
+async function reportVisibleRange(item) {
+  const res = await raiInterface.reportSelectionVisibleRange({
+    ArticleId: item.ArticleId,
+  });
+  if (res.Ret === 200) {
+    ElMessage.success("操作成功");
+    getList();
+  } else {
+    getList();
+  }
+}
+// 路演申请的弹框
+function roadshowApplyHandler(item) {
+  pageState.radshowApplyId = item.ArticleId;
+  pageState.isRadshowApplyShow = true;
+}
+
+onMounted(() => {
+  if (sessionStorage.getItem("choicenessListBack")) {
+    const initialize = JSON.parse(sessionStorage.getItem("choicenessListBack"));
+    pageState.industry = initialize.industry;
+    pageState.status = initialize.status;
+    pageState.issueTime = initialize.issueTime;
+  }
+  getList();
+});
+
+onBeforeRouteLeave((to, form, next) => {
+  let backData = {
+    page_no: pageState.page_no,
+    industry: pageState.industry, //行业
+    status: pageState.status, //状态
+    issueTime: pageState.issueTime, //时间
+  };
+  sessionStorage.setItem("choicenessListBack", JSON.stringify(backData));
+  next();
+});
+
+const { page_no, total, PageSize, industry, status, issueTime, options, tableData, isCompanyDetailShow, companyDetailId, isRadshowApplyShow, radshowApplyId } = toRefs(pageState);
+</script>
+
 <template>
   <div class="container-choiceness">
     <el-card>
@@ -15,7 +190,7 @@
 
       <el-table :data="tableData" style="width: 100%" border>
         <el-table-column prop="" align="center" label="标题" min-width="260">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span class="editsty" @click="goDetail(scope.row.ArticleId)">{{ scope.row.Title }}</span>
           </template>
         </el-table-column>
@@ -23,12 +198,24 @@
         <el-table-column prop="PublishDate" align="center" label="发布时间" min-width="165"></el-table-column>
         <el-table-column prop="LastUpdatedTime" align="center" label="更新时间" min-width="165"></el-table-column>
         <el-table-column prop="" align="center" label="发布状态" width="118">
-          <template slot-scope="scope">
+          <template #default="scope">
             {{ scope.row.PublishStatus == 1 ? "已发布" : "未发布" }}
           </template>
         </el-table-column>
-        <el-table-column width="135" label="PV / UV" align="center" :render-header="renderHeader">
-          <template slot-scope="scope">
+        <el-table-column width="135" label="PV / UV" align="center">
+          <template #header>
+            <div style="display: flex; align-items: center; justify-content: center">
+              <p style="margin-right: 5px">PV / UV</p>
+              <el-tooltip placement="top-start">
+                <template #content>
+                  <p>pv：报告被打开的次数，每次打开都计算一次（只统计有权限用户）</p>
+                  <p>uv：访问报告的人数，每篇报告同一个人访问只计算一次（只统计有权限用户）</p>
+                </template>
+                <el-icon><InfoFilled /></el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+          <template #default="scope">
             <div class="pv-uv-download">
               <span>{{ scope.row.Pv }}/{{ scope.row.Uv }}</span>
               <a :href="exportPvUv(scope.row.ArticleId)" download>
@@ -38,20 +225,22 @@
           </template>
         </el-table-column>
         <el-table-column prop="Periods" align="center" label="路演申请" width="100">
-          <template slot-scope="{ row }">
+          <template #default="{ row }">
             <span class="editsty" @click="roadshowApplyHandler(row)">{{ row.ApplyTotal }}</span>
           </template>
         </el-table-column>
         <el-table-column key="VisibleRange" width="156" label="可见范围" align="center">
-          <template slot-scope="{ row }" v-if="row.PublishStatus === 1">
-            <el-radio-group v-model="row.VisibleRange" @input="reportVisibleRange(row)">
-              <el-radio :label="1">全部</el-radio>
-              <el-radio :label="0">内部</el-radio>
-            </el-radio-group>
+          <template #default="{ row }">
+            <div v-if="row.PublishStatus === 1">
+              <el-radio-group v-model="row.VisibleRange" @input="reportVisibleRange(row)">
+                <el-radio :label="1">全部</el-radio>
+                <el-radio :label="0">内部</el-radio>
+              </el-radio-group>
+            </div>
           </template>
         </el-table-column>
         <el-table-column align="center" label="操作" width="140">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span v-if="scope.row.PublishStatus !== 1" class="editsty" @click="operationBtn(scope.row.ArticleId, '发布')">发布&nbsp;&nbsp;</span>
             <span v-else class="editsty" @click="operationBtn(scope.row.ArticleId, '取消发布')">取消发布&nbsp;&nbsp;</span>
             <span class="editsty" @click="editReport(scope.row.ArticleId, scope.row.PublishStatus)">编辑&nbsp;&nbsp;</span>
@@ -65,193 +254,11 @@
         <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
       </el-col>
     </el-card>
-    <CompanyDetail :isCompanyDetailShow.sync="isCompanyDetailShow" :companyDetailId.sync="companyDetailId" />
-    <roadshow-apply-dlg :isRadshowApplyShow.sync="isRadshowApplyShow" :radshowApplyId.sync="radshowApplyId" />
+    <CompanyDetail v-model:isCompanyDetailShow="isCompanyDetailShow" v-model:companyDetailId="companyDetailId" />
+    <roadshow-apply-dlg v-model:isRadshowApplyShow="isRadshowApplyShow" v-model:radshowApplyId="radshowApplyId" />
   </div>
 </template>
 
-<script>
-import mPage from "@/components/mPage.vue";
-import { raiInterface } from "@/api/api.js";
-import CompanyDetail from "../components/reportComponents/CompanyDetail.vue";
-import RoadshowApplyDlg from "./components/roadshowApplyDlg.vue";
-export default {
-  name: "",
-  components: { mPage, CompanyDetail, RoadshowApplyDlg },
-  props: {},
-  data() {
-    return {
-      page_no: sessionStorage.getItem("choicenessListBack") ? JSON.parse(sessionStorage.getItem("choicenessListBack")).page_no : 1,
-      total: 0, //条数
-      PageSize: 10, //每页显示几条
-      industry: "", //行业
-      status: "", //发布状态
-      issueTime: "", //时间
-      //chartPermissionList: [], //行业的数组
-      options: [
-        { id: 0, name: "未发布" },
-        { id: 1, name: "已发布" },
-      ], //发布的数组
-      tableData: [], //表格
-      isCompanyDetailShow: false, //公司点击详情弹框
-      companyDetailId: 0,
-      isRadshowApplyShow: false, // 路演申请
-      radshowApplyId: 0, // 路演申请查看的ID
-    };
-  },
-  computed: {
-    sta() {
-      return this.status === 0 ? this.status : this.status === 1 ? this.status : 2;
-    },
-  },
-  watch: {},
-  created() {},
-  mounted() {
-    if (sessionStorage.getItem("choicenessListBack")) {
-      const initialize = JSON.parse(sessionStorage.getItem("choicenessListBack"));
-      this.industry = initialize.industry;
-      this.status = initialize.status;
-      this.issueTime = initialize.issueTime;
-    }
-    this.getList();
-    //this.getIndustryList()
-  },
-  methods: {
-    //获取list数组
-    async getList() {
-      const res = await raiInterface.reportSelectionList({
-        CurrentIndex: this.page_no,
-        PageSize: this.PageSize,
-        PublishStatus: this.sta - 0,
-        CategoryName: this.industry,
-        StartDate: this.issueTime[0],
-        EndDate: this.issueTime[1],
-      });
-      if (res.Ret === 200) {
-        this.tableData = res.Data.List;
-        this.total = res.Data.Paging.Totals;
-      }
-    },
-    //导出pv uv
-    exportPvUv(id) {
-      const url = import.meta.env.VITE_APP_API_ROOT + "/cygx/reportSelection/articleHistoryExport?ArticleId=" + id + "&Source=1&" + localStorage.getItem("auth") || "";
-      return url;
-    },
-    //选择后的事件
-    conditionChange() {
-      this.page_no = 1;
-      this.getList();
-    },
-    //发布，取消发布，删除
-    operationBtn(id, value) {
-      this.$confirm(`确定${value}该文章吗？`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(async () => {
-          if (value == "删除") {
-            const res = await raiInterface.reportSelectionDelete({ ArticleId: id });
-            if (res.Ret === 200) {
-              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.getList();
-            }
-          } else {
-            const res = await raiInterface.reportSelectionPublishAndCancel({ ArticleId: id });
-            if (res.Ret === 200) {
-              this.$message.success(value + "成功！");
-              this.getList();
-            }
-          }
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: `已取消${value}`,
-          });
-        });
-    },
-    //文章详情
-    goDetail(ArticleId) {
-      let url =
-        process.env.NODE_ENV === "production"
-          ? "https://web.hzinsights.com/recent"
-          : process.env.NODE_ENV === "test"
-          ? "https://clpttest.hzinsights.com/recent"
-          : "https://clpttest.hzinsights.com/recent";
-      let href = `${url}/${ArticleId}`;
-      window.open(href, "_blank");
-    },
-    //去往编辑页面
-    editReport(id, status) {
-      this.$router.push({
-        path: "/editChoiceness",
-        query: { id, status },
-      });
-    },
-    //分页
-    handleCurrentChange(page) {
-      this.page_no = page;
-      this.getList();
-    },
-    //table表头Pu/Uv自定义
-    renderHeader(h, { column, $index }) {
-      return h("div", { attrs: { style: "padding:0;" } }, [
-        h("span", column.label),
-        h("el-tooltip", { props: { placement: "top" } }, [
-          h("p", { slot: "content", attrs: { style: "display:block;padding:5px 0;width:420px;" } }, "pv：报告被打开的次数，每次打开都计算一次（只统计有权限用户）"),
-          h("p", { slot: "content", attrs: { style: "display:block;padding:5px 0;width:420px;" } }, "uv：访问报告的人数，每篇报告同一个人访问只计算一次（只统计有权限用户）"),
-          h("el-button", { props: { icon: "el-icon-info" }, attrs: { style: "border:none;background:none" } }, ""),
-        ]),
-      ]);
-    },
-    // 公司点击详情的弹框
-    clickCompanyDetail(id) {
-      this.companyDetailId = id;
-      this.isCompanyDetailShow = true;
-    },
-    // 可见范围
-    async reportVisibleRange(item) {
-      const res = await raiInterface.reportSelectionVisibleRange({
-        ArticleId: item.ArticleId,
-      });
-      if (res.Ret === 200) {
-        this.$message.success("操作成功");
-        this.getList();
-      } else {
-        this.getList();
-      }
-    },
-    // 路演申请的弹框
-    roadshowApplyHandler(item) {
-      this.radshowApplyId = item.ArticleId;
-      this.isRadshowApplyShow = true;
-    },
-  },
-  /* 页面跳转前记录参数 */
-  beforeRouteLeave(to, form, next) {
-    let backData = {
-      page_no: this.page_no,
-      industry: this.industry, //行业
-      status: this.status, //状态
-      issueTime: this.issueTime, //时间
-    };
-    sessionStorage.setItem("choicenessListBack", JSON.stringify(backData));
-    next();
-  },
-  /* 页面进入前是否清除参数 */
-  beforeRouteEnter(to, from, next) {
-    if (from.path !== "/editChoiceness") {
-      sessionStorage.removeItem("choicenessListBack");
-    }
-    next();
-  },
-};
-</script>
 <style scoped lang="scss">
 .container-choiceness {
   .top-box {

src/views/rai_manage/reportManage/roadshowEssence.vue

@@ -1,3 +1,168 @@
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  beforeRouteEnter(to, from, next) {
+    if (from.path != "/editRoadshow") {
+      sessionStorage.removeItem("roadshowEssenceBack");
+    }
+    next();
+  },
+});
+</script>
+
+<script setup>
+import { ref, computed, onMounted, reactive, toRefs, watch } from "vue";
+
+import mPage from "@/components/mPage.vue";
+import { raiInterface } from "@/api/api.js";
+import { Calendar, Search, InfoFilled } from "@element-plus/icons-vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  page_no: sessionStorage.getItem("roadshowEssenceBack") ? JSON.parse(sessionStorage.getItem("roadshowEssenceBack")).page_no : 1,
+  total: 0, //条数
+  PageSize: 10, //每页显示几条
+  industry: "", //行业
+  status: "", //发布状态
+  issueTime: "", //时间
+  chartPermissionList: [], //行业的数组
+  options: [
+    { id: 0, name: "未发布" },
+    { id: 1, name: "已发布" },
+  ], //发布的数组
+  tableData: [], //表格
+  keyWord: "",
+});
+
+const sta = computed(() => {
+  return pageState.status === 0 ? pageState.status : pageState.status === 1 ? pageState.status : 2;
+});
+
+onMounted(() => {
+  if (sessionStorage.getItem("roadshowEssenceBack")) {
+    const initialize = JSON.parse(sessionStorage.getItem("roadshowEssenceBack"));
+    pageState.status = initialize.status;
+    pageState.issueTime = initialize.issueTime;
+    pageState.industry = initialize.industry;
+    pageState.keyWord = initialize.keyWord;
+  }
+  getList();
+  getIndustryList();
+});
+
+//获取list数组
+async function getList() {
+  const res = await raiInterface.roadshowEssenceList({
+    CurrentIndex: pageState.page_no,
+    PageSize: pageState.PageSize,
+    PublishStatus: pageState.sta - 0,
+    ChartPermissionId: pageState.industry,
+    StartDate: pageState.issueTime[0],
+    EndDate: pageState.issueTime[1],
+    KeyWord: pageState.keyWord,
+  });
+  if (res.Ret === 200) {
+    pageState.tableData = res.Data.List;
+    pageState.total = res.Data.Paging.Totals;
+  }
+}
+//获取行业
+async function getIndustryList() {
+  const res = await raiInterface.chartPermissionFirstHaveIco();
+  if (res.Ret === 200) {
+    pageState.chartPermissionList = res.Data.List;
+  }
+}
+//选择后的事件
+function conditionChange() {
+  pageState.page_no = 1;
+  getList();
+}
+//发布，取消发布，删除
+function operationBtn(id, value) {
+  ElMessageBox.confirm(`确定${value}该文章吗？`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      if (value == "删除") {
+        const res = await raiInterface.roadshowEssenceDelete({ ArticleId: id });
+        if (res.Ret === 200) {
+          ElMessage.success("删除成功！");
+          let page_num = Math.ceil((pageState.total - 1) / pageState.PageSize);
+          if (pageState.page_no > page_num) {
+            pageState.page_no = page_num;
+          }
+          getList();
+        }
+      } else {
+        const res = await raiInterface.roadshowEssencePublishAndCancel({ ArticleId: id });
+        if (res.Ret === 200) {
+          ElMessage.success(value + "成功！");
+          getList();
+        }
+      }
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: `已取消${value}`,
+      });
+    });
+}
+//文章详情
+function goDetail(row) {
+  let { href } = $router.resolve({ name: "预览路演精华", query: { ArticleId: row.ArticleId } });
+  window.open(href, "_blank");
+}
+//分页
+function handleCurrentChange(page) {
+  pageState.page_no = page;
+  getList();
+}
+function editReport(id, status) {
+  $router.push({
+    path: "/editRoadshow",
+    query: { id },
+  });
+}
+function keyValueInpt() {
+  pageState.page_no = 1;
+  getList();
+  init();
+}
+function init() {
+  pageState.industry = ""; //行业
+  pageState.status = ""; //发布状态
+  pageState.issueTime = ""; //时间
+}
+//导出pv uv
+function exportPvUv(id) {
+  const url = import.meta.env.VITE_APP_API_ROOT + "/cygx/reportSelection/articleHistoryExport?ArticleId=" + id + "&Source=2&" + localStorage.getItem("auth") || "";
+  return url;
+}
+
+onBeforeRouteLeave((to, from, next) => {
+  let backData = {
+    page_no: pageState.page_no,
+    status: pageState.status, //状态
+    issueTime: pageState.issueTime, //时间
+    industry: pageState.industry,
+    keyWord: pageState.keyWord,
+  };
+  sessionStorage.setItem("roadshowEssenceBack", JSON.stringify(backData));
+  next();
+});
+
+const { page_no, total, PageSize, industry, status, issueTime, chartPermissionList, options, tableData, keyWord } = toRefs(pageState);
+</script>
+
 <template>
   <div class="container-essence">
     <el-card>
@@ -11,9 +176,7 @@
           </el-select>
           <date-picker v-model="issueTime" type="date" range placeholder="发布时间" value-type="format" @change="conditionChange"> </date-picker>
           <div class="top-input">
-            <el-input @input="keyValueInpt" v-model="keyWord" placeholder="请输入报告标题" clearable style="display: inline-block">
-              <i slot="prefix" class="el-input__icon el-icon-search"></i>
-            </el-input>
+            <el-input :prefix-icon="Search" @input="keyValueInpt" v-model="keyWord" placeholder="请输入报告标题" clearable style="display: inline-block"> </el-input>
           </div>
         </div>
         <div>
@@ -22,7 +185,7 @@
       </div>
       <el-table :data="tableData" style="width: 100%" border>
         <el-table-column prop="" align="center" label="标题" min-width="260">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span class="editsty" @click="goDetail(scope.row)">{{ scope.row.Title }}</span>
           </template>
         </el-table-column>
@@ -30,12 +193,24 @@
         <el-table-column prop="PublishDate" align="center" label="发布时间" min-width="160"></el-table-column>
         <el-table-column prop="LastUpdatedTime" align="center" label="更新时间" min-width="160"></el-table-column>
         <el-table-column align="center" label="发布状态" min-width="108">
-          <template slot-scope="scope">
+          <template #default="scope">
             {{ scope.row.PublishStatus == 1 ? "已发布" : "未发布" }}
           </template>
         </el-table-column>
-        <el-table-column width="135" label="PV / UV" align="center" :render-header="renderHeader">
-          <template slot-scope="scope">
+        <el-table-column width="135" label="PV / UV" align="center">
+          <template #header>
+            <div style="display: flex; align-items: center; justify-content: center">
+              <p style="margin-right: 5px">PV / UV</p>
+              <el-tooltip placement="top-start">
+                <template #content>
+                  <p>pv：报告被打开的次数，每次打开都计算一次（只统计有权限用户）</p>
+                  <p>uv：访问报告的人数，每篇报告同一个人访问只计算一次（只统计有权限用户）</p>
+                </template>
+                <el-icon><InfoFilled /></el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+          <template #default="scope">
             <div class="pv-uv-download">
               <span>{{ scope.row.Pv }}/{{ scope.row.Uv }}</span>
               <a :href="exportPvUv(scope.row.ArticleId)" download>
@@ -45,7 +220,7 @@
           </template>
         </el-table-column>
         <el-table-column align="center" label="操作" min-width="165">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span v-if="scope.row.PublishStatus !== 1" class="editsty" @click="operationBtn(scope.row.ArticleId, '发布')">发布&nbsp;&nbsp;</span>
             <span v-else class="editsty" @click="operationBtn(scope.row.ArticleId, '取消发布')">取消发布&nbsp;&nbsp;</span>
             <span class="editsty" @click="editReport(scope.row.ArticleId)">编辑&nbsp;&nbsp;</span>
@@ -61,172 +236,6 @@
   </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("roadshowEssenceBack") ? JSON.parse(sessionStorage.getItem("roadshowEssenceBack")).page_no : 1,
-      total: 0, //条数
-      PageSize: 10, //每页显示几条
-      industry: "", //行业
-      status: "", //发布状态
-      issueTime: "", //时间
-      chartPermissionList: [], //行业的数组
-      options: [
-        { id: 0, name: "未发布" },
-        { id: 1, name: "已发布" },
-      ], //发布的数组
-      tableData: [], //表格
-      keyWord: "",
-    };
-  },
-  computed: {
-    sta() {
-      return this.status === 0 ? this.status : this.status === 1 ? this.status : 2;
-    },
-  },
-  watch: {},
-  created() {},
-  mounted() {
-    if (sessionStorage.getItem("roadshowEssenceBack")) {
-      const initialize = JSON.parse(sessionStorage.getItem("roadshowEssenceBack"));
-      this.status = initialize.status;
-      this.issueTime = initialize.issueTime;
-      this.industry = initialize.industry;
-      this.keyWord = initialize.keyWord;
-    }
-    this.getList();
-    this.getIndustryList();
-  },
-  methods: {
-    //获取list数组
-    async getList() {
-      const res = await raiInterface.roadshowEssenceList({
-        CurrentIndex: this.page_no,
-        PageSize: this.PageSize,
-        PublishStatus: this.sta - 0,
-        ChartPermissionId: this.industry,
-        StartDate: this.issueTime[0],
-        EndDate: this.issueTime[1],
-        KeyWord: this.keyWord,
-      });
-      if (res.Ret === 200) {
-        this.tableData = res.Data.List;
-        this.total = res.Data.Paging.Totals;
-      }
-    },
-    //获取行业
-    async getIndustryList() {
-      const res = await raiInterface.chartPermissionFirstHaveIco();
-      if (res.Ret === 200) {
-        this.chartPermissionList = res.Data.List;
-      }
-    },
-    //选择后的事件
-    conditionChange() {
-      this.page_no = 1;
-      this.getList();
-    },
-    //发布，取消发布，删除
-    operationBtn(id, value) {
-      this.$confirm(`确定${value}该文章吗？`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(async () => {
-          if (value == "删除") {
-            const res = await raiInterface.roadshowEssenceDelete({ ArticleId: id });
-            if (res.Ret === 200) {
-              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.getList();
-            }
-          } else {
-            const res = await raiInterface.roadshowEssencePublishAndCancel({ ArticleId: id });
-            if (res.Ret === 200) {
-              this.$message.success(value + "成功！");
-              this.getList();
-            }
-          }
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: `已取消${value}`,
-          });
-        });
-    },
-    //文章详情
-    goDetail(row) {
-      let { href } = this.$router.resolve({ name: "预览路演精华", query: { ArticleId: row.ArticleId } });
-      window.open(href, "_blank");
-    },
-    //分页
-    handleCurrentChange(page) {
-      this.page_no = page;
-      this.getList();
-    },
-    editReport(id, status) {
-      this.$router.push({
-        path: "/editRoadshow",
-        query: { id },
-      });
-    },
-    keyValueInpt() {
-      this.page_no = 1;
-      this.getList();
-      this.init();
-    },
-    init() {
-      this.industry = ""; //行业
-      this.status = ""; //发布状态
-      this.issueTime = ""; //时间
-    },
-    //table表头Pu/Uv自定义
-    renderHeader(h, { column, $index }) {
-      return h("div", { attrs: { style: "padding:0;" } }, [
-        h("span", column.label),
-        h("el-tooltip", { props: { placement: "top" } }, [
-          h("p", { slot: "content", attrs: { style: "display:block;padding:5px 0;width:420px;" } }, "pv：报告被打开的次数，每次打开都计算一次（只统计有权限用户）"),
-          h("p", { slot: "content", attrs: { style: "display:block;padding:5px 0;width:420px;" } }, "uv：访问报告的人数，每篇报告同一个人访问只计算一次（只统计有权限用户）"),
-          h("el-button", { props: { icon: "el-icon-info" }, attrs: { style: "border:none;background:none" } }, ""),
-        ]),
-      ]);
-    },
-    //导出pv uv
-    exportPvUv(id) {
-      const url = import.meta.env.VITE_APP_API_ROOT + "/cygx/reportSelection/articleHistoryExport?ArticleId=" + id + "&Source=2&" + localStorage.getItem("auth") || "";
-      return url;
-    },
-  },
-  beforeRouteEnter(to, from, next) {
-    if (from.path != "/editRoadshow") {
-      sessionStorage.removeItem("roadshowEssenceBack");
-    }
-    next();
-  },
-  beforeRouteLeave(to, from, next) {
-    let backData = {
-      page_no: this.page_no,
-      status: this.status, //状态
-      issueTime: this.issueTime, //时间
-      industry: this.industry,
-      keyWord: this.keyWord,
-    };
-    sessionStorage.setItem("roadshowEssenceBack", JSON.stringify(backData));
-    next();
-  },
-};
-</script>
 <style scoped lang="scss">
 .container-essence {
   .top-box {

src/views/rai_manage/reportManage/summaryManage.vue

@@ -1,23 +1,336 @@
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  beforeRouteEnter(to, from, next) {
+    if (from.path != "/editSummary") {
+      sessionStorage.removeItem("summaryManageBack");
+    }
+    next();
+  },
+});
+</script>
+
+<script setup>
+import { ref, computed, onMounted, reactive, toRefs, watch } from "vue";
+import mPage from "@/components/mPage.vue";
+import { raiInterface } from "@/api/api.js";
+import ShortcutDialog from "../components/shortcutDialog.vue";
+import GenerationAsk from "../components/generationAsk.vue";
+import FocusCollection from "../components/focusCollection.vue";
+
+import { Search } from "@element-plus/icons-vue";
+
+import { ElMessageBox, ElMessage } from "element-plus";
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  page_no: sessionStorage.getItem("summaryManageBack") ? JSON.parse(sessionStorage.getItem("summaryManageBack")).page_no : 1,
+  dataList: [], //表格内容
+  industry: "", //行业
+  status: "", //状态
+  issueTime: "", //时间
+  valueAuthor: "", //作者昵称
+  authorOptions: [], //作者数组
+  options: [
+    { id: 0, name: "未发布" },
+    { id: 1, name: "已发布" },
+  ],
+  titleValue: "", //标题关键词
+  total: 0, //条数
+  PageSize: 10, //每页显示几条
+  chartPermissionList: [], //行业的数组
+  shortcutIsDialog: false, //
+  isClientSwitch: false, //
+  generaitondialogVisib: false, //代问的弹框
+  generaitonId: "",
+  generaitonType: "纪要",
+  tabsList: [
+    { id: 1, name: "纪要" },
+    { id: 2, name: "观点" },
+  ],
+  tabsIndex: 1,
+  collectionDlgShow: false, //关注 收藏 隐显
+  collectionId: "", //关注 收藏 id
+  collectionType: "", //关注 收藏 类型区分
+  token: localStorage.getItem("auth") || "",
+  labelSearch: "",
+});
+
+watch([() => pageState.titleValue, () => pageState.labelSearch], () => {
+  pageState.page_no = 1;
+  pageState.getsummaryManageList();
+});
+watch(
+  () => pageState.valueAuthor,
+  (newval) => {
+    if (newval === "") {
+      pageState.authorOptions = [];
+    }
+  }
+);
+const sta = computed(() => {
+  return pageState.status === 0 ? pageState.status : pageState.status === 1 ? pageState.status : 2;
+});
+const exportPvUv = computed(() => {
+  return import.meta.env.VITE_APP_API_ROOT + "/cygx/summaryManage/articleHistoryExport?ArticleId=";
+});
+onMounted(() => {
+  routerInit();
+  chartPermission();
+  sustainableDetailSummaryManage();
+  remoteMethodAuthor();
+  getsummaryManageList();
+});
+
+//页面缓存 路由
+function routerInit() {
+  if (sessionStorage.getItem("summaryManageBack")) {
+    const { keyword, status, issueTime, tabs, industry, valueAuthor, labelSearch } = JSON.parse(sessionStorage.getItem("summaryManageBack"));
+    pageState.titleValue = keyword;
+    pageState.status = status; //状态
+    pageState.issueTime = issueTime; //时间
+    pageState.tabsIndex = tabs;
+    pageState.industry = industry;
+    pageState.valueAuthor = valueAuthor;
+    pageState.labelSearch = labelSearch;
+  }
+}
+//获取观点
+function sustainableDetailSummaryManage() {
+  raiInterface.sustainableDetailSummaryManage().then((res) => {
+    if (res.Ret === 200) {
+      pageState.isClientSwitch = !res.Data.OperationButton;
+    }
+  });
+}
+
+//操作按键 发布 取消发布 删除
+function operationBtn(id, value) {
+  ElMessageBox.confirm(`确定${value}该纪要吗？`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      if (value == "删除") {
+        const res = await raiInterface.getsummaryManagedelete({ ArticleId: id });
+        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 {
+        const res = await raiInterface.publishAndCancel({ ArticleId: id });
+        if (res.Ret !== 200) return;
+        ElMessage.success(`${value}成功！`);
+        getsummaryManageList();
+      }
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: `已取消${value}`,
+      });
+    });
+}
+//编辑按钮
+function editBtn(id) {
+  console.log(id);
+  $router.push({
+    path: "/editSummary",
+    query: { id: id },
+  });
+}
+//分页
+function handleCurrentChange(page) {
+  pageState.page_no = page;
+  getsummaryManageList();
+}
+//获取行业
+function chartPermission() {
+  raiInterface.summaryManageArticleType().then((res) => {
+    if (res.Ret === 200) {
+      pageState.chartPermissionList = res.Data.List;
+    }
+  });
+}
+//文章详情
+async function lookDetail(item) {
+  if (item.PublishStatus === 1) {
+    let href = `${process.env.CYGX_WEB}/material/info/${item.ArticleId}`;
+    window.open(href, "_blank");
+  } else {
+    const res = await raiInterface.getsummaryManagedetail({ ArticleId: item.ArticleId });
+    if (res.Ret === 200) {
+      sessionStorage.setItem("summaryPre", JSON.stringify(res.Data));
+      let { href } = $router.resolve({ name: "预览研选报告" });
+      window.open(href, "_blank");
+    }
+  }
+}
+//列表
+function getsummaryManageList() {
+  raiInterface
+    .getsummaryManageList({
+      CurrentIndex: pageState.page_no,
+      PageSize: pageState.PageSize,
+      PublishStatus: pageState.sta - 0,
+      ArticleTypeId: pageState.industry,
+      StartDate: pageState.issueTime[0],
+      EndDate: pageState.issueTime[1],
+      KeyWord: pageState.titleValue,
+      Departmentİd: pageState.valueAuthor,
+      Label: pageState.labelSearch,
+    })
+    .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 switchClickClient(value) {
+  const str = value ? "开放" : "隐藏";
+  this.$confirm(`【研选】系列纪要、报告、专家电话会将对永续客户${str}，是否继续？`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      raiInterface.sustainableEditSummaryManage().then((res) => {
+        if (res.Ret === 200) {
+          sustainableDetailSummaryManage();
+          ElMessage.success("操作成功");
+        }
+      });
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: "已取消操作",
+      });
+    });
+}
+//点击代问的弹框
+function inquireBtn(id) {
+  pageState.generaitondialogVisib = true;
+  pageState.generaitonId = id;
+}
+function tabsClick(item) {
+  if (pageState.tabsIndex !== item.id) {
+    pageState.tabsIndex = item.id;
+  }
+  pageState.page_no = 1;
+  init();
+  getsummaryManageList();
+  remoteMethodAuthor();
+}
+function init() {
+  pageState.status = "";
+  pageState.industry = "";
+  pageState.issueTime = "";
+  pageState.titleValue = "";
+  pageState.valueAuthor = "";
+  pageState.labelSearch = "";
+  pageState.authorOptions = [];
+}
+//收藏 作者关注 点击事件
+function collectionIsShow(id, type) {
+  pageState.collectionId = id; //关注 收藏 id
+  pageState.collectionType = type; //关注 收藏 类型区分
+  pageState.collectionDlgShow = true;
+}
+//作者的搜索
+async function remoteMethodAuthor(query) {
+  const res = await raiInterface.departmentList({ KeyWord: query });
+  if (res.Ret === 200) {
+    pageState.authorOptions = res.Data.List || [];
+  }
+}
+//清除作者的某一项后要有原有的数据
+function clearAuthor() {
+  remoteMethodAuthor();
+}
+// 置顶 取消置顶
+async function toppingHandler(item) {
+  const res = await raiInterface.summaryManageTopChange({ ArticleId: item.ArticleId });
+  if (res.Ret === 200) {
+    getsummaryManageList();
+    ElMessage.success("操作成功");
+  }
+}
+onBeforeRouteLeave((to, from, next) => {
+  let backData = {};
+  if (to.path == "/editSummary") {
+    backData = {
+      page_no: pageState.page_no,
+      keyword: pageState.titleValue,
+      status: pageState.status, //状态
+      issueTime: pageState.issueTime, //时间
+      tabs: pageState.tabsIndex,
+      industry: pageState.industry,
+      valueAuthor: pageState.valueAuthor,
+      labelSearch: pageState.labelSearch,
+    };
+    sessionStorage.setItem("summaryManageBack", JSON.stringify(backData));
+  }
+  next();
+});
+
+const {
+  page_no,
+  dataList,
+  industry,
+  status,
+  issueTime,
+  valueAuthor,
+  authorOptions,
+  options,
+  titleValue,
+  total,
+  PageSize,
+  chartPermissionList,
+  shortcutIsDialog,
+  isClientSwitch,
+  generaitondialogVisib,
+  generaitonId,
+  generaitonType,
+  tabsList,
+  tabsIndex,
+  collectionDlgShow,
+  collectionId,
+  collectionType,
+  token,
+  labelSearch,
+} = toRefs(pageState);
+</script>
+
 <template>
   <div class="container-summary">
     <!-- 内容el-card -->
     <el-card>
       <!-- 选择部分 -->
       <div class="screen-box">
-        <div style="margin-bottom: 20px">
-          <el-select placeholder="请选择报告类型" clearable v-model="industry" @change="conditionChange" style="margin-bottom: 20px">
+        <div>
+          <el-select placeholder="请选择报告类型" clearable v-model="industry" @change="conditionChange" >
             <el-option v-for="item in chartPermissionList" :label="item.ArticleTypeName" :key="item.ArticleTypeId" :value="item.ArticleTypeId"></el-option>
           </el-select>
           <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>
           <date-picker v-model="issueTime" type="date" range placeholder="发布时间" value-type="format" @change="conditionChange"> </date-picker>
-          <el-input v-model="titleValue" placeholder="请输入报告标题" clearable style="display: inline-block; width: 240px">
-            <i slot="prefix" class="el-input__icon el-icon-search"></i>
-          </el-input>
-          <el-input v-model="labelSearch" placeholder="请输入报告标签" clearable style="display: inline-block; width: 240px">
-            <i slot="prefix" class="el-input__icon el-icon-search"></i>
-          </el-input>
+          <el-input v-model="titleValue" placeholder="请输入报告标题" clearable style="display: inline-block; width: 240px" :prefix-icon="Search"> </el-input>
+          <el-input v-model="labelSearch" placeholder="请输入报告标签" clearable style="display: inline-block; width: 240px" :prefix-icon="Search"> </el-input>
           <el-select v-model="valueAuthor" filterable clearable @change="conditionChange" :filter-method="remoteMethodAuthor" placeholder="作者昵称" @clear="clearAuthor">
             <el-option v-for="item in authorOptions" :key="item.DepartmentId" :label="item.Content" :value="item.DepartmentId"> </el-option>
           </el-select>
@@ -29,26 +342,38 @@
       <!-- 表格部分 -->
       <el-table :data="dataList" style="width: 100%" border>
         <el-table-column key="title" align="center" label="报告标题" min-width="300">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span class="editsty" style="color: #409eff" @click="lookDetail(scope.row)">{{ scope.row.Title }}</span>
           </template>
         </el-table-column>
         <el-table-column key="category" prop="ArticleTypeName" align="center" label="报告类型" min-width="95"></el-table-column>
         <el-table-column key="label" prop="IndustryName" align="center" label="标签" min-width="160"></el-table-column>
         <el-table-column key="nickName" prop="NickName" align="center" label="作者昵称" min-width="90">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span class="editsty" @click="collectionIsShow(scope.row.DepartmentId, '关注')">{{ scope.row.NickName }}</span>
           </template>
         </el-table-column>
         <el-table-column key="PublishDate" min-width="160" prop="PublishDate" align="center" label="发布时间"></el-table-column>
         <el-table-column key="LastUpdatedTime" min-width="160" prop="LastUpdatedTime" align="center" label="更新时间"></el-table-column>
         <el-table-column key="status" align="center" label="发布状态" min-width="100">
-          <template slot-scope="scope">
+          <template #default="scope">
             {{ scope.row.PublishStatus == 0 ? "未发布" : "已发布" }}
           </template>
         </el-table-column>
-        <el-table-column key="pvUv" width="130" label="PV / UV" align="center" :render-header="renderHeader">
-          <template slot-scope="scope">
+        <el-table-column key="pvUv" width="130" label="PV / UV" align="center">
+          <template #header>
+            <div style="display: flex; align-items: center; justify-content: center">
+              <p style="margin-right: 5px">PV / UV</p>
+              <el-tooltip placement="top-start">
+                <template #content>
+                  <p>pv：报告被打开的次数，每次打开都计算一次（只统计有权限用户）</p>
+                  <p>uv：访问报告的人数，每篇报告同一个人访问只计算一次（只统计有权限用户）</p>
+                </template>
+                <el-icon><InfoFilled /></el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+          <template #default="scope">
             <div class="pv-uv-download">
               <span>{{ scope.row.Pv }}/{{ scope.row.Uv }}</span>
               <a :href="`${exportPvUv}${scope.row.ArticleId}&${token}`" download>
@@ -58,17 +383,17 @@
           </template>
         </el-table-column>
         <el-table-column key="collection" align="center" label="收藏数" min-width="80">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span class="editsty" @click="collectionIsShow(scope.row.ArticleId, '收藏')">{{ scope.row.CollectionNum }}</span>
           </template>
         </el-table-column>
         <el-table-column key="ask" width="60" label="留言" align="center">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span @click="inquireBtn(scope.row.ArticleId)" class="editsty">{{ scope.row.CommentNum }}</span>
           </template>
         </el-table-column>
         <el-table-column key="operation" align="center" label="操作" width="150">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span class="editsty" @click="operationBtn(scope.row.ArticleId, '发布')">{{ scope.row.PublishStatus == 0 ? "发布" : "取消发布" }} &nbsp;&nbsp;</span>
             <span class="editsty" @click="editBtn(scope.row.ArticleId)">编辑 &nbsp;&nbsp;</span>
             <span class="deletesty" v-if="scope.row.PublishStatus == 0" @click="operationBtn(scope.row.ArticleId, '删除')">删除 &nbsp;&nbsp;</span>
@@ -81,313 +406,12 @@
         <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
       </el-col>
     </el-card>
-    <shortcut-dialog :shortcutIsDialog.sync="shortcutIsDialog" />
-    <generation-ask :generaitondialogVisib.sync="generaitondialogVisib" :generaitonId="generaitonId" :generaitonType="generaitonType" />
+    <shortcut-dialog v-model:shortcutIsDialog="shortcutIsDialog" />
+    <generation-ask v-model:generaitondialogVisib="generaitondialogVisib" :generaitonId="generaitonId" :generaitonType="generaitonType" />
     <focus-collection :collectionDlgShow="collectionDlgShow" :collectionId="collectionId" :collectionType="collectionType" />
   </div>
 </template>
 
-<script>
-import mPage from "@/components/mPage.vue";
-import { raiInterface } from "@/api/api.js";
-import ShortcutDialog from "../components/shortcutDialog.vue";
-import GenerationAsk from "../components/generationAsk.vue";
-import FocusCollection from "../components/focusCollection.vue";
-export default {
-  name: "",
-  components: { mPage, ShortcutDialog, GenerationAsk, FocusCollection },
-  props: {},
-  watch: {
-    titleValue(newval) {
-      this.page_no = 1;
-      this.getsummaryManageList();
-    },
-    labelSearch(newval) {
-      this.page_no = 1;
-      this.getsummaryManageList();
-    },
-    valueAuthor: {
-      handler(newval) {
-        if (newval === "") {
-          this.authorOptions = [];
-        }
-      },
-    },
-  },
-  data() {
-    return {
-      page_no: sessionStorage.getItem("summaryManageBack") ? JSON.parse(sessionStorage.getItem("summaryManageBack")).page_no : 1,
-      dataList: [], //表格内容
-      industry: "", //行业
-      status: "", //状态
-      issueTime: "", //时间
-      valueAuthor: "", //作者昵称
-      authorOptions: [], //作者数组
-      options: [
-        { id: 0, name: "未发布" },
-        { id: 1, name: "已发布" },
-      ],
-      titleValue: "", //标题关键词
-      total: 0, //条数
-      PageSize: 10, //每页显示几条
-      chartPermissionList: [], //行业的数组
-      shortcutIsDialog: false, //
-      isClientSwitch: false, //
-      generaitondialogVisib: false, //代问的弹框
-      generaitonId: "",
-      generaitonType: "纪要",
-      tabsList: [
-        { id: 1, name: "纪要" },
-        { id: 2, name: "观点" },
-      ],
-      tabsIndex: 1,
-      collectionDlgShow: false, //关注 收藏 隐显
-      collectionId: "", //关注 收藏 id
-      collectionType: "", //关注 收藏 类型区分
-      token: localStorage.getItem("auth") || "",
-      labelSearch: "",
-    };
-  },
-  computed: {
-    sta() {
-      return this.status === 0 ? this.status : this.status === 1 ? this.status : 2;
-    },
-    exportPvUv() {
-      return import.meta.env.VITE_APP_API_ROOT + "/cygx/summaryManage/articleHistoryExport?ArticleId=";
-    },
-  },
-
-  created() {
-    this.routerInit();
-  },
-  mounted() {
-    this.chartPermission();
-    this.sustainableDetailSummaryManage();
-    this.remoteMethodAuthor();
-    this.getsummaryManageList();
-  },
-  methods: {
-    //页面缓存 路由
-    routerInit() {
-      if (sessionStorage.getItem("summaryManageBack")) {
-        const { keyword, status, issueTime, tabs, industry, valueAuthor, labelSearch } = JSON.parse(sessionStorage.getItem("summaryManageBack"));
-        this.titleValue = keyword;
-        this.status = status; //状态
-        this.issueTime = issueTime; //时间
-        this.tabsIndex = tabs;
-        this.industry = industry;
-        this.valueAuthor = valueAuthor;
-        this.labelSearch = labelSearch;
-      }
-    },
-    //获取观点
-    sustainableDetailSummaryManage() {
-      raiInterface.sustainableDetailSummaryManage().then((res) => {
-        if (res.Ret === 200) {
-          this.isClientSwitch = !res.Data.OperationButton;
-        }
-      });
-    },
-    //table表头Pu/Uv自定义
-    renderHeader(h, { column, $index }) {
-      return h("div", { attrs: { style: "padding:0;" } }, [
-        h("span", column.label),
-        h("el-tooltip", { props: { placement: "top" } }, [
-          h("p", { slot: "content", attrs: { style: "display:block;padding:5px 0;width:420px;" } }, "pv：报告被打开的次数，每次打开都计算一次（只统计有权限用户）"),
-          h("p", { slot: "content", attrs: { style: "display:block;padding:5px 0;width:420px;" } }, "uv：访问报告的人数，每篇报告同一个人访问只计算一次（只统计有权限用户）"),
-          h("el-button", { props: { icon: "el-icon-info" }, attrs: { style: "border:none;background:none;padding:5px" } }, ""),
-        ]),
-      ]);
-    },
-    //操作按键 发布 取消发布 删除
-    operationBtn(id, value) {
-      this.$confirm(`确定${value}该纪要吗？`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(async () => {
-          if (value == "删除") {
-            const res = await raiInterface.getsummaryManagedelete({ ArticleId: id });
-            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 {
-            const res = await raiInterface.publishAndCancel({ ArticleId: id });
-            if (res.Ret !== 200) return;
-            this.$message.success(`${value}成功！`);
-            this.getsummaryManageList();
-          }
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: `已取消${value}`,
-          });
-        });
-    },
-    //编辑按钮
-    editBtn(id) {
-      console.log(id);
-      this.$router.push({
-        path: "/editSummary",
-        query: { id: id },
-      });
-    },
-    //分页
-    handleCurrentChange(page) {
-      this.page_no = page;
-      this.getsummaryManageList();
-    },
-    //获取行业
-    chartPermission() {
-      raiInterface.summaryManageArticleType().then((res) => {
-        if (res.Ret === 200) {
-          this.chartPermissionList = res.Data.List;
-        }
-      });
-    },
-    //文章详情
-    async lookDetail(item) {
-      if (item.PublishStatus === 1) {
-        let href = `${process.env.CYGX_WEB}/material/info/${item.ArticleId}`;
-        window.open(href, "_blank");
-      } else {
-        const res = await raiInterface.getsummaryManagedetail({ ArticleId: item.ArticleId });
-        if (res.Ret === 200) {
-          sessionStorage.setItem("summaryPre", JSON.stringify(res.Data));
-          let { href } = this.$router.resolve({ name: "预览研选报告" });
-          window.open(href, "_blank");
-        }
-      }
-    },
-    //列表
-    getsummaryManageList() {
-      raiInterface
-        .getsummaryManageList({
-          CurrentIndex: this.page_no,
-          PageSize: this.PageSize,
-          PublishStatus: this.sta - 0,
-          ArticleTypeId: this.industry,
-          StartDate: this.issueTime[0],
-          EndDate: this.issueTime[1],
-          KeyWord: this.titleValue,
-          Departmentİd: this.valueAuthor,
-          Label: this.labelSearch,
-        })
-        .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();
-    },
-    switchClickClient(value) {
-      const str = value ? "开放" : "隐藏";
-      this.$confirm(`【研选】系列纪要、报告、专家电话会将对永续客户${str}，是否继续？`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          raiInterface.sustainableEditSummaryManage().then((res) => {
-            if (res.Ret === 200) {
-              this.sustainableDetailSummaryManage();
-              this.$message.success("操作成功");
-            }
-          });
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消操作",
-          });
-        });
-    },
-    //点击代问的弹框
-    inquireBtn(id) {
-      this.generaitondialogVisib = true;
-      this.generaitonId = id;
-    },
-    tabsClick(item) {
-      if (this.tabsIndex !== item.id) {
-        this.tabsIndex = item.id;
-      }
-      this.page_no = 1;
-      this.init();
-      this.getsummaryManageList();
-      this.remoteMethodAuthor();
-    },
-    init() {
-      this.status = "";
-      this.industry = "";
-      this.issueTime = "";
-      this.titleValue = "";
-      this.valueAuthor = "";
-      this.labelSearch = "";
-      this.authorOptions = [];
-    },
-    //收藏 作者关注 点击事件
-    collectionIsShow(id, type) {
-      this.collectionId = id; //关注 收藏 id
-      this.collectionType = type; //关注 收藏 类型区分
-      this.collectionDlgShow = true;
-    },
-    //作者的搜索
-    async remoteMethodAuthor(query) {
-      const res = await raiInterface.departmentList({ KeyWord: query });
-      if (res.Ret === 200) {
-        this.authorOptions = res.Data.List || [];
-      }
-    },
-    //清除作者的某一项后要有原有的数据
-    clearAuthor() {
-      this.remoteMethodAuthor();
-    },
-    // 置顶 取消置顶
-    async toppingHandler(item) {
-      const res = await raiInterface.summaryManageTopChange({ ArticleId: item.ArticleId });
-      if (res.Ret === 200) {
-        this.getsummaryManageList();
-        this.$message.success("操作成功");
-      }
-    },
-  },
-  //路由离开
-  beforeRouteLeave(to, from, next) {
-    let backData = {};
-    if (to.path == "/editSummary") {
-      backData = {
-        page_no: this.page_no,
-        keyword: this.titleValue,
-        status: this.status, //状态
-        issueTime: this.issueTime, //时间
-        tabs: this.tabsIndex,
-        industry: this.industry,
-        valueAuthor: this.valueAuthor,
-        labelSearch: this.labelSearch,
-      };
-      sessionStorage.setItem("summaryManageBack", JSON.stringify(backData));
-    }
-    next();
-  },
-  //路由进入
-  beforeRouteEnter(to, from, next) {
-    if (from.path != "/editSummary") {
-      sessionStorage.removeItem("summaryManageBack");
-    }
-    next();
-  },
-};
-</script>
 <style scoped lang="scss">
 .container-summary {
   .el-card {
@@ -453,5 +477,11 @@ export default {
       margin-left: 10px;
     }
   }
+  .screen-right {
+    position: relative;
+  }
+  :deep(.el-input__wrapper) {
+    margin-bottom: 20px !important;
+  }
 }
 </style>