You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
513 lines
15 KiB
513 lines
15 KiB
<template>
|
|
<el-dialog :visible.sync="dialogVisible" width="1100px" :before-close="handleCancle" top="5vh">
|
|
<span slot="title">
|
|
<span v-if="pageType == 'add'">新增</span>
|
|
<span v-if="pageType == 'edit'">修改</span>
|
|
<span v-if="pageType == 'view'">查看</span>
|
|
</span>
|
|
<div>
|
|
<div class="dialog-h-content2 scroll-h">
|
|
<el-form :inline="true" :model="formData" ref="form" :rules="dataRule" v-if="pageType != 'view'">
|
|
<el-row>
|
|
<el-col :span="6">
|
|
<el-form-item label="场所名称" prop="placeOrgName">
|
|
<el-input v-model="formData.placeOrgName" :disabled="disabled" class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="场所类型" prop="placeType">
|
|
<el-select class="u-item-width-normal" :disabled="disabled" v-model="formData.placeType" placeholder="全部" size="small" clearable>
|
|
<el-option v-for="item in placeTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="占地面积" prop="areaCovered">
|
|
<el-input v-model="formData.areaCovered" :disabled="disabled" class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="场所规模" prop="scaleTotal">
|
|
<el-input
|
|
type="number"
|
|
v-model="formData.scaleTotal"
|
|
:disabled="disabled"
|
|
class="u-item-width-normal"
|
|
size="small"
|
|
clearable
|
|
placeholder="请输入可容纳人数"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="所属组织" prop="gridId">
|
|
<el-select v-model="formData.gridId" class="u-item-width-normal" :disabled="disabled" placeholder="全部" size="small" clearable>
|
|
<el-option v-for="item in gridList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="场所类别" prop="placeCategory">
|
|
<el-select v-model="formData.placeCategory" :disabled="disabled" placeholder="请选择" size="small" clearable class="u-item-width-normal">
|
|
<el-option v-for="item in placeCategoryArray" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="6">
|
|
<el-form-item label="负责人" prop="personInCharge">
|
|
<el-input v-model="formData.personInCharge" :disabled="disabled" class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="联系电话" prop="mobile">
|
|
<el-input v-model="formData.mobile" :disabled="disabled" class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="场所地址" prop="address" style="display: block">
|
|
<el-select
|
|
v-model="formData.address"
|
|
:disabled="disabled"
|
|
filterable
|
|
remote
|
|
:reserve-keyword="true"
|
|
placeholder="请输入关键词"
|
|
:remote-method="remoteMethod"
|
|
:loading="loading"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in searchOptions"
|
|
@click.native="handleClickKey(index)"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<div id="app_event" class="div_map"></div>
|
|
</el-form>
|
|
<el-form :inline="false" :model="formData" ref="form" label-width="140px" v-if="pageType == 'view'">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="场所类别" prop="placeCategory">{{ formData.placeCategoryName }}</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
<el-form-item label="场所类型" prop="placeType">{{ formData.placeTypeName }}</el-form-item>
|
|
</el-col>
|
|
<!-- <el-col :span="12">
|
|
<el-form-item label="占地面积" prop="areaCovered">{{ formData.areaCovered }}</el-form-item>
|
|
</el-col>
|
|
-->
|
|
<el-col :span="12">
|
|
<el-form-item label="场所区域" prop="gridId">{{ formData.gridName }}</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="场所名称" prop="placeOrgName">{{ formData.placeOrgName }}</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="场所规模" prop="scaleTotal">{{ formData.scaleTotal }}</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="负责人" prop="personInCharge">{{ formData.personInCharge }}</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="联系电话" prop="mobile">{{ formData.mobile }}</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="场所地址" prop="address">
|
|
<div id="app_event" class="div_map"></div>
|
|
{{ formData.address }}
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
|
|
<div class="div_btn" style="text-align: center;"><el-button size="small" @click="handleCancle">取消</el-button></div>
|
|
<div class="div_btn" v-if="pageType != 'view'">
|
|
<el-button size="small" @click="handleCancle">取 消</el-button>
|
|
<!-- <el-button size="small" @click="resetData" v-if="pageType != 'view'">重置</el-button> -->
|
|
<el-button size="small" type="primary" :disabled="btnDisable" @click="handleComfirm">保 存</el-button>
|
|
</div>
|
|
<div class="recordBox"><record v-if="pageType != 'add' && detailId" :formType="pageType" :id="detailId" :info="{ agencyId: agencyId }"></record></div>
|
|
</div>
|
|
</div>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<!-- <el-button @click="handleCancle">关 闭</el-button> -->
|
|
<!-- <el-button type="primary" @click="handleComfirm">确 定</el-button> -->
|
|
</span>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { isMobile } from '@/utils/validate';
|
|
import { mapGetters } from 'vuex';
|
|
import { Loading } from 'element-ui'; // 引入Loading服务
|
|
import { requestPost, requestGet } from '@/js/dai/request';
|
|
import daiMap from '@/utils/dai-map';
|
|
import nextTick from 'dai-js/tools/nextTick';
|
|
import record from './record';
|
|
let loading; // 加载动画
|
|
let map;
|
|
var search;
|
|
var markers;
|
|
var infoWindowList;
|
|
var geocoder; // 新建一个正逆地址解析类
|
|
|
|
export default {
|
|
props: {
|
|
dialogVisible: {
|
|
type: Boolean,
|
|
default: ''
|
|
},
|
|
defaultData: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
pageType: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
detailId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
detailData: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
|
|
data() {
|
|
let checkNum = (rule, value, callback) => {
|
|
if (!value) {
|
|
return callback(new Error('场所规模不能为空'));
|
|
}
|
|
setTimeout(() => {
|
|
if (!Number.isInteger(value)) {
|
|
callback(new Error('请输入数字值'));
|
|
}
|
|
}, 1000);
|
|
};
|
|
let checkMObile = (rule, value, callback) => {
|
|
if (value === '') {
|
|
callback(new Error('请输入联系电话'));
|
|
} else {
|
|
if (!isMobile(value)) {
|
|
callback(new Error('联系电话格式不正确'));
|
|
}
|
|
callback();
|
|
}
|
|
};
|
|
return {
|
|
btnDisable: false,
|
|
user: '',
|
|
agencyId: '',
|
|
gridList: [], //所属网格list--场所区域
|
|
placeTypeList: [], //场所类型
|
|
resultArray: [{ value: '0', label: '合格' }, { value: '1', label: '不合格' }],
|
|
placeCategoryArray: [{ value: '0', label: '九小场所' }, { value: '1', label: '企事业单位' }],
|
|
list: {},
|
|
formData: {
|
|
placeOrgName: '',
|
|
scaleTotal: '',
|
|
gridId: '',
|
|
latestResult: '',
|
|
placeCategory: '',
|
|
placeType: '',
|
|
personInCharge: '',
|
|
address: '',
|
|
mobile: '',
|
|
// result: '',
|
|
remark: ''
|
|
},
|
|
dataRule: {
|
|
placeOrgName: [{ required: true, message: '场所名称不能为空', trigger: 'bulr' }],
|
|
placeCategory: [{ required: true, message: '场所类别不能为空', trigger: 'bulr' }],
|
|
placeType: [{ required: true, message: '场所类型不能为空', trigger: 'bulr' }],
|
|
result: [{ required: true, message: '巡查结果不能为空', trigger: 'bulr' }],
|
|
scaleTotal: [{ required: true, validator: checkNum, trigger: 'bulr' }],
|
|
gridId: [{ required: true, message: '所属组织不能为空', trigger: 'bulr' }],
|
|
personInCharge: [{ required: true, message: '负责人不能为空', trigger: 'bulr' }],
|
|
mobile: [{ required: true, validator: checkMObile, trigger: 'blur' }],
|
|
address: [{ required: true, message: '场所地址不能为空', trigger: 'blur' }]
|
|
// content: [{ required: true, message: '详细说明不能为空', trigger: 'bulr' }, { max: 1000, message: '不能超出1000个字符', trigger: 'blur' }]
|
|
},
|
|
//地图
|
|
loading: false,
|
|
|
|
searchValue: '',
|
|
searchOptions: []
|
|
};
|
|
},
|
|
watch: {},
|
|
components: { record },
|
|
created() {},
|
|
async mounted() {
|
|
this.user = this.$store.state.user;
|
|
this.agencyId = this.user.agencyId;
|
|
this.startLoading();
|
|
this.loadGrid();
|
|
this.loadplaceType();
|
|
if (this.pageType != 'add') {
|
|
this.getDetail();
|
|
} else {
|
|
this.initMap();
|
|
}
|
|
await this.endLoading();
|
|
this.endLoading();
|
|
},
|
|
|
|
methods: {
|
|
async loadGrid() {
|
|
const url = '/gov/org/customergrid/gridoption';
|
|
let params = {
|
|
agencyId: this.agencyId,
|
|
purpose: 'query'
|
|
};
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
if (code === 0) {
|
|
this.gridList = data;
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
//场所类型
|
|
async loadplaceType() {
|
|
const url = '/sys/dict/data/dictlist';
|
|
|
|
let params = {
|
|
dictType: 'ic_enterprise_place_type'
|
|
};
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
if (code === 0) {
|
|
this.placeTypeList = data;
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
async getDetail() {
|
|
const url = `/gov/org/enterprise/detail/${this.detailId}`;
|
|
const { data, code, msg } = await requestPost(url);
|
|
if (code === 0) {
|
|
this.formData = { ...data };
|
|
this.initMap();
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
handleComfirm() {
|
|
this.save();
|
|
},
|
|
async handleAdd() {
|
|
// this.btnDisable = true;
|
|
// setTimeout(() => {
|
|
// this.btnDisable = false;
|
|
// }, 10000);
|
|
// nextTick(1000);
|
|
// const form = new Promise((resolve, reject) => {
|
|
// this.$refs['form'].validate(valid => {
|
|
// if (valid) resolve();
|
|
// });
|
|
// });
|
|
// const form1 = new Promise((resolve, reject) => {
|
|
// this.$refs['form1'].validate(valid => {
|
|
// if (valid) resolve();
|
|
// });
|
|
// });
|
|
// Promise.all([form1, form])
|
|
// .then(() => {
|
|
// this.addFuwu();
|
|
// })
|
|
// .catch(() => {
|
|
// app.util.validateRule(messageObj);
|
|
// this.btnDisable = false;
|
|
// });
|
|
},
|
|
|
|
async save() {
|
|
this.formData.agencyId = this.agencyId;
|
|
var url = '';
|
|
var params = {};
|
|
url = '/gov/org/enterprise/addOrUpdate';
|
|
params = { ...this.formData };
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
if (code === 0) {
|
|
this.$message.success('操作成功');
|
|
|
|
this.handleCancle();
|
|
// // this.resetData();
|
|
// this.$emit('handleComfirm');
|
|
} else if (code >= 8000) {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
handleCancle() {
|
|
// this.resetData();
|
|
this.$emit('handleClose');
|
|
},
|
|
resetData() {
|
|
this.$refs.form.resetFields();
|
|
},
|
|
// 开启加载动画
|
|
startLoading() {
|
|
loading = Loading.service({
|
|
lock: true, // 是否锁定
|
|
text: '正在加载……', // 加载中需要显示的文字
|
|
background: 'rgba(0,0,0,.7)' // 背景颜色
|
|
});
|
|
},
|
|
// 结束加载动画
|
|
endLoading() {
|
|
// clearTimeout(timer);
|
|
if (loading) {
|
|
loading.close();
|
|
}
|
|
}, // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
|
|
initMap() {
|
|
let { latitude, longitude } = this.$store.state.user;
|
|
|
|
if (this.formData.latitude && this.formData.longitude) {
|
|
latitude = this.formData.latitude;
|
|
longitude = this.formData.longitude;
|
|
}
|
|
if (!latitude || latitude == '' || latitude == '0') {
|
|
latitude = 39.9088810666821;
|
|
longitude = 116.39743841556731;
|
|
}
|
|
|
|
this.$nextTick(() => {
|
|
map = new daiMap(
|
|
document.getElementById('app_event'),
|
|
{ latitude, longitude },
|
|
{
|
|
zoom: 16.2, // 设置地图缩放级别
|
|
pitch: 43.5, // 设置俯仰角
|
|
rotation: 45 // 设置地图旋转角度
|
|
}
|
|
);
|
|
// 监听地图平移结束
|
|
map.on('dragend', e => {
|
|
this.handleMoveCenter(e);
|
|
});
|
|
|
|
map.setCenter(latitude, longitude);
|
|
if (this.formData.latitude) {
|
|
map.setMarker(latitude, longitude);
|
|
}
|
|
});
|
|
},
|
|
async handleMoveCenter() {
|
|
//修改地图中心点
|
|
const { lat, lng } = map.getCenter();
|
|
this.formData.latitude = lat;
|
|
this.formData.longitude = lng;
|
|
map.setMarker(lat, lng);
|
|
|
|
let { msg, data } = await map.getAddress(lat, lng);
|
|
if (msg == 'success') {
|
|
this.formData.address = data.address;
|
|
this.searchValue = data.address;
|
|
this.searchOptions = [];
|
|
}
|
|
},
|
|
async remoteMethod(query) {
|
|
if (query !== '') {
|
|
this.loading = true;
|
|
const { msg, data } = await map.searchNearby(query);
|
|
this.loading = false;
|
|
this.resultList = [];
|
|
|
|
if (msg == 'success' && data.resultList && data.resultList.length > 0) {
|
|
if (data.resultList && data.resultList.length > 0) {
|
|
this.resultList = data.resultList;
|
|
this.searchOptions = this.resultList.map(item => {
|
|
return { value: `${item.id}`, label: `${item.address + item.name}` };
|
|
});
|
|
}
|
|
} else {
|
|
this.searchOptions = [
|
|
{
|
|
value: '0',
|
|
label: '未检索到结果'
|
|
}
|
|
];
|
|
}
|
|
} else {
|
|
this.searchOptions = [];
|
|
}
|
|
},
|
|
handleClickKey(index) {
|
|
let selPosition = this.resultList[index];
|
|
let lonlat = selPosition.lonlat.split(' ');
|
|
map.setCenter(lonlat[1], lonlat[0]);
|
|
map.setMarker(lonlat[1], lonlat[0]);
|
|
this.formData.latitude = lonlat[1];
|
|
this.formData.longitude = lonlat[0];
|
|
this.formData.address = selPosition.address + selPosition.name;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/assets/scss/modules/management/form-main.scss';
|
|
@import '@/assets/scss/modules/management/form.scss';
|
|
// @import '@/assets/scss/modules/visual/a_customize.scss';
|
|
.div_map{
|
|
width: 350px;
|
|
}
|
|
/deep/.el-dialog__header {
|
|
padding: 25px 20px 10px 25px;
|
|
font-size: 18px;
|
|
font-family: PingFang SC;
|
|
font-weight: normal;
|
|
color: #333;
|
|
}
|
|
/deep/.el-dialog__body {
|
|
padding: 30px 0px 30px 40px;
|
|
}
|
|
/deep/.el-dialog__footer {
|
|
text-align: center;
|
|
}
|
|
/deep/.el-form {
|
|
.el-form-item {
|
|
position: relative;
|
|
margin-bottom: 22px;
|
|
.el-form-item__label {
|
|
font-size: 14px;
|
|
padding-left: 15px;
|
|
text-align: left;
|
|
&::before {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 12px;
|
|
content: '';
|
|
display: block;
|
|
width: 7px;
|
|
height: 7px;
|
|
background: #0c81fe;
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
.el-form-item__content {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
/deep/.dialog-h-content2 {
|
|
max-height: calc(83vh - 90px);
|
|
box-sizing: border-box;
|
|
padding: 0 10px;
|
|
overflow: auto;
|
|
}
|
|
</style>
|
|
|