jf-frock/src/views/BidSystem/DeepeningOrder/newDetail.vue

<template>
    <div>
        <Toptitle :title="types==0?'详情':'编辑'">
            <Button @click="$router.go(-1)">返回</Button>
              <Upload
        :disabled='selectData.length==0'
          style="display: inline"
          name="your_file"
          :show-upload-list="false"
          accept='image'
          :headers="headers"
          :data='{order_no:$route.query.order_no,url_number:selectUrl}'
          :on-error="uploadError"
          :on-success="uploadSuccess"
          :action="$store.state.ip + '/api/deep_img_imports'"
        >
          <Button type="primary" style="margin-left: 10px" @click="()=>(selectData.length==0&&$Message.warning('请选择数据！'))"
            >导入图纸</Button
          >
        </Upload>
        </Toptitle>
        <Form :label-width='120' class="form_content">
            <FormItem label='下单编号：' class="form_item">
                <span>{{$route.query.order_number}}</span>
            </FormItem>
            <FormItem label='下单序号：' class="form_item">
                <span>{{$route.query.order_numbers}}</span>
            </FormItem>
            <FormItem label='深化导入日期：' class="form_item">
                <span>{{func.replaceDateNoHMS($route.query.crt_time)}}</span>
            </FormItem>
        </Form>
        <Form :label-width='100' class="form_content" style="border:none">
            <FormItem label='楼栋：'>
                <Select class="item" filterable clearable v-model="searchData.house">
                    <Option v-for='(item,index) in houseList' :key="index" :value="item" :label="item"/>
                </Select>
            </FormItem>
            <FormItem label='单元：'>
                <Select class="item" filterable clearable v-model="searchData.unit">
                    <Option v-for='(item,index) in unitList' :key="index" :value="item" :label="item"/>
                </Select>
            </FormItem>
            <FormItem label='楼层：'>
                <Select class="item" v-model="searchData.layer" filterable clearable>
                    <Option v-for='(item,index) in layerList' :key="index" :value="item" :label="item"/>
                </Select>
            </FormItem>
            <FormItem label='房号：'>
                <Select class="item" v-model="searchData.number" filterable clearable>
                    <Option v-for='(item,index) in numberList' :key="index" :value="item" :label="item"/>
                </Select>
            </FormItem>
            <FormItem label='房型：'>
                <Input class="item" placeholder="请输入房型" v-model="searchData.house_type" clearable/>
            </FormItem>
            <FormItem label='产品名称：'>
                <Input class="item" placeholder="请输入产品名称" v-model="searchData.product_title" clearable/>
            </FormItem>
            <FormItem label='左右：'>
                <Select class="item" v-model="searchData.fashion" filterable clearable>
                   <Option :value="1" label='左'></Option>
                   <Option :value="2" label='右'></Option>
                </Select>
            </FormItem>
            <FormItem label='图号：'>
                <Input class="item" placeholder="请输入图号" v-model="searchData.url_number" clearable/>
            </FormItem>
            <FormItem label='饰面：'>
                <Input class="item" placeholder="请输入饰面" v-model="searchData.process_property" clearable/>
            </FormItem>
            <FormItem :label-width='40'>
                <Button type="primary" @click="handleSearch">搜索</Button>
            </FormItem>
        </Form>
        <Tabs type="card" @on-click='handleTab'>
            <Button @click="handleTabsDel" size="small" slot="extra" v-show="type==='2'&&types==1" type="primary">批量删除</Button>
        <TabPane v-for="tab in 2" :key="tab" :label="tab==1?'汇总':'明细'" :name="tab+''">
             
            <Table :data='tab==1?tableData:totalTableData' :columns='tab==1?tableColumns:totalTableColumns' border max-height='450' @on-selection-change='handleSelect'>
                <template slot="set" slot-scope="{row}">
                    <a @click="handleDel(row)">删除</a>
                </template>
                <template slot="img_url" slot-scope="{row}">
                    <img v-show="row.img_url" @click="looks(row.img_url)" :src="$store.state.ip + row.img_url" alt="" class="img_content"/>
                    <span v-show="!row.img_url"></span>
                </template>
            </Table>
            <div class="footerPage">
        <Page
            :page-size-opts="[10, 20, 30, 40, 100, 1000]"
            @on-page-size-change="(e)=>{tab==1?changeSize(e):totalChangeSize(e)}"
            @on-change="(e)=>{tab==1?changePage(e):totalChangePage(e)}"
            :current="tab==1?pageIndex:totalPageIndex"
            show-total
            :total="tab==1?total:totalTotal"
            show-sizer
            :page-size="tab==1?pageSize:totalPageSize"
          />
     </div>
        </TabPane>
    </Tabs>
    </div>
