動態引入js檔案
阿新 • • 發佈:2018-12-14
<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: "", st