qimall/addons/CloudStock/backend/views/components/upgrade-bag-edit.php

<?php
use common\helpers\ComponentHelper;
$diyPath = dirname(__DIR__) . '/components';
ComponentHelper::loadComponentView('com-dialog-select');
ComponentHelper::loadComponentView('free-goods-choice', $diyPath);
?>

<template id="upgrade-bag-edit">
    <el-dialog :visible.sync="edit.show" width="70%" :title="edit_row.title" center><!--  -->
        <div>

            <el-form @submit.native.prevent size="small" label-width="80px" v-loading = 'loading'>

                <el-form-item label="礼包名称" required>
                    <el-input v-model="ruleForm.name">
                    </el-input>
                </el-form-item>

                <el-form-item label="升级商品" required>
                    <div style="display: inline-block;">
                        <div flex="cross:center">
                            <div style="margin-left: 10px;">
                               <com-dialog-select :multiple="true" @selected="goodsSelect"
                                                   title="商品选择">
									<el-button type="primary">选择商品</el-button>
                                </com-dialog-select>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item v-if="goods">
                    <div style="max-height: 300px;overflow-y: auto;background-color: #eee;">
                        <div flex v-if="goods">
                            <div style="padding-right: 10px;flex-grow: 0">
                                <com-image mode="aspectFill"
                                           :src="goods.cover_pic"></com-image>
                            </div>
                            <div style="flex-grow: 1;">
                                <com-ellipsis :line="2">{{goods.goods_name}}
                                </com-ellipsis>
                            </div>
                            <div style="flex-grow: 0;">
                                <el-button @click="deleteGoods"
                                           type="text" circle size="mini">
                                    <el-tooltip class="item" effect="dark"
                                                content="删除" placement="top">
                                        <img src="resources/img/mall/del.png" alt="">
                                    </el-tooltip>
                                </el-button>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item  :label-width="formLabelWidth">
                    <template >
                        <div style="color: #ff4544;">最多可添加20个商品</div>
                        <div class="table-body" style="padding-left: 0;padding-top: 0;">
                            <template>
                                <el-table :data="ruleForm.goods_list" border style="width: 100%">
                                    <el-table-column type="index" label="序号" width="50"></el-table-column>
                                    <el-table-column prop="id" label="商品id"  width="100"></el-table-column>
                                    <el-table-column prop="name,cover_pic" 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.name}}
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="100">
                                        <template slot-scope="scope">
                                            <el-button @click="deleteGoods(scope.$index)" size="mini">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>

                            </template>
                        </div>

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

                <el-form-item label="升级等级" required>
                    <el-select v-model="ruleForm.level" placeholder="请选择升级等级" @change="levelChange">
                        <el-option
                                v-for="item in level_list"
                                :key="item.level"
                                :label="item.name"
                                :value="item.level"
								:disabled="item.status == 1?false:true"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="奖励类型" v-if="ruleForm.level>0">
                    <el-radio v-model="ruleForm.is_percent" label="0">固定金额</el-radio>
                    <el-radio v-model="ruleForm.is_percent" label="1">百分比</el-radio>
                </el-form-item>
                <el-form-item label="奖励" v-if="ruleForm.level>0">
                <el-form-item v-for="(item,index) in ruleForm.level_reward" :key='index' class="coupon-item" style="display: flex;align-items: center;">
                    {{item.name}}
                    <el-input type="number" :min="0" class="member-money" v-model="item.direct_equal_reward" placeholder="" style="width: 260px">
                        <template slot="prepend">直推平级</template>
                    </el-input>
                    <el-input type="number" :min="0" class="member-money" v-model="item.direct_over_reward" placeholder="" style="width: 260px">
                        <template slot="prepend">直推越级</template>
                    </el-input>
                    <el-input type="number" :min="0"  class="member-money" v-model="item.indirect_equal_reward" placeholder="" style="width: 260px;">
                        <template slot="prepend">间推平级</template>
                    </el-input>
                    <el-input type="number" :min="0"  class="member-money" v-model="item.indirect_over_reward" placeholder="" style="width: 260px;">
                        <template slot="prepend">间推越级</template>
                    </el-input>
                </el-form-item>
                </el-form-item>
				<el-form-item label="赠送商品">
				    <div style="display: inline-block;">
				        <div flex="cross:center">
				            <div style="margin-left: 10px;">
								<free-goods-choice :multiple="true" @selected="goodsSelect2"
								                   title="商品选择">
								    <el-button type="primary">选择商品</el-button>
								</free-goods-choice>
				            </div>
				        </div>
				    </div>
				</el-form-item>
                <el-form-item  :label-width="formLabelWidth">
                    <template >
                        <div style="color: #ff4544;">最多可添加20个商品</div>
                        <div class="table-body" style="padding-left: 0;padding-top: 0;">
                            <template>
                                <el-table :data="ruleForm.give_goods_list" border style="width: 100%">
                                    <el-table-column type="index" label="序号" width="50"></el-table-column>
                                    <el-table-column prop="id" label="商品id"  width="100"></el-table-column>
                                    <el-table-column prop="name,cover_pic" 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.name}}
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="num" label="赠送数量" >
                                        <template slot-scope="scope">
                                            <el-input-number v-model="scope.row.num" :min="1" :max="10000">
                                            </el-input-number>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="100">
                                        <template slot-scope="scope">
                                            <el-button @click="deleteGoods2(scope.$index)"  size="mini">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>

                            </template>
                        </div>

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

                <el-form-item label="是否启用" required>
                    <el-switch

                            v-model="ruleForm.status"
                            :active-value="1"
                            :inactive-value="0">
                    </el-switch>
                </el-form-item>

            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editCancel" type="default" size="small">取消</el-button>
            <el-button type="primary" :loading="edit.btnLoading" style="margin-bottom: 10px;" size="small"
                       @click="editSave">保存</el-button>
        </span>
    </el-dialog>
