产品编辑页

src/main/java/com/izouma/jiashanxia/converter/EventConverter.java

@@ -0,0 +1,24 @@
+package com.izouma.jiashanxia.converter;
+
+import com.alibaba.fastjson.JSON;
+import com.izouma.jiashanxia.dto.Event;
+import org.apache.commons.lang3.StringUtils;
+
+import javax.persistence.AttributeConverter;
+
+public class EventConverter implements AttributeConverter<Event, String> {
+    @Override
+    public String convertToDatabaseColumn(Event event) {
+        if (event != null  )
+            return JSON.toJSONString(event);
+        return null;
+    }
+
+    @Override
+    public Event convertToEntityAttribute(String s) {
+        if (StringUtils.isNotEmpty(s)) {
+            return JSON.parseObject(s, Event.class);
+        }
+        return null;
+    }
+}

src/main/java/com/izouma/jiashanxia/domain/Package.java

@@ -1,7 +1,9 @@
 package com.izouma.jiashanxia.domain;
 
+import com.izouma.jiashanxia.converter.EventConverter;
 import com.izouma.jiashanxia.converter.LongArrayConverter;
 import com.izouma.jiashanxia.converter.StringArrayConverter;
+import com.izouma.jiashanxia.dto.Event;
 import io.swagger.annotations.ApiModel;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.AllArgsConstructor;
