ngds/frontendEle/src/views/user/dec.vue

<template>
    <div v-loading="loading">
        <div class="white-box">
            <el-form ref="form"  label-width="250px" class="form-page">
                <div class="hr-tip"><span>账号信息</span></div>

                <el-form-item label="会员编号">
                    <el-input v-model="form.insertUserName"></el-input>
                </el-form-item>
                <el-form-item>
                    <template slot="label">

                        实时报单级别
                    </template>
                    <el-select v-model="form.decLv" placeholder="请选择报单级别" @change="selectOne($event)">
                        <el-option v-for="(item,index) in allDecLevel" :key="index" :label="item.LEVEL_NAME"
                                   :value="item.ID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="报单中心编号">
                    <el-input v-model="form.decUserName"></el-input>
                </el-form-item>


                <el-form-item>
                    <template slot="label">

                        报单方式二选一
                    </template>
                    <el-tabs type="border-card" v-model="decWay" style="position: relative;width: 600px;">
                        <el-tab-pane name="1">
                            <span slot="label">报单级别套餐</span>
                            <el-table class="table-box" :data="_tableData" stripe style="width: 100%;" highlight-current-row @current-change="handleCurrentChange">
                                <el-table-column
                                        type="index"
                                        width="50">
                                </el-table-column>
                                <el-table-column label=" " width="50">
                                    <template slot-scope="scope">
                        <span class="el-checkbox__input" :class="{'is-checked':scope && scope.row && currentRow && scope.row.ID==currentRow.ID}">
                          <span class="el-checkbox__inner">
                            </span>
                          <input type="checkbox" aria-hidden="false" class="el-checkbox__original" value="">
                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="套餐名称" prop="PACKAGE_NAME">

                                </el-table-column>
                                <el-table-column label="套餐金额" prop="AMOUNT">

                                </el-table-column>
                                <el-table-column label="套餐PV" prop="PV">
                                    <template>

                                    </template>
                                </el-table-column>
                                <!--<el-table-column label="所属报单级别ID" prop="LEVEL_ID">-->
                                    <!--<template>-->

                                    <!--</template>-->
                                <!--</el-table-column>-->
                                <el-table-column label="所属报单级别" prop="LEVEL_NAME">
                                    <template>

                                    </template>
                                </el-table-column>
                                <el-table-column label="套餐内容" prop="PACKAGE_CONTENT">
                                    <template >

                                    </template>
                                </el-table-column>

                            </el-table>
                            <!-- <el-form-item>
                               <el-button type="primary" @click="onclock" :loading="submitButton">保存</el-button>
                             </el-form-item>-->
                        </el-tab-pane>
                        <el-tab-pane label="商品报单" name="2">
                            <el-table class="table-box" v-if="numList.length > 0" :data="tableDatas" stripe style="width: 100%;" highlight-current-row  @selection-change="handleSelectionChange">
                                <el-table-column
                                        type="selection"
                                        width="55">
                                </el-table-column>

                                <el-table-column label="商品名称" prop="GOODS_NAME">

                                </el-table-column>
                                <el-table-column label="商品编号" prop="GOODS_NO">

                                </el-table-column>
                                <el-table-column label="卖价" prop="SELL_PRICE">

                                </el-table-column>
                                <el-table-column label="PV价格" prop="PRICE_PV">

                                </el-table-column>
                                <el-table-column label="数量" width="150">
                                    <template slot-scope="scope">
                                        <el-input-number size="mini" v-model="numList[scope.$index]"  :min="0" :max="Number(scope.row.STORE_NUMS)" @change="value=>{handleChange(value,scope.row.ID)}"></el-input-number>
                                    </template>
                                    <!-- <template slot-scope="scope">
                                        <el-input-number v-if="form.goodsId.some(item=>item==scope.row.ID)" v-model='scope.row.goodsNum' @change="value=>{handleChange(value,scope.row.ID)}" controls-position="right" style="width: 70px;" size="mini"></el-input-number>
                                    </template> -->
                                </el-table-column>

                            </el-table>
                            <div class="white-box-footer flex">
                                <el-button @click="getSum()">计算合计</el-button>
                                <div class='flex data' style="flex:1;justify-content: flex-end;">
                                    <div style="margin-right:2rem">商品价格：￥{{sell_price_sum}}</div>
                                    <div>商品PV：￥{{price_pv_sum}}</div>
                                </div>
                            </div>

                        </el-tab-pane>
                    </el-tabs>
                </el-form-item>
                <div class="hr-tip"><span>网络信息</span></div>
                <el-form-item label="推荐人编号">
                    <el-input v-model="form.recUserName" @change="handleChkRecUser">
                        <template slot="append">【{{recRealName}}】</template>
                    </el-input>
                </el-form-item>

                <el-form-item label="接点人编号">
                    <el-input v-model="form.conUserName" @change="handleChkConUser">
                        <template slot="append">【{{conRealName}}】</template>
                    </el-input>
                </el-form-item>

                <el-form-item label="安置区位">
                    <el-radio-group v-model="form.location">
                        <el-radio-button :label="1">左区</el-radio-button>
                        <el-radio-button :label="2">中区</el-radio-button>
                        <el-radio-button :label="3">右区</el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <div class="hr-tip"><span>个人资料</span></div>
                <el-form-item>
                    <template slot="label">

                        会员姓名
                    </template>
                    <el-input v-model="form.realName"></el-input>
                </el-form-item>
                <el-form-item>
                    <template slot="label">

                        会员手机
                    </template>
                    <el-input v-model="form.mobile"></el-input>
                </el-form-item>
                <el-form-item>
                    <template slot="label">

                        身份证号
                    </template>
                    <el-input v-model="form.insertUserIdCard" maxlength="18"></el-input>
                </el-form-item>

                <el-form-item>
                    <template slot="label">
                        登录密码
                    </template>
                    <el-input v-model="form.password" maxlength="32" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <template slot="label">
                        支付密码
                    </template>
                    <el-input v-model="form.payPassword" maxlength="32" placeholder="请输入支付密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <template slot="label">
                        收货人
                    </template>
                    <el-input v-model="form.consignee"></el-input>
                </el-form-item>
                <el-form-item>
                    <template slot="label">

                        收货人手机
                    </template>
                    <el-input v-model="form.acceptMobile"></el-input>
                </el-form-item>
                <el-form-item>
                    <template slot="label">
                      收货方式
                    </template>
                    <el-radio-group v-model="form.way" @change="wayChange">
                      <el-radio label="express">快递</el-radio>
                      <el-radio label="pickup">自提</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item prop="areaSelected">
                    <template slot="label">
                        地区
                    </template>
                    <el-cascader
                            :disabled="areaDisabled"
                            size="large"
                            :options="regionData"
                            v-model="form.areaSelected">
                    </el-cascader>
                </el-form-item>
                <el-form-item>
                    <template slot="label">
                        详细地址
                    </template>
                    <el-input :disabled="addressDisabled" v-model="form.address"></el-input>
                </el-form-item>

                <div class="hr-tip"><span>银行信息</span></div>

                <el-form-item label="开户行">
                    <el-select v-model="form.openBank" placeholder="请选择开户行">
                        <el-option v-for="(item,index) in allOpenBank" :key="index" :label="item.BANK_NAME"
                                   :value="item.BANK_CODE"></el-option>
                    </el-select>

                </el-form-item>
                <el-form-item label="银行所在地区" prop="bankAreaSelected">
                    <el-cascader
                            size="large"
                            :options="regionData"
                            v-model="form.bankAreaSelected">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="开户支行">
                    <el-input v-model="form.bankAddress"></el-input>
                </el-form-item>
                <el-form-item label="银行账号">
                    <el-input v-model="form.bankNo" maxlength="19"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" :loading="submitButtonStat">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import network from '@/utils/network'
    import baseInfo from '@/utils/baseInfo'
    import store from '@/utils/vuexStore'
     import tool from '@/utils/tool'

    export default {
        name: 'user_dec',
        mounted() {
            this.getData()
        },
        computed:{
            _tableData(){
                if(this.tableData==null){
                    return [];
                }
                if(this.form.decLv==''){
                    return this.tableData;
                }
                return this.tableData.filter(item=>{
                    return item.LEVEL_ID == this.form.decLv
                })
            }
        },

        data() {
            return {
                currentRow:null,
                decWay:'1',
                regionData: store.state.regionInfo.regionData,
                form: {

                    realName:'',
                    decLv: '',
                    insertUserName:'',
                    decUserName:'',
                    recUserName:'',
                    conUserName:'',
                    insertUserIdCard:'',
                    consignee:'',
                    acceptMobile:'',
                    areaSelected: [],
                    address: '',
                    openBank:'',
                    bankAddress: '',
                    bankProvince: '',
                    bankCity: '',
                    bankCounty: '',
                    bankNo: '',
                    bankAreaSelected: [],
                    password:'111111',
                    payPassword:'111111',
                    mobile:'',
                    packageId:'',
                    goodsId:[],
                    goodsNum:[],
                    province:'',
                    city:'',
                    county:'',
                    way:"express"
                },
                conRealName: '-',
                recRealName: '-',
                num: 1,
                tableData:null,
                tableDatas:null,
                allOpenBank: null,
                allDecPackage:{},
                allDecLevel: baseInfo.decLevels(),
                loading: false,
                submitButtonStat: false,
                submitButton:false,
                allGoods:[],
                multipleSelection: [],
                goodsNums:[],
                numList: [],
                sell_price_sum:0.00,
                price_pv_sum:0.00,
                areaDisabled: false,
                addressDisabled: false
            }
        },
        methods: {
            wayChange(){
              if(this.form.way==='pickup'){
                this.areaDisabled = true
                this.addressDisabled = true
              }else{
                this.areaDisabled = false
                this.addressDisabled = false
              }
            },
            getSum(){
                let sell_price_sum=0,price_pv_sum=0;
                this.multipleSelection.map((item,index)=>{
                    console.log(item)
                    sell_price_sum+=Number(item.SELL_PRICE)*item.goodsNum;
                    price_pv_sum+=Number(item.PRICE_PV)*item.goodsNum;
                })
                this.sell_price_sum=tool.formatPrice(sell_price_sum);
                this.price_pv_sum=tool.formatPrice(price_pv_sum);
                console.log(this.sell_price_sum,this.price_pv_sum)
            },
            getData () {

                network.getData(`user/dec`).then(response => {
                    console.log(response)
                    this.loading = false;
                    this.form.insertUserName = response.userName;
                    this.allOpenBank = response.allOpenBank;
                    this.allDecPackage = response.allDecPackage;
                    this.allGoods = response.allGoods;
                    console.log(this.allDecPackage);
                    let settingObj=this.allDecPackage;
                    let settingArr = Object.keys(settingObj).map(key => {
                        //console.log(key); //为每个键名
                        return settingObj[key];  //把每个对象返回出去生成一个新的数组中相当于0:{id:1}
                    } );
                    this.tableData=settingArr;
                    let settingObj1=this.allGoods;
                    for(let i in settingObj1){
                        this.numList[i] = 1;
                        settingObj1[i].goodsNum= 1 ;
                    }
                     this.tableDatas=settingObj1;
                    // this.tableDatas=this.allGoods.map(item=>{return {...item,goodsNum:1}});

                    console.log(this.tableDatas);
                    console.log(this.numList);
                }).catch(() => {
                });


            },
            handleCurrentChange(val) {
                console.log(val)
                if(!val){return}
                this.currentRow = val;
                this.form.packageId=this.currentRow.ID;

                console.log(this.form.packageId)
            },
            // handleSelectionChange(val) {
            //     this.multipleSelection = val;
            //     this.form.goodsId = this.multipleSelection.map(item => item.ID)
            //     this.form.goodsNum = this.multipleSelection.map(item=>{
            //         return item.goodsNum
            //     })
            // },
            handleSelectionChange(val) {
                let idx = -1,num;
                for(let i in this.tableDatas){
                    for(let v in val){
                        if(val[v].ID==this.tableDatas[i].ID){
                            idx = i;
                            num = this.numList[idx];
                            val[v]["goodsNum"] = num;
                            break;
                        }
                    }
                }
                console.log(val)
                this.multipleSelection = val;
                
            },
            handleChange(value,ID) {
                for(let i in this.multipleSelection){
                    if(this.multipleSelection[i]['ID']==ID) {
                        this.multipleSelection[i]["goodsNum"] = value;
                    }
                }
            },
            getGoods(){
                this.form.goodsId=[];
                this.form.goodsNum=[];
                this.multipleSelection.map((item,index)=>{
                    console.log(item);
                    console.log('==');
                    this.form.goodsId.push(item.ID)
                    this.form.goodsNum.push(item.goodsNum)
            })
            },
            onSubmit() {
                this.getGoods();
                this.submitButtonStat = true
                let path = 'user/dec'
                let postData = {
                    consignee: this.form.consignee,
                    acceptMobile: this.form.acceptMobile,
                    province: this.form.areaSelected[0] ? this.form.areaSelected[0] : '',
                    city: this.form.areaSelected[1] ? this.form.areaSelected[1] : '',
                    county: this.form.areaSelected[2] ? this.form.areaSelected[2] : '',
                    address: this.form.address,
                    insertUserName: this.form.insertUserName,
                    decLv: this.form.decLv,
                    realName: this.form.realName,
                    decUserName: this.form.decUserName,
                    conUserName: this.form.conUserName,
                    recUserName: this.form.recUserName,
                    insertUserIdCard: this.form.insertUserIdCard,
                    openBank: this.form.openBank,
                    bankAddress: this.form.bankAddress,
                    mobile: this.form.mobile,

                    bankProvince: this.form.bankAreaSelected[0] ? this.form.bankAreaSelected[0] : '',
                    bankCity: this.form.bankAreaSelected[1] ? this.form.bankAreaSelected[1] : '',
                    bankCounty: this.form.bankAreaSelected[2] ? this.form.bankAreaSelected[2] : '',


                    bankNo: this.form.bankNo,
                    password: this.form.password,
                    payPassword: this.form.payPassword,
                    packageId: this.form.packageId,
                    goodsId: this.form.goodsId,
                    goodsNum: this.form.goodsNum,
                    location: this.form.location,
                    decWay:this.decWay
                }

                return network.postData(path, postData).then(response => {
                    console.log(response);
                    this.$message({
                        message: response,
                        type: 'success'
                    })
                    this.submitButtonStat = false
                    this.$router.go(-1)
                }).catch(() => {
                    this.submitButtonStat = false
                })
            },

            selectOne(event, item) {
                network.getData(`user/dec`).then(response => {

                })

            },

            handleChkConUser() {
                if (this.form.conUserName) {
                    this.loading = true
                    network.getData('user/full-info', {userName: this.form.conUserName}).then(response => {
                        this.conRealName = response.REAL_NAME + response.isLocation
                        this.loading = false
                    }).catch(response => {
                        this.conRealName = '-'
                        this.loading = false
                    })
                }
            },

            handleChkRecUser() {
                if (this.form.recUserName) {
                    this.loading = true
                    network.getData('user/full-info', {userName: this.form.recUserName}).then(response => {
                        this.recRealName = response.REAL_NAME
                        this.loading = false
                    }).catch(response => {
                        this.recRealName = '-'
                        this.loading = false
                    })
                }
            },
        }
    }
</script>

<style>
    .hr-tip {
        font-size: 12px;
        position: relative;
        text-align: center;
        height: 30px;
        line-height: 30px;
        color: #999;
        margin-bottom: 20px;
    }

    .hr-tip:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 14px;
        border-bottom: 1px dashed #ddd;
        height: 1px;
    }

    .hr-tip span {
        display: inline-block;
        background: #fff;
        position: relative;
        padding: 0 10px;
    }
    .el-input-number--mini .el-input-number__decrease, .el-input-number--mini .el-input-number__increase{width: 22px!important}
    .el-input-number.is-controls-right .el-input__inner{padding-left: 10px;
        padding-right: 30px;}
    .el-tabs--border-card{
        position: relative;
    width: 600px;
    }
    .flex{
        display: flex;
    }
</style>