|
|
@@ -0,0 +1,115 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form :model="form" ref="form" size="small" :inline="true" label-position="left" label-width="70px">
|
|
|
+ <el-form-item>
|
|
|
+ <el-input v-model="form.name" placeholder="请输入用户名" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="handleCurrentGetList">查询</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <tableList
|
|
|
+ ref="table"
|
|
|
+ :column="tableConfig"
|
|
|
+ :checkbox="false"
|
|
|
+ :getList="handleGetList"
|
|
|
+ :showOperation="false"
|
|
|
+ operationWidth="100px"
|
|
|
+ >
|
|
|
+ <!-- <template #default="scope">
|
|
|
+ <f-btn type="text" @click="openMapDialog(scope.row)">查看定位</f-btn>
|
|
|
+ </template> -->
|
|
|
+ </tableList>
|
|
|
+
|
|
|
+ <f-dialog ref="mapDialog" @opened="mapDialogInitData" :isCancel="false" destroy-on-close title="用户定位" width="80%" @submit.native.prevent>
|
|
|
+ <template #contain>
|
|
|
+ <div id="map" style="width:100%;height:500px"></div>
|
|
|
+ </template>
|
|
|
+ </f-dialog>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ import { baseUserApi } from '@/api/user'
|
|
|
+ import tableList from "@/comComponents/tableList";
|
|
|
+ import '../userList/china.js'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'UserList',
|
|
|
+ components:{tableList},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form:{name:''},
|
|
|
+ tableConfig: [
|
|
|
+ {'userPhone': '用户手机号'},
|
|
|
+ {'createTime': '注册时间'},
|
|
|
+ // {'positionTime': '定位时间',formatter:row=>row.positionTime || '-'},
|
|
|
+ // {'latitude': '经纬度',formatter:row=>row.latitude?row.longitude+','+row.latitude:'-'}
|
|
|
+ ],
|
|
|
+ rowData:{},
|
|
|
+ map:'',
|
|
|
+ mapData:{}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 查询列表
|
|
|
+ handleCurrentGetList() {
|
|
|
+ this.$refs.table.handleQueryList();
|
|
|
+ },
|
|
|
+ // 获取列表
|
|
|
+ async handleGetList(page) {
|
|
|
+ const res = await baseUserApi.getUserList(
|
|
|
+ {
|
|
|
+ ...page,
|
|
|
+ name:this.form.name
|
|
|
+ }
|
|
|
+ );
|
|
|
+ if(res.code!= 200 ) return {
|
|
|
+ current:1,
|
|
|
+ records:[],
|
|
|
+ total:0
|
|
|
+ }
|
|
|
+ return res.data;
|
|
|
+ },
|
|
|
+ // 打开弹窗
|
|
|
+ openDialog(el) {
|
|
|
+ const { data } = el;
|
|
|
+ this.rowData = data
|
|
|
+ this.$refs.dialog.show()
|
|
|
+
|
|
|
+ },
|
|
|
+ // 打开百度地图弹窗
|
|
|
+ openMapDialog(row){
|
|
|
+ this.mapData = row
|
|
|
+ this.$refs.mapDialog.show()
|
|
|
+ },
|
|
|
+ // 弹窗初始化
|
|
|
+ async dialogInitData() {
|
|
|
+ this.handleCurrentGetList()
|
|
|
+ },
|
|
|
+ // 地图数据初始化
|
|
|
+ async mapDialogInitData(){
|
|
|
+ const res = await baseUserApi.userAddress({
|
|
|
+ id:this.mapData.id
|
|
|
+ })
|
|
|
+ console.log(res)
|
|
|
+ let mapData = '上海市'
|
|
|
+
|
|
|
+ var map = new BMapGL.Map("map");
|
|
|
+ map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
|
|
|
+ if(res.data) {
|
|
|
+ mapData = new BMapGL.Point(Number(res.data.longitude), Number(res.data.latitude))
|
|
|
+ let marker = new BMapGL.Marker(new BMapGL.Point(Number(res.data.longitude), Number(res.data.latitude)));
|
|
|
+ map.addOverlay(marker)
|
|
|
+ }
|
|
|
+ map.centerAndZoom(mapData, 12); // 初始化地图,设置中心点坐标和地图级别
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.handleCurrentGetList()
|
|
|
+ },
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+
|
