qimall/addons/Happiness/client/views/goods/edit.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-dialog-select-goods', __DIR__ . '/component');
?>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" class="box-card" body-style="background-color: #f3f3f3;padding: 10px 0 0;"
             v-loading="cardLoading" v-loading="cardLoading">
        <div slot="header">
            <div flex="cross:center box:first">
                <div>编辑</div>
            </div>
        </div>
        <div class="form-body">
            <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm"
                     label-width="160px">
                <el-form-item label="商品信息:" label-width="160px" prop="goods_id">
                    <div>
                        <com-dialog-screen-select :multiple="true" :url="get_can_set_give_goods_list"
                                                  @selected="goodsSelect"
                                                  title="商品选择">
                            <el-button type="primary">选择商品</el-button>
                        </com-dialog-screen-select>
                        <el-alert style="margin-top: 20px;line-height: 25px;border:1px solid #f6b4f8"
                                :title="tip"
                                type="warning">
                        </el-alert>
                    </div>
                    <el-table max-height="800" :data="goods_list" size="small" stripe border
                              style="min-width: 1200px;margin-top: 20px;">
                        <el-table-column prop="id" label="规格id" align="center" min-width="80">
                        </el-table-column>
                        <el-table-column prop="goods_id" label="商品id" align="center" min-width="80">
                        </el-table-column>
                        <el-table-column prop="label_name" label="商品标签" align="center" min-width="80">
                        </el-table-column>
                        <el-table-column prop="price" label="价格" align="center" min-width="80">
                        </el-table-column>
                        <el-table-column label="商品" min-width="150">
                            <template slot-scope="scope">
                                <div style="display: flex;align-items: center;">
                                    <el-image fit="cover" :src="scope.row.cover_pic"
                                              style="width: 40px;height: 40px;display: block;margin-right: 5px;flex-shrink: 0;"></el-image>
                                    <div>
                                        <div>{{scope.row.goods_name}}</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="库存" width="80" prop="stock"></el-table-column>
                        <el-table-column label="最高盈利" width="100" prop="max_income"></el-table-column>
                        <el-table-column label="最低提货数量" width="120" prop="min_num"></el-table-column>
                        <el-table-column prop="stock" label="提货数量" align="center" width="180">
                            <template slot-scope="scope">
                                <el-input-number type="text" :min="scope.row.min_num"
                                          :max="scope.row.stock" v-model="scope.row.buy_num"
                                          onInput="value=value.replace(/[^\d]/g,'')"></el-input-number>
                            </template>
                        </el-table-column>

                        <el-table-column prop="num" label="操作" align="center" min-width="80" v-if="!ruleForm.id">
                            <template slot-scope="scope">
                                <el-button @click="delFun(scope.$index)" type="primary" size="mini">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <div flex="dir:center">
                <div>
                    <el-button class="button-item" style="margin-bottom: 15px;" type="primary"
                               @click="submitForm('ruleForm')" size="small" :loading="btnLoading">保存
                    </el-button>
                </div>
            </div>
        </div>
    </el-card>
