Lis.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
  1. <template>
  2. <div>
  3. <crumbs title="检验关联维护" style="min-width: 1060px">
  4. <el-form :inline="true" class="demo-form-inline">
  5. <el-form-item>
  6. <el-button type="text" class="downTemplate" @click="exportModule">导入模板下载</el-button>
  7. <input
  8. type="file"
  9. name="uploadfile "
  10. id="upFile"
  11. @change="uploadFile($event)"
  12. accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
  13. />
  14. <el-button size="mini" @click="importPage">{{uploadInfo}}</el-button>
  15. <el-button size="mini" @click="exportData">导出</el-button>
  16. </el-form-item>
  17. <el-form-item label="检验套餐:">
  18. <el-input size="mini" v-model="filter.hisName" placeholder="请输入" clearable></el-input>
  19. </el-form-item>
  20. <el-form-item label="检验细项:">
  21. <el-input size="mini" v-model="filter.hisDetailName" placeholder="请输入" clearable></el-input>
  22. </el-form-item>
  23. <el-form-item label="标准检验项:">
  24. <el-input size="mini" v-model="filter.uniqueName" placeholder="请输入" clearable></el-input>
  25. </el-form-item>
  26. <el-form-item class="dododo">
  27. <el-button size="mini" @click="filterDatas">检索</el-button>
  28. <el-button size="mini" type="warning" @click="addRelation">添加关联</el-button>
  29. </el-form-item>
  30. </el-form>
  31. </crumbs>
  32. <div class="contents">
  33. <el-table :data="list" border style="width: 100%">
  34. <el-table-column :resizable="false" type="index" :index="indexMethod" label="编号" width="60"></el-table-column>
  35. <el-table-column :resizable="false" prop="gmtModified" label="操作时间" width="180"></el-table-column>
  36. <el-table-column :resizable="false" prop="hisName" label="检验套餐" show-overflow-tooltip></el-table-column>
  37. <el-table-column :resizable="false" prop="hisDetailName" label="检验细项" show-overflow-tooltip></el-table-column>
  38. <el-table-column :resizable="false" prop="uniqueName" label="标准检验项" show-overflow-tooltip></el-table-column>
  39. <el-table-column :resizable="false" prop="operate" label="操作">
  40. <template slot-scope="scope">
  41. <el-button @click="modifyRelation(scope.row)" type="text" size="small">修改</el-button>
  42. <span style="margin:0 3px;">|</span>
  43. <el-button
  44. @click="showDelDialog(scope.row.id)"
  45. class="delete"
  46. type="text"
  47. size="small"
  48. >删除</el-button>
  49. </template>
  50. </el-table-column>
  51. </el-table>
  52. <div class="pagination pagepage">
  53. <el-pagination
  54. :current-page.sync="currentPage"
  55. @current-change="currentChange"
  56. background
  57. :page-size="pageSize"
  58. :page-sizes="pageSizeArr"
  59. @size-change="handleSizeChange"
  60. :layout="pageLayout"
  61. :total="total"
  62. ></el-pagination>
  63. </div>
  64. </div>
  65. </div>
  66. </template>
  67. <script>
  68. import api from '@api/icss.js';
  69. import config from '@api/config.js';
  70. import utils from '@api/utils.js';
  71. export default {
  72. name: 'Lis', //化验大小项和公表维护
  73. data: function() {
  74. return {
  75. list: [],
  76. searched: false,
  77. filter: {
  78. hisName: '', // 检验套餐
  79. hisDetailName: '', //检验细项
  80. uniqueName: '' //标准检验项
  81. },
  82. currentPage: 1,
  83. pageSize: config.pageSize,
  84. pageSizeArr: config.pageSizeArr,
  85. pageLayout: config.pageLayout,
  86. total: 0,
  87. uploadInfo: '导入'
  88. };
  89. },
  90. created() {
  91. const that = this;
  92. //返回时避免参数未赋值就获取列表
  93. setTimeout(function() {
  94. that.getDataList();
  95. });
  96. // 非首页 编辑页返回 设置 this.currentPage
  97. if (Object.keys(this.$route.params).length !== 0) {
  98. this.currentPage = this.$route.params.currentPage;
  99. }
  100. },
  101. watch: {
  102. filter: {
  103. handler: function() {
  104. this.searched = false;
  105. },
  106. deep: true
  107. }
  108. },
  109. beforeRouteEnter(to, from, next) {
  110. next(vm => {
  111. //const pm = to.param;
  112. Object.assign(vm, to.params);
  113. vm.inCurrentPage = to.params.currentPage;
  114. });
  115. },
  116. methods: {
  117. handleSizeChange(val) {
  118. this.pageSize = val;
  119. this.currentPage = utils.getCurrentPage(
  120. this.currentPage,
  121. this.total,
  122. this.pageSize
  123. );
  124. this.getDataList();
  125. },
  126. // 获取列表数据
  127. getDataList(isTurnPage) {
  128. const params = this.getFilterItems(isTurnPage);
  129. this.searched = true;
  130. const loading = this.$loading({
  131. lock: true,
  132. text: 'Loading',
  133. spinner: 'el-icon-loading',
  134. background: 'rgba(0, 0, 0, 0.7)'
  135. });
  136. api.getLisPage(params).then(res => {
  137. loading.close();
  138. if (res.data.code === '0') {
  139. this.list = res.data.data && res.data.data.records;
  140. }
  141. this.total = res.data.data && res.data.data.total;
  142. if (this.inCurrentPage !== undefined) {
  143. this.currentPage = this.inCurrentPage;
  144. this.inCurrentPage = undefined;
  145. }
  146. });
  147. },
  148. // 处理列表请求数据参数
  149. getFilterItems(isTurnPage) {
  150. //翻页时筛选条件没点确定则清空
  151. if (isTurnPage && !this.searched) {
  152. this.clearFilter();
  153. }
  154. const param = {
  155. current: this.inCurrentPage || this.currentPage,
  156. size: this.pageSize,
  157. hisName: this.filter.hisName.trim(),
  158. uniqueName: this.filter.uniqueName.trim(),
  159. uniqueCode: '',
  160. hisDetailName: this.filter.hisDetailName.trim()
  161. };
  162. return param;
  163. },
  164. filterDatas() {
  165. this.currentPage = 1;
  166. this.getDataList();
  167. },
  168. addRelation() {
  169. const pam = this.searched
  170. ? {
  171. currentPage: this.currentPage,
  172. pageSize: this.pageSize,
  173. filter: this.filter
  174. }
  175. : { currentPage: this.currentPage, pageSize: this.pageSize };
  176. this.$router.push({ name: 'AddLis', params: pam });
  177. },
  178. // 修改诊断关联-跳转至编辑页面
  179. modifyRelation(row) {
  180. const item = Object.assign({}, row);
  181. const pam = this.searched
  182. ? {
  183. currentPage: this.currentPage,
  184. pageSize: this.pageSize,
  185. filter: this.filter
  186. }
  187. : { currentPage: this.currentPage, pageSize: this.pageSize };
  188. this.$router.push({
  189. name: 'AddLis',
  190. params: Object.assign(pam, { isEdit: true, data: item })
  191. });
  192. },
  193. currentChange(next) {
  194. this.currentPage = next;
  195. this.getDataList(true);
  196. // if (this.cacheData[next]) { //如果已请求过该页数据,则使用缓存不重复请求
  197. // this.list = this.cacheData[next];
  198. // } else {
  199. // this.getDataList();
  200. // }
  201. },
  202. // 清空搜索参数
  203. clearFilter() {
  204. this.filter = {
  205. hisName: '',
  206. uniqueName: '',
  207. hisDetailName: ''
  208. };
  209. },
  210. indexMethod(index) {
  211. return (this.currentPage - 1) * this.pageSize + index + 1;
  212. },
  213. getTagType(val) {
  214. return val;
  215. },
  216. warning(msg, type) {
  217. this.$message({
  218. showClose: true,
  219. message: msg,
  220. type: type || 'warning'
  221. });
  222. },
  223. showConfirmDialog(msg, resolve) {
  224. this.$confirm(msg, '提示', {
  225. confirmButtonText: '删除',
  226. cancelButtonText: '取消',
  227. cancelButtonClass: 'cancelBtn',
  228. confirmButtonClass: 'confirmC',
  229. type: 'warning'
  230. })
  231. .then(() => {
  232. resolve();
  233. })
  234. .catch(() => {});
  235. },
  236. // 删除关联
  237. showDelDialog(id) {
  238. this.showConfirmDialog('是否删除该关联?', () => {
  239. api
  240. .deleteLisRecord({ id: id })
  241. .then(res => {
  242. if (res.data.code == '0') {
  243. if (!this.searched) {
  244. //未点确认时清空搜索条件
  245. this.clearFilter();
  246. }
  247. if (this.list.length == 1) {
  248. //当前在最后一页且只有一条数据时,删除后跳到前一页
  249. this.currentPage =
  250. this.currentPage === 1 ? 1 : this.currentPage - 1;
  251. }
  252. this.getDataList();
  253. this.warning(res.data.msg || '操作成功', 'success');
  254. } else {
  255. this.warning(res.data.msg);
  256. }
  257. })
  258. .catch(error => {
  259. if (error.code === '900010001') {
  260. return false;
  261. }
  262. this.warning(error);
  263. });
  264. });
  265. },
  266. // 导出数据
  267. exportData() {
  268. this.$confirm('确定要导出全部检验关联数据吗?', '', {
  269. confirmButtonText: '确定',
  270. cancelButtonText: '取消',
  271. cancelButtonClass: 'leftbtn',
  272. customClass: 'exportBox6',
  273. title: '提示',
  274. type: 'warning'
  275. // beforeClose: (action, instance, done) => {
  276. // if (action === 'confirm') {
  277. // // instance.confirmButtonLoading = true;
  278. // instance.confirmButtonText = '导出中...';
  279. // api.exportLisRecord().then(res => {
  280. // if (res.status === 200) {
  281. // setTimeout(() => {
  282. // utils.downloadExportedData(res.data, '检验数据.xls');
  283. // done();
  284. // }, 1500);
  285. // }
  286. // });
  287. // } else {
  288. // done();
  289. // }
  290. // }
  291. })
  292. .then(() => {
  293. api.exportLisRecord().then(res => {
  294. if (res.status === 200) {
  295. this.$message({ message: '导出成功', type: 'success' });
  296. utils.downloadExportedData(res.data, '检验数据.xls');
  297. }
  298. });
  299. })
  300. .catch(() => {
  301. // this.$message({ message: '导出失败', type: 'waring' });
  302. });
  303. },
  304. // 导入模板
  305. exportModule() {
  306. api.exportLisModule().then(res => {
  307. if (res.status === 200) {
  308. setTimeout(() => {
  309. utils.downloadExportedData(res.data, '检验导入模板.xls');
  310. }, 1500);
  311. }
  312. });
  313. },
  314. // 点击导入
  315. importPage() {
  316. let inp = document.getElementById('upFile');
  317. inp.click();
  318. },
  319. // 导入数据
  320. uploadFile(e) {
  321. let fileInfo = e.target.files[0];
  322. e.preventDefault();
  323. let formData = new FormData();
  324. formData.append('file', fileInfo);
  325. const header = {
  326. headers: {
  327. 'Content-Type': 'multipart/form-data'
  328. }
  329. };
  330. this.uploadInfo = '导入中...';
  331. api.importLisRecord(formData, header).then(res => {
  332. if (res.data.code === '00000001') {
  333. this.$confirm(`数据存在异常,导入失败,请修改后再试`, '提示', {
  334. confirmButtonText: '确定',
  335. // cancelButtonText: '取消',
  336. cancelButtonClass: 'cancelSure',
  337. confirmButtonClass: 'sure',
  338. customClass: 'exportConfirm',
  339. type: 'warning'
  340. })
  341. .then(() => {})
  342. .catch(() => {});
  343. this.getDataList(); // 重新获取列表
  344. setTimeout(() => {
  345. this.uploadInfo = '导入';
  346. }, 300);
  347. } else if (res.data === '' && res.status === 200) {
  348. this.$confirm(`导入成功`, '提示', {
  349. confirmButtonText: '确定',
  350. // cancelButtonText: '取消',
  351. cancelButtonClass: 'cancelSure',
  352. confirmButtonClass: 'sure',
  353. customClass: 'exportConfirm',
  354. type: 'warning'
  355. })
  356. .then(() => {})
  357. .catch(() => {});
  358. this.getDataList(); // 重新获取列表
  359. setTimeout(() => {
  360. this.uploadInfo = '导入';
  361. }, 300);
  362. } else {
  363. this.$confirm(`${res.data.msg}`, '提示', {
  364. confirmButtonText: '确定',
  365. // cancelButtonText: '取消',
  366. cancelButtonClass: 'cancelSure',
  367. confirmButtonClass: 'sure',
  368. customClass: 'exportConfirm',
  369. type: 'warning'
  370. })
  371. .then(() => {})
  372. .catch(() => {});
  373. setTimeout(() => {
  374. this.uploadInfo = '导入';
  375. }, 300);
  376. }
  377. });
  378. //解决上传相同文件不触发change
  379. let inp = document.getElementById('upFile');
  380. inp.value = '';
  381. }
  382. }
  383. };
  384. </script>
  385. <style lang="less">
  386. @import '../../../less/admin.less';
  387. .delete {
  388. color: red;
  389. }
  390. .delete:hover {
  391. color: red;
  392. }
  393. .pagination {
  394. min-width: 1010px;
  395. }
  396. .downTemplate {
  397. margin-right: 8px;
  398. span {
  399. color: #02a7f0;
  400. }
  401. }
  402. #upFile {
  403. display: none !important;
  404. }
  405. .el-message-box {
  406. /deep/.cancelBtn {
  407. background-color: #d7d7d7;
  408. border-color: transparent;
  409. }
  410. /deep/.confirmC {
  411. background-color: #ff545b !important;
  412. border-color: transparent !important;
  413. }
  414. }
  415. .exportBox6 {
  416. /deep/ .el-message-box__btns {
  417. margin-top: 20px;
  418. }
  419. /deep/ .el-message-box__message {
  420. // text-align: center;
  421. }
  422. /deep/.leftbtn {
  423. background-color: #d7d7d7;
  424. border-color: transparent !important;
  425. }
  426. /deep/ .el-message-box__header {
  427. border-bottom: 1px solid #dcdfe6;
  428. }
  429. }
  430. </style>