jf-frock/src/views/PackagingStatistics/confirm.vue

<template>
    <div>
        <Toptitle title="包装日期详情">
            <Button type="primary" style="margin-right:10px">导出</Button>
            <Button @click="$router.go(-1)" type="primary">返回</Button>
        </Toptitle>
       <Form :label-width='100' class="form_content">
           <FormItem label='时间：' style="width:350px">
                <span class="form_item">{{func.replaceDateNoHMS($route.query.start_time).replace(/-/g,'.')}}</span>~
               <span class="form_item">{{func.replaceDateNoHMS($route.query.end_time*1-86400).replace(/-/g,'.')}}</span>
           </FormItem>
            <FormItem label='包装班组：' style="width:350px">
              <Select v-model="searchData.employee" filterable clearable class="form_item">
                  <Option v-for="item in employeeList" :key="item.id" :value="item.id" :label="item.nickname"/>
              </Select>
           </FormItem>
            <FormItem label='项目名称：' style="width:350px">
                  <Select v-model="searchData.project_title" filterable multiple :max-tag-count='1' class="form_item">
                     <Option v-for="(item,index) in projectList" :key="index" :value="item" :label="item"/>
                  </Select>
           </FormItem>
            <FormItem :label-width='40'>
             <Button style="primary" type="primary" @click="search">搜索</Button>
           </FormItem>
       </Form>
       <Table :data='tableData' :columns='setTableColumns' border max-height='550' :span-method="handleSpan">
       </Table>
    </div>
</template>
<script>
export default {
          data(){
              return{
                proxyData:{},
                employeeList:[],
                projectList:[],
                  tableSlice:[],
                  tableData:[
                    //   {time:'123',A:"600",B:'700',C:'800',D:'900',E:'1000',F:'1100',G:"1200",H:'1300',I:"1400",j:'2000',total_price:'5000'}
                  ],
                  tableColumns:[
                      {title:'时间',key:'time',align:'center',minWidth:100}
                  ],
                  otherColumns:[],
                   searchData:{
                       project_title:'',
                       employee:''
                   }
              }
          },
          computed:{
            setTableColumns(){
                let arr;
                 arr = [
                     ...this.tableColumns,...this.otherColumns,
                     {title:'合计',align:'center',key:"total_price",minWidth:100}
                 ] 
                return arr     
                }
          },
          mounted(){
                 this.initData();   
          },

          methods:{
            search(){
               let obj = {};
            obj = JSON.parse(JSON.stringify(this.searchData));
            this.proxyData = obj;
            this.initData(obj);
            },
              handleSpan({ row, column, rowIndex, columnIndex }){
                   if (rowIndex ===this.tableData.length-2 && (columnIndex === 0||columnIndex===this.tableSlice[this.tableSlice.length-1]+1)) {
                    return {
                        rowspan: 2,
                        colspan: 1
                    };
                } else if (rowIndex === this.tableData.length-1 && (columnIndex === 0||columnIndex===this.tableSlice[this.tableSlice.length-1]+1)) {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
                if(rowIndex===this.tableData.length-1){
                    return this.totalColumns(rowIndex,columnIndex)
                }
                
              },
              totalColumns(rowIndex,columnIndex){
                  let arr = [];
                  if(0<columnIndex<=this.tableSlice[this.tableSlice.length-1]){
                       arr = [0,0];
                  this.tableSlice.forEach((v,index)=>{
                     
                    // if(index!=this.tableSlice.length-1){
                       
                     
                      if(index==0){
                           if(columnIndex===v+1){
                             arr = [v+1,v]
                            
                          }
                      }else{
                         if(index!=this.tableSlice.length-1&&columnIndex===v+1){
                             arr = [v+1,this.tableSlice[index+1]-v];
                         }
                      }
                  })
                  }
                 if(columnIndex===1){
                              arr = [1,this.tableSlice[0]] }
                return arr;
              },
               initData(row){
                   this.axios.post('/api/finance_pack_year',{...this.$route.query,state:'',...row}).then(res=>{
                       this.otherColumns=[];
                       this.employeeList = res.data.employee;
                       this.projectList = res.data.order_list;
                        let data = res.data.header;
                       let totalData = res.data.price;
                       totalData.time='合计';
                       this.tableData = res.data.list;
                    //    let data=[
                    //        {title:'包装一组',children:[{title:'项目A',key:'A'},{title:'项目B',key:'B'},{title:'项目C',key:'C'}],total_price:'1750'},
                    //        {title:'包装二组',children:[{title:'项目D',key:'D'},{title:'项目E',key:'E'},{title:'项目F',key:'F'}],total_price:'1800'},
                    //        {title:'包装三组',children:[{title:'项目G',key:'G'},{title:'项目H',key:'H'},{title:'项目I',key:'I'},{title:'项目j',key:'j'}],total_price:'1900'},
                    //    ];
                    //    let totalData = {time:'合计',A:"600",B:'700',C:'800',D:'900',E:'1000',F:'1100',G:"1200",H:'1300',I:"1400",j:'2000',total_price:'5000'};
                       let totalSure = {};
                       let sum = 0;
                       data.forEach(v=>{
                           totalSure[v.children[0].key] = v.total_price;
                           sum+=v.children.length;
                           this.tableSlice.push(sum)
                           let obj = {};
                           obj.title = v.title;
                           obj.align = 'center';
                           v.children.forEach(val=>{
                               val.align='center';
                               val.minWidth=100;
                               val.render=(h,params)=>{
                                   const {row,column} = params;
                                   return !row.time?h('span',{},row[val.key]):h('a',{on:{
                                    'click':()=>{
                                        //   let year =  this.func.replaceDateNoHMS(this.$route.query.start_time).split('-')[0]*1;
                                        //   let month = this.func.replaceDateNoHMS(this.$route.query.start_time).split('-')[1]*1;
                                        let obj = {};
                                        // obj.start_time = (new Date(`${year}/${month}/${row.time*1}`).getTime().toString().slice(0,10))*1;
                                        // obj.end_time = (new Date(`${year}/${month}/${row.time*1}`).getTime().toString().slice(0,10))*1;
                                        obj.day=row.time;
                                        obj.employee = column.id;
                                        obj.order_no = column.order_no;
                                        obj.employee_title = column.employee;
                                        obj.project_title = column.title;
                                        this.$router.push({path:'/cms/PackagingStatistics/urlNumberDetail',query:{...obj,...this.$route.query}})
                                    }
                                   }},row[val.key])
                               }
                           });
                           obj.children = v.children
                              this.otherColumns.push(obj);
                       })   
                      
                          this.tableData.push(totalData);
                     this.tableData.push(totalSure);
                   });
               }
          }    
}
</script>
<style lang="scss" scoped>
.form_content{
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    .form_item{
        width: 200px;
    }
}
</style>