</div>
<script src="/resources/js/Sortable.min.js"></script>
<script src="/resources/unpkg/vuedraggable@2.18.1/dist/vuedraggable.umd.min.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                ruleForm: {
                    goods_list:[]
                },
                rules: {
                },
                communities: [{name: '', isNew: true}],
                btnLoading: false,
                cardLoading: false,
                dialogLoading: false,
                goods_list: [],
                levels: [],
                tip:'您暂无提货券',
                get_can_set_give_goods_list: 'happiness/client/goods/search-goods-data',
                reward_calculation_list: [ // 赠送计算方式选项
                    {
                        value: 1,
                        label: '商品售价'
                    },
                    {
                        value: 2,
                        label: '订单实付金额'
                    }
                ],
            };
        },
        mounted: function () {
            const id = getQuery('id');
            this.loadData(id);
        },
        methods: {
            loadData(id) {
                this.loading = true;
                request({
                    params: {
                        r: 'happiness/client/goods/edit',
                        id: id,
                    },
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        this.tip = e.data.data.tip;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log('错误信息为', e)
                    this.loading = false;
                });
            },
            // 选中商品处理
            goodsSelect(goodsList) {
                //判断是不是数组
                if (!Array.isArray(goodsList)) {
                    this.$message.error('请选择商品');
                    return;
                }
                let self = this
                console.log('goodsList', goodsList.length)
                goodsList.forEach(function (param) {
                    //已存在的不再添加
                    if (!self.goods_list.some(function (item) {
                        return item.id == param.id;
                    })) {
                        self.goods_list.push({
                            id: param.id,
                            goods_id: param.goods_id,
                            stock: param.stock,
                            goods_name: param.goods_name,
                            cover_pic: param.cover_pic,
                            price: param.price,
                            max_income: param.max_income,
                            min_num: param.min_num,
                            buy_num:param.min_num,
                            label_name: param.label_name,
                            label_id: param.label_id,
                        });
                    }
                });
                console.log('goodsList', self.goods_list.length)
            },
            // 删除商品
            delFun(index) {
                this.goods_list.splice(index, 1)
            },
            submitForm(formName) {
                let self = this;
                self.ruleForm.goods_list=[];
                if(this.goods_list.length==0)
                {
                    this.$message.error('请选择商品');
                    return
                }
                this.goods_list.forEach(function (item) {
                    let param = {
                        goods_id: item.goods_id,
                        stock: item.stock,
                        buy_num: item.buy_num,
                        label_id: item.label_id,
                        attr_id: item.id,
                    }
                    self.ruleForm.goods_list.push(param)
                });
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        self.btnLoading = true;
                        request({
                            params: {
                                r: 'happiness/client/goods/edit',
                            },
                            method: 'post',
                            data: self.ruleForm,
                        }).then(e => {
                            self.btnLoading = false;
                            if (e.data.code == 0) {
                                navigateTo({
                                    r: 'happiness/client/goods/index',
                                });
                                //添加完成之后初始化
                                self.$message.success('保存成功');
                            } else {
                                self.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            self.btnLoading = false;
                            console.log(e);
                            self.$message.error('网络错误');
                            return false;
                        });
                    }
                });
            }
        }
    });
</script>

<style>
    .form-body {
        padding: 20px 0;
        background-color: #fff;
        margin-bottom: 20px;
        padding-right: 40%;
    }

    .form-button {
        margin: 0;
    }

    /* .el-form-item__content{margin-left:100px !important;} */

    .form-button .el-form-item__content {
        /* margin-left: 0px !important; */
    }

    .button-item {
        padding: 9px 25px;
    }

    .radio-box div {
        margin-right: 20px;
    }

    .input-item {
        display: inline-block;
        width: 250px;
        margin: 0;
    }

    .input-item .el-input__inner {
    / / border-right: 0;
    }

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0 10px;
    }

    .input-item .el-input-group__append .el-button {
        padding: 15px;
    }

    .el-dialog-1 .el-dialog {
        min-width: 350px;
    }

    .dialog-cat-box {
        border: 1px solid #E3E3E3;
        height: 250px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        width: 100%;
        margin-right: 10px;
        overflow-y: auto;
    }

    .el-dialog__body {
        padding: 10px 20px;
    }

    .el-table td,
    .el-table th {
        padding: 5px 0;
    }

    .cat-edit-text {
        color: #409EFF;
        margin-left: 10px;
        cursor: pointer;
    }

    .com-gallery .com-gallery-item {
        margin-bottom: 0;
        margin-right: 0;
        cursor: pointer;
    }

    .show-example {
        cursor: pointer;
        color: #409EFF;
    }

    .text {
        cursor: pointer;
        color: #419EFB;
    }

    .pic-url-remark {
        font-size: 13px;
        color: #c9c9c9;
        margin-bottom: 12px;
    }

    .add-image-btn {
        width: 100px;
        height: 100px;
        color: #419EFB;
        border: 1px solid #e2e2e2;
        cursor: pointer;
    }

    .del-btn {
        position: absolute;
        top: -4%;
        right: -4%;
    }

    .el-select--small {
        width: 23%
    }

    .community_add {
        display: flex;
        width: 200px
    }

    .modify-list {
        font-size: 20px;
        display: flex;
        align-items: center;
        margin-left: 10px;
    }

    .el-card__body {
        padding-bottom: 25px;
        padding-top: 25px
    }
</style>