qimall/addons/Store/backend/views/store-community/add.php

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" class="box-card" body-style="background-color: #f3f3f3;padding: 10px 0 0;" v-loading="cardLoading" v-loading="cardLoading">
        <div slot="header">
            <div flex="cross:center box:first">
                <div>社区添加</div>
            </div>
        </div>
        <div class="form-body">
            <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="120px">
                <el-form-item label="所在区域：" prop="province_id">
                    <div class="flex flex-y-center">
                        <el-select v-model="provinceInfo" value-key='id' placeholder="请选择省" @change="regionChange($event, 1)">
                            <el-option v-for="item in provinces" :key="item.id" :label="item.name" :value="item"></el-option>
                        </el-select>
                        <el-select v-model="cityInfo" value-key='id' placeholder="请选择市" @change="regionChange($event, 2)">
                            <el-option v-for="item in citys" :key="item.id" :label="item.name" :value="item"></el-option>
                        </el-select>
                        <el-select v-model="districtInfo" value-key='id' placeholder="请选择区" @change='regionChange($event, 3)'>
                            <el-option v-for="item in districts" :key="item.id" :label="item.name" :value="item"></el-option>
                        </el-select>
                        <el-select v-model="streetInfo" value-key='id' placeholder="请选择街道">
                            <el-option v-for="item in streets" :key="item.id" :label="item.name" :value="item"></el-option>
                        </el-select>
                    </div>
                </el-form-item>
                <el-card class="edit-card" shadow="never">
                    <el-form-item label="社区:" label-width="60px">
                        <div class="community_list">
                            <div
                                    class="community_add"
                                    v-for="(community, index) in communities"
                                    :key="index"
                            >
                                <el-input
                                        size="small"
                                        size="small"
                                        v-model="community.name"
                                        placeholder="社区名称"
                                ></el-input>
                                <i
                                        :class="community.isNew ? 'el-icon-circle-plus-outline' : 'el-icon-remove-outline'"
                                        class="modify-list"
                                        @click="community.isNew ? addCommunity(index) : delCommunity(index)"
                                ></i>
                            </div>
                        </div>

                    </el-form-item>
                    <span style="padding-left: 15px;color: red;">注意：同一街道不可重复添加同名社区</span>
                </el-card>
            </el-form>
        </div>
        <div>
            <div flex="dir:center">
                <div>
                    <el-button class="button-item" style="margin-bottom: 15px;" type="primary" @click="submitForm('ruleForm')" size="small" :loading="btnLoading">保存
                    </el-button>
                </div>
            </div>
        </div>
    </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 {
                ruleForm: {
                },
                rules: {
                },
                communities: [{ name: '',isNew: true }],
                provinces: [],
                provinceInfo: {},
                citys: [],
                cityInfo: {},
                districts: [],
                districtInfo: {},
                streets: [],
                streetInfo: {},
                btnLoading: false,
                cardLoading: false,
                dialogLoading: false,
                input:''
            };
        },
        mounted: function() {
            this.loadData();
        },
        methods: {
            store(formName) {
                this.$refs[formName].validate((valid) => {
                    let self = this;
                    if (valid) {
                        self.btnLoading = true;
                        this.ruleForm.parent_id = this.parentIds[this.parentIds.length - 1];
                        request({
                            params: {
                                r: 'store/store-category/storage'
                            },
                            method: 'post',
                            data: {
                                form: self.ruleForm,
                            }
                        }).then(e => {
                            self.btnLoading = false;
                            if (e.data.code == 0) {
                                self.$message.success(e.data.msg);
                                navigateTo({
                                    r: 'store/store-category/index'
                                })
                            } else {
                                self.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            self.$message.error(e.data.msg);
                            self.btnLoading = false;
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            loadData() {
                let self = this;
                self.listLoading = true;
                request({
                    params: {
                        r: 'store/store-community/add',
                    },
                    method: 'get',
                }).then(e => {
                    self.listLoading = false;
                    if (e.data.code == 0) {
                        self.provinces = e.data.data.provinces;
                    }
                }).catch(e => {
                    console.log(e);
                    self.listLoading = false;
                    self.$message.error('网络错误');
                });
            },
            // 省市区三级联动
            regionChange(event, level) {
                let self = this;
                self.ruleForm.longitude = event.lng;
                self.ruleForm.latitude = event.lat;
                self.long_lat = event.lng + '-' + event.lat;
                request({
                    params: {
                        r: 'store/store/get-regions',
                        region_id: event.id,
                        level: level,
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        switch (level) {
                            case 1:
                                self.citys = e.data.data;
                                this.cityInfo = {}
                                this.districtInfo = {}
                                this.streetInfo = {}
                                this.communityInfo = {}
                                break;
                            case 2:
                                self.districts = e.data.data;
                                this.districtInfo = {}
                                this.streetInfo = {}
                                this.communityInfo = {}
                                break;
                            case 3:
                                self.streets = e.data.data;
                                this.streetInfo = {}
                                this.communityInfo = {}
                                break;
                        }
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                    self.$message.error('网络错误');
                    return false;
                });

            },
            //增加社区
            addCommunity(index) {
                // 添加新的社区
                this.communities[index].isNew = false;
                this.communities.splice(index + 1, 0, { isNew: true });
            },
            //删除社区
            delCommunity(index) {
                // 删除指定的社区
                if (this.communities.length > 1) {
                    this.communities.splice(index, 1);
                } else {
                    // Optionally handle the case where there is only one item left
                    console.warn('At least one community must remain.');
                }
            },
            submitForm(formName) {
                let self = this;
                console.log('表单信息为')
                console.log(self.communities)
                if (!self.provinceInfo || !self.cityInfo || !self.districtInfo || !self.streetInfo) {
                    self.$message.error('请选择完整信息');
                    return false;
                }
                console.log('社区信息为')
                console.log(self.communities)
                self.ruleForm.province_id = self.provinceInfo.id;
                self.ruleForm.city_id = self.cityInfo.id;
                self.ruleForm.district_id = self.districtInfo.id;
                self.ruleForm.street_id = self.streetInfo.id;
                self.ruleForm.community_list = self.communities;
                self.btnLoading = true;
                request({
                    params: {
                        r: 'store/store-community/add',
                    },
                    method: 'post',
                    data: self.ruleForm,
                }).then(e => {
                    self.btnLoading = false;
                    if (e.data.code == 0) {
                        //添加完成之后初始化
                        self.communities = [{ name: '',isNew: true }]
                        self.provinceInfo = {}
                        self.citys = []
                        self.cityInfo = {}
                        self.districts = []
                        self.districtInfo = {}
                        self.streets = []
                        self.streetInfo = {}
                        self.$message.success('保存成功');
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    self.btnLoading = false;
                    console.log(e);
                    self.$message.error('网络错误');
                    return false;
                });
            },
        }
    });
</script>

<style>
    .form-body {
        padding: 20px 0;
        background-color: #fff;
        margin-bottom: 20px;
        padding-right: 50%;
    }

    .form-button {
        margin: 0;
    }

    .el-form-item__content{margin-left:100px !important;}

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

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

    .radio-box div {
        margin-right: 20px;
    }

    .input-item {
        display: inline-block;
        width: 250px;
        margin: 0;
    }

    .input-item .el-input__inner {
        border-right: 0;
    }

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0 10px;
    }

    .input-item .el-input-group__append .el-button {
        padding: 15px;
    }

    .el-dialog-1 .el-dialog {
        min-width: 350px;
    }

    .dialog-cat-box {
        border: 1px solid #E3E3E3;
        height: 250px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        width: 100%;
        margin-right: 10px;
        overflow-y: auto;
    }

    .el-dialog__body {
        padding: 10px 20px;
    }

    .el-table td,
    .el-table th {
        padding: 5px 0;
    }

    .cat-edit-text {
        color: #409EFF;
        margin-left: 10px;
        cursor: pointer;
    }

    .com-gallery .com-gallery-item {
        margin-bottom: 0;
        margin-right: 0;
        cursor: pointer;
    }

    .show-example {
        cursor: pointer;
        color: #409EFF;
    }

    .text {
        cursor: pointer;
        color: #419EFB;
    }

    .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;
        top: -4%;
        right: -4%;
    }
    .el-select--small{width:23%}
    .community_add{display: flex;width:200px}
    .modify-list{font-size: 20px;display: flex;align-items: center;margin-left: 10px;}
    .el-card__body{padding-bottom: 25px;padding-top:25px}
</style>