城阳pc工作端前端代码
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.
 
 
 

740 lines
25 KiB

<template>
<el-dialog title="提示" :visible.sync="dialogVisible" width="1370px" :before-close="handleCancle">
<span slot="title">
<span v-if="pageType == 'add'">新增</span>
<span v-if="pageType == 'edit'">修改</span>
<span v-if="pageType == 'view'">查看</span>
<span v-if="pageType == 'patrol'">巡查记录</span>
</span>
<div>
<div class="dialog-h-content scroll-h div_form">
<el-form :inline="true" :model="formData" ref="form" :rules="dataRule" :label-width="'90px'"
v-if="pageType != 'patrol'">
<el-row>
<el-col :span="6">
<!-- <el-form-item label="所属组织" prop="agencyId">
<el-input v-model.trim="formData.agencyId" :disabled="disabled"
class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input>
</el-form-item> -->
<el-form-item label="所属组织" prop="agencyId">
<el-cascader class="list_item_width_1" size="small" ref="myCascader"
:disabled="disabled" v-model.trim="formData.agencyId" :options="orgOptions"
:props="orgOptionProps" :show-all-levels="false" @change="handleChangeAgency"
clearable></el-cascader>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="企业名称" prop="name">
<el-input v-model.trim="formData.name" :disabled="disabled" class="list_item_width_1"
size="small" clearable placeholder="请输入"></el-input>
</el-form-item>
</el-col>
<el-col :span="4.5">
<el-form-item label="九小场所" prop="nineSmallPlacesFlag">
<el-radio-group v-model="formData.nineSmallPlacesFlag" :disabled="disabled"
size="small">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="7.5" v-if="formData.nineSmallPlacesFlag === 1">
<el-form-item label="九小场所分类" prop="nineSmallPlacesCategory" label-width="150px">
<el-select v-model.trim="formData.nineSmallPlacesCategory" :disabled="disabled"
placeholder="请选择" class="list_item_width_1" size="small">
<el-option v-for="item in placeTypeList" :label="item.label" :value="item.value"
:key="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="规模" prop="scale">
<el-input v-model.trim="formData.scale" :disabled="disabled" class="list_item_width_1"
size="small" clearable placeholder="请输入"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="负责人" prop="chargePerson">
<el-input v-model.trim="formData.chargePerson" :disabled="disabled"
class="list_item_width_1" 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.trim="formData.mobile" :disabled="disabled" class="list_item_width_1"
size="small" clearable placeholder="请输入"></el-input>
</el-form-item>
</el-col>
<el-col :span="18">
<el-form-item label="企业地址" prop="address" style="display: block">
<el-select v-model.trim="formData.address" :disabled="disabled" filterable remote
:reserve-keyword="true" placeholder="请输入关键词" :remote-method="remoteMethod"
:loading="loading" @keyup.enter.native="remoteMethod(formData.location)">
<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="form2" :label-width="'90px'" v-if="pageType == 'patrol'"
style="margin-left: 50px;">
<div class="div_btn">
<el-button size="small" type="primary " @click="patrolAddd()">新增</el-button>
</div>
<el-row v-for="(item, index) in tableData" :key="index" :gutter="20" style="margin-bottom: 20px;"
v-if="tableData">
<el-row style="margin-top: 20px;">
<el-col :span="24">
<el-tag type="primary" effect="plain" class="custom-tag">●</el-tag>{{item.checkTime}}
</el-col>
</el-row>
<el-row style="margin-top: 15px;">
<el-col :span="6" style="padding-left: 65px;"> <span style="color: #888; ">检查人员:</span> {{
item.checkPersons }}</el-col>
<el-col :span="6" style="padding-left: 65px;"><span style="color: #888; ">检查结论:</span> {{
item.checkResultFlag === 1?'合格':'不合格' }}</el-col>
<el-col :span="6" style="padding-left: 65px;" v-if="item.checkResultFlag !== 1"><span style="color: #888; ">拟复查时间: </span> {{
item.reviewTime || '--' }}</el-col>
</el-row>
<el-row style="margin-top: 15px;">
<el-col :span="24" style="padding-left: 65px;"><span
style="color: #888; ">{{item.flag?'已整改隐患':'隐患明细'}}: </span>
<div v-if="item.hiddenDangeList">
<p style="margin-left: 60px;"
v-for="(itemC,index) in item.hiddenDangeList.filter(item=>item.hazardStatus ==1)">
{{index+1}}.{{itemC.hazardDesc}}</p>
</div>
<span v-else>--</span>
</el-col>
</el-row>
<el-row style="margin-top: 15px;" v-if="item.flag">
<el-col :span="24" style="padding-left: 65px;"><span style="color: #888; ">未整改隐患: </span>
<div v-if="item.hiddenDangeList">
<p style="margin-left: 60px;"
v-for="(itemC,index) in item.hiddenDangeList.filter(item=>item.hazardStatus == 0)">
{{index+1}}.{{itemC.hazardDesc}}</p>
</div>
<span v-else>--</span>
</el-col>
</el-row>
<el-row style="margin-top: 15px;" v-else>
<el-col :span="24" style="padding-left: 65px;"><span style="color: #888; ">整改要求: </span>
<p style="margin-left: 60px;">
{{index+1}}.{{item.hiddenDangeList.find(item=>item.hazardStatus == 2).hazardDesc}}
</p>
</el-col>
</el-row>
<el-row style="margin-top: 15px;">
<el-col :span="6" style="padding-left: 65px;">
<span style="color: #888; ">附件: </span>
<span v-for="(itemI,indexI) in item.attachmentUrls" :key="itemI.fileName"
style="margin-right:10px;cursor:pointer"
@click="handelCLickImage(itemI.attachmentUrl)">{{
itemI.fileName }}
</span>
<div class="imagePreview" v-if="preViewImageFlag" @click="preViewImageFlag = false">
<img :src="preViewImage" alt="">
</div>
</el-col>
<el-col :span="6" style="padding-left: 65px;"><span style="color: #888; ">备注: </span>{{
item.remark || '--' }}</el-col>
</el-row>
</el-row>
<div style="width:100%;height:300px;display:flex;align-items:center;justify-content: center;"
v-if="tableData.length === 0&& !patrolAdd">
<span>暂无数据~</span>
</div>
<!-- 巡查记录新增 -->
<el-form :inline="true" :model="patrolForm" ref="form3" :rules="patrolRule" :label-width="'105px'"
v-if="patrolAdd">
<el-row>
<el-col :span="16">
<el-form-item label="巡查时间" prop="checkTime">
<el-date-picker class="list_item_width_1" size="small"
v-model.trim="patrolForm.checkTime" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" value="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="检查人员" prop="checkPersonsIdList">
<el-select v-model.trim="patrolForm.checkPersonsIdList" :disabled="disabled"
placeholder="请选择" class="list_item_width_1" size="small" multiple>
<el-option v-for="item in stafflist" :label="item.name" :value="item.staffId"
:key="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="18">
<el-form-item label="检查结论" prop="checkResultFlag">
<el-select v-model.trim="patrolForm.checkResultFlag" :disabled="disabled"
placeholder="请选择" class="list_item_width_1" size="small">
<el-option v-for="item in resultArray" :label="item.label" :value="item.value"
:key="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="18">
<el-form-item label="拟复查时间" prop="reviewTime">
<el-date-picker class="list_item_width_1" size="small"
v-model.trim="patrolForm.reviewTime" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" value="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="checkResultFlag !== 1">
<el-col :span="8">
<el-form-item label="隐患明细" prop="hiddenDange"
style="white-space: nowrap;overflow: hidden;">
<el-checkbox-group v-model="hiddenDangeArr" size="small">
<el-col v-for="option in checkboxOptions" :key="option.value">
<el-checkbox :label="option.value" >{{
option.hazardDesc }}</el-checkbox>
</el-col>
</el-checkbox-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="18" v-for="(item, index) in inputList" :key="index"
style="margin-left: 100px;">
<el-form-item label="" prop="textarea" class="input-container">
<el-input v-model="item.hazardDesc" rows="3" placeholder="请输入隐患信息" size="small"
class="list_item_width_1"></el-input>
</el-form-item>
<el-button @click="removeInput(index)" v-if="inputList.length > 1"
class="remove-button">
<el-icon name="minus"></el-icon>
</el-button>
<el-button @click="addInput" v-if="index === inputList.length - 1">
<el-icon name="plus"></el-icon>
</el-button>
</el-col>
</el-row>
<el-row v-if="checkResultFlag === 1 || tableData.length === 0">
<el-col :span="8">
<el-form-item label="整改意见" prop="principalName"
style="white-space: nowrap;overflow: hidden;">
<el-input v-model="patrolForm.rectificationOpinion" rows="3" size="small"
placeholder="请输入整改意见"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="附件">
<upload-image :defaultFileList="fileList" :limit="3"
@change="onChangeFileList"></upload-image>
</el-form-item>
</el-col>
<el-col :span="18">
<el-form-item label="备注" prop="remark">
<el-input v-model.trim="patrolForm.remark" :disabled="disabled"
class="list_item_width_1" size="small" clearable placeholder="请输入"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 巡查记录新增end -->
</el-form>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleCancle" size="small">取消</el-button>
<el-button @click="handleComfirm" size="small" type="primary">确定</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 UploadImage from '@/views/modules/plugins/rent/rentcontractinfo-add-or-update'
import UploadImage from '@/views/modules/plugins/rent/upload-image.vue'
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: ''
},
disabled: {
type: Boolean,
default: false
},
checkResultFlag:{
type:Number,
default:0
}
},
data() {
let checkMObile = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入联系电话'));
} else {
if (!isMobile(value)) {
callback(new Error('联系电话格式不正确'));
}
callback();
}
};
let orgOptionProps = {
multiple: false,
value: 'agencyId',
label: 'agencyName',
children: 'subAgencyList',
checkStrictly: true
}
return {
orgOptions:[],
orgOptionProps,
inputList: [{ hazardDesc: '',hazardStatus:'0' }],//隐患输入框
fileList:[],
patrolAdd: false,
checkboxOptions: [],
hiddenDangeArr:[],
tableData: [],
btnDisable: false,
user: '',
agencyId: '',
gridList: [], //所属网格list--场所区域
placeTypeList: [], //场所类型
resultArray: [{ value: '1', label: '合格' }, { value: '0', label: '不合格' }],
stafflist: [],
formData: {
agencyId:'',
name:'',
address:'',
scale:'',
chargePerson:'',
mobile:'',
nineSmallPlacesFlag:'',
nineSmallPlacesCategory:''
},
dataRule: {
agencyId: [{ required: true, message: '所属组织不能为空', trigger: 'blur' }],
name: [{ required: true, message: '企业名称不能为空', trigger: 'blur' }],
address: [{ required: true, message: '企业地址不能为空', trigger: 'blur' }],
scale: [{ required: true, message: '规模不能为空', trigger: 'blur' }],
chargePerson: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
mobile: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
nineSmallPlacesCategory: [{ required: true, message: '九小场所类型不能为空', trigger: 'blur' }],
nineSmallPlacesFlag: [{ required: true, message: '九小场所不能为空', trigger: 'blur' }],
},
patrolForm:{
companyId:null,
checkTime:null,
checkPersonsIdList:null,
checkResultFlag:null,
attachmentUrls:[],
reviewTime:null,
hiddenDangeList:null,
remark:null,
},
patrolRule:{
checkTime: [{ required: true, message: '巡查时间不能为空', trigger: 'blur' }],
checkPersonsIdList: [{ required: true, message: '检查人员不能为空', trigger: 'blur' }],
checkResultFlag: [{ required: true, message: '检查结论不能为空', trigger: 'blur' }],
reviewTime: [{ required: true, message: '拟复查时间不能为空', trigger: 'blur' }],
},
//地图
loading: false,
searchOptions: [],
preViewImage:null,
preViewImageFlag:false
};
},
watch: {},
components: { UploadImage },
created() {},
async mounted() {
this.getOrgTreeList();
this.user = this.$store.state.user;
this.agencyId = this.user.agencyId;
this.startLoading();
this.loadplaceType()
if (this.pageType != 'add' && this.pageType != 'patrol') {
this.getDetail();
}else if(this.pageType == 'patrol') {
if(this.checkResultFlag ===1){
delete this.patrolRule.reviewTime
}
this.getCompanyDetail()
this.getStafflist()
}else {
this.initMap();
}
await this.endLoading();
},
methods: {
handelCLickImage(url){
this.preViewImageFlag = true;
this.preViewImage = url;
},
handleChangeAgency(val) {
this.formData.agencyId = val.length ? val[val.length - 1] : val[0];
},
getOrgTreeList() {
this.$http
.post('/gov/org/customeragency/agencygridtree', {})
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
} else {
console.log('获取组织树成功', res.data);
// 递归处理树形结构数据,只保留 level 为 "district"、"street" 和 "community" 的节点
this.orgOptions = this.filterOrgTree(res.data);
console.log('获取组织树成功111', this.orgOptions);
}
})
.catch(() => {
return this.$message.error('网络错误');
});
},
filterOrgTree(treeData) {
const filteredTree = { ...treeData }; // 复制树形结构对象,避免直接修改原始数据
// 过滤当前节点的子节点
if (filteredTree.subAgencyList && filteredTree.subAgencyList.length > 0) {
filteredTree.subAgencyList = filteredTree.subAgencyList.filter(node => {
return ["district", "street", "community"].includes(node.level); // 只保留 level 为 "district"、"street" 和 "community" 的节点
}).map(node => {
// 对当前节点的子节点递归调用 filterOrgTree 方法
return this.filterOrgTree(node);
});
}
return filteredTree;
},
addInput() {
if (this.inputList.some(item => item.hazardDesc.trim() === '')) {
} else {
this.inputList.push({ hazardDesc: '', hazardStatus: '0' });
}
},
removeInput(index) {
this.inputList.splice(index, 1); // 删除对应索引的输入框
},
onChangeFileList(e, rowIndex = 0) {
console.log('onChangeFileList', e)
if (e.length > 0) {
this.fileList = []
e.forEach(item => {
let ob = {
fileType: item.raw.type,
fileUrl: item.response.data.url,
attachmentUrl:item.response.data.url,
fileName:item.response.data.fileName
}
this.fileList.push(ob)
})
}
},
patrolAddd(){
this.patrolAdd=true
},
//场所类型
async loadplaceType() {
const url = '/sys/dict/data/dictlist';
let params = {
dictType: "nine_small_places"
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.placeTypeList = data;
} else {
this.$message.error(msg);
}
},
// 巡查记录
async getCompanyDetail(){
const url = `/actual/base/companyInfo/showRecord`;
let { data, code, msg } = await requestPost(url,{id:this.detailId});
if (code === 0) {
data.forEach(item=>{
if(!item.hiddenDangeList){
item.flag = true;
}else{
item.flag = item.hiddenDangeList.findIndex(item=>item.hazardStatus === 2) === -1;
}
})
if(data[0].hiddenDangeList){
this.checkboxOptions = data[0].hiddenDangeList.filter(item=>item.hazardStatus === 0).map(item=>({hazardDesc:item.hazardDesc,value:item.id,hazardStatus:0}));
this.fileList = data[0].attachmentUrls;
console.log(this.fileList);
}
this.tableData = data;
} else {
this.$message.error(msg);
}
},
// 获取组织工作人员
getStafflist() {
let parms = {
orgId: this.$store.state.user.agencyId,
orgType: "agency",
pageNo: 1,
pageSize: 100,
};
this.$http.post("data/aggregator/org/stafflist", parms).then((resp) => {
this.stafflist = resp.data.data.staffList;
});
},
async getDetail() {
const url = `/actual/base/companyInfo/companyDetail/${this.detailId}`;
const { data, code, msg } = await requestPost(url);
if (code === 0) {
console.log('详情数据', data);
this.formData = { ...data };
this.initMap();
} else {
this.$message.error(msg);
}
},
handleComfirm() {
if(this.pageType === 'add' || this.pageType === 'edit'){
this.$refs['form'].validate(valid => {
if (valid){
this.save();
}
});
}else if(this.pageType === 'patrol'){
this.$refs['form3'].validate(valid => {
if (valid){
this.save();
}
});
}
// this.save();
},
async save() {
console.log('this.formData', this.formData);
var url = '';
var params = {};
if (this.pageType == 'add') {
url = '/actual/base/companyInfo/saveCompanyInfo';
params = { ...this.formData };
} else if (this.pageType == 'edit'){
url = '/actual/base/companyInfo/updateCompany';
params = { ...this.formData };
}else if(this.pageType == 'patrol'){
url = '/actual/base/companyInfo/addRecord';
params = { ...this.patrolForm };
for(let i in this.hiddenDangeArr){
this.checkboxOptions.forEach(item => {
if(item.value == this.hiddenDangeArr[i]){
this.$set(item,'hazardStatus', '1');
}
})
}
for (let i in this.inputList) {
let option = this.inputList[i];
if (this.patrolForm.checkResultFlag === '1') {
option.hazardStatus = '1';
} else if (this.patrolForm.checkResultFlag === '0') {
option.hazardStatus = '0';
}
}
params.hiddenDangeList = [
...this.inputList.filter(item => item.hazardDesc.trim() !== ''),
...this.checkboxOptions
];
params.companyId = this.detailId;
params.attachmentUrls = this.fileList;
}
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.$message.success('操作成功');
this.handleCancle();
} else if (code >= 8000) {
this.$message.error(msg);
}
},
handleCancle() {
this.resetData();
this.$emit('handleClose');
},
resetData() {
let form = this.pageType === 'add' ||this.pageType === 'edit'||this.pageType === 'view'?'form':this.pageType === 'patrol'?'form2':'form';
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 => {
if (!this.disabled) {
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.searchOptions = [];
}
},
async remoteMethod(query) {
console.log("query",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}` };
});
console.log("this.searchOptions",this.searchOptions )
}
} 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';
.el-dialog__body {
padding: 30px 80px;
}
.div_btn {
display: flex;
}
.custom-tag {
font-size: 16px; /* 设置圆点大小 */
border: none; /* 去掉边框 */
}
.imagePreview {
width:100vw;
height:100vh;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index:5000;
background-color: rgba(12, 12, 12, 0.1);
display: flex;
align-items: center;
justify-content: center;
}
</style>