qimall/addons/Purchase/backend/views/goods/edit.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="false" @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')" type="primary" size="mini">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>

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

                    <el-form-item v-if="form.attr.length > 0" style="margin-left: 10px;" label="兑换价格" required>
                        <el-table :data="form.attr" border>
                            <el-table-column prop="name" label="规格">
                                <template slot-scope="scope">
                                    {{scope.row.name ? scope.row.name : '默认'}}
                                </template>
                            </el-table-column>

                            <el-table-column label="售价">
                                <template slot-scope="scope">
                                    ￥{{scope.row.price}}
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="name" label="兑换价" key="3">
                                <template slot-scope="scope">
                                    <el-form-item>
                                        最低抵扣
                                        <el-input v-model="scope.row.min_score" :disabled="scope.row.min_limit == 1" size="mini" min=1
                                            style="width: 100px;margin:3px 10px" placeholder="输入积分" onInput="value = toNumber(value, 2)">
                                        </el-input>
                                        <el-checkbox v-model="scope.row.min_limit">不限制</el-checkbox>
                                    </el-form-item>

                                    <el-form-item>
                                        最高抵扣
                                        <el-input v-model="scope.row.max_score" size="mini" :disabled="scope.row.max_limit == 1" min=1 style="width: 100px;margin:3px 10px"
                                        placeholder="输入积分" onInput="value = toNumber(value, 2)">
                                        </el-input>
                                        <el-checkbox v-model="scope.row.max_limit">不限制</el-checkbox>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                        </el-table>
                    </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_id: 0,
                goods: [],
                attr: [],
                cats: [],
            },
            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() {
            this.send('getData', getQuery('goods_id'));
        },
        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 'getData':
                        this.loading = true;
                        request({
                            params: {
                                r: 'purchase/goods/edit',
                                goods_id: param
                            },
                            method: 'get'
                        }).then(e=>{
                            this.loading = false;
                            if (e.data.code == 0) {
                                if (!isEmpty(e.data.data.detail)) {
                                    this.form = e.data.data.detail;
                                    this.cats = e.data.data.detail.cats;
                                    let cats = []
                                    this.cats.map(v => {
                                        cats.push(v.id)
                                    })
                                    this.form.cats = cats
                                }
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.loading = false;
                            self.$message.error(e.data.msg);
                        });
                        break;
                    //获取属性:
                    case 'getAttr':
                        let goods_id = param.id;
                        this.loading = true;
                        request({
                            params: {
                                r: 'purchase/goods/attr-list',
                                goods_id: goods_id,
                            },
                            method: 'get'
                        }).then(e=>{
                            this.loading = false;
                            if (e.data.code == 0) {
                                let arr = [];
                                e.data.data.map(v => {
                                    arr.push({
                                        goods_id: goods_id,
                                        goods_attr_id: v.id,
                                        name: v.name,
                                        price: v.price,
                                        min_score: 0,
                                        min_limit: true,
                                        max_score: 0,
                                        max_limit: true,
                                    });
                                })
                                this.form.attr = arr;
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e=>{
                            this.loading = false;
                            this.$message.error(e.data.msg);
                        })
                        break;
                    //提交
                    case 'submit':
                        this.loading = true;
                        request({
                            params: {r: 'purchase/goods/edit'},
                            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_id = 0;
                        self.form.goods = [];
                        self.form.attr = [];
                        break;
                }
            },
            goodsSelect(param) {
                this.form.goods_id = param.id;
                this.form.goods = [param];
                this.send('getAttr', param);
            }
        }
    })
</script>