| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- <template>
- <basic-container v-loading="loading">
- <avue-form ref="searchForm" v-model="params" :option="searchOption" class="cl-search-form">
- <template slot-scope="{size}" slot="menuForm">
- <el-button type="primary" :size="size" icon="el-icon-search" @click="handleSearchBtn">查询</el-button>
- <el-button :size="size" icon="el-icon-delete" @click="handleResetBtn">清空</el-button>
- </template>
- </avue-form>
- <div>
- </div>
- <div style="display: flex; align-items: center;">
- <year-month-select v-model="yearAndMonth" :showAllYear="false" style="margin: 6px 0 20px;"></year-month-select>
- </div>
- <template v-if="listData.length">
- <common-list v-for="(item, index) of listData" :data="item" :key="index" style="margin-bottom: 25px;"></common-list>
- </template>
- <el-empty v-else description="暂无数据"></el-empty>
- </basic-container>
- </template>
- <script>
- import YearMonthSelect from "@/components/year-month-select";
- import commonList from "./components/common-list.vue";
- import { getList } from "@/api/externalReports/kjAuxiliaryDetails";
- import moment from "moment";
- export default {
- components: {
- YearMonthSelect,
- commonList
- },
- data() {
- return {
- loading: false,
- searchOption: {
- submitBtn:false,
- emptyBtn:false,
- column: [{
- label: '项目名称',
- prop: 'xmmc',
- type: 'input',
- }]
- },
- listData: [],
- yearAndMonth: "",
- params: {},
- }
- },
- watch: {
- yearAndMonth() {
- this.loadData();
- }
- },
- methods: {
- loadData() {
- let params = { ...this.params };
- if (params.useDateRange && params.useDateRange.length) {
- params.dateMin = params.useDateRange[0];
- params.dateMax = params.useDateRange[1];
- }
- delete params.useDateRange;
- this.loading = true;
- getList({
- ...params,
- yearAndMonth: this.yearAndMonth,
- }).then(({ data }) => {
- this.loading = false;
- if (data.code == 200) {
- let allList = data.data.map(item => {
- let childArr = item.costList.map(costItem => {
- return { xmmc: item.xmmc, xmbh: item.xmbh, ...costItem };
- });
- return childArr;
- });
- this.listData = allList;
- }
- }).catch(() => {
- this.loading = false;
- });
- },
- handleSearchBtn() {
- this.loadData();
- },
- handleResetBtn() {
- this.params = {};
- this.$refs.searchForm.resetForm();
- this.loadData();
- },
- },
- }
- </script>
- <style lang="scss">
- .cl-search-form {
- .el-form-item--small .el-form-item__label {
- display: none;
- }
- .el-form-item--small .el-form-item__content {
- margin-left: 8px !important;
- }
- .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
- margin-bottom: 6px;
- }
- .avue-form__group .el-col {
- width: auto !important;
- padding-top: 0 !important;
- }
- }
- </style>
|