qimall/addons/CloudStockTwo/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="20%" :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="false" @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="升级等级" required>
                    <el-select v-model="ruleForm.level" placeholder="请选择升级等级">
                        <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="赠送商品">
				    <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>
                <template>
                    
                </template>
				<template v-if="ruleForm.give_goods_info" v-for="(item,index) in ruleForm.give_goods_info">
                    <el-form-item :label="'赠送商品'+(index+1)">
                    <div style="background-color: #eee;">
                        <div flex >
                            <div style="padding-right: 10px;flex-grow: 0">
                                <com-image mode="aspectFill"
                                           :src="item.cover_pic"></com-image>
                            </div>
                            <div style="flex-grow: 1;">
                                <com-ellipsis :line="2">{{item.goods_name}}
                                </com-ellipsis>
                            </div>
                            <div style="flex-grow: 0;">
                                <el-button @click="deleteGoods2(item.goods_id)"
                                           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="赠送数量">
                        <el-input v-model="item.num" type="number" onkeyup="value=value.replace(/[^\d]/g,'')">
                            <template slot="append">件</template>
                        </el-input>
                    </el-form-item>
                </template>

                <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: 0,
					give_goods_num:0,
					give_goods_id:0,
                    name: '',
                    status: 1,
                    give_goods_info:[],
                },
                level_list: [],
                goods: null,
				goods2: null,
				loading:false
            }
        },
        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 = {
						level: '',
						goods_id: 0,
						give_goods_num:'',
						give_goods_id:0,
					    name: '',
					    status: 1,
					}
					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-two/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,
							goods_id: response.data.data.goods_id,
							give_goods_num:response.data.data.give_goods_num,
							give_goods_id:response.data.data.give_goods_id,
							name: response.data.data.name,
                            goods_name: response.data.data.goods_name,
                            cover_pic: response.data.data.cover_pic,
							status: response.data.data.status,
                            give_goods_info:response.data.data.give_goods_info,
						}
                        if(response.data.data.goods_id){
                            this.goods = {
                                goods_name:response.data.data.goods_name,
                                cover_pic:response.data.data.cover_pic
                            }
                        }

						if(response.data.data.give_goods_id){
                            this.goods2 = {
                                goods_name:response.data.data.give_goods_name,
                                cover_pic:response.data.data.give_cover_pic
                            }
                        }
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(response => {
					this.loading = false;
                });
            },
            deleteGoods() {
                this.goods = null;
                this.ruleForm.goods_id = null;
            },
			deleteGoods2(goods_id) {
			    // this.goods2 = null;
				// this.ruleForm.give_goods_id = null;
			    //this.ruleForm.goods_id = null;
                for(let i=0;i<this.ruleForm.give_goods_info.length;i++){
                    if(this.ruleForm.give_goods_info[i].goods_id == goods_id){
                        this.ruleForm.give_goods_info.splice(i,1);
                    }
                }
			},
            goodsSelect(param) {
                if (param) {
                    this.goods = param
                    this.ruleForm.goods_id = this.goods.id;
                }
            },
			goodsSelect2(param) {
			    if (param) {
                    for(let i=0;i<param.length;i++){
                        this.ruleForm.give_goods_info.push(
                            {
                                goods_id:param[i].goods_id,
                                goods_name:param[i].goods_name,
                                cover_pic:param[i].cover_pic,
                                num:0,
                            }
                        );
                    }
			        // this.goods2 = param;
					// this.ruleForm.give_goods_id = this.goods2.goods_id;
			    }
			},
            agentClick(row) {
                this.edit.id = row.id
            },
            getLevelList() {
                //this.edit.btnLoading = true;
                request({
                    params: {
                        r: 'cloud-stock-two/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-two/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,
						}
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(response => {
                    this.edit.btnLoading = false;
                });
            },
            keyUp() {
                //console.log('key up')
            },
			
        }
    });
</script>