</template>
<script>
export default {
    data(){
        return{
            selectUrl:[],
            headers: { Authorization: localStorage.getItem("token") },
            selectData:[],
            change_type:false,
            types:'',
            searchData:{
               house:'',
               unit:'',
               layer:'',
               number:'',
               house_type:'',
               product_title:"",
               fashion:'',
               url_number:'',
               process_property:''
               },
            houseList:[],
            unitList:[],
            layerList:[],
            numberList:[],
            proxyData:{},
            total:0,
            totalTotal:0,
            pageSize:10,
            pageIndex:1,
            totalPageSize:10,
            totalPageIndex:1,
          tableData:[],
          totalTableData:[],
          type:'',
          reTableColumns:[
            {type:'index',title:'序号',align:'center',minWidth:100},
            {title:'产品名称',align:'center',key:'product_title',minWidth:120},
            {title:'图号',align:'center',key:'url_number',minWidth:120},
            // {title:'规格',align:'center',key:'measure',minWidth:120},
            {title:'饰面',align:'center',key:'process_property',minWidth:120},
            {title:'数量',align:'center',key:'num',minWidth:120},
            {title:'图纸',align:'center',key:'img_url',minWidth:120,slot:'img_url'},
          ],
          tableColumns:[],
          totalTableColumns:[],
          reTotalTableColumns:[
            {type:'index',title:'序号',align:'center',minWidth:100},
            {title:'楼号',align:'center',key:'house',minWidth:120},
            {title:'单元',align:'center',key:'unit',minWidth:120},
            {title:'楼层',align:'center',key:'layer',minWidth:120},
            {title:'房号',align:'center',key:'number',minWidth:120},
            {title:'房型',align:'center',key:'house_type',minWidth:120},
            {title:'产品名称',align:'center',key:'product_title',minWidth:120},
            {title:'左右',align:'center',key:'fashion',minWidth:120,render:(h,params)=>{
                const {row} = params;
                return h('span',{},row.fashion==1?'左':row.fashion==2?'右':'')
            }},
            {title:'图号',align:'center',key:'url_number',minWidth:120},
            {title:'图纸',align:'center',key:'img_url',minWidth:120,slot:'img_url'},
            {title:'饰面',align:'center',key:'process_property',minWidth:120},
            {title:'规格',align:'center',key:'measure',minWidth:120},
            {title:'数量',align:'center',key:'num',minWidth:120},
            {title:'单位',align:'center',key:'units',minWidth:120},
            {title:'家具备注',align:'center',key:'remark',minWidth:120},
          ],
        }
    },
    created(){
         this.types=this.$route.query.type;
         this.change_type=this.$route.query.change_type;
    },
    mounted(){
        this.initData();
    },
    methods:{
        looks(img) {
      const array = [{ img_url: img }];
      this.$previewImg({
        list: array,
        baseUrl: this.$store.state.ip,
        baseImgField: "img_url",
        baseTitleField: "",
        showPrint:true
      });
    },
          uploadError(err) {
      this.$Message.error(err.msg || "上传失败");
    },
    //导入成功
    uploadSuccess(res) {
      if (res.code == 200) {
        this.$Message.success(res.msg || "上传成功");
        this.initData(this.proxyData)
      } else {
        this.$Message.warning(res.msg || "上传失败");
      }
    },
        handleSelect(e){
            console.log(e);
            this.selectData = e;
            this.selectUrl = [];
            e.forEach(v=>{
                this.selectUrl.push(v.url_number)
            })
        },
        handleTabsDel(){
          if(this.selectData.length==0){
            return this.$Message.warning('请先选择数据！')
          }
          let id =[];
          this.selectData.forEach(v=>{
            id.push(v.id);
          })
          this.confirmDelete({
                title:'删除',
                content:'确定删除？',
                then:()=>{
                      this.axios.post('/api/deep_del',{id}).then(res=>{
            if(res.code==200){
                this.$Message.success(res.msg);
                if(this.totalTableData.length==this.selectData.length&&this.pageIndex!=1){
                    this.pageIndex--;
                    
                }
                this.totalInitData(this.proxyData)
            }
           })
                }
            })
        },
        handleDel(row){
              this.confirmDelete({
                title:'删除',
                content:'确定删除？',
                then:()=>{
                      this.axios.post('/api/deep_del',{id:[row.id]}).then(res=>{
            if(res.code==200){
                this.$Message.success(res.msg);
                if(this.totalTableData.length==1&&this.pageIndex!=1){
                    this.pageIndex--;
                    
                }
                this.totalInitData(this.proxyData)
            }
           })
                }
            })
        },
        handleSearch(){
              let obj = JSON.parse(JSON.stringify(this.searchData));
              this.proxyData = obj;
              if(this.type==='1'){
                this.initData(this.proxyData);
              }else{
                this.totalInitData(this.proxyData);
              }
        },
        handleTab(name){
            this.type = name;
        if(name==='1'){
              console.log(typeof name)
            this.initData(this.proxyData);
        }else{
            this.totalInitData(this.proxyData);
        }
        },
        initData(row){
            this.axios.post('/api/deep_details',{order_no:this.$route.query.order_no,order_number:this.$route.query.order_number,order_numbers:this.$route.query.order_numbers,...row,type:1,page_size:this.pageSize,page_index:this.pageIndex}).then(res=>{
              this.tableData = res.data.data;
              if(this.change_type){
                // let columns=[];
                //   columns = [...this.reTableColumns,{title:'下拆单状态',align:'center',minWidth:120,key:'state',render:(h,params)=>{
                //     const {row} = params;
                //     return h('span',{},row.split_state==0?'未下拆单':'已下拆单')
                //   }}] 
                    this.tableColumns = [{type:'selection',align:'center',minWidth:80},...this.reTableColumns];
              }else{
                    this.tableColumns = this.reTableColumns;
              }
              
              this.total = res.data.total;
                this.houseList=res.data.house;
            this.unitList=res.data.unit;
            this.layerList = res.data.layer;
            this.numberList = res.data.number
            })
        },
        totalInitData(row){
 this.axios.post('/api/deep_details',{order_no:this.$route.query.order_no,order_number:this.$route.query.order_number,order_numbers:this.$route.query.order_numbers,...row,type:2,page_size:this.totalPageSize,page_index:this.totalPageIndex}).then(res=>{
             this.totalTableData = res.data.data;
             if(this.change_type){
                  let columns=[];
                if(this.types==0){
                  
                  columns = [...this.reTotalTableColumns,{title:'下拆单状态',align:'center',minWidth:120,key:'state',render:(h,params)=>{
                    const {row} = params;
                    return h('span',{},row.split_state==0?'未下拆单':'已下拆单')
                  }}
                  ] 
                this.totalTableColumns = columns;
                }else{
            columns = [
                {type:'selection',align:'center',minWidth:100},...this.reTotalTableColumns,{title:'下拆单状态',align:'center',minWidth:120,key:'state',render:(h,params)=>{
                    const {row} = params;
                    return h('span',{},row.split_state==0?'未下拆单':'已下拆单')
                  }},{title:'操作',align:'center',minWidth:100,slot:'set'}
                  ] 
                this.totalTableColumns = columns;
                }
             }else{
                this.totalTableColumns = this.reTotalTableColumns;
             }
             this.totalTotal = res.data.total;
            })
        },
        changeSize(e){
               this.pageSize = e;
               this.pageIndex = 1;
               this.initData(this.proxyData);
        },
        changePage(e){
            console.log(111);
              this.pageIndex = e;
              this.initData(this.proxyData);
        },
        totalChangeSize(e){
            this.totalPageSize=e;
            this.totalPageIndex =1;
             this.totalInitData(this.proxyData);
        },
        totalChangePage(e){
            console.log(11)
               this.totalPageIndex = e;
               this.totalInitData(this.proxyData);
        }
    }
}
</script>
<style lang="scss" scoped>
.form_content{
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid gainsboro;
    .form_item{
        width: 250px;
    }
    .item{
        width:200px;
    }
}
.footerPage{
    margin-top: 10px;
    text-align: center;
}
.img_content{
    width:18px;
    height: 18px;
}
</style>