jf-frock/src/views/BidSystem/TotalBoard/detail.vue

<template>
    <div>
        <Toptitle title="板材统计表详情">
            <Button type="primary" style="margin-right: 10px" @click="checkTotal">查看合计</Button>
            <Button @click="AllSelect" style="margin-right: 10px" type="primary">{{state?'取消全选':'全选'}}</Button>
            <Button type="primary" ghost  @click='exportData()' style="margin-right: 10px">导出</Button>
            <Button type="primary" @click="$router.go(-1)">返回</Button>
        </Toptitle>
        <Form :label-width='80' style="display:flex;flex-wrap:wrap;margin-top:15px">
            <FormItem label='图号'>
                <Select filterable multiple v-model="searchData.url_number" style="width:200px">
                    <Option v-for="(item,index) in urlNumber_list" :key="index" :value="item" :label="item"></Option>
                </Select>
            </FormItem>
            <FormItem label='产品名称'>
                <Select filterable multiple v-model="searchData.product_id" style="width:200px">
                    <Option v-for="(item,index) in product_list" :key="index" :value="item" :label="item"/>
                </Select>
            </FormItem>
            <FormItem label='派工时间'>
               <DatePicker type="date" placeholder="年/月/日" style="width: 200px" v-model="searchData.start_time"></DatePicker>~
                <DatePicker type="date" placeholder="年/月/日" style="width: 200px" v-model="searchData.end_time"></DatePicker>
            </FormItem>
            <FormItem><Button type="primary" @click="initData(searchData)">搜索</Button></FormItem>
        </Form>
        <div style="height:80%;overflow:auto">
            <Card v-for="(item,index) in infoNumber" :key="index">
          <div class="table_header">
            <div class="table_header_left">
            <Checkbox v-model="item.is_select" @on-change='itemSelect($event,item,index)'></Checkbox>
              <span>图号：{{item.url_number}}</span>
              <span>产品名称：{{item.product_title}}</span>
              <span>派工时间：{{item.crt_time?func.replaceDateNoHMS(item.crt_time):''}}</span>
            </div>
            <div class="table_header_right">
              <div @click="show(item,index)" style="cursor: pointer;"><span style="font-size:16px;">{{item.showType?'收缩':'展开'}}</span><Icon type="md-arrow-dropright"  ref="ico" class="ico"/></div>
              <span>总计{{item.total}}条数据</span>
            </div>
          </div>
          <div v-if="item.showType">
          <div>
           <Form style="display:flex;" :label-width='80'>
             <FormItem label='物料分类:'>
                 <Select v-model="underFormData.type_id" filterable multiple style="width:250px">
                     <Option v-for="item in material_typeList" :key="item.id" :value="item.id" :label="item.title"/>
                 </Select>
             </FormItem>
             <FormItem label='物料名称:'>
                 <Select v-model="underFormData.material_title" filterable multiple style="width:250px">
                     <Option v-for="val in materialList" :key="val.id" :value="val.title" :label="val.title"/>
                 </Select>
             </FormItem>
             <FormItem><Button type="primary" @click="initUnderData(underFormData)">搜索</Button></FormItem>
           </Form>
          </div>
              <Table :columns="tableColumns" border :data="tableData" max-height="450">
              </Table>
        </div>
      </Card>
           
        </div>
        <Modal title="详情" width='50' v-model="show_total">
         <Form :label-width='100' class="modal_form">
             <FormItem label='物料分类：'>
                   <Input placeholder="请输入物料分类" v-model="modalData.type_title" size="small" class="modal_item" clearable/>
             </FormItem>
             <FormItem label='物料名称：'>
                  <Input placeholder="请输入物料名称" v-model="modalData.material_title" size="small" class="modal_item" clearable/>
             </FormItem>
             <FormItem :label-width='50'>
                 <Button type="primary" size='small' @click="checkTotal(modalData)">搜索</Button>
             </FormItem>
         </Form>
         <Table :data='modalTableData' :columns='modalTableColumns' border max-height='550'>
             
         </Table>
         <div style="text-align:center;margin-top:20px">
          <Page :page-size-opts="[10, 20, 30, 40,100]"
                @on-page-size-change='changeSize'
                @on-change='changePage'
                :current='pageIndex'
                show-total
                :total="total"
                show-sizer
                :page-size='pageSize' />
        </div>
        <div slot="footer" style="text-align:center">
            <Button type="primary" @click="modalBack" style="width:200px">返回</Button>
        </div>
        </Modal>
    </div>
