You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1509 lines
58 KiB
1509 lines
58 KiB
<template> |
|
<!-- 此处为老的油站入住 --> |
|
<div style="padding:50px 10px;padding-bottom:5%"> |
|
<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;"> |
|
<span>油站基础信息修改</span><span style="padding:0 10px">{{newInfos.id}}</span><el-button type="text" icon="el-icon-document-copy" size="mini" @click="copyOrderId(newInfos.id,$event)" /> |
|
</div> |
|
<el-divider style="width:100%"></el-divider> |
|
</div> |
|
<el-row> |
|
<el-form ref="form" :model="newInfos" :rules="rules" label-width="140px" :size="$store.getters.size"> |
|
<el-row style="padding:0 2%"> |
|
<el-col class="h2boxsings"> |
|
<h2 class="h2_class1"><span><img src="../../../assets/img/iconsOlis.png" style="width:30px;height:30px;margin-right:10px;"></span><span>基础信息</span> </h2> |
|
</el-col> |
|
<el-col style="padding:2% 2%;"> |
|
<el-row> |
|
<el-col :span="16" style="display: flex;justify-content: flex-start;align-items: flex-start;"> |
|
<el-form-item label="油站名称" prop="siteName" style="width: 600px;d" > |
|
<el-input v-model="newInfos.siteName" placeholder="请输入油站名称" clearable @change="listss" /> |
|
</el-form-item> |
|
<img src="../../../assets/img/mapButton.png" alt="" style="width: 40px;height: 40px;flex: 0 0 auto;margin-left: 13px;" @click="showMap"> |
|
<el-dialog title="地图展示" :visible="dialogForMapVisible" :before-close="handleClose" :append-to-body="true"> |
|
<div class="serchText"> |
|
<el-select |
|
v-model="serchInfos" |
|
clearable |
|
filterable |
|
remote |
|
reserve-keyword |
|
placeholder="搜索地址" |
|
:remote-method="mapRemoteMethod" |
|
@change="currentSel" |
|
class="changessssss" |
|
> |
|
<el-option |
|
v-for="item in MapList" |
|
:key="item.id" |
|
:label="item.name" |
|
:value="item.id" |
|
/> |
|
</el-select> |
|
<!-- <el-input v-model="serechMap" placeholder="详细地址" @input="serchMap" clearable style="width:70%" ></el-input> --> |
|
<el-button @click="changeMap" > 搜索</el-button> |
|
</div> |
|
<!-- <div class="serchText"> |
|
<el-input v-model="serechMap" placeholder="详细地址" clearable style="width:70%"></el-input><el-button @click="queryByAddress" > 搜索</el-button> |
|
</div> --> |
|
<el-container> |
|
<el-main style="margin:0"> |
|
<div v-show="isShowMap" id="container_af" class="mymap" /> |
|
</el-main> |
|
</el-container> |
|
<div slot="footer" class="dialog-footer"> |
|
<div class="dialog_boxsings_left"> |
|
<div class="left_box boxsingss"> |
|
<span>详细地址 : </span> |
|
<el-input v-model="newInfos.address" disabled placeholder="详细地址" clearable style="width:70%"/> |
|
</div> |
|
<div class="main_box boxsingss"> |
|
<span>经度 : </span> |
|
<el-input v-model="newInfos.longitude" disabled placeholder="详细地址" clearable style="width:80%"/> |
|
</div> |
|
<div class="right_box boxsingss"> |
|
<span>纬度 : </span> |
|
<el-input v-model="newInfos.latitude" disabled placeholder="详细地址" clearable style="width:80%"/> |
|
</div> |
|
</div> |
|
<div> |
|
<el-button @click="dialogForMapVisible = false">取 消</el-button> |
|
<el-button type="primary" @click="dialogForMapVisible = false">确 定</el-button> |
|
</div> |
|
</div> |
|
</el-dialog> |
|
</el-col> |
|
<!-- <el-col :span="10"> |
|
<el-form-item label="油站简称" prop="siteAbbr"> |
|
<el-input v-model="newInfos.siteAbbr" placeholder="请输入油站简称" clearable /> |
|
</el-form-item> |
|
</el-col> --> |
|
</el-row> |
|
<el-row> |
|
<el-col :span="10"> |
|
<el-form-item label="省市区" prop="addrCode" style=" box-shadow: none"> |
|
<el-cascader |
|
ref="refSubCat" |
|
v-model="addrCode" |
|
placeholder="请选择" |
|
:size="$store.getters.size" |
|
style="width: 100%" |
|
:options="areaTree" |
|
@change="listchansge" |
|
@active-item-change='chansges' |
|
: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="newInfos.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="12"> |
|
<el-form-item label="详细地址" prop="address"> |
|
<el-input v-model="newInfos.address" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item label="经度 " prop="longitude"> |
|
<el-input v-model="newInfos.longitude" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item label="纬度" prop="latitude"> |
|
<el-input v-model="newInfos.latitude" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<el-row> |
|
<el-col :span="24"> |
|
<el-col :span="4"> |
|
<el-form-item |
|
label="禁用启用" |
|
prop="globalEnable" |
|
> |
|
<el-switch |
|
v-model="newInfos.globalEnable" |
|
active-color="#13ce66" |
|
inactive-color="#ff4949" |
|
:active-value="1" |
|
:inactive-value="0" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
<!-- <el-col :span="4"> |
|
<el-form-item |
|
label="删除标识" |
|
prop="deleteMark" |
|
> |
|
<el-switch |
|
v-model="newInfos.deleteMark" |
|
active-color="#13ce66" |
|
inactive-color="#ff4949" |
|
:active-value="1" |
|
:inactive-value="0" |
|
/> |
|
</el-form-item> |
|
</el-col> --> |
|
<el-col :span="4"> |
|
<el-form-item |
|
label="审核标识" |
|
prop="auditMark" |
|
> |
|
<el-switch |
|
v-model="newInfos.auditMark" |
|
active-color="#13ce66" |
|
inactive-color="#ff4949" |
|
:active-value="1" |
|
:inactive-value="0" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="4"> |
|
<el-form-item |
|
label="上架标识" |
|
prop="putawayMark" |
|
> |
|
<el-switch |
|
v-model="newInfos.putawayMark" |
|
active-color="#13ce66" |
|
inactive-color="#ff4949" |
|
:active-value="1" |
|
:inactive-value="0" |
|
@change="putaway(newInfos)" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="4"> |
|
<el-form-item |
|
label="二维码支付" |
|
prop="qrcodePay" |
|
> |
|
<el-switch |
|
v-model="newInfos.qrcodePay" |
|
active-color="#13ce66" |
|
inactive-color="#ff4949" |
|
:active-value="1" |
|
:inactive-value="0" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="4"> |
|
<el-form-item |
|
label="扫码支付" |
|
prop="qrcodeSitePay" |
|
> |
|
<el-switch |
|
v-model="newInfos.qrcodeSitePay" |
|
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 :span="24"> |
|
<el-col :span="4"> |
|
<el-form-item |
|
label="一键下单" |
|
prop="activePay" |
|
> |
|
<el-switch |
|
v-model="newInfos.activePay" |
|
active-color="#13ce66" |
|
inactive-color="#ff4949" |
|
:active-value="1" |
|
:inactive-value="0" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="7"> |
|
<el-form-item |
|
label="是否高速" |
|
prop="highSpeedMark" |
|
> |
|
<el-select v-model="newInfos.highSpeedMark" @change="changeHigh" clearable> |
|
<el-option label="非高速" :value="0" /> |
|
<el-option label="高速" :value="1" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="7"> |
|
<el-form-item |
|
label="道路类型" |
|
prop="roadTpye" |
|
> |
|
<el-select v-model="newInfos.roadTpye" :disabled="newInfos.highSpeedMark" clearable> |
|
<el-option label="普通" :value="'0'" /> |
|
<el-option label="省道" :value="'1'" /> |
|
<el-option label="国道" :value="'2'" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item |
|
label="道路名称" |
|
prop="roadName" |
|
> |
|
<el-input v-model="newInfos.roadName" placeholder="请输入道路名称" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
</el-col> |
|
</el-row> |
|
</el-col> |
|
</el-row> |
|
<el-row style="padding:0 2%"> |
|
<el-col class="h2boxsings"> |
|
<h2 class="h2_class"> |
|
<span><img src="../../../assets/img/iconsOlis.png" style="width:30px;height:30px;margin-right:10px;"></span><span>油站所属信息</span> |
|
</h2> |
|
</el-col> |
|
<el-col style="padding:2% 2%;"> |
|
<el-row > |
|
<el-col :span="12"> |
|
<el-form-item label="油站账户" prop="siteChannelAccountId"> |
|
<el-select v-model="newInfos.siteChannelAccountId" clearable placeholder="请选择油站账户" style="width:100%"> |
|
<el-option |
|
v-for="item in restaurants" |
|
:key="item.id" |
|
:label="item.value+'-'+item.id" |
|
:value="item.id" |
|
> |
|
{{ item.value }}-<span style="color:#bbbbbb">{{item.id}}</span> |
|
</el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="24"> |
|
<el-col :span="6"> |
|
<el-form-item |
|
label="油站品牌" |
|
prop="siteBrand" |
|
> |
|
<el-select v-model="newInfos.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="6"> |
|
<el-form-item |
|
label="油站类型" |
|
prop="siteType" |
|
> |
|
<el-select v-model="newInfos.siteType" clearable> |
|
<el-option label="加油站" :value="'1'" /> |
|
<el-option label="加气站" :value="'2'" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item |
|
label="油站性质" |
|
prop="siteNature" |
|
> |
|
<el-select v-model="newInfos.siteNature" clearable> |
|
<el-option label="自营油站" :value="1" /> |
|
<el-option label="渠道油站" :value="0" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item |
|
label="油站等级" |
|
prop="siteLevel" |
|
> |
|
<el-select v-model="newInfos.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> |
|
</el-row> |
|
|
|
<el-row> |
|
<el-col :span="24"> |
|
<el-col :span="6"> |
|
<el-form-item |
|
label="支付方式" |
|
prop="payMethod" |
|
> |
|
<el-select v-model="newInfos.payMethod" clearable> |
|
<el-option label="普通支付方式" :value="1" /> |
|
<el-option label="联名卡支付" :value="2" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item |
|
label="油站渠道" |
|
prop="siteChannel" |
|
> |
|
<el-select v-model="newInfos.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="6"> |
|
<el-form-item |
|
label="使用类型" |
|
prop="siteCustomerMark" |
|
> |
|
<el-select v-model="newInfos.siteCustomerMark" clearable> |
|
<el-option label="个人油站" :value="1" /> |
|
<el-option label="公用油站" :value="2" /> |
|
<el-option label="企业油站" :value="3" /> |
|
<el-option label="公司指定油站" :value="0" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item label="联系人姓名" prop="siteContacts"> |
|
<el-input v-model="newInfos.siteContacts" placeholder="请输入联系人姓名" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
</el-col> |
|
</el-row> |
|
<el-row> |
|
<el-col :span="8"> |
|
<el-form-item label="联系人手机号" prop="siteContactPhone"> |
|
<el-input v-model="newInfos.siteContactPhone" placeholder="请输入联系人手机号" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
</el-col> |
|
</el-row> |
|
<el-row style="padding:0 2%"> |
|
<el-col class="h2boxsings"> |
|
<h2 class="h2_class3"> |
|
<span><img src="../../../assets/img/iconsOlis.png" style="width:30px;height:30px;margin-right:10px;"></span> <span style="margin-right:10px;"> 三方油站信息</span> |
|
<span style="font-size:12px">当油站渠道为壳牌、上汽时填写</span> |
|
</h2> |
|
</el-col> |
|
<el-col style="padding:2% 2%;"> |
|
<el-row> |
|
<el-col :span="8"> |
|
<el-form-item |
|
label="二级渠道标识" |
|
prop="secondChannelCode" |
|
> |
|
<el-select v-model="newInfos.secondChannelCode" clearable> |
|
<el-option label="壳牌" :value="'QP'" /> |
|
<el-option label="上汽" :value="'SQ'" /> |
|
<el-option label="广东壳牌" :value="'GDQP'" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="8"> |
|
<el-form-item label="三方渠道编码" prop="otherSiteCode"> |
|
<el-input v-model="newInfos.otherSiteCode" placeholder="请输入三方渠道编码" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="8"> |
|
<el-form-item label="三方渠道账户" prop="otherSiteAccount" :rules="newInfos.secondChannelCode === 'SQ' ? rules.target:[{ required: false}]"> |
|
<el-input v-model="newInfos.otherSiteAccount" placeholder="请输入三方渠道账户" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
</el-col> |
|
</el-row> |
|
<el-row style="padding:0 2%"> |
|
<el-col class="h2boxsings"> |
|
<h2 class="h2_class1"><span><img src="../../../assets/img/iconsOlis.png" style="width:30px;height:30px;margin-right:10px;"></span><span>其他信息</span></h2> |
|
</el-col> |
|
<el-col style="padding:2% 2%;"> |
|
<el-row> |
|
<el-col :span="12"> |
|
<el-form-item label="油站负责人" prop="businessLeader"> |
|
<el-select |
|
v-model="newInfos.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-col :span="12"> |
|
<el-form-item label="运营负责人" prop="operateLeader"> |
|
<el-select |
|
v-model="newInfos.operateLeader" |
|
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-col :span="12"> |
|
<el-form-item |
|
label="列表标签" |
|
prop="listTag" |
|
> |
|
<el-input v-model="newInfos.listTag" placeholder="请输入列表标签，用逗号分隔，建议4-6个中文字符" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-form-item label="油站标签" prop="labelTag"> |
|
<el-input v-model="newInfos.labelTag" type="textarea" placeholder="请输入油站标签，用逗号分隔，建议4-6个中文字符" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-form-item label="提示文案" prop="detailContent"> |
|
<el-input v-model="newInfos.detailContent" placeholder="请输入提示文案" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="24"> |
|
<el-col :span="4"> |
|
<el-form-item |
|
label="促销优惠开关" |
|
prop="activitySwitch" |
|
> |
|
<el-switch |
|
v-model="newInfos.activitySwitch" |
|
active-color="#13ce66" |
|
inactive-color="#ff4949" |
|
:active-value="1" |
|
:inactive-value="0" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-form-item |
|
label="促销优惠内容" |
|
prop="listTag" |
|
> |
|
<el-input maxlength="20" v-model="newInfos.activityContent" placeholder="请输入优惠信息(≤20字)" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
</el-col> |
|
</el-row> |
|
</el-col> |
|
</el-row> |
|
<!-- <el-row style="padding:0 2%">--> |
|
<!-- <el-col class="h2boxsings">--> |
|
<!-- <h2 class="h2_class1"><span><img src="../../../assets/img/iconsOlis.png" style="width:30px;height:30px;margin-right:10px;"></span> <span> 认证信息</span></h2>--> |
|
<!-- </el-col>--> |
|
<!-- <el-col style="padding:2% 2%;">--> |
|
<!-- <el-row>--> |
|
<!-- <el-col :span="10">--> |
|
<!-- <el-form-item label="法人姓名" prop="legalName">--> |
|
<!-- <el-input v-model="newInfos.legalName" clearable />--> |
|
<!-- </el-form-item>--> |
|
<!-- </el-col>--> |
|
<!-- <el-col :span="10">--> |
|
<!-- <el-form-item label="法人联系电话" prop="legalPhone">--> |
|
<!-- <el-input v-model="newInfos.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="newInfos.legalIdcard" clearable />--> |
|
<!-- </el-form-item>--> |
|
<!-- </el-col>--> |
|
<!-- <el-col :span="10">--> |
|
<!-- <el-form-item label="银行卡号" prop="bankCardNo">--> |
|
<!-- <el-input v-model="newInfos.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="newInfos.bankCardName" clearable />--> |
|
<!-- </el-form-item>--> |
|
<!-- </el-col>--> |
|
<!-- <el-col :span="10">--> |
|
<!-- <el-form-item label="开户银行名称" prop="bankName">--> |
|
<!-- <el-input v-model="newInfos.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="newInfos.bankNature" clearable />--> |
|
<!-- </el-form-item>--> |
|
<!-- </el-col>--> |
|
<!-- <el-col :span="10">--> |
|
<!-- <el-form-item label="开户所属银行" prop="bankDeposit">--> |
|
<!-- <el-input v-model="newInfos.bankDeposit" 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"--> |
|
<!-- :class="{hiden:hidenSistLicen}"--> |
|
<!-- :file-list="siteList"--> |
|
<!-- >--> |
|
<!-- <i class="el-icon-plus" />--> |
|
<!-- </el-upload>--> |
|
<!-- <el-dialog :visible.sync="showSiteImages" :modal="false">--> |
|
<!-- <img width="100%" :src="newInfos.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"--> |
|
<!-- :class="{hiden:hidenSistLicen}"--> |
|
<!-- :file-list="sitelicenseNList"--> |
|
<!-- >--> |
|
<!-- <i class="el-icon-plus" />--> |
|
<!-- </el-upload>--> |
|
<!-- <el-dialog :visible.sync="sitelicenseNoImages" :modal="false">--> |
|
<!-- <img width="100%" :src="newInfos.licenseImage" alt="">--> |
|
<!-- </el-dialog>--> |
|
<!-- </el-form-item>--> |
|
<!-- </el-col>--> |
|
<!-- </el-row>--> |
|
<!-- </el-col>--> |
|
<!-- </el-row>--> |
|
<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 siteChannelAccountApi from '@/api/finance/siteChannelAccount' |
|
import oilVehideOwner from '@/api/user/oilVehicleOwner' |
|
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' |
|
import handleClipboard from '@/utils/clipboard.js' |
|
const JSESSIONID = utils.uuid() |
|
|
|
var validatorPhone = function (rule, value, callback) { |
|
if (!value) { |
|
callback(new Error('手机号不能为空')) |
|
} |
|
// else if (!/^1\d{10}$/.test(value)) { |
|
// callback(new Error('手机号格式错误')) |
|
// } |
|
else { |
|
callback() |
|
} |
|
} |
|
|
|
export default { |
|
props: { |
|
oilSiteInfo: { |
|
type: Object, |
|
default() {} |
|
} |
|
}, |
|
data() { |
|
return { |
|
restaurants:[], |
|
serchInfos:'', |
|
serchInfoText:{}, |
|
MapList:[], |
|
newInfos:this.oilSiteInfo, |
|
siteList:[], |
|
putawayValue:'', |
|
serechMap:"", |
|
sitelicenseNList:[], |
|
hidenSistLicen:false, |
|
oilList: [], // 油品集合 |
|
dialogForMapVisible:false, |
|
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, |
|
isShowMap: true, // 高德地图div默认展示 |
|
areaTree: [], |
|
addrCode: [], // 省市区code |
|
options11: [ |
|
{ value: 'XOIL', label: '星油' }, |
|
], |
|
numbs:0, |
|
rules: { |
|
siteName:[ |
|
{ required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
], //类型：String 必有字段 备注：油站名称 |
|
payMethod:[ |
|
{ required: true, message: '支付方式不能为空', trigger: 'change' } |
|
], //类型：String 必有字段 备注：支付方式 |
|
// siteImages:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：String 必有字段 备注：油站照片 |
|
// siteBrand:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'change' } |
|
// ], //类型：String 必有字段 备注：油站品牌 |
|
siteCustomerMark:[ |
|
{ required: true, message: '所属终端不能为空', trigger: 'change' } |
|
], //类型：Number 必有字段 备注：所属终端 |
|
siteNature:[ |
|
{ required: true, message: '油站性质不能为空', trigger: 'change' } |
|
], //类型：Number 必有字段 备注： 油站性质 |
|
siteChannel:[ |
|
{ required: true, message: '油站渠道不能为空', trigger: 'change' } |
|
], //类型：String 必有字段 备注：油站渠道 |
|
siteType:[ |
|
{ required: true, message: '油站类型不能为空', trigger: 'change' } |
|
], //类型：String 必有字段 备注：油站类型 |
|
// siteContacts:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：String 必有字段 备注：联系人姓名 |
|
siteContactPhone:[ |
|
{ required: true, validator: validatorPhone, trigger: 'blur' } |
|
], //类型：String 必有字段 备注：联系电话 |
|
siteLevel:[ |
|
{ required: true, message: '油站等级不能为空', trigger: 'blur' } |
|
], //类型：String 必有字段 备注：油站等级 |
|
address:[ |
|
{ required: true, message: '详细地址不能为空', trigger: 'blur' } |
|
], //类型：String 必有字段 备注：详细地址 |
|
// provinceName:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：String 必有字段 备注：省份名称 |
|
// cityName:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：String 必有字段 备注：城市名称 |
|
// areaName:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：String 必有字段 备注：区县名称 |
|
longitude:[ |
|
{ required: true, message: '经度不能为空', trigger: 'blur' } |
|
], //类型：Number 必有字段 备注：经度 |
|
latitude:[ |
|
{ required: true, message: '纬度不能为空', trigger: 'blur' } |
|
], //类型：Number 必有字段 备注：纬度 |
|
highSpeedMark:[ |
|
{ required: true, message: '是否为高速不能为空', trigger: 'change' } |
|
], //类型：Number 必有字段 备注：是否为高速 |
|
qrcodePay:[ |
|
{ required: true, message: '二维码支付不能为空', trigger: 'change' } |
|
], //类型：Number 必有字段 备注：二维码支付 |
|
qrcodeSitePay:[ |
|
{ required: true, message: '扫描油站二维码支付不能为空', trigger: 'change' } |
|
], //类型：Number 必有字段 备注：扫描油站二维码支付 |
|
activePay:[ |
|
{ required: true, message: '一键下单付款不能为空', trigger: 'change' } |
|
], //类型：Number 必有字段 备注：一键下单付款 |
|
// detailContent:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：String 必有字段 备注：提示文案 |
|
// listTag:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：String 必有字段 备注：列表标签 |
|
// labelTag:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：String 必有字段 备注：油站标签 |
|
// deleteMark:[ |
|
// { required: true, message: '删除标识不能为空', trigger: 'change' } |
|
// ], //类型：Number 必有字段 备注： 删除标识 |
|
globalEnable:[ |
|
{ required: true, message: '全局禁用启用不能为空', trigger: 'change' } |
|
], //类型：Number 必有字段 备注：全局禁用启用 |
|
putawayMark:[ |
|
{ required: true, message: '上架标识不能为空', trigger: 'change' } |
|
], //类型：Number 必有字段 备注：上架标识 |
|
auditMark:[ |
|
{ required: true, message: '审核标识不能为空', trigger: 'change' } |
|
], //类型：Number 必有字段 备注：审核标识 |
|
// businessLeader:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：String 必有字段 备注：业务负责人 |
|
otherSiteAccount :[ |
|
{ required: true, message: '三方渠道账户不能为空', trigger: 'blur' } |
|
],//类型：String 必有字段 备注：三方渠道账户 |
|
otherSiteCode:[ |
|
{ required: true, message: '三方油站编码不能为空', trigger: 'blur' } |
|
], //类型：String 必有字段 备注：三方油站编码 |
|
// channelCode:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：String 必有字段 备注：渠道编码 |
|
// secondChannelCode:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：String 必有字段 备注：二级渠道编码 |
|
// licenseImage:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：String 必有字段 备注：营业许可证照片 |
|
// legalName:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：String 必有字段 备注：法人姓名 |
|
// legalPhone:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：String 必有字段 备注：法人联系电话 |
|
// legalIdcard:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：String 必有字段 备注：法人身份证号码 |
|
// bankCardNo:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：String 必有字段 备注：银行卡号 |
|
// bankCardName:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：String 必有字段 备注：开户人姓名 |
|
// bankNature:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：String 必有字段 备注：银行行政，公户、个人账户 |
|
// bankDeposit:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：String 必有字段 备注：开户所属银行 |
|
//类型：Number 必有字段 备注：企业加油价格 |
|
// otherPrice:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：Number 必有字段 备注：三方油站价格 |
|
//类型：String 必有字段 备注：排放标准 |
|
// oilsBar:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：String 必有字段 备注：油枪用逗号隔开 |
|
// oilProductType:[ |
|
// { required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
// ], //类型：String 必有字段 备注：油品 |
|
oilProductCode:[ |
|
{ required: true, message: '油品编码不能为空', trigger: 'blur' } |
|
], |
|
siteChannelAccountId:[ |
|
{ required: true, message: '油站账户名称不能为空', trigger: 'change' } |
|
], |
|
} |
|
} |
|
}, |
|
computed: { |
|
}, |
|
created() { |
|
this.getAccountNames() |
|
console.log('这里是created',this.oilSiteInfo) |
|
console.log('++++++++++++++++++++++++++++++++',this.newInfos) |
|
if (this.oilSiteInfo.licenseImage) { |
|
this.sitelicenseNList.push({ name: '营业执照照片', url: this.oilSiteInfo.licenseImage }) |
|
// this.updateSysCustomerInfo.headPhoto = undefined |
|
// this.hidenSistLicen = true |
|
console.log('++++++++++++++++++++++++++++++++++++++++++++++') |
|
} |
|
if (this.oilSiteInfo.siteImages) { |
|
this.siteList.push({ name: '油站照片', url: this.oilSiteInfo.siteImages }) |
|
// this.hidenSistLicen = true |
|
console.log('++++++++ssss++++++++++++++++++++++++++++++++++++++') |
|
// this.updateSysCustomerInfo.headPhoto = undefined |
|
} |
|
|
|
// this.addrCode.push(TextToCode[this.oilSiteInfo.provinceName].code,TextToCode[this.oilSiteInfo.provinceName][this.oilSiteInfo.cityName].code,TextToCode[this.oilSiteInfo.provinceName][this.oilSiteInfo.cityName][this.oilSiteInfo.areaName].code) |
|
console.log(this.addrCode) |
|
oilVehideOwner.getOils().then(res=>{ |
|
if(res.code == 20000){ |
|
this.oilList = res.data |
|
console.log(res.data) |
|
}else{ |
|
this.$message.error(res.msg) |
|
} |
|
}) |
|
// oilVehideOwner.getOilsByType(this.oilSiteOilsPrice.oilProductType).then(res => { |
|
// if(res.code == 20000){ |
|
// this.oilList = res.data |
|
// console.log(res.data) |
|
// }else{ |
|
// this.$message.error(res.msg) |
|
// } |
|
|
|
// }) |
|
AreaCodeApi.getTree().then(res => { |
|
console.log('------***************-',res) |
|
this.areaTree = res.data |
|
}) |
|
this.getOils() |
|
// this.loadMap() |
|
// this.oilSiteInfo = { ...this.oilSiteInfo } |
|
this.addrCode = [parseInt(this.newInfos.provinceCode), parseInt(this.newInfos.cityCode), parseInt(this.newInfos.areaCode)] |
|
console.log( this.addrCode ) |
|
}, |
|
mounted() { |
|
// setTimeout(() => { |
|
this.loadMap() // 加载地图和相关组件 |
|
// }, 3000); |
|
}, |
|
methods: { |
|
// 获取搜索 |
|
querySearchAsync(queryString, cb) { |
|
const results = queryString ? this.restaurants.filter(f => f.value.indexOf(queryString) !== -1) : [] |
|
cb(results) |
|
}, |
|
// 获取账户名称键值对 |
|
getAccountNames() { |
|
siteChannelAccountApi.getChannelAccountMaps().then(res => { |
|
if (res.code === 20000) { |
|
const arr = [...res.data] |
|
this.restaurants = arr.filter(f => f.accountState === '1') |
|
} |
|
}) |
|
}, |
|
changeHigh(){ |
|
if(this.newInfos.highSpeedMark){ |
|
this.newInfos.roadTpye = '' |
|
} |
|
}, |
|
listchansge(e){ |
|
// console.log(e,'lists') |
|
// this.numbs +=1 |
|
// if(this.numbs<=3){ |
|
this.addrCode = e |
|
console.log(this.addrCode) |
|
// } |
|
|
|
}, |
|
putaway(row) { |
|
if (row.putawayMark === 1) { |
|
this.$prompt('确认上架?', '提示', { type: 'success',inputPlaceholder:'请输入上架原因',inputPattern:/^[\u4e00-\u9fa5]{1,100}$|^[\dA-Za-z_]{1,100}$/,inputErrorMessage: '请输入原因'}).then(({value}) => { |
|
this.putawayValue = value |
|
}).catch(() => { |
|
row.putawayMark = 0 |
|
}) |
|
} else { |
|
this.$prompt('确认下架?', '提示', { type: 'warning',inputPlaceholder:'请输入下架原因',inputPattern:/^[\u4e00-\u9fa5]{1,100}$|^[\dA-Za-z_]{1,100}$/,inputErrorMessage: '请输入原因' }).then(({value}) => { |
|
this.putawayValue = value |
|
}).catch(() => { |
|
row.putawayMark = 1 |
|
}) |
|
} |
|
}, |
|
putawayChange(){ |
|
var params = {} |
|
params = { |
|
siteId:this.newInfos.id, |
|
optionType:'putway', |
|
status:this.newInfos.putawayMark, |
|
putawayRemark:this.putawayValue |
|
} |
|
console.log(params,'打印上架信息') |
|
oilSiteInfoApi.updateSiteMark(params).then(res => { |
|
}) |
|
}, |
|
chansges(e){ |
|
console.log(e) |
|
}, |
|
handleClose(){ |
|
this.dialogForMapVisible = false |
|
this.serechMap = '' |
|
}, |
|
listss(e){ |
|
console.log(e) |
|
}, |
|
// 获取油品 |
|
getOils(){ |
|
oilVehideOwner.getOils().then(res=>{ |
|
console.log(res) |
|
}) |
|
}, |
|
showMap(){ |
|
this.$nextTick(()=>{ |
|
this.dialogForMapVisible = true |
|
setTimeout(() => { |
|
this.loadMap() |
|
}, 600); |
|
|
|
}) |
|
}, |
|
userRemoteMethod(value) { // 远程搜索 |
|
if (value) { |
|
sysCustomerInfoApi.liekQuery(value).then(res => { |
|
this.userList = res.data |
|
}) |
|
} |
|
}, |
|
|
|
headPhotoRemove(file ) { // 油站照片删除 |
|
console.log(file) |
|
this.newInfos ={ |
|
...this.newInfos, |
|
siteImages: '' |
|
} |
|
// this.newInfos.siteImages = undefined |
|
this.siteImages = undefined |
|
}, |
|
headPhotoPreview(file) { // 油站照片预览 |
|
this.showSiteImages = true |
|
}, |
|
headPhotoSuccess(res) { // 油站照片上传成功 |
|
console.log(res) |
|
this.siteImages = res.data.publicUrl |
|
this.newInfos.siteImages = res.data.publicUrl |
|
}, |
|
|
|
sitelicenseNoImageRemove(file) { // 营业执照删除 |
|
console.log(file) |
|
this.newInfos ={ |
|
...this.newInfos, |
|
licenseImage: '' |
|
} |
|
this.newInfos.licenseImage = undefined |
|
this.siteLicenseImages = undefined |
|
}, |
|
sitelicenseNoImagePreview(file) { // 营业执照 |
|
this.sitelicenseNoImages = true |
|
}, |
|
sitelicenseNoImageSuccess(res) { // 营业执照上传成功 |
|
console.log('success') |
|
this.siteLicenseImages = res.data.publicUrl |
|
this.newInfos.licenseImage = res.data.publicUrl |
|
console.log(this.siteLicenseImages) |
|
}, |
|
submit() { |
|
if(this.newInfos.activitySwitch && !this.newInfos.activityContent){ |
|
this.$message.error('请输入促销优惠内容') |
|
return |
|
} |
|
if(!this.newInfos.activitySwitch && !this.newInfos.activityContent){ |
|
this.newInfos.activityContent = '暂无' |
|
} |
|
if(!this.newInfos.roadName){ |
|
this.newInfos.roadName = '暂无' |
|
} |
|
console.log(this.newInfos) |
|
this.$refs['form'].validate((valid) => { |
|
if (valid) { |
|
// this.putawayChange() |
|
this.save(this.newInfos) |
|
} |
|
}) |
|
}, |
|
mapRemoteMethod(value) { // 远程搜索 |
|
let _that = this |
|
AMap.service(["AMap.PlaceSearch"],function(){ |
|
var placeSearch = new AMap.PlaceSearch({ |
|
pageSize:12, |
|
pageIndex:1, |
|
city:'010', |
|
cityLimit:'true', |
|
panel:'panel' |
|
}) |
|
placeSearch.search(value,function(status,result){ |
|
if(status == 'complete' && result.info == 'OK' ){ |
|
let maplist = result.poiList.pois |
|
_that.MapList = maplist |
|
} |
|
}) |
|
}) |
|
}, |
|
currentSel(e){ |
|
console.log(e) |
|
console.log('chansges', this.MapList) |
|
this.MapList.forEach( item=>{ |
|
if(item.id == e){ |
|
this.serchInfoText = item |
|
} |
|
}) |
|
// this.serchInfoText = e |
|
}, |
|
copyOrderId(text, event) { |
|
handleClipboard(text, event) |
|
}, |
|
changeMap(){ |
|
let _that = this |
|
_that.newInfos = { |
|
..._that.newInfos , |
|
longitude : this.serchInfoText.location.lng, |
|
latitude : this.serchInfoText.location.lat , |
|
address : this.serchInfoText.pname+this.serchInfoText.cityname+this.serchInfoText.address |
|
} |
|
// // 根据地址搜索经纬度后重新加载地图 |
|
this.loadMap() |
|
}, |
|
save() { |
|
// 保存 |
|
this.setCodeName() |
|
this.newInfos.updateSource = 'XOIL_OMS_WEB' |
|
this.newInfos.longitude = this.newInfos.longitude |
|
this.newInfos.latitude = this.newInfos.latitude |
|
this.newInfos.putawayRemark = this.putawayValue |
|
oilSiteInfoApi.updateSite(this.newInfos).then(res => { |
|
if(res.code == 20000){ |
|
this.$message.success(res.msg) |
|
this.$emit('closeDialog') |
|
this.$emit('getByPage') |
|
this.$refs['form'].resetFields() |
|
this.addrCode = [] |
|
}else{ |
|
this.$message.error(res.code) |
|
} |
|
}) |
|
}, |
|
setCodeName() { |
|
console.log('这里是进入') |
|
this.newInfos.provinceName = this.addrCode[0] |
|
this.newInfos.cityName = this.addrCode[1] |
|
this.newInfos.areaName = this.addrCode[2] |
|
this.newInfos.provinceCode = this.addrCode[0] |
|
this.newInfos.cityCode = this.addrCode[1] |
|
this.newInfos.areaCode = this.addrCode[2] |
|
console.log(this.addrCode) |
|
this.areaTree.forEach(item => { |
|
if (item.id === this.addrCode[0]) { |
|
// conso.log('addrCode',item) |
|
this.newInfos.provinceName = item.areaName |
|
console.log(this.newInfos.provinceName) |
|
} |
|
if (item.childList) { |
|
item.childList.forEach(itemm => { |
|
if (itemm.id === this.addrCode[1]) { |
|
// conso.log('addrCode+++',item) |
|
this.newInfos.cityName = itemm.areaName |
|
console.log(this.newInfos.cityName) |
|
} |
|
if (itemm.childList) { |
|
itemm.childList.forEach(itm => { |
|
if (itm.id === this.addrCode[2]) { |
|
// conso.log('addrCode++++++++++',item) |
|
this.newInfos.areaName = itm.areaName |
|
console.log(this.newInfos.areaName) |
|
return |
|
} |
|
}) |
|
} |
|
}) |
|
} |
|
}) |
|
}, |
|
close() { |
|
this.$emit('closeDialog') |
|
}, |
|
loadMap() { |
|
console.log('++++++++++++++++++++++++++++++++',this.newInfos) |
|
console.log(this.affirmData, 'data') |
|
// 地图示例 |
|
var _that = this |
|
let lnt = this.newInfos.longitude, |
|
lat = this.newInfos.latitude |
|
var map = new AMap.Map('container_af', { |
|
zoom: 16, |
|
resizeEnable: true, |
|
// center: [this.defaultInfo.longitude, this.defaultInfo.latitude] // 中心点坐标 |
|
}) |
|
if(!lnt){ |
|
_that.newInfos = { |
|
..._that.newInfos , |
|
longitude :_that .affirmData.lon, |
|
latitude :_that .affirmData.lat |
|
} |
|
}else{ |
|
_that.newInfos = { |
|
..._that.newInfos , |
|
longitude :lnt, |
|
latitude :lat |
|
} |
|
} |
|
// 创建一个 Marker 实例： |
|
var marker = new AMap.Marker({ |
|
position: new AMap.LngLat(_that.newInfos.longitude, _that.newInfos.latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] |
|
// title: '北京' |
|
}); |
|
// 将创建的点标记添加到已有的地图实例： |
|
map.add(marker) |
|
|
|
if(!lnt){ |
|
AMap.plugin('AMap.Geolocation',function(){ |
|
var geolocation = new AMap.Geolocation({ |
|
// 是否使用高精度定位，默认：true |
|
enableHighAccuracy: true, |
|
// 设置定位超时时间，默认：无穷大 |
|
timeout: 10000, |
|
// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20) |
|
buttonOffset: new AMap.Pixel(10, 20), |
|
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false |
|
zoomToAccuracy: true, |
|
// 定位按钮的排放位置, RB表示右下 |
|
buttonPosition: 'RB' |
|
}) |
|
map.addControl(geolocation); // 将geolocation 赋给 map |
|
geolocation.getCurrentPosition() |
|
AMap.event.addListener(geolocation, 'complete', onComplete) |
|
AMap.event.addListener(geolocation, 'error', onError) |
|
function onComplete (data) { |
|
let _that = this |
|
_that.newInfos.longitude = data.lnglat.lon |
|
_that.newInfos.latitude = data.lnglat.lat |
|
// data是具体的定位信息 |
|
} |
|
function onError (data) { |
|
console.log('位置信息erro',data) |
|
this.$message('位置信息erro',data); |
|
// 定位出错 |
|
} |
|
}) |
|
} |
|
AMap.plugin('AMap.Geocoder', function() { |
|
var geocoder = new AMap.Geocoder({ |
|
city: '010'// 城市，默认：“全国” |
|
}) |
|
let lnglat = [lnt,lat] |
|
geocoder.getAddress(lnglat, function(status, result) { |
|
if (status === 'complete'&&result.regeocode) { |
|
_that.newInfos.address = result.regeocode.formattedAddress; |
|
}else{ |
|
_that.$message.error('根据经纬度查询地址失败') |
|
} |
|
}); |
|
}) |
|
map.on('click', (e) => { |
|
console.log(e) |
|
_that.newInfos = { |
|
..._that.newInfos , |
|
longitude : e.lnglat.getLng(), |
|
latitude : e.lnglat.getLat() |
|
} |
|
// _that.newInfos.longitude = e.lnglat.getLng() |
|
// _that.newInfos.latitude = e.lnglat.getLat() |
|
// console.log( _that.newInfos.latitude) |
|
// console.log( _that.newInfos.longitude) |
|
// 每点击一次就将坐标点定位在点击处 |
|
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 .newInfos.address = result.regeocode.formattedAddress |
|
} else { |
|
_that .$message.error('无法获取地址') |
|
} |
|
}) |
|
}) |
|
}) |
|
map.setZoomAndCenter(16,[lnt,lat]) |
|
}, // 正向地理解析 |
|
queryByAddress() { |
|
var that = this |
|
// if (that.newInfos.address&&that.newInfos.longitude&&that.newInfos.latitude){ |
|
// that.$message.error('经纬度和详细地址须有一项为空') |
|
// return; |
|
// }else if (this.newInfos.longitude&&this.newInfos.latitude){ |
|
// that.loadMap() |
|
// }else if(that.newInfos.address) { |
|
this.geography.address = this.serechMap |
|
console.log('this.gaodraohy：' + this.geography.address) |
|
GaodeApi.geography(this.geography).then(res => { |
|
console.log(res) |
|
if (res.code === 20000) { |
|
if (res.data.geocodes.length > 0) { |
|
let _that = this |
|
_that.newInfos = { |
|
..._that.newInfos , |
|
longitude : res.data.geocodes[0].location.split(',')[0], |
|
latitude : res.data.geocodes[0].location.split(',')[1] , |
|
address : res.data.geocodes[0].formatted_address |
|
} |
|
this.newInfos.longitude = parseFloat( res.data.geocodes[0].location.split(',')[0]) |
|
this.newInfos.latitude = parseFloat(res.data.geocodes[0].location.split(',')[1] ) |
|
let lnglat= [ this.newInfos.longitude, |
|
this.newInfos.latitude ] |
|
|
|
// 根据地址搜索经纬度后重新加载地图 |
|
this.loadMap() |
|
console.log() |
|
// marker.setPosition(new AMap.LngLat(this.newInfos.longitude, this.newInfos.latitude)) |
|
// map.add(marker) |
|
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.newInfos.address = result.regeocode.formattedAddress |
|
console.log(result.regeocode.formattedAddress) |
|
} else { |
|
that.$message.error('无法获取地址') |
|
} |
|
}) |
|
}) |
|
} |
|
} |
|
}) |
|
// } |
|
} |
|
} |
|
} |
|
</script> |
|
<style scoped> |
|
.el-form-item__content .el-input, .el-form-item__content .el-textarea, .el-form-item__content .el-date-editor, .el-form-item__content .el-radio-group { |
|
box-shadow: none !important; |
|
} |
|
.dialog_boxsings_left{ |
|
display:flex; |
|
justify-content: flex-start; |
|
align-items: center; |
|
width: 100%; |
|
margin-bottom: 20px; |
|
} |
|
.dialog-footer{ |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
flex-wrap: wrap; |
|
flex-direction: column; |
|
} |
|
aside { |
|
background: none; |
|
} |
|
.buttons_box{ |
|
display: flex; |
|
justify-content:flex-start; |
|
align-items: center; |
|
} |
|
.mymap { |
|
width:100%; |
|
height: 380px; |
|
display: flex; |
|
/* float: left; */ |
|
} |
|
.image-vessl { |
|
color: seashell !important; |
|
} |
|
.el-main { |
|
padding: 0; |
|
margin-left:20px; |
|
} |
|
.boxsingss{ |
|
flex-wrap: nowrap; |
|
} |
|
.el-form-item__content .el-input, .el-form-item__content .el-textarea, .el-form-item__content .el-date-editor, .el-form-item__content .el-radio-group { |
|
box-shadow: none !important; |
|
} |
|
.el-form-item__content /deep/ .el-input{ |
|
box-shadow: none !important; |
|
} |
|
.el-form-item__content .el-input, .el-form-item__content .el-textarea, .el-form-item__content .el-date-editor, .el-form-item__content .el-radio-group{ |
|
box-shadow: none !important; |
|
} |
|
.el-cascader /deep/ .el-input { |
|
cursor: pointer; |
|
box-shadow: none !important; |
|
} |
|
.el-select /deep/ .el-input { |
|
display: block; |
|
box-shadow: none !important; |
|
} |
|
.serchText{ |
|
display: flex; |
|
justify-content: flex-start; |
|
align-items: center; |
|
} |
|
.el-input /deep/ .el-input__inner { |
|
-webkit-appearance: none; |
|
background-color: #fff; |
|
background-image: none; |
|
border-radius: 4px; |
|
border: 1px solid #dcdfe6; |
|
box-sizing: border-box; |
|
color: #333333 !important; |
|
display: inline-block; |
|
font-size: inherit; |
|
height: 40px; |
|
line-height: 40px; |
|
outline: none; |
|
padding: 0 15px; |
|
transition: border-color .2s cubic-bezier(0.645, 0.045, 0.355, 1); |
|
width: 100%; |
|
} |
|
.el-select /deep/ .el-input .el-input__inner { |
|
-webkit-appearance: none; |
|
background-color: #fff; |
|
background-image: none; |
|
border-radius: 4px; |
|
border: 1px solid #dcdfe6; |
|
box-sizing: border-box; |
|
color: #333333 !important; |
|
display: inline-block; |
|
font-size: inherit; |
|
height: 40px; |
|
line-height: 40px; |
|
outline: none; |
|
padding: 0 15px; |
|
transition: border-color .2s cubic-bezier(0.645, 0.045, 0.355, 1); |
|
width: 100%; |
|
} |
|
.el-form-item--medium /deep/ .el-form-item__label { |
|
text-align: right; |
|
vertical-align: middle; |
|
float: left; |
|
font-size: 14px; |
|
color: #333333; |
|
line-height: 40px; |
|
padding: 0 12px 0 0; |
|
font-weight: 100; |
|
box-sizing: border-box; |
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; |
|
} |
|
h2{ |
|
font-size: 18px; |
|
font-weight: 100; |
|
color: #333333; |
|
position: relative; |
|
margin-bottom: 30px; |
|
display: flex; |
|
justify-content: flex-start; |
|
align-items: center; |
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; |
|
} |
|
.hiden{ |
|
display: none; |
|
} |
|
|
|
.h2_class::after{ |
|
position: absolute; |
|
right: 0; |
|
top: 50%; |
|
content: ''; |
|
width: 87%; |
|
height: 1px; |
|
background-color: #3333; |
|
} |
|
.h2_class1::after{ |
|
position: absolute; |
|
right: 0; |
|
top: 50%; |
|
content: ''; |
|
width:90%; |
|
height: 1px; |
|
background-color: #3333; |
|
}.h2_class3::after{ |
|
position: absolute; |
|
right: 0; |
|
top: 49%; |
|
content: ''; |
|
width: 74%; |
|
height: 1px; |
|
background-color: #3333; |
|
}.changessssss{ |
|
width: 600px; |
|
} |
|
.showbttoms{ |
|
position: fixed; |
|
bottom: 0%; |
|
width: 69.5%; |
|
background: #fff; |
|
padding: 20px 15px; |
|
border-top: 1px solid #e6e6e6; |
|
text-align: right !important; |
|
} |
|
.el-divider--horizontal{ |
|
margin: 10px 0; |
|
} |
|
</style>
|
|
|