</template>
<script>
    Vue.component('upgrade-bag-edit', {
        template: '#upgrade-bag-edit',
        props: {
            value: {
                type: Boolean,
                default: false
            },
            edit_row: {
                type: Object,
                default: null
            }
        },
        data() {
            return {
                edit: {
                    show: false,
                    id: '',
                    btnLoading: false,
                },
                ruleForm: {
					id: 0,
					level: '',
					goods_id: [],
					give_goods_num:[],
					give_goods_id:[],
                    name: '',
                    status: 1,
                    is_percent: "0",
                    goods_list:[],
                    give_goods_list:[],
                    level_reward:[],
                },
                formLabelWidth: '150px',
                level_list: [],
                goods: null,
				loading:false,
                level_reward_arr:[],
            }
        },
        watch: {
            value() {
                if (this.value) {
					this.getLevelList();
                    this.edit.show = true;
                    if (this.edit_row.id > 0) {
                        this.edit.id = this.edit_row.id;
                        this.loadData();
                    }else{
                        this.loadDataNoId();
                        this.edit.id = 0;
                    }
                } else {
                    this.edit.show = false;
                }
            },
            'edit.show'() {
                if (!this.edit.show) {
					this.edit_row.id = 0;
					this.ruleForm = {
						level: '',
						goods_id: [],
						give_goods_num:[],
						give_goods_id:[],
					    name: '',
					    status: 1,
                        is_percent: "0",
                        goods_list:[],
                        give_goods_list:[],
                        level_reward:[],
                    }
					this.goods = null,
					this.goods2 = null,
                    this.editCancel();
                }
                if (this.edit.id) {
                }
            }
        },
        mounted() {
        },
        methods: {
            onInput(e) {
                this.$forceUpdate();
            },
            loadData() {
				this.loading = true;
                request({
                    params: {
                        r: 'cloud-stock/gift-bag/edit',
                        id: this.edit.id
                    },
                    method: 'get',
                }).then(response => {
					this.loading = false;
                    if (response.data.code == 0) {
						this.ruleForm = {
							level: response.data.data.level,
							give_goods_num:response.data.data.give_goods_num,
							name: response.data.data.name,
							status: response.data.data.status,
                            is_percent: response.data.data.is_percent,
                            goods_list:response.data.data.goods_list,
                            give_goods_list:response.data.data.give_goods_list,
                            goods_id:response.data.data.goods_id,
                            give_goods_id:response.data.data.give_goods_id,
                            level_reward: response.data.data.level_reward,
                        }
                        this.ruleForm.is_percent = this.ruleForm.is_percent.toString();
                        this.level_reward_arr= response.data.data.level_reward;
                        var level = this.ruleForm.level
                        this.changeLevelReward(level);
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(response => {
					this.loading = false;
                });
            },
            loadDataNoId() {
				this.loading = true;
                request({
                    params: {
                        r: 'cloud-stock/gift-bag/edit',
                    },
                    method: 'get',
                }).then(response => {
					this.loading = false;
                    if (response.data.code == 0) {
                        this.ruleForm.level_reward = response.data.data.level_reward;
                        this.level_reward_arr = response.data.data.level_reward;
                        this.changeLevelReward(0);
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(response => {
					this.loading = false;
                });
            },
            goodsSelect(param) {
                for (let j in param) {
                    let item = param[j];
                    console.log(item);

                    if (this.ruleForm.goods_id&&this.ruleForm.goods_id.length >= 20) {
                        this.$message.error('指定商品不能大于20个');
                        return;
                    }
                    let flag = true;
                    for (let i in this.ruleForm.goods_id) {
                        if (this.ruleForm.goods_id[i] == item.id) {
                            flag = false;
                            break;
                        }
                    }
                    if (flag) {
                        this.ruleForm.goods_id.push(item.id);
                        this.ruleForm.goods_list.push({
                            id: item.id,
                            name: item.goods_name,
                            cover_pic: item.cover_pic,
                        });
                    }
                }
            },
            goodsSelect2(param) {
                for (let j in param) {
                    let item = param[j];
                    if (this.ruleForm.give_goods_id&&this.ruleForm.give_goods_id.length >= 20) {
                        this.$message.error('指定商品不能大于20个');
                        return;
                    }
                    let flag = true;
                    for (let i in this.ruleForm.give_goods_id) {
                        if (this.ruleForm.give_goods_id[i] == item.goods_id) {
                            flag = false;
                            break;
                        }
                    }
                    if (flag) {
                        this.ruleForm.give_goods_id.push(item.goods_id);
                        this.ruleForm.give_goods_list.push({
                            id: item.goods_id,
                            name: item.goods_name,
                            cover_pic: item.cover_pic,
                        });
                    }
                }
            },
            deleteGoods(index) {
                this.ruleForm.goods_list.splice(index, 1);
                this.ruleForm.goods_id.splice(index, 1);
            },
            deleteGoods2(index) {
                this.ruleForm.give_goods_list.splice(index, 1);
                this.ruleForm.give_goods_id.splice(index, 1);
            },
            agentClick(row) {
                this.edit.id = row.id
            },
            getLevelList() {
                request({
                    params: {
                        r: 'cloud-stock/default/get-level-list',
						page:1,
						limit:100
                    },
                    method: 'get',
                }).then(response => {
                    if (response.data.code == 0) {
                        this.level_list = response.data.data;
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(response => {
                });
            },
            editCancel() {
                this.$emit('input', false);
            },
            editSave() {
				if (this.ruleForm.name == '') {
				    this.$message.error('请输入升级礼包名称');
				    return;
				}
                // if (this.ruleForm.goods_id == 0) {
                //     this.$message.error('请选择升级商品');
                //     return;
                // }
				if (this.ruleForm.level == '') {
				    this.$message.error('请选择升级等级');
				    return;
				}
				// if (this.ruleForm.give_goods_id=='' && this.ruleForm.give_goods_num > 0) {
				//     this.$message.error('请正选择赠送商品');
				//     return;
				// }
				// if (this.ruleForm.give_goods_id && this.ruleForm.give_goods_num <= 0) {
				//     this.$message.error('请正确填写赠送数量');
				//     return;
				// }

				let requestUrl = '';
                requestUrl = 'cloud-stock/gift-bag/edit';
                this.edit.btnLoading = true;
                this.ruleForm.id = this.edit.id;
                request({
                    params: {
                        r:requestUrl,
                    },
                    method: 'post',
                    data: this.ruleForm
                }).then(response => {
                    this.edit.btnLoading = false;
                    if (response.data.code == 0) {
                        this.$message.success('保存成功');
                        //this.goods = null;
						this.$emit('refresdatafun',1);
                        this.editCancel();
						this.ruleForm= {
							level: '',
							goods_id: 0,
							give_goods_num:'',
							give_goods_id:0,
							name: '',
							status: 1,
                            is_percent: 0,
						}
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(response => {
                    this.edit.btnLoading = false;
                });
            },
            keyUp() {
            },
            levelChange(value){
               this.changeLevelReward(value)
            },
            changeLevelReward(level){
                let self = this
                let newLeveReward = [];
                this.level_reward_arr.forEach(function (item,index){
                    if(item.level<=level){
                        newLeveReward.push(item)
                    }
                })
                self.ruleForm.level_reward = newLeveReward;
            }

        }
    });
</script>