CallRecordManager.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583
  1. <template>
  2. <div>
  3. <crumbs title="调用记录" style="min-width: 980px;" class="knowledgeTitle">
  4. <el-form :inline="true" class="demo-form-inline">
  5. <el-form-item label="患者标识:" prop="patientId">
  6. <el-input
  7. size="mini"
  8. v-model="filter.patientId"
  9. placeholder="输入患者标识名称"
  10. clearable
  11. maxlength="50"
  12. ></el-input>
  13. </el-form-item>
  14. <el-form-item label="接收时间: ">
  15. &nbsp;&nbsp;
  16. <el-date-picker
  17. v-model="recepDate"
  18. type="datetimerange"
  19. align="right"
  20. size="small"
  21. start-placeholder="开始日期"
  22. end-placeholder="结束日期"
  23. style="width: 240px"
  24. :default-time="['12:00:00', '08:00:00']"
  25. format="yyyy-MM-dd HH:mm:ss"
  26. value-format="yyyy-MM-dd HH:mm:ss"
  27. >
  28. </el-date-picker>
  29. </el-form-item>
  30. <el-form-item label="响应时间: "
  31. >&nbsp;&nbsp;
  32. <el-date-picker
  33. v-model="resDate"
  34. type="datetimerange"
  35. align="right"
  36. size="small"
  37. start-placeholder="开始日期"
  38. end-placeholder="结束日期"
  39. style="width: 240px"
  40. :default-time="['12:00:00', '08:00:00']"
  41. format="yyyy-MM-dd HH:mm:ss"
  42. value-format="yyyy-MM-dd HH:mm:ss"
  43. >
  44. </el-date-picker>
  45. </el-form-item>
  46. <!-- <el-form-item label="状态:">
  47. <el-select
  48. v-model="filter.successFlag"
  49. clearable
  50. placeholder="请选择"
  51. size="mini"
  52. >
  53. <el-option
  54. v-for="item in stateSelect"
  55. :key="item.successFlag"
  56. :label="item.name"
  57. :value="item.successFlag"
  58. ></el-option>
  59. </el-select>
  60. </el-form-item> -->
  61. <!-- <el-form-item label="院区:" prop="subHospitalName">
  62. <el-input
  63. size="mini"
  64. v-model="filter.subHospitalName"
  65. placeholder="输入规则名称"
  66. clearable
  67. ></el-input>
  68. </el-form-item> -->
  69. <!-- <el-form-item>
  70. <el-button size="mini" @click="filterDatas">确认</el-button>
  71. </el-form-item> -->
  72. </el-form>
  73. <el-form class="secLine" :inline="true">
  74. <el-form-item label="服务名:" prop="sceneName">
  75. <el-input
  76. size="mini"
  77. v-model="filter.sceneName"
  78. placeholder="输入服务名称"
  79. clearable
  80. maxlength="50"
  81. ></el-input>
  82. </el-form-item>
  83. <el-form-item label="状态:">
  84. <el-select
  85. v-model="filter.successFlag"
  86. clearable
  87. placeholder="请选择"
  88. size="mini"
  89. >
  90. <el-option
  91. v-for="item in stateSelect"
  92. :key="item.successFlag"
  93. :label="item.name"
  94. :value="item.successFlag"
  95. ></el-option>
  96. </el-select>
  97. </el-form-item>
  98. <el-form-item label="子院区:" prop="subHospitalName">
  99. <el-input
  100. size="mini"
  101. v-model="filter.subHospitalName"
  102. placeholder="输入子院区名称"
  103. clearable
  104. maxlength="50"
  105. ></el-input>
  106. </el-form-item>
  107. <el-form-item>
  108. <el-button size="mini" @click="filterDatas">检索</el-button>
  109. </el-form-item>
  110. </el-form>
  111. </crumbs>
  112. <div class="contents knowledgeContents">
  113. <el-table :data="list" border style="width: 100%">
  114. <!-- <el-table-column type="index" :index="indexMethod" label="编号" width="60"></el-table-column> -->
  115. <el-table-column label="患者标识" align="center" width="200">
  116. <template slot-scope="scope">
  117. <!--<el-tooltip
  118. v-if="scope.row.parDescription.length>8"
  119. class="item"
  120. effect="dark"
  121. :content="scope.row.parDescription"
  122. placement="top"
  123. >
  124. <span>{{scope.row.parDescription.slice(0,8)+'...'}}</span>
  125. </el-tooltip>-->
  126. <span>{{ scope.row.patientId === null? '-' : scope.row.patientId }}</span>
  127. </template>
  128. </el-table-column>
  129. <el-table-column label="服务名" align="center">
  130. <template slot-scope="scope">{{ scope.row.sceneName }}</template>
  131. </el-table-column>
  132. <el-table-column prop="parConceptName" label="请求内容" align="center" width="100">
  133. <template slot-scope="scope">
  134. <el-button
  135. type="text"
  136. size="small"
  137. @click="reqData(scope.row)"
  138. >详情</el-button
  139. >
  140. <!--<el-tooltip
  141. v-if="scope.row.parConceptName.length>8"
  142. class="item"
  143. effect="dark"
  144. :content="scope.row.parConceptName"
  145. placement="top"
  146. >
  147. <span>{{scope.row.parConceptName.slice(0,8)+'...'}}</span>
  148. </el-tooltip>-->
  149. <!-- <span>{{scope.row.parConceptName}}</span> -->
  150. </template>
  151. </el-table-column>
  152. <el-table-column prop="parLibTypeName" label="响应内容" align="center" width="100">
  153. <template slot-scope="scope">
  154. <el-button
  155. type="text"
  156. size="small"
  157. @click="respData(scope.row)"
  158. >详情</el-button
  159. >
  160. </template>
  161. </el-table-column>
  162. <el-table-column
  163. prop="gmtReq"
  164. label="接收时间"
  165. align="center"
  166. ></el-table-column>
  167. <el-table-column
  168. prop="gmtResp"
  169. label="响应时间"
  170. align="center"
  171. ></el-table-column>
  172. <!-- <el-table-column prop="modifierName" label="操作人">
  173. <template slot-scope="scope">
  174. <el-tooltip
  175. v-if="scope.row.modifierName&&scope.row.modifierName.length>8"
  176. class="item"
  177. effect="dark"
  178. :content="scope.row.modifierName"
  179. placement="top"
  180. >
  181. <span>{{(scope.row.modifierName||'').slice(0,8)+'...'}}</span>
  182. </el-tooltip>
  183. <span
  184. v-if="scope.row.modifierName&&scope.row.modifierName.length<9"
  185. >{{scope.row.modifierName}}</span>
  186. </template>
  187. </el-table-column> -->
  188. <el-table-column
  189. prop="execTime"
  190. label="耗时(ms)"
  191. align="center"
  192. width="100"
  193. ></el-table-column>
  194. <el-table-column label="状态" width="100" align="center">
  195. <template slot-scope="scope">
  196. <span>
  197. {{ scope.row.successFlag === 1 ? "成功" : "失败" }}
  198. </span>
  199. </template>
  200. </el-table-column>
  201. <el-table-column
  202. prop="subHospitalName"
  203. label="子院区"
  204. align="center"
  205. width="100"
  206. show-overflow-tooltip
  207. >
  208. <template slot-scope="scope">
  209. <span>
  210. {{ scope.row.subHospitalName === null? '-' : scope.row.patientId }}
  211. </span>
  212. </template>
  213. </el-table-column>
  214. <el-table-column
  215. prop="subHospitalCode"
  216. label="子院区编码"
  217. align="center"
  218. width="100"
  219. show-overflow-tooltip
  220. >
  221. <template slot-scope="scope">
  222. <span>
  223. {{ scope.row.subHospitalCode === null? '-' : scope.row.patientId }}
  224. </span>
  225. </template>
  226. </el-table-column>
  227. </el-table>
  228. <el-pagination
  229. :current-page.sync="currentPage"
  230. @current-change="currentChange"
  231. background
  232. :page-size="pageSize"
  233. :page-sizes="pageSizeArr"
  234. @size-change="handleSizeChange"
  235. :layout="pageLayout"
  236. :total="total"
  237. ></el-pagination>
  238. <!-- 请求弹出框 -->
  239. <el-dialog
  240. title="请求日志信息"
  241. :visible.sync="reqVisible"
  242. >
  243. {{params}}
  244. </el-dialog>
  245. <!-- 响应内容弹出框 -->
  246. <el-dialog
  247. title="响应日志信息"
  248. :visible.sync="respVisible"
  249. >
  250. <div>{{result}}</div>
  251. </el-dialog>
  252. </div>
  253. </div>
  254. </template>
  255. <script>
  256. import api from "@api/knowledgeLib.js";
  257. import config from "@api/config.js";
  258. import utils from "@api/utils.js";
  259. export default {
  260. name: "ZskRuleManager",
  261. data: function () {
  262. return {
  263. list: [],
  264. value2: "",
  265. stateSelect: [
  266. { successFlag: "", name: "全部" },
  267. { successFlag: 1, name: "成功" },
  268. { successFlag: 0, name: "失败" },
  269. ],
  270. ruleTypeList: [],
  271. searched: false,
  272. filter: {
  273. successFlag: "",
  274. patientId: "",
  275. sceneName: "",
  276. subHospitalName: '' // 子院区
  277. },
  278. cacheData: {},
  279. currentPage: 1,
  280. pageSize: config.pageSize,
  281. pageSizeArr: config.pageSizeArr,
  282. pageLayout: config.pageLayout,
  283. total: 0,
  284. titleWidth: "970px", //头部最小宽度
  285. recepDate: '', // 接收日期
  286. resDate: '', // 响应日期
  287. reqVisible: false,
  288. respVisible: false,
  289. params: '',
  290. result: ''
  291. };
  292. },
  293. created() {
  294. let that = this;
  295. //返回时避免参数未赋值就获取列表
  296. setTimeout(function () {
  297. that.getDataList();
  298. });
  299. },
  300. watch: {
  301. filter: {
  302. handler: function () {
  303. this.searched = false;
  304. },
  305. deep: true,
  306. },
  307. },
  308. // beforeRouteEnter(to, from, next) {
  309. // next(vm => {
  310. // //const pm = to.param;
  311. // Object.assign(vm, to.params);
  312. // vm.inCurrentPage=to.params.currentPage;
  313. // })
  314. // },
  315. methods: {
  316. // 请求内容展示
  317. reqData(row){
  318. console.log('请求内容:', row);
  319. this.reqVisible = true
  320. this.params = row.params
  321. console.log('请求内容:', this.params);
  322. },
  323. // 响应内容展示
  324. respData(row){
  325. console.log("响应内容:", row);
  326. this.respVisible = true
  327. this.result = row.result
  328. },
  329. statusTrans(type) {
  330. const obj = this.ruleTypeList.find((it) => it.type === type);
  331. return obj && obj.name;
  332. },
  333. handleSizeChange(val) {
  334. this.pageSize = val;
  335. this.currentPage = utils.getCurrentPage(
  336. this.currentPage,
  337. this.total,
  338. this.pageSize
  339. );
  340. this.getDataList();
  341. },
  342. filterDatas() {
  343. this.currentPage = 1;
  344. this.getDataList(1);
  345. },
  346. getDataList(flag, isTurnPage) {
  347. const params = this.getFilterItems(isTurnPage);
  348. this.searched = true;
  349. const loading = this.$loading({
  350. lock: true,
  351. text: "Loading",
  352. spinner: "el-icon-loading",
  353. background: "rgba(0, 0, 0, 0.7)",
  354. });
  355. api
  356. .getCallRecord(params)
  357. .then((res) => {
  358. loading.close();
  359. if (res.data.code == "0") {
  360. const data = res.data.data;
  361. for (let j = 0; j < data.records.length; j++) {
  362. data.records[j].successFlag == "1" ? "成功" : "失败";
  363. }
  364. this.list = data.records;
  365. console.log("调用接口数据:", this.list);
  366. if (!flag) {
  367. //搜索时不缓存
  368. this.cacheData[params.current] = data.records;
  369. } else {
  370. this.cacheData = {};
  371. }
  372. this.total = data.total;
  373. if (this.inCurrentPage !== undefined) {
  374. this.currentPage = this.inCurrentPage;
  375. this.inCurrentPage = undefined;
  376. }
  377. } else {
  378. this.warning(res.data.msg || "获取列表数据失败");
  379. }
  380. })
  381. .catch((error) => {
  382. loading.close();
  383. console.log(error);
  384. });
  385. },
  386. getFilterItems(isTurnPage) {
  387. //翻页时筛选条件没点确定则清空
  388. if (isTurnPage && !this.searched) {
  389. this.clearFilter();
  390. }
  391. const param = {
  392. current: this.inCurrentPage || this.currentPage,
  393. size: this.pageSize,
  394. patientId: this.filter.patientId, // 患者标识
  395. sceneName: this.filter.sceneName, // 服务名
  396. successFlag: this.filter.successFlag,
  397. startGmtReq: this.recepDate ? this.recepDate[0] : null,
  398. endGmtReq: this.recepDate ? this.recepDate[1] : null,
  399. startGmtResp: this.resDate ? this.resDate[0] : null,
  400. endGmtResp: this.resDate ? this.resDate[1] : null,
  401. subHospitalName: this.filter.subHospitalName.trim()
  402. };
  403. return param;
  404. },
  405. indexMethod(index) {
  406. return (this.currentPage - 1) * this.pageSize + index + 1;
  407. },
  408. currentChange(next) {
  409. this.currentPage = next;
  410. /*if (this.cacheData[next]) { //如果已请求过该页数据,则使用缓存不重复请求
  411. this.list = this.cacheData[next];
  412. } else {*/
  413. this.getDataList(1, true);
  414. //}
  415. },
  416. warning(msg, type) {
  417. this.$message({
  418. showClose: true,
  419. message: msg,
  420. type: type || "warning",
  421. });
  422. },
  423. showConfirmDialog(msg, resolve) {
  424. this.$alert(msg, "提示", {
  425. confirmButtonText: "确定",
  426. type: "warning",
  427. })
  428. .then(() => {
  429. resolve();
  430. })
  431. .catch(() => {});
  432. },
  433. showDelDialog(row, isDelete) {
  434. const params = {
  435. id: row.parId,
  436. };
  437. const txt = row.parStatus === 0 ? "重新启用" : "禁用";
  438. const warningTxt = isDelete
  439. ? "是否删除该规则?可能对现有系统造成影响"
  440. : "是否" + txt + "该条数据?";
  441. const handleFn = isDelete
  442. ? api.deleteRule
  443. : row.parStatus === 0
  444. ? api.saveRuleApply
  445. : api.deleteRuleApply;
  446. this.showConfirmDialog(warningTxt, () => {
  447. handleFn(params)
  448. .then((res) => {
  449. if (res.data.code == "0") {
  450. if (!this.searched) {
  451. //未点确认时清空搜索条件
  452. this.clearFilter();
  453. }
  454. if (isDelete) {
  455. //恢复成功后跳转到筛选条件的首页
  456. this.currentPage = 1;
  457. } else {
  458. if (this.filter.parStatus !== "" && this.list.length === 1) {
  459. //有启用状态筛选条件且当前页只有最后一条数据删除时,删除成功后跳转到前一页
  460. this.currentPage =
  461. this.currentPage === 1 ? 1 : this.currentPage - 1;
  462. }
  463. }
  464. this.warning(res.data.msg || "操作成功", "success");
  465. this.getDataList();
  466. } else {
  467. this.warning(res.data.msg);
  468. }
  469. })
  470. .catch((error) => {
  471. this.warning(error);
  472. });
  473. });
  474. },
  475. clearFilter() {
  476. this.filter = {
  477. successFlag: "",
  478. patientId: "",
  479. sceneName: "",
  480. subHospitalName: "",
  481. recepDate: "",
  482. resDate: ""
  483. };
  484. },
  485. update() {
  486. const loading = this.$loading({
  487. lock: true,
  488. text: "Loading",
  489. spinner: "el-icon-loading",
  490. background: "rgba(0, 0, 0, 0.7)",
  491. });
  492. api
  493. .zskUpdateAll()
  494. .then((res) => {
  495. loading.close();
  496. if (res.data.code == "0") {
  497. this.warning("更新成功", "success");
  498. this.getDataList();
  499. } else {
  500. this.warning(res.data.msg || "更新失败,请重试");
  501. }
  502. })
  503. .catch((error) => {
  504. loading.close();
  505. this.warning("更新失败,请重试");
  506. });
  507. },
  508. },
  509. };
  510. </script>
  511. <style lang="less" scoped>
  512. @import "../../less/admin.less";
  513. /deep/ .container.knowledgeTitle {
  514. height: 80px;
  515. }
  516. /deep/ .contents.knowledgeContents {
  517. padding: 104px 20px 0;
  518. }
  519. /deep/ .secLine.el-form {
  520. float: right;
  521. display: block;
  522. position: relative;
  523. top: -5px;
  524. }
  525. .delete {
  526. color: red;
  527. }
  528. .review {
  529. color: #22ccc8;
  530. }
  531. .el-table .cell {
  532. overflow: hidden;
  533. white-space: nowrap;
  534. }
  535. #upFile {
  536. display: none !important;
  537. }
  538. .unvailable {
  539. color: #fe7d3d;
  540. &:hover {
  541. color: #f19061;
  542. }
  543. }
  544. .demo-form-inline {
  545. .el-input--mini {
  546. /deep/.el-input__inner {
  547. width: 100%;
  548. }
  549. }
  550. }
  551. .el-date-editor {
  552. .el-input {
  553. width: 150px !important;
  554. }
  555. }
  556. .secLine.el-form {
  557. position: relative;
  558. top: -10px;
  559. color: #ff0000;
  560. }
  561. .code-name {
  562. display: -webkit-box;
  563. -webkit-box-orient: vertical;
  564. -webkit-line-clamp: 1;
  565. overflow: hidden;
  566. white-space: nowrap;
  567. text-overflow: ellipsis;
  568. -o-text-overflow:ellipsis;
  569. }
  570. </style>