qimall/addons/CloudStock/backend/views/components/gift-plan-edit.php

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

<template id="gift-plan-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>
                    <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.goods_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="赠送商品">
				    <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.goods_name}}
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="num" label="赠送数量" >
                                        <template slot-scope="scope">
                                            <el-input  v-model="scope.row.num" style="width: 200px" oninput="value=value.replace(/[^\d]/g,'')">
                                            </el-input>
                                        </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-checkbox-group v-model="ruleForm.gift_condition_level">
                        <el-checkbox v-for="(item,index) in level_list" :label="item.level" :key="index">{{item.name}}</el-checkbox>
                    </el-checkbox-group>
                </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('gift-plan-edit', {
        template: '#gift-plan-edit',
        props: {
            value: {
                type: Boolean,
                default: false
            },
            edit_row: {
                type: Object,
                default: null
            }
        },
        data() {
            return {
                edit: {
                    show: false,
                    id: '',
                    btnLoading: false,
                },
                ruleForm: {
					id: 0,
					goods_id: [],
					give_goods_num:[],
					give_goods_id:[],
                    status: 1,
                    goods_list:[],
                    give_goods_list:[],
                    gift_condition_level:[],
                },
                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.edit.id = 0;
                    }
                } else {
                    this.edit.show = false;
                }
            },
            'edit.show'() {
                if (!this.edit.show) {
					this.edit_row.id = 0;
					this.ruleForm = {
						goods_id: [],
						give_goods_num:[],
						give_goods_id:[],
					    status: 1,
                        goods_list:[],
                        give_goods_list:[],
                        gift_condition_leve0:0,
                    }
					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-plan/edit',
                        id: this.edit.id
                    },
                    method: 'get',
                }).then(response => {
					this.loading = false;
                    if (response.data.code == 0) {
						this.ruleForm = {
                            gift_condition_level: response.data.data.gift_condition_level,
							give_goods_num:response.data.data.give_goods_num,
							status: response.data.data.status,
                            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,
                        }
                    } 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,
                            goods_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,
                            goods_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.goods_id == 0) {
                //     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-plan/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.$emit('refresdatafun',1);
                        this.editCancel();
						this.ruleForm= {
							goods_id: 0,
							give_goods_num:'',
							give_goods_id:0,
							status: 1,
                            gift_condition_level: 0,
						}
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(response => {
                    this.edit.btnLoading = false;
                });
            },
            keyUp() {
            },
        }
    });
</script>