Skip to content

C
cloud-platform-ui
Commit 8311e786 authored by lixy's avatar lixy
Browse files
Options

公司列表+营地列表

parent d0cb77f7
Hide whitespace changes
Inline Side-by-side
Showing with 387 additions and 1 deletion
index.html
View file @ 8311e786
......@@ -10,7 +10,6 @@
<body>
<script src=<%= htmlWebpackPlugin.options.path %>/jquery.min.js></script>
<script src=<%= htmlWebpackPlugin.options.path %>/tinymce/tinymce.min.js></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=gvQPveN9YrlPSgKUMPK2u2u2BA4yQFRm"></script>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
......
src/router/index.js
View file @ 8311e786
......@@ -46,6 +46,13 @@ export const constantRouterMap = [{
hidden: true
// authority: 'stockCrowd'
},
{
path: '/campsite',
component: _import('baseInfo/campsite/campsite'),
name: '营地',
hidden: true
// authority: 'stockCrowd'
},
{
path: '/companyInfo',
component: _import('baseInfo/companyInfo/index'),
......
src/views/baseInfo/campsite/campsite.vue 0 → 100644
View file @ 8311e786
<template>
<div>
<div class="header-css">
<!--@click="$router.push({name:'mypoints'})"-->
<!--<img @click="goBack()" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAfCAYAAADqUJ2JAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU0OTNGQTA2QTEwNTExRTg4M0E3OUI4RkYwRDg3RUU4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU0OTNGQTA3QTEwNTExRTg4M0E3OUI4RkYwRDg3RUU4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTQ5M0ZBMDRBMTA1MTFFODgzQTc5QjhGRjBEODdFRTgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTQ5M0ZBMDVBMTA1MTFFODgzQTc5QjhGRjBEODdFRTgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4bKBAsAAAAzklEQVR42qzWWQrCMBDG8VzCtVb01ZuIFJUq4nU8l+AlXEsFXz2CC+iXB2EYgjBL4P/6o4Qk0xD0q4G2aBSMyB590F2LNQkSe6OFFGmhA0PWUqSNjgxZWZEXWkqRDjpZkS46E+Sp2diIXAjyQKUUyRLIXIr0UMWQmQapGTKVInkCKaTIAF0ZMtEgN4aMNZdwR5DYRvskuH1RXEOPPfqtfgIrtFjucY5cTza9a5X1rv27uKUWc3mPXF9I+ma7YuYp4jrXXCet6+xP/o18BRgA2Nl6bmmSdvgAAAAASUVORK5CYII=" size="25" style="width: 15px; height: 20px; margin: 10px">-->
<span class="header-title">营地列表</span>
</div>
<div class="main-container">
<div class="shoppings main-container">
<div class="filter-container" ref="filter-container">
<el-form :rules="rules4Query" ref="queryForm" style="display: flex;" :inline="inline" :model="listQuery">
<el-select class="filter-item" style="width: 45%" v-model="listQuery.addrProvince" placeholder="请选择省份（直辖市）" @change='getValue'>
<el-option :key="undefined" label="全部" :value="undefined"></el-option>
<el-option v-for="item in provinceRegions" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
<el-select class="filter-item" style="width: 45%;margin-left: 10px;" v-model="listQuery.addrCity" placeholder="请选择城市" @change='getCompanyList'>
<el-option :key="undefined" label="全部" :value="undefined"></el-option>
<el-option v-for="item in cityRegions4Query" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form>
</div>
</div>
<!--营地分布图-->
<company-map v-on:headCallBack="headCall" v-if="toList" :toSonData="list" :provinceName="provinceName"></company-map>
<!--营地数据-->
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="0">
<div class="shoppings company-list"
v-for="item in list"
:key="item.key"
>
<div class="item-right-p company-item">
<div class="ellipsis company-name">{{item.name}}</div>
<p class="ellipsis">负责人：{{item.leader}}</p>
<p>地址： {{item.address + item.addrDetail}}</p>
<p class="ellipsis">电话：{{item.leaderContactInfo}}</p>
</div>
</div>
<infinite-loading v-show="loading" spinner="spiral" style="margin-top:2em" ref="sroller">
</infinite-loading>
<div v-if="nomore && !loading" style="text-align: center;color: #999;padding: 10px;">
---暂无更多数据---
</div>
<div v-if="toList && !loading && list.length == 0" style="text-align: center;color: #999;padding: 10px;">
---暂无数据---
</div>
</div>
</div>
</div>
</template>
<style>
.header-title {
text-align: center;
width: 100%;
}
.company-name{
font-size: 16px;
color: #333;
font-weight: 600;
}
.company-item{
border-bottom: 1px solid #ccc;
padding: 5px 0;
}
.company-item p{
font-size: 13px;
color: #666;
padding-left: 0 !important;
}
</style>
<script>
/*引入postcss-px2rem 通过require的形式*/
// var px2rem = require('postcss-px2rem');
import {
page
} from 'api/base_info/campsite';
import chinaMap from '../companyInfo/chinaMap';
import companyMap from "../companyInfo/companyMap";
import {
getSonRegionByCodes,
getRegionByCodes,
} from 'api/base_info/region/';
import {mapGetters} from 'vuex';
import BmMap from "../../../../node_modules/vue-baidu-map/components/map/Map.vue";
import infiniteScroll from 'vue-infinite-scroll'
import InfiniteLoading from 'vue-infinite-loading'
export default {
name: 'campsite',
directives: {
infiniteScroll
},
components: {
BmMap,
InfiniteLoading,
companyMap},
data() {
return {
toList: false,
nodata: false,
nomore:false,
loading: false,
form: {
id: undefined,
name: undefined,
status: undefined,
addrProvince: undefined,
addrCity: undefined,
addrTown: undefined,
addrDetail: undefined,
leader: undefined,
leaderContactInfo: undefined,
updateTime: undefined
},
rules: {
status: [
{
type: 'integer',
required: true,
message: '请输名称',
trigger: 'blur'
}
],
name: [
{
required: true,
message: '请输名称',
trigger: 'blur'
},
{
min: 0,
max: 200,
message: '长度小于 200 个字符',
trigger: 'blur'
}
],
addrDetail: [
{
required: true,
message: '请输入详细地址',
trigger: 'blur'
},
{
min: 0,
max: 200,
message: '长度小于 200 个字符',
trigger: 'blur'
}
],
addrProvince: [
{
required: true,
type: 'number',
message: '请选择省份',
trigger: 'blur'
}
],
addrCity: [
{
required: true,
type: 'number',
message: '请选择城市',
trigger: 'blur'
},
{
validator: (rule, value, callback) => {
if (this.$utils.isInteger(this.form.addrProvince) &&
value.toString().substr(0, 2) != this.form.addrProvince.toString().substr(0, 2)) {
return callback(new Error('请选择省份下相应城市'));
}
callback();
},
trigger: 'blur'
}
],
addrTown: [
{
required: true,
type: 'number',
message: '请选择镇(县)',
trigger: 'blur'
},
{
validator: (rule, value, callback) => {
if (this.$utils.isInteger(this.form.addrCity) &&
value.toString().substr(0, 4) != this.form.addrCity.toString().substr(0, 4)) {
return callback(new Error('请选择城市下相应镇（县）'));
}
callback();
},
trigger: 'blur'
}
]
},
rules4Query: {
addrCity: [
{
validator: (rule, value, callback) => {
if (this.$utils.isUndefined(value)) {
return callback();
}
if (this.$utils.isInteger(this.listQuery.addrProvince) &&
value.toString().substr(0, 2) !== this.listQuery.addrProvince.toString().substr(0, 2)) {
return callback(new Error('请选择省份下相应城市'));
}
callback();
},
trigger: 'blur'
}
]
},
list: [],
total: null,
listLoading: true,
page: 1,
listQuery: {
limit: 10,
addrProvince: undefined,
addrCity: undefined,
addrTown: undefined
},
inline: true,
dialogFormVisible: false,
dialogStatus: '',
branchCompany_btn_edit: false,
branchCompany_btn_del: false,
branchCompany_btn_add: false,
textMap: {
update: '编辑',
create: '创建'
},
provinceName: "",
tableKey: 0,
send: !1,//是否已发送请求
nomore: false
}
},
created() {
this.branchCompany_btn_edit = this.elements['branchCompany:btn_edit'];
this.branchCompany_btn_del = this.elements['branchCompany:btn_del'];
this.branchCompany_btn_add = this.elements['branchCompany:btn_add'];
},
computed: {
...mapGetters([
'elements',
'companyStatusAndCode'
]),
provinceRegions() {
return getSonRegionByCodes(1);
},
cityRegions() {
if (!this.$utils.isInteger(this.form.addrProvince)) {
return null;
}
return getSonRegionByCodes(this.form.addrProvince);
},
townRegions() {
if (!this.$utils.isInteger(this.form.addrCity)) {
return null;
}
return getSonRegionByCodes(this.form.addrCity);
},
cityRegions4Query() {
if (!this.$utils.isInteger(this.listQuery.addrProvince)) {
return null;
}
return getSonRegionByCodes(this.listQuery.addrProvince);
},
townRegions4Query() {
if (!this.$utils.isInteger(this.listQuery.addrCity)) {
return null;
}
return getSonRegionByCodes(this.listQuery.addrCity);
}
},
methods: {
getCompanyList(e){
let that = this;
this.provinceRegions.map(function(item){
if(item.id == that.listQuery.addrProvince){
that.provinceName = item.name;
}
});
this.getList();
},
getValue(e){
let that = this;
if(!e){
//全部
that.provinceName = "兰州";
}
this.listQuery.addrCity = undefined;
this.provinceRegions.map(function(item){
if(item.id == that.listQuery.addrProvince){
that.provinceName = item.name;
}
});
this.getList();
},
headCall: function (msg) { //回调方法，接收子组件传的参数
this.listQuery.addrProvince = msg;
this.getList();
},
getStatusName(code) {
if (!this.$utils.isInteger(code)) {
return '未知';
}
return this.companyStatusAndCode[code].val;
},
getList(){
this.page = 1;
this.list = [];
this.nomore = false;
this.loadMore();
},
/**
* 深拷贝
*/
objDeepCopy (source) {
var sourceCopy = source instanceof Array ? [] : {};
for (var item in source) {
sourceCopy[item] = typeof source[item] === 'object' ? objDeepCopy(source[item]) : source[item];
}
return sourceCopy;
},
loadMore: function() {
let that = this;
if(this.nomore){
return;
}
if(this.send){
return;
}
this.busy = true;
this.loading = true;
let params = this.objDeepCopy(this.listQuery);//深拷贝
params.page = this.page++;
this.send = !0;
page(params)
.then(res => {
this.loading = false;
let allList = [];
let listTemp = res.data.data;
//一次读入所有涉及地区，防止多次读取
if (!this.$utils.isEmpty(listTemp)) {
let allRegions = new Set();
for (let index in listTemp) {
allRegions.add(listTemp[index].addrProvince);
allRegions.add(listTemp[index].addrCity);
allRegions.add(listTemp[index].addrTown);
let regions = getRegionByCodes([listTemp[index].addrProvince, listTemp[index].addrCity, listTemp[index].addrTown]);
listTemp[index].address = regions[0].name + ' ' + regions[1].name + ' ' + regions[2].name + ' ';
}
getRegionByCodes([...allRegions]);
}
res.data.data.forEach(function (item) {
allList.push(item);
});debugger
if(res.data.data.length< this.listQuery.limit && this.list.length>0){
//已加载全部
this.nomore = true;
}
this.list = [...this.list, ...allList];
this.send = !1;
this.toList = true;
});
this.busy = false;
},
getAddrStr(branchCompany) {
let regions = getRegionByCodes([branchCompany.addrProvince, branchCompany.addrCity, branchCompany.addrTown]);
return regions[0].name + ' ' + regions[1].name + ' ' + regions[2].name + ' ';
},
},
mounted() {
},
}
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment