kj-auxiliary-details.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <basic-container v-loading="loading">
  3. <avue-form ref="searchForm" v-model="params" :option="searchOption" class="cl-search-form">
  4. <template slot-scope="{size}" slot="menuForm">
  5. <el-button type="primary" :size="size" icon="el-icon-search" @click="handleSearchBtn">查询</el-button>
  6. <el-button :size="size" icon="el-icon-delete" @click="handleResetBtn">清空</el-button>
  7. </template>
  8. </avue-form>
  9. <div>
  10. </div>
  11. <div style="display: flex; align-items: center;">
  12. <year-month-select v-model="yearAndMonth" :showAllYear="false" style="margin: 6px 0 20px;"></year-month-select>
  13. </div>
  14. <template v-if="listData.length">
  15. <common-list v-for="(item, index) of listData" :data="item" :key="index" style="margin-bottom: 25px;"></common-list>
  16. </template>
  17. <el-empty v-else description="暂无数据"></el-empty>
  18. </basic-container>
  19. </template>
  20. <script>
  21. import YearMonthSelect from "@/components/year-month-select";
  22. import commonList from "./components/common-list.vue";
  23. import { getList } from "@/api/externalReports/kjAuxiliaryDetails";
  24. import moment from "moment";
  25. export default {
  26. components: {
  27. YearMonthSelect,
  28. commonList
  29. },
  30. data() {
  31. return {
  32. loading: false,
  33. searchOption: {
  34. submitBtn:false,
  35. emptyBtn:false,
  36. column: [{
  37. label: '项目名称',
  38. prop: 'xmmc',
  39. type: 'input',
  40. }]
  41. },
  42. listData: [],
  43. yearAndMonth: "",
  44. params: {},
  45. }
  46. },
  47. watch: {
  48. yearAndMonth() {
  49. this.loadData();
  50. }
  51. },
  52. methods: {
  53. loadData() {
  54. let params = { ...this.params };
  55. if (params.useDateRange && params.useDateRange.length) {
  56. params.dateMin = params.useDateRange[0];
  57. params.dateMax = params.useDateRange[1];
  58. }
  59. delete params.useDateRange;
  60. this.loading = true;
  61. getList({
  62. ...params,
  63. yearAndMonth: this.yearAndMonth,
  64. }).then(({ data }) => {
  65. this.loading = false;
  66. if (data.code == 200) {
  67. let allList = data.data.map(item => {
  68. let childArr = item.costList.map(costItem => {
  69. return { xmmc: item.xmmc, xmbh: item.xmbh, ...costItem };
  70. });
  71. return childArr;
  72. });
  73. this.listData = allList;
  74. }
  75. }).catch(() => {
  76. this.loading = false;
  77. });
  78. },
  79. handleSearchBtn() {
  80. this.loadData();
  81. },
  82. handleResetBtn() {
  83. this.params = {};
  84. this.$refs.searchForm.resetForm();
  85. this.loadData();
  86. },
  87. },
  88. }
  89. </script>
  90. <style lang="scss">
  91. .cl-search-form {
  92. .el-form-item--small .el-form-item__label {
  93. display: none;
  94. }
  95. .el-form-item--small .el-form-item__content {
  96. margin-left: 8px !important;
  97. }
  98. .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  99. margin-bottom: 6px;
  100. }
  101. .avue-form__group .el-col {
  102. width: auto !important;
  103. padding-top: 0 !important;
  104. }
  105. }
  106. </style>