qimall/addons/Purchase/backend/views/goods/edit-more.php

<?php
use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('com-dialog-select');
ComponentHelper::loadComponentView('component/com-add-cat', __DIR__);
?>
<div id="app" v-cloak>
    <el-card class="box-card">
        <div slot="header">
            <span>多商品设置</span>
        </div>

        <el-card shadow="never" style="border:0;min-width: 1000px;">
            <el-form ref="form" :model="form" label-width="120px" size="small" v-loading="loading">
                <el-card class="edit-card" shadow="never">
                    <div slot="header" class="clearfix">
                        <div class="card-title">商品设置</div>
                    </div>

                    <el-form-item style="margin-left: 10px;" label="商品分类" prop="cats" required>
                        <el-tag style="margin-right: 5px;margin-bottom:5px" v-for="(item,index) in cats" :key="index" type="warning" closable disable-transitions @close="handle('destroyCat', index)">{{item.name}}</el-tag>
                        <el-button type="primary" @click="$refs.cats.openDialog()">选择分类</el-button>
                        <com-add-cat ref="cats" :new-cats="form.cats" @select="selectCat"></com-add-cat>
                    </el-form-item>

                    <el-form-item style="margin-left: 10px;" label="商品信息" required>
                        <com-dialog-select :multiple="true" @selected="goodsSelect" title="商品选择">
                            <el-button>选择商品</el-button>
                        </com-dialog-select>

                        <div class="table-body" style="padding-left: 0;padding-top: 10px;">
                            <template>
                                <el-table :data="form.goods" border style="width: 30%">
                                    <el-table-column label="商品ID" prop="id" width="80"></el-table-column>

                                    <el-table-column label="商品名称" >
                                        <template slot-scope="scope">
                                            <div flex="box:first">
                                                <div style="padding-right: 10px;">
                                                    <com-image mode="aspectFill" :src="scope.row.cover_pic"></com-image>
                                                </div>
                                                <div flex="cross:top cross:center">
                                                    {{scope.row.goods_name}}
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column>

                                    <el-table-column fixed="right" label="操作" width="100">
                                        <template slot-scope="scope">
                                            <el-button @click="handle('deleteGoods', scope.$index)" type="primary" size="mini">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>

                            </template>
                        </div>
                    </el-form-item>

                    <el-form-item label="最低抵扣设置">
                        <el-row>
                            <el-col :span="3">
                                <el-input v-model="attr.min_score" :disabled="attr.min_limit == true" size="mini" placeholder="输入比例" onInput="value = toNumber(value, 2)">
                                    <template slot="append">%</template>
                                </el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-checkbox v-model="attr.min_limit" style="margin-left: 20px;">不限制</el-checkbox>
                            </el-col>
                        </el-row>
                    </el-form-item>

                    <el-form-item label="最高抵扣设置">
                        <el-row>
                            <el-col :span="3">
                                <el-input v-model="attr.max_score" :disabled="attr.max_limit == true" size="mini" placeholder="输入比例" onInput="value = toNumber(value, 2)">
                                    <template slot="append">%</template>
                                </el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-checkbox v-model="attr.max_limit" style="margin-left: 20px;">不限制</el-checkbox>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-card>
            </el-form>
        </el-card>
        <el-button class="button-item" :loading="loading" type="primary" size="small" @click="send('submit')">保存</el-button>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            loading: false,
            form: {
                goods: [],
                cats: [],
                attr: [],
            },
            attr: {
                min_score: 0,
                min_limit: true,
                max_score: 0,
                max_limit: true,
            },
            cats: [],
            rules: {
                cats: [{
                    required: true,
                    type: 'array',
                    validator: (rule, value, callback) => {
                        if (this.form.cats instanceof Array && this.form.cats.length > 0) {
                            callback();
                        }
                        callback('请选择分类');
                    }
                }],
            }
        },
        mounted() {
        },
        methods: {
            selectCat(cats) {
                this.cats = cats;
                let arr = [];
                cats.map(v => {
                    arr.push(v.id);
                })
                this.form.cats = arr;
                this.$refs.form.validateField('cats');
            },
            send(type, param = null) {
                switch (type) {
                    //提交
                    case 'submit':
                        this.form.attr = this.attr;
                        this.loading = true;
                        request({
                            params: {r: 'purchase/goods/edit-more'},
                            data: this.form,
                            method: 'post'
                        }).then(e=>{
                            this.loading = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                                let info = {r: 'purchase/goods/index'};
                                navigateTo(info);
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e=>{
                            this.loading = false;
                            this.$message.error(e.data.msg);
                        })
                        break;
                }
            },
            destroyCat(index) {
                let self = this;
                self.cats.splice(index, 1)
                var cats_arr = [];
                for (var item of self.cats){
                    cats_arr.push(item.id);
                }
                self.ruleForm.cats = cats_arr;
            },
            handle(type, data = null) {
                let self = this;
                switch (type) {
                    // 删除分类
                    case 'destroyCat':
                        self.cats.splice(data, 1)
                        var cats_arr = [];
                        for (var item of self.cats){
                            cats_arr.push(item.id);
                        }
                        self.form.cats = cats_arr;
                        break;
                    //删除选中商品
                    case 'deleteGoods':
                        self.form.goods.splice(data, 1);
                        break;
                }
            },
            goodsSelect(param) {
                var goods = [];
                for (var item of param) {
                    goods.push({
                        id: item.id,
                        goods_name: item.goods_name,
                        cover_pic: item.cover_pic,
                        price: item.price,
                    });
                }
                this.form.goods = goods;
            }
        }
    })
</script>