BST_bigScreen/src/views/BidSystem/IncompleteStatisticsDetail.vue

<template>
    <div>
          <Toptitle title="详情">
      <slot name="titleButton">
        <Button
                type='primary'
                ghost
                style="margin-right:10px;">栏目设置</Button>
        <Button type="primary"
                style="margin-right:10px;"
           
                ghost>导出</Button>
           <Button type="primary"
                style="margin-right:10px;"
                @click="back"
                ghost>返回</Button>
      </slot>
    </Toptitle>
    <div style="height:80%;overflow:auto">
    <Form style="display:flex;margin:10px 0;flex-wrap:wrap" :label-width='90'>
        <FormItem label='项目编码:' style="width:250px"><span>{{searchData.order_no}}</span></FormItem>
        <FormItem label='项目名称:' style="width:250px"><span>{{searchData.project_name}}</span></FormItem>
        <FormItem label='图号:' style="width:250px">  <Tooltip :content="searchData.url_number" placement="bottom" transfer max-width='400'>
          <span>{{searchData.url_number.toString().length>=16?searchData.url_number.toString().slice(0,16)+"...":searchData.url_number}}</span>
        </Tooltip></FormItem>
        <FormItem label='未完工平方:' style="width:250px"><span>{{searchData.area}}</span></FormItem>
         <FormItem label='查询日期:' style="width:250px">
             <DatePicker type="date" placeholder="年/月/日" style="width: 130px" size='small' v-model="searchData.search_date"></DatePicker>
         </FormItem>
         <FormItem label='工序名称:' style="width:250px">
             <Select v-model="searchData.process_id" filterable clearable multiple>
                 <Option v-for="item in process_list" :key="item.id" :label="item.title" :value='item.id'/>
             </Select>
         </FormItem>
         <FormItem label='班组名称:' style="width:250px">
             <Select v-model='searchData.employee_id' filterable clearable multiple>
                 <Option v-for="item in band_list" :key="item.id" :label="item.nickname" :value='item.id'/>
             </Select>
         </FormItem>
         <FormItem label='图号:' style="width:250px">
               <Select v-model="searchData.product_id" filterable clearable multiple>
                 <Option v-for="item in url_number_list" :key="item.product_id" :value="item.product_id" :label="item.url_number"/>
             </Select>
         </FormItem>
         <FormItem label='楼幢:' style="width:250px">
                   <Select v-model="searchData.house" filterable clearable multiple>
                 <Option v-for="(item,index) in house_list" :key="index" :value="item" :label="item"/>
             </Select>
         </FormItem>
         <FormItem label='单元:' style="width:250px">
                <Select v-model="searchData.unit" filterable clearable multiple>
                 <Option v-for="(item,index) in unit_list" :key="index" :value="item" :label="item"/>
             </Select>
         </FormItem>
         <FormItem label='楼层:' style="width:250px">
                     <Select v-model="searchData.layer" filterable clearable multiple>
                 <Option v-for="(item,index) in layer_list" :key="index" :value="item" :label="item"/>
             </Select>
         </FormItem>
         <FormItem label='房号:' style="width:250px">
               <Select v-model="searchData.house_number" filterable clearable multiple>
                 <Option v-for="(item,index) in house_number_list" :key="index" :value="item" :label='item'/>
             </Select>
         </FormItem>
         <FormItem label='产品:' style="width:250px">
             <Select v-model="searchData.product_id" filterable clearable multiple>
                 <Option v-for="item in url_number_list" :key="item.product_id" :value="item.product_id" :label="item.title"/>
             </Select>
         </FormItem>
           <FormItem label='组合名称:' style="width:250px">
             <Select v-model="searchData.compose_name" filterable clearable multiple>
                 <Option v-for="(item,index) in compose_list" :key="index" :value="item.title" :label="item.title"/>
             </Select>
         </FormItem>
           <FormItem label='部件:' style="width:250px">
                 <Select v-model="searchData.part_id" filterable clearable multiple>
                 <Option v-for="item in part_list" :key="item.id" :value="item.id" :label="item.title"/>
             </Select>
         </FormItem>
           <FormItem label='派工日期:' style="width:400px">
              <DatePicker type="date" placeholder="年/月/日" style="width: 130px" size='small' v-model="searchData.push_start_time"></DatePicker>
              ~
              <DatePicker type="date" placeholder="年/月/日" style="width: 130px" size='small' v-model="searchData.push_end_time"></DatePicker>
         </FormItem>
           <FormItem label='完工日期:' style="width:400px">
                 <DatePicker type="date" placeholder="年/月/日" style="width: 130px" size='small' v-model="searchData. complete_start_time"></DatePicker>
              ~
              <DatePicker type="date" placeholder="年/月/日" style="width: 130px" size='small' v-model="searchData. complete_end_time"></DatePicker>
         </FormItem>
         <FormItem>
             <Button type="primary" size='small' @click="init">搜索</Button>
         </FormItem>
    </Form>
     <Table 
    :data='tableData'
    :columns='tableColumns'
    border>
    <template slot="over_date" slot-scope="{row}">
        <span :style="Number(row.over_date)>=0?{}:{'color':'red'}">{{row.over_date}}</span>
    </template>
    </Table>
    </div>
     <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>
</template>
<script>
export default {
    name:'CompletionStatisticsDetail',
    data(){
        return{
            house_number_list:[],
            unit_list:[],
            part_list:[],
            compose_list:[],
            house_list:[],
            url_number_list:[],
            pageSize:10,
            pageIndex:1,
            total:0,
            searchData:{
          search_date:new Date(),//查询时间
          process_id:[],//工序id
          employee_id:[],//班组id
          house:[],//楼栋
          unit:[],//单元
          layer:[],//楼层
          house_number:[],//房号
          product_id:[],//产品id
          compose_name:[],//组合id
          part_id:[],//部件id
          push_start_time:'',//派工日期（起）
          push_end_time:'',//（末）
          complete_start_time:'',//完工日期（起）
          complete_end_time:''//（末）
            },
            tableData:[],
           tableColumns:[
            {title:'逾期天数',align:'center',minWidth:120,key:'over_date',slot:'over_date'},
           {title:'工序',align:'center',minWidth:120,key:'produce'},
           {title:'班组',align:'center',minWidth:120,key:'employee'},
           {title:'楼栋',align:'center',minWidth:120,key:'house'},
            {title:'单元',align:'center',minWidth:120,key:'unit'},
         {title:'楼层',align:'center',minWidth:120,key:'layer'},
         {title:'房号',align:'center',minWidth:120,key:'house_number'},
          {title:'图号',align:'center',minWidth:120,key:'url_number'},
          {title:'产品名称',align:'center',minWidth:120,key:'product_title'},
            {title:'组合名称',align:'center',minWidth:120,key:'compose_name'},
            {title:'未完工平方',align:'center',minWidth:120,key:'ext_1'},
                     {title:'派工日期',align:'center',minWidth:120,key:'push_time'},
                       {title:'预计完工日期',align:'center',minWidth:120,key:'plan_complete_time'},
           ],
           process_list:[],
           band_list:[],
           layer_list:[],
        }
    },
    created(){
    this.searchData = {...this.searchData,...this.$route.query};
    //      //工序列表
    // this.axios.post('/api/ext_produce_list').then(res=>{this.process_list = res.data});
    // //班组列表
    // this.axios("/api/employee_list").then((res) => (this.band_list = res.data));
    },
    mounted(){
         this.getData();
    },
    methods:{
        init(){
           let data = [];
           data = JSON.parse(JSON.stringify(this.searchData));
           data.push_start_time=data.push_start_time?Date.parse(data.push_start_time).toString().slice(0,10):'';
           data.push_end_time=data.push_end_time?Date.parse(data.push_end_time).toString().slice(0,10):'';
           data.complete_start_time=data.complete_start_time?Date.parse(data.complete_start_time).toString().slice(0,10):'';
           data.complete_end_time=data.complete_end_time?Date.parse(data.complete_end_time).toString().slice(0,10):'';
           data.search_date=Date.parse(data.search_date).toString().slice(0,10);
           this.getData(data)
        },
        goPageDetail(row){
              this.$router.push({path:'/cms/BidSystem/CompletionStatisticsConfig',query:{...row,...this.$route.query}})
        },
        back(){
            this.$router.go(-1)
        },
        changeSize(e){
              this.pageSize = e;
              this.getData();
        },
        changePage(e){
                this.pageIndex = e;
                this.getData();
        },
        getData(row){
               this.axios.post('/api/finance_un_complete_total_detail',{
            page_size:this.pageSize,
            page_index:this.pageIndex,
            produce_id:this.$route.query.produce_id,
            employee_id:this.$route.query.employee_id,
            start_time:this.$route.query.start_time,
            end_time:this.$route.query.end_time,
            order_no:this.$route.query.order_no,
            ...row
            }).then(res=>{
                this.tableData = res.data.data;
                this.total =res.data.total;
                this.url_number_list = res.data.product_list;
                this.house_list = res.data.house_list;
                let layer = [];
                res.data.house_list.forEach(v=>{
                    if(layer.indexOf(v.layer)<0){
                        layer.push(v.layer);
                    }
                })
                this.layer_list = layer;
                let house = [];
                  res.data.house_list.forEach(v=>{
                    if(house.indexOf(v.house)<0){
                        house.push(v.house);
                    }
                })
                this.house_list = house;
                let unit = [];
                  res.data.house_list.forEach(v=>{
                    if(unit.indexOf(v.unit)<0){
                        unit.push(v.unit);
                    }
                })
                this.unit_list = unit;
                let house_number = [];
                  res.data.house_list.forEach(v=>{
                    if(house_number.indexOf(v.number)<0){
                        house_number.push(v.number);
                    }
                })
                this.house_number_list = house_number;
                this.compose_list = [];
                   res.data.compose_list.forEach(element => {
                       let obj ={};
                       obj.title = element;
                       this.compose_list.push(obj);
                   });
                this.part_list = res.data.part_list;
                this.process_list = res.data.produce_list;
                this.band_list = res.data.employee_list;
            })
        }

    }
}
</script>
<style lang="scss" scoped>

</style>