Smart_platform_ui/src/views/statisticAnalysis/budgetAnalysis/index.vue

<template>
  <div>
    <basic-container class="page-crad">
      <avue-crud ref="crud"
                 :option="option"
                 :data="dataList"
                 :page.sync="page"
                 :search.sync="search"
                 :cell-style="cellStyle"
                 @search-change="searchChange"
                 @current-change="currentChange"
                 @size-change="sizeChange"
                 @refresh-change="refreshChange"
                 @on-load="onLoad"
                 :table-loading="loading"
                 @saveColumn="saveColumn"
                 @resetColumn="resetColumn"
                 @search-criteria-switch="searchCriteriaSwitch">
        <template slot="menuLeft">
          <el-button type="info" size="small" @click="outExport">导出</el-button>
        </template>
        <template slot="corpNameSearch" slot-scope="scope">
          <crop-select v-model="search.corpId" corpType="KH"/>
        </template>
        <template slot="monthSearch" slot-scope="scope">
          <el-input-number
              v-model="search.month"
              :min="1"
              :max="12"
              placeholder="请输入 月"
              :controls="false"
              style="width: 100%;"></el-input-number>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import {getToken} from "@/util/auth";
import {getList} from "@/api/budgetAnalysis"

export default {
  name: "index",
  data() {
    return {
      UConfiguration: {
        multipleChoices: false,
        multiple: false,
        disabled: false,
        searchShow: true,
        collapseTags: false,
        placeholder: '请点击右边按钮选择',
        dicData: []
      },
      form: {},
      search: {},
      dataList: [],
      loading: false,
      detailData: {},
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0,
        pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500]
      },
      option: {},
      optionBack: {
        searchShow: true,
        searchMenuPosition: "right",
        searchSpan: 8,
        searchMenuSpan: 16,
        border: true,
        index: true,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        searchIcon: true,
        menu: false,
        summaryText: "合计",
        showSummary: true,
        sumColumnList: [{
          name: "keter",
          type: "sum",
          decimals: 2
        }, {
          name: "keterOrdQuantity",
          type: "sum",
          decimals: 2
        }, {
          name: "keterDeliverQuantity",
          type: "sum",
          decimals: 2
        }, {
          name: "xcentway",
          type: "sum",
          decimals: 2
        }, {
          name: "xcentwayOrdQuantity",
          type: "sum",
          decimals: 2
        }, {
          name: "xcentwayDeliverQuantity",
          type: "sum",
          decimals: 2
        }, {
          name: "luxxan",
          type: "sum",
          decimals: 2
        }, {
          name: "luxxanOrdQuantity",
          type: "sum",
          decimals: 2
        }, {
          name: "luxxanDeliverQuantity",
          type: "sum",
          decimals: 2
        }, {
          name: "drivemaster",
          type: "sum",
          decimals: 2
        }, {
          name: "drivemasterOrdQuantity",
          type: "sum",
          decimals: 2
        }, {
          name: "drivemasterDeliverQuantity",
          type: "sum",
          decimals: 2
        }, {
          name: "quantitySummary",
          type: "sum",
          decimals: 2
        }, {
          name: "orderSummary",
          type: "sum",
          decimals: 2
        }, {
          name: "deliverySummary",
          type: "sum",
          decimals: 2
        }],
        column: [
          {
            label: "年度",
            prop: "year",
            overHidden: true,
            type: "year",
            valueFormat: "yyyy",
            search: true
          }, {
            label: "月",
            prop: "month",
            overHidden: true,
            search: true
          }, {
            label: "客户名称",
            prop: "corpName",
            overHidden: true,
            search: true
          }, {
            label: "登马计划",
            prop: "drivemaster",
            overHidden: true
          }, {
            label: "订单",
            prop: "drivemasterOrdQuantity",
            overHidden: true
          }, {
            label: "发货",
            prop: "drivemasterDeliverQuantity",
            overHidden: true
          }, {
            label: "欧记计划",
            prop: "keter",
            overHidden: true
          }, {
            label: "订单",
            prop: "keterOrdQuantity",
            overHidden: true
          }, {
            label: "发货",
            prop: "keterDeliverQuantity",
            overHidden: true
          }, {
            label: "爱特路计划",
            prop: "xcentway",
            width: 100,
            overHidden: true
          }, {
            label: "订单",
            prop: "xcentwayOrdQuantity",
            overHidden: true
          }, {
            label: "发货",
            prop: "xcentwayDeliverQuantity",
            overHidden: true
          }, {
            label: "路迈计划",
            prop: "luxxan",
            overHidden: true
          }, {
            label: "订单",
            prop: "luxxanOrdQuantity",
            overHidden: true
          }, {
            label: "发货",
            prop: "luxxanDeliverQuantity",
            overHidden: true
          }, {
            label: "订单完成率(%)",
            prop: "orderCompletionRate",
            width: 160,
            overHidden: true
          }, {
            label: "发货完成率(%)",
            prop: "deliveryCompletionRate",
            width: 160,
            overHidden: true
          }, {
            label: "计划汇总",
            prop: "quantitySummary",
            width: 160,
            overHidden: true
          }, {
            label: "订单汇总",
            prop: "orderSummary",
            width: 160,
            overHidden: true
          }, {
            label: "发货汇总",
            prop: "deliverySummary",
            width: 160,
            overHidden: true
          }
          // , {
          //     label: "统计方式",
          //     prop: "showAll",
          //     searchSpan: 8,
          //     searchOrder: 0,
          //     overHidden: true,
          //     type: "select",
          //     clearable: false,
          //     search: true,
          //     hide: true,
          //     showColumn: false,
          //     dicData: [{
          //         label: '年',
          //         value: 0
          //     }, {
          //         label: '季度',
          //         value: 1
          //     }, {
          //         label: '月',
          //         value: 2
          //     }],
          //     searchValue: 0
          // }
        ]
      }
    };
  },
  async created() {
    this.option = await this.getColumnData(this.getColumnName(258), this.optionBack);
  },
  methods: {
    cellStyle() {
      return "padding:0;height:40px;";
    },
    searchCriteriaSwitch(type) {
      if (type) {
        this.option.height = this.option.height - 46;
      } else {
        this.option.height = this.option.height + 46;
      }
      this.$refs.crud.getTableHeight();
    },
    //点击搜索按钮触发
    searchChange(params, done) {
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    refreshChange() {
      this.onLoad(this.page, this.search);
    },
    currentChange(val) {
      this.page.currentPage = val;
    },
    sizeChange(val) {
      this.page.currentPage = 1;
      this.page.pageSize = val;
    },
    onLoad(page, params = {}) {
      let data = this.deepClone(Object.assign({}, params, this.search));
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(data)
      ).then(res => {
        this.dataList = res.data.data.records ? res.data.data.records : [];
        this.page.total = res.data.data.total;
        if (this.page.total) {
          this.option.height = window.innerHeight - 210;
        }
      }).finally(() => {
        this.loading = false;
      });
    },
    //列保存触发
    async saveColumn() {
      const inSave = await this.saveColumnData(this.getColumnName(258), this.option);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
    async resetColumn() {
      this.option = this.optionBack;
      const inSave = await this.delColumnData(this.getColumnName(258), this.optionBack);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
    editOpen(row) {
    },
    outExport() {
      let config = {params: {...this.search}}
      if (config.params) {
        for (const propName of Object.keys(config.params)) {
          const value = config.params[propName];
          if (value !== null && typeof (value) !== "undefined") {
            if (value instanceof Array) {
              for (const key of Object.keys(value)) {
                let params = propName + '[' + key + ']';
                config.params[params] = value[key]
              }
              delete config.params[propName]
            }
          }
        }
      }
      const routeData = this.$router.resolve({
        path: '/api/blade-box-tube/annualItem/annualBudgetProfitExcel',      //跳转目标窗口的地址
        query: {
          ...config.params    //括号内是要传递给新窗口的参数
        }
      })
      window.open(routeData.href.slice(1, routeData.href.length) + '&' + `${this.website.tokenHeader}=${getToken()}`);
    }
  }
};
</script>

<style scoped>
.page-crad ::v-deep .basic-container__card {
    height: 94.2vh;
}

::v-deep .el-table__expanded-cell[class*="cell"] {
    padding: 0px;
}

.itemTable ::v-deep .el-table {
    width: 100%;
}
</style>