eduerpos_ui_manage/src/components/page/admin/Demo.vue

<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
                <el-breadcrumb-item>图片上传</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="crop-demo">
                <el-input v-model="fileName" style="width:200px"></el-input>
                <div class="crop-demo-btn">选择文件
                    <input class="crop-input" type="file" name="image" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" @change="setImage"/>
                    
                </div>
                <div class="crop-demo-btn1">
                    <el-button @click="upload" :disabled="disabled">上传</el-button>
                </div>
            </div>
            <div class="el-upload__tip" slot="tip">只能上传excel文件，且不超过500kb</div>
        </div>
        <div class="container">
            <div class="linkage">
                <el-select v-model="sheng" @change="choseProvince" placeholder="省级地区">
                    <el-option v-for="item in province" :key="item.id" :label="item.value" :value="item.id"></el-option>
                </el-select>
                <el-select v-model="shi" @change="choseCity" placeholder="市级地区">
                    <el-option v-for="item in shi1" :key="item.id" :label="item.value" :value="item.id"></el-option>
                </el-select>
                <el-select v-model="qu" @change="choseBlock" placeholder="区级地区"> 
                    <el-option v-for="item in qu1" :key="item.id" :label="item.value" :value="item.id"></el-option>
                </el-select>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'upload',
        data: function(){
            return {
                fileName: '',
                imgSrc: '',
                cropImg: '',
                disabled: true,
                mapJson:'../../static/json/map.json',
                province:'',
                sheng: '',
                shi: '',
                shi1: [],
                qu: '',
                qu1: [],
                city:'',
                block:''
            }
        },
        methods:{
            setImage(e){
                const file = e.target.files[0];
                if (!file.type.includes('application/')) {
                    this.$message.error('文件格式错误！');
                    this.disabled = true;
                    return;
                }
                if (file.size > 500) {
                    this.$message.error('文件不能超过500字节！');
                    this.disabled = true;
                    return;
                };
                this.fileName = file.name;
                this.disabled = false;
            },
            upload() {
                this.$message.success('ok');
            },
            // 加载china地点数据，三级
            getCityData:function(){
                var that = this
                this.$axios.get(this.mapJson).then(function(response){
                    if (response.status==200) {
                        var data = response.data
                        that.province = []
                        that.city = []
                        that.block = []
                        // 省市区数据分类
                        for (var item in data) {
                            if (item.match(/0000$/)) {//省
                                that.province.push({id: item, value: data[item], children: []})
                            } else if (item.match(/00$/)) {//市
                                that.city.push({id: item, value: data[item], children: []})
                            } else {//区
                                that.block.push({id: item, value: data[item]})
                            }
                        }
                        // 分类市级
                        for (var index in that.province) {
                            for (var index1 in that.city) {
                                if (that.province[index].id.slice(0, 2) === that.city[index1].id.slice(0, 2)) {
                                that.province[index].children.push(that.city[index1])
                                }
                            }
                        }
                        // 分类区级
                        for(var item1 in that.city) {
                            for(var item2 in that.block) {
                                if (that.block[item2].id.slice(0, 4) === that.city[item1].id.slice(0, 4)) {
                                that.city[item1].children.push(that.block[item2])
                                }
                            }
                        }
                    }
                    else{
                        console.log(response.status)
                    }
                }).catch(function(error){console.log(typeof+ error)})
            },
            // 选省
            choseProvince:function(e) {
                for (var index2 in this.province) {
                    if (e === this.province[index2].id) {
                        this.shi1 = this.province[index2].children
                        this.shi = this.province[index2].children[0].value
                        this.qu1 =this.province[index2].children[0].children
                        this.qu = this.province[index2].children[0].children[0].value
                        this.E = this.qu1[0].id
                    }
                }
            },
            // 选市
            choseCity:function(e) {
                for (var index3 in this.city) {
                    if (e === this.city[index3].id) {
                        this.qu1 = this.city[index3].children
                        this.qu = this.city[index3].children[0].value
                        this.E = this.qu1[0].id
                        // console.log(this.E)
                    }
                }
            },
            // 选区
            choseBlock:function(e) {
                this.E=e;
                // console.log(this.E)
            },
        },
        created:function(){
            this.getCityData()
        }
    }
</script>

<style scoped>
    .content-title{
        font-weight: 400;
        line-height: 50px;
        margin: 10px 0;
        font-size: 22px;
        color: #1f2f3d;
    }
    .pre-img{   
        width: 100px;
        height: 100px;
        background: #f8f8f8;
        border: 1px solid #eee;
        border-radius: 5px;
    }
    .crop-demo{
        display: flex;
        align-items: flex-end;
    }
    .crop-demo-btn{
        position: relative;
        width: 100px;
        height: 33px;
        line-height: 33px;
        padding: 0 20px;
        margin-left: 10px;
        background-color: #409eff; 
        color: #fff;
        font-size: 14px;
        border-radius: 4px;
        box-sizing: border-box;
    }
    .crop-demo-btn1{
        position: relative;
        width: 33px;
        height: 33px;
        line-height: 33px;
        padding: 0 20px;
        margin-left: 10px;
        
        /* border-radius: 4px; */
        /* box-sizing: border-box; */
    }
    .crop-input{
        position: absolute;
        width: 100px;
        height: 40px;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
    }
</style>