minongyun.com/application/admin/view/stock/stockout/add.html

<link rel="stylesheet" href="/assets/js/backend/stock/libs/element-ui.css">
<style>
    .el-form-item__error {
        padding-top: 0px;
        margin-top: -8px;
    }
</style>
<div id="app">
    <el-container>
        <el-aside width="600px">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">选择出库商品</h3>
                </div>
                <div class="panel-body">
                    <div class="well">
                        <el-form :model="curgood" label-width="92px" :rules="rules" ref="curgood">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item style="margin-bottom: 0;" label="商品条码：">
                                        <el-input size="small" v-model="curgood.barcode"
                                            @keyup.enter.native="barcodeinputenter" placeholder="请输入商品条码"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12" class="label el-form-item__label" style="text-align:left">
                                    <el-form-item style="margin-bottom: 0;" label="商品代码：">{{curgood.volnum}}
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12" class="label el-form-item__label" style="text-align:left">
                                    <el-form-item style="margin-bottom: 0;" label="商品名称：">{{curgood.goodsname}}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12" class="label el-form-item__label" style="text-align:left">
                                    <el-form-item style="margin-bottom: 0;" label="规格型号：">{{curgood.productmodel}}
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12" class="label el-form-item__label" style="text-align:left">
                                    <el-form-item style="margin-bottom: 0;" label="库存数量:">{{curgood.stocknum}}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item style="margin-bottom: 0;" label="出库数量：" prop="stockoutnums">
                                        <el-input size="small" type="number" @change="getcurgoodamount"
                                            v-model.number="curgood.stockoutnums" min="0" placeholder="入库数量">
                                            <template slot="append">{{curgood.measureunit}}</template>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item style="margin-bottom: 0;text-align: right;" label-width="92px"
                                        label="备注：">
                                        <el-input size="small" v-model="curgood.stockoutgoodsremark" placeholder="备注">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12" style="text-align:right">
                                    <el-button icon="el-icon-circle-plus-outline" @click="addtolist" size="medium"
                                        type="primary">添加</el-button>
                                    <el-button icon="el-icon-refresh-left" @click="reset" size="medium" type="danger">重置
                                    </el-button>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                    <el-input v-model="searchvalue" @input="onSearchvalueChange" clearable prefix-icon="el-icon-search"
                        placeholder="请输入商品名称、代码或简拼搜索"></el-input>
                    <el-table :data="goodsdata.list" :height="goodsdata.table.height" highlight-current-row
                        @row-click="selectonegood" stripe border style="width: 100%;margin-top: 10px;">
                        <el-table-column prop="volnum" label="商品代码">
                        </el-table-column>
                        <el-table-column prop="goodsname" label="商品名称">
                        </el-table-column>
                        <el-table-column prop="productmodel" label="规格">
                        </el-table-column>
                        <el-table-column prop="univalence" label="单价">
                        </el-table-column>
                        <el-table-column prop="measureunit" label="重量">
                        </el-table-column>
                        <el-table-column prop="curstocknum" label="库存">
                        </el-table-column>
                    </el-table>
                    <div class="block">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="goodsdata.pagenation.currentpage" :page-sizes="[10, 20, 30]"
                            :page-size="goodsdata.pagenation.pagesize" layout="total, sizes, prev, pager, next, jumper"
                            :total="goodsdata.pagenation.total">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </el-aside>
        <el-main style="padding:0;margin-left: 10px;">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">出库基本信息</h3>
                </div>
                <div class="panel-body">
                    <el-form :model="row" label-width="120px">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item style="margin-bottom: 0;" label="客户：">
                                    <el-select v-model="row.stock_customer_id" size="small" filterable
                                        placeholder="请选择客户">
                                        <el-option v-for="item in customerlist" :key="item.id" :label="item.name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item style="margin-bottom: 0;" label="出库日期：">
                                    <el-date-picker size="small" v-model="row.outboundtime" type="date"
                                        placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item style="margin-bottom: 0;" label="备注：">
                                    <el-input v-model="row.remark" size="small" placeholder="请输入备注内容"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">出库商品详情</h3>
                </div>
                <div class="panel-body">
                    <el-table :data="selectedgoodsdata.list" :height="selectedgoodsdata.table.height" stripe border
                        style="width: 100%;margin-top: 10px;">
                        <el-table-column prop="volnum" label="商品代码">
                        </el-table-column>
                        <el-table-column prop="goodsname" label="商品名称">
                        </el-table-column>
                        <el-table-column prop="productmodel" label="规格">
                        </el-table-column>
                        <el-table-column prop="stocknum" label="库存数量">
                        </el-table-column>
                        <el-table-column prop="stockoutnums" label="出库数量">
                        </el-table-column>
                        <el-table-column prop="measureunit" label="单位">
                        </el-table-column>
                        <el-table-column prop="stockoutgoodsremark" label="备注">
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button type="danger" icon="el-icon-delete" @click="deleteselected(scope.row)"
                                    size="small" circle></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-main>
    </el-container>
    <form id="form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
        <input id="c-main" name="row[main]" v-model="main" class="form-control" type="hidden">
        <input id="c-goodslist" name="row[goodslist]" v-model="goodslist" class="form-control" type="hidden">
        <div class="form-group normal-footer">
            <label class="control-label col-sm-8"></label>
            <div class="col-sm-4">
                <button type="submit" class="btn btn-success btn-embossed disabled readonly">{:__('OK')}</button>
            </div>
        </div>
    </form>
</div>