addShop.vue

<template>
    <div>
        <el-dialog
        :title="$t('button.addArea')"
        class="manage-dialog"
        :visible.sync="addDialogVisible"
        :close-on-click-modal="false"
        @open="dialogOpen(addForm)"
        @close="addDialogClose()">
            <el-form :model="addForm" status-icon :rules="rules" ref="addForm">
                <el-form-item :label="$t('table.areaName')" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                    <i class="error-tip">*</i>
                </el-form-item>
                <el-form-item :label="$t('table.type')" prop="type">
                    <el-select class="manage-sel" v-model="addForm.type" :placeholder="$t('pholder.type')" @change="typeChange(addForm.type)">
                        <el-option :label="$t('pholder.type1')" :value="1"></el-option>
                        <el-option :label="$t('pholder.type2')" :value="3"></el-option>
                        <el-option :label="$t('pholder.type3')" :value="2"></el-option>
                        <el-option :label="$t('pholder.type4')" :value="4"></el-option>
                    </el-select>
                    <i class="error-tip">*</i>
                </el-form-item>
                <el-form-item :label="$t('table.state')" prop="status">
                    <el-select class="manage-sel" v-model="addForm.status" :placeholder="$t('pholder.state')">
                        <el-option :label="$t('pholder.state1')" :value="1"></el-option>
                        <el-option :label="$t('pholder.state2')" :value="2"></el-option>
                    </el-select>
                    <i class="error-tip">*</i>
                </el-form-item>
                 <el-form-item :label="$t('table.shopNum')" prop="shopNo">
                    <el-autocomplete
                        class="unit-input"
                        v-model="addForm.shopNo"
                        :fetch-suggestions="querySearch"
                        :placeholder="$t('table.shopNum')"
                    ></el-autocomplete>
                </el-form-item>
                <el-form-item :label="$t('table.shopUnitId')" prop="locationNo">
                    <el-autocomplete
                        class="unit-input"
                        v-model="addForm.locationNo"
                        :fetch-suggestions="querySearchId"
                        :placeholder="$t('table.shopUnitId')"
                    ></el-autocomplete>
                </el-form-item> 
                <!-- <el-form-item :label="$t('table.shopNum')" prop="locationNo">
                    <el-input v-model="addForm.locationNo"></el-input>
                </el-form-item>  -->
                <el-form-item :label="$t('table.externalNum')" prop="externalId">
                    <el-input v-model="addForm.externalId"></el-input>
                </el-form-item>
                <!-- <el-form-item label="所属集团" prop="accountId">
                    <el-select class="manage-sel" v-model="addForm.accountId" filterable :placeholder="$t('pholder.select')" @change="changeAddAccount" :no-data-text="$t('pholder.nodata')">
                        <el-option v-for="item in accountList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item :label="$t('dialog.format')" prop="formatId">
                    <el-select class="manage-sel" v-model="addForm.formatId" filterable :placeholder="$t('pholder.format')" :no-data-text="$t('pholder.nodata')" @change="formatChange">
                        <el-option v-for="item in formatOpts" :key="item.id" :label="item.label" :value="item.id">
                        </el-option>
                    </el-select>
                    <!-- <i class="error-tip">*</i> -->
                </el-form-item>
                <el-form-item :label="$t('dialog.subFormat')" prop="subFormatId" v-show="addForm.formatId">
                    <el-select class="manage-sel" v-model="addForm.subFormatId" filterable :placeholder="$t('pholder.subFormat')" :no-data-text="$t('pholder.nodata')">
                        <el-option v-for="item in subFormatOpts" :key="item.id" :label="item.label" :value="item.id">
                        </el-option>
                    </el-select>
                    <!-- <i class="error-tip">*</i> -->
                </el-form-item>
                <el-form-item :label="$t('table.square')" prop="mallId">
                    <el-select class="manage-sel" v-model="addForm.mallId" filterable :placeholder="$t('pholder.select')" :no-data-text="$t('pholder.nodata')" @change="changeAddMall">
                        <el-option v-for="item in mallList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <i class="error-tip">*</i>
                </el-form-item>
                <el-form-item :label="$t('table.floor')" prop="floorId">
                    <el-select class="manage-sel" v-model="addForm.floorId" filterable :placeholder="$t('pholder.select')" :no-data-text="$t('pholder.nodata')" @change="getFloorImg">
                        <el-option v-for="item in floorList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <i class="error-tip">*</i>
                </el-form-item>
                <el-form-item :label="$t('dialog.coordinate')" v-if="isMl">
                    <el-col :span="7">
                        <el-form-item prop="x" class="spe-form-item">
                            <el-input v-model="addForm.x" :placeholder="$t('pholder.x')" class="gate-xy-inp"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                    <el-col :span="7">
                        <el-form-item prop="y" class="spe-form-item">
                            <el-input v-model="addForm.y" :placeholder="$t('pholder.y')" class="gate-xy-inp"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button class="bdmap-btn" icon="el-icon-location" @click="getXY()">{{$t('button.getXY')}}</el-button>
                    </el-col>
                    <i class="error-tip">*</i>
                </el-form-item>
                <el-form-item :label="$t('table.describe')">
                    <el-input type="textarea" v-model="addForm.intro"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false" class="dialog-btn">{{$t('dialog.cancel')}}</el-button>
                <el-button type="primary" @click="addSubmit('addForm')" class="dialog-btn dialog-confirm-btn">{{$t('dialog.confirm')}}</el-button>
            </div>
        </el-dialog>
        <!-- 楼层平面图 -->
        <floor-pos-dialog ref="posModel" @posXY="getPosXY"></floor-pos-dialog>
    </div>