</template>
<script>
export default {
    data(){
        return{
            proxyData:{},
            total:0,
            pageSize:10,
            pageIndex:1,
            modalTableData:[],
            modalTableColumns:[
                {type:'index',title:'序号',align:'center',minWidth:80},
                {title:'物料分类',key:'type_title',minWidth:100,align:'center'},
                 {title:'物料名称',key:'material_title',minWidth:100,align:'center'},
                  {title:'计量单位',key:'unit',minWidth:100,align:'center'},
                   {title:'数量',key:'num',minWidth:100,align:'center'},
            ],
            modalData:{
              type_title:'',
              material_title:''
            },
            show_total:false,
            tableColumns:[
                {title:'序号',type:'index',align:'center',minWidth:60},
               {title:'物料分类',align:'center',minWidth:100,key:'type_title'},
                 {title:'物料名称',align:'center',minWidth:150,key:'material_title'},
                //    {title:'规格型号',align:'center',minWidth:150,key:'measure',render:(h,params)=>{
                //        const {row} = params;
                //        const text = `${row.long?row.long:0}*${row.wide?row.wide:0}*${row.thick?row.thick:0}`
                //        return h('span',{},text)
                //    }},
                {title:'原料尺寸',align:'center',minWidth:150,key:'storage_size'},
                     {title:'计量单位',align:'center',minWidth:80,key:'unit'},
                     {title:'精裁面积',align:'center',minWidth:150,key:'cut_area'},
                       {title:'数量',align:'center',minWidth:80,key:'num'},
            ],
            tableData:[],
            selectData:[],
            infoNumber:[],
            underFormData:{
                type_id:[],
                material_title:[],
            },
            searchData:{
                url_number:[],
                product_id:[],
                start_time:'',
                end_time:''
            },
            material_typeList:[],
            materialList:[],
            urlNumber_list:[],
            product_list:[],
            url_number:'',
            state:false,
        }
    },
    created(){
        //获取物料分类
         this.axios.get('/api/basics_material_index').then(res => {
      this.material_typeList = res.data.data;
         }
         );
        //获取物料名称
           this.axios.get('/api/material').then(res=>{
                        this.materialList = res.data.data;
               })
    },
    mounted(){
            this.initData();
    },
    methods:{
        modalBack(){
              this.show_total = false;
              this.modalData.type_title = '';
              this.modalData.material_title = '';
        },
        changePage(e){
             this.pageIndex = e;
        },
        changeSize(e){
             this.pageSize = e;
             this.pageIndex = 1;
        },
        checkTotal(data){
          if(this.selectData.length==0){
                return this.$Message.warning('请先选择图号!')
            }
            let url_number = [];
            this.selectData.forEach(v=>{
                url_number.push(v.url_number);
            })
            this.axios.post('/api/finance_quota_detail_material_total',{url_number,order_no:this.$route.query.order_no,...data}).then(res=>{
                if(res.code == 200){
                    this.modalTableData = res.data.data;
                    this.total = res.data.total;
                    this.show_total = true;
                }
                 
            })
           
        },
        itemSelect(e,item,index){
           console.log(e);
           if(e){
               this.selectData.push(item);
               this.infoNumber[index].is_select = true;
               let arr = this.infoNumber.filter(v=>{
                     return v.is_select == false;
               })
               if(arr.length == 0){
                   this.state = true;
               }
           }else{
                this.state = false;
                  this.infoNumber[index].is_select = false;
               this.selectData.forEach((v,idx)=>{
                   if(v.index == item.index){
                       this.selectData.splice(idx,1)
                   }
               })
           }
        },
        AllSelect(){
            if(this.state){
                    this.infoNumber.forEach(v=>{
                v.is_select = false;
            this.state = false;
           
            })
             this.selectData = [];
            }else{
            this.infoNumber.forEach(v=>{
                v.is_select = true;
            this.state = true;
            })
            this.selectData = JSON.parse(JSON.stringify(this.infoNumber))
            }
        },
        async exportData(){
            // console.log(this.selectData);
            if(this.selectData.length==0){
                return this.$Message.warning('请先选择图号!')
            }
            let url_number = [];
            this.selectData.forEach(v=>{
                 url_number.push(v.url_number);
            })
            const res = await this.axios.post('/api/finance_quota_export',{order_no:this.$route.query.order_no,url_number})
           if(res.code == 200){
                let url = `${this.$store.state.ip}/api/storage/${res.data.file}`
                location.href = url
            }
        },
        initUnderData(row){
  this.axios.post('/api/finance_quota_detail_material',{order_no:this.$route.query.order_no,
	url_number:this.url_number,...row}).then(res=>{
                  this.tableData = res.data.data;
    })
        },
        show(item,index){
            item.showType = !item.showType;
            this.infoNumber.forEach((v,indx)=>{
                if(indx!=index){
                     v.showType = false;
                      document.getElementsByClassName('ico')[index].style.transform = 'rotate(0deg)'
                }
            })
           if(item.showType){
                document.getElementsByClassName('ico')[index].style.transform = 'rotate(90deg)';
                this.url_number = item.url_number;
                  this.underFormData={
                type_id:[],
                material_title:[],
            };
                this.initUnderData();
           }
           
        },
        initData(row){
            this.proxyData=row;
            let data = [];
            if(row){
                data = JSON.parse(JSON.stringify(row));
                data.end_time = row.end_time?Date.parse(row.end_time).toString().slice(0,10):'';
                data.start_time = row.start_time?Date.parse(row.start_time).toString().slice(0,10):'';
            }
            
            this.axios.post('/api/finance_quota_detail',{order_no:this.$route.query.order_no,...data}).then(res=>{
                res.data.data.forEach((v,index) => {
                     v.showType = false;
                     v.is_select=false;
                     v.index = index;
                });
                this.infoNumber = res.data.data;
                this.urlNumber_list = res.data.url_number;
                this.product_list = res.data.product_title;
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.table_header {
  display: flex;
  justify-content: space-between;
  .table_header_left{
      span{
          margin: 0 20px;
      }
  }
  .table_header_right {
      width: 240px;
    display: flex;
    justify-content: space-around;
  }
}
/deep/ .ivu-card{
    border-radius: 15px;
    margin: 15px 0;
    background: rgb(236, 236, 236);
}
.mate_info{
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}
.ico{
   height:14px;
   transition: all 0.4s;
   vertical-align: middle;
}
.modal_form{
    display: flex;
    flex-wrap: wrap;
    .modal_item{
        width: 150px;
    }
}
</style>