qimall/addons/Happiness/backend/views/store-goods/edit.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-dialog-select');
?>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1200px;"
             body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>添加商品</span>
        </div>

        <el-form size="small" v-loading="loading" label-width="200px" ref="form">

            <el-card shadow="never" style="margin-top: 10px">
                <el-row>
                    <el-col :span="20">
                        <div>
                            <el-form-item label="选择商品">
                                <el-button type="primary" size="small" plain @click="onShowGoodsDialog(0)">添加商品
                                </el-button>
                            </el-form-item>
                        </div>
                        <div style="margin-top: 10px; clear: both;margin-left:200px">
                            <el-row>
                                <el-col :span="24">
                                    <el-checkbox v-model="selectAllChecked" @change="toggleSelectAll">全选</el-checkbox>
                                    <el-input style="width:200px;margin-left: 10px;" v-model="store_scale"
                                              placeholder="小店收益" size="small">
                                    </el-input>
                                    <el-input style="width:200px;margin-left: 10px;" v-model="min_num"
                                              placeholder="最低提货量" size="small">
                                    </el-input>
                                    <el-input style="width:200px;margin-left: 10px;" v-model="warn_day"
                                              placeholder="临期提醒" size="small">
                                        <template slot="append">天</template>
                                    </el-input>
                                    <el-button style="margin-left: 10px" size="small" type="default"
                                               @click="batchSetScale">统一设置
                                    </el-button>

                                    <el-button size="small" type="default" @click="batchDelete">批量删除
                                    </el-button>

                                </el-col>
                            </el-row>
                            <div style="height: 20px"></div>
                            <el-table ref="tableMain" :data="form.goods" border style="width: 100%"
                                      @selection-change="handleSelectionChange">
                                <el-table-column type="selection" width="55">
                                </el-table-column>
                                <el-table-column type="index" label="序号" width="50">
                                </el-table-column>
                                <el-table-column prop="id" label="商品ID" width="80">
                                    <template slot-scope="scope">
                                        {{scope.row.goods_id}}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="cover_pic" label="图片" width="101">
                                    <template slot-scope="scope">
                                        <el-image style="width: 80px; height: 80px;" :src="scope.row.cover_pic"
                                                  fit="cover"></el-image>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="goods_name" label="商品名称" width="200">
                                    <template slot-scope="scope">
                                        <div class="text-line-1">
                                            {{ scope.row.goods_name }}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="store_scale" label="小店收益">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.store_scale" size="small"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="min_num" label="最低提货数量">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.min_num" size="small"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="warn_day" label="临期提醒">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.warn_day" size="small">
                                            <template slot="append">天</template>
                                        </el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="80">
                                    <template slot-scope="scope">
                                        <el-popconfirm @confirm="() => onRemoveGoods(scope.row, 0)"
                                                       title="您真的要移除当前商品吗？">
                                            <el-button slot="reference" type="default" size="small" plain>删除
                                            </el-button>
                                        </el-popconfirm>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-col>
                </el-row>
            </el-card>

            <div style="padding: 10px 0">
                <el-button type="primary" :disabled="btnLoading" :loading="btnLoading" @click="store('form')">保存
                </el-button>
            </div>
        </el-form>
        <el-dialog title="添加商品" :visible.sync="goodsAddVisible" append-to-body>
            <el-form :inline="true">
                <div>
                <el-form-item>
                    <el-input size="small" v-model="keyword" autocomplete="off"
                              placeholder="请输入商品名称进行搜索"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" :disabled="btnLoading" :loading="btnLoading"
                               @click="searchGoods(1)">
                        查找商品
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" size="small" @click="onBatchAddGoods">批量添加</el-button>
                </el-form-item>
                </div>
                <div>
                    <el-form-item>
                        <el-checkbox-group v-model="freight_type">
                            <el-checkbox key="1" :label="1">快递物流</el-checkbox>
                            <el-checkbox key="3" :label="3">同城配送</el-checkbox>
                            <el-checkbox key="2" :label="2">上门自提</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </div>
            </el-form>
            <el-table :data="goods" border size="small" @selection-change="onChangeMultiGoods" style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="cover_pic" label="商品图" width="180">
                    <template slot-scope="scope">
                        <com-image mode="aspectFill" :src="scope.row.cover_pic"></com-image>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品名称">
                    <template slot-scope="scope">
                        <com-ellipsis :line="2">{{scope.row.goods_name}}</com-ellipsis>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button v-if="gSelected.indexOf(scope.row.id) == -1" plain size="mini" type="primary"
                                   @click="onPushGoods(scope.row)">添加
                        </el-button>
                        <el-button v-else plain size="mini" type="danger" title="点击移除商品"
                                   @click="onRemoveGoods(scope.row,currentGoods)">已添加
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-pagination v-if="gPagination" background @current-change="searchGoods" layout="prev, pager, next"
                               :page-count="gPageCount">
                </el-pagination>
            </div>
        </el-dialog>
    </el-card>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                activeName: 'basic',
                loading: false,
                btnLoading: false,
                store_scale: '',
                min_num: '',
                warn_day:'',
                selectAllChecked: false,
                selectedRows: [],
                form: {
                    goods: [],
                },
                freight_type: [1,2,3],
                goodsAddVisible: false,
                gPage: 1,
                keyword: '',
                goods: [],
                gPageCount: 0,
                gPagination: null,
                gSelected: [],
                currentGoods: 0

            }
        },
        mounted: function () {
        },
        methods: {
            toggleSelectAll() {
                const table = this.$refs.tableMain;
                if (this.selectAllChecked) {
                    table.toggleAllSelection(true);
                } else {
                    table.clearSelection();
                }
            },
            handleSelectionChange(rows) {
                this.selectedRows = rows;
                this.selectAllChecked = rows.length === this.form.goods.length;
            },
            batchSetScale() {
                const selectedGoods = this.selectedRows;
                if (selectedGoods.length === 0) {
                    this.$message.warning('请选择至少一个商品');
                    return;
                }

                const store_scale = parseFloat(this.store_scale);
                if (isNaN(store_scale)) {
                    this.$message.error('请输入有效的收益数值');
                    return;
                }
                const min_num = parseFloat(this.min_num);
                if (isNaN(min_num)) {
                    this.$message.error('请输入有效最低提货数量');
                    return;
                }
                const warn_day = parseFloat(this.warn_day);
                if (isNaN(warn_day)) {
                    this.$message.error('请输入有效的临期提醒');
                    return;
                }

                selectedGoods.forEach(row => {
                    row.store_scale = store_scale;
                    row.min_num = min_num;
                    row.warn_day = warn_day;
                });

                this.store_scale = ''; // 清空输入框
                this.min_num = ''; // 清空输入框
                this.warn_day = ''; // 清空输入框
                this.$forceUpdate()
            },
            batchDelete() {
                const selectedGoods = this.selectedRows;
                if (selectedGoods.length === 0) {
                    this.$message.warning('请选择至少一个商品');
                    return;
                }
                selectedGoods.forEach((row,index) => {
                    this.onRemoveGoods(row, 0)
                });
            },
            onInput(e) {
                this.$forceUpdate();
            },
            onShowGoodsDialog(type) {
                this.currentGoods = type
                this.gSelected = []
                if (type === 0) {
                    this.form.goods.forEach(item => {
                        this.gSelected.push(parseInt(item.goods_id))

                    })
                }
                this.searchGoods(1)
                this.goodsAddVisible = true
            },
            searchGoods(page) {
                this.btnLoading = true;
                Vue.$http.get('happiness/store-goods/goods-search', {
                    keyword: this.keyword,
                    page: page,
                    limit: 7
                }).then(res => {
                    this.btnLoading = false;
                    this.goods = res.list
                    this.gPagination = res.pagination
                    this.gPageCount = res.page_count
                }).catch(err => {
                    this.btnLoading = false;
                    this.$message.error(err.val)
                })
            },
            onBatchAddGoods() {
                if (this.gMulti.length > 0) {
                    for (let i in this.gMulti) {
                        if (this.gSelected.indexOf(this.gMulti[i].goods_id) == -1) {
                            this.onPushGoods(this.gMulti[i])
                        }
                    }
                }
            },
            onChangeMultiGoods(rows) {
                this.gMulti = rows
            },
            onPushGoods(item) {
                this.gSelected.push(item.id)
                if (this.currentGoods == 0) {
                    this.form.goods.push({
                        goods_id: item.id,
                        cover_pic: item.cover_pic,
                        goods_name: item.goods_name,
                        store_scale: 0,
                        min_num: 0,
                        warn_day: 0,
                        freight_type:item.freight_type
                    })
                }
            },
            onRemoveGoods(item, type) {
                this.gSelected = [];
                console.log("id")
                console.log(item)
                console.log(this.currentGoods)
                if (type === 0) {
                    this.form.goods.forEach(be => {
                        this.gSelected.push(parseInt(be.goods_id))
                    })
                }
                let isHas = false;
                let gsid = parseInt(item.goods_id ? item.goods_id : item.id);
                let gindex = 0;
                this.gSelected.forEach((gs, index) => {
                    if (gs === gsid) {
                        isHas = true
                        gindex = index
                    }

                })
                if (isHas) {
                    if (type === 0) {
                        this.form.goods.splice(gindex, 1)
                    }
                    this.gSelected.splice(gindex, 1);
                }
            },
            // 操作处理
            handle(type, data = null) {
                var self = this

                this.$forceUpdate()
            },
            store(formName) {
                var self = this
                self.btnLoading = true;
                request({
                    params: {
                        r: 'happiness/store-goods/edit',
                    },
                    method: 'post',
                    data: self.form
                }).then(e => {
                    self.btnLoading = false;
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    self.$message.error(e);
                    self.btnLoading = false;
                })

            },
        }
    });
</script>
<style>
    .alone-goods {
        margin-top: 10px;
        clear: both;
        margin-left: 200px;
    }

    .alone-goods .alone-item {
        padding-right: 10px;
        float: left;;
        width: 50%;
        margin-bottom: 10px;
    }

    .alone-goods .alone-item:nth-child(2n) {
        padding-right: 0;
    }

    .alone-goods .alone-item .item-image {
        height: 80px;
        float: left;
        margin-right: 10px;
    }

    .alone-goods .item-card {
        padding: 10px;
        margin-bottom: 10px;
        overflow: hidden;
    }

    .form_box {
        background-color: #f3f3f3;
        padding: 0 0 20px;
    }

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

    .el-input-group__append {
        background-color: #fff;
        color: #353535;
    }

    .el-form-item {
        margin-bottom: 25px !important;
    }

    .title {
        display: flex;
        align-items: center;
        padding: 18px 20px;
        /* border-top: 1px solid #F3F3F3; */
        border-bottom: 1px solid #F3F3F3;
        background-color: #fff;
    }

    .title-line {
        width: 4px;
        height: 20px;
        background-color: #1479F0;
        margin-right: 10px;
    }

    .paddingTop {
        margin-top: 10px;
    }

    .text-line-1 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>