mashangyoujiu/Application/Retail/View/Goods/updateGoodsPLU.html

<!DOCTYPE html>
<html>
<!--[1.6.48]-->
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__PUBLIC__/vue/element-ui.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/myscroll.css"/>
    <style>
        .center {
            width: 100%;
            text-align: center;
            height: 62px;
            border-top: 1px solid #f5f5f5;
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: white;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak style="width: 100%">
    <el-table border
              :data="goodsList"
              style="width: 100%"
              :max-height="maxHeight"
              v-loading="loading"
              element-loading-text="数据获取中"
              element-loading-spinner="el-icon-loading">
        <el-table-column label="序号" width="50">
            <template slot-scope="scope">
                <div style="text-align: center">{{scope.$index+1}}</div>
            </template>
        </el-table-column>
        <el-table-column prop="goods_name" label="商品名称"></el-table-column>
        <el-table-column prop="goods_number" label="商品货号"></el-table-column>
        <el-table-column prop="goods_code" label="商品条码"></el-table-column>
        <el-table-column prop="shop_mem_price" label="PLU码" min-width="120">
            <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.plu_code" oninput="value=this.value.replace(/^[0]|\D/,'')"></el-input>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="80" style="border-right: none;">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="removeGoods(scope.$index)">移除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="center">
        <el-button @click="save" type="primary">保存</el-button>
    </div>
    <el-dialog title="错误提示" :modal-append-to-body="false"
            :visible.sync="showErrorTips">
        <div v-for="item in errorData">{{item}}</div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="showErrorTips = false">取 消</el-button>
            <el-button size="small" type="primary" @click="showErrorTips = false">确 定</el-button>
        </span>
    </el-dialog>
</div>
</body>
<script src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
<script src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
<script src="__PUBLIC__/vue/element-ui.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                goodsList: {$goodsList},             // 商品列表
                maxHeight: 0,
                loading: true,
                errorData: [],
                showErrorTips: false
            }
        },
        methods: {
            removeGoods(index) {
                var that = this;
                var goodsList = that.goodsList;
                that.$confirm('确定移除该商品吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    goodsList.splice(index, 1);
                    that.goodsList = [];
                    that.goodsList = goodsList;
                }).catch(() => {
                });
            },
            save: function () {
                var that = this;
                if(!that.goodsList.length){
                    return;
                }
                var goodsList = that.goodsList;
                var reg = /^[1-9]\d{0,3}$/;
                var codeArr = [];
                for(var i=0;i<goodsList.length;i++){
                    if(goodsList[i].plu_code!='' && goodsList[i].plu_code!=undefined && goodsList[i].plu_code!=null){
                        if(!reg.test(goodsList[i].plu_code)){
                            that.$message({message: '第'+(i+1)+'条数据PLU码有误', type: 'warning', duration: 1000});
                            return;
                        }
                        if(codeArr.indexOf(goodsList[i].plu_code)!=-1){
                            that.$message({message: '第'+(i+1)+'条数据PLU码重复', type: 'warning', duration: 1000});
                            return;
                        }
                        codeArr.push(goodsList[i].plu_code);
                    }
                }
                that.$confirm('确定保存这些设置吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(() => {
                    console.log(1);
                    $.post("{:U('toUpdatePLU')}", {
                        goodsList: goodsList
                    }, function (res) {
                        console.log(2);
                        if (res.status == 1) {
                            that.$message({
                                message: res.msg,
                                type: 'success',
                                duration: 1000,
                                onClose: function () {
                                    top.layer.closeAll();
                                }
                            })
                        } else if (res.status == 2) {
                            that.errorData = [];
                            that.errorData = res.errorData;
                            that.showErrorTips = true;
                        } else {
                            that.$message({message: res.msg, type: 'error', duration: 1000})
                        }
                    })
                }).catch(() => {

                });
            }
        },
        mounted: function () {
            this.loading = false;
        },
        created: function () {
            var clientHeight = 0;
            if (document.body.clientHeight && document.documentElement.clientHeight) {
                clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
            } else {
                clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
            }
            this.maxHeight = clientHeight - 80;
        }
    });
</script>

</html>