</template>


<script>
import defaultImg from '@/assets/img/manage/defaultFloor.svg';
import floorPos from './addFloorpos';
export default {
    props: {
        unitList: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        zoneUnitList() {
            return this.unitList.map(item => {
                item.value = item.UnitNo
                return item
            })
        },
        zoneIdUnitList() {
            return this.unitList.map(item => {
                item.value = item.UnitID
                return item
            })
        },
    },
    data() {
        var checkX = (rule, value, callback) => {
            if(this.isMl) {
                if (!value && value != 0) {
                    return callback(new Error('X坐标不能为空'));
                }
                var valReg = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
                if (!valReg.test(value)) {
                    callback(new Error('请输入正确的格式'));
                } else {
                    callback();
                }
            } else {
                callback();
            }
		};
		var checkY = (rule, value, callback) => {
            if(this.isMl) {
                if (!value && value != 0) {
                    return callback(new Error('Y坐标不能为空'));
                }
                var valReg = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
                if (!valReg.test(value)) {
                    callback(new Error('请输入正确的格式'));
                } else {
                    callback();
                }
            } else {
                callback();
            }
		};
        return {
            addDialogVisible: false,
            addForm: {
                name: '',
                type: null,
                status: null,
                locationNo: '',
                shopNo: '',
                externalId: '',
                mallId: '',
                floorId: '',
                formatId: '',
                subFormatId: '',
                x: null,
                y: null,
                intro: ''
            },
            isMl: false,
            // XyActive: true,
            mallList: [],
            floorList: [],
            zoneTypeList: [],
            floorPlanUrl: window._vionConfig.imagesUrl + "/images/",
            // rules: {},
            rules: {
				name: [
					{ required: true, message: '请输入区域名称', trigger: 'blur' },
					// { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
				],
				type: [
					{ required: true, message: '请选择类型', trigger: 'change' },
				],
				status: [
					{ required: true, message: '请选择状态', trigger: 'change' },
				],
                mallId: [
                    { required: true, message: '请选择广场', trigger: 'change' },
                ],
				// accountId: [
				// 	{ required: true, message: '请选择阅读空间', trigger: 'blur' },
				// ],
				floorId: [
					{ required: true, message: '请选择楼层', trigger: 'change' },
                ],
                x: [
					// { required: true, message: '请输入x坐标', trigger: 'change' },
					{ validator: checkX, trigger: 'change' }
				],
				y: [
					// { required: true, message: '请输入y坐标', trigger: 'change' },
					{ validator: checkY, trigger: 'change' }
				],
            },
            floorImg: '',
            curMallId: null,
            isMl: false,
            formatOpts: [],
            subFormatOpts: [],
            filterSubFormat: [],
            // zoneUnitList: []
        }
    },
    components: {
        'floor-pos-dialog': floorPos
    },
    created() {
        // zoneTypeList
    },
    methods: {
        dialogInit(mall_id) {
            this.curMallId = mall_id;
            this.addDialogVisible = true;
            this.sessionFormat('format').then(resovleData => {
                this.formatOpts = resovleData.format;
                this.filterSubFormat = [];
                resovleData.subFormat.forEach(item => {
                    item.children.forEach(child => {
                        this.filterSubFormat.push(child);
                    })
                });
            })
        },
        dialogOpen(formDatas) {
			formDatas.accountId = this.$cookie.get('accountId');
			this.getMallList(formDatas.accountId);
		},
        getMallList(accountId) {
            this.mallList = [];
            this.floorList = [];
            this.addForm.mallId = '';
            this.addForm.floorId = '';
			this.$api.base.mall({
                accountId: accountId,
                // status: 1,
                status_arr: '1,3'
                // _t: Date.parse(new Date()) / 1000
			},null,true)
				.then((data) => {
                    let result = data.data;
                    result.data.forEach(item => {
                        if(item.id == this.curMallId) { 
                            this.addForm.mallId = item.id;
                        }
                    })
                    this.mallList = result.data;
					if (this.mallList.length > 0) {
                        if(!this.curMallId) {
                            this.addForm.mallId = this.mallList[0].id;
                        }
						this.getFloorList(this.addForm.mallId)
					}
				})
				.catch((error) => { })
		},
        getFloorList(mallId) {
            this.floorList = [];
            this.addForm.floorId = '';
			this.$api.base.floor({
                mallId: mallId,
                status: 1,
                // _t: Date.parse(new Date()) / 1000
			})
				.then((data) => {
					let result = data.data;
					this.floorList = result.data;
					if (this.floorList.length > 0) {
                        this.addForm.floorId = this.floorList[0].id;
                        this.getFloorImg();
					}
				})
				.catch((error) => { })
		},
        changeAddMall(val) {
			this.getFloorList(val);
        },
        getFloorImg() {
			// if (this.addForm.floorId) {
			// 	this.XyActive = false;
			// } else {
			// 	this.XyActive = true;
			// }
			this.$api.base.floor({
                id: this.addForm.floorId,
                // _t: Date.parse(new Date()) / 1000
			})
				.then(res => {
					if (res.data.data[0].floorPlan) {
						this.floorImg = this.floorPlanUrl + res.data.data[0].floorPlan;
					} else {
						this.floorImg = defaultImg
						this.$message({
                            showClose: true,
							message: this.$t('message.NoFloorImg'),
							type: 'warning'
						})
					}
                })
                .catch(err => {
					// console.log('add gate err:', err.message)
				})
        },
        typeChange(val) {
            this.isMl = val == 4 ? true : false;
        },
        formatChange(val) {
            this.addForm.subFormatId = '';
            this.subFormatOpts = [];
            this.filterSubFormat.forEach(item => {
                if(item.formatId === val) {
                    this.subFormatOpts.push(item)
                }
            })
        },
        getXY() {
            this.$refs.posModel.dialogInit(this.floorImg);
        },
        getPosXY(XY) {
            this.addForm.x = XY.x;
			this.addForm.y = XY.y;
        },
        querySearch(queryString, cb) {
            var restaurants = this.zoneUnitList;
            var results = queryString ? restaurants.filter(this.createFilter(queryString, 'UnitNo')) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        querySearchId(queryString, cb) {
            var restaurants = this.zoneIdUnitList;
            var results = queryString ? restaurants.filter(this.createFilter(queryString, 'UnitID')) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString, key) {
            return (restaurant) => {
                return (restaurant[key].toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        addSubmit(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.addForm.accountId = this.$cookie.get('accountId');
					this.addForm.createUser = this.$cookie.get('userId');
                    this.addForm.modifyUser = this.$cookie.get('userId');
                    // return
                    this.$api.management.addZone(this.addForm)
						.then((data) => {
                            this.addDialogVisible = false;
                            this.sessionFormat('filterFormat',true).then()
							this.$parent.getTableData();
						})
						.catch((error) => {
                            // this.$message.error(error.message)
                        })
				} else {
					return false;
				}
			});
		},
        addDialogClose() {
			this.$refs.addForm.resetFields();
		},
    }
}
</script>

<style scoped>
    .bdmap-btn {
        margin-left: 17px;
        padding: 0 8px;
        height: 28px;
        border-radius: 2px;
        font-size: 13px;
    }
    .unit-input {
        width: 100%;
    }
    @media only screen and (max-width: 1680px) {
        .bdmap-btn {
            padding: 0 10px;
            height: 30px;
        }
    }
    @media only screen and (max-width: 1440px) {
        .bdmap-btn {
            padding: 0 10px;
            height: 20px;
        }
    }
    @media only screen and (max-width: 1366px) {
        .bdmap-btn {
            padding: 0 9px;
            height: 20px;
        }
    }
    @media only screen and (max-width: 1280px) {
        .bdmap-btn {
            padding: 0 9px;
            height: 20px;
        }
    }
</style>