BST_bigScreen/src/views/OrderMannage/BusinessOrderlist/editcopy.vue

<template>
  <div>
        <Toptitle :title='$route.query.type == 1 ? "新增订单" : "编辑订单"'>
            <Button @click="back" type='primary' ghost style="margin-right:10px;">返回</Button>
            <Button @click="showForms = true"  type='primary' style="margin-right:10px;">表单设置</Button>
            <Button type="primary" @click="handleSubmit('infoOrder')">保存</Button>
        </Toptitle>

        <div class="page-edit">
            <!-- 表单项 -->
            <Form ref='infoOrder' inline :label-width="100" :model="info" style="padding:10px 0;" :rules="infoRules">
                <FormItem v-if='formObjs.renovation_type' label="订单类型:" prop='renovation_type'>
                    <RadioGroup v-model="info.renovation_type" class="auto-width">
                        <Radio :label="1">楼栋(工装)</Radio>
                        <Radio :label="2">单户(家装)</Radio>
                    </RadioGroup>
                </FormItem>

                <FormItem v-if='formObjs.order_no' label="订单编号:">
                    <Input disabled v-model="info.order_no" class="auto-width" placeholder="自动生成"/>
                </FormItem>

                <FormItem v-if='formObjs.residential_name' label="项目名称:" prop='residential_name'>
                    <Input v-model="info.residential_name" class="auto-width" placeholder="请输入项目名称"/>
                </FormItem>

                <FormItem v-if='formObjs.client_name' label="客户姓名:">
                    <Input v-model="info.client_name" class="auto-width" placeholder="请输入客户姓名"/>
                </FormItem>

                <FormItem v-if='formObjs.warning_state' label="紧急程度:" prop='warning_state'>
                    <Select clearable class="auto-width" v-model="info.warning_state">
                        <Option label='不急' :value='0'></Option>
                        <Option label='比较急' :value='1'></Option>
                        <Option label='紧急' :value='2'></Option>
                        <Option label='非常急' :value='3'></Option>
                    </Select>
                </FormItem>

                <FormItem v-if='formObjs.salesman' label="业务员:">
                    <Select clearable filterable v-model="info.salesman" class="auto-width">
                        <Option v-for="item of users" :key="item.id" :label="item.nickname" :value="item.id"></Option>
                    </Select>
                </FormItem>

                <FormItem v-if='formObjs.pay_state' label="收款:">
                    <RadioGroup v-model="info.pay_state" class="auto-width">
                        <Radio :label="0">未收款</Radio>
                        <Radio :label="1">已收款</Radio>
                    </RadioGroup>
                </FormItem>

                <FormItem v-if='formObjs.address' label="详细地址:">
                    <Input v-model="info.address" class="auto-width" placeholder="请输入项目名称"/>
                </FormItem>

                <FormItem v-if='formObjs.mobile' label="手机号:" prop='mobile'>
                    <Input v-model="info.mobile" class="auto-width" placeholder="请输入手机号"/>
                </FormItem>
                <FormItem v-if='formObjs.start_time' label="开始日期:" prop='start_time'>
                    <DatePicker v-model="info.start_time" type="date" placeholder="开始日期" class="auto-width"></DatePicker>
                </FormItem>

                <FormItem v-if='formObjs.end_time' label="交付日期:" prop='end_time'>
                    <DatePicker v-model="info.end_time" type="date" placeholder="交付日期" class="auto-width"></DatePicker>
                </FormItem>

                <FormItem v-if='formObjs.predict_price' label="产品总价:">
                    <Input disabled v-model="info.predict_price" class="auto-width" placeholder="自动生成"/>
                </FormItem>

                <FormItem v-if='formObjs.predict_working' label="预估工期:">
                    <Input disabled v-model="info.predict_working" class="auto-width" placeholder="自动生成"/>
                </FormItem>

                <FormItem v-if='formObjs.predict_time' label="预估交付日期:">
                    <Input disabled v-model="info.predict_time" class="auto-width" placeholder="自动生成"/>
                </FormItem>

                <FormItem v-if='formObjs.remark' label="订单备注:">
                    <Input v-model="info.remark" class="auto-width" placeholder="请输入订单备注"/>
                </FormItem>
            </Form>

            <!-- 户型选择 -->
            <div class="items" v-for="(item,index) of info.house" :key="index">
                <div class="items-header">
                    <div class="header-left">
                        <Badge :count="index+1" type="primary"></Badge>
                        <span>户型{{index+1}}</span>
                    </div>
                    <div class="header-right" v-if="info.renovation_type == 1">
                        <Button type="success" style="margin-right:10px;" ghost shape="circle" @click="addHours(info.house)">添加</Button>
                        <Button type="success" style="margin-right:10px;" ghost shape="circle" @click="copyHours(info.house,item)">复制</Button>
                        <Button v-if="info.house.length!=1" type="error" ghost shape="circle" @click="delItems(info.house,index)">删除</Button>
                    </div>
                </div>

                <div class="form-item">
                    <Form inline :label-width="80">
                        <FormItem label="楼幢(楼号)" v-if='info.renovation_type != 2'>
                            <Input v-model="item.house" placeholder="请输入楼幢(楼号)"/>
                        </FormItem>

                        <FormItem label="楼单元" v-if='info.renovation_type != 2'>
                            <Input v-model="item.unit" placeholder="请输入楼单元"/>
                        </FormItem>

                        <FormItem label="楼层" v-if='info.renovation_type != 2'>
                            <Input v-model="item.layer" placeholder="请输入楼层"/>
                        </FormItem>

                        <FormItem label="房间号" v-if='info.renovation_type != 2'>
                            <Input v-model="item.number" placeholder="请输入房间号"/>
                        </FormItem>

                        <FormItem label="选择产品">
                            <Button @click="selectProducts(1,item)" type="primary" style="margin-right:10px;" ghost>选择产品</Button>
                        </FormItem>
                    </Form>
                </div>

                <div class="items-table">
                    <Table :style="'width:'+tableWidth+'px'" border :columns="item.product_top" :data="item.product">
                        <template slot='url' slot-scope='{row}'>
                            <div>
                               <img style="max-width:50px;max-height:50px;" v-if="row.url" :src="$store.state.ip+row.url" alt="">
                            </div>
                        </template>
                        <template slot='drawing' slot-scope='{row}'>
                            <div>
                               <img style="max-width:30px;max-height:30px;" v-if="row.drawing" :src="$store.state.ip+row.drawing" alt="">
                            </div>
                        </template>
                        <template slot='set' slot-scope='{index}'>
                            <div class="table-set">
                                <svg style="font-size:20px" color='#3764FF'  @click="selectProducts(2,item,index)" class="icon icon-nav" aria-hidden="true">
                                    <use xlink:href="#iconbianji"></use>
                                </svg>

                                <svg style="font-size:20px" color='green' @click="selectProducts(3,item,index)" class="icon icon-nav" aria-hidden="true">
                                    <use xlink:href="#iconxiangqing"></use>
                                </svg>

                                <svg v-if="item.product.length>1"  @click="delItems(item.product,index)" class="icon icon-nav" style="font-size:20px" color='red' aria-hidden="true">
                                    <use xlink:href="#iconshanchu"></use>
                                </svg>
                            </div>
                        </template>
                    </Table>
                </div>
            </div>
            <!-- 原材料 -->
            <div class="original-part">
                <Table border :span-method="handleSpan" :columns="originalTableColumns" :data="originalData"></Table>
            </div>
        </div>       
        <!-- 选择产品弹层 -->
        <Modal :width="1200" class-name="vertical-center-modal" title="选择产品" v-model="showProduct" @on-visible-change='modalVisibleChange'>
            <div class="nav-product">
                <Tag type="border" v-for="(item,idx) in modalArray" :key="idx">
                    <a @click="jump('#product_'+idx)" >{{item.title}}</a>
                </Tag>
            </div>
            <div class="modal-scroll">
                <div class="modal-items" :id="'product_'+idx" v-for="(item,idx) in modalArray" :key="idx">
                    <Form  inline :model="item" :rules="productRules" ref='productModel'>
                        <FormItem label="选择产品" prop='product_id'>
                            <Select filterable clearable label-in-value size='small' :disabled='productType == 3 ? true : false' v-model="item.product_id" @on-change='changeProduct($event,idx)' style="width:186px;">
                                <Option v-for="item of productList" :tag='item.img_url' :key="item.id" :label="item.title" :value='item.id'></Option>
                            </Select>
                        </FormItem>

                        <FormItem label="位置" prop='position'>
                            <Input size='small' :disabled='productType == 3 ? true : false' v-model="item.position" placeholder="请输入位置"/>
                        </FormItem>

                        <FormItem label="计量单位">
                            <Input size='small' disabled v-model="item.unit" placeholder="请输入计量单位"/>
                        </FormItem>

                        <FormItem v-if='item.same_process' label="工艺属性">
                            <div style="display:flex;width:100%;position:relative;top:5px;">
                                <Select @on-change="changeProcess($event,item.parts,vc,idx)" v-for="(same_process,vc) of item.same_process" :key="same_process.id" v-model="same_process.select_id" size='small'>
                                    <Option v-for='same_item of same_process.option' :key='same_item.id' :label="same_item.title" :value="same_item.id"></Option>
                                </Select>
                            </div>
                        </FormItem>

                        <FormItem v-for="(measuring,measuring_key) in item.measuring" :label="measuring.title" :key="measuring_key+11">
                            <Input @on-blur="blurMeasur(item,idx)" :disabled='productType == 3 ? true : false' :placeholder="'请输入'+measuring.title" size='small' v-model="item[measuring.key]"/>
                        </FormItem>

                        <FormItem v-for="(remake,remake_key) in item.product_remake" :label="remake.title" :key="remake_key+31">
                            <Input  placeholder="请输入" size='small' v-model="item[remake.title]"/>
                        </FormItem>

                        <FormItem label="议价(元)">
                            <Input @on-blur="changePrice(item,2,$event)" type="number" size='small' :disabled='productType == 3 ? true : false' v-model="item.real_price" placeholder="请输入议价"/>
                        </FormItem>

                        <FormItem label='产品价格'>
                            <Input  size='small' disabled v-model="item.price" placeholder="自动生成"/>
                        </FormItem>

                        <FormItem label="附加价格">
                            <Input @on-blur="changePrice(item,1,$event)" type="number" size='small' :disabled='productType == 3 ? true : false' v-model="item.attach_price" placeholder="请输入议价"/>
                        </FormItem>

                        <FormItem v-for="(outh,outh_key) in item.outh" :label="outh.title" :key="outh_key+21">
                                <img v-if="outh.key=='img'||outh.key=='url'" @click="showPreview(item,outh.key)" style="max-width:30px;max-height:30px;top:5px;position:relative;cursor:pointer;" :src="$store.state.ip+outh.value">
                            <Input v-if="outh.key!='img'&&outh.key!='url'&&outh.key!='lock'" disabled placeholder="自动生成" size='small' v-model="outh.value"/>

                            <Select label-in-value @on-change="changeLock($event,item,idx)"  size="small" clearable style="width:186px;" v-if="outh.key=='lock'" v-model="item[outh.key]">
                                <Option v-for="luck of lock_list" :key='luck.id' :tag='luck.price' :value="luck.id" :label="luck.title"></Option>
                                <Option :value="0" label="无"></Option>
                            </Select>
                        </FormItem>

                        <FormItem label='备注'>
                            <Input size='small'  v-model="item.remake" placeholder="请输入备注"/>
                        </FormItem>

                    </Form>
                    <Button size='small' type="primary" style="margin-bottom:10px;" @click="resetShowTable(item)">{{item.showTable ? '收起' : '定制'}}</Button>
                    <Table v-if="item.showTable" stripe border :columns="parts_Columns" :data="item.parts">
                        <template slot='ProcessCombination' slot-scope="{row}">
                            <div>
                                {{row.process_attribute}}
                            </div>
                        </template>
                        <template slot='Costum' slot-scope="{row}">
                            <div>
                                <span v-for="(column,_key) of row.custom_route" :key="column.id">{{column.title+(_key==row.custom_route.length-1 ? '' : '/')}}</span>
                            </div>
                        </template>
                        <template slot='set' slot-scope='{row,index}'>
                            <div>
                                <Poptip :ref='"popTip"+idx+index' placement="left-start" @on-popper-hide='popperHide'>
                                    <Button type='primary' size='small'>自定义工艺属性</Button>
                                    <div slot="content">
                                        <div class="hierarchy" v-for="(item,keys) of coumstList" :key="item.id">
                                            <span>{{item.name||item.title}}(单选)：</span>
                                            <div class="radio-g">
                                                <div @click="setRadioChange(item,_item,keys)" :class="['radio-us',_item.show ? 'radio-us-foc' : '']" v-for='_item of item.cld' :key="_item.id">{{_item.title}}</div>
                                            </div>
                                        </div>
                                        <div class="pop-footer">
                                            <Button @click="cancelCoustom(index,idx)" style='margin-right:10px'>取消</Button>
                                            <Button @click="saveCosutom(row,index,item,idx)" style='margin-left:10px' type='primary'>确定</Button>
                                        </div>
                                    </div>
                                </Poptip>
                            </div>
                        </template>
                    </Table>
                    <div class="modal-footer-button">
                        <Button @click="copyProduct(modalArray,idx)" type="warning" style="margin-right:10px;" ghost shape="circle">复制产品</Button>
                        <Button  @click="addParts(item)" type="success" style="margin-right:10px;" ghost shape="circle">添加</Button>
                        <Button v-if='modalArray.length!=1' @click="delItems(modalArray,idx)" type="error" ghost shape="circle">删除</Button>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <Button @click="cancelModal">取消</Button>
                <Button @click="handleProductSubmit('productModel')" type="primary">确定</Button>
            </div>   
        </Modal> 

        <Modal v-model="showForms" @on-ok="postForms(1)" class-name="vertical-center-modal" title='表单设置'>
            <CheckboxGroup v-model="forms_list">
                <Checkbox label="renovation_type">订单类型</Checkbox>
                <Checkbox label="order_no">订单编号</Checkbox>
                <Checkbox label="residential_name">项目名称</Checkbox>
                <Checkbox label="client_name">客户姓名</Checkbox>
                <Checkbox label="warning_state">紧急程度</Checkbox>
                <Checkbox label="salesman">业务员</Checkbox>
                <Checkbox label="pay_state">收款</Checkbox>
                <Checkbox label="address">详细地址</Checkbox>
                <Checkbox label="mobile">手机号</Checkbox>
                <Checkbox label="start_time">开始日期</Checkbox>
                <Checkbox label="end_time">交付日期</Checkbox>
                <Checkbox label="predict_price">产品总价</Checkbox>
                <Checkbox label="predict_working">预估工期</Checkbox>
                <Checkbox label="predict_time">预估交付日期</Checkbox>
                <Checkbox label="remark">订单备注</Checkbox>
            </CheckboxGroup>
        </Modal>
    
  </div>
