文件上传

src/api/meeting.js

@@ -3,3 +3,13 @@ import request from "@/utils/http/index";
 export const meetingList = (params) => {
   return request.get("/md/meeting/find", params);
 };
+
+
+export const meetingAdd = (data) => {
+  return request.post("/md/meeting/add", data);
+};
+
+export const meetingUpload = (data) => {
+  return request.post("/api/upload/file", data);
+
+}
\ No newline at end of file

src/router/modules/staticRouter.js

@@ -26,7 +26,7 @@ export const staticRoute = [
     }
   },
   {
-    path: '/recording-convert',
+    path: '/recording-convert/:id',
     name: "recordingConvert",
     component: () => import("@/views/recording/convert.vue"),
     meta: {

src/views/recording/add.vue

 <template>
   <div class="container py-4 m-auto">
-    <div class="text-xl font-bold mb-2">新增会议</div>
+    <el-button type="text" @click="router.go(-1)">返回</el-button>
 
-    <el-form label-width="120px" label-position="left">
+    <div class="text-xl font-bold mb-2 mt-1">新增会议</div>
+
+    <el-form ref="form" label-width="120px" label-position="left">
       <el-form-item label="会议主题">
         <el-input v-model="formState.meetingName"></el-input>
       </el-form-item>
       <el-form-item label="会议时间">
-        <el-date-picker type="date" value-format="YYYY-MM-DD" v-model="formState.meetingTime"></el-date-picker>
+        <el-date-picker
+          type="date"
+          value-format="YYYY-MM-DD"
+          v-model="formState.meetingTime"
+        ></el-date-picker>
       </el-form-item>
       <el-form-item label="主持人">
         <el-input v-model="formState.meetingHost"></el-input>
       </el-form-item>
     </el-form>
 
-
-    <div class="text-lg mb-2">
-        参会人员
-    </div>
+    <div class="text-lg mb-2">参会人员</div>
     <vxe-table :data="tableData">
-        <vxe-column field="name" title="姓名"></vxe-column>
-        <vxe-column field="role" title="部门/角色"></vxe-column>
-        <vxe-column field="projectRole" title="项目角色"></vxe-column>
+      <vxe-column field="name" title="姓名"></vxe-column>
+      <vxe-column field="role" title="部门/角色"></vxe-column>
+      <vxe-column field="projectRole" title="项目角色"></vxe-column>
     </vxe-table>
 
-    
+    <div>
+      <el-button type="primary" @click="hanldeSubmit">提交</el-button>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { reactive } from 'vue';
-import {ref} from 'vue'
+import { reactive, ref } from "vue";
+import { ElMessage } from "element-plus";
+import { useRouter } from "vue-router";
+import { meetingAdd } from "@/api/meeting";
 
+const form = ref();
+const router = useRouter();
 const tableData = ref([]);
 const formState = reactive({
-    meetingName: '',
-    meetingTime: '',
-    meetingHost: '',
-})
+  meetingName: "",
+  meetingTime: "",
+  meetingHost: "",
+});
+
+const hanldeSubmit = async () => {
+  await form.value.validate();
+  const { data } = await meetingAdd(formState);
+
+  ElMessage.success("创建成功！");
+  setTimeout(() => {
+    router.replace("/recording");
+  }, 1500);
+};
 </script>

src/views/recording/convert.vue

 <template>
-    <div>convert</div>
-</template>
\ No newline at end of file
+  <div class="container py-4 m-auto">
+    <el-button type="text" @click="router.go(-1)">返回</el-button>
+    <div class="text-xl font-bold mb-2 mt-1">会议详情</div>
+
+    <el-descriptions :column="1" border label-width="120px">
+      <el-descriptions-item label="会议主题">{{
+        detail.meetingName
+      }}</el-descriptions-item>
+      <el-descriptions-item label="会议时间">{{
+        detail.meetingTime
+      }}</el-descriptions-item>
+      <el-descriptions-item label="主持人">{{
+        detail.meetingHost
+      }}</el-descriptions-item>
+    </el-descriptions>
+
+    <div class="mt-3">
+        <div class="text-lg font-bold mb-2">转录详情</div>
+        <div class="p-2 border round">{{detail.content}}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, reactive } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+const route = useRoute();
+const router = useRouter()
+const detail = reactive({
+  meetingName: "会议主题----1",
+  meetingTime: "2024-11-01 12:00:00",
+  meetingHost: "主持人",
+  content: "转录详情", // 转录详情
+});
+
+onMounted(() => {
+  const id = route.query?.id;
+  // 请求...
+  console.log(id, "detail - id");
+});
+</script>
\ No newline at end of file

src/views/recording/index.vue

@@ -32,10 +32,28 @@
       <el-button type="success" @click="handleAdd">新增</el-button>
     </div>
     <vxe-table :data="tableData" :loading="loading">
-      <vxe-column field="meetingName" title="会议主题"></vxe-column>
+      <vxe-column field="meetingName" title="会议主题">
+        <template #default="{ row }">
+          <el-link :href="'/recording-convert/' + row.id">{{
+            row.meetingName
+          }}</el-link>
+        </template>
+      </vxe-column>
       <vxe-column field="meetingHost" title="主持人"></vxe-column>
       <vxe-column field="meetingTime" title="会议时间"></vxe-column>
-      <vxe-column field="name4" title="录音"></vxe-column>
+      <vxe-column field="name4" title="录音">
+        <template #default="{ row }">
+          <el-upload
+            :show-file-list="false"
+            action="#"
+            :auto-upload="false"
+            :limit="1"
+            :on-change="(file) => handleChange(file, row)"
+          >
+            <el-button type="primary">上传录音</el-button>
+          </el-upload>
+        </template>
+      </vxe-column>
     </vxe-table>
   </div>
 </template>
@@ -43,8 +61,9 @@
 <script setup>
 import { reactive, ref } from "vue";
 import { useRouter } from "vue-router";
-import { meetingList } from "@/api/meeting";
+import { meetingList, meetingUpload } from "@/api/meeting";
 import { onMounted } from "vue";
+import { ElMessage } from "element-plus";
 
 const formState = reactive({
   meetingName: "",
@@ -52,13 +71,14 @@ const formState = reactive({
   meetingTime: "",
 });
 const tableData = ref([]);
-const loading = ref(false)
+const loading = ref(false);
 const router = useRouter();
 
 const hanldeQuery = async () => {
   loading.value = true;
   try {
     const { data } = await meetingList();
+    tableData.value = data;
   } catch {}
   loading.value = false;
 };
@@ -71,6 +91,16 @@ const handleReset = () => {
   formState.meetingTime = "";
 };
 
+const handleChange = async (file, row) => {
+  const formData = new FormData();
+  formData.append("file", file.raw);
+  formData.append("mdMeeting", JSON.stringify(row));
+
+  const { data } = await meetingUpload(formData);
+
+  ElMessage.success("上传成功！文件地址：" + data);
+};
+
 onMounted(() => {
   hanldeQuery();
 });