baianxi_admin/src/views/company/Add.vue

<style lang="scss">
    .add_form{
        display: flex;
        justify-content: space-between;
        .req{
            position: relative;
            &::after{
                content: '*';
                color: red;
                position: absolute;
                right: -15px;
                top: 8px;
            }
        }
        .div_left{
            width: 33%;
            .el-select{
                width: 100%;
            }
        }
        .div_right{
            width: 65%;
            .map{
                width: 100%;
                height: 300px;
            }
            .btn_div{
                text-align: right;
                button{
                    width: 200px;
                }
            }
        }
    }
</style>
<template>
    <section>
        <p>公司管理  >  新增企业</p>
        <div class="content">
            <el-form class="add_form" label-width="100px"  size="small" label-position="right">
                <div class="div_left">
                    <el-form-item label="企业名称" class="req">
                        <el-input clearable placeholder="请输入企业名称" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="账号" class="req">
                        <el-input clearable placeholder="请输入账号" v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" class="req">
                        <el-input clearable placeholder="请输入密码" type="password" v-model="form.password"></el-input>
                    </el-form-item>
                    <el-form-item label="公司类型">
                            <el-select clearable v-model="form.category" placeholder="请选择">
                                <el-option v-for="(item,index) in category" :key="index" :label="item" :value="item"></el-option>
                            </el-select>
                    </el-form-item>
                    <el-form-item label="上级公司">
                            <el-select clearable v-model="form.parent_id" placeholder="请选择">
                                <el-option v-for="(item,index) in company" :key="index" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                    </el-form-item>
                    <el-form-item label="企业区域" >
                        <el-select v-model="form.area" clearable placeholder="请选择">
                            <el-option v-for="(item,index) in area" :key="index" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="上级政府" class="req">
                            <el-select v-model="form.parent_id" placeholder="请选择">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                    </el-form-item> -->
                    <el-form-item label="企业法人" class="req">
                        <el-input clearable placeholder="请输入企业法人" v-model="form.legalperson"></el-input>
                    </el-form-item>
                    <el-form-item label="法人手机号" class="req">
                        <el-input clearable placeholder="请输入法人手机号" v-model="form.legalperson_phone"></el-input>
                    </el-form-item>
                    <el-form-item label="企业负责人">
                        <el-input clearable placeholder="请输入企业负责人" v-model="form.principal"></el-input>
                    </el-form-item>
                    <el-form-item label="负责人手机号">
                        <el-input clearable placeholder="请输入负责人手机号" v-model="form.principal_phone"></el-input>
                    </el-form-item>
                    <el-form-item label="经营范围">
                        <el-input type="textarea" v-model="form.busscope"></el-input>
                    </el-form-item>
                    
                </div>
                <div class="div_right">
                    <el-form-item label="封面图">
                        <div class="upload_div">
                            <i class="el-icon-upload"></i>
                            <img v-if="form.faceimg" width="100%" height="100%" :src="form.faceimg" alt="">
                            <input @change="upload('faceimg')" id='faceimg' type="file">
                        </div>
                    </el-form-item>
                    <el-form-item label="四色分布图">
                        <div class="upload_div">
                            <i class="el-icon-upload"></i>
                            <img v-if="form.safecolor_img" width="100%" height="100%" :src="form.safecolor_img" alt="">
                            <input @change="upload('safecolor_img')" id='safecolor_img' type="file">
                        </div>
                    </el-form-item>
                    <el-form-item label="企业地址">
                            <div>
                                <el-input style="width:100%" v-model="keyword" placeholder="请输入关键词搜索"></el-input>
                                <p>当前位置：</p>
                            </div>
                            <baidu-map @click="getClickInfo"   @ready="onBaiduMapReady" class="map bm-view" :center="point.lng||point.lat?point:'成都'" :zoom="15" :scroll-wheel-zoom="true">
                                <bm-view style="width: 100%; height:300px;"></bm-view>
                                <bm-marker  :position="point" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
                                </bm-marker>
                                <bm-local-search style="max-height:200px;overflow:auto;border:1px solid #d9d9d9;" :keyword="keyword" :auto-viewport="true"></bm-local-search>
                            </baidu-map>
                    </el-form-item>
                    <el-form-item class="btn_div">  
                        <el-button  @click="$router.push({path:'/company/add'})"  type="info">重置</el-button>
                        <el-button @click="save" type="primary">保存</el-button>
                    </el-form-item>
                </div>
                
            </el-form>
        </div>
    </section>
</template>
<script>
import Page from '../../components/Page';
export default {
  components:{
        Page
  },
  data(){
    return{
      id:'',
      form:{name:'',is_active:true},
      BMap:null,
      keyword:'',
      point:{
        lng:'',
        lat:''
      },
      category:[],
      area:[],
      company:[]
    }
  },
  methods:{
    onBaiduMapReady(e) {
        const that = this
        this.BMap = e.BMap
    },
    getClickInfo(e) {
        // 调整地图中心位置
        this.point=e.point

        // 此时已经可以获取到BMap类
        if (this.BMap) {
            const that = this
            // Geocoder() 类进行地址解析
            // 创建地址解析器的实例
            const geoCoder = new this.BMap.Geocoder()
            // getLocation() 类--利用坐标获取地址的详细信息
            // getPoint() 类--获取位置对应的坐标
            geoCoder.getLocation(e.point, function(res) {
            const addrComponent = res.addressComponents
            const surroundingPois = res.surroundingPois
            const province = addrComponent.province
            const city = addrComponent.city
            const district = addrComponent.district
            let addr = addrComponent.street
            if (surroundingPois.length > 0 && surroundingPois[0].title) {
                if (addr) {
                addr += `-${surroundingPois[0].title}`
                } else {
                addr += `${surroundingPois[0].title}`
                }
            } else {
                addr += addrComponent.streetNumber
            }
            that.form.address=province+city+district+addr
            })
        }
    },
    upload(type){
          var file=document.getElementById(type).files;
          var data=new FormData();
            data.append("file",file[0])
          this.$api.uploadFile(data).then(res=>{
              if(res.data.code==0){
                      let form=this.form;
                      this.$set(form,type,res.data.data.url)
                      this.$message({message: '上传成功！',type: 'success'});
                  }else{
                      this.$message.error(res.data.message);
                  }
          })
    },
    getData(){
        if(this.id){
            this.$api.getEnterprise({id:this.id}).then(res=>{
                this.form=res.data.data
            })
        }
        
        this.$api.getEnterpriseAll().then(res=>{
            this.company=res.data.data;
            this.area=this.store.area;
            this.category=this.store.categorys;
        })
    },
    save(){
          var parm=this.form;
          if(parm.id){
              this.$api.updateEnterprise(parm).then(res=>{
                  if(res.data.code==0){
                      this.$message({message: '修改成功！',type: 'success'});
                      this.$router.push({path:'/company'})
                  }else{
                      this.$message.error(res.data.message);
                  }
              })
          }else{
              this.$api.saveEnterprise(parm).then(res=>{
                  if(res.data.code==0){
                      this.$message({message: '添加成功！',type: 'success'});
                      this.$router.push({path:'/company'})
                  }else{
                      this.$message.error(res.data.message);
                  }
              })
          }
        },
  },
  created(){
        if(this.$route.query.id){
            this.id=this.$route.query.id
        }
        this.getData()
  }
}
</script>