CallRecordManager.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630
  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="filter.recepDate"
  18. type="datetimerange"
  19. align="right"
  20. size="small"
  21. start-placeholder="开始日期"
  22. end-placeholder="结束日期"
  23. style="width: 240px"
  24. :default-time="['00:00:00', '23:59:59']"
  25. format="yyyy-MM-dd HH:mm"
  26. value-format="yyyy-MM-dd HH:mm"
  27. >
  28. </el-date-picker>
  29. </el-form-item>
  30. <el-form-item label="响应时间: "
  31. >&nbsp;&nbsp;
  32. <el-date-picker
  33. v-model="filter.resDate"
  34. type="datetimerange"
  35. align="right"
  36. size="small"
  37. start-placeholder="开始日期"
  38. end-placeholder="结束日期"
  39. style="width: 240px"
  40. :default-time="['00:00:00', '23:59:59']"
  41. format="yyyy-MM-dd HH:mm"
  42. value-format="yyyy-MM-dd HH:mm"
  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="120"
  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. >
  220. <template slot-scope="scope">
  221. <span>
  222. {{ scope.row.subHospitalCode === null? '-' : scope.row.patientId }}
  223. </span>
  224. </template>
  225. </el-table-column>
  226. </el-table>
  227. <el-pagination
  228. :current-page.sync="currentPage"
  229. @current-change="currentChange"
  230. background
  231. :page-size="pageSize"
  232. :page-sizes="pageSizeArr"
  233. @size-change="handleSizeChange"
  234. :layout="pageLayout"
  235. :total="total"
  236. ></el-pagination>
  237. <!-- 请求弹出框 -->
  238. <el-dialog
  239. title="请求日志信息"
  240. :visible.sync="reqVisible"
  241. width="660px"
  242. >
  243. <div class="request-item">
  244. {{params}}
  245. </div>
  246. </el-dialog>
  247. <!-- 响应内容弹出框 -->
  248. <el-dialog
  249. title="响应日志信息"
  250. :visible.sync="respVisible"
  251. width="660px"
  252. >
  253. <div class="request-item">{{result}}</div>
  254. </el-dialog>
  255. </div>
  256. </div>
  257. </template>
  258. <script>
  259. import api from "@api/knowledgeLib.js";
  260. import config from "@api/config.js";
  261. import utils from "@api/utils.js";
  262. export default {
  263. name: "ZskRuleManager",
  264. data: function () {
  265. return {
  266. list: [],
  267. value2: "",
  268. stateSelect: [
  269. { successFlag: "", name: "全部" },
  270. { successFlag: 1, name: "成功" },
  271. { successFlag: 0, name: "失败" },
  272. ],
  273. ruleTypeList: [],
  274. searched: false,
  275. filter: {
  276. successFlag: "",
  277. patientId: "",
  278. sceneName: "",
  279. subHospitalName: '', // 子院区
  280. recepDate: '', // 接收日期
  281. resDate: '', // 响应日期
  282. },
  283. cacheData: {},
  284. currentPage: 1,
  285. pageSize: config.pageSize,
  286. pageSizeArr: config.pageSizeArr,
  287. pageLayout: config.pageLayout,
  288. total: 0,
  289. titleWidth: "970px", //头部最小宽度
  290. reqVisible: false,
  291. respVisible: false,
  292. params: '',
  293. result: ''
  294. };
  295. },
  296. created() {
  297. let that = this;
  298. //返回时避免参数未赋值就获取列表
  299. setTimeout(function () {
  300. that.getDataList();
  301. });
  302. },
  303. watch: {
  304. filter: {
  305. handler: function () {
  306. this.searched = false;
  307. },
  308. deep: true,
  309. },
  310. },
  311. // beforeRouteEnter(to, from, next) {
  312. // next(vm => {
  313. // //const pm = to.param;
  314. // Object.assign(vm, to.params);
  315. // vm.inCurrentPage=to.params.currentPage;
  316. // })
  317. // },
  318. methods: {
  319. // 请求内容展示
  320. reqData(row){
  321. console.log('请求内容:', row);
  322. this.reqVisible = true
  323. this.params = row.params
  324. console.log('请求内容:', this.params);
  325. },
  326. // 响应内容展示
  327. respData(row){
  328. console.log("响应内容:", row);
  329. this.respVisible = true
  330. this.result = row.result
  331. },
  332. statusTrans(type) {
  333. const obj = this.ruleTypeList.find((it) => it.type === type);
  334. return obj && obj.name;
  335. },
  336. handleSizeChange(val) {
  337. this.pageSize = val;
  338. this.currentPage = utils.getCurrentPage(
  339. this.currentPage,
  340. this.total,
  341. this.pageSize
  342. );
  343. this.getDataList();
  344. },
  345. filterDatas() {
  346. this.currentPage = 1;
  347. this.getDataList(1);
  348. },
  349. getDataList(flag, isTurnPage) {
  350. const params = this.getFilterItems(isTurnPage);
  351. this.searched = true;
  352. const loading = this.$loading({
  353. lock: true,
  354. text: "Loading",
  355. spinner: "el-icon-loading",
  356. background: "rgba(0, 0, 0, 0.7)",
  357. });
  358. api
  359. .getCallRecord(params)
  360. .then((res) => {
  361. loading.close();
  362. if (res.data.code == "0") {
  363. const data = res.data.data;
  364. for (let j = 0; j < data.records.length; j++) {
  365. data.records[j].successFlag == "1" ? "成功" : "失败";
  366. }
  367. this.list = data.records;
  368. console.log("调用接口数据:", this.list);
  369. if (!flag) {
  370. //搜索时不缓存
  371. this.cacheData[params.current] = data.records;
  372. } else {
  373. this.cacheData = {};
  374. }
  375. this.total = data.total;
  376. if (this.inCurrentPage !== undefined) {
  377. this.currentPage = this.inCurrentPage;
  378. this.inCurrentPage = undefined;
  379. }
  380. } else {
  381. this.warning(res.data.msg || "获取列表数据失败");
  382. }
  383. })
  384. .catch((error) => {
  385. loading.close();
  386. console.log(error);
  387. });
  388. },
  389. getFilterItems(isTurnPage) {
  390. //翻页时筛选条件没点确定则清空
  391. if (isTurnPage && !this.searched) {
  392. this.clearFilter();
  393. }
  394. console.log(this.filter.recepDate);
  395. let startGmtReq,endGmtReq,startGmtResp,endGmtResp
  396. if(this.filter.recepDate){
  397. console.log(this.filter.recepDate[0].split(' '));
  398. if(this.filter.recepDate[0].split(0,9) === this.filter.recepDate[1].split(0,9)){
  399. if(this.filter.recepDate[0]){
  400. startGmtReq = this.filter.recepDate[0]+':00'
  401. endGmtReq = this.filter.recepDate[1]+':59'
  402. }
  403. }else{
  404. startGmtReq = this.filter.recepDate[0]+':00'
  405. endGmtReq = this.filter.recepDate[1]+':00'
  406. }
  407. }
  408. if(this.filter.resDate){
  409. if(this.filter.resDate[0].split(0,9) === this.filter.resDate[1].split(0,9)){
  410. if(this.filter.resDate[0]){
  411. startGmtResp = this.filter.resDate[0]+':00'
  412. endGmtResp = this.filter.resDate[1]+':59'
  413. }
  414. }else{
  415. startGmtResp = this.filter.resDate[0]+':00'
  416. endGmtResp = this.filter.resDate[1]+':00'
  417. }
  418. }
  419. const param = {
  420. current: this.inCurrentPage || this.currentPage,
  421. size: this.pageSize,
  422. patientId: this.filter.patientId, // 患者标识
  423. sceneName: this.filter.sceneName, // 服务名
  424. successFlag: this.filter.successFlag,
  425. startGmtReq: startGmtReq,
  426. endGmtReq: endGmtReq,
  427. startGmtResp: startGmtResp,
  428. endGmtResp: endGmtResp,
  429. subHospitalName: this.filter.subHospitalName.trim()
  430. };
  431. return param;
  432. },
  433. indexMethod(index) {
  434. return (this.currentPage - 1) * this.pageSize + index + 1;
  435. },
  436. currentChange(next) {
  437. this.currentPage = next;
  438. /*if (this.cacheData[next]) { //如果已请求过该页数据,则使用缓存不重复请求
  439. this.list = this.cacheData[next];
  440. } else {*/
  441. this.getDataList(1, true);
  442. //}
  443. },
  444. warning(msg, type) {
  445. this.$message({
  446. showClose: true,
  447. message: msg,
  448. type: type || "warning",
  449. });
  450. },
  451. showConfirmDialog(msg, resolve) {
  452. this.$alert(msg, "提示", {
  453. confirmButtonText: "确定",
  454. type: "warning",
  455. })
  456. .then(() => {
  457. resolve();
  458. })
  459. .catch(() => {});
  460. },
  461. showDelDialog(row, isDelete) {
  462. const params = {
  463. id: row.parId,
  464. };
  465. const txt = row.parStatus === 0 ? "重新启用" : "禁用";
  466. const warningTxt = isDelete
  467. ? "是否删除该规则?可能对现有系统造成影响"
  468. : "是否" + txt + "该条数据?";
  469. const handleFn = isDelete
  470. ? api.deleteRule
  471. : row.parStatus === 0
  472. ? api.saveRuleApply
  473. : api.deleteRuleApply;
  474. this.showConfirmDialog(warningTxt, () => {
  475. handleFn(params)
  476. .then((res) => {
  477. if (res.data.code == "0") {
  478. if (!this.searched) {
  479. //未点确认时清空搜索条件
  480. this.clearFilter();
  481. }
  482. if (isDelete) {
  483. //恢复成功后跳转到筛选条件的首页
  484. this.currentPage = 1;
  485. } else {
  486. if (this.filter.parStatus !== "" && this.list.length === 1) {
  487. //有启用状态筛选条件且当前页只有最后一条数据删除时,删除成功后跳转到前一页
  488. this.currentPage =
  489. this.currentPage === 1 ? 1 : this.currentPage - 1;
  490. }
  491. }
  492. this.warning(res.data.msg || "操作成功", "success");
  493. this.getDataList();
  494. } else {
  495. this.warning(res.data.msg);
  496. }
  497. })
  498. .catch((error) => {
  499. this.warning(error);
  500. });
  501. });
  502. },
  503. clearFilter() {
  504. this.filter = {
  505. successFlag: "",
  506. patientId: "",
  507. sceneName: "",
  508. subHospitalName: "",
  509. recepDate: '', // 接收日期
  510. resDate: '', // 响应日期
  511. };
  512. },
  513. update() {
  514. const loading = this.$loading({
  515. lock: true,
  516. text: "Loading",
  517. spinner: "el-icon-loading",
  518. background: "rgba(0, 0, 0, 0.7)",
  519. });
  520. api
  521. .zskUpdateAll()
  522. .then((res) => {
  523. loading.close();
  524. if (res.data.code == "0") {
  525. this.warning("更新成功", "success");
  526. this.getDataList();
  527. } else {
  528. this.warning(res.data.msg || "更新失败,请重试");
  529. }
  530. })
  531. .catch((error) => {
  532. loading.close();
  533. this.warning("更新失败,请重试");
  534. });
  535. },
  536. },
  537. };
  538. </script>
  539. <style lang="less" scoped>
  540. @import "../../less/admin.less";
  541. /deep/ .container.knowledgeTitle {
  542. height: 80px;
  543. }
  544. /deep/ .contents.knowledgeContents {
  545. padding: 104px 20px 0;
  546. }
  547. /deep/ .secLine.el-form {
  548. float: right;
  549. display: block;
  550. position: relative;
  551. top: -5px;
  552. }
  553. .delete {
  554. color: red;
  555. }
  556. .review {
  557. color: #22ccc8;
  558. }
  559. .el-table .cell {
  560. overflow: hidden;
  561. white-space: nowrap;
  562. }
  563. #upFile {
  564. display: none !important;
  565. }
  566. .unvailable {
  567. color: #fe7d3d;
  568. &:hover {
  569. color: #f19061;
  570. }
  571. }
  572. .demo-form-inline {
  573. .el-input--mini {
  574. /deep/.el-input__inner {
  575. width: 100%;
  576. }
  577. }
  578. }
  579. .el-date-editor {
  580. .el-input {
  581. width: 150px !important;
  582. }
  583. }
  584. .secLine.el-form {
  585. position: relative;
  586. top: -10px;
  587. color: #ff0000;
  588. }
  589. .code-name {
  590. display: -webkit-box;
  591. -webkit-box-orient: vertical;
  592. -webkit-line-clamp: 1;
  593. overflow: hidden;
  594. white-space: nowrap;
  595. text-overflow: ellipsis;
  596. -o-text-overflow:ellipsis;
  597. }
  598. /deep/.el-dialog {
  599. width: 700px !important;
  600. }
  601. /deep/.el-dialog__body {
  602. overflow-y: auto;
  603. height: 505px;
  604. width: 700px;
  605. padding: 20px 0 30px;
  606. }
  607. .request-item {
  608. padding: 0 20px;
  609. }
  610. </style>