</template>

<script>
export default {
    data(){
        const validateMobile = function(rule,value,fn){
            if(!(/^1[3456789]\d{9}$/.test(value))){ 
                fn(new Error(' '))
                return false
            }
            fn()
        };
        return {
            formObjs:{
                renovation_type:1,
                order_no:1,
                residential_name:1,
                client_name:1,
                warning_state:1,
                salesman:1,
                pay_state:1,
                address:1,
                mobile:1,
                start_time:1,
                end_time:1,
                predict_price:1,
                predict_working:1,
                predict_time:1,
                remark:1,
            },
            formObjs_reset:{
                renovation_type:1,
                order_no:1,
                residential_name:1,
                client_name:1,
                warning_state:1,
                salesman:1,
                pay_state:1,
                address:1,
                mobile:1,
                start_time:1,
                end_time:1,
                predict_price:1,
                predict_working:1,
                predict_time:1,
                remark:1,
            },
            showForms:false,
            forms_list:[],
            type:1,
            id:this.$route.query.id,
            modalArray:[],
            productList:[],
            coumstList:[],
            tableWidth:null,
            currentIndex:null,
            proxyObj:{},
            _proxyObj:{},
            productType:1,
            watchComputed:null,
            users:[],
            coustomArray:[],
            lock_list:[],
            showProcessAttrabut:false,
            headers:{'Authorization':localStorage.getItem('token')},
            originalTableColumns:[
                {title:'原材料名称',align:'center',key:'title'},
                {title:'原材料库存',align:'center',key:'stock'},
                {title:'所需原材料数量',align:'center',key:'num'},
                {title:'原材料单价',align:'center',key:'price'},
                {title:'规格型号',align:'center',key:'specifications'},
                {title:'原材料单位',align:'center',key:'unit'},
                {title:'原材料预估费用',align:'center',key:'num_price'},
            ],
            Top:[],
            parts_Columns:[
                {title:'部件',key:'title',align:'center'},
                {title:'工艺组合名称',key:'ProcessCombination',align:'center',minWidth:100},
                {title:'自定义组合名称',key:'',align:'center',slot:'Costum',minWidth:100},
                {title:'指导报价',key:'price',align:'center'},
                {title:'部件测量数据',key:'measur',align:'center'},
                {title:'预估工时',key:'maber_time',align:'center',
                    render:(h,params)=>h('span',{},`${params.row.maber_time}小时`)
                },
                {title:'操作',key:'title',align:'center',slot:'set'},
            ],
            originalData:[],
            tableColumns:[
                {title:'产品类型',align:'center',key:'product_type',minWidth:100,fixed:'left'},
                {title:'产品名称',align:'center',key:'title',minWidth:150},
                {title:'产品型号',align:'center',key:'model',minWidth:100},
                {title:'测量数据',align:'center',key:'measure',minWidth:100},
                {title:'位置',align:'center',key:'position',minWidth:100},
                {title:'图纸',align:'center',minWidth:80,key:'url',slot:'url'},
                {title:'图号',align:'center',key:'url_number',minWidth:150},
                {title:'议价(元)',align:'center',key:'real_price',minWidth:100},
                {title:'预估工时',align:'center',key:'limit_time',minWidth:200},
                {title:'操作',align:'center',slot:'set',fixed:'right',width:'150'},
            ],
            tableData:[],
            showProduct:false,
            infoRules:{
                residential_name:[{required: true,message:' ',trigger:'blur'}],
                client_name:[{required: true,message:' ',trigger:'blur'}],
                warning_state:[{required: true,message:' '}],
                pay_state:[{required: true,message:'请选择'}],
                address:[{required: true,message:' ',trigger:'blur'}],
                mobile:[{required: true,validator: validateMobile, trigger: 'blur'}],
                start_time:[{required: true,message:' '}],
                end_time:[{required: true,message:' '}],  
                renovation_type:[{required: true,message:'请选择订单类型'}]
            },
            productRules:{
                position:[{required: true,message:' ',trigger:'blur'}],
                real_price:[{required: true,message:' ',}],
                product_id:[{required: true,message:' ',}]
            },
            info:{
                residential_name:'',//项目名称
                order_no:'',//订单号
                renovation_type:1,//订单类型
                client_name:'',//客户名称
                address:'',//
                mobile:'',//手机号
                start_time:new Date().toLocaleDateString().replace(/\//g,"-"),//开始时间
                end_time:'',//结束时间
                pay_state:'',//是否支付
                warning_state:0,//是否紧急
                predict_time:'',//预估交付日期
                salesman:this.$store.state.userInfo.id||null,//业务员
                predict_price:null,//预估工价,
                predict_working:null,//预估工期
                remark:'',
                house:[
                    {
                        house:null,
                        unit:null,
                        layer:null,
                        number:null,
                        product_top:[],
                        product:[
                            {
                                product_id:null,
                                attach_price:0,
                                product_name:'',
                                measure:'',
                                price:'',
                                real_price:'',
                                type:null,
                                unit:'',
                                img:'',
                                drawing:'',
                                model:'',
                                url_number:'',
                                url:'',
                                route_id:'',
                                limit_time:null,
                                parts:[],
                                showTable:false,
                            }
                        ],
                    },
                ]
            },
        }
    },

    watch:{
        'info.renovation_type':{
            handler(e){
                if(e == 2){
                    this.info.house.map(v=>{
                        v.house = '1';
                        v.layer = '1';
                        v.unit = '1';
                        v.number = '1';
                    })
                }
            }
        }
    },
    
    created(e){
        this.tableWidth = window.innerWidth-300;
        this.getUsers()
        this.type = this.$route.query.type
        this.axios('/api/order_get_forms').then(res=>{
            if(res.code == 200){
                this.forms_list = res.data
                this.postForms(0)
            }
        })
        this.getCoumstList()  
        this.getLockList()
    },
    mounted(){
        if(this.id){
            if(this.id){
                this.info = {}
            }
            this.getDate(this.id)
        }
        this.getProducts()
        addEventListener('resize',(e)=>{
            this.tableWidth = e.target.innerWidth - 300;
            this.$forceUpdate()
        })
        
    },
    methods:{
        back(){
            this.$router.go(-1)
        },
        postForms(n){
            let result = []
            this.forms_list.map(rows=>{
                for(let i in this.formObjs_reset){
                    if(i == rows){
                        result.push(i)
                    }
                }
            })
            const news_forms = {}
            result.forEach(element=>{
                news_forms[element] = 1
            })
            this.formObjs = news_forms
            if(n){
                this.axios.post('/api/order_set_form',{result:this.forms_list,all:Object.keys(this.formObjs_reset)}).then(res=>{
                    if(res.code == 200){
                        this.$Message.success(res.msg)
                    }
                })
            }
            
        },
        postData(){
            let sendData = JSON.parse(JSON.stringify(this.info));
            let op = this.type == 1 ? 'add' : 'edit';
            try{
                sendData.start_time = new Date(sendData.start_time).toLocaleDateString().replace(/\//g,"-")
                sendData.end_time = new Date(sendData.end_time).toLocaleDateString().replace(/\//g,"-")
            }catch(e){}
            let params = {op:op,detail:sendData}
            this.axios.post('/api/order_save',params).then(res=>{
                if(res.code == 200){
                    this.$Message.success(res.msg)
                    this.back()
                }
            })
        },
        getDate(id){
            this.axios('/api/order_detail',{params:{id:id}}).then(res=>{
                res.data.predict_working = `${(res.data.predict_working/8).toFixed(1)}天`
                this.info = res.data;
                this.forms_list = res.tableSet||[]
                this.tapProduct()
            })
        },
        selectProducts(n,row,q){
            this.productType = n;
            this.showProduct = true;
            this.proxyObj = row;
            this.modalArray = JSON.parse(JSON.stringify(row.product)) || [];
        },
        delItems(row,n){
            row.splice(n,1)
            try{
                row[n].product_id ? this.tapProduct() : ''
            }catch(e){}
        },
        addHours(row){
            row.push({
                house:null,
                unit:null,
                layer:null,
                number:null,
                product:[{product_id:''}],
            })
        },
        getProducts(){
            this.axios('/api/product').then(res=>this.productList = res.data.data)
        },
        changeProduct(row,n,ext){
            let id = row ? row.value : this.productList[0].id
            this.axios('/api/order_product_detail',{params:{id:id}}).then(res=>{
                let _this = this;
                let modalData = this.modalArray[n]
                modalData.product_type = res.data.detail.product_type||''
                modalData.unit = res.data.detail.unit||''
                modalData.model = res.data.detail.model || ''
                modalData.price = modalData.price ? modalData.price : 0;
                res.data.outh.map(v=>{
                    if(v.key == 'img'){
                        modalData.img = v.value
                    }
                })
                if(res.code == 200){
                    if(!ext){
                        if(row){modalData.title = row.label||''}
                        modalData.measuring = res.data.measuring;
                        modalData.outh = res.data.outh;
                        modalData.product_remake = res.data.product_remake;
                    }
                    let result = res.data.intermediate.same_process[0].reduce((pre,cur)=>{
                        return pre.concat([{option:[],select_id:null}])
                    },[])
                    // let result = [{option:[],select_id:null},{option:[],select_id:null},{option:[],select_id:null}]
                    res.data.intermediate.same_process.map((cur)=>{
                        cur.forEach((i,index)=>{
                            try{
                                const curIdx = result[index].option.findIndex(q=>i.id == q.id)
                                curIdx<0 ? result[index].option.push(i) : ''
                            }catch(e){
                                console.log('数据异常')
                            }
                            
                        })
                    })
                    modalData.parts = res.data.intermediate.parts
                    result.forEach((element,index)=>{
                        element.select_id = element.option.length == 1 ? element.option[0].id : ''
                        element.title = element.option.length == 1 ? element.option[0].title : ''
                        if(element.select_id){
                            this.changeProcess(element.select_id,modalData.parts,index,n)
                        }
                        
                    })
                    modalData.same_process = result;
                    modalData.parts.map(v=>{
                        v.process_ids = v.process_ids || []
                        v.maber_time = v.maber_time || 0
                        v.price = v.price || 0
                        v.measur = v.measur || 0;
                        v.route_list.map(q=>q.select=false)
                    })
                    this.Top = res.data.product_top;
                    const index = this.Top.findIndex(v=>v.key == 'img')
                    this.Top[index] = {...this.Top[index],render:(h,params)=>h('img',{
                        attrs:{
                            src:_this.$store.state.ip+params.row.img||'',
                            style:'max-width:30px;max-height:30px;'
                        }
                    },)}
                    this.Top.forEach(element=>{
                        if(element.key == 'drawing'){
                            modalData.drawing = element.value
                        }
                    })
                    this.$forceUpdate()
                }
            })
        },
        addParts(row){
            this.modalArray.push({
                product_id:null,
                product_name:'',
                drawing:'',
                attach_price:0,
                measure:'',
                price:'0',
                real_price:'',
                type:null,
                unit:'',
                img:'',
                model:'',
                url_number:'',
                url:'',
                route_id:'',
                limit_time:null,
                parts:[],
                showTable:false,
                process_attributes:''
            })
        },
        saveParts(){
            this.modalArray.map(v=>{//计算预估工期，指导报价
         
                v.process = v.same_process.reduce((pre,cur,n)=>{
                    if(cur.title){
                        return `${pre}${cur.title}${n == v.same_process.length-1 ? '' : '/'}`
                    }else{
                        cur.option.forEach(element=>cur.select_id == element.id ? cur.title = element.title : '')
                        return `${pre}${cur.title}${n == v.same_process.length-1 ? '' : '/'}`
                    }
                },'')
                try{
                    v.limit_time = v.parts.reduce((pre,cur)=>pre+Number(cur.maber_time),0)
                    v.price = v.parts.reduce((pre,cur)=>pre+cur.price*1||0,0)
                    if(v.measure){
                        v.measure = v.measure.reduce((pre,cur)=>pre+=(cur+=(v[cur]||'')+'*'),'')
                        v.measure = v.measure.substr(0,v.measure.length-1,'')
                    }else{
                        v.measure = v.measuring.reduce((pre,cur,n)=>`${pre}${n == 0 ? '' : '*'}${cur.key}`,'')
                    }
                }catch(e){}
            })
            this.proxyObj.product = this.modalArray;
            if(this.Top.length>0){
                this.proxyObj.product_top = this.Top;
            }
            this.proxyObj.product_top.map(v=>{v.width=200,v.align = 'center'})
            const {house} = this.info
            const predict_time_array = house.reduce((pre,cur)=>pre.concat(cur.product),[])
            this.info.predict_working = predict_time_array.reduce((pre,cur)=>{
                return pre+=cur.limit_time
            },0)
            this.info.predict_working = `${(this.info.predict_working/8).toFixed(1)}天`
            this.$forceUpdate()
            this.tapProduct()
            this.showProduct = false;
        },
        cancelModal(){
            this.modalArray = [{}]
            this.showProduct = false;
        },
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if(valid){
                    this.postData()  
                }
            })
        },
        handleProductSubmit(name){
            const result = []
            for(let i = 0;i<this.$refs[name].length;i++){
                this.$refs[name][i].validate((valid) => result.push(valid))
            }
            const flag = result.every(row=>row)
            if(flag){this.saveParts()}
        },
        tapProduct(){
            let product_id = '';
            let measure = '';
            let house = ''
            this.info.house.map(v=>{
                product_id += v.product.reduce((pre,cur,index)=>pre+=(cur.product_id+'|'+(String(v.house).split(',').length||1)*(String(v.unit).split(',').length||1)*(String(v.layer).split(',').length||1)*(String(v.number).split(',').length||1)+','),'')
                measure += v.product.reduce((pre,cur,index)=>pre+=(cur.measure+','),'')
            })
            product_id = product_id.substr(0,product_id.length-1,'')
            const productInfo_arr = product_id.split(',')
            let _id = '',_num = ''
            productInfo_arr.map((v)=>{
                let arr = v.split('|')
                _id+=`${arr[0]},`
                _num+=`${arr[1]},`
            })
            measure = measure.substr(0,measure.length-1,'')
            _id = _id.substr(0,_id.length-1,'')
            _num = _num.substr(0,_num.length-1,'')
            house = house.substr(0,house.length-1,'')
            this.axios('/api/house_detail_material',{params:{product_id:_id,measure:measure,num:_num}}).then(res=>{
                if(res.code == 200){
                    this.originalData = res.data.data;
                    this.originalData.push({end:true,stock:res.data.num,title:'合计'})
                }
            })
        },
        handleSpan ({ row, column, rowIndex, columnIndex }) {
            if(row.end){
                return [1,6]
            }
        },
        mapRow(n){
            this.currentIndex = n;
        },
        successUpload(responce){
            let url = responce.data.url;
            this.modalArray[this.currentIndex].url = url
        },
        getUsers(){
            this.axios('/api/user',{params:{type:1}}).then(res=>this.users = res.data.data)
        },
        getCoumstList(){
            this.axios('/api/bpp_list').then(res=>{
                res.data.map(v=>{
                    if(v.select){
                        v.cld.map(z=>{
                            v.select.map(k=>{
                                z.show = k == z.id ? true : false
                            })
                        })
                    }else{
                        v.cld.map(v=>v.show = false)
                    }
                })
                this.coumstList = res.data;
            })
        },
        setRadioChange(parent,child,n){
            parent.cld.map(v=>v.show = false)
            parent.select == child.id ?  child.show = true : ''
            child.show = true
            this.coustomArray[n] = child
            parent.select = child.id
            this.$forceUpdate()
        },

        popperHide(e){
            this.coustomArray = []
            this.getCoumstList()
        },
        saveCosutom(row,index,item,idx){
            row.route_list.map(v=>v.select=false)
            row.process_attribute = ''
            row.custom_route = JSON.parse(JSON.stringify(this.coustomArray));
            row.maber_time = 0;
            let removePrice = row.price;
            row.price = 0;
            this.axios.post('/api/get_process_route',{part_id:row.id,result:this.coustomArray.reduce((pre,cur)=>pre.concat(cur.id),[])}).then(res=>{
                if(res.code == 200){
                    row.router_id = res.data 
                }
            })
            this.$refs[('popTip'+idx+index)][0].cancel()
            this.modalArray[idx].same_process = null;
            this.modalArray[idx].parts[index] = row;
            this.modalArray[idx].price = parseInt(this.modalArray[idx].price) - removePrice
            this.$forceUpdate()
        },
        cancelCoustom(index,idx){
            this.$refs[('popTip'+idx+index)][0].cancel()
        },
        blurMeasur(row,idx){
            const mapReds = Object.values(row.measuring)
            const result = mapReds.reduce((pre,cur)=>pre.concat(cur.key),[])
            this.modalArray[idx].measure = result;
            this.$forceUpdate()
            row.parts.map(v=>{
               const asy = result.reduce((pre,cur)=>pre.replace(cur,(cur+=(row[cur]||'0'))),v.formula)
               const lettersReg = /[a-z,A-Z]/g
               const notLetterReg = /[^a-z,A-Z]/g
               let valus = asy.split('*')
               let mapresult = ''
               valus.map(item=>{
                   let letters = eval(item.replace(lettersReg,''))
                   let not_l = item.replace(notLetterReg,'')
                   mapresult+=`${not_l}${letters}*`
               })
               v.measur = mapresult.substr(0,mapresult.length-1,'')
            })
        },
        copyProduct(maprows,item){
            let rows = JSON.parse(JSON.stringify(maprows[item]));
            rows.position = ''
            const ms = rows.measuring.map(v=>v.key)
            ms.forEach((element) => rows[element] = '')
            maprows.push(rows)
        },
        getLockList(){
            this.axios('/api/lock_list').then(res=>this.lock_list = res.data)
        },
        changeLock(value,row,idx){
            if(row.old_lock_price){
                row.price = parseInt(row.price) - row.old_lock_price
            }
            row.old_lock_price = parseInt(value.tag||'0');
            row.price = parseInt(row.price)+parseInt(value.tag||'0')
            this.modalArray[idx] = row;
            this.$forceUpdate()
        },
        jump(querry){
            document.querySelector(querry).scrollIntoView({
                behavior: "smooth", // 平滑过渡
                block: "start" // 上边框与视窗顶部平齐。默认值
            })
        },
        resetShowTable(row){
            row.showTable = !row.showTable
            this.$forceUpdate()
        },
        changeProcess(e,parts,n,idx){
            this.modalArray[idx].price = 0;
            parts.map(element=>{
                if(!element.process_ids){
                    element.process_ids = []
                }
                element.process_ids[n] = e
                let router_id = element.process_ids.join(',')
                if(element.process_ids.length >= 1){//开始匹配工艺路线
                    element.route_list.map(v=>{
                        const id = v.pp_ids.join(',')
                        if(router_id == id){
                            element.router_id = v.id
                            element.ProcessCombination = v.title
                            this.axios('/api/get_route_select',{params:{route_id:element.router_id}})
                            .then(res=>{
                                if(res.code == 200){
                                    Object.assign(element,res.data)
                                    this.modalArray[idx].price += Number(res.data.price||0)
                                    this.$forceUpdate()
                                }
                            })
                        }
                    })
                }
            })
            
        },
        changePrice(row,type,e){
            const val = e.target.value
            if(val){
                if(type == 2){
                    if(row.price){
                        row.attach_price = row.real_price - row.price
                    }else{
                        row.attach_price = 0
                    }
                }else{
                    row.real_price = row.attach_price*1+row.price*1
                }
            }else{

            }
        },
        showPreview(row,type){
            this.axios('/api/orders_img',{params:{id:row.product_id,type:type == 'img' ? 1 : 2}}).then(res=>{
                if(res.code == 200){
                    row.imgs = res.data
                    this.$previewImg({
                        list:row.imgs,
                        baseUrl:this.$store.state.ip,
                        baseImgField:'img_url',
                        baseTitleField:''
                    })
                }
            })
        },
        modalVisibleChange(e){
            if(!e){
                this.cancelModal()
            }
        },
        copyHours(array,row){
            array.push(JSON.parse(JSON.stringify(row)))
        }
                                    
    }
}
</script>

