Newer
Older
urbanLifeline_YanAn / src / views / voice / voiceUnitHotWords / index.vue
@zhangqy zhangqy on 3 Oct 9 KB first commit
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
  4. <el-form-item v-show="false" label="业务来源编号" prop="businessSourceCode">
  5. <el-input
  6. v-model="queryParams.businessSourceCode"
  7. placeholder="请输入业务来源编号"
  8. clearable
  9. @keyup.enter="handleQuery"
  10. />
  11. </el-form-item>
  12. <el-form-item label="热词名称" prop="hotWordName">
  13. <el-input v-model="queryParams.hotWordName" placeholder="请输入热词名称" clearable @keyup.enter="handleQuery" />
  14. </el-form-item>
  15. <el-form-item>
  16. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  17. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  18. <el-col :span="1.5">
  19. <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['voice:voiceUnitHotWords:add']"
  20. >新增</el-button
  21. >
  22. </el-col>
  23. </el-form-item>
  24. </el-form>
  25.  
  26. <el-table v-loading="loading" :data="voiceUnitHotWordsList" @selection-change="handleSelectionChange" height="70vh">
  27. <el-table-column type="index" label="序号" width="55" align="center" />
  28. <el-table-column label="热词名称" align="center" prop="hotWordName" />
  29. <el-table-column label="热词拼音" align="center" prop="hotWordPinying" />
  30. <el-table-column label="热词类型" align="center" prop="hotWordType">
  31. <template #default="scope">
  32. <dict-tag :options="sys_hotwordtype" :value="scope.row.hotWordType" />
  33. </template>
  34. </el-table-column>
  35. <el-table-column label="业务来源编号" align="center" prop="businessSourceCode"> </el-table-column>
  36. <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
  37. <template #default="scope">
  38. <el-button
  39. link
  40. type="primary"
  41. icon="View"
  42. @click="handleDetail(scope.row)"
  43. v-hasPermi="['voice:voiceUnitHotWords:view']"
  44. >详情</el-button
  45. >
  46. <el-button
  47. link
  48. type="warning"
  49. icon="Edit"
  50. @click="handleUpdate(scope.row)"
  51. v-hasPermi="['voice:voiceUnitHotWords:edit']"
  52. >修改</el-button
  53. >
  54. <el-button
  55. link
  56. type="danger"
  57. icon="Delete"
  58. @click="handleDelete(scope.row)"
  59. v-hasPermi="['voice:voiceUnitHotWords:remove']"
  60. >删除</el-button
  61. >
  62. </template>
  63. </el-table-column>
  64. </el-table>
  65.  
  66. <pagination
  67. v-show="total > 0"
  68. :total="total"
  69. v-model:page="queryParams.pageNum"
  70. v-model:limit="queryParams.pageSize"
  71. @pagination="getList"
  72. />
  73.  
  74. <!-- 添加或修改语音热词管理对话框 -->
  75. <el-dialog :title="title" v-model="open" width="600px" append-to-body>
  76. <el-form ref="voiceUnitHotWordsRef" :model="form" :rules="rules" label-width="150px">
  77. <el-form-item label="热词名称" prop="hotWordName">
  78. <el-input v-model="form.hotWordName" placeholder="请输入内容" />
  79. </el-form-item>
  80. <el-form-item label="热词类型" prop="hotWordType">
  81. <el-select v-model="form.hotWordType" placeholder="请选择热词类型" style="width: 100%">
  82. <el-option v-for="dict in sys_hotwordtype" :key="dict.value" :label="dict.label" :value="dict.value"> </el-option>
  83. </el-select>
  84. </el-form-item>
  85. <el-form-item label="业务来源编号" prop="businessSourceCode">
  86. <el-input v-model="form.businessSourceCode" placeholder="请输入业务来源编号" />
  87. </el-form-item>
  88. </el-form>
  89. <template #footer>
  90. <div class="dialog-footer">
  91. <el-button type="primary" @click="submitForm">确 定</el-button>
  92. <el-button @click="cancel">取 消</el-button>
  93. </div>
  94. </template>
  95. </el-dialog>
  96.  
  97. <!-- 语音热词管理详情 -->
  98. <el-dialog title="语音热词管理详情" v-model="detailOpen" width="800px" append-to-body class="dialog-detail-box">
  99. <div class="dialog-form-detail flex flex-r flex-wrap">
  100. <div class="flex flex-r">
  101. <div class="detail-label flex flex-align-center">热词名称</div>
  102. <div class="detail-value flex flex-align-center">
  103. {{ dialogFormDetail.hotWordName }}
  104. </div>
  105. </div>
  106. <div class="flex flex-r">
  107. <div class="detail-label flex flex-align-center">热词拼音</div>
  108. <div class="detail-value flex flex-align-center">
  109. {{ dialogFormDetail.hotWordPinying }}
  110. </div>
  111. </div>
  112. <div class="flex flex-r">
  113. <div class="detail-label flex flex-align-center">热词类型</div>
  114. <div class="detail-value flex flex-align-center">
  115. <dict-tag :options="sys_hotwordtype" :value="dialogFormDetail.hotWordType" />
  116. </div>
  117. </div>
  118. <div class="flex flex-r">
  119. <div class="detail-label flex flex-align-center">业务来源编号</div>
  120. <div class="detail-value flex flex-align-center">
  121. {{ dialogFormDetail.businessSourceCode }}
  122. </div>
  123. </div>
  124. </div>
  125. <template #footer>
  126. <div class="dialog-footer">
  127. <el-button @click="cancel">关 闭</el-button>
  128. </div>
  129. </template>
  130. </el-dialog>
  131. </div>
  132. </template>
  133.  
  134. <script setup name="VoiceUnitHotWords">
  135. import {
  136. pagevoiceUnitHotWords,
  137. getvoiceUnitHotWords,
  138. delvoiceUnitHotWords,
  139. addvoiceUnitHotWords,
  140. updatevoiceUnitHotWords,
  141. } from '@/api/voice/voiceUnitHotWords';
  142. import useUserStore from '@/store/modules/user';
  143. const userStore = useUserStore();
  144.  
  145. const { proxy } = getCurrentInstance();
  146. const { sys_hotwordtype } = proxy.useDict('sys_hotwordtype');
  147.  
  148. const voiceUnitHotWordsList = ref([]);
  149. const open = ref(false);
  150. const loading = ref(true);
  151. const showSearch = ref(true);
  152. const ids = ref([]);
  153. const single = ref(true);
  154. const multiple = ref(true);
  155. const total = ref(0);
  156. const title = ref('');
  157. const detailOpen = ref(false);
  158.  
  159. const data = reactive({
  160. form: {},
  161. queryParams: {
  162. pageNum: 1,
  163. pageSize: 10,
  164. hotWordName: null,
  165. hotWordPinying: null,
  166. hotWordType: null,
  167. businessSourceCode: null,
  168. businessDataId: null,
  169. status: null,
  170. hotWordName: null,
  171. },
  172. rules: {
  173. hotWordName: [{ required: true, message: '热词名称不能为空', trigger: 'blur' }],
  174. },
  175. dialogFormDetail: {}, //详情弹框数据
  176. });
  177.  
  178. const { queryParams, form, rules, dialogFormDetail } = toRefs(data);
  179.  
  180. /** 查询语音热词管理列表 */
  181. function getList() {
  182. loading.value = true;
  183. pagevoiceUnitHotWords(queryParams.value).then(response => {
  184. voiceUnitHotWordsList.value = response.data;
  185. total.value = response.total;
  186. loading.value = false;
  187. });
  188. }
  189.  
  190. // 取消按钮
  191. function cancel() {
  192. open.value = false;
  193. detailOpen.value = false;
  194. reset();
  195. }
  196.  
  197. // 表单重置
  198. function reset() {
  199. form.value = {
  200. id: null,
  201. hotWordName: null,
  202. hotWordPinying: null,
  203. hotWordType: null,
  204. businessSourceCode: null,
  205. businessDataId: null,
  206. remark: null,
  207. status: null,
  208. delFlag: null,
  209. createBy: null,
  210. createTime: null,
  211. updateBy: null,
  212. updateTime: null,
  213. };
  214. proxy.resetForm('voiceUnitHotWordsRef');
  215. }
  216.  
  217. /** 搜索按钮操作 */
  218. function handleQuery() {
  219. queryParams.value.pageNum = 1;
  220. getList();
  221. }
  222.  
  223. /** 重置按钮操作 */
  224. function resetQuery() {
  225. proxy.resetForm('queryRef');
  226. handleQuery();
  227. }
  228.  
  229. // 多选框选中数据
  230. function handleSelectionChange(selection) {
  231. ids.value = selection.map(item => item.id);
  232. single.value = selection.length != 1;
  233. multiple.value = !selection.length;
  234. }
  235.  
  236. /** 新增按钮操作 */
  237. function handleAdd() {
  238. reset();
  239. open.value = true;
  240. title.value = '添加语音热词管理';
  241. }
  242.  
  243. /** 修改按钮操作 */
  244. function handleUpdate(row) {
  245. reset();
  246. const _id = row.id || ids.value;
  247. getvoiceUnitHotWords(_id).then(response => {
  248. form.value = response.data;
  249. open.value = true;
  250. title.value = '修改语音热词管理';
  251. });
  252. }
  253.  
  254. /** 提交按钮 */
  255. function submitForm() {
  256. proxy.$refs['voiceUnitHotWordsRef'].validate(valid => {
  257. if (valid) {
  258. if (form.value.id != null) {
  259. updatevoiceUnitHotWords(form.value).then(response => {
  260. proxy.$modal.msgSuccess('修改成功');
  261. open.value = false;
  262. getList();
  263. });
  264. } else {
  265. form.value.createBy = userStore.userInfo.userName;
  266. addvoiceUnitHotWords(form.value).then(response => {
  267. proxy.$modal.msgSuccess('新增成功');
  268. open.value = false;
  269. getList();
  270. });
  271. }
  272. }
  273. });
  274. }
  275.  
  276. /** 删除按钮操作 */
  277. function handleDelete(row) {
  278. const _ids = row.id || ids.value;
  279. proxy.$modal
  280. .confirm('是否确认删除语音热词管理编号为"' + _ids + '"的数据项?')
  281. .then(function () {
  282. return delvoiceUnitHotWords(_ids);
  283. })
  284. .then(() => {
  285. getList();
  286. proxy.$modal.msgSuccess('删除成功');
  287. })
  288. .catch(() => {});
  289. }
  290.  
  291. /** 导出按钮操作 */
  292. function handleExport() {
  293. proxy.download(
  294. 'voice/voiceUnitHotWords/export',
  295. {
  296. ...queryParams.value,
  297. },
  298. `voiceUnitHotWords_${new Date().getTime()}.xlsx`
  299. );
  300. }
  301. //查看详情操作
  302. function handleDetail(row) {
  303. detailOpen.value = true;
  304. dialogFormDetail.value = row;
  305. }
  306. getList();
  307. </script>