qimall/addons/CloudStockTwo/backend/views/components/agent-order-edit.php

<?php

//Yii::$app->loadComponentView('com-dialog-select');
//use common\helpers\ComponentHelper;
////Yii::$app->loadPluginComponentView('agent-order-edit');
//$diyPath = dirname(__DIR__) . '/components';
//ComponentHelper::loadComponentView('agent-order-edit', $diyPath);
?>

<template id="agent-order-edit">
    <el-dialog :visible.sync="edit.visible" width="30%" title="填写发货信息" center>
		
        <!-- <div>
            <el-form @submit.native.prevent size="small" label-width="150px">
                <el-form-item label="物流名称">
                    <el-input v-model="ruleForm.express_name">
                    </el-input>
                </el-form-item>
                <el-form-item label="物流单号">
                    <el-input v-model="ruleForm.express_no">
                    </el-input>
                </el-form-item>

            </el-form>
        </div> -->
		
		<el-tabs v-model="activeName1" type="card" style="margin-bottom: 30px;">
		    <el-tab-pane label="商品信息" name="first">
				<el-table
					size="mini"
				      :data="goodsData"
				      style="width: 100%"
					  class="myTable2">
				      <el-table-column
				        label="图片"
						align="center"
				        >
						<template slot-scope="scope">
							<div style="justify-content: center;display: flex;">
								<img :src="scope.row.goods.cover_pic" style="display: block;width: 50px;height: 50px;" />
							</div>
						</template>
				      </el-table-column>
				      <el-table-column
				        prop="goods_name"
				        label="商品名称"
						align="center"
				       >
				      </el-table-column>
				      <el-table-column
				        prop="num"
				        label="数量"
						align="center">
				      </el-table-column>
				    </el-table>
			</el-tab-pane>
		</el-tabs>
		
		<el-tabs v-model="activeName1" type="card" v-loading="loading">
		    <el-tab-pane label="物流信息" name="first">
				<el-form :model="ruleForm"   size="small" ref="ruleForm" label-width="80px" >
					<el-form-item label="物流选择" style="margin-bottom: 10px" required>
					    
					        <template>
					          <el-radio v-model="ruleForm.kuaidi" :label="1">快递</el-radio>
					        </template>
					    
					</el-form-item>
					<el-form-item label="快递公司" style="margin-bottom: 10px" required>
					    <el-select size="small" class="select" v-model='express_code' style="width:200px;margin-right: 20px;" placeholder="请选择快递公司">
					        <el-option v-for="(item,index) in expressList" :label="item.name" :value="item.code"></el-option>
					    </el-select>
					</el-form-item>
					<el-form-item label="快递单号" style="margin-bottom: 10px" required>
					    <el-input v-model="express_no"></el-input>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
		
        <span slot="footer" class="dialog-footer">
            <el-button @click="editCancel" type="default" size="small">取消</el-button>
            <el-button type="primary" :loading="edit.btnLoading" style="margin-bottom: 10px;" size="small"
                       @click="editSave">确认发货</el-button>
        </span>
    </el-dialog>
</template>
<script>
    Vue.component('agent-order-edit', {
        template: '#agent-order-edit',
        props: {
            value: {
                type: Boolean,
                default: false
            },
            edit_row: {
                type: Object,
                default: null
            }
        },
        data() {
            return {
                edit: {
                    visible: false,
                    id: '',
                    btnLoading: false,
                },
                ruleForm: {
                    /* express_no: '',
                    express_name: '',
                    order_id: '', */
					kuaidi:1
                },
                level_list: [],
                goods: null,
				
				activeName1:'first',
				goodsData:[],
				loading:false,
				expressList:[],
				express_code:'',
				express_no:'',
				tableData:[
					{
						img:'http://zhenai.ruinuomei.com/product/db3c8dd2-af28-438f-be7d-e45297c95724',
						name:'商品名称商品名称商品名称商品名称商品名称商品名称商品名称',
						num:4
					}
				]
            }
        },
        watch: {
            value() {
                if (this.value) {
                    this.edit.visible = true;
					this.goodsData = [this.edit_row.data];
					this.getExpressList();
                    /* if (this.edit_row.id > 0) {
                        console.log(this.edit_row)
                        this.ruleForm.order_id = this.edit_row.id;
                    } else {
                        this.edit.id = 0;
                    } */
                } else {
                    this.edit.visible = false;
                }
            },
            'edit.visible'() {
                if (!this.edit.visible) {
					this.express_code = '';
					this.express_no = '';
                    this.editCancel();
                }
                if (this.edit.id) {
                }
            }
        },
        mounted() {
            //this.edit.id = this.edit_row.id;
        },
        methods: {
            onInput(e) {
                this.$forceUpdate();
            },
            agentClick(row) {
                this.edit.id = row.id
            },
            editCancel() {
                this.$emit('input', false);
            },
            editSave() {
                /* if (this.ruleForm.order_id == 0) {
                    this.$message.error('请选择订单');
                    return;
                } */
				if(!this.express_code){
					this.$message.error('请选择快递公司');
					return;
				}
				if(!this.express_no){
					this.$message.error('请输入快递单号');
					return;
				}
				
                this.edit.btnLoading = true;
                request({
                    params: {
                        r: 'cloud-stock-two/order/delivery',//plugin/cloud_stock/mall/pick-up/delivery
                    },
                    method: 'post',
                    data:{
						id:this.edit_row.data.id,
						express_code:this.express_code,
						express_no:this.express_no
					}
                }).then(response => {
                    this.edit.btnLoading = false;
                    if (response.data.code == 0) {
                        this.$message.success(response.data.msg);
						this.$emit('success',1)
                        this.editCancel();

                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(response => {
                    this.edit.btnLoading = false;
                });
            },
            keyUp() {

            },
			getExpressList(){
				this.loading = true;
				request({
				    params: {
						r:'cloud-stock-two/order/express-list'
					},
				    method: 'get',
				}).then(e => {
					this.loading = false;
					//console.log('快递列表='+JSON.stringify(e))
				    if (e.data.code == 0) {
				        this.expressList = e.data.data;
				    } else {
				        this.$message.error(e.data.msg);
				    }
				}).catch(e => {
				    this.loading = false;
				});
			}
        }
    });
</script>
<style>
	/* .myTable2 .el-table__footer-wrapper,.myTable2 .el-table__header-wrapper{
	  border-bottom: 1.4px solid #D6D6D6;
	 } */
</style>