|
|
|
|
<template>
|
|
|
|
|
<!-- 此处为老的油站入住 -->
|
|
|
|
|
<div style="padding:75px 10px;padding-bottom:6%">
|
|
|
|
|
<div style="width:69.5%;position: fixed;top: 0;left: 0;background: #fff;
|
|
|
|
|
padding: 10px 0px;
|
|
|
|
|
width: 69.5%;
|
|
|
|
|
z-index: 1;">
|
|
|
|
|
<div style="display: flex;
|
|
|
|
|
align-items: center;padding-left: 20px;line-height: 28px;">
|
|
|
|
|
<span>油站入驻</span>
|
|
|
|
|
</div>
|
|
|
|
|
<el-divider style="width:100%"></el-divider>
|
|
|
|
|
</div>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form ref="form" :model="oilSiteInfo" :rules="rules" label-width="230px" :size="$store.getters.size">
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="10">
|
|
|
|
|
<el-form-item label="油站名称" prop="siteName">
|
|
|
|
|
<el-input v-model="oilSiteInfo.siteName" placeholder="请输入油站名称" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="10">
|
|
|
|
|
<el-form-item label="油站简称" prop="siteAbbr">
|
|
|
|
|
<el-input v-model="oilSiteInfo.siteAbbr" placeholder="请输入油站简称" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="10">
|
|
|
|
|
<el-form-item label="省市区" prop="addrCode">
|
|
|
|
|
<el-cascader
|
|
|
|
|
ref="refSubCat"
|
|
|
|
|
v-model="addrCode"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
:size="$store.getters.size"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
:options="areaTree"
|
|
|
|
|
@change='changeTrees'
|
|
|
|
|
@active-item-change='changetrees'
|
|
|
|
|
:props="{value:'id', label:'areaName', children:'childList'}"
|
|
|
|
|
filterable
|
|
|
|
|
clearable
|
|
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="10">
|
|
|
|
|
<el-form-item label="油站负责人" prop="businessLeader">
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="oilSiteInfo.businessLeader"
|
|
|
|
|
clearable
|
|
|
|
|
filterable
|
|
|
|
|
remote
|
|
|
|
|
reserve-keyword
|
|
|
|
|
placeholder="油站负责人姓名或联系方式"
|
|
|
|
|
:remote-method="userRemoteMethod"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in userList"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:label="item.phone+'('+(item.nickName?item.nickName+'-':'')+item.userCode+')'"
|
|
|
|
|
:value="item.id"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="10">
|
|
|
|
|
<el-form-item label="联系人姓名" prop="siteContacts">
|
|
|
|
|
<el-input v-model="oilSiteInfo.siteContacts" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="10">
|
|
|
|
|
<el-form-item label="手机/座机" prop="siteContactPhone">
|
|
|
|
|
<el-input v-model="oilSiteInfo.siteContactPhone" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="20">
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item
|
|
|
|
|
label="油站品牌"
|
|
|
|
|
prop="siteBrand"
|
|
|
|
|
>
|
|
|
|
|
<el-select v-model="oilSiteInfo.siteBrand" clearable>
|
|
|
|
|
<el-option label="中国石油" :value="1" />
|
|
|
|
|
<el-option label="中国石化" :value="2" />
|
|
|
|
|
<el-option label="壳牌" :value="3" />
|
|
|
|
|
<el-option label="民营" :value="4" />
|
|
|
|
|
<el-option label="中海油" :value="5" />
|
|
|
|
|
<el-option label="京博" :value="6" />
|
|
|
|
|
<el-option label="中化石油" :value="7" />
|
|
|
|
|
<el-option label="山东高速" :value="9" />
|
|
|
|
|
<el-option label="陕西延长壳牌" :value="10" />
|
|
|
|
|
<el-option label="山西延长壳牌" :value="11" />
|
|
|
|
|
<el-option label="河南延长壳牌" :value="12" />
|
|
|
|
|
<el-option label="其他" :value="8" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item
|
|
|
|
|
label="油站类型"
|
|
|
|
|
prop="siteType"
|
|
|
|
|
>
|
|
|
|
|
<el-select v-model="oilSiteInfo.siteType" clearable>
|
|
|
|
|
<el-option label="加油站" :value="1" />
|
|
|
|
|
<el-option label="加气站" :value="2" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item
|
|
|
|
|
label="油站性质"
|
|
|
|
|
prop="siteNature"
|
|
|
|
|
>
|
|
|
|
|
<el-select v-model="oilSiteInfo.siteNature" clearable>
|
|
|
|
|
<el-option label="自营油站" :value="1" />
|
|
|
|
|
<el-option label="渠道油站" :value="0" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="20">
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item
|
|
|
|
|
label="油站等级"
|
|
|
|
|
prop="siteLevel"
|
|
|
|
|
>
|
|
|
|
|
<el-select v-model="oilSiteInfo.siteLevel" clearable>
|
|
|
|
|
<el-option label="一级油站" value="A" />
|
|
|
|
|
<el-option label="二级油站" value="B" />
|
|
|
|
|
<el-option label="三级油站" value="C" />
|
|
|
|
|
<el-option label="四级油站" value="D" />
|
|
|
|
|
<el-option label="五级油站" value="E" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item
|
|
|
|
|
label="是否为高速"
|
|
|
|
|
prop="highSpeedMark"
|
|
|
|
|
>
|
|
|
|
|
<el-select v-model="oilSiteInfo.highSpeedMark" clearable>
|
|
|
|
|
<el-option label="非高速" :value="0" />
|
|
|
|
|
<el-option label="高速油站" :value="1" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item
|
|
|
|
|
label="支付方式"
|
|
|
|
|
prop="payMethod"
|
|
|
|
|
>
|
|
|
|
|
<el-select v-model="oilSiteInfo.payMethod" clearable>
|
|
|
|
|
<el-option label="普通支付方式" :value="1" />
|
|
|
|
|
<el-option label="联名卡支付" :value="2" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="20">
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item
|
|
|
|
|
label="油站渠道"
|
|
|
|
|
prop="siteChannel"
|
|
|
|
|
>
|
|
|
|
|
<el-select v-model="oilSiteInfo.siteChannel" clearable>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in options11"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select></el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item
|
|
|
|
|
label="使用类型"
|
|
|
|
|
prop="siteCustomerMark"
|
|
|
|
|
>
|
|
|
|
|
<el-select v-model="oilSiteInfo.siteCustomerMark" clearable>
|
|
|
|
|
<el-option label="个人油站" :value="1" />
|
|
|
|
|
<el-option label="公用油站" :value="2" />
|
|
|
|
|
<el-option label="企业油站" :value="3" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="21">
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item
|
|
|
|
|
label="司机二维码支付"
|
|
|
|
|
prop="qrcodePay"
|
|
|
|
|
>
|
|
|
|
|
<el-switch
|
|
|
|
|
v-model="oilSiteInfo.qrcodePay"
|
|
|
|
|
active-color="#13ce66"
|
|
|
|
|
inactive-color="#ff4949"
|
|
|
|
|
:active-value="1"
|
|
|
|
|
:inactive-value="0"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item
|
|
|
|
|
label="扫描油站二维码支付"
|
|
|
|
|
prop="qrcodeSitePay"
|
|
|
|
|
>
|
|
|
|
|
<el-switch
|
|
|
|
|
v-model="oilSiteInfo.qrcodeSitePay"
|
|
|
|
|
active-color="#13ce66"
|
|
|
|
|
inactive-color="#ff4949"
|
|
|
|
|
:active-value="1"
|
|
|
|
|
:inactive-value="0"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item
|
|
|
|
|
label="司机主动支付"
|
|
|
|
|
prop="activePay"
|
|
|
|
|
>
|
|
|
|
|
<el-switch
|
|
|
|
|
v-model="oilSiteInfo.activePay"
|
|
|
|
|
active-color="#13ce66"
|
|
|
|
|
inactive-color="#ff4949"
|
|
|
|
|
:active-value="1"
|
|
|
|
|
:inactive-value="0"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col>
|
|
|
|
|
<el-form-item label="提示文案" prop="detailContent">
|
|
|
|
|
<el-input style="width:80%" v-model="oilSiteInfo.detailContent" placeholder="油站详情提示文案" type="textarea" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
|
|
|
|
|
<el-container>
|
|
|
|
|
<!-- <el-aside width="310px"> -->
|
|
|
|
|
<el-row style="width:30%;">
|
|
|
|
|
<el-col>
|
|
|
|
|
<el-form-item label="经度" prop="longitude">
|
|
|
|
|
<el-input v-model="oilSiteInfo.longitude" placeholder="经度" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col>
|
|
|
|
|
<el-form-item label="纬度" prop="latitude">
|
|
|
|
|
<el-input v-model="oilSiteInfo.latitude" placeholder="纬度" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col>
|
|
|
|
|
<el-form-item label="详细地址" prop="address">
|
|
|
|
|
<el-input v-model="oilSiteInfo.address" type="textarea" placeholder="详细地址" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button plain @click="queryByAddress()">搜索</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<!-- </el-aside> -->
|
|
|
|
|
<el-main>
|
|
|
|
|
<div v-show="isShowMap" id="container_af" class="mymap" />
|
|
|
|
|
|
|
|
|
|
</el-main>
|
|
|
|
|
</el-container>
|
|
|
|
|
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<h2>认证信息</h2>
|
|
|
|
|
<hr>
|
|
|
|
|
<br>
|
|
|
|
|
<br>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="10">
|
|
|
|
|
<el-form-item label="法人姓名" prop="legalName">
|
|
|
|
|
<el-input v-model="oilSiteInfo.legalName" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="10">
|
|
|
|
|
<el-form-item label="法人联系电话" prop="legalPhone">
|
|
|
|
|
<el-input v-model="oilSiteInfo.legalPhone" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="10">
|
|
|
|
|
|
|
|
|
|
<el-form-item label="法人身份证" prop="legalIdcard">
|
|
|
|
|
<el-input v-model="oilSiteInfo.legalIdcard" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="10">
|
|
|
|
|
<el-form-item label="银行卡号" prop="bankCardNo">
|
|
|
|
|
<el-input v-model="oilSiteInfo.bankCardNo" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="10">
|
|
|
|
|
|
|
|
|
|
<el-form-item label="收款账户名称" prop="bankCardName">
|
|
|
|
|
<el-input v-model="oilSiteInfo.bankCardName" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="10">
|
|
|
|
|
<el-form-item label="开户行银名称" prop="bankName">
|
|
|
|
|
<el-input v-model="oilSiteInfo.bankName" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="10">
|
|
|
|
|
|
|
|
|
|
<el-form-item label="账户性质：公户、个人账户" prop="bankNature">
|
|
|
|
|
<el-input v-model="oilSiteInfo.bankNature" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="10">
|
|
|
|
|
<el-form-item label="开户所属银行" prop="bankDeposit">
|
|
|
|
|
<el-input v-model="oilSiteInfo.bankDeposit" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
|
|
|
|
|
<el-col :span="10">
|
|
|
|
|
<el-form-item label="营业许可证号" prop="licenseNo">
|
|
|
|
|
<el-input v-model="oilSiteInfo.licenseNo" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row :gutter="gridNum.row.gutter">
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<el-form-item label="油站照片" prop="siteImages">
|
|
|
|
|
<el-upload
|
|
|
|
|
:action="updateFileUrl"
|
|
|
|
|
:data="{'ossKey':'xingyou','pathKey':'other','encrypt':'PUBLIC'}"
|
|
|
|
|
list-type="picture-card"
|
|
|
|
|
:before-upload="imgCompress"
|
|
|
|
|
:on-preview="headPhotoPreview"
|
|
|
|
|
:on-remove="headPhotoRemove"
|
|
|
|
|
:on-success="headPhotoSuccess"
|
|
|
|
|
:headers="headers"
|
|
|
|
|
:limit="1"
|
|
|
|
|
>
|
|
|
|
|
<i class="el-icon-plus" />
|
|
|
|
|
</el-upload>
|
|
|
|
|
<el-dialog :visible.sync="showSiteImages" :modal="false">
|
|
|
|
|
<img width="100%" :src="siteImages" alt="">
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<el-form-item label="营业执照照片" prop="sitelicenseNoImages">
|
|
|
|
|
<el-upload
|
|
|
|
|
:action="updateFileUrl"
|
|
|
|
|
:data="{'ossKey':'xingyou','pathKey':'other','encrypt':'PUBLIC'}"
|
|
|
|
|
list-type="picture-card"
|
|
|
|
|
:before-upload="imgCompress"
|
|
|
|
|
:on-preview="sitelicenseNoImagePreview"
|
|
|
|
|
:on-remove="sitelicenseNoImageRemove"
|
|
|
|
|
:on-success="sitelicenseNoImageSuccess"
|
|
|
|
|
:headers="headers"
|
|
|
|
|
:limit="1"
|
|
|
|
|
>
|
|
|
|
|
<i class="el-icon-plus" />
|
|
|
|
|
</el-upload>
|
|
|
|
|
<el-dialog :visible.sync="sitelicenseNoImages" :modal="false">
|
|
|
|
|
<img width="100%" :src="siteImages" alt="">
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-col :span="24" style="text-align: center;pandding:3% 3%;" class="showbttoms">
|
|
|
|
|
<el-button @click="close">取消</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="submit"
|
|
|
|
|
>提交</el-button>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row></el-form>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import AreaCodeApi from '@/api/base/areaCode'
|
|
|
|
|
import oilSiteInfoApi from '@/api/user/oilSiteInfo'
|
|
|
|
|
import { imgCompress } from '@/utils'
|
|
|
|
|
import utils from '@/utils/encode'
|
|
|
|
|
import { getToken } from '@/utils/auth'
|
|
|
|
|
import AMap from 'AMap'// 在页面中引入高德地图
|
|
|
|
|
import GaodeApi from '@/api/gaode/gaode'
|
|
|
|
|
import sysCustomerInfoApi from '@/api/user/sysCustomerInfo'
|
|
|
|
|
const JSESSIONID = utils.uuid()
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
userList: [],
|
|
|
|
|
imgCompress,
|
|
|
|
|
headers: {
|
|
|
|
|
'dataSources': 'WEB',
|
|
|
|
|
'Authorization': getToken(),
|
|
|
|
|
'JSESSIONID': JSESSIONID,
|
|
|
|
|
'token': utils.bcrypt(JSESSIONID)
|
|
|
|
|
},
|
|
|
|
|
gridNum: {
|
|
|
|
|
row: {
|
|
|
|
|
gutter: 2
|
|
|
|
|
},
|
|
|
|
|
cols: {
|
|
|
|
|
xs: 24,
|
|
|
|
|
sm: 24,
|
|
|
|
|
md: 12,
|
|
|
|
|
lg: 12,
|
|
|
|
|
xl: 6
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
updateFileUrl: process.env.VUE_APP_UPLOAD_URL,
|
|
|
|
|
siteImages: '', // 油站照片
|
|
|
|
|
siteLicenseImages: '', // 营业执照照片
|
|
|
|
|
// 正向地理解析对象
|
|
|
|
|
geography: {
|
|
|
|
|
address: null
|
|
|
|
|
},
|
|
|
|
|
showSiteImages: false,
|
|
|
|
|
sitelicenseNoImages: false,
|
|
|
|
|
affirmData: { // 默认经纬度
|
|
|
|
|
lon: 116.397428,
|
|
|
|
|
lat: 39.90923
|
|
|
|
|
},
|
|
|
|
|
isShowMap: true, // 高德地图div默认展示
|
|
|
|
|
oilSiteInfo: {
|
|
|
|
|
provinceCode: undefined,
|
|
|
|
|
cityCode: undefined,
|
|
|
|
|
areaCode: undefined,
|
|
|
|
|
address: '',
|
|
|
|
|
longitude: 116.397428,
|
|
|
|
|
latitude: 39.90923
|
|
|
|
|
},
|
|
|
|
|
areaTree: [],
|
|
|
|
|
addrCode: [], // 省市区code
|
|
|
|
|
options11: [
|
|
|
|
|
{ value: 'XOIL', label: '星油' }
|
|
|
|
|
],
|
|
|
|
|
rules: {
|
|
|
|
|
siteName: [
|
|
|
|
|
{ required: true, message: '油站名称不能为空', trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
siteCustomerMark: [
|
|
|
|
|
{ required: true, message: '使用类型不能为空', trigger: 'change' }
|
|
|
|
|
],
|
|
|
|
|
siteNature: [
|
|
|
|
|
{ required: true, message: '油站性质不能为空', trigger: 'change' }
|
|
|
|
|
],
|
|
|
|
|
siteChannel: [
|
|
|
|
|
{ required: true, message: '油站渠道不能为空', trigger: 'change' }
|
|
|
|
|
],
|
|
|
|
|
siteType: [
|
|
|
|
|
{ required: true, message: '油站类型不能为空', trigger: 'change' }
|
|
|
|
|
],
|
|
|
|
|
siteLevel: [
|
|
|
|
|
{ required: true, message: '油站等级不能为空', trigger: 'change' }
|
|
|
|
|
],
|
|
|
|
|
longitude: [
|
|
|
|
|
{ required: true, message: '经度不能为空', trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
latitude: [
|
|
|
|
|
{ required: true, message: '纬度不能为空', trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
highSpeedMark: [
|
|
|
|
|
{ required: true, message: '高速不能为空', trigger: 'change' }
|
|
|
|
|
],
|
|
|
|
|
payMethod: [
|
|
|
|
|
{ required: true, message: '支付方式不能为空', trigger: 'change' }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
// sysCustomerInfoApi.findAll().then(res => {
|
|
|
|
|
// this.userList = res.data
|
|
|
|
|
// })
|
|
|
|
|
AreaCodeApi.getTree().then(res => {
|
|
|
|
|
this.areaTree = res.data
|
|
|
|
|
})
|
|
|
|
|
this.oilSiteInfo = { ...this.oilSiteInfo }
|
|
|
|
|
this.addrCode = [parseInt(this.oilSiteInfo.provinceCode), parseInt(this.oilSiteInfo.cityCode), parseInt(this.oilSiteInfo.areaCode)]
|
|
|
|
|
console.log('++--++--++--++--',this.addrCode)
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.loadMap() // 加载地图和相关组件
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
userRemoteMethod(value) { // 远程搜索
|
|
|
|
|
if (value) {
|
|
|
|
|
sysCustomerInfoApi.liekQuery(value).then(res => {
|
|
|
|
|
this.userList = res.data
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
headPhotoRemove(file, fileList) { // 油站照片删除
|
|
|
|
|
this.oilSiteInfo.siteImages = undefined
|
|
|
|
|
this.siteImages = undefined
|
|
|
|
|
},
|
|
|
|
|
headPhotoPreview(file) { // 油站照片预览
|
|
|
|
|
this.showSiteImages = true
|
|
|
|
|
},
|
|
|
|
|
headPhotoSuccess(res) { // 油站照片上传成功
|
|
|
|
|
this.siteImages = res.data.publicUrl
|
|
|
|
|
this.oilSiteInfo.siteImages = res.data.publicUrl
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
sitelicenseNoImageRemove(file, fileList) { // 营业执照删除
|
|
|
|
|
this.oilSiteInfo.licenseImage = undefined
|
|
|
|
|
this.siteLicenseImages = undefined
|
|
|
|
|
},
|
|
|
|
|
sitelicenseNoImagePreview(file) { // 营业执照
|
|
|
|
|
this.sitelicenseNoImages = true
|
|
|
|
|
},
|
|
|
|
|
sitelicenseNoImageSuccess(res) { // 营业执照上传成功
|
|
|
|
|
console.log('success')
|
|
|
|
|
this.siteLicenseImages = res.data.publicUrl
|
|
|
|
|
this.oilSiteInfo.licenseImage = res.data.publicUrl
|
|
|
|
|
console.log(this.siteLicenseImages)
|
|
|
|
|
},
|
|
|
|
|
submit() {
|
|
|
|
|
this.$refs['form'].validate((valid) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
this.save(this.oilSiteInfo)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
save() {
|
|
|
|
|
// 保存
|
|
|
|
|
this.setCodeName()
|
|
|
|
|
this.oilSiteInfo.longitude = this.oilSiteInfo.longitude
|
|
|
|
|
this.oilSiteInfo.latitude = this.oilSiteInfo.latitude
|
|
|
|
|
oilSiteInfoApi.save(this.oilSiteInfo).then(res => {
|
|
|
|
|
this.$message.success(res.msg)
|
|
|
|
|
this.$emit('closeDialog')
|
|
|
|
|
this.$emit('getByPage')
|
|
|
|
|
this.$refs['form'].resetFields()
|
|
|
|
|
this.addrCode = []
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
changetrees(){
|
|
|
|
|
console.log('lostss')
|
|
|
|
|
},
|
|
|
|
|
setCodeName() {
|
|
|
|
|
console.log('进入这里')
|
|
|
|
|
this.oilSiteInfo.provinceCode = this.addrCode[0]
|
|
|
|
|
this.oilSiteInfo.cityCode = this.addrCode[1]
|
|
|
|
|
this.oilSiteInfo.areaCode = this.addrCode[2]
|
|
|
|
|
this.areaTree.forEach(item => {
|
|
|
|
|
if (item.id === this.addrCode[0]) {
|
|
|
|
|
this.oilSiteInfo.provinceName = item.areaName
|
|
|
|
|
console.log(this.oilSiteInfo.provinceName)
|
|
|
|
|
}
|
|
|
|
|
if (item.childList) {
|
|
|
|
|
item.childList.forEach(itemm => {
|
|
|
|
|
if (itemm.id === this.addrCode[1]) {
|
|
|
|
|
this.oilSiteInfo.cityName = itemm.areaName
|
|
|
|
|
console.log(this.oilSiteInfo.cityName)
|
|
|
|
|
}
|
|
|
|
|
if (itemm.childList) {
|
|
|
|
|
itemm.childList.forEach(itm => {
|
|
|
|
|
if (itm.id === this.addrCode[2]) {
|
|
|
|
|
this.oilSiteInfo.areaName = itm.areaName
|
|
|
|
|
console.log(this.oilSiteInfo.areaName)
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
changeTrees(e){
|
|
|
|
|
console.log(e)
|
|
|
|
|
},
|
|
|
|
|
close() {
|
|
|
|
|
this.$emit('closeDialog')
|
|
|
|
|
},
|
|
|
|
|
loadMap() {
|
|
|
|
|
console.log(this.affirmData, 'data')
|
|
|
|
|
// 地图示例
|
|
|
|
|
var map = new AMap.Map('container_af', {
|
|
|
|
|
zoom: 16,
|
|
|
|
|
resizeEnable: true,
|
|
|
|
|
center: [this.oilSiteInfo.longitude, this.oilSiteInfo.latitude] // 中心点坐标
|
|
|
|
|
})
|
|
|
|
|
// 创建一个 Marker 实例：
|
|
|
|
|
var marker = new AMap.Marker({
|
|
|
|
|
position: new AMap.LngLat(this.oilSiteInfo.longitude, this.oilSiteInfo.latitude), // 经纬度对象，也可以是经纬度构成的一维数组
|
|
|
|
|
title: '确认位置'
|
|
|
|
|
})
|
|
|
|
|
// 将创建的点标记添加到已有的地图实例：
|
|
|
|
|
map.add(marker)
|
|
|
|
|
var that = this
|
|
|
|
|
AMap.plugin('AMap.Geocoder', function() {
|
|
|
|
|
var geocoder = new AMap.Geocoder({
|
|
|
|
|
city: '010'// 城市，默认：“全国”
|
|
|
|
|
})
|
|
|
|
|
let lnglat = [that.oilSiteInfo.longitude,that.oilSiteInfo.latitude]
|
|
|
|
|
geocoder.getAddress(lnglat, function(status, result) {
|
|
|
|
|
if (status === 'complete'&&result.regeocode) {
|
|
|
|
|
that.oilSiteInfo.address = result.regeocode.formattedAddress;
|
|
|
|
|
}else{
|
|
|
|
|
that.$message.error('根据经纬度查询地址失败')
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
map.on('click', (e) => {
|
|
|
|
|
this.oilSiteInfo.longitude = e.lnglat.getLng()
|
|
|
|
|
this.oilSiteInfo.latitude = e.lnglat.getLat()
|
|
|
|
|
// 每点击一次就将坐标点定位在点击处
|
|
|
|
|
marker.setPosition(e.lnglat)
|
|
|
|
|
AMap.plugin('AMap.Geocoder', function() {
|
|
|
|
|
var geocoder = new AMap.Geocoder({
|
|
|
|
|
city: '010'// 城市，默认：“全国”
|
|
|
|
|
})
|
|
|
|
|
geocoder.getAddress(e.lnglat, function(status, result) {
|
|
|
|
|
if (status == 'complete') {
|
|
|
|
|
that.oilSiteInfo.address = result.regeocode.formattedAddress
|
|
|
|
|
} else {
|
|
|
|
|
that.$message.error('无法获取地址')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}, // 正向地理解析
|
|
|
|
|
queryByAddress() {
|
|
|
|
|
var that = this
|
|
|
|
|
if (that.oilSiteInfo.address&&that.oilSiteInfo.longitude&&that.oilSiteInfo.latitude){
|
|
|
|
|
that.$message.error('经纬度和详细地址须有一项为空')
|
|
|
|
|
return;
|
|
|
|
|
}else if (this.oilSiteInfo.longitude&&this.oilSiteInfo.latitude){
|
|
|
|
|
that.loadMap()
|
|
|
|
|
}else if(that.oilSiteInfo.address) {
|
|
|
|
|
this.geography.address = this.oilSiteInfo.address
|
|
|
|
|
console.log('this.gaodraohy：' + this.geography.address)
|
|
|
|
|
GaodeApi.geography(this.geography).then(res => {
|
|
|
|
|
if (res.code === 20000) {
|
|
|
|
|
if (res.data.geocodes.length > 0) {
|
|
|
|
|
// console.log('经纬度', res.data.geocodes[0].location)
|
|
|
|
|
this.oilSiteInfo.longitude = res.data.geocodes[0].location.split(',')[0]
|
|
|
|
|
this.oilSiteInfo.latitude = res.data.geocodes[0].location.split(',')[1]
|
|
|
|
|
// 根据地址搜索经纬度后重新加载地图
|
|
|
|
|
this.loadMap()
|
|
|
|
|
|
|
|
|
|
AMap.plugin('AMap.Geocoder', function() {
|
|
|
|
|
var geocoder = new AMap.Geocoder({
|
|
|
|
|
city: '010'// 城市，默认：“全国”
|
|
|
|
|
})
|
|
|
|
|
console.log(res.data.geocodes[0].location)
|
|
|
|
|
geocoder.getAddress(res.data.geocodes[0].location, function(status, result) {
|
|
|
|
|
if (status == 'complete') {
|
|
|
|
|
that.oilSiteInfo.address = result.regeocode.formattedAddress
|
|
|
|
|
console.log(result.regeocode.formattedAddress)
|
|
|
|
|
} else {
|
|
|
|
|
that.$message.error('无法获取地址')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped>
|
|
|
|
|
.showbttoms{
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 0%;
|
|
|
|
|
width: 69.5%;
|
|
|
|
|
background: #fff;
|
|
|
|
|
padding: 20px 15px;
|
|
|
|
|
border-top: 1px solid #e6e6e6;
|
|
|
|
|
text-align: right !important;
|
|
|
|
|
}
|
|
|
|
|
aside {
|
|
|
|
|
background: none;
|
|
|
|
|
}
|
|
|
|
|
.mymap {
|
|
|
|
|
width: 76%;
|
|
|
|
|
height: 380px;
|
|
|
|
|
display: flex;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
.image-vessl {
|
|
|
|
|
color: seashell !important;
|
|
|
|
|
}
|
|
|
|
|
.el-main {
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin-left:20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-divider--horizontal{
|
|
|
|
|
margin: 10px 0;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
