重构导出json

src/components/chatBackup/ChatExportMain.vue

@@ -29,19 +29,19 @@ const result = ref(''); // 用于显示返回值
 
 const setting = {
   'endb': {
-    brief: '加密文件-测试中',
+    brief: '加密文件',
     detail: "导出的内容为微信加密数据库。可还原回微信,但会覆盖微信后续消息。(全程不解密，所以数据安全)",
   },
   'dedb': {
-    brief: '解密文件-测试中',
+    brief: '解密文件',
     detail: "导出的文件为解密后的sqlite数据库，并且会自动合并msg和media数据库为同一个，但是无法还原回微信。",
   },
   'csv': {
-    brief: 'csv-测试中',
+    brief: 'csv',
     detail: "只包含文本，但是可以用excel软件（wps，office）打开。",
   },
   'json': {
-    brief: 'json-测试中',
+    brief: 'json',
     detail: "只包含文本，可用于数据分析，情感分析等方面。",
   },
   'html': {

src/components/chatBackup/ExportHTML.vue

@@ -1,28 +1,58 @@
 <script setup lang="ts">
 
-import {defineProps, watch} from "vue";
+import {defineProps, ref, watch} from "vue";
+import http from "@/router/axios.js";
+import DateTimeSelect from "@/components/utils/DateTimeSelect.vue";
 
 const props = defineProps({
   wxid: {
     type: String,
     required: true,
   }
 });
-
 watch(() => props.wxid, (newVal: string, oldVal: String) => {
   console.log(newVal);
 });
+// 上述代码是监听props.wxid的变化，当props.wxid变化时，会打印新值。
+
+const datetime = ref([]);
+const Result = ref("");
+
+const requestExport = async () => {
+  Result.value = "正在处理中...";
+  try {
+    Result.value = await http.post('/api/export_html', {
+      'wxid': props.wxid,
+      // 'datetime': datetime.value,
+    });
+  } catch (error) {
+    console.error('Error fetching data msg_count:', error);
+    Result.value = "请求失败\n" + error;
+    return [];
+  }
+}
 
-const requestExport = () => {
-  console.log('requestExport');
+// 处理时间选择器的数据
+const handDatetimeChildData = (val: any) => {
+  datetime.value = val;
 }
 
 </script>
 
 <template>
   <div>
-    <span>{{props.wxid}}</span><br>
-    <el-button type="primary" @click="requestExport()">导出</el-button>
+<!--    <div>-->
+<!--      <strong>时间(默认全部)：</strong>-->
+<!--      <DateTimeSelect @datetime="handDatetimeChildData"/>-->
+<!--    </div>-->
+
+    <div style="position: relative;">
+      <el-button type="primary" @click="requestExport()">导出</el-button>
+    </div>
+    <el-divider/>
+    <!-- 结果显示   -->
+    <el-input type="textarea" :rows="6" readonly placeholder="" v-model="Result"
+              style="width: 100%;"></el-input>
   </div>
 </template>