zhgdyun/src/views/projectFront/highModulus/planConfig2.vue

<template>
    <div class="fullHeight planConfigPage">
        <div class="mapList whiteBlock">
            <ul>
                <li v-for="(item,index) in mapList" :key="index">{{item.planeFigureName}}</li>
            </ul>
            <div class="addBtn" @click="addMapFn"><i class="el-icon-plus"></i>上传地图</div>
            
        </div>
        <div class="pointConfigBox">
            <img src="" alt="">
        </div>
        <el-dialog
            :title="isAdd?'新增':'编辑'"
            :visible.sync="dialogVisible"
            width="667px" :modal-append-to-body="false">
            <div class="dialog_content">
                <el-form size="medium" :model="mapForm" :rules="rules" ref="mapForm" label-width="120px">
                    <el-form-item label="平面图像名称" prop="planeFigureName">
                        <el-input v-model="mapForm.planeFigureName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="平面图像" prop="imageUrl">
                        <el-upload
                            class="avatar-uploader"
                            :action="$store.state.UPLOADURL"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload" name="files">
                            <img v-if="mapForm.imageUrl" :src="$store.state.FILEURL+mapForm.imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="medium" @click="dialogVisible = false">取 消</el-button>
                <el-button size="medium" type="primary" @click="submitMapForm()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import {selectplaneFigureApi,addplaneFigureApi,deleteplaneFigureApi,editplaneFigureApi} from "@/assets/js/api/dangerousBigProject"
export default {
    data(){
        return{
            mapList:[],
            pageType:1,
            mapForm:{
                imageUrl:'',
                planeFigureName:''
            },
            rules:{
                planeFigureName: [
                    { required: true, message: '必填', trigger: 'blur' }
                ],
                imageUrl: [
                    { required: true, message: '请上传图片', trigger: 'change' }
                ],
            },
            dialogVisible:false,
            isAdd:true
        }
    },
    mounted(){
        this.loadMapList()
    },
    methods:{
        addMapFn(){
            this.mapForm.imageUrl='';
            this.mapForm.planeFigureName=''
            this.dialogVisible=true
        },
        loadMapList(){
            selectplaneFigureApi({type:this.pageType,projectSn:this.$store.state.projectSn}).then(res=>{
                this.mapList=res.result;
            })
        },
        handleAvatarSuccess(res, file) {
            this.mapForm.imageUrl = res.data[0].imageUrl
        },
        beforeAvatarUpload(file) {
            const isJPG = (file.type === 'image/jpeg'||file.type === 'image/png'||file.type === 'image/jpg');
            // const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传图片只能是 JPG和png 格式!');
            }
            // if (!isLt2M) {
            //     this.$message.error('上传头像图片大小不能超过 2MB!');
            // }
            return isJPG;
        },
        submitMapForm(){
            this.$refs['mapForm'].validate((valid) => {
            if (valid) {
                if(this.isAdd){
                    this.mapForm.projectSn=this.$store.state.projectSn
                    this.mapForm.type=this.pageType
                    addplaneFigureApi(this.mapForm).then(res=>{
                        this.$message.success('添加成功')
                        this.loadMapList()
                        this.dialogVisible=false
                    })
                }else{
                    editplaneFigureApi(this.mapForm).then(res=>{
                        this.$message.success('编辑成功')
                        this.loadMapList()
                        this.dialogVisible=false
                    })
                }
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        }
    }
}
</script>
<style lang="less" scoped>
.planConfigPage{
    overflow: hidden;
}
.mapList{
    float: left;
    width: 134px;
    position: relative;
    height: calc(100% - 20px);
    padding-top: 20px;
    li{
        padding: 10px 20px;
        font-size: 14px;
        cursor: pointer;
        &:hover,&.active{
            background-color: @--color-primary-deep;
            color: white;
        }
    }
    .addBtn{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 14px;
        i{
            margin-right: 5px;
        }
    }
}
.pointConfigBox{
    float: left;
    width: calc(100% - 134px);
}
.avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>