jf-frock/src/views/BidSystem/OutputValue/otherList.vue

<template>
  <div style="width:100%">
    <Toptitle title="产值表">
      <Button type="primary" ghost style="margin-right: 10px" @click='exportData()'>导出</Button>
    </Toptitle>
    <div style="height:90%;overflow:auto">
    <Topsearch :list="list"  @searchData="searchVal"> </Topsearch>
    <div class="table_content" >
        <div  v-for="(item, index) in tableData" :key="index" class="table_style" >
        <div class="table_title">{{item.title}}</div>
      <Table
        :data="item.data"
        :columns="tableColumns"
        border
        max-height='614'
          show-summary 
    :summary-method="handleSummary"
      >
      </Table>
      </div>
    </div>
    </div>
     <!-- <div class="pageSlotStyle">
          <Page
            :page-size-opts="[10, 20, 30, 50, 100, 1000]"
            @on-page-size-change="changeSize"
            @on-change="changePage"
            :current="pageIndex"
            show-total
            :total="total"
            show-sizer
            :page-size="pageSize"
          />
        </div> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchState:false,
        proxyData:{},
        total:0,
        pageSize:10,
        pageIndex:1,
      tableData: [],
      tableColumns:[   
      {title:'日期',align:'center',width:'120',key:'end_time'},
      {title:'项目名称',align:'center',width:'100',key:'residential_name',ellipsis:true,tooltip:true},
      {title:'图号',align:'center',width:'80',key:'url_number',ellipsis:true,tooltip:true},
      {title:'平方',align:'center',width:'100',key:'area',ellipsis:true,tooltip:true},
      {title:'人数',align:'center',width:'80',key:'count'},
     ],
      list: [
        {
          title: "班组",
          name: "Select",
          isTooltip:true,
          showChooseAll:true,
          value: "",
          multiple: true,
          filterable: true,
          placeholder: "请选择",
          serverName: "employee",
          optionName: "label",
          optionValue: "value",
          option: [],
        },
        {
            title:'日期',
            isDate:true,
            name:"Date",
            type:'date',
            start_value:`${(new Date()).toLocaleDateString().split('/')[0]}-${(new Date()).toLocaleDateString().split('/')[1]}-1`,
            end_value:['1','3','5','7','8','10','12'].indexOf((new Date()).toLocaleDateString().split('/')[1])>=0?`${(new Date()).toLocaleDateString().split('/')[0]}-${(new Date()).toLocaleDateString().split('/')[1]}-31`:['4','6','9','11'].indexOf((new Date()).toLocaleDateString().split('/')[1])>=0?`${(new Date()).toLocaleDateString().split('/')[0]}-${(new Date()).toLocaleDateString().split('/')[1]}-30`:`${(new Date()).toLocaleDateString().split('/')[0]}-${(new Date()).toLocaleDateString().split('/')[1]}-${((new Date()).toLocaleDateString().split('/')[0])%4==0?29:28}`,
            start_server: "start_time",
            end_server:'end_time',
            start_placeholder:'年/月',
            end_placeholder:'年/月'
        },
        {
          title: "项目名称",
          name: "Select",
          isTooltip:true,
          showChooseAll:true,
          value: "",
          multiple: true,
          filterable: true,
          placeholder: "请选择",
          serverName: "residential_name",
          optionName: "label",
          optionValue: "value",
          option: [],
        },
         {
          title: "图号",
          name: "Select",
          isTooltip:true,
          showChooseAll:true,
          value: "",
          multiple: true,
          filterable: true,
          placeholder: "请选择",
          serverName: "url_number",
          optionName: "label",
          optionValue: "value",
          option: [],
        },
      ],
    };
  },
  // computed:{
  //       pageSize(){
  //         return 10;
  //       },
  //       pageIndex(){
  //         return 1;
  //       }
  // },
  mounted() {
    this.axios.post('/api/team_list').then(res=>{
       this.proxyData.employee = res.data.data;
      let employee = [];
         res.data.data.forEach(v=>{
           let obj ={};
           obj.label = v;
           obj.value=v;
           employee.push(obj);
         })
         this.list[0].option = employee;
          let residential_name = [];
          res.data.residential_name.forEach(v=>{
               let obj = {};
               obj.label = v;
               obj.value = v;
               residential_name.push(obj)
          })
          this.list[2].option = residential_name;
          let url_number = [];
          res.data.url_number.forEach(v=>{
                let obj = {};
               obj.label = v;
               obj.value = v;
               url_number.push(obj)
          })
          this.list[3].option = url_number;
    })
  },
  methods: {
     handleSummary ({ columns, data }) {
                const sums = {};
                columns.forEach((column, index) => {
                    const key = column.key;
                    if (index === 0) {
                        sums[key] = {
                            key,
                            value: '合计'
                        };
                        return;
                    }
                    const values = data.map(item => Number(item[key]));
                    if (key === 'area') {
                        const v = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[key] = {
                            key,
                            value:v.toFixed(2)
                        };
                    } else {
                        sums[key] = {
                            key,
                            value: ''
                        };
                    }
                });

                return sums;
        },
     searchVal(row){
         if(this.searchState){
           return
         }else{
           this.searchState = true;
           this.search(row);
           
         }
     },
      // changeSize(e){
      //   console.log(1)
      //      this.pageSize = e;
      //      this.search(this.proxyData);
      // },
      // changePage(e){
      //     this.pageIndex = e;
      //     this.search(this.proxyData);
      // },
    // init(row) {
    //       if(row){
    //           this.proxyData = JSON.parse(JSON.stringify(row))
    //           row.start_time=row.start_time?Date.parse(row.start_time).toString().slice(0,10):'';
    //           row.end_time = row.end_time?Date.parse(row.end_time).toString().slice(0,10):'';
    //       }
    //   this.axios.post("/api/outputs_value_list", { ...row,page_size:this.pageSize,page_index:this.pageIndex }).then((res) => {
    //       res.data.data.forEach(element => {
    //         if(element.data.length<this.pageSize){
    //             for(let i=0;i<this.pageSize;i++){
    //                 if(element.data.length<this.pageSize){
    //                     element.data.push({});
    //                 }else{
    //                     break;
    //                 }
    //             }
    //         }
    //       });
    //     this.tableData = res.data.data;
    //     this.total=0;
    //     this.tableData.forEach(v=>{
    //         if(v.total>this.total){
    //             this.total = v.total
    //         }
    //     })
    //   });
    // },
    async exportData(){
            const res = await this.axios.post('/api/output_value_export',{...this.proxyData})
           if(res.code == 200){
                let url = `${this.$store.state.ip}/api/storage/${res.data.file}`
                location.href = url
            }
        },
   async search(row){
      
         if(row){
             console.log(row)
              row.start_time=row.start_time.indexOf('-')>=0?Date.parse(row.start_time).toString().slice(0,10):row.start_time;
              row.end_time = row.end_time.indexOf('-')>=0?Date.parse(row.end_time).toString().slice(0,10):row.end_time;
               this.proxyData = JSON.parse(JSON.stringify(row))
               if(this.proxyData.employee.length==0){
               this.proxyData.employee = [];
               row.employee =[];
               this.list[0].option.forEach(v=>{
                 this.proxyData.employee.push(v.value);
                 row.employee.push(v.value);
               })}
          }
         this.tableData = [];
        // this.total = 0;
       
      row.employee.forEach(async (v)=>{
           await this.axios.post("/api/outputs_value_list",{start_time:row.start_time,end_time:row.end_time,employee:v,url_number:row.url_number,residential_name:row.residential_name}).then(res=>{
            //  if(res.data.total>this.total){
            //    this.total = res.data.total;
            //  }
             this.$nextTick(()=>{
                if(res.data.data.length<12){
                for(let i=0;i<12;i++){
                    if(res.data.data.length<12){
                        res.data.data.push({});
                    }else{
                        break;
                    }
                }
            }
             })
           
               this.tableData.push(res.data);
               this.searchState = false;
            // this.tableData.sort(this.sort);
            })
      })
      // this.tableData.forEach(v=>{
      //    if(v.length<this.total){
      //           for(let i=0;i<this.total;i++){
      //               if(v.length<this.total){
      //                   v.push({});
      //               }else{
      //                   break;
      //               }
      //           }
      //       }
      // })
    // this.$forceUpdate();
      
    },
      sort(a,b){
        
       return a.index-b.index
      },
  },
};
</script>
<style lang="scss" scoped>
.table_content{
    vertical-align: top;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    height: 710px;
    width:100%;
    .table_title{
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        border-top:#dcdee2 solid 2px;
        border-left:#dcdee2 solid 2px; 
        border-right: #dcdee2 solid 2px;;
    }
    .table_style{
        display: inline-block;
        width:492px;
        
    }
  
}  
.pageSlotStyle {
  text-align: center;
  margin-top: 10px;
}
</style>