<style lang='scss' scoped>
.page-edit{overflow: hidden;overflow-y: auto;position:relative;top:20px;height:85%;padding-bottom: 20px;;}
.auto-width{width:200px;}
.items{box-shadow: 0 2px 7px rgba(0,0,0,.15);border-color: transparent;position: relative;border-radius:5px;margin-top:20px;
    .items-header{padding:10px 20px;display:flex;justify-content: space-between;align-items: center;border-bottom:1px solid #F4F4F4;
        .header-left{span{margin-left:10px;}}
    }
    .form-item{padding:20px;}
}
.modal-scroll{height:600px;overflow: scroll;}
.modal-items{border-radius:5px;border:1px solid #DEDEDE;padding:0px 10px;margin-bottom:40px;}
.modal-footer-button{display: flex;justify-content:flex-end;padding:10px 0;}
.items-table{width:100%;overflow-x: scroll;}
/deep/ .ivu-table-wrapper{overflow:visible;color:red;}//穿透iview
.original-part{padding-top:20px;}
.column-li{display: flex;justify-content: space-between;align-items: center;padding: 2px 5px;}
.hierarchy{
    .radio-g{padding:10px 0;display:flex;
        .radio-us{background: #F4F5F7;;padding:5px 20px;margin-right:18px;color:#999999;border-radius:15px;border:1px solid #DEDEDE;cursor:pointer;}
        .radio-us-foc{color:#3764FF;background:#fff;border:1px solid #3764FF;}
    }
}
.nav-product{width:100%;height:50px;display: flex;align-items: center;}
</style>