qimall/addons/Course/backend/views/activity/edit.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-dialog-select');
ComponentHelper::loadComponentView('com-select-cat');
ComponentHelper::loadComponentView('com-rich-text');
ComponentHelper::loadComponentView('com-image');

?>

<div id="app" v-cloak>
    <el-card class="box-card" v-loading="cardLoading" shadow="never" style="border:0;min-width: 1500px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <span style="color: #409EFF;cursor: pointer" @click="$navigate({r:'plugin/course/admin/activity/index'})">
                        活动课程
                    </span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>添加/编辑活动</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-body">
            <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="150px" v-loading="formLoading">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="活动名称" prop="name">
                            <el-input size="small" v-model="ruleForm.name" size="small" placeholder="活动名称"></el-input>
                        </el-form-item>
                        <el-form-item label="课程任选数量" prop="select_number">
                            <el-input size="small" v-model="ruleForm.select_number" size="small" placeholder="课程任选数量"></el-input>
                        </el-form-item>
                        <el-form-item prop="logo">
                            <label slot="label">
                                <span>上传封面</span>
                            </label>
                            <com-attachment v-model="ruleForm.logo" :multiple="false" :max="1" @selected="selectedImg($event)">
                                <el-button size="mini">选择图片</el-button>
                            </com-attachment>
                            <div class="pic-url-remark">
                                该图片将在活动列表展示，建议尺寸700*240(未设置则使用商城默认图片)
                            </div>
                            <div class="customize-share-title">
                                <com-image mode="aspectFill" width='80px' height='80px' :src="ruleForm.logo ? ruleForm.logo : ''"></com-image>
                                <el-button v-if="ruleForm.logo" class="del-btn" size="mini" type="danger" icon="el-icon-close" circle @click="ruleForm.logo = ''"></el-button>
                            </div>
                        </el-form-item>
                        <el-form-item prop="banners" class="com-goods">
                            <template slot="label">
                                <span>活动轮播图</span>
                            </template>
                            <div class="pic-url-remark">
                                建议图片像素750*420,可拖拽使其改变顺序
                            </div>
                            <div flex="dir:left">
                                <template v-if="(ruleForm.banners.length > 0)">
                                    <draggable v-model="ruleForm.banners" flex="dif:left">
                                        <transition-group flex>
                                            <div :data-id="index" v-for="(item,index) in ruleForm.banners" :key="index" style="margin-right: 20px;position: relative;cursor: move;">
                                                <com-attachment @selected="updatePicUrl" :params="{'currentIndex': index}">
                                                    <com-image mode="aspectFill" width="100px" height='100px' :src="item">
                                                    </com-image>
                                                </com-attachment>
                                                <el-button class="del-btn" size="mini" type="danger" icon="el-icon-close" circle @click="delPic(index)"></el-button>
                                            </div>
                                        </transition-group>
                                    </draggable>
                                </template>
                                <template v-if="ruleForm.banners.length < 99">
                                    <com-attachment style="margin-bottom: 10px;" :multiple="true" :max="9" @selected="picUrl">
                                        <el-tooltip class="item" effect="dark" content="建议尺寸:750 * 750" placement="top">
                                            <div flex="main:center cross:center" class="add-image-btn">
                                                + 添加图片
                                            </div>
                                        </el-tooltip>
                                    </com-attachment>
                                </template>
                            </div>
                        </el-form-item>
                        <el-form-item label="关联商品" prop="goods">
                            <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="text">选择商品</el-button>
                                        </com-dialog-select>
                                    </div>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="goods">
                            <template>
                                <div style="color: #ff4544;">只能添加一个商品</div>
                                <div style="max-height: 300px;overflow-y: auto">
                                    <el-table :data="goods" :show-header="false" border>
                                        <el-table-column label="">
                                            <template slot-scope="scope">
                                                <div flex>
                                                    <div style="padding-right: 10px;flex-grow: 0">
                                                        <com-image mode="aspectFill" :src="scope.row.cover_pic"></com-image>
                                                    </div>
                                                    <div style="flex-grow: 1;">
                                                        <com-ellipsis :line="2">{{scope.row.name}}
                                                        </com-ellipsis>
                                                    </div>
                                                    <div style="flex-grow: 0;">
                                                        <el-button @click="deleteGoods(scope.$index)" 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>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </template>
                        </el-form-item>
                        <el-form-item label="活动课程" prop="course_id">
                            <div style="display: inline-block;">
                                <div flex="cross:center">
                                    <el-button type="text" @click="showSelectCourseProp">选择课程</el-button>
                                    <el-dialog width="650" title="选择课程" :visible.sync="showSelectCourse":offset="380">
                                        <div class="input-item">
                                            <el-input @keyup.enter.native="search" size="small" placeholder="请输入课程名称" v-model="keyword" clearable @clear="search">
                                                <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                                            </el-input>
                                        </div>
                                        <el-table ref="multipleTable" :data="course_list" tooltip-effect="dark" style="width: 100%" @select="handleSelection" @select-all="handleSelectionAll" v-loading="listLoading">
                                            <el-table-column type="selection" width="55"> </el-table-column>
                                            <el-table-column max-width="50" property="id" label="课程ID">
                                                <template slot-scope="scope">
                                                    <div size="small">{{scope.row.id}}</div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="课程名称" prop="course_name" min-width="80" align="center">
                                                <template slot-scope="scope">
                                                    <div size="small" v-if="scope.row.logo" class="flex-y-center flex-x-center">
                                                        <com-image style="border-radius: 22px;" width='45px' height='45px' :src=scope.row.logo></com-image>
                                                        <span style="padding-left: 10px;">{{scope.row.course_name}}</span>
                                                    </div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column min-width="50" property="price" label="售价">
                                                <template slot-scope="scope">
                                                    <div size="small">{{scope.row.price}}</div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column min-width="50" property="cate_name" label="课程分类">
                                                <template slot-scope="scope">
                                                    <div size="small">{{scope.row.cate_name}}</div>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                        <div style="text-align: right;margin: 20px 0;">
                                            <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
                                        </div>
                                        
                                        <div style="margin-top: 20px" align="right">
                                            <el-button @click="cancelSelected">取消</el-button>
                                            <el-button type="primary" @click="yseCourseSelected">确定</el-button>
                                        </div>
                                        <el-button slot="reference">请选择课程</el-button>
                                    </el-dialog>
                                    <span style="margin-left: 15px;">已选择课程：{{activityCourse.length}} 个</span>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="courses">
                            <template>
                                <div style="max-height: 300px;overflow-y: auto">
                                    <el-table :data="activityCourse" :show-header="false" border>
                                        <el-table-column label="">
                                            <template slot-scope="scope">
                                                <div flex>
                                                    <div style="padding-right: 10px;flex-grow: 0">
                                                        <com-image mode="aspectFill" :src="scope.row.logo"></com-image>
                                                    </div>
                                                    <div style="flex-grow: 1;">
                                                        <com-ellipsis :line="2">{{scope.row.course_name}}
                                                        </com-ellipsis>
                                                    </div>
                                                    <div style="flex-grow: 0;">
                                                        <el-button @click="deleteCourse(scope.$index)" 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>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </template>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <el-button class="button-item" style="margin-bottom: 15px;" type="primary" @click="submitForm('ruleForm')" size="small">保存
        </el-button>
    </el-card>
