feat: 适配录音时编辑

src/components/pages/classroomObservation/components/chatArea.vue

@@ -56,7 +56,8 @@
       <EditorBar
         class="editorBar"
         :showGetTextLoading="showGetTextLoading"
-        v-model="editorBarData.content"
+        :value="editorBarData.content"
+        @change="onEdit"
         v-if="pageStatus == 2 && !showIndexPage && editorBarData.type == '0'"
         v-loading="uploadFileLoading"
       >
@@ -887,7 +888,7 @@ export default {
           console.log(e);
           console.log("👇转译结果👇");
           console.log(privText);
-          this.recordedForm.textList.push({
+          const newItem = {
             value: privText,
             startTime: this.updateRecordedTime({
               duration: this.recordedForm.startTime
@@ -898,20 +899,34 @@ export default {
             time: this.updateRecordedTime({
               duration: this.recordedForm.endTime - this.recordedForm.startTime
             })
-          });
+          }
+          this.recordedForm.textList.push(newItem);
           this.recordedForm.startTime = this.recordedForm.timeDuration + 1;
           this.transcriptionData.content += privText;
 
-          let _result = `
-					<table
-							border="0"
-							width="100%"
-							cellpadding="0"
-							cellspacing="0"
-							style="text-align: center"
-						>
-							<tbody>
-								<tr>
+          const _div = document.createElement("div");
+          _div.innerHTML = this.editorBarData.content;
+          const _rows = Array.from(_div.querySelectorAll("table tbody tr")).slice(1);
+          const newRow = document.createElement('tr')
+          newRow.innerHTML = `
+            <td>${this.recordedForm.textList.length}</td>
+            <td>${newItem.startTime}</td>
+            <td>${newItem.endTime}</td>
+            <td>${newItem.value}</td>
+            <td>${newItem.time}</td>
+            <td></td>
+            <td></td>`
+          _rows.push(newRow)
+          const _actionTypeColumn = _.get(this.actionTypesMap, ["jsonData", "default"], []);
+          this.editorBarData.content = `<table
+            border="0"
+            width="100%"
+            cellpadding="0"
+            cellspacing="0"
+            style="text-align: center"
+          >
+            <tbody>
+              <tr>
 									<th>序号</th>
 									<th>开始时间</th>
 									<th>结束时间</th>
@@ -919,32 +934,22 @@ export default {
 									<th>时长</th>
 									<th>说话人身份</th>
 									<th>行为编码</th>
-								</tr>
-					`;
-          this.recordedForm.textList.forEach((item, index) => {
-            _result += `<tr>
-								<td>${index + 1}</td>
-								<td>${item.startTime}</td>
-								<td>${item.endTime}</td>
-								<td>${item.value}</td>
-								<td>${item.time}</td>
-								<td></td>
-								<td></td>
-							</tr>`;
-          });
-          _result += `
-					<tr>
-								<td></td>
-								<td></td>
-								<td></td>
-								<td></td>
-								<td></td>
-								<td></td>
 							</tr>
-						</tbody>
-					</table>`;
-          this.editorBarData.content = _result;
-        };
+              ${_.zip(_rows, _actionTypeColumn)
+                .map(([_row, _actionType], index) => {
+                  while (_row.cells.length >= 7) {
+                    _row.removeChild(_row.lastElementChild);
+                  }
+                  const ch = document.createElement('td');
+                  ch.innerHTML = _actionType || "";
+                  _row.appendChild(ch);
+                  return _row.outerHTML;
+                })
+                .join("")}
+            </tbody>
+          </table>
+          `;
+        }
       } else if ([1, 2].includes(this.recordedForm.status)) {
         this.controlsStatus = 1;
         this.$message.info("还在录音中");
@@ -1120,16 +1125,29 @@ export default {
           this.recordedForm.startTime = this.recordedForm.timeDuration + 1;
           this.transcriptionData.content += privText;
 
-          let _result = `
-					<table
-							border="0"
-							width="100%"
-							cellpadding="0"
-							cellspacing="0"
-							style="text-align: center"
-						>
-							<tbody>
-								<tr>
+          const _div = document.createElement("div");
+          _div.innerHTML = this.editorBarData.content;
+          const _rows = Array.from(_div.querySelectorAll("table tbody tr")).slice(1);
+          const newRow = document.createElement('tr')
+          newRow.innerHTML = `
+            <td>${this.recordedForm.textList.length}</td>
+            <td>${newItem.startTime}</td>
+            <td>${newItem.endTime}</td>
+            <td>${newItem.value}</td>
+            <td>${newItem.time}</td>
+            <td></td>
+            <td></td>`
+          _rows.push(newRow)
+          const _actionTypeColumn = _.get(this.actionTypesMap, ["jsonData", "default"], []);
+          this.editorBarData.content = `<table
+            border="0"
+            width="100%"
+            cellpadding="0"
+            cellspacing="0"
+            style="text-align: center"
+          >
+            <tbody>
+              <tr>
 									<th>序号</th>
 									<th>开始时间</th>
 									<th>结束时间</th>
@@ -1138,31 +1156,20 @@ export default {
 									<th>说话人身份</th>
 									<th>行为编码</th>
 							</tr>
-					`;
-          this.recordedForm.textList.forEach((item, index) => {
-            _result += `<tr>
-								<td>${index + 1}</td>
-								<td>${item.startTime}</td>
-								<td>${item.endTime}</td>
-								<td>${item.value}</td>
-								<td>${item.time}</td>
-								<td></td>
-								<td></td>
-							</tr>`;
-          });
-          _result += `
-					<tr>
-								<td></td>
-								<td></td>
-								<td></td>
-								<td></td>
-								<td></td>
-								<td></td>
-								<td></td>
-							</tr>
-						</tbody>
-					</table>`;
-          this.editorBarData.content = _result;
+              ${_.zip(_rows, _actionTypeColumn)
+                .map(([_row, _actionType], index) => {
+                  while (_row.cells.length >= 7) {
+                    _row.removeChild(_row.lastElementChild);
+                  }
+                  const ch = document.createElement('td');
+                  ch.innerHTML = _actionType || "";
+                  _row.appendChild(ch);
+                  return _row.outerHTML;
+                })
+                .join("")}
+            </tbody>
+          </table>
+          `;
         };
         // this.$message.success("已开始录音")
         // this.recordedForm.timer = setInterval(() => {
@@ -2579,6 +2586,15 @@ ${JSON.stringify(_list)}
       });
       this.jobContext = null;
     },
+    onEdit(value) {
+      const div = document.createElement('div')
+      div.innerHTML = value
+      const table = div.querySelector('table')
+      const rows = Array.from( table.querySelectorAll(`tbody tr`) ).slice(1);
+      this.actionTypesMap.jsonData.default = rows.map(row => _.get(row, ['cells', 6, 'textContent'], ''))
+
+      this.editorBarData.content = value
+    },
     async convertMp3ToWav(file) {
       const audioContext = new AudioContext();