BST_bigScreen/src/views/BidSystem/DeepeningOrder/changeRecord.vue

<template>
    <div>
        <FullPage 
        title='变更记录' 
        :list='list' 
        @init='init' 
        :logList='logList'
        @searchData='init' 
        @changePage='changePage'
        :tableColums='tableColums'
        :tableData='tableData'
        :pageIndex='pageIndex'
        :total='total'
        >   
            <div slot='titleButton'>
                <Button @click="back" type='primary' ghost style="margin-right:10px;">返回</Button>
            </div>
            <template slot='set' slot-scope='{row}'>
                <div>
                   <a style="margin:0 5px;" @click="goPage(row)">详情</a>
                </div>
            </template>
             <template slot="urlSet" slot-scope="{ index }">
            <div>
              <img
                @click="looks(tableData[index].img)"
                v-for="(el, idx) in tableData[index].img"
                :key="idx"
                :src="$store.state.ip + el"
                alt=""
                style="max-width: 40px; max-height: 40px"
              />
            </div>
          </template>
        </FullPage>
    </div>
</template>

<script>
export default {
    data(){
        return {
            type:1,
            order_no:null,
            log_List:[],
            list:[
                {title:'区域编码',name:'Input',serverName:'area_num',placeholder:'请输入区域编码',value:'' },
                {title:'区域名称',name:'Input',serverName:'area_title',placeholder:'请输入区域名称',value:''},
                 {title:'产品名称',name:'Input',serverName:'product_title',placeholder:'请输入产品名称',value:''},
                  {title:'图号',name:'Input',serverName:'url_number',placeholder:'请输入图号',value:''}
            ],
            tableColums:[
                {title:'区域编码',align:'center',width:'200',key:'area_num'},
                {title:'区域名称',align:'center',width:'200',key:'area_title'},
                {title:'单位',align:'center',width:'200',key:'area_unit'},
                {title:'工程量',align:'center',width:'200',key:'quantity'},
                {title:'户型',align:'center',width:'200',key:'house_type'},
                {title:'区域备注',align:'center',width:'200',key:'area_remark'},
                {title:'产品名称',align:'center',width:'200',key:'product_title'},
                {title:'规格',align:'center',width:'200',key:'measure'},
                {title:'工艺属性',align:'center',width:'200',key:'process_property'},
                {title:'图纸',align:'center',width:'200',key:'img', slot: "urlSet"},
                {title:'左右式',align:'center',width:'200',key:'fashion'},
                {title:'图号',align:'center',width:'200',key:'url_number'},
                {title:'产品备注',align:'center',width:'200',key:'product_remark'},
                {title:'变更时间',align:'center',width:'200',key:'crt_time'},
                {title:'操作',align:'center',width:'200',key:'plan_start_time',slot:'set'}
            ],
            tableData:[],
            pageIndex:1,
            total:0,
            selects:[],
        }
    },
    computed:{
          logList(){
              return [
                { key: "订单号:", value: this.log_List.order_no },
                { key: "小区名称:", value: this.log_List.residential_name },
                { key: "客户姓名:", value:this.log_List.client_name },
                { key: "紧急程度:", value: this.log_List.warning_name },
                { key: "收款:", value: this.log_List.pay_state==0?'未收款':'已收款' },
                { key: "详细地址:", value: this.log_List.address },
                { key: "手机号:", value: this.log_List.mobile },
                { key: "开始日期:", value:this.log_List.start_time },
                { key: "交付日期:", value: this.log_List.end_time },
                { key: "业务员:", value: this.log_List.salesman_name },
                { key: "订单类型:", value: "工装" },
                { key: "备注:", value: this.log_List.remark }
                ]
          }
    },
    created(){
    },
    methods:{
      looks(arr) {
      // const array = [{ img_url: img }];
      const array = arr.map((v) => {
        return { img_url: v };
      });
      console.log("array :>> ", array);
      this.$previewImg({
        list: array,
        baseUrl: this.$store.state.ip,
        baseImgField: "img_url",
        baseTitleField: "",
      });
    },
        init(row){
            console.log(row)
            row.order_no = this.$route.query.order_no
            this.getData(row)
        },
        getData(row){
            this.axios('/api/change_area_product_list',{params:row}).then(res=>{
                if(res.code == 200){
                    this.tableData = res.data.data;
                    this.log_List = res.data.detail
                    this.log_List.start_time = this.func.replaceDateNoHMS(this.log_List.start_time)
                    this.log_List.end_time = this.func.replaceDateNoHMS(this.log_List.end_time)
                    this.tableData.forEach(item=>{
                        item.crt_time = this.func.replaceDateNoHMS(item.crt_time)
                    })
                }
            })
        },
        back(){
            this.$router.go(-1)
        },
        goPage(row){
            this.$router.push({
                path:'/cms/BidSystem/DeepeningOrder/changeRecordDetail',
                query:{
                 contact_order_no:row.contact_order_no,
                 order_no:this.$route.query.order_no
                }
            })
        },
        changePage(e){},
    }
}
</script>

<style lang="scss" scoped>
.log-list{display: flex;flex-wrap:wrap;padding:10px 0;}
</style>