</div>
<script src="/resources/js/Sortable.min.js"></script>
<script src="/resources/unpkg/vuedraggable@2.18.1/dist/vuedraggable.umd.min.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                form: {},
                cardLoading: false,
                btnLoading: false,
                listLoading: false,
                formLoading: false,
                // 选择课程中的课程列表数据
                course_list: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                goods: [],
                ruleForm: {
                    banners: [],
                    course_id: [],
                    logo: '',
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入课程名称',
                        trigger: 'change'
                    }, ],
                    select_number: [{
                        required: true,
                        message: '请填写课程任选数量',
                        trigger: 'change'
                    }, ],
                    // banners: [{
                    //     required: true,
                    //     message: '请上传轮播图',
                    //     trigger: 'change'
                    // }, ],
                    // goods: [{
                    //     required: true,
                    //     message: '请选择关联商品',
                    //     trigger: 'change'
                    // }],
                    course_id: [{
                        required: true,
                        message: '请选择活动课程',
                        trigger: 'change'
                    }]
                },

                page: 1,
                pageCount: 0,
                keyword: '',
                selectedCourseNumber: 0,
                // 弹窗弹出时的课程id
                old_course_id: [],
                showSelectCourse: false, //选择课程弹框
                shortActivityCourse: [], //暂存活动选中的课程
                activityCourse: [], //活动保存的课程
            };
        },
        mounted() {
            this.getCourseList();
            this.loadData();
        },
        methods: {
            // 关闭弹出层
            pclose() {
                this.$refs['popover'].doClose();
            },
            // 选择课程弹出框弹出时的回调
            popoverShow() {
                // console.log('show ... ');
                this.old_course_id = this.ruleForm.course_id;
            },
            search() {
                this.page = 1;
                this.getCourseList();
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getCourseList();
            },
            loadData() {
                var params = {};
                var id = getQuery('id');
                if (id) {
                    params = {
                        r: 'course/activity/edit',
                        id: id,
                    };
                } else {
                    params = {
                        r: 'course/activity/edit',
                    };
                }
                var self = this;
                request({
                    params: params,
                    method: 'get'
                }).then(e => {
                    console.log(e)
                    this.cardLoading = false;
                    if (id) {
                        if(e.data.data.activity_info!=''){
                            self.ruleForm = e.data.data.activity_info;
                            self.goods = e.data.data.goods;
                        }

                        self.activityCourse = e.data.data.activity_info.selected_course_info;
                        self.selectedCourseNumber = self.ruleForm.course_id.length;
                    }

                }).catch(e => {
                    console.log(e);
                });
            },
            // 课程弹框
            showSelectCourseProp(){
                this.showSelectCourse = true;
                // this.page = 1;
                this.getCourseList();
            },
            // 获取课程列表
            getCourseList() {
                this.listLoading = true;
                var self = this;
                self.shortActivityCourse = [];
                request({
                    params: {
                        r: 'course/activity/course-list',
                        page: self.page,
                        course_name: self.keyword
                    },
                    method: 'get'
                }).then(e => {
                    self.listLoading = false;
                    if (0 == e.data.code) {
                        self.course_list = e.data.data.list;
                        self.pageCount = e.data.data.page_count;
                        var checkArr = [];
                        e.data.data.list.forEach((item) => {
                            var index = self.ruleForm.course_id.indexOf(item.id);
                            if (index != -1) {
                                checkArr.push(item);
                            }
                        });
                        // self.$nextTick(() => {
                        //     if (checkArr.length) {
                        //         checkArr.forEach((item) => {
                        //             self.$refs.multipleTable.toggleRowSelection(item);
                        //             self.shortActivityCourse.push(item);
                        //         });
                        //     }
                        // })
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    self.$message.error('网络错误');
                });
            },
            // 课程选中(单个选中)
            handleSelection(selection, val) {
                this.shortActivityCourse = selection;
            },
            // 课程选中（全选）
            handleSelectionAll(selection) {
                this.shortActivityCourse = selection;
            },
            // 取消选择课程
            cancelSelected() {
                this.showSelectCourse = false;
            },
            // 确定添加课程
            yseCourseSelected(){
                this.showSelectCourse = false;
                console.info(this.course_list);
                this.course_list.forEach(v => { //删除这一页选中的数据
                    let index = this.activityCourse.findIndex(vv => vv.id == v.id);
                    if(index != -1){
                        this.activityCourse.splice(index,1);
                    }
                })
                console.info(this.shortActivityCourse);
                this.activityCourse.push(...this.shortActivityCourse);
                this.ruleForm.course_id = [];
                this.activityCourse.forEach(v => {
                    this.ruleForm.course_id.push(v.id);
                });
            },
            deleteCourse(index){
                // console.info(this.ruleForm.course_id);
                // console.info(this.activityCourse);
                this.activityCourse.splice(index,1);
                this.ruleForm.course_id.splice(index,1);

            },
            submitForm(formName) {
                let self = this;
                this.$refs[formName].validate((valid, obj) => {
                    if (valid) {
                        if (!self.ruleForm.banners.length) {
                            self.$message.error('请上传轮播图');
                            return false;
                        }
                        if (!self.ruleForm.goods_id) {
                            self.$message.error('请选择关联商品');
                            return false;
                        }
                        // self.formLoading = true;
                        var params = {};
                        var id = getQuery('id');
                        if (id) {
                            params = {
                                r: 'course/activity/edit',
                            };
                        } else {
                            params = {
                                r: 'course/activity/edit',
                            };
                        }
                        request({
                            params: params,
                            method: 'post',
                            data: self.ruleForm
                        }).then(e => {
                            self.formLoading = false;
                            if (e.data.code == 0) {
                                this.$message({
                                    message: e.data.msg,
                                    type: 'success'
                                });
                                setTimeout(function() {
                                    navigateTo({ r: 'course/activity/index' })
                                }, 1000);
                            } else {
                                self.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            self.$message.error(e.data.msg);
                            self.btnLoading = false;
                        });
                    } else {
                        var msg = '';
                        for (let index in obj) {
                            msg = msg + '*' + obj[index][0].message + '　';
                        }
                        this.$message({
                            message: msg,
                            type: 'error'
                        });
                        return false;
                    }
                });
            },
            goodsSelect(list) {
                if (this.goods.length > 0) {
                    this.$message.error('只能选择一个商品');
                    return null;
                }
                this.ruleForm.goods_id = list.id;
                this.goods.push({
                    id: list.id,
                    name: list.name,
                    cover_pic: list.cover_pic,
                });

            },
            deleteGoods(index) {
                this.ruleForm.goods_id = null;
                this.goods.splice(index, 1);
            },
            updatePicUrl(e, params) {
                this.ruleForm.banners.push(e[0].url);
                this.$forceUpdate();
            },
            delPic(index) {
                this.ruleForm.banners.splice(index, 1)
            },
            // 轮播图
            picUrl(e) {
                if (e.length) {
                    let self = this;
                    e.forEach(function(item, index) {
                        if (self.ruleForm.banners.length >= 99) {
                            return;
                        }
                        self.ruleForm.banners.push(item.url);
                    });
                }
            },
            // 选中图片
            selectedImg(e) {
                console.log(e);
                this.ruleForm.logo = e[0].url;
            },
        }
    });
