Newer
Older
DH_Apicture / src / views / voice / voiceUnitRealtimeRecognitionRecord / index.vue
@zhangqy zhangqy on 29 Nov 12 KB first commit
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="128px">
  4. <el-form-item label="识别动作编号" prop="recognitionActionCode">
  5. <el-input
  6. v-model="queryParams.recognitionActionCode"
  7. placeholder="请输入识别动作编号"
  8. clearable
  9. @keyup.enter="handleQuery"
  10. />
  11. </el-form-item>
  12. <el-form-item label="识别数据来源编号" prop="recognitionDataSourceCode">
  13. <el-input
  14. v-model="queryParams.recognitionDataSourceCode"
  15. placeholder="请输入识别数据来源编号"
  16. clearable
  17. @keyup.enter="handleQuery"
  18. />
  19. </el-form-item>
  20.  
  21. <el-form-item>
  22. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  23. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  24. </el-form-item>
  25. </el-form>
  26.  
  27. <!-- <el-row :gutter="10" class="mb8">
  28. <el-col :span="1.5">
  29. <el-button
  30. type="primary"
  31. plain
  32. icon="Plus"
  33. @click="handleAdd"
  34. v-hasPermi="['voice:voiceUnitRealtimeRecognitionRecord:add']"
  35. >新增</el-button
  36. >
  37. </el-col>
  38. <el-col :span="1.5">
  39. <el-button
  40. type="success"
  41. plain
  42. icon="Edit"
  43. :disabled="single"
  44. @click="handleUpdate"
  45. v-hasPermi="['voice:voiceUnitRealtimeRecognitionRecord:edit']"
  46. >修改</el-button
  47. >
  48. </el-col>
  49. <el-col :span="1.5">
  50. <el-button
  51. type="danger"
  52. plain
  53. icon="Delete"
  54. :disabled="multiple"
  55. @click="handleDelete"
  56. v-hasPermi="['voice:voiceUnitRealtimeRecognitionRecord:remove']"
  57. >删除</el-button
  58. >
  59. </el-col>
  60. <el-col :span="1.5">
  61. <el-button
  62. type="warning"
  63. plain
  64. icon="Download"
  65. @click="handleExport"
  66. v-hasPermi="['voice:voiceUnitRealtimeRecognitionRecord:export']"
  67. >导出</el-button
  68. >
  69. </el-col>
  70. <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
  71. </el-row> -->
  72.  
  73. <el-table
  74. v-loading="loading"
  75. :data="voiceUnitRealtimeRecognitionRecordList"
  76. @selection-change="handleSelectionChange"
  77. height="70vh"
  78. >
  79. <el-table-column type="index" label="序号" width="55" align="center" />
  80. <el-table-column label="语音文件" align="center" prop="voiceFilePath">
  81. <template #default="scope">
  82. <audio ref="audioPlayer" controls :src="scope.row.voiceFilePath"></audio>
  83. </template>
  84. </el-table-column>
  85. <el-table-column label="业务来源编号" align="center" prop="businessSourceCode"> </el-table-column>
  86. <el-table-column label="识别结果" align="center" prop="recognitionResult" />
  87. <el-table-column label="识别动作编号" align="center" prop="recognitionActionCode"> </el-table-column>
  88. <el-table-column label="识别数据来源编号" align="center" prop="recognitionDataSourceCode"> </el-table-column>
  89. <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  90. <template #default="scope">
  91. <el-button
  92. link
  93. type="primary"
  94. icon="View"
  95. @click="handleDetail(scope.row)"
  96. v-hasPermi="['voice:voiceUnitRealtimeRecognitionRecord:view']"
  97. >详情</el-button
  98. >
  99. <el-button
  100. link
  101. type="warning"
  102. icon="Edit"
  103. @click="handleUpdate(scope.row)"
  104. v-hasPermi="['voice:voiceUnitRealtimeRecognitionRecord:edit']"
  105. >修改</el-button
  106. >
  107. <el-button
  108. link
  109. type="danger"
  110. icon="Delete"
  111. @click="handleDelete(scope.row)"
  112. v-hasPermi="['voice:voiceUnitRealtimeRecognitionRecord:remove']"
  113. >删除</el-button
  114. >
  115. </template>
  116. </el-table-column> -->
  117. </el-table>
  118.  
  119. <pagination
  120. v-show="total > 0"
  121. :total="total"
  122. v-model:page="queryParams.pageNum"
  123. v-model:limit="queryParams.pageSize"
  124. @pagination="getList"
  125. />
  126.  
  127. <!-- 添加或修改语音实时识别记录对话框 -->
  128. <el-dialog :title="title" v-model="open" width="500px" append-to-body>
  129. <el-form ref="voiceUnitRealtimeRecognitionRecordRef" :model="form" :rules="rules" label-width="80px">
  130. <el-form-item label="语音文件路径" prop="voiceFilePath">
  131. <el-input v-model="form.voiceFilePath" placeholder="请输入语音文件路径" />
  132. </el-form-item>
  133. <el-form-item label="业务来源编号" prop="businessSourceCode">
  134. <el-input v-model="form.businessSourceCode" placeholder="请输入业务来源编号" />
  135. </el-form-item>
  136. <el-form-item label="识别结果" prop="recognitionResult">
  137. <el-input v-model="form.recognitionResult" placeholder="请输入识别结果" />
  138. </el-form-item>
  139. <el-form-item label="识别动作编号" prop="recognitionActionCode">
  140. <el-input v-model="form.recognitionActionCode" placeholder="请输入识别动作编号" />
  141. </el-form-item>
  142. <el-form-item label="识别数据来源编号" prop="recognitionDataSourceCode">
  143. <el-input v-model="form.recognitionDataSourceCode" placeholder="请输入识别数据来源编号" />
  144. </el-form-item>
  145. <el-form-item label="备注" prop="remark">
  146. <el-input v-model="form.remark" placeholder="请输入备注" />
  147. </el-form-item>
  148. <el-form-item label="删除标志" prop="delFlag">
  149. <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
  150. </el-form-item>
  151. </el-form>
  152. <template #footer>
  153. <div class="dialog-footer">
  154. <el-button type="primary" @click="submitForm">确 定</el-button>
  155. <el-button @click="cancel">取 消</el-button>
  156. </div>
  157. </template>
  158. </el-dialog>
  159.  
  160. <!-- 语音实时识别记录详情 -->
  161. <el-dialog title="语音实时识别记录详情" v-model="detailOpen" width="800px" append-to-body class="dialog-detail-box">
  162. <div class="dialog-form-detail flex flex-r flex-wrap">
  163. <div class="flex flex-r">
  164. <div class="detail-label flex flex-align-center">语音文件路径</div>
  165. <div class="detail-value flex flex-align-center">
  166. {{ dialogFormDetail.voiceFilePath }}
  167. </div>
  168. </div>
  169. <div class="flex flex-r">
  170. <div class="detail-label flex flex-align-center">业务来源编号</div>
  171. <div class="detail-value flex flex-align-center">
  172. {{ dialogFormDetail.businessSourceCode }}
  173. </div>
  174. </div>
  175. <div class="flex flex-r">
  176. <div class="detail-label flex flex-align-center">识别结果</div>
  177. <div class="detail-value flex flex-align-center">
  178. {{ dialogFormDetail.recognitionResult }}
  179. </div>
  180. </div>
  181. <div class="flex flex-r">
  182. <div class="detail-label flex flex-align-center">识别动作编号</div>
  183. <div class="detail-value flex flex-align-center">
  184. {{ dialogFormDetail.recognitionActionCode }}
  185. </div>
  186. </div>
  187. <div class="flex flex-r">
  188. <div class="detail-label flex flex-align-center">识别数据来源编号</div>
  189. <div class="detail-value flex flex-align-center">
  190. {{ dialogFormDetail.recognitionDataSourceCode }}
  191. </div>
  192. </div>
  193. </div>
  194. <template #footer>
  195. <div class="dialog-footer">
  196. <el-button @click="cancel">关 闭</el-button>
  197. </div>
  198. </template>
  199. </el-dialog>
  200. </div>
  201. </template>
  202.  
  203. <script setup name="VoiceUnitRealtimeRecognitionRecord">
  204. import {
  205. pagevoiceUnitRealtimeRecognitionRecord,
  206. getvoiceUnitRealtimeRecognitionRecord,
  207. delvoiceUnitRealtimeRecognitionRecord,
  208. addvoiceUnitRealtimeRecognitionRecord,
  209. updatevoiceUnitRealtimeRecognitionRecord,
  210. } from '@/api/voice/voiceUnitRealtimeRecognitionRecord';
  211. const { proxy } = getCurrentInstance();
  212. const voiceUnitRealtimeRecognitionRecordList = ref([]);
  213. const open = ref(false);
  214. const loading = ref(true);
  215. const showSearch = ref(true);
  216. const ids = ref([]);
  217. const single = ref(true);
  218. const multiple = ref(true);
  219. const total = ref(0);
  220. const title = ref('');
  221. const detailOpen = ref(false);
  222.  
  223. const data = reactive({
  224. form: {},
  225. queryParams: {
  226. pageNum: 1,
  227. pageSize: 10,
  228. voiceFilePath: null,
  229. businessSourceCode: null,
  230. recognitionResult: null,
  231. recognitionActionCode: null,
  232. recognitionDataSourceCode: null,
  233. recognitionDataId: null,
  234. status: null,
  235. },
  236. rules: {},
  237. dialogFormDetail: {}, //详情弹框数据
  238. });
  239.  
  240. const { queryParams, form, rules, dialogFormDetail } = toRefs(data);
  241.  
  242. /** 查询语音实时识别记录列表 */
  243. function getList() {
  244. loading.value = true;
  245. pagevoiceUnitRealtimeRecognitionRecord(queryParams.value).then(response => {
  246. response.data.map(item => {
  247. item.voiceFilePath = item.voiceFilePath ? pathToUrl(item.voiceFilePath) : '';
  248. });
  249.  
  250. voiceUnitRealtimeRecognitionRecordList.value = response.data;
  251. total.value = response.total;
  252. loading.value = false;
  253. });
  254. }
  255.  
  256. function pathToUrl(path) {
  257. if (path) {
  258. const parts = path.split('\\');
  259. const fileName = parts[parts.length - 1];
  260. if (process.env.NODE_ENV === 'development') {
  261. // 在开发环境中,您可能需要使用不同的逻辑来处理 URL
  262. return `http://192.168.20.43:9100/voice/file/${encodeURIComponent(parts[1])}/${fileName}`;
  263. } else {
  264. // 在生产环境中,使用实际的服务器地址和端口
  265. return `${window.location.origin}/voice-file${path}`;
  266. }
  267. } else {
  268. return '';
  269. }
  270. }
  271.  
  272. // 取消按钮
  273. function cancel() {
  274. open.value = false;
  275. detailOpen.value = false;
  276. reset();
  277. }
  278.  
  279. // 表单重置
  280. function reset() {
  281. form.value = {
  282. id: null,
  283. voiceFilePath: null,
  284. businessSourceCode: null,
  285. recognitionResult: null,
  286. recognitionActionCode: null,
  287. recognitionDataSourceCode: null,
  288. recognitionDataId: null,
  289. remark: null,
  290. status: null,
  291. delFlag: null,
  292. createBy: null,
  293. createTime: null,
  294. updateBy: null,
  295. updateTime: null,
  296. };
  297. proxy.resetForm('voiceUnitRealtimeRecognitionRecordRef');
  298. }
  299.  
  300. /** 搜索按钮操作 */
  301. function handleQuery() {
  302. queryParams.value.pageNum = 1;
  303. getList();
  304. }
  305.  
  306. /** 重置按钮操作 */
  307. function resetQuery() {
  308. proxy.resetForm('queryRef');
  309. handleQuery();
  310. }
  311.  
  312. // 多选框选中数据
  313. function handleSelectionChange(selection) {
  314. ids.value = selection.map(item => item.id);
  315. single.value = selection.length != 1;
  316. multiple.value = !selection.length;
  317. }
  318.  
  319. /** 新增按钮操作 */
  320. function handleAdd() {
  321. reset();
  322. open.value = true;
  323. title.value = '添加语音实时识别记录';
  324. }
  325.  
  326. /** 修改按钮操作 */
  327. function handleUpdate(row) {
  328. reset();
  329. const _id = row.id || ids.value;
  330. getvoiceUnitRealtimeRecognitionRecord(_id).then(response => {
  331. form.value = response.data;
  332. open.value = true;
  333. title.value = '修改语音实时识别记录';
  334. });
  335. }
  336.  
  337. /** 提交按钮 */
  338. function submitForm() {
  339. proxy.$refs['voiceUnitRealtimeRecognitionRecordRef'].validate(valid => {
  340. if (valid) {
  341. if (form.value.id != null) {
  342. updatevoiceUnitRealtimeRecognitionRecord(form.value).then(response => {
  343. proxy.$modal.msgSuccess('修改成功');
  344. open.value = false;
  345. getList();
  346. });
  347. } else {
  348. addvoiceUnitRealtimeRecognitionRecord(form.value).then(response => {
  349. proxy.$modal.msgSuccess('新增成功');
  350. open.value = false;
  351. getList();
  352. });
  353. }
  354. }
  355. });
  356. }
  357.  
  358. /** 删除按钮操作 */
  359. function handleDelete(row) {
  360. const _ids = row.id || ids.value;
  361. proxy.$modal
  362. .confirm('是否确认删除语音实时识别记录编号为"' + _ids + '"的数据项?')
  363. .then(function () {
  364. return delvoiceUnitRealtimeRecognitionRecord(_ids);
  365. })
  366. .then(() => {
  367. getList();
  368. proxy.$modal.msgSuccess('删除成功');
  369. })
  370. .catch(() => {});
  371. }
  372.  
  373. /** 导出按钮操作 */
  374. function handleExport() {
  375. proxy.download(
  376. 'voice/voiceUnitRealtimeRecognitionRecord/export',
  377. {
  378. ...queryParams.value,
  379. },
  380. `voiceUnitRealtimeRecognitionRecord_${new Date().getTime()}.xlsx`
  381. );
  382. }
  383. //查看详情操作
  384. function handleDetail(row) {
  385. detailOpen.value = true;
  386. dialogFormDetail.value = row;
  387. }
  388. getList();
  389. </script>