Newer
Older
urbanLifeline_YanAn / src / views / OutgoingCall / templateList.vue
@zhangqy zhangqy on 6 Oct 14 KB 菜单调整
  1. <template>
  2. <div class="app-container">
  3. <el-form
  4. :model="queryParams"
  5. ref="queryRef"
  6. :inline="true"
  7. v-show="showSearch"
  8. label-width="110px"
  9. >
  10. <!-- <el-form-item label="模板id" prop="robotId">
  11. <el-input
  12. v-model="queryParams.robotId"
  13. placeholder="请输入模板id"
  14. clearable
  15. @keyup.enter="handleQuery"
  16. />
  17. </el-form-item> -->
  18. <el-form-item label="模板名称" prop="robotName">
  19. <el-input
  20. v-model="queryParams.robotName"
  21. placeholder="请输入模板名称"
  22. clearable
  23. @keyup.enter="handleQuery"
  24. />
  25. </el-form-item>
  26.  
  27. <!-- <el-form-item label="模板内容" prop="templateDesc">
  28. <el-input
  29. v-model="queryParams.templateDesc"
  30. placeholder="请输入模板内容"
  31. clearable
  32. @keyup.enter="handleQuery"
  33. />
  34. </el-form-item> -->
  35. <el-form-item>
  36. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  37. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  38. <!-- <el-button
  39. type="primary"
  40. plain
  41. icon="Plus"
  42. @click="handleAdd"
  43. v-hasPermi="['outcall:unitVoiceTemplate:add']"
  44. >新增</el-button> -->
  45.  
  46. <el-button
  47. type="success"
  48. plain
  49. icon="Edit"
  50. :disabled="single"
  51. @click="handleUpdate"
  52. v-hasPermi="['outcall:unitVoiceTemplate:edit']"
  53. >修改</el-button
  54. >
  55. <el-button
  56. type="danger"
  57. plain
  58. icon="Delete"
  59. :disabled="multiple"
  60. @click="handleDelete"
  61. v-hasPermi="['outcall:unitVoiceTemplate:remove']"
  62. >删除</el-button
  63. >
  64. <el-button type="warning" plain icon="Refresh" @click="synchronization"
  65. >同步</el-button
  66. >
  67. </el-form-item>
  68. </el-form>
  69.  
  70. <el-table
  71. v-loading="loading"
  72. :data="unitVoiceTemplateList"
  73. @selection-change="handleSelectionChange"
  74. >
  75. <el-table-column type="index" width="55" align="center" prop="序号" />
  76. <el-table-column type="selection" width="55" align="center" />
  77. <!-- <el-table-column label="模板id" align="center" prop="robotId" /> -->
  78. <el-table-column label="模板名称" align="center" prop="robotName" />
  79. <el-table-column label="类型" align="center" prop="callType">
  80. <template #default="scope">
  81. {{ scope.row.callType == 1 ? "呼入" : scope.row.callType == 3 ? "呼出" : "" }}
  82. </template>
  83. </el-table-column>
  84. <el-table-column label="发布状态" align="center" prop="callTypeValue">
  85. <!-- <template #default="scope">
  86. {{scope.row.publishState==1?'未发布':scope.row.publishState==2?'发布中':scope.row.publishState==3?'发布成功':scope.row.publishState==4?'发布失败':''}}
  87. </template> -->
  88. </el-table-column>
  89. <el-table-column label="模板内容" align="center" prop="templateDesc">
  90. <template #default="scope">
  91. {{ scope.row.remark }}
  92. </template>
  93. </el-table-column>
  94. <!-- <el-table-column label="备注" align="center" prop="remark" />
  95. <el-table-column label="状态" align="center" prop="status" /> -->
  96. <el-table-column
  97. label="操作"
  98. align="center"
  99. class-name="small-padding fixed-width"
  100. width="230px"
  101. >
  102. <template #default="scope">
  103. <el-button link type="warning" plain icon="Phone" @click="testClick(scope.row)"
  104. >测试外呼</el-button
  105. >
  106. <el-button
  107. link
  108. type="warning"
  109. icon="Edit"
  110. @click="handleUpdate(scope.row)"
  111. v-hasPermi="['outcall:unitVoiceTemplate:edit']"
  112. >修改</el-button
  113. >
  114. <el-button
  115. link
  116. type="danger"
  117. icon="Delete"
  118. @click="handleDelete(scope.row)"
  119. v-hasPermi="['outcall:unitVoiceTemplate:remove']"
  120. >删除</el-button
  121. >
  122. <!-- <el-button link type="primary" icon="View" @click="handleDetail(scope.row)" v-hasPermi="['outcall:unitVoiceTemplate:view']">详情</el-button> -->
  123. </template>
  124. </el-table-column>
  125. </el-table>
  126.  
  127. <pagination
  128. v-show="total > 0"
  129. :total="total"
  130. v-model:page="queryParams.pageNum"
  131. v-model:limit="queryParams.pageSize"
  132. @pagination="getList"
  133. />
  134.  
  135. <!-- 添加或修改语音外呼-模板信息对话框 -->
  136. <el-dialog :title="title" v-model="open" width="600px" append-to-body>
  137. <el-form
  138. ref="unitVoiceTemplateRef"
  139. :model="form"
  140. :rules="rules"
  141. label-width="150px"
  142. >
  143. <!-- <el-form-item label="模板id" prop="robotId">
  144. <el-input v-model="form.robotId" placeholder="请输入模板id" />
  145. </el-form-item> -->
  146. <el-form-item label="模板名称" prop="robotName">
  147. <el-input disabled v-model="form.robotName" placeholder="请输入模板名称" />
  148. </el-form-item>
  149. <el-form-item
  150. v-for="(item, key) in compileTemplate"
  151. :key="key"
  152. :label="`业务变量${key}`"
  153. :prop="item[key]"
  154. >
  155. <el-input v-model="compileTemplate[key]" />
  156. </el-form-item>
  157. </el-form>
  158. <template #footer>
  159. <div class="dialog-footer">
  160. <el-button type="primary" @click="submitForm">确 定</el-button>
  161. <el-button @click="cancel">取 消</el-button>
  162. </div>
  163. </template>
  164. </el-dialog>
  165.  
  166. <!-- 语音外呼-模板信息详情 -->
  167. <el-dialog
  168. title="语音外呼-模板信息详情"
  169. v-model="detailOpen"
  170. width="800px"
  171. append-to-body
  172. class="dialog-detail-box"
  173. >
  174. <div class="dialog-form-detail flex flex-r flex-wrap">
  175. <!-- <div class="flex flex-r">
  176. <div class="detail-label flex flex-align-center">模板id</div>
  177. <div class="detail-value flex flex-align-center">
  178. {{dialogFormDetail.robotId}}
  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.robotName }}
  185. </div>
  186. </div>
  187. <div class="flex flex-r">
  188. <div class="detail-label flex flex-align-center">1-呼入,3-呼出</div>
  189. <div class="detail-value flex flex-align-center">
  190. {{ dialogFormDetail.callType }}
  191. </div>
  192. </div>
  193. <div class="flex flex-r">
  194. <div class="detail-label flex flex-align-center">
  195. 发布状态,1-未发布,2-发布中,3-发布成功,4-发布失败
  196. </div>
  197. <div class="detail-value flex flex-align-center">
  198. {{ dialogFormDetail.publishState }}
  199. </div>
  200. </div>
  201. <div class="flex flex-r">
  202. <div class="detail-label flex flex-align-center">模板内容</div>
  203. <div class="detail-value flex flex-align-center">
  204. {{ dialogFormDetail.templateDesc }}
  205. </div>
  206. </div>
  207. <div class="flex flex-r">
  208. <div class="detail-label flex flex-align-center">备注</div>
  209. <div class="detail-value flex flex-align-center">
  210. {{ dialogFormDetail.remark }}
  211. </div>
  212. </div>
  213. <div class="flex flex-r">
  214. <div class="detail-label flex flex-align-center">状态</div>
  215. <div class="detail-value flex flex-align-center">
  216. {{ dialogFormDetail.status }}
  217. </div>
  218. </div>
  219. </div>
  220. <template #footer>
  221. <div class="dialog-footer">
  222. <el-button @click="cancel">关 闭</el-button>
  223. </div>
  224. </template>
  225. </el-dialog>
  226. <!-- 测试外呼 -->
  227. <el-dialog title="测试外呼" v-model="testModel" width="600px" append-to-body>
  228. <el-form
  229. ref="testRef"
  230. :model="testForm"
  231. :rules="testRules"
  232. label-width="150px"
  233. v-loading="testloading"
  234. >
  235. <!-- <el-form-item label="模板id" prop="robotId">
  236. <el-input v-model="form.robotId" placeholder="请输入模板id" />
  237. </el-form-item> -->
  238. <el-form-item label="手机号" prop="phones">
  239. <el-input
  240. v-model="testForm.phones"
  241. placeholder="请输入手机号,多个手机号用逗号隔开"
  242. />
  243. </el-form-item>
  244. <el-form-item
  245. v-for="(item, key) in conTemplate"
  246. :key="key"
  247. :label="`业务变量${key}`"
  248. :prop="item[key]"
  249. >
  250. <el-input v-model="conTemplate[key]" />
  251. </el-form-item>
  252. </el-form>
  253. <template #footer>
  254. <div class="dialog-footer">
  255. <el-button type="primary" @click="testSubmit">确 定</el-button>
  256. <el-button @click="testCancel">取 消</el-button>
  257. </div>
  258. </template>
  259. </el-dialog>
  260. </div>
  261. </template>
  262.  
  263. <script setup name="UnitVoiceTemplate">
  264. import {
  265. pageunitVoiceTemplate,
  266. getunitVoiceTemplate,
  267. delunitVoiceTemplate,
  268. addunitVoiceTemplate,
  269. updateunitVoiceTemplate,
  270. unitVoiceTemplateSync,
  271. unitVoiceTemplateCall,
  272. } from "@/api/OutgoingCall/templateList";
  273. import { ref } from "vue";
  274.  
  275. const { proxy } = getCurrentInstance();
  276.  
  277. const unitVoiceTemplateList = ref([]);
  278. const open = ref(false);
  279. const loading = ref(true);
  280. const showSearch = ref(true);
  281. const ids = ref([]);
  282. const single = ref(true);
  283. const multiple = ref(true);
  284. const total = ref(0);
  285. const title = ref("");
  286. const detailOpen = ref(false);
  287.  
  288. const data = reactive({
  289. form: {},
  290. queryParams: {
  291. pageNum: 1,
  292. pageSize: 10,
  293. robotId: null,
  294. robotName: null,
  295. callType: null,
  296. publishState: null,
  297. templateDesc: null,
  298. status: null,
  299. },
  300. rules: {
  301. // templateDesc: [{ required: true, message: "模板内容不能为空", trigger: "blur" }
  302. // ],
  303. },
  304. dialogFormDetail: {}, //详情弹框数据
  305. });
  306.  
  307. const { queryParams, form, rules, dialogFormDetail } = toRefs(data);
  308.  
  309. /** 查询语音外呼-模板信息列表 */
  310. function getList() {
  311. loading.value = true;
  312. pageunitVoiceTemplate(queryParams.value).then((response) => {
  313. unitVoiceTemplateList.value = response.data;
  314. total.value = response.total;
  315. loading.value = false;
  316. });
  317. }
  318.  
  319. // 取消按钮
  320. function cancel() {
  321. open.value = false;
  322. detailOpen.value = false;
  323. reset();
  324. }
  325.  
  326. // 表单重置
  327. function reset() {
  328. form.value = {
  329. id: null,
  330. robotId: null,
  331. robotName: null,
  332. callType: null,
  333. publishState: null,
  334. templateDesc: null,
  335. remark: null,
  336. status: null,
  337. delFlag: null,
  338. createBy: null,
  339. createTime: null,
  340. updateBy: null,
  341. updateTime: null,
  342. };
  343. proxy.resetForm("unitVoiceTemplateRef");
  344. }
  345.  
  346. /** 搜索按钮操作 */
  347. function handleQuery() {
  348. queryParams.value.pageNum = 1;
  349. getList();
  350. }
  351.  
  352. /** 重置按钮操作 */
  353. function resetQuery() {
  354. proxy.resetForm("queryRef");
  355. handleQuery();
  356. }
  357.  
  358. // 多选框选中数据
  359. function handleSelectionChange(selection) {
  360. ids.value = selection.map((item) => item.id);
  361. single.value = selection.length != 1;
  362. multiple.value = !selection.length;
  363. }
  364.  
  365. /** 新增按钮操作 */
  366. function handleAdd() {
  367. reset();
  368. open.value = true;
  369. title.value = "添加语音外呼-模板信息";
  370. }
  371. const compileTemplate = ref(null);
  372.  
  373. /** 修改按钮操作 */
  374. function handleUpdate(row) {
  375. reset();
  376. const _id = row.id || ids.value;
  377. getunitVoiceTemplate(_id).then((response) => {
  378. form.value = response.data;
  379. compileTemplate.value = JSON.parse(response.data.templateDesc);
  380. open.value = true;
  381. title.value = "修改语音外呼-模板信息";
  382. });
  383. }
  384.  
  385. /** 提交按钮 */
  386. function submitForm() {
  387. proxy.$refs["unitVoiceTemplateRef"].validate((valid) => {
  388. if (valid) {
  389. console.log("form", form.value);
  390. console.log("compileTemplate", compileTemplate.value);
  391. form.value.templateDesc = JSON.stringify(compileTemplate.value);
  392. updateunitVoiceTemplate(form.value).then((response) => {
  393. proxy.$modal.msgSuccess("修改成功");
  394. open.value = false;
  395. getList();
  396. });
  397. }
  398. });
  399. }
  400.  
  401. /** 删除按钮操作 */
  402. function handleDelete(row) {
  403. proxy.$modal
  404. .confirm('是否确认删除模板"' + row.robotName + '"的数据项?')
  405. .then(function () {
  406. return delunitVoiceTemplate(row.id);
  407. })
  408. .then(() => {
  409. getList();
  410. proxy.$modal.msgSuccess("删除成功");
  411. })
  412. .catch(() => {});
  413. }
  414.  
  415. //查看详情操作
  416. function handleDetail(row) {
  417. detailOpen.value = true;
  418. dialogFormDetail.value = row;
  419. }
  420. // 同步
  421. function synchronization() {
  422. loading.value = true;
  423. unitVoiceTemplateSync().then((res) => {
  424. console.log("res", res);
  425. loading.value = false;
  426.  
  427. if (res.code == 200) {
  428. proxy.$modal.msgSuccess("同步成功");
  429. getList();
  430. } else {
  431. proxy.$modal.warning("同步失败");
  432. }
  433. });
  434. }
  435. // 测试外呼
  436. const testModel = ref(false);
  437. const testForm = ref({
  438. robotId: "",
  439. phones: "",
  440. });
  441. const conTemplate = ref({});
  442. const testloading = ref(false);
  443.  
  444. const testRules = ref({
  445. phones: [
  446. { required: true, message: "请输入手机号,多个手机号用逗号隔开", trigger: "blur" },
  447. ],
  448. });
  449.  
  450. function testClick(row) {
  451. testModel.value = true;
  452. conTemplate.value = JSON.parse(row.templateDesc);
  453. console.log("conTemplate.value", conTemplate.value);
  454. testForm.value.robotId = row.robotId;
  455. }
  456. /** 测试外呼提交按钮 */
  457. function testSubmit() {
  458. proxy.$refs["testRef"].validate((valid) => {
  459. if (valid) {
  460. testloading.value = true;
  461. console.log("conTemplate.value", conTemplate.value);
  462. let text = conTemplate.value;
  463. console.log("text", text);
  464. let params = {
  465. robotId: testForm.value.robotId,
  466. phones: testForm.value.phones,
  467. templateDesc: text,
  468. };
  469. unitVoiceTemplateCall(params).then((response) => {
  470. testloading.value = false;
  471.  
  472. proxy.$modal.msgSuccess("发送成功");
  473. testModel.value = false;
  474. });
  475. }
  476. });
  477. }
  478.  
  479. // 测试外呼取消按钮
  480. function testCancel() {
  481. testModel.value = false;
  482. testForm.value = {
  483. phones: "",
  484. robotId: "",
  485. templateDesc: {},
  486. };
  487. proxy.resetForm("testRef");
  488. }
  489.  
  490. getList();
  491. </script>