</script>

<style>
    .el-popover{
        padding: 30px;
    }
    .form-body {
        padding: 20px;
        background-color: #fff;
        margin-bottom: 20px;
        padding-right: 20%;
        min-width: 900px;
    }

    .form-body .el-form-item {
        padding-right: 25%;
        min-width: 850px;
    }

    .form-button {
        margin: 0;
    }

    .form-button .el-form-item__content {
        margin-left: 0 !important;
    }

    .button-item {
        padding: 9px 25px;
    }

    .check-group {
        font-size: 14px !important;
    }

    .check-group .el-col {
        display: flex;
    }

    .check-group .el-input {
        margin: 0 5px;
    }

    .check-group .el-col .el-checkbox {
        display: flex;
        align-items: center;
    }

    .check-group .el-col .el-input {
        width: 100px;
    }

    .check-group .el-col .el-input .el-input__inner {
        height: 30px;
        width: 100px;
    }

    .el-checkbox-group .el-col {
        margin-bottom: 10px;
    }


    .inp {
        width: 140px;
    }

    .inp .el-input__inner {
        border-radius: 4px 0 0 4px;
    }

    .inp2 {
        width: 60px;
    }

    .inp-text {
        background: #EFEFEF;
        border: 1px solid #E3E2E5;
        font-size: 15px;
        padding: 0px 15px;
        border-radius: 0 4px 4px 0;
        height: 32px;
    }


    /* flex公共样式 */
    .flex {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }

    .flex-x-center {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .flex-x-between {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: space-between;
        -webkit-justify-content: space-between;
        -ms-flex-pack: space-between;
        justify-content: space-between;
    }

    .flex-y-center {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
    }

    .flex-y-bottom {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: end;
        -webkit-align-items: flex-end;
        -ms-flex-align: end;
        -ms-grid-row-align: flex-end;
        align-items: flex-end;
    }

    .pic-url-remark {
        font-size: 13px;
        color: #c9c9c9;
        margin-bottom: 12px;
    }

    .add-image-btn {
        width: 100px;
        height: 100px;
        color: #419EFB;
        border: 1px solid #e2e2e2;
        cursor: pointer;
    }

    .del-btn{
        position: absolute;
        right: -14px;
        top: -14px;
    }
</style>