qimall/addons/ScoreExpansion/backend/views/goods/index.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-user-info');
ComponentHelper::loadComponentView('com-list-page');
ComponentHelper::loadComponentView('com-list-table');
ComponentHelper::loadComponentView('com-dialog-select');
ComponentHelper::loadComponentView('com-image');
ComponentHelper::loadComponentView('component/com-add-cat',__DIR__);
?>

<com-list-page :crumbs="crumbs" id="application">
    <com-list-table ref="table" :api="api" :search-list="searchList" @get-api-data="getListData">
        <template v-slot:custom-search>
            <el-button size="small" @click="$refs.cats.openDialog()">分类筛选</el-button>
        </template>
        <el-table-column prop="goods_id" label="商品ID" align="center"></el-table-column>
        <el-table-column label="商品" align="center" width="170">
            <template slot-scope="scope">
                <div flex="cross:center">
                    <div style="margin-right: 10px;">
                        <el-image style="width: 50px; height: 50px;border-radius: 5px;"
                                  :src="scope.row.goods.cover_pic"></el-image>
                    </div>
                    <div flex="cross:center">
                        <el-tooltip class="item" effect="dark" :content="scope.row.goods.goods_name+''"
                                    placement="top">
                            <span class="over2">{{scope.row.goods.goods_name}}</span>
                        </el-tooltip>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="分类" align="center">
            <template slot-scope="scope">
                <div class="goods-cat">
                    <el-tag v-if="scope.row.goods?.cats && scope.row.goods.cats.length > 0" size="mini">
                        {{scope.row.goods.cats[0].name}}
                    </el-tag>
                    <el-tooltip v-if="scope.row.goods.cats && scope.row.goods.cats.length > 1" placement="top">
                        <div slot="content">
                            <span v-for="item in scope.row.goods.cats" :key="item.id">{{item.name}}&nbsp;</span>
                        </div>
                        <span>...</span>
                    </el-tooltip>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="goods.price" label="售价" align="center"></el-table-column>
        <el-table-column prop="created_at_text" label="创建时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button type="text" size="mini" circle @click="showEdit(scope.row)">
                    编辑
                </el-button>
                <el-button type="text" size="mini" circle @click="del(scope.row.id)">
                    删除
                </el-button>
            </template>
        </el-table-column>

        <template slot="header-left">
            <com-dialog-select :multiple="true"
                               @selected="save"
                               :extra-search="{exclude_goods_ids: selectedGoodsIds}"
                               url="mall/goods/search">
                <el-button type="primary" size="small">选择商品</el-button>
            </com-dialog-select>
        </template>
    </com-list-table>
    <com-add-cat ref="cats" @select="selectCat" :mch_id="0"></com-add-cat>

    <el-dialog title="冻结积分奖励设置" :visible.sync="dialogFormVisible" width="15%">
        <el-form :model="form" label-width="150px">
            <el-form-item label="是否单独设置奖励">
                <el-switch
                        v-model="form.is_alone"
                        :active-value="1"
                        :inactive-value="0">
                </el-switch>
            </el-form-item>
            <template v-if="form.is_alone">
                <el-form-item label="奖励冻结积分">
                    <el-input size="small" style="width: 200px;" v-model="form.setting.reward_frozen_score" onInput="value = toNumber(value, 2)">
                        <template slot="append">个</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="循环">
                    <el-input size="small" style="width: 200px;" v-model="form.setting.loop_num" onInput="value = toNumber(value)">
                        <template slot="append">轮</template>
                    </el-input>
                </el-form-item>
            </template>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="edit" :loading="btnLoad">确 定</el-button>
        </div>
    </el-dialog>
</com-list-page>

<script type="text/javascript" src="/resources/js/diy-util.js"></script>
<script>
    const application = new Vue({
        el: '#application',
        data: {
            api: 'score-expansion/goods/list',
            crumbs: [
                {
                    title: '商品列表',
                }
            ],
            btnLoad: false,
            form: {
                id: 0,
                is_alone: 0,
                setting: {
                    reward_frozen_score: 0,
                    loop_num: 0,
                },
            },
            selectedGoodsIds: [],
            dialogFormVisible: false,
        },
        mounted() {
        },
        computed: {
            searchList() {
                return [
                    {
                        key: 'goods_id',
                        title: '商品ID',
                        type: 'text',
                    },
                ]
            }
        },
        methods: {
            del(id) {
                this.$confirm('确认删除此商品?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request({
                        params: {
                            r: 'score-expansion/goods/del',
                        },
                        method: 'POST',
                        data: {id}
                    }).then(e => {
                        if (e.data.code === 0) {
                            this.$refs.table.getList()
                            this.$message.success('删除成功');
                        } else {
                            this.$message.error(e.data.msg);
                        }
                    })
                })
            },
            save(selectedGoods) {
                const goods_ids = []
                for (const selectedGoodsItem of selectedGoods) {
                    goods_ids.push(selectedGoodsItem.id)
                }
                if (goods_ids.length === 0) {
                    this.$message.error('未选择商品')
                    return
                }

                request({
                    params: {
                        r: 'score-expansion/goods/save',
                    },
                    method: 'POST',
                    data: {goods_ids}
                }).then(e => {
                    if (e.data.code === 0) {
                        this.$message.success('添加成功')
                        this.$refs.table.getList()
                    } else {
                        this.$message.error(e.data.msg);
                    }
                })
            },
            showEdit(row) {
                this.form.id = row.id
                this.form.is_alone = row.is_alone
                this.form.setting = Object.assign(this.form.setting, row.setting)
                this.dialogFormVisible = true
            },
            edit() {
                this.btnLoad = true

                request({
                    params: {
                        r: 'score-expansion/goods/edit',
                    },
                    method: 'POST',
                    data: this.form
                }).then(e => {
                    if (e.data.code === 0) {
                        this.$message.success('编辑成功')
                        this.dialogFormVisible = false
                        this.$refs.table.getList()
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).finally(() => {
                    this.btnLoad = false
                })
            },
            delGoods(index) {
                this.selectGoodsList.splice(index, 1)
            },
            goodsSelect(selectGoodsList) {
                for (const selectGoodsItem of selectGoodsList) {
                    let isExist = false
                    for (const selectedGoodsItem of this.selectGoodsList) {
                        if (selectedGoodsItem.id === selectGoodsItem.id) {
                            isExist = true
                            break
                        }
                    }
                    if (!isExist) {
                        this.selectGoodsList.push(deepClone(selectGoodsItem))
                    }
                }
            },
            selectCat(arr) {
                this.$refs.table.searchParams.cats = [];
                arr.forEach(it => this.$refs.table.searchParams.cats.push(it.id))
                this.$refs.table.reload()
            },
            getListData(list) {
                this.selectedGoodsIds = list.selected_goods_ids
            }
        }
    })
</script>