动态引入js文件
<template> <section class="idx-main"> <div v-show="templateIndex==1" class="search-box"> <div class="row-box "> <div class="title"> 门店信息维护 </div> </div> <div class="row-box"> <div class="col-box"> <span class="lab">大区:</span> <el-select v-model="districtVal" filterable placeholder="请选择" @change="getAreaList()" :disabled="orgLevelCode == 1 || orgLevelCode == 2 || orgLevelCode == 4"> <el-option v-if="districtList.length>0" label="全部大区" value=""> </el-option> <el-option v-for="(item,index) in districtList" :key="index" :label='item.districtName+"-"+item.districtCode' :value="item.districtCode"> </el-option> </el-select> </div> <div class="col-box"> <span class="lab">分公司:</span> <el-select v-model="companyVal" filterable placeholder="请选择" @change="queryDistrictCompanyList()" :disabled="orgLevelCode == 1 || orgLevelCode == 4"> <el-option v-if="companyList.length>0" label="全部分公司" value=""> </el-option> <el-option v-for="(item,index) in companyList" :key="index" :label='item.companyName+"-"+item.companyCode' :value="item.companyCode"> </el-option> </el-select> </div> </div> <div class="row-box"> <div class="col-box"> <span class="lab">门店:</span> <el-select v-model="storeVal" remote filterable clearable placeholder="输入门店编码或门店名称" :disabled="orgLevelCode == 4" :remote-method="remoteMethod"> <el-option v-if="storeList.length>0" label="全部门店" value=""> </el-option> <el-option v-for="(item,index) in newSiteList" :key="index" :label='item.siteName+"-"+item.siteCode' :value="item.siteCode"> </el-option> </el-select> </div> <div class="col-box"> <span class="lab">门店类型:</span> <el-select v-model="storeTypeVal" placeholder="请选择"> <el-option v-if="storeTypeList.length>0" label="全部类型" value=""> </el-option> <el-option v-for="(item,index) in storeTypeList" :key="index" :label="item.memo" :value="item.cfgKey"> </el-option> </el-select> </div> <div class="col-box"> <span class="lab">维护状态:</span> <el-select v-model="maintenanceTypeVal" placeholder="请选择"> <el-option v-for="(item,index) in maintenanceTypeList" :key="index" :label="item.name" :value="item.code"> </el-option> </el-select> </div> </div> <div class="row-box"> <div class="col-box"> <el-button type="primary" @click="searchList()">查询</el-button> </div> </div> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column prop="storeCode" label="门店编码"></el-table-column> <el-table-column prop="storeName" label="门店名称"></el-table-column> <el-table-column prop="siteTypeDesc" label="门店类型"></el-table-column> <el-table-column prop="largeAreaName" label="所属大区"></el-table-column> <el-table-column prop="companyName" label="所属分公司"></el-table-column> <el-table-column prop="modifyFlag" label="维护状态"> <template scope="scope">{{scope.row.modifyFlag==0?"未维护":"已维护"}} </template> </el-table-column> <el-table-column label="操作" width="220" align="center"> <template slot-scope="scope"> <span @click="lookStore(scope.row)" class="green">查看门店</span> <span @click="closeStore(scope.row)" class="green">关闭门店</span> <span @click="lookLog(scope.row)" class="green">查看日志</span> </template> </el-table-column> </el-table> <el-pagination background layout="prev, pager, next" :page-size="pageSize" :current-page="pageIndex" :total="total" @current-change="jumpPage" v-show="total != 0"></el-pagination> </div> <!-- 详情页 --> <div v-show="templateIndex==3" class="search-box"> <div class="row-box "> <div class="title"> <!-- {{新街口门店}}新街口门店 --> <span v-show="orgLevelCode!=4" class="big-title" @click="templateIndex=1">门店信息维护/</span><span class="little-title">{{dataAll.storeName}}</span> </div> </div> <div class="panel"> <div class="header-name">基本信息</div> <div class="mult-line"> <div class="contain"> <div class="evn"><span>门店名称:</span><span>{{dataAll.storeName}}</span></div> <div class="evn"><span>门店业态:</span><span>{{dataAll.industrySituationDesc}}</span></div> <div class="evn"><span>业态细分:</span><span>{{dataAll.subSitetypeDesc}}</span></div> <div class="evn"><span>门店类型:</span> <span> <el-select v-model="dataAll.siteTypeCode" :change="changeSiteType" :disabled="orgLevelCode==4||orgLevelCode==1||orgLevelCode==2" placeholder="请选择"> <el-option v-for="(item,index) in storeTypeList" :key="index" :label="item.memo" :value="item.cfgKey"> </el-option> </el-select> </span> </div> <div class="evn"><span>门店等级:</span><span>{{dataAll.storeLevel}}</span></div> <div class="evn gab gabline"><span>门店介绍:</span><span> <el-input type="textarea" :cols="30" maxlength="100" :rows="3" placeholder="请输入门店介绍" v-model="dataAll.storeCondues"></el-input> </span></div> </div> </div> </div> <div class="panel"> <div class="header-name">组织信息</div> <div class="mult-line"> <div class="contain"> <div class="evn"><span>门店编码:</span><span>{{dataAll.storeCode}}</span></div> <div class="evn"><span>大区编码:</span><span>{{dataAll.largeAreaCode}}</span></div> <div class="evn"><span>分公司编码:</span><span>{{dataAll.companyCode}}</span></div> </div> <div class="contain"> <div class="evn"><span>门店名称:</span><span>{{dataAll.storeName}}</span></div> <div class="evn"><span>大区名称:</span><span>{{dataAll.largeAreaName}}</span></div> <div class="evn"><span>分公司名称:</span><span>{{dataAll.companyName}}</span></div> </div> </div> </div> <div class="panel"> <div class="header-name">基本信息</div> <div class="mult-line"> <div class="contain"> <div class="evn"> <div class="img-up"> <div class="left">门店logo:</div> <div class="right"> <!-- 上传门店logo --> <div class="operate-state"> <div class="operate-state-right"> <div class="avatar-uploader"> <img v-if="dataAll.storeLogo" :src="dataAll.storeLogo" class="avatar"> <img v-if="!dataAll.storeLogo" src="../../assets/logo.png" class="avatar"> </div> <!-- <el-upload class="avatar-uploader" action="/nsfbus-admin/ossImg/upLoadImg.htm" :show-file-list="false" :on-success="doneLogoUpload" :before-upload="beforeLogoUpload"> <p>请选择图片上传</p> <img v-if="dataAll.storeLogo" :src="dataAll.storeLogo" class="avatar"> <i v-else class=" avatar-uploader-icon el-icon-upload"></i> </el-upload> --> </div> </div> <!-- 上传门店logo --> </div> </div> </div> <div class="evn gab"> <!-- 上传图片 --> <div class="img-up"> <div class="left">门店图片:</div> <div class="right"> <div class="upload-line"> <div class="operate" v-for="(item,index) in imgList" :key="index"> <div class=""> <file-upload :uploadIndex="index" :imgLink="item.url" @triggerEvent="doneListUpload"> </file-upload> </div> <div class="del" v-if="index>0"><img src="../../assets/delete.png" @click="deleteCarouse(index)" width="100%"></div> </div> <div class="operate" v-if="true"> <div class="add-img" v-if="imgList.length<5"> <div class="img el-icon-plus" @click="addCarouselFunction()"></div> </div> </div> </div> </div> </div> <!-- 上传图片 --> </div> <div class="evn "> <div class="basic"> <div class="left"><span class="red-star">*</span>周中营业时间:</div> <div class="right-time"> <el-time-select placeholder="起始时间" v-model="startMidtime" :editable="false" :picker-options="{ start: '00:00', step: '00:30', end: '23:30' }"> </el-time-select>- <el-time-select placeholder="结束时间" v-model="endMidtime" :editable="false" :picker-options="{ start: '00:00', step: '00:30', end: '23:30', }"> <!-- :picker-options="{ start: '00:30', step: '00:30', end: '24:00', minTime: startMidtime }" --> </el-time-select> </div> </div> </div> <div class="evn"> <div class="basic"> <div class="left"><span class="red-star">*</span>周末营业时间:</div> <div class="right-time"> <el-time-select placeholder="起始时间" v-model="startWeektime" :editable="false" :picker-options="{ start: '00:00', step: '00:30', end: '23:30' }"> </el-time-select>- <el-time-select placeholder="结束时间" v-model="endWeektime" :editable="false" :picker-options="{ start: '00:00', step: '00:30', end: '23:30', }"> </el-time-select> </div> </div> </div> <div class="evn"> <div class="basic"> <div class="left">是否有停车场:</div> <div class="right"> <el-radio v-model="dataAll.depotFlag" label="1">是</el-radio> <el-radio v-model="dataAll.depotFlag" label="0">否</el-radio> </div> </div> </div> <div class="evn" v-show="dataAll.depotFlag==1"> <div class="basic"> <div class="left">停车信息:</div> <div class="right"> <el-input style="border: none;" v-model="dataAll.parkInfo" maxlength="100" placeholder="请输入停车信息"></el-input> </div> </div> </div> <div class="evn"> <div class="basic"> <div class="left">是否支持自提:</div> <div class="right"> <el-radio v-model="dataAll.selfLiftFlag" label="1">是</el-radio> <el-radio v-model="dataAll.selfLiftFlag" label="0">否</el-radio> </div> </div> </div> <div class="evn" v-show="dataAll.selfLiftFlag==1"> <div class="basic"> <div class="left">自提信息:</div> <div class="right"> <el-input style="border: none;" v-model="dataAll.selfExtractingInfo" maxlength="100" placeholder="请输入自提信息"></el-input> </div> </div> </div> </div> </div> </div> <div class="panel"> <div class="header-name">位置信息</div> <div class="mult-line"> <div class="contain"> <div class="evn"> <div class="basic"> <div class="left"><span class="red-star">*</span>所在省市区县:</div> <div class="right" @click="clickBottom"> <input class="input_out" :value="locationName" placeholder="选择省市区县" /><span class="el-icon-arrow-down icon-arrow"></span> </div> </div> <!-- 省市县区 --> <div class="rang_bottom" v-show="displayFlag"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="省份" name="first"> <div class="reginon_list"> <div class="item" v-for="(item,index) in provinceList" :key="index" :class="{'activeItem':(index+1)==clickIndex1}" @click="selectProvince(item.regionalName,item.regionalCode,index)">{{item.regionalName}}</div> </div> </el-tab-pane> <el-tab-pane label="城市" name="second"> <div class="reginon_list"> <div class="item" v-for="(item,index) in cityList" :key="index" :class="{'activeItem':(index+1)==clickIndex2}" @click="selectCity(item.regionalName,item.regionalCode,index)">{{item.regionalName}}</div> </div> </el-tab-pane> <el-tab-pane label="县区" name="third"> <div class="reginon_list"> <div class="item" v-for="(item,index) in infodistrictList" :key="index" :class="{'activeItem':(index+1)==clickIndex3}" @click="selectDistrict(item.regionalName,item.regionalCode,index)">{{item.regionalName}}</div> </div> </el-tab-pane> </el-tabs> </div> <!-- 省市县区 --> </div> <div class="evn"> <div class="basic"> <div class="left"><span class="red-star">*</span>详细地址:</div> <div class="right"> <!-- <input id="pickerInput" :value="name" placeholder="输入关键字选取地点" /> --> <input id="pickerInput" v-model="dataAll.address" maxlength="80" placeholder="输入关键字选取地点" /> </div> </div> <!-- <span class="lab"></span><span></span> --> </div> <div class="evn"> <div class="map_main"> <div class="left"><span class="red-star">*</span> 地图定位:</div> <div class="right"> <div class="GD_map"> <div v-show="AMapFlag" id="container" tabindex="0"></div> <!-- <div id="pickerBox"> </div> --> <div v-show="!AMapFlag"> <img src="../../assets/QRcode.png"></div> </div> <div class="long-lat"> <div class="left1"> <div><span>经度:</span><span> <el-input style="border: none;" v-model="dataAll.shopLongitude" maxlength="20" placeholder="请输入经度"></el-input> </span></div> <div><span>纬度:</span><span> <el-input style="border: none;" v-model="dataAll.shopLatitude" maxlength="20" placeholder="请输入纬度"></el-input> </span></div> </div> <div class="ii el-icon-location" @click="addMarker()"></div> </div> </div> </div> </div> <div class="evn"> <div class="basic"> <div class="left">所在商圈:</div> <div class="right"> <el-input style="border: none;" v-model="dataAll.marketArea" maxlength="20" placeholder="输入所在商圈"></el-input> </div> </div> <!-- <span class="lab"></span><span><el-input style="border: none;" v-model="seatUrl1" maxlength="200" placeholder="请输入自提信息"></el-input></span> --> </div> <div class="evn"> <div class="basic"> <div class="left">周边建筑:</div> <div class="right"> <el-input style="border: none;" v-model="dataAll.surroundBuildings" maxlength="50" placeholder="请输入周边建筑"></el-input> </div> </div> </div> </div> </div> </div> <div class="panel"> <div class="header-name">联络信息</div> <div class="mult-line"> <div class="contain"> <div class="evn"> <div class="basic"> <div class="left"><span class="red-star">*</span>店长姓名:</div> <div class="right_name"> <el-input style="border: none;" v-model="dataAll.shopownerName" maxlength="10" placeholder="请输入店长姓名"></el-input> </div> </div> </div> <div class="evn"> <div class="basic"> <div class="left"><span class="red-star">*</span>店长工号:</div> <div class="right_name"> <el-input style="border: none;" v-model="dataAll.shopowner" maxlength="8" placeholder="请输入店长工号"></el-input> </div> </div> <!-- <span class="lab"></span><span> </span> --> </div> <!-- 电话号码 --> <div class="evn"> <div class="phone"> <div class="left"><span><span class="red-star">*</span>门店电话:</span></div> <div class="right"> <div class="telephone" v-for="(item,index) in telephoneArr"> <span> <el-input v-model="item.beforeCode" maxlength="4" placeholder="输入区号"></el-input>-<el-input style="border: none;" v-model="item.afterCode" maxlength="8" placeholder="输入电话号码"></el-input> </span> <span class="green" @click="addtel" v-if="index==0&&telephoneArr.length<3">增加固话</span> <span class="green" @click="deltel(index)" v-if="index>0">删除</span> </div> <div class="mobilephone" v-for="(item,index) in mobilephoneArr"> <span> <el-input v-model="item.code" maxlength="11" placeholder="输入手机号"></el-input> </span> <span class="green" @click="addmoblie" v-if="index==0&&mobilephoneArr.length<3">增加手机号码</span> <span class="" v-if="index==0">(至少填写一个手机号)</span> <span class="green" @click="delmoblie(index)" v-if="index>0">删除</span> </div> </div> </div> </div> <!-- 电话号码 --> <div class="evn gab"> <div class="basic"> <div class="left">地铁/公交信息:</div> <div class="right"> <el-input type="textarea" :cols="30" :rows="3" placeholder="地铁/公交信息" maxlength="300" v-model="dataAll.transmissionLine"></el-input> </div> </div> </div> </div> </div> </div> <!-- 按钮事件 --> <div class="btn-center"> <div class="btn-left"> <el-button type="primary" @click="updateStoreOperateInfo()">保存</el-button> </div> <div class="btn-right" v-show="orgLevelCode!=4"> <el-button @click="goBack()">返回</el-button> </div> </div> </div> <!-- 操作日志页面 --> <div v-show="templateIndex==2" class="search-box"> <div class="row-box "> <div class="title"> <span class="big-title" @click="templateIndex=1">门店信息维护</span><span class="little-title">/操作日志</span> </div> </div> <el-table :data="tableData2" stripe style="width: 100%"> <el-table-column prop="lastModified" label="操作时间"></el-table-column> <el-table-column prop="lastmodifier" label="操作人"></el-table-column> <el-table-column prop="operationLog" label="操作内容"></el-table-column> </el-table> <el-pagination background layout="prev, pager, next" :page-size="pageSize2" :current-page="pageIndex2" :total2="total2" @current-change="jumpPage2" v-show="total2 != 0"></el-pagination> </div> </section> </template> <script> import DI from "../../js/interface"; import DC from "../../js/common"; import FileUpload from "../../components/common/uploadImg.vue"; export default { data() { return { myMaker: "", paths: [], newSiteList: [], maintenanceTypeList: [ { name: "全部", code: "" }, { name: "未维护", code: "0" }, { name: "已维护", code: "1" } ], maintenanceTypeVal: "", districtList: [], districtVal: "", companyList: [], companyVal: "", storeList: [], authInfo: "", storeVal: "", storeTypeList: [], storeTypeVal: "", orgLevelCode: "", tableData: [], pageIndex: 1, pageSize: 10, total: 0, templateIndex: 1, // 详情页 AMapFlag: false, startMidtime: "", endMidtime: "", startWeektime: "", endWeektime: "", displayFlag: false, locationName: "", name1: "", name2: "", name3: "", activeName: "first", clickIndex1: null, clickIndex2: null, clickIndex3: null, provinceList: [], cityList: [], cityVal: "", infodistrictList: "", dataAll: {}, imagelink: "", imgList: [{ url: "" }], telephoneArr: [{ beforeCode: "", afterCode: "" }], mobilephoneArr: [{ code: "" }], map: "", // longitude:0, // latitude:0, name: "", ruleForm: { name: "", region: "", content: "新增页面" }, storeTypeList: [], storeTypeVal: "", upLoadImg: DI.upLoadImg, mark_bs: require("../../assets/mark_bs.png"), // 操作日志 tableData2: [], pageIndex2: 1, pageSize2: 10, total2: 0, localstoreCode: "" }; }, components: { FileUpload }, methods: { remoteMethod(query) { if (query !== "") { // 输入非空时 setTimeout(() => { this.newSiteList = this.storeList.filter(item => { return ( item.siteCode.includes(query) || item.siteName.includes(query) ); }); }, 200); } else { // 输入为空时 this.storeVal = ""; this.newSiteList = []; // 数据为空 } }, // 查询所有门店列表 querySiteInfoList() { let params = { authKey: this.authKey // 葛晓星 // authKey:"cUJ0T2NWQUFuRmR3VlZsdGNydUoyVGJyOThpSUF0Ym5ZL28vRnd3V1daUmcwMzlBd1RhUkd6MWpzWjU5K1lad0FCQ1FpT1RFdXc0N2ZnMUVtWTcyTGhzWFBtWHoyODNOQ0orVVBPaUs4ZVhtMHpQN2tMeGIwYzFNUVJ4b2t1Y0xTNFE2TkZqR2Y0dUUrRGFWRmViTkhocndlZWlrdmxBS1RDOGZrT0JIcGZRQzJsSDFiTkx2Z0V6aHcwMzhKUTBpaitIZ3BWOUdWcXFzK2paSW8xRW1iLzh2Z3dPZnZ4ZFo3VnBTejhudkozZXlEbFBhdDRNbm1RPT0%3D" // 门店 // authKey:"bkVwbTFMNnp2clZ1SVQ2WkV3RzRKVDlwZkJSd1Erbkk1a1oxK0psWEZ5eGcwMzlBd1RhUkcvL3I0Z2lYaXVtQTQ0VXRoMVlxSDVBN2ZnMUVtWTcyTHRaQU4wdVVYVFBmQ0orVVBPaUs4ZVZBRFovd2VPdHdmTzdUdlNqNzl5ZVdQeGJPSldGQ05rQmZYMU1IT294WktPeDFoR0krNk92YlM0UTZORmpHZjR0OFBDQSs0TytDTnhyd2VlaWt2bEFLNzhwQldZRGJlUkc5eUZwNXJrVE5MV2ZKejE0TFBkR2JBOWxDSzdKNGlWeU9kWGN3MWtZcmhRRVU2R3hPL2NTc254dzY1aUJpek0yYlh1QzNyeExFYTdhRzd3TXIzeDBVUE9sSVJtZUxOb0ZGUWZiZ25WcUg1NEYvNy9RSkRGTEpIOVhFaE0xcG5FNlpjU2FzbGpVelZBbEhuNU1FRm1BWTE3NmF2OWpGZnRNPQ%3D%3D" // 分公司 // authKey:"cGRwU2ZSQ21RYjUrcGtFdDRHM0k3eGIvdWtLUFRpLy9WMUJXZm5sZEVnTmcwMzlBd1RhUkd3UmFSRVl4cnVUMGJBbERFeWQvamdNN2ZnMUVtWTcyTHBGY2tEN1ZXYi82Q0orVVBPaUs4ZVZFU3l5WjgvYVZMdmJNVWl6a3p3aWNoWm9NNnJzZW1TOFVaUm8zdWJGVDk3TEVOU0ZQVmpJTlNYSUpGTmE0K0loTlhRc1gzYUlSc2NKV0oyc1VrdEkzd0kxOUxqM2Q0MlJOZUJ6VUlVS243QUlRb0o0ODM5OEZvaHU3eGd5Y1BLazhadGJyTzVqQUkxWlhUU3RBS2JTVw%3D%3D" // 南京分公司 // authKey:"cGRwU2ZSQ21RYjUrcGtFdDRHM0k3MnhLaS81SDF6K2xxRmhLckRSRHFSaGcwMzlBd1RhUkd3UmFSRVl4cnVUMGJBbERFeWQvamdNN2ZnMUVtWTcyTHBGY2tEN1ZXYi82Q0orVVBPaUs4ZVZFU3l5WjgvYVZMdmJNVWl6a3p3aWNoWm9NNnJzZW1TOFVaUm8zdWJGVDk3TEVOU0ZQVmpJTlNYSUpGTmE0K0loTlhRc1gzYUlSc2NKV0oyc1VrdEkzd0kxOUxqM2Q0MlJOZUJ6VUlVS243QUlRb0o0ODM5OEZvaHU3eGd5Y1BLazhadGJyTzVqQUkxWlhUU3RBS2JTVw" // authKey:"cGRwU2ZSQ21RYjUrcGtFdDRHM0k3MnhLaS81SDF6K2xSNWdIVGVaMUF5OWcwMzlBd1RhUkd3UmFSRVl4cnVUMDJiVjl4dmo0MjV3N2ZnMUVtWTcyTHBGY2tEN1ZXYi82Q0orVVBPaUs4ZVYraWdWcE15eVJVeUt4aFBuR0Z5RmloWm9NNnJzZW1TODd3alprdkdDSVExSmRmYzNHOWVkd1NYSUpGTmE0K0loSUEwaFNVYkNYaXJvSWVpSXRjTWRqd0kxOUxqM2Q0MlJOZUJ6VUlVS243QUlRb0o0ODM5OEZvaHU3eGd5Y1BLazhadGJyTzVqQUkxWlhUU3RBS2JTVw" }; this.$http.get(DI.querySiteInfoList, { params: params }).then( res => { var data = res.data; this.storeList = data; }, res => { this.$message({ type: "warning", message: "系统异常" }); } ); }, // 查询门店信息修改记录 queryStoreOperationLogListByPage() { let params = { storeCode: this.localstoreCode }; this.$http .get( DI.queryStoreOperationLogListByPage + "?page=" + this.pageIndex2 + "&rows=" + this.pageSize2, { params: params } ) .then( res => { var data = res.data; this.tableData2 = data.rows; this.total2 = data.total; // if (data.flag == 1) { // this.tableData2=data.data // } else { // if (data.errorMsg) { // this.$message({ // type: 'warning', // message: data.errorMsg // }) // } // } }, res => { this.$message({ type: "warning", message: "系统异常" }); } ); }, jumpPage2(val) { this.pageIndex2 = val; this.queryStoreOperationLogListByPage(); }, // 操作日志 beforeLogoUpload(file) { const isJPG = file.type === "image/jpeg" || file.type === "image/png" || file.type === "image/gif" || file.type === "image/jpg"; const isLt2M = file.size / 1024 / 1024 < 3; if (!isJPG) { this.$message.error("上传图片只能是 JPG、JPEG、PNG或GIF格式!"); return false; } if (!isLt2M) { this.$message.error("上传图片大小不能超过 3MB!"); return false; } }, goBack() { this.$confirm("返回将失去正在编辑的信息, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { this.templateIndex = 1; }) .catch(() => {}); }, changeSiteType() { this.storeTypeList.map(item => { if (item.cfgKey == this.dataAll.siteTypeCode) { this.dataAll.siteTypeDesc = item.memo; } }); }, selectProvince(name, code, index) { this.dataAll.provinceCode = code; this.dataAll.provinceName = name; this.dataAll.cityCode = ""; this.dataAll.cityName = ""; this.name1 = name; this.locationName = name; this.clickIndex1 = index + 1; this.clickIndex2 = null; this.queryRegionListByParentCode(code, "2", "2"); this.activeName = "second"; }, selectCity(name, code, index) { this.dataAll.cityCode = code; this.dataAll.cityName = name; this.dataAll.cityAreaCode = ""; this.dataAll.cityAreaName = ""; this.name2 = name; this.locationName = this.name1 + "/" + name; this.clickIndex2 = index + 1; this.clickIndex3 = null; this.queryRegionListByParentCode(code, "3", "3"); this.activeName = "third"; }, selectDistrict(name, code, index) { this.dataAll.cityAreaCode = code; this.dataAll.cityAreaName = name; this.name3 = name; this.locationName = this.name1 + "/" + this.name2 + "/" + name; this.clickIndex3 = index + 1; this.displayFlag = false; this.dataAll.address = ""; this.drawBounds(); }, handleClick() {}, clickBottom() { this.displayFlag = !this.displayFlag; }, deleteCarouse(index) { this.imgList.splice(index, 1); }, addCarouselFunction() { this.imgList.push({ url: "" }); }, //图片上传成功回调 doneLogoUpload(params) { // this.$message({message: '图片上传成功', type: 'success'}) this.dataAll.storeLogo = params.imgUrl; }, doneListUpload(params, index) { this.$message({ message: "图片上传成功", type: "success" }); this.imgList[index].url = params.imgUrl; }, addtel() { this.telephoneArr.push({ beforeCode: "", afterCode: "" }); }, addmoblie() { this.mobilephoneArr.push({ code: "" }); }, deltel(index) { this.telephoneArr.splice(index, 1); }, delmoblie(index) { this.mobilephoneArr.splice(index, 1); }, addMarker() { if (!this.AMapFlag) { return; } //this.map.clearMap() this.map.remove(this.myMaker); var arr = []; arr.push( parseFloat(this.dataAll.shopLongitude), parseFloat(this.dataAll.shopLatitude) ); let _self = this; // var marker = new AMap.Marker({ // // icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png", // icon: _self.mark_bs, // position:arr, // // offset: new AMap.Pixel(-10,-34) // }); // marker.setMap(this.map); // this.map.setCenter(arr); // 加入拖动 AMap.plugin(["AMap.ToolBar", "AMap.Scale"], function() { var toolBar = new AMap.ToolBar(); var scale = new AMap.Scale(); _self.map.addControl(toolBar); _self.map.addControl(scale); }); this.myMaker = new AMap.Marker({ position: arr, draggable: true, cursor: "move", raiseOnDrag: false, zIndex: 101 }); this.myMaker.setMap(_self.map); _self.dataAll.shopLongitude = _self.myMaker.getPosition().lng; _self.dataAll.shopLatitude = _self.myMaker.getPosition().lat; AMap.event.addListener(this.myMaker, "dragstart", function(e) { _self.dataAll.shopLongitude = _self.myMaker.getPosition().lng; _self.dataAll.shopLatitude = _self.myMaker.getPosition().lat; }); AMap.event.addListener(this.myMaker, "dragging", function(e) { _self.dataAll.shopLongitude = _self.myMaker.getPosition().lng; _self.dataAll.shopLatitude = _self.myMaker.getPosition().lat; }); // let _marker=marker AMap.event.addListener(this.myMaker, "dragend", function(e) { _self.dataAll.shopLongitude = _self.myMaker.getPosition().lng; _self.dataAll.shopLatitude = _self.myMaker.getPosition().lat; let lnglatXY = [ _self.myMaker.getPosition().lng, _self.myMaker.getPosition().lat ]; var geocoder = new AMap.Geocoder({ radius: 1000, extensions: "all" }); geocoder.getAddress(lnglatXY, function(status, result) { if (status === "complete" && result.info === "OK") { var address = result.regeocode.formattedAddress; //返回地址描述 _self.dataAll.address = address; // $('input[name=address]').val(address); } }); }); // 加入拖动 }, poiPickerReady(poiPicker) { window.poiPicker = poiPicker; this.myMaker = new AMap.Marker(); var infoWindow = new AMap.InfoWindow({ // offset: new AMap.Pixel(0, -20) }); //选取了某个POI let _self = this; poiPicker.on("poiPicked", function(poiResult) { _self.map.remove(_self.myMaker); var source = poiResult.source, poi = poiResult.item, info = { source: source, id: poi.id, name: poi.name, location: poi.location, address: poi.address }; _self.myMaker.setMap(_self.map); // infoWindow.setMap(_self.map); _self.myMaker.setPosition(poi.location); // infoWindow.setPosition(poi.location); _self.dataAll.address = info.name; if (!poi.location.lng) { _self.$message({ message: "获取位置失败,请重新选择!", type: "warning" }); return; } if (!poi.location.lat) { _self.$message({ message: "获取位置失败,请重新选择!", type: "warning" }); return; } _self.dataAll.shopLongitude = poi.location.lng; _self.dataAll.shopLatitude = poi.location.lat; // infoWindow.setContent('POI信息: <pre>' + JSON.stringify(info, null, 2) + '</pre>'); // infoWindow.open(_self.map, marker.getPosition()); _self.map.setCenter(_self.myMaker.getPosition()); _self.addMarker(); }); }, // 查询省市区 queryRegionListByParentCode(row, col, index) { let params = { parentRegionalCode: row, regionalLevel: col }; this.$http.get(DI.queryRegionListByParentCode, { params: params }).then( res => { var data = res.data; if (index == 1) { this.provinceList = data.rows; } else if (index == 2) { this.cityList = data.rows; } else if (index == 3) { this.infodistrictList = data.rows; } if (data.flag == 1) { } else { if (data.errorMsg) { this.$message({ type: "warning", message: data.errorMsg }); } } }, res => { this.$message({ type: "warning", message: "系统异常" }); } ); }, // 查询详情 queryStoreOperateInfo() { let params = { storeCode: this.localstoreCode }; let _this = this; this.$http.get(DI.queryStoreOperateInfo, { params: params }).then( res => { var data = res.data; this.dataAll = data; // 获取省市区县 // 给是否有停车场、是否支持自提默认为不选 this.dataAll.selfLiftFlag = this.dataAll.selfLiftFlag ? this.dataAll.selfLiftFlag : "0"; this.dataAll.depotFlag = this.dataAll.depotFlag ? this.dataAll.depotFlag : "0"; // 如果省市区存在,查询经纬度范围 this.name1 = this.dataAll.provinceName ? this.dataAll.provinceName : ""; this.name2 = this.dataAll.cityName ? this.dataAll.cityName : ""; this.name3 = this.dataAll.cityAreaName ? this.dataAll.cityAreaName : ""; let pName = this.dataAll.provinceName ? this.dataAll.provinceName + "/" : ""; let cName = this.dataAll.cityName ? this.dataAll.cityName + "/" : ""; let aName = this.dataAll.cityAreaName ? this.dataAll.cityAreaName : ""; this.locationName = pName + cName + aName; // 或许省市区的焦点 // this.provinceList.find(function(currentValue, index, arr),thisValue) this.queryRegionListByParentCode(this.dataAll.provinceCode, "2", "2"); this.queryRegionListByParentCode(this.dataAll.cityCode, "3", "3"); setTimeout(() => { _this.provinceList.map((item, index) => { if ( _this.provinceList[index].regionalCode == _this.dataAll.provinceCode ) { _this.clickIndex1 = index + 1; } }); _this.cityList.map((item, index) => { if ( _this.cityList[index].regionalCode == _this.dataAll.cityCode ) { _this.clickIndex2 = index + 1; } }); _this.infodistrictList.map((item, index) => { if ( _this.infodistrictList[index].regionalCode == _this.dataAll.cityAreaCode ) { _this.clickIndex3 = index + 1; } }); }, 200); if (this.dataAll.cityAreaName) { if (this.AMapFlag) { // 只获取省区县地址,不进行定位 this.initDrawBounds(); } } // 拼接时间 if (this.dataAll.midweekServiceHours) { let timeIndex = this.dataAll.midweekServiceHours.indexOf("-"); this.startMidtime = this.dataAll.midweekServiceHours.slice( 0, timeIndex ); this.endMidtime = this.dataAll.midweekServiceHours.substring( timeIndex + 1 ); } if (this.dataAll.weekendServiceHours) { let timeIndex2 = this.dataAll.weekendServiceHours.indexOf("-"); this.startWeektime = this.dataAll.weekendServiceHours.slice( 0, timeIndex2 ); this.endWeektime = this.dataAll.weekendServiceHours.substring( timeIndex2 + 1 ); } // 图片列表添加 this.imgList = []; if (this.dataAll.urlList) { this.dataAll.urlList.map(item => { let obj = { url: "" }; obj.url = item; this.imgList.push(obj); }); if (this.dataAll.urlList.length < 1) { this.imgList = [{ url: "" }]; } } else { this.imgList = [{ url: "" }]; } // 电话号码处理 let Tarr = []; if (this.dataAll.storeTel) { Tarr = this.dataAll.storeTel.split(","); if (Tarr.length > 0) { this.telephoneArr = []; Tarr.map(item => { let index = item.indexOf("-"); let after = item.substring(index + 1); let before = item.slice(0, index); let obj = { beforeCode: "", afterCode: "" }; obj.beforeCode = before; obj.afterCode = after; this.telephoneArr.push(obj); }); } } // 手机号码处理 let Marr = []; if (this.dataAll.storePhone) { Marr = this.dataAll.storePhone.split(","); if (Marr.length > 0) { this.mobilephoneArr = []; } Marr.map(item => { let obj = { code: "" }; obj.code = item; this.mobilephoneArr.push(obj); }); } // 地图定位 if (this.dataAll.shopLongitude && this.dataAll.shopLatitude) { setTimeout(() => { this.addMarker(); }, 200); } // 数据展示 if (data.flag == 1) { } else { if (data.errorMsg) { this.$message({ type: "warning", message: data.errorMsg }); } } }, res => { this.$message({ type: "warning", message: "系统异常" }); } ); }, // 查询门店类型列表 queryStoreTypeList() { this.$http.get(DI.queryStoreTypeList).then( res => { var data = res.data; this.storeTypeList = data.rows; // if (data.flag == 1) { // } else { // if (data.errorMsg) { // this.$message({ // type: 'warning', // message: data.errorMsg // }) // } // } }, res => { this.$message({ type: "warning", message: "系统异常" }); } ); }, // 更新数据 updateStoreOperateInfo() { // 判断 if (!this.startMidtime) { this.$message({ type: "warning", message: "请选择周中营业开始时间" }); return false; } if (!this.endMidtime) { this.$message({ type: "warning", message: "请选择周中营业结束时间" }); return false; } if (!this.startWeektime) { this.$message({ type: "warning", message: "请选择周末营业开始时间" }); return false; } if (!this.endWeektime) { this.$message({ type: "warning", message: "请选择周末营业结束时间" }); return false; } // 省市区 if (!this.dataAll.provinceCode) { this.$message({ type: "warning", message: "请选择省份" }); return false; } if (!this.dataAll.cityCode) { this.$message({ type: "warning", message: "请选择市" }); return false; } if (!this.dataAll.cityAreaCode) { this.$message({ type: "warning", message: "请选择市区" }); return false; } if (!this.dataAll.address) { this.$message({ type: "warning", message: "请填写详细地址" }); return false; } else { let addressResult; let addressStr = this.dataAll.address; addressResult = addressStr.replace(/(^\s+)|(\s+$)/g, ""); if (addressResult.length < 4) { this.$message({ type: "warning", message: "详细地址不能少于四个字" }); return false; } this.dataAll.address = addressResult; } if (!this.dataAll.shopownerName) { this.$message({ type: "warning", message: "请填写店长姓名" }); return false; } if (!this.dataAll.shopowner) { this.$message({ type: "warning", message: "请填写店长工号" }); return false; } let regShopowner = /^[\d]+$/; if (!regShopowner.test(this.dataAll.shopowner)) { this.$message({ type: "warning", message: "工号格式不对,请重新输入" }); return false; } if (!this.dataAll.shopLongitude) { this.$message({ type: "warning", message: "经度不能为空" }); return false; } // let regLocation=/^\d*\.{0,1}\d{0,6}$/ let regLocation = /^[+-]?\d*\.?\d{0,15}$/; // 只允许输入负数和小数整数 if (this.dataAll.shopLongitude) { if (!regLocation.test(this.dataAll.shopLongitude)) { this.$message({ type: "warning", message: "经度格式错误" }); return false; } let shopLongitudeNUm = parseFloat(this.dataAll.shopLongitude); if (shopLongitudeNUm < -180 || shopLongitudeNUm > 180) { this.$message({ type: "warning", message: "经度范围-180~180" }); return false; } } if (!this.dataAll.shopLatitude) { this.$message({ type: "warning", message: "纬度不能为空" }); return false; } if (this.dataAll.shopLatitude) { if (!regLocation.test(this.dataAll.shopLatitude)) { this.$message({ type: "warning", message: "纬度格式错误" }); return false; } let shopLatitudeNUm = parseFloat(this.dataAll.shopLatitude); if (shopLatitudeNUm < -90 || shopLatitudeNUm > 90) { this.$message({ type: "warning", message: "经度范围-90~90" }); return false; } } // 手机号码 let reg = /^[\d]+$/; // let regphone=/^1[3456789]\\d{9}$/ let telephoneError = false; this.telephoneArr.map(item => { if (item.beforeCode) { if (!item.afterCode) { this.$message.warning("电话号码不能为空"); telephoneError = true; } } if (item.afterCode) { if (!item.beforeCode) { this.$message.warning("电话区号不能为空"); telephoneError = true; } } if (item.beforeCode && item.afterCode) { if (!reg.test(item.beforeCode) || !reg.test(item.afterCode)) { this.$message.warning("电话号格式错误"); telephoneError = true; } } }); if (telephoneError) { return false; } // 电话号码验证 let regphone = /^1[3456789]\d{9}$/; let mobilephoneFlag = false; let errorMobile = false; this.mobilephoneArr.map(item => { if (item.code) { if (item.code.length < 11 || !regphone.test(item.code)) { this.$message.warning("手机号格式错误"); errorMobile = true; } mobilephoneFlag = true; } }); if (errorMobile) { return false; } if (!mobilephoneFlag) { this.$message.warning("至少填写一个手机号码"); return false; } // 拼接时间 this.dataAll.midweekServiceHours = this.startMidtime + "-" + this.endMidtime; this.dataAll.weekendServiceHours = this.startWeektime + "-" + this.endWeektime; // 图片列表添加 let imgArr = []; this.imgList.map(item => { if (item.url) { imgArr.push(item.url); } }); this.dataAll.urlList = imgArr; // 电话号码 let Tarr = []; this.telephoneArr.map(item => { if (item.beforeCode && item.afterCode) { let string = item.beforeCode + "-" + item.afterCode; Tarr.push(string); } }); this.dataAll.storeTel = Tarr.join(","); let Marr = []; this.mobilephoneArr.map(item => { if (item.code) { let string = item.code; Marr.push(string); } }); this.dataAll.storePhone = Marr.join(","); let params = { storeCode: this.localstoreCode, storeName: this.dataAll.storeName, // storeName:"测试" , industrySituationCode: this.dataAll.industrySituationCode, industrySituationDesc: this.dataAll.industrySituationDesc, subSiteTypeCode: this.dataAll.subSiteTypeCode, subSitetypeDesc: this.dataAll.subSitetypeDesc, siteTypeCode: this.dataAll.siteTypeCode, siteTypeDesc: this.dataAll.siteTypeDesc, storeLevel: this.dataAll.storeLevel, largeAreaCode: this.dataAll.largeAreaCode, largeAreaName: this.dataAll.largeAreaName, companyCode: this.dataAll.companyCode, companyName: this.dataAll.companyName, storeStatus: this.dataAll.storeStatus, shopowner: this.dataAll.shopowner, shopownerName: this.dataAll.shopownerName, transmissionLine: this.dataAll.transmissionLine, provinceCode: this.dataAll.provinceCode, provinceName: this.dataAll.provinceName, cityCode: this.dataAll.cityCode, cityName: this.dataAll.cityName, cityAreaCode: this.dataAll.cityAreaCode, cityAreaName: this.dataAll.cityAreaName, address: this.dataAll.address, shopLongitude: this.dataAll.shopLongitude, shopLatitude: this.dataAll.shopLatitude, marketArea: this.dataAll.marketArea, surroundBuildings: this.dataAll.surroundBuildings, // storeLogo:"http://sdossuppre1.cnsuning.com/nsfuaa/nsfbus/8cM3yx_dYEQi6L368TLfoDbH8Xt5vkbQs38LCsPXeaGTlmp4bP9I4In5uOUAWtFp.jpg", storeLogo: this.dataAll.storeLogo, urlList: this.dataAll.urlList, // urlList:'http://sdossuppre1.cnsuning.com/nsfuaa/nsfbus/8cM3yx_dYEQi6L368TLfoDbH8Xt5vkbQs38LCsPXeaGTlmp4bP9I4In5uOUAWtFp.jpg,http://sdossuppre1.cnsuning.com/nsfuaa/nsfbus/8cM3yx_dYEQi6L368TLfoDbH8Xt5vkbQs38LCsPXeaGTlmp4bP9I4In5uOUAWtFp.jpg', midweekServiceHours: this.dataAll.midweekServiceHours, weekendServiceHours: this.dataAll.weekendServiceHours, depotFlag: this.dataAll.depotFlag, parkInfo: this.dataAll.parkInfo, selfLiftFlag: this.dataAll.selfLiftFlag, selfExtractingInfo: this.dataAll.selfExtractingInfo, // buyOutTimeFlag:this.dataAll.buyOutTimeFlag, storeCondues: this.dataAll.storeCondues, lastmodifier: this.dataAll.lastmodifier, // lastmodifier:"测试数据", storeTel: this.dataAll.storeTel, storePhone: this.dataAll.storePhone, storeLevelDesc: this.dataAll.storeLevelDesc }; // 判断经纬度是否在省市区范围内 if (this.AMapFlag) { let point = [this.dataAll.shopLongitude, this.dataAll.shopLatitude]; var isPointInRing = false; if (this.paths.length > 1) { isPointInRing = AMap.GeometryUtil.isPointInRing(point, this.paths); } if (!isPointInRing) { // this.$message({ // type: 'warning', // message: '详细地址不在所选省市区范围内' // }) // return false this.$confirm("详细地址不在所选省市区范围内, 是否继续?", "提示", { confirmButtonText: "重新定位", cancelButtonText: "忽略", type: "warning" }) .then(() => { this.dataAll.shopLongitude = ""; this.dataAll.shopLatitude = ""; this.dataAll.address = ""; return false; }) .catch(() => { //忽略提示的时候提交 this.$http.post(DI.updateStoreOperateInfo, params).then( // this.$http.get(DI.updateStoreOperateInfo,{params:params}).then( res => { var data = res.data; // this.dataAll=data if (data.status == 0) { this.$message({ type: "sucess", message: "保存成功" }); if (this.orgLevelCode != 4) { setTimeout(() => { this.templateIndex = 1; this.queryStoreInfoListByPage(); }, 200); } } else { if (data.message) { this.$message({ type: "warning", message: data.message }); } else { this.$message({ type: "warning", message: "保存失败" }); } } }, res => { this.$message({ type: "warning", message: "系统异常" }); } ); }); } else { // 校验通过直接提交 this.$http.post(DI.updateStoreOperateInfo, params).then( // this.$http.get(DI.updateStoreOperateInfo,{params:params}).then( res => { var data = res.data; // this.dataAll=data if (data.status == 0) { this.$message({ type: "sucess", message: "保存成功" }); if (this.orgLevelCode != 4) { setTimeout(() => { this.templateIndex = 1; this.queryStoreInfoListByPage(); }, 200); } } else { if (data.message) { this.$message({ type: "warning", message: data.message }); } else { this.$message({ type: "warning", message: "保存失败" }); } } }, res => { this.$message({ type: "warning", message: "系统异常" }); } ); } } else { //没有网络直接提交 this.$http.post(DI.updateStoreOperateInfo, params).then( // this.$http.get(DI.updateStoreOperateInfo,{params:params}).then( res => { var data = res.data; // this.dataAll=data if (data.status == 0) { this.$message({ type: "sucess", message: "保存成功" }); if (this.orgLevelCode != 4) { setTimeout(() => { this.templateIndex = 1; this.queryStoreInfoListByPage(); }, 200); } } else { if (data.message) { this.$message({ type: "warning", message: data.message }); } else { this.$message({ type: "warning", message: "保存失败" }); } } }, res => { this.$message({ type: "warning", message: "系统异常" }); } ); } }, // 详情页 lookLog(row) { // localStorage.setItem("localstoreCode",row.storeCode) // location.href="operationLog.html" this.templateIndex = 2; this.localstoreCode = row.storeCode; this.queryStoreOperationLogListByPage(); }, lookStore(row) { (this.startMidtime = ""), (this.endMidtime = ""), (this.startWeektime = ""), (this.endWeektime = ""), (this.name1 = ""), (this.name2 = ""), (this.name3 = ""), (this.activeName = "first"), (this.clickIndex1 = null), (this.clickIndex2 = null), (this.clickIndex3 = null), (this.cityVal = ""), (this.infodistrictList = ""), (this.imagelink = ""), (this.imgList = [{ url: "" }]), (this.telephoneArr = [{ beforeCode: "", afterCode: "" }]), (this.mobilephoneArr = [{ code: "" }]), (this.dataAll = { storeCode: "", storeName: "", industrySituationCode: "", industrySituationDesc: "", subSiteTypeCode: "", subSitetypeDesc: "", siteTypeCode: "", siteTypeDesc: "", storeLevel: "", largeAreaCode: "", largeAreaName: "", companyCode: "", companyName: "", storeStatus: "", shopowner: "", shopownerName: "", storeTel: "", transmissionLine: "", provinceCode: "", provinceName: "", cityCode: "", cityName: "", cityAreaCode: "", cityAreaName: "", address: "", shopLongitude: 0, shopLatitude: 0, marketArea: "", surroundBuildings: "", storeLogo: "", urlList: "", midweekServiceHours: "", weekendServiceHours: "", depotFlag: "", parkInfo: "", selfLiftFlag: "", selfExtractingInfo: "", buyOutTimeFlag: "", storeCondues: "", lastmodifier: "", storePhone: "", storeLevelDesc: "" }); this.queryRegionListByParentCode("CN", "1", "1"); if (row) { this.localstoreCode = row.storeCode; } this.templateIndex = 3; this.queryStoreOperateInfo(); // this.queryStoreTypeList() }, closeStore(row) { let params = { storeCode: row.storeCode }; this.$http.get(DI.doStoreCloseOperation, { params: params }).then( res => { var data = res.data; if (data.status == 0) { this.$message({ type: "sucess", message: "关闭成功!" }); this.queryStoreInfoListByPage(); } }, res => { this.$message.error("接口调用失败"); } ); }, jumpPage(pageNo) { this.pageIndex = pageNo; this.queryStoreInfoListByPage(); }, //查询大区 getAreaList() { this.$http.get(DI.queryAllDistrictOrg, {}).then( res => { var data = res.data; this.districtList = data; if (this.districtVal != "") { this.queryDistrictCompanyList(); } this.companyVal = ""; this.storeVal = ""; this.querySiteInfoList(); }, res => { this.$message.error("接口调用失败"); } ); }, //根据大区查询分公司信息 queryDistrictCompanyList() { if (this.districtVal == "") { return; } let params = { districtCode: this.districtVal }; this.$http.get(DI.queryDistrictCompanyList, { params: params }).then( res => { var data = res.data; this.companyList = data; if (this.orgLevelCode == 1 || this.orgLevelCode == 4) { if (this.authInfo.financialCode) { this.companyVal = this.authInfo.financialCode; } } this.storeVal = ""; if (this.companyVal != "") { this.querySiteInfoListByCompanyCode(); } else { this.querySiteInfoList(); } }, res => { this.$message({ type: "warning", message: "系统异常" }); } ); }, //根据分公司名称查询门店信息 querySiteInfoListByCompanyCode() { if (this.companyVal == "") { return; } let params = { companyCode: this.companyVal }; this.$http .get(DI.querySiteInfoListByCompanyCode, { params: params }) .then( res => { var data = res.data; this.storeList = data; if (this.orgLevelCode == 4) { if (this.authInfo.storeCode) { this.storeVal = this.authInfo.storeCode; } // this.searchList(); } }, res => { this.$message({ type: "warning", message: "系统异常" }); } ); }, searchList() { this.pageIndex = 1; this.queryStoreInfoListByPage(); }, // 查询门店运营信息分页 queryStoreInfoListByPage() { let params = { // largeAreaCode:"10001", // companyCode:"1009", largeAreaCode: this.districtVal, companyCode: this.companyVal, storeCode: this.storeVal, modifyFlag: this.maintenanceTypeVal, storeTypeCode: this.storeTypeVal }; this.$http .post( DI.queryStoreInfoListByPage + "?page=" + this.pageIndex + "&rows=" + this.pageSize, params ) .then( res => { var data = res.data; this.tableData = data.rows; this.total = data.total; }, res => { this.$message({ type: "warning", message: "系统异常" }); } ); }, resetForm(formName) { this.$refs[formName].resetFields(); }, // 权限问题 getUserInfo() { this.$http .get(DI.getUserInfo, { params: { authKey: this.authKey // 葛晓星 // authKey:"cUJ0T2NWQUFuRmR3VlZsdGNydUoyVGJyOThpSUF0Ym5ZL28vRnd3V1daUmcwMzlBd1RhUkd6MWpzWjU5K1lad0FCQ1FpT1RFdXc0N2ZnMUVtWTcyTGhzWFBtWHoyODNOQ0orVVBPaUs4ZVhtMHpQN2tMeGIwYzFNUVJ4b2t1Y0xTNFE2TkZqR2Y0dUUrRGFWRmViTkhocndlZWlrdmxBS1RDOGZrT0JIcGZRQzJsSDFiTkx2Z0V6aHcwMzhKUTBpaitIZ3BWOUdWcXFzK2paSW8xRW1iLzh2Z3dPZnZ4ZFo3VnBTejhudkozZXlEbFBhdDRNbm1RPT0%3D" // 门店 // authKey:"bkVwbTFMNnp2clZ1SVQ2WkV3RzRKVDlwZkJSd1Erbkk1a1oxK0psWEZ5eGcwMzlBd1RhUkcvL3I0Z2lYaXVtQTQ0VXRoMVlxSDVBN2ZnMUVtWTcyTHRaQU4wdVVYVFBmQ0orVVBPaUs4ZVZBRFovd2VPdHdmTzdUdlNqNzl5ZVdQeGJPSldGQ05rQmZYMU1IT294WktPeDFoR0krNk92YlM0UTZORmpHZjR0OFBDQSs0TytDTnhyd2VlaWt2bEFLNzhwQldZRGJlUkc5eUZwNXJrVE5MV2ZKejE0TFBkR2JBOWxDSzdKNGlWeU9kWGN3MWtZcmhRRVU2R3hPL2NTc254dzY1aUJpek0yYlh1QzNyeExFYTdhRzd3TXIzeDBVUE9sSVJtZUxOb0ZGUWZiZ25WcUg1NEYvNy9RSkRGTEpIOVhFaE0xcG5FNlpjU2FzbGpVelZBbEhuNU1FRm1BWTE3NmF2OWpGZnRNPQ%3D%3D" // 分公司 // authKey:"cGRwU2ZSQ21RYjUrcGtFdDRHM0k3eGIvdWtLUFRpLy9WMUJXZm5sZEVnTmcwMzlBd1RhUkd3UmFSRVl4cnVUMGJBbERFeWQvamdNN2ZnMUVtWTcyTHBGY2tEN1ZXYi82Q0orVVBPaUs4ZVZFU3l5WjgvYVZMdmJNVWl6a3p3aWNoWm9NNnJzZW1TOFVaUm8zdWJGVDk3TEVOU0ZQVmpJTlNYSUpGTmE0K0loTlhRc1gzYUlSc2NKV0oyc1VrdEkzd0kxOUxqM2Q0MlJOZUJ6VUlVS243QUlRb0o0ODM5OEZvaHU3eGd5Y1BLazhadGJyTzVqQUkxWlhUU3RBS2JTVw%3D%3D" // 南京分公司 // authKey:"cGRwU2ZSQ21RYjUrcGtFdDRHM0k3MnhLaS81SDF6K2xxRmhLckRSRHFSaGcwMzlBd1RhUkd3UmFSRVl4cnVUMGJBbERFeWQvamdNN2ZnMUVtWTcyTHBGY2tEN1ZXYi82Q0orVVBPaUs4ZVZFU3l5WjgvYVZMdmJNVWl6a3p3aWNoWm9NNnJzZW1TOFVaUm8zdWJGVDk3TEVOU0ZQVmpJTlNYSUpGTmE0K0loTlhRc1gzYUlSc2NKV0oyc1VrdEkzd0kxOUxqM2Q0MlJOZUJ6VUlVS243QUlRb0o0ODM5OEZvaHU3eGd5Y1BLazhadGJyTzVqQUkxWlhUU3RBS2JTVw" // authKey:"cGRwU2ZSQ21RYjUrcGtFdDRHM0k3MnhLaS81SDF6K2xSNWdIVGVaMUF5OWcwMzlBd1RhUkd3UmFSRVl4cnVUMDJiVjl4dmo0MjV3N2ZnMUVtWTcyTHBGY2tEN1ZXYi82Q0orVVBPaUs4ZVYraWdWcE15eVJVeUt4aFBuR0Z5RmloWm9NNnJzZW1TODd3alprdkdDSVExSmRmYzNHOWVkd1NYSUpGTmE0K0loSUEwaFNVYkNYaXJvSWVpSXRjTWRqd0kxOUxqM2Q0MlJOZUJ6VUlVS243QUlRb0o0ODM5OEZvaHU3eGd5Y1BLazhadGJyTzVqQUkxWlhUU3RBS2JTVw" } }) .then( res => { var data = res.data.orgInfo; // if(data.status == 0) { // this.getAreaList(); // if(data.areaCode) { // this.districtVal = data.areaCode; // } this.authInfo = data; this.orgLevelCode = data.level; //* 层级编码,0总部,1分公司,2大区,4门店 if (this.orgLevelCode == "0") { this.getAreaList(); } // 大区权限 if (this.orgLevelCode == "2") { this.districtList = [ { districtCode: data.areaCode, districtName: data.areaName } ]; this.districtVal = data.areaCode; this.queryDistrictCompanyList(); } if (this.orgLevelCode == "1") { this.districtList = [ { districtCode: data.areaCode, districtName: data.areaName } ]; this.districtVal = data.areaCode; this.companyList = [ { companyCode: data.financialCode, companyName: data.financialName } ]; this.companyVal = data.financialCode; this.querySiteInfoListByCompanyCode(); } if (data.level == "4") { this.districtList = [ { districtCode: data.areaCode, districtName: data.areaName } ]; this.districtVal = data.areaCode; this.companyList = [ { companyCode: data.financialCode, companyName: data.financialName } ]; this.companyVal = data.financialCode; this.storeList = [ { storeCode: data.storeCode, storeName: data.storeName } ]; this.storeVal = data.storeCode; this.localstoreCode = data.storeCode; this.lookStore(); // this.querySiteInfoListByCompanyCode(); // this.queryStoreInfoListByPage(); // } else if(data.level == 1 || data.level == 2) { // if(data.financialCode) { // this.companyVal = data.financialCode; // } // let companyListArr = []; // companyListArr.push({ // regionCode: data.regionCode, // regionName: data.regionName // }) // this.areas = [...regionList]; // this.area = this.areas[0].regionCode; this.querySiteInfoListByCompanyCode(); } setTimeout(() => { this.searchList(); // this.queryPreSharepie() }, 300); // } else { // if(data.message) { // this.$message({ // type: "warning", // message: data.message // }); // } // } }, res => { this.$message.error("接口调用失败"); } ); }, //初始化进行获取区域,不定位(验证所选地址是否在省市区之内) initDrawBounds() { var district = null; var polygons = []; //加载行政区划插件 if (!district) { //实例化DistrictSearch var opts = { subdistrict: 0, //获取边界不需要返回下级行政区 extensions: "all", //返回行政区边界坐标组等具体信息 level: "district" //查询行政级别为 市 }; district = new AMap.DistrictSearch(opts); } //行政区查询 let _self = this; district.setLevel("district"); district.search(_self.dataAll.cityAreaName, function(status, result) { if (status == "complete") { _self.map.remove(polygons); //清除上次结果 polygons = []; if (result.districtList[0].boundaries) { var bounds = result.districtList[0].boundaries; // _self.dataAll.shopLongitude=result.districtList[0].center.lng // _self.dataAll.shopLatitude=result.districtList[0].center.lat // _self.map.remove(_self.myMaker) // _self.addMarker() let path = bounds.toString(); let dataArr = path.split(","); _self.paths = []; for (let i = 0; i < dataArr.length; i = i + 2) { let tem = []; tem.push(dataArr[i], dataArr[i + 1]); _self.paths.push(tem); } if (bounds) { for (var i = 0, l = bounds.length; i < l; i++) { //生成行政区划polygon var polygon = new AMap.Polygon({ strokeWeight: 1, path: bounds[i], fillOpacity: 0.4, fillColor: "#80d8ff", strokeColor: "#0091ea" }); polygons.push(polygon); } } } _self.map.add(polygons); _self.map.setFitView(polygons); //视口自适应 } }); }, // 获取省市区的地址,并标注中心点 drawBounds() { var district = null; var polygons = []; //加载行政区划插件 if (!district) { //实例化DistrictSearch var opts = { subdistrict: 0, //获取边界不需要返回下级行政区 extensions: "all", //返回行政区边界坐标组等具体信息 level: "district" //查询行政级别为 市 }; district = new AMap.DistrictSearch(opts); } //行政区查询 let _self = this; district.setLevel("district"); district.search(_self.dataAll.cityAreaName, function(status, result) { if (status == "complete") { _self.map.remove(polygons); //清除上次结果 polygons = []; if (result.districtList[0].boundaries) { var bounds = result.districtList[0].boundaries; _self.dataAll.shopLongitude = result.districtList[0].center.lng; _self.dataAll.shopLatitude = result.districtList[0].center.lat; _self.map.remove(_self.myMaker); _self.addMarker(); let path = bounds.toString(); let dataArr = path.split(","); _self.paths = []; for (let i = 0; i < dataArr.length; i = i + 2) { let tem = []; tem.push(dataArr[i], dataArr[i + 1]); _self.paths.push(tem); } if (bounds) { for (var i = 0, l = bounds.length; i < l; i++) { //生成行政区划polygon var polygon = new AMap.Polygon({ strokeWeight: 1, path: bounds[i], fillOpacity: 0.4, fillColor: "#80d8ff", strokeColor: "#0091ea" }); polygons.push(polygon); } } } _self.map.add(polygons); _self.map.setFitView(polygons); //视口自适应 } }); }, insertJsScript(src, index) { var _scripts = document.getElementsByTagName("script"); for (var i = 0; i < _scripts.length; i++) { if (_scripts[i].src === src) { return; } } var _script = document.createElement("script"); _script.type = "text/javascript"; _script.async = true; _script.src = src; var _s = _scripts[0]; _s.parentNode.insertBefore(_script, _s); let _self = this; _script.onload = function() { _self.AMapFlag = true; // callback && callback() if (index == 1) { _self.loadmap(); } else if (index == 2) { _self.loadUimap(); } }; }, loadmap() { try { this.map = new AMap.Map("container", { zoom: 10 }); } catch (e) { this.AMapFlag = false; } let uiLink = "http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"; this.insertJsScript(uiLink, "2"); }, loadUimap() { try { let _self = this; AMapUI.loadUI(["misc/PoiPicker"], function(PoiPicker) { var poiPicker = new PoiPicker({ //city:'北京', input: "pickerInput" }); //初始化poiPicker _self.poiPickerReady(poiPicker); }); } catch (e) { this.AMapFlag = false; } } }, mounted() { let mapLink = "https://webapi.amap.com/maps?v=1.4.10&key=84bcccce10388c72a7e1874dca568ec9&plugin=AMap.DistrictSearch,AMap.Geocoder,AMap.ToolBar"; this.insertJsScript(mapLink, "1"); let urlArgs = DC.getUrlArgs(); this.authKey = urlArgs.authKey; this.getUserInfo(); this.queryStoreTypeList(); // 查询所有门店列表 this.querySiteInfoList(); } }; </script> <style lang='less'> @import url("../../css/difinitions"); @import url("../../css/_reset.css"); @import url("../../css/elementUI_reset"); @import url("../../css/shop+reset"); .title { margin-bottom: 20px; border-left: 4px solid #15b374; height: 25px; line-height: 25px; // font-weight: bold; font-size: 18px; padding-left: 5px; } .el-dialog__title { color: #15b374; } .el-dialog__body { padding: 0 30px 60px 30px; } .el-tabs__header { margin: 0 0 10px; } .el-tabs__item:focus.is-active.is-focus:not(:active) { box-shadow: none; } .el-date-editor--daterange.el-input__inner { width: 300px; } .echarts-box { display: flex; width: 100%; height: 500px; margin-top: 40px; .echarts-pie-box { position: relative; width: 354px; height: 500px; .echarts-pie { width: 100%; height: 100%; } .pieTitle { font-size: 16px; font-weight: 500; padding-left: 6%; } .num-msg { position: absolute; top: 130px; left: 0; width: 100%; text-align: center; p { line-height: 24px; font-size: 16px; } } } .echarts-line-box { /*width: 70%;*/ flex: 1; height: 500px; .echarts-line { height: 100%; } .lineTitle { font-size: 16px; font-weight: 500; padding-left: 30px; } } } .panel-box { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 20px; .grid-content { margin: 5px 10px 5px 5px; padding: 10px; width: 220px; height: 160px; .name { padding: 5px 0 10px 0; text-align: center; font-weight: bold; } .info-box { display: flex; .info-item { flex: 1; padding: 5px 0; text-align: center; p { padding: 24px 0; } } } &.bg-g { background-color: #ebeef5; cursor: pointer; &:hover { background-color: #efefef; // transform: scale(1.1); } &.active { background-color: #15b374; transform: scale(1.1); color: #ffffff; .name { font-weight: 700; } } } } } .bar-box { h3 { padding: 0 24px; font-size: 16px; } .search-box { margin: 10px 0 0 60px; .col-box { margin-bottom: 20; } } } .table-box { margin: 0 50px 30px; } .lab { // width: 80px; text-align: left; } .green { color: #15b374; cursor: pointer; } // 详情 ************* #container { position: relative !important; width: 400px; height: 300px; margin: 0px; font-size: 13px; } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: none !important; background-image: none !important; color: rgb(0, 0, 0) !important; } #pickerBox { // position: absolute; z-index: 500; // top: 350px; // right: 30px; // width: 300px; } #pickerInput { width: 400px; padding: 5px 5px; border: 1px solid #797b80; } .pickerInputError { width: 400px; padding: 5px 5px; border: 1px solid #797b80; } #poiInfo { background: #fff; } .amap_lib_placeSearch .poibox.highlight { background-color: #cae1ff; } .amap_lib_placeSearch .poi-more { display: none !important; } // 高德地图 .title { margin-bottom: 20px; border-left: 4px solid #15b374; height: 25px; line-height: 25px; // font-weight: bold; font-size: 18px; padding-left: 5px; .big-title { // font-size: 16px; cursor: pointer; } .little-title { // font-size: 16px; color: #999; } } .panel { padding-top: 20px; font-size: 14px; .header-name { color: #15b374; } .mult-line { display: flex; .contain { margin-right: 100px; padding: 15px; .gab { margin-top: 10px; } .gabline { display: flex; justify-content: top; } .evn { line-height: 35px; // span{ // margin-left:5px; // } .lab { width: 150px; text-align: right; } .rang_bottom { padding: 10px; position: absolute; z-index: 1000; width: 400px; height: 300px; background: #fff; left: 175px; margin-top: -6px; overflow: auto; border: #797b80 1px solid; .reginon_list { display: flex; width: 380px; // height: 200px; flex-wrap: wrap; .item { display: flex; height: 30px; line-height: 30px; width: 90px; justify-content: center; align-content: center; cursor: pointer; } .activeItem { background: #15b374; } } } .basic { display: flex; justify-content: center; .left { line-height: 40px; width: 110px; text-align: right; } .right_name { width: 600px; line-height: 40px; .el-input { width: 305px; } .el-input__inner { width: 305px; } } .right { width: 600px; line-height: 40px; .el-input { width: 400px; } .el-input__inner { width: 400px; } .input_out { border: #797b80 1px solid; height: 26px; width: 400px; } .icon-arrow { margin-left: -20px; } } .right-time { width: 600px; line-height: 40px; .el-input { width: 197px; } .el-input__inner { width: 197px; } } } .img-up { display: flex; .left { line-height: 40px; width: 110px; text-align: right; } .right { width: 600px; } } .phone { display: flex; .left { // margin-left:5px; line-height: 40px; width: 110px; text-align: right; } .right { width: 600px; .telephone { line-height: 40px; span { :first-child.el-input { width: 100px !important; .el-input__inner { width: 100px !important; } } } .green { color: #15b374; cursor: pointer; } } .mobilephone { line-height: 40px; .el-input { width: 305px !important; .el-input__inner { width: 305px !important; } } .green { color: #15b374; } } } } .map_main { display: flex; .left { // margin-left:5px; // line-height: 40px; text-align: right; width: 110px; } .right { line-height: 40px; width: 400px; .GD_map { width: 400px; height: 320px; // background: #eeeeee; } .long-lat { display: flex; align-items: center; .left1 { div { line-height: 30px; .el-input { width: 324px; } .el-input__inner { width: 324px; } } } .ii { font-size: 24px; margin-left: 10px; cursor: pointer; } } } } } } } } .btn-center { margin: 30px; display: flex; .btn-left { margin-left: 93px; } .btn-right { margin-left: 30px; } } // .el-input__inner { // width: 300px; // } .el-date-editor.el-input__inner { width: 300px; } .el-input__inner { width: 200px; } .el-input { width: 200px; } .el-textarea__inner { width: 304px; } .upload-line { display: flex; .operate { margin-right: 30px; display: flex; .del { width: 30px; height: 30px; } .add-img { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; border: 1px dashed #d9d9d9; border-radius: 6px; .img { font-size: 24px; } } } } .el-upload--picture-card i { font-size: 100px; color: #8c939d; } .avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; width: 120px; height: 120px; background-image: none; &:hover { p { bottom: 0; } } p { position: absolute; bottom: -100%; width: 100%; background-color: rgba(0, 0, 0, 0.6); color: rgba(255, 255, 255, 0.3); font-size: 14px; height: 24px; line-height: 24px; text-align: center; transition: all 0.3s linear; } } .avatar-uploader .el-upload:hover { border-color: #409eff; } .avatar-uploader-icon { font-size: 50px; color: #8c939d; width: 120px; height: 120px; line-height: 120px; text-align: center; } .avatar { width: 120px; height: 120px; display: block; border: 1px dashed #d9d9d9; border-radius: 6px; } .red-star { color: red; font-size: 18px; } </style>
高德地图,动态引入js文件