@@ -119,6 +121,10 @@ public class Package extends BaseEntity {
 //    private String eventAddress;
 //    private String eventObject;
 
+    @ApiModelProperty(value = "活动信息")
+    @Convert(converter = EventConverter.class)
+    private Event event;
+
     @Column(columnDefinition = "TEXT")
     @ApiModelProperty(value = "费用说明")
     private String expenseDescription;

src/main/java/com/izouma/jiashanxia/dto/Event.java

@@ -0,0 +1,21 @@
+package com.izouma.jiashanxia.dto;
+
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@Builder
+@AllArgsConstructor
+@NoArgsConstructor
+@ApiModel("活动信息")
+public class Event {
+    private String date;
+    private String time;
+    private String address;
+    @ApiModelProperty(value = "活动对象")
+    private String crowd;
+}

src/main/vue/src/components/PackageEdit.vue

@@ -236,16 +236,28 @@
                 <el-checkbox v-model="formData.IDNo">身份证</el-checkbox>
             </el-form-item>
             <el-form-item label="活动日期">
-                <el-input class="select-width" placeholder="请输入活动日期，例：2021年2月24日"></el-input>
+                <el-input
+                    v-model="event.date"
+                    class="select-width"
+                    placeholder="请输入活动日期，例：2021年2月24日"
+                ></el-input>
             </el-form-item>
             <el-form-item label="活动时间">
-                <el-input class="select-width" placeholder="请输入活动日期，例：09:00-17:30"></el-input>
+                <el-input
+                    v-model="event.time"
+                    class="select-width"
+                    placeholder="请输入活动日期，例：09:00-17:30"
+                ></el-input>
             </el-form-item>
             <el-form-item label="活动地点">
-                <el-input class="select-width" placeholder="请输入详细的活动地址"></el-input>
+                <el-input v-model="event.address" class="select-width" placeholder="请输入详细的活动地址"></el-input>
             </el-form-item>
             <el-form-item label="活动对象">
-                <el-input class="select-width" placeholder="请输入活动对象，例：3-10岁亲子家庭"></el-input>
+                <el-input
+                    v-model="event.crowd"
+                    class="select-width"
+                    placeholder="请输入活动对象，例：3-10岁亲子家庭"
+                ></el-input>
             </el-form-item>
             <el-form-item label="费用说明" prop="expenseDescription" style="width: 500px">
                 <simple-rich-text v-model="formData.expenseDescription" class="select-width"></simple-rich-text>
@@ -300,6 +312,10 @@ export default {
                 .get('package/get/' + this.$route.query.id)
                 .then(res => {
                     this.formData = res;
+                    console.log(res.event);
+                    if (typeof res.event !== 'undefined') {
+                        this.event = res.event;
+                    }
                 })
                 .catch(e => {
                     console.log(e);
@@ -375,6 +391,12 @@ export default {
                     '<p>12、报名则代表同意活动中的照片可用于天游佳处相关宣传；</p>' +
                     '<p>13、报名参加活动即视为已阅读同意以上条款。</p>'
             },
+            event: {
+                date: '',
+                time: '',
+                address: '',
+                crowd: ''
+            },
             rules: {
                 attractionsId: [
                     {
@@ -456,6 +478,7 @@ export default {
         },
         submit() {
             let data = { ...this.formData };
+            data.event = this.event;
             this.saving = true;
             this.$http
                 .post('/package/save', data, { body: 'json' })

src/main/vue/src/components/PackageEdit2.vue

@@ -9,239 +9,9 @@
             size="small"
             style="max-width: 800px;"
         >
-            <el-form-item prop="attractionsId" label="景区">
-                <el-select
-                    v-model="formData.attractionsId"
-                    clearable
-                    filterable
-                    placeholder="请选择景区"
-                    class="select-width"
-                >
-                    <el-option
-                        v-for="item in attractionsOptions"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                    >
-                    </el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item prop="name" label="套餐标题">
-                <el-input v-model="formData.name" class="input-title"></el-input>
-            </el-form-item>
-            <el-form-item prop="title" label="副标题">
-                <el-input v-model="formData.title" class="input-title"></el-input>
-            </el-form-item>
-            <el-form-item prop="img" label="图">
-                <multi-upload v-model="formData.img"></multi-upload>
-            </el-form-item>
-            <el-form-item prop="tag" label="套餐标签">
-                <el-tag
-                    :key="i"
-                    v-for="(tag, i) in formData.tag"
-                    closable
-                    :disable-transitions="false"
-                    @close="removeTag(i)"
-                    size="medium"
-                >
-                    {{ tag }}
-                </el-tag>
-                <el-input
-                    class="input-new-tag"
-                    v-if="inputVisible"
-                    v-model="inputValue"
-                    ref="saveTagInput"
-                    size="small"
-                    @keyup.enter.native="handleInputConfirm"
-                    @blur="handleInputConfirm"
-                >
-                </el-input>
-                <el-button v-else class="button-new-tag" size="small" @click="showInput">新建标签</el-button>
-            </el-form-item>
-            <el-form-item prop="repeatedly" label="使用次数">
-                <el-radio-group v-model="formData.repeatedly">
-                    <el-radio :label="false">单次使用</el-radio>
-                    <el-radio :label="true">多次使用</el-radio>
-                </el-radio-group>
-            </el-form-item>
-            <el-form-item prop="originalPrice" label="原价" v-if="stockList.length <= 0">
-                <el-input-number type="number" v-model="formData.originalPrice" class="select-width"></el-input-number>
-            </el-form-item>
-            <el-form-item prop="amount" label="金额" v-if="stockList.length <= 0">
-                <el-input-number type="number" v-model="formData.amount" class="select-width"></el-input-number>
-            </el-form-item>
-            <el-form-item label="规格">
-                <el-button @click="addStockForm">添加规格</el-button>
-                <div v-for="(item, index) in stockList" :key="index">
-                    <div class="spec" v-if="!item.del">
-                        <el-row>
-                            <el-col :span="8">
-                                <span>规格</span>
-                                <el-input placeholder="规格" class="input" v-model="item.specification"></el-input>
-                            </el-col>
-                            <el-col :span="8">
-                                <span>日期</span>
-                                <el-date-picker
-                                    type="date"
-                                    value-format="yyyy-MM-dd"
-                                    placeholder="选择日期"
-                                    class="input"
-                                    v-model="item.day"
-                                >
-                                </el-date-picker>
-                            </el-col>
-                            <el-col :span="8">
-                                <span>库存</span>
-                                <el-input-number
-                                    type="number"
-                                    :min="0"
-                                    class="input"
-                                    v-model="item.inventory"
-                                ></el-input-number>
-                            </el-col>
-                        </el-row>
-                        <el-row>
-                            <el-col :span="8">
-                                <span>原价</span>
-                                <el-input-number
-                                    type="number"
-                                    :min="0"
-                                    class="input"
-                                    v-model="item.originalPrice"
-                                ></el-input-number>
-                            </el-col>
-                            <el-col :span="8">
-                                <span>价格</span>
-                                <el-input-number
-                                    type="number"
-                                    :min="0"
-                                    class="input"
-                                    v-model="item.price"
-                                ></el-input-number>
-                            </el-col>
-                            <el-col :span="8">
-                                <el-button
-                                    class="del"
-                                    type="danger"
-                                    size="small"
-                                    icon="el-icon-delete"
-                                    @click="deleteStockForm(item, index)"
-                                ></el-button>
-                            </el-col>
-                        </el-row>
-                    </div>
-                </div>
-            </el-form-item>
-            <el-form-item prop="categoryId" label="产品类型">
-                <el-select v-model="formData.categoryId" clearable filterable placeholder="请选择" class="select-width">
-                    <el-option
-                        v-for="item in categoryOptions"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                    >
-                    </el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item prop="separateDistribution" label="分销模式">
-                <el-switch v-model="formData.separateDistribution"> </el-switch>
-            </el-form-item>
-            <el-form-item prop="personalRatio0" label="直推比例" v-if="formData.separateDistribution">
-                <el-input-number
-                    type="number"
-                    v-model="formData.personalRatio0"
-                    class="select-width"
-                    :max="1"
-                    :min="0"
-                    :step="0.01"
-                ></el-input-number>
-            </el-form-item>
-            <el-form-item prop="personalRatio1" label="二级比例" v-if="formData.separateDistribution">
-                <el-input-number
-                    type="number"
-                    v-model="formData.personalRatio1"
-                    class="select-width"
-                    :max="1"
-                    :min="0"
-                    :step="0.01"
-                ></el-input-number>
-            </el-form-item>
-            <el-form-item prop="personalRatio2" label="三级比例" v-if="formData.separateDistribution">
-                <el-input-number
-                    type="number"
-                    v-model="formData.personalRatio2"
-                    class="select-width"
-                    :max="1"
-                    :min="0"
-                    :step="0.01"
-                ></el-input-number>
-            </el-form-item>
-            <!-- <el-form-item prop="makerRatio" label="创客比例" v-if="formData.separateDistribution">
-                <el-input-number
-                    type="number"
-                    v-model="formData.makerRatio"
-                    class="select-width"
-                    :max="1"
-                    :min="0"
-                    :step="0.01"
-                ></el-input-number>
-            </el-form-item>
-            <el-form-item prop="generalRatio" label="108将比例" v-if="formData.separateDistribution">
-                <el-input-number
-                    type="number"
-                    v-model="formData.generalRatio"
-                    class="select-width"
-                    :min="0"
-                    :max="1"
-                    :step="0.01"
-                ></el-input-number>
-            </el-form-item> -->
-            <el-form-item label="核销赠送优惠券" prop="couponId">
-                <el-select multiple v-model="formData.couponId" class="select-width">
-                    <el-option v-for="item in coupons" :key="item.id" :label="item.name" :value="item.id">
-                        <span style="float: left">{{ item.name }}</span>
-                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.attractionsName }}</span>
-                    </el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="分享海报" prop="poster">
-                <!-- <poster-upload
-                    v-model="formData.poster"
-                    :width="80"
-                    :height="160"
-                    :ratio="[1, 2]"
-                    :imgWidth="224"
-                    key="22"
-                    name="poster"
-                >
-                    <div slot="tips" class="tips">尺寸120x240px</div>
-                </poster-upload> -->
-                <crop-upload v-model="formData.poster"></crop-upload>
-            </el-form-item>
-            <el-form-item label="分享图" prop="smallPoster">
-                <multi-upload v-model="formData.smallPoster"></multi-upload>
-            </el-form-item>
             <el-form-item prop="detail" label="详情">
                 <rich-text v-model="formData.detail"></rich-text>
             </el-form-item>
-            <el-form-item prop="detail" label="注意事项">
-                <rich-text></rich-text>
-            </el-form-item>
-            <el-form-item label="活动日期">
-                <el-input></el-input>
-            </el-form-item>
-            <el-form-item label="活动时间">
-                <el-input></el-input>
-            </el-form-item>
-            <el-form-item label="活动地点">
-                <el-input></el-input>
-            </el-form-item>
-            <el-form-item label="活动对象">
-                <el-input></el-input>
-            </el-form-item>
-            <el-form-item label="费用说明">
-                <rich-text></rich-text>
-            </el-form-item>
             <el-form-item prop="content" label="流程" style="width:800px">
                 <div>
                     <el-form

src/main/vue/src/components/PackageEdit3.vue

@@ -0,0 +1,371 @@
+<template>
+    <div class="edit-view">
+        <el-form
+            :model="formData"
+            :rules="rules"
+            ref="form"
+            label-width="90px"
+            label-position="right"
+            size="small"
+            style="max-width: 800px;"
+        >
+            <el-form-item label="分享海报" prop="poster">
+                <!-- <poster-upload
+                    v-model="formData.poster"
+                    :width="80"
+                    :height="160"
+                    :ratio="[1, 2]"
+                    :imgWidth="224"
+                    key="22"
+                    name="poster"
+                >
+                    <div slot="tips" class="tips">尺寸120x240px</div>
+                </poster-upload> -->
+                <crop-upload v-model="formData.poster"></crop-upload>
+            </el-form-item>
+            <el-form-item label="分享图" prop="smallPoster">
+                <multi-upload v-model="formData.smallPoster"></multi-upload>
+            </el-form-item>
+            <el-form-item prop="share" label="文案" style="width: 600px;">
+                <simple-rich-text v-model="formData.share" class="select-width"></simple-rich-text>
+            </el-form-item>
+            <el-form-item>
+                <el-button @click="onSave" :loading="saving" type="primary" v-if="$route.query.id">保存</el-button>
+                <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除 </el-button>
+                <el-button @click="$router.go(-1)">取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+<script>
+export default {
+    name: 'PackageEdit',
+    created() {
+        if (this.$route.query.id) {
+            this.packageId = this.$route.query.id;
+            this.$http
+                .get('package/get/' + this.$route.query.id)
+                .then(res => {
+                    this.formData = res;
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.$message.error(e.error);
+                });
+            this.$http.get('/stock/byPackageId', { packageId: this.$route.query.id }).then(res => {
+                this.stockList = res;
+            });
+        }
+        this.$http
+            .post('/attractions/all', { size: 1000, query: { del: false, brand: false } }, { body: 'json' })
+            .then(res => {
+                if (res.content.length > 0) {
+                    res.content.forEach(item => {
+                        this.attractionsOptions.push({
+                            label: item.name,
+                            value: item.id
+                        });
+                    });
+                }
+            })
+            .catch(e => {
+                console.log(e);
+                this.$message.error(e.error);
+            });
+        this.$http
+            .post('/category/getChildren', { id: 731 })
+            .then(res => {
+                if (res.length > 0) {
+                    res.forEach(item => {
+                        this.categoryOptions.push({
+                            label: item.name,
+                            value: item.id
+                        });
+                    });
+                }
+            })
+            .catch(e => {
+                console.log(e);
+                this.$message.error(e.error);
+            });
+        this.$http
+            .post('/coupon/all', { size: 1000, query: { del: false } }, { body: 'json' })
+            .then(res => {
+                this.coupons = res.content;
+            })
+            .catch(e => {
+                console.log(e);
+                this.$message.error(e.error);
+            });
+    },
+    data() {
+        return {
+            saving: false,
+            formData: {
+                img: [],
+                tag: [],
+                repeatedly: false,
+                couponId: []
+            },
+            rules: {
+                attractionsId: [
+                    {
+                        required: true,
+                        message: '请选择景区',
+                        trigger: 'blur'
+                    }
+                ],
+                name: [
+                    {
+                        required: true,
+                        message: '请输入套餐名称',
+                        trigger: 'blur'
+                    }
+                ],
+                // amount: [
+                //     {
+                //         required: true,
+                //         message: '请输入金额',
+                //         trigger: 'blur'
+                //     }
+                // ],
+                categoryId: [
+                    {
+                        required: true,
+                        message: '请选择类型',
+                        trigger: 'blur'
+                    }
+                ]
+            },
+            typeOptions: [
+                { label: '团队', value: 'TEAM' },
+                { label: '个人', value: 'PERSONAL' }
+            ],
+            inputVisible: false,
+            inputValue: '',
+            attractionsOptions: [],
+            categoryOptions: [],
+            stockList: [],
+            packageId: 0,
+            coupons: [],
+            list: [],
+            subrule: {}
+        };
+    },
+    computed: {
+        saveOtherJson() {
+            const stockList = [...this.stockList]
+                .filter(item => {
+                    return !!item.inventory > 0 || item.price > 0 || !!item.specification;
+                })
+                .map(item => {
+                    return {
+                        ...item,
+                        packageId: this.packageId
+                    };
+                });
+            return JSON.stringify(stockList);
+        }
+    },
+    methods: {
+        onSave() {
+            // this.$refs.form.validate(valid => {
+            //     if (valid) {
+            //         this.submit();
+            //     } else {
+            //         return false;
+            //     }
+            // });
+            Promise.all(this.$refs.subform.map(i => i.validate())).then(() => {
+                this.$refs.form.validate(valid => {
+                    if (valid) {
+                        this.submit();
+                    } else {
+                        return false;
+                    }
+                });
+            });
+        },
+        submit() {
+            let data = { ...this.formData };
+            this.saving = true;
+            this.$http
+                .post('/package/save', data, { body: 'json' })
+                .then(res => {
+                    this.saving = false;
+                    // this.$message.success('成功');
+                    this.packageId = res.id;
+                    this.$nextTick(() => {
+                        this.$http.post('/stock/batchSave', {
+                            stocks: this.saveOtherJson
+                        });
+                        this.$message.success('成功');
+                        this.$router.go(-1);
+                    });
+                    this.$emit('next', 'second');
+                    this.$router.replace({
+                        name: 'PackageEdit',
+                        query: {
+                            id: res.id,
+                            attractionsId: res.attractionsId
+                        }
+                    });
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.saving = false;
+                    this.$message.error(e.error);
+                });
+        },
+        onDelete() {
+            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
+                .then(() => {
+                    return this.$http.post(`/package/del/${this.formData.id}`);
+                })
+                .then(() => {
+                    this.$message.success('删除成功');
+                    this.$router.go(-1);
+                })
+                .catch(e => {
+                    if (e !== 'cancel') {
+                        console.log(e);
+                        this.$message.error(e.error);
+                    }
+                });
+        },
+        removeTag(i) {
+            this.formData.tag.splice(i, 1);
+        },
+        showInput() {
+            this.inputVisible = true;
+            this.$nextTick(_ => {
+                this.$refs.saveTagInput.$refs.input.focus();
+            });
+        },
+        handleInputConfirm() {
+            let inputValue = this.inputValue;
+            if (inputValue) {
+                this.formData.tag.push(inputValue);
+            }
+            this.inputVisible = false;
+            this.inputValue = '';
+        },
+        addStockForm() {
+            this.stockList.push({
+                specification: '',
+                day: '',
+                price: 0,
+                inventory: 0
+            });
+        },
+        deleteStockForm(info, index) {
+            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'warning' })
+                .then(() => {
+                    const stockList = [...this.stockList];
+                    if (info.id) {
+                        info.del = true;
+                        stockList[index] = info;
+                    } else {
+                        stockList.splice(index, 1);
+                    }
+                    this.stockList = stockList;
+                    this.$message.success('删除成功');
+                })
+                .catch(e => {});
+        },
+        delItem(i) {
+            this.list.splice(i, 1);
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.el-tag + .el-tag {
+    margin-left: 10px;
+}
+.button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+.input-new-tag {
+    width: 100px;
+    margin-left: 10px;
+    vertical-align: bottom;
+}
+.input-title {
+    width: 350px;
+}
+.select-width {
+    width: 350px;
+}
+.spec {
+    margin-top: 15px;
+    background-color: #f7f7f7;
+    padding: 20px 20px 15px 20px;
+    span {
+        font-size: 13px;
+        color: #565b66;
+        line-height: 16px;
+        padding: 0 15px 0 15px;
+    }
+    .input {
+        width: 180px;
+        margin: 0 10px 5px 0;
+    }
+    .el-button {
+        height: 34px;
+        border-width: 0;
+        margin-top: 23px;
+
+        &.del {
+            width: 34px;
+            padding: 9px 5px;
+            font-size: 16px;
+        }
+    }
+}
+.stock {
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+    .name {
+        width: 200px;
+    }
+    .name2 {
+        width: 180px;
+    }
+
+    .value {
+        width: 180px;
+    }
+
+    span {
+        font-size: 12px;
+        color: #565b66;
+        line-height: 16px;
+        padding: 0 20px 0 20px;
+    }
+
+    .el-button {
+        height: 36px;
+        border-width: 0;
+
+        &.del {
+            width: 36px;
+            padding: 9px 5px;
+            font-size: 16px;
+            margin-left: 10px;
+        }
+    }
+}
+.subform {
+    padding: 16px 16px 1px 16px;
+    background: #f2f3f5;
+    border-radius: 8px;
+    border: 1px solid #eee;
+    margin-bottom: 20px;
+}
+</style>

src/main/vue/src/router.js

@@ -235,7 +235,7 @@ const router = new Router({
                     name: 'PackageEdit',
                     component: () => import(/* webpackChunkName: "packageEdit" */ '@/views/PackageEdit.vue'),
                     meta: {
-                        title: '套餐信息编辑'
+                        title: '产品信息编辑'
                     }
                 },
                 {
@@ -243,7 +243,7 @@ const router = new Router({
                     name: 'PackageList',
                     component: () => import(/* webpackChunkName: "packageList" */ '@/views/PackageList.vue'),
                     meta: {
-                        title: '套餐信息'
+                        title: '产品信息'
                     }
                 },
                 {

src/main/vue/src/views/PackageEdit.vue

@@ -1,9 +1,15 @@
 <template>
     <div class="edit-view">
         <el-tabs type="border-card" class="my-tabs" v-model="active">
-            <el-tab-pane label="套餐信息" name="first">
+            <el-tab-pane label="基本信息" name="first">
                 <PackageEdit @next="goNext" />
             </el-tab-pane>
+            <el-tab-pane label="详细信息" name="second">
+                <PackageEdit2 @next="goNext" />
+            </el-tab-pane>
+            <el-tab-pane label="分享信息" name="third">
+                <PackageEdit3 />
+            </el-tab-pane>
             <!-- <el-tab-pane label="套餐内容" :disabled="!id" name="second">
                 <PackageGoodsTable ref="setGoodsList" />
             </el-tab-pane> -->
@@ -12,6 +18,8 @@
 </template>
 <script>
 import PackageEdit from '../components/PackageEdit';
+import PackageEdit2 from '../components/PackageEdit2';
+import PackageEdit3 from '../components/PackageEdit3';
 // import PackageGoodsTable from '../components/PackageGoodsTable';
 
 export default {
@@ -64,14 +72,16 @@ export default {
     },
     components: {
         // PackageGoodsTable,
-        PackageEdit
+        PackageEdit,
+        PackageEdit2,
+        PackageEdit3
     },
     watch: {
-        id() {
-            if (this.id) {
-                this.$refs.setGoodsList.getList(this.id);
-            }
-        },
+        // id() {
+        //     if (this.id) {
+        //         this.$refs.setGoodsList.getList(this.id);
+        //     }
+        // },
         $route() {
             if (this.$route.query.id) {
                 this.id = this.$route.query.id;