<template>
|
<div style="width: 100%">
|
<div style=" margin-top: 20px;position: relative">
|
<div
|
style="height: 36px;
|
margin-right: 50%;
|
margin-left: 20px;
|
line-height: 36px;
|
display: inline-block;
|
width: 5%;
|
text-align: center;
|
background: #409eff;
|
color: #fff;
|
border-radius: 5px;
|
cursor: pointer;
|
font-size: 14px;"
|
@click="showAddDialog"
|
>新增</div>
|
<el-cascader
|
v-model="newRegion"
|
placeholder="选择省/市/区"
|
:options="options"
|
:props="{ checkStrictly: true }"
|
clearable
|
change-on-select
|
style="width: 15%"
|
/>
|
<el-date-picker
|
v-model="value2"
|
type="daterange"
|
align="right"
|
unlink-panels
|
range-separator="-"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="yyyy-MM-dd"
|
:picker-options="pickerOptions"
|
style="width: 20%;margin-left: 10px;margin-right: 10px"
|
/>
|
<div
|
style="display: inline-block;width: 5%;line-height: 30px;text-align: center;background: #409eff;color: #fff;margin: 5px;border-radius: 5px;cursor: pointer;font-size: 14px;"
|
@click="getRegionApi"
|
>查询</div>
|
|
</div>
|
<div style="margin-top: 20px; padding: 10px 12px">
|
<el-table
|
:data="tableData"
|
style="width: 100%"
|
>
|
<el-table-column
|
prop="name"
|
label="报告标题"
|
width="240"
|
/>
|
<el-table-column
|
prop="time"
|
label="时间"
|
width="140"
|
/>
|
<el-table-column
|
prop="superviseeUnit"
|
label="被督办单位"
|
width="180"
|
/>
|
<el-table-column
|
prop="number"
|
label="被督办编号"
|
width="200"
|
/>
|
<el-table-column
|
prop="problemType"
|
label="问题类型"
|
width="140"
|
/>
|
<el-table-column
|
prop="handler"
|
label="经办人"
|
width="140"
|
/>
|
<el-table-column
|
prop="numberTimes"
|
label="督办次数"
|
width="120"
|
/>
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<el-button type="text" size="medium" @click="editReport(scope.row)">编辑</el-button>
|
<el-button type="text" size="medium" @click="showReport(scope.row)">查看并导出</el-button>
|
<el-popconfirm
|
title="是否确认删除该条数据？"
|
@confirm="deleteReport(scope.row)"
|
>
|
<el-button slot="reference" type="text" size="medium">删除</el-button>
|
</el-popconfirm>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
background
|
:page-size="pageData.pageSize"
|
layout="prev, pager, next"
|
:total="pageData.total"
|
@current-change="currentChange"
|
/>
|
</div>
|
<!-- 新增弹出框-->
|
<div>
|
<el-dialog
|
title="新增-报告"
|
:visible.sync="dialogVisible"
|
:before-close="handleClose"
|
width="40%"
|
>
|
<el-form ref="ruleForm" status-icon :rules="rules" :model="addForm">
|
<p style="display: flex">
|
<span>
|
<span class="topStyle">*</span>区域：</span><span style="margin-right: 20px">
|
<el-form-item prop="cityCode">
|
<el-cascader
|
ref="cityNode"
|
v-model="addForm.cityCode"
|
placeholder="选择省/市/区"
|
:options="options"
|
clearable
|
change-on-select
|
@change="getCityName"
|
/>
|
</el-form-item>
|
</span>
|
<span><span class="topStyle">*</span>时间：</span>
|
<el-form-item prop="time">
|
<el-date-picker
|
v-model="addForm.time"
|
value-format="yyyy-MM-dd"
|
type="date"
|
clearable
|
placeholder="选择日期"
|
/>
|
</el-form-item>
|
</p>
|
<table class="sForm">
|
<tr>
|
<td class="value_name"><span style="color: red">*</span>被督办单位</td>
|
<td class="value_name1">
|
<el-form-item prop="superviseeUnit">
|
<el-input v-model="addForm.superviseeUnit" placeholder="请输入被督办单位" autocomplete="off" />
|
</el-form-item>
|
<!-- <input v-model="addForm.superviseeUnit" placeholder="请输入被督办单位">-->
|
</td>
|
<td class="value_name"><span style="color: red">*</span>督办单编号</td>
|
<td class="value_name2">
|
<el-form-item prop="number">
|
<el-input v-model="addForm.number" placeholder="请输入被督办单编号" autocomplete="off" />
|
</el-form-item>
|
</td>
|
</tr>
|
<tr>
|
<td class="value_name"><span style="color: red">*</span>问题类型</td>
|
<td class="value_name1">
|
<el-form-item prop="problemType">
|
<el-input v-model="addForm.problemType" placeholder="请输入问题类型" autocomplete="off" />
|
</el-form-item>
|
</td>
|
<td class="value_name1" colspan="2">现场图片</td>
|
</tr>
|
<tr>
|
<td class="value_name" style="height: 380px"><span style="color: red">*</span>督办问题</td>
|
<td class="value_name1" style="position: relative">
|
<el-form-item prop="problemDesc">
|
<el-input v-model="addForm.problemDesc" type="textarea" resize="none" :rows="17" style="outline: none; border: none" autocomplete="off" placeholder="请输入发现的问题" />
|
</el-form-item>
|
</td>
|
<td class="value_name1" colspan="2">
|
<el-upload
|
ref="upload"
|
action
|
list-type="picture-card"
|
:on-preview="handlePictureCardPreview"
|
:auto-upload="false"
|
:on-remove="handleRemove"
|
:on-change="fileChange"
|
>
|
<i class="el-icon-plus" />
|
</el-upload>
|
<el-dialog :visible.sync="dialogVisibleImage">
|
<img width="100%" :src="dialogImageUrl" alt="">
|
</el-dialog>
|
</td>
|
</tr>
|
<tr>
|
<td class="value_name"><span style="color: red">*</span>经办人</td>
|
<td class="value_name1">
|
<el-form-item prop="handler">
|
<el-input v-model="addForm.handler" placeholder="请输入经办人" autocomplete="off" />
|
</el-form-item>
|
</td>
|
<td class="value_name"><span style="color: red">*</span>督办次数</td>
|
<td class="value_name2">
|
<el-form-item prop="numberTimes">
|
<el-input v-model="addForm.numberTimes" placeholder="请输入督办次数" autocomplete="off" />
|
</el-form-item>
|
</td>
|
</tr>
|
<tr>
|
<td class="value_name" style="height: 80px">管控措施</td>
|
<td class="value_name1" style="position: relative; width: 84%" colspan="3">
|
<el-form-item prop="measures">
|
<el-input v-model="addForm.measures" type="textarea" resize="none" style="outline: none; border: 0" placeholder="请输入管控措施" />
|
</el-form-item>
|
</td>
|
</tr>
|
</table>
|
</el-form>
|
<!-- <div class="sForm">-->
|
<!-- <div class="row">-->
|
<!-- <span class="value_name">被督办单位</span><input/>-->
|
<!-- <span class="value_name">被督办单位</span><input/>-->
|
<!-- </div>-->
|
<!-- <div></div>-->
|
<!-- <div></div>-->
|
<!-- <div></div>-->
|
<!-- <div></div>-->
|
<!-- </div>-->
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="okAdd">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
<!-- 查看弹出框-->
|
<div>
|
<el-dialog
|
title="编辑"
|
:visible.sync="editReportFlag"
|
:before-close="handleClose"
|
width="40%"
|
>
|
<el-form ref="editRuleForm" status-icon :rules="rules" :model="editForm">
|
<p style="display: flex">
|
<span>
|
<span class="topStyle">*</span>区域：</span><span style="margin-right: 20px">
|
<el-form-item prop="cityCode">
|
<el-cascader
|
ref="cityNode1"
|
v-model="editForm.cityCode"
|
placeholder="选择省/市/区"
|
:options="options"
|
clearable
|
change-on-select
|
@change="getCityName"
|
/>
|
</el-form-item>
|
</span>
|
<span><span class="topStyle">*</span>时间：</span>
|
<el-form-item prop="time">
|
<el-date-picker
|
v-model="editForm.time"
|
value-format="yyyy-MM-dd"
|
type="date"
|
clearable
|
placeholder="选择日期"
|
/>
|
</el-form-item>
|
</p>
|
<table class="sForm">
|
<tr>
|
<td class="value_name"><span style="color: red">*</span>被督办单位</td>
|
<td class="value_name1">
|
<el-form-item prop="superviseeUnit">
|
<el-input v-model="editForm.superviseeUnit" placeholder="请输入被督办单位" autocomplete="off" />
|
</el-form-item>
|
<!-- <input v-model="editForm.superviseeUnit" placeholder="请输入被督办单位">-->
|
</td>
|
<td class="value_name"><span style="color: red">*</span>督办单编号</td>
|
<td class="value_name2">
|
<el-form-item prop="number">
|
<el-input v-model="editForm.number" placeholder="请输入被督办单编号" autocomplete="off" />
|
</el-form-item>
|
</td>
|
</tr>
|
<tr>
|
<td class="value_name"><span style="color: red">*</span>问题类型</td>
|
<td class="value_name1">
|
<el-form-item prop="problemType">
|
<el-input v-model="editForm.problemType" placeholder="请输入问题类型" autocomplete="off" />
|
</el-form-item>
|
</td>
|
<td class="value_name1" colspan="2">现场图片</td>
|
</tr>
|
<tr>
|
<td class="value_name" style="height: 380px"><span style="color: red">*</span>督办问题</td>
|
<td class="value_name1" style="position: relative">
|
<el-form-item prop="problemDesc">
|
<el-input v-model="editForm.problemDesc" type="textarea" resize="none" :rows="17" style="outline: none; border: none" autocomplete="off" placeholder="请输入发现的问题" />
|
</el-form-item>
|
</td>
|
<td class="value_name1" colspan="2">
|
<el-upload
|
ref="upload1"
|
action
|
list-type="picture-card"
|
:on-preview="handlePictureCardPreview"
|
:auto-upload="false"
|
:on-remove="handleRemove"
|
:on-change="fileChange"
|
:file-list="editForm.fileList"
|
>
|
<i class="el-icon-plus" />
|
</el-upload>
|
<el-dialog :visible.sync="dialogVisibleImage1">
|
<img width="100%" :src="dialogImageUrl1" alt="">
|
</el-dialog>
|
</td>
|
</tr>
|
<tr>
|
<td class="value_name"><span style="color: red">*</span>经办人</td>
|
<td class="value_name1">
|
<el-form-item prop="handler">
|
<el-input v-model="editForm.handler" placeholder="请输入经办人" autocomplete="off" />
|
</el-form-item>
|
</td>
|
<td class="value_name"><span style="color: red">*</span>督办次数</td>
|
<td class="value_name2">
|
<el-form-item prop="numberTimes">
|
<el-input v-model="editForm.numberTimes" placeholder="请输入督办次数" autocomplete="off" />
|
</el-form-item>
|
</td>
|
</tr>
|
<tr>
|
<td class="value_name" style="height: 80px">管控措施</td>
|
<td class="value_name1" style="position: relative; width: 84%" colspan="3">
|
<el-form-item prop="measures">
|
<el-input v-model="editForm.measures" type="textarea" resize="none" style="outline: none; border: 0" placeholder="请输入管控措施" />
|
</el-form-item>
|
</td>
|
</tr>
|
</table>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="cancelSave">取 消</el-button>
|
<el-button type="primary" @click="editSave">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
<div>
|
<el-dialog
|
title="查看"
|
:visible.sync="showReportFlag"
|
:before-close="handleClose1"
|
width="40%"
|
>
|
<el-form :model="showForm">
|
<p style="width:100%;font-weight: 700;font-size: 20px;text-align: center;">{{ showForm.cityName }}大气污染防治督办单</p>
|
<p style="width:100%;font-weight: 400;font-size: 16px;margin-top: 10px;text-align: center">{{ showForm.cityName }}大气污染防治督办单 ({{ showForm.time }})</p>
|
<table class="sForm">
|
<tr>
|
<td class="value_name">被督办单位</td>
|
<td class="value_name1">
|
{{ showForm.superviseeUnit }}
|
</td>
|
<td class="value_name">督办单编号</td>
|
<td class="value_name2">
|
{{ showForm.number }}
|
</td>
|
</tr>
|
<tr>
|
<td class="value_name">问题类型</td>
|
<td class="value_name1">
|
{{ showForm.problemType }}
|
</td>
|
<td class="value_name1" colspan="2">现场图片</td>
|
</tr>
|
<tr>
|
<td class="value_name" style="height: 380px">督办问题</td>
|
<td class="value_name1" style="position: relative">
|
{{ showForm.problemDesc }}
|
</td>
|
<td class="value_name1" colspan="2">
|
<span id="elementImageHidden">
|
<el-upload
|
ref="upload1"
|
action
|
list-type="picture-card"
|
:on-preview="handlePictureCardPreview"
|
:auto-upload="false"
|
:on-remove="handleRemove"
|
:on-change="fileChange"
|
disabled
|
:file-list="showForm.fileList"
|
>
|
<i class="el-icon-plus" />
|
</el-upload>
|
<el-dialog :visible.sync="dialogVisibleImage1">
|
<img width="100%" :src="dialogImageUrl1" alt="">
|
</el-dialog>
|
</span>
|
|
</td>
|
</tr>
|
<tr>
|
<td class="value_name">经办人</td>
|
<td class="value_name1">
|
{{ showForm.handler }}
|
</td>
|
<td class="value_name">督办次数</td>
|
<td class="value_name2">
|
{{ showForm.numberTimes }} 次
|
</td>
|
</tr>
|
<tr>
|
<td class="value_name" style="height: 80px">管控措施</td>
|
<td class="value_name1" style="position: relative; width: 84%" colspan="3">
|
{{ showForm.measures }}
|
</td>
|
</tr>
|
</table>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="exportWord">导出</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</div>
|
|
</template>
|
|
<script>
|
import {
|
imageToBase64,
|
base64ToFile } from '@/utils/imageExchange'
|
import { exportDocx } from '@/utils/exportDocx'
|
import requestObj from '@/utils/request'
|
|
export default {
|
data() {
|
var checkTimes = (rule, value, callback) => {
|
if (!value) {
|
return callback(new Error(''))
|
} else {
|
const reg = /^[1-9]+[0-9]*]*$/
|
if (!(reg.test(value))) {
|
callback(new Error('请输入数字值'))
|
} else {
|
callback()
|
}
|
}
|
}
|
return {
|
options: [],
|
newRegion: [],
|
value2: '',
|
pickerOptions: {
|
shortcuts: [{
|
text: '最近一周',
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
picker.$emit('pick', [start, end])
|
}
|
}, {
|
text: '最近一个月',
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
picker.$emit('pick', [start, end])
|
}
|
}, {
|
text: '最近三个月',
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
picker.$emit('pick', [start, end])
|
}
|
}]
|
},
|
tableData: [],
|
// 分页数据
|
pageData: {
|
pageSize: 10,
|
current: 1,
|
total: 0
|
},
|
// 新增弹框显示隐藏
|
dialogVisible: false,
|
dialogImageUrl: '',
|
dialogImageUrl1: '',
|
dialogVisibleImage: false,
|
dialogVisibleImage1: false,
|
// 新增表单数据
|
addForm: {
|
organizationId: this.$store.state.orgId,
|
cityCode: [],
|
cityName: '',
|
time: '',
|
superviseeUnit: '',
|
number: '',
|
problemType: '',
|
problemDesc: '',
|
handler: '',
|
numberTimes: '',
|
measures: '', // 管控措施
|
files: []
|
},
|
// 新增规则
|
rules: {
|
superviseeUnit: [{ required: true, message: ' ', trigger: ['change', 'blur'] }],
|
cityCode: [{ required: true, message: '请选择区域', trigger: ['change', 'blur'] }],
|
time: [{ required: true, message: '请选择时间', trigger: ['change', 'blur'] }],
|
number: [{ required: true, message: ' ', trigger: ['change', 'blur'] }],
|
problemType: [{ required: true, message: ' ', trigger: ['change', 'blur'] }],
|
problemDesc: [{ required: true, message: '请填写问题', trigger: ['change', 'blur'] }],
|
handler: [{ required: true, message: ' ', trigger: ['change', 'blur'] }],
|
numberTimes: [{ required: true, validator: checkTimes, message: ' ', trigger: ['change', 'blur'] }]
|
},
|
// 报告查询
|
editReportFlag: false,
|
showReportFlag: false,
|
// 显示或修改表单
|
editForm: {
|
id: -1,
|
cityCode: [],
|
cityName: '',
|
time: '',
|
superviseeUnit: '',
|
number: '',
|
problemType: '',
|
problemDesc: '',
|
handler: '',
|
numberTimes: '',
|
measures: '', // 管控措施
|
files: [],
|
fileList: []
|
},
|
index: 0, // 判断是新增或者修改 0 ， 1
|
// 修改前数据
|
beforeEditForm: {},
|
// 查看的数据
|
showForm: {
|
cityCode: [],
|
cityName: '',
|
time: '',
|
superviseeUnit: '',
|
number: '',
|
problemType: '',
|
problemDesc: '',
|
handler: '',
|
numberTimes: '',
|
measures: '', // 管控措施
|
files: [],
|
fileList: []
|
}
|
}
|
},
|
created() {
|
this.getRegion()
|
this.getSurveyData()
|
},
|
mounted() {
|
},
|
methods: {
|
// 获取联动数据
|
getRegion() {
|
this.$request({
|
url: '/organization/getMapPath',
|
method: 'get',
|
params: {
|
organizationId: this.$store.state.orgId
|
}
|
})
|
.then(res => {
|
const data = res.data
|
for (let i = 0; i < data.length; i++) {
|
this.options.push({
|
value: data[i].provinceCode,
|
label: data[i].provinceName
|
})
|
this.options[i].children = []
|
for (let j = 0; j < data[i].cities.length; j++) {
|
this.options[i].children.push({
|
value: data[i].cities[j].cityCode,
|
label: data[i].cities[j].cityName
|
})
|
this.options[i].children[j].children = []
|
for (let k = 0; k < data[i].cities[j].areas.length; k++) {
|
this.options[i].children[j].children.push({
|
value: data[i].cities[j].areas[k].areaCode,
|
label: data[i].cities[j].areas[k].areaName
|
})
|
}
|
}
|
}
|
})
|
.catch(err => {
|
console.log('请求Region失败')
|
console.log(err)
|
})
|
},
|
getSurveyData() {
|
const params = {
|
organizationId: this.$store.state.orgId,
|
page: this.pageData.current,
|
size: this.pageData.pageSize
|
}
|
if (this.newRegion.length > 0) {
|
params.cityCode = this.newRegion[this.newRegion.length - 1]
|
}
|
if (this.value2 !== '') {
|
params.start = this.value2[0]
|
params.end = this.value2[1]
|
}
|
this.$request({
|
url: '/supervision/select',
|
method: 'get',
|
params: params
|
}).then(res => {
|
if (res.code === 0) {
|
const survryData = res.data.item
|
if (survryData.length > 0) {
|
this.tableData = survryData.map(item => {
|
item.name = item.cityName + '大气污染防治督办单'
|
return item
|
})
|
this.pageData.total = res.data.total
|
} else {
|
this.tableData = []
|
}
|
}
|
})
|
},
|
// 改变regionCode
|
getRegionApi() {
|
this.$store.state.regionCode = this.newRegion[this.newRegion.length - 1]
|
this.getSurveyData()
|
// this.$store.state.regionCode = this.newRegion
|
},
|
// 改变页码
|
currentChange(current) {
|
this.pageData.current = current
|
this.getSurveyData()
|
},
|
// 显示新增弹框
|
showAddDialog() {
|
this.index = 0
|
this.dialogVisible = true
|
},
|
// 监听省市区改变
|
getCityName() {
|
if (this.index === 0) {
|
this.addForm.cityName = this.$refs.cityNode.getCheckedNodes()[0].label
|
}
|
if (this.index === 1) {
|
this.editForm.cityName = this.$refs.cityNode1.getCheckedNodes()[0].label
|
}
|
},
|
fileChange(file, fileList) {
|
const typeArr = ['image/png', 'image/jpeg', 'image/jpg']
|
const isJPG = typeArr.indexOf(file.raw.type) !== -1
|
// image/png, image/jpeg, image/gif, image/jpg
|
const isLt3M = file.size / 1024 / 1024 < 3
|
|
if (!isJPG) {
|
this.$message.error('只能是图片!')
|
this.$refs.upload.clearFiles()
|
this.$refs.upload1.clearFiles()
|
this.addForm.files = null
|
this.editForm.files = null
|
return
|
}
|
if (!isLt3M) {
|
this.$message.error('上传图片大小不能超过 3MB!')
|
this.$refs.upload.clearFiles()
|
this.$refs.upload1.clearFiles()
|
this.addForm.files = null
|
this.editForm.files = null
|
return
|
}
|
if (this.index === 0) {
|
this.addForm.files.push(file.raw)
|
}
|
if (this.index === 1) {
|
this.editForm.files.push(file.raw)
|
}
|
},
|
// 处理图片
|
handleRemove(file, fileList) {
|
if (fileList.length > 0) {
|
if (this.index === 0) {
|
this.addForm.files = fileList.map(file => {
|
return file.raw
|
})
|
}
|
if (this.index === 1) {
|
this.editForm.files = []
|
fileList.forEach(file1 => {
|
this.handleImgToBase64(file1.url, (res) => {
|
this.editForm.files.push(res)
|
})
|
})
|
}
|
} else {
|
if (this.index === 0) {
|
this.addForm.files = []
|
}
|
if (this.index === 1) {
|
this.editForm.files = []
|
}
|
}
|
},
|
handlePictureCardPreview(file) {
|
if (this.index === 0) {
|
this.dialogImageUrl = file.url
|
this.dialogVisibleImage = true
|
} else {
|
this.dialogImageUrl1 = file.url
|
this.dialogVisibleImage1 = true
|
}
|
},
|
okAdd() {
|
this.$refs.ruleForm.validate((valid) => {
|
if (valid) {
|
const formData = new FormData()
|
Object.keys(this.addForm).forEach((ele) => {
|
if (ele === 'cityCode') {
|
formData.append(ele, this.addForm[ele].pop())
|
} else {
|
if (ele === 'files') {
|
if (this.addForm[ele].length > 0) {
|
this.addForm[ele].forEach(file => {
|
formData.append(ele, file)
|
})
|
} else {
|
formData.append(ele, this.addForm[ele][0])
|
}
|
} else {
|
formData.append(ele, this.addForm[ele])
|
}
|
}
|
})
|
// formData.append('files', this.addForm.files)
|
this.$request({
|
url: '/supervision/add',
|
method: 'post',
|
headers: {
|
'Content-Type': 'multipart/form-data'
|
},
|
data: formData
|
}).then(res => {
|
if (res.code === 0) {
|
this.dialogVisible = false
|
this.$message.success(res.message)
|
this.getSurveyData()
|
this.dialogImageUrl = ''
|
this.$refs['ruleForm'].resetFields() // 重置表单
|
this.addForm.cityCode = []
|
this.addForm.cityName = ''
|
this.addForm.files = []
|
this.$refs.upload.clearFiles()
|
} else {
|
this.$message.warning(res.message)
|
}
|
})
|
} else {
|
console.log('error submit!!')
|
return false
|
}
|
}
|
)
|
},
|
// 显示报告
|
editReport(obj) {
|
this.index = 1
|
this.editReportFlag = true
|
const code1 = (obj.cityCode + '').substr(4, 6)
|
const code2 = (obj.cityCode + '').substr(2, 6)
|
if (code1 === '00') {
|
if (code2 === '0000') {
|
this.editForm.cityCode = [Number(obj.cityCode)]
|
} else {
|
this.editForm.cityCode = [
|
Number((obj.cityCode + '').substr(0, 2) + '0000'),
|
Number(obj.cityCode)
|
]
|
}
|
} else {
|
this.editForm.cityCode = [
|
Number((obj.cityCode + '').substr(0, 2) + '0000'),
|
Number((obj.cityCode + '').substr(0, 4) + '00'),
|
Number(obj.cityCode)
|
]
|
}
|
this.editForm.id = obj.id
|
this.editForm.time = obj.time
|
this.editForm.superviseeUnit = obj.superviseeUnit
|
this.editForm.handler = obj.handler
|
this.editForm.number = obj.number
|
this.editForm.numberTimes = obj.numberTimes
|
this.editForm.problemDesc = obj.problemDesc
|
this.editForm.problemType = obj.problemType
|
this.editForm.measures = obj.measures
|
if (obj.images !== null) {
|
const images = obj.images.split(',')
|
images.forEach(image => {
|
const url = `${requestObj.baseUrl}/static/img/` + image
|
this.handleImgToBase64(url, (res) => {
|
this.editForm.files.push(res)
|
})
|
this.editForm.fileList.push({ url })
|
})
|
} else {
|
this.editForm.files = []
|
this.editForm.fileList = []
|
}
|
|
// this.beforeEditForm = Object.assign({}, this.editForm)
|
this.beforeEditForm = JSON.parse(JSON.stringify(this.editForm))
|
},
|
// 显示
|
showReport(obj) {
|
this.showReportFlag = true
|
this.showForm.time = obj.time
|
this.showForm.cityName = obj.cityName
|
this.showForm.superviseeUnit = obj.superviseeUnit
|
this.showForm.number = obj.number
|
this.showForm.handler = obj.handler
|
this.showForm.problemDesc = obj.problemDesc
|
this.showForm.problemType = obj.problemType
|
this.showForm.measures = obj.measures
|
this.showForm.numberTimes = obj.numberTimes
|
console.log(requestObj)
|
if (obj.images !== null) {
|
const images = obj.images.split(',')
|
images.forEach(image => {
|
const url = `${requestObj.baseUrl}/static/img/` + image
|
this.showForm.fileList.push({ url })
|
})
|
} else {
|
this.showForm.fileList = []
|
}
|
},
|
// 转换图片封装
|
handleImgToBase64(url, cb) {
|
var image = new Image()
|
image.crossOrigin = '*'
|
image.src = url
|
image.onload = function() {
|
const base64 = imageToBase64(image) // 图片转base64
|
const file = base64ToFile(base64, +new Date() + '.png') // base64转File
|
// 根据自身需求调整【因个人项目逻辑不一样，这里使用回调函数】
|
cb && typeof cb === 'function' && cb(file)
|
return file
|
}
|
},
|
// 确定修改
|
editSave() {
|
this.$refs.editRuleForm.validate((valid) => {
|
if (valid) {
|
const code = this.editForm.cityCode.pop()
|
const code1 = this.beforeEditForm.cityCode.pop()
|
const obj = {}
|
obj.id = this.editForm.id
|
obj.cityCode = code === code1 ? null : code
|
obj.cityName = code === code1 ? null : this.editForm.cityName
|
obj.time = this.editForm.time === this.beforeEditForm.time ? null : this.editForm.time
|
obj.superviseeUnit = this.editForm.superviseeUnit === this.beforeEditForm.superviseeUnit ? null : this.editForm.superviseeUnit
|
obj.number = this.editForm.number === this.beforeEditForm.number ? null : this.editForm.number
|
obj.problemType = this.editForm.problemType === this.beforeEditForm.problemType ? null : this.editForm.problemType
|
obj.problemDesc = this.editForm.problemDesc === this.beforeEditForm.problemDesc ? null : this.editForm.problemDesc
|
obj.handler = this.editForm.handler === this.beforeEditForm.handler ? null : this.editForm.handler
|
obj.numberTimes = this.editForm.numberTimes === this.beforeEditForm.numberTimes ? null : this.editForm.numberTimes
|
obj.measures = this.editForm.measures === this.beforeEditForm.measures ? null : this.editForm.measures
|
obj.files = JSON.stringify(this.editForm.files) === JSON.stringify(this.beforeEditForm.files) ? null : this.editForm.files
|
|
const formData = new FormData()
|
Object.keys(obj).forEach((ele) => {
|
if (ele === 'files') {
|
if (obj[ele].length > 0) {
|
obj[ele].forEach(file => {
|
formData.append(ele, file)
|
})
|
} else {
|
formData.append(ele, obj[ele][0])
|
}
|
} else {
|
formData.append(ele, obj[ele])
|
}
|
})
|
this.$request({
|
url: '/supervision/update',
|
method: 'post',
|
headers: {
|
'Content-Type': 'multipart/form-data'
|
},
|
data: formData
|
}).then(res => {
|
if (res.code === 0) {
|
this.$message.success(res.message)
|
this.editReportFlag = false
|
this.getSurveyData()
|
|
this.editForm = {
|
id: -1,
|
cityCode: [],
|
cityName: '',
|
time: '',
|
superviseeUnit: '',
|
number: '',
|
problemType: '',
|
problemDesc: '',
|
handler: '',
|
numberTimes: '',
|
measures: '', // 管控措施
|
files: [],
|
fileList: []
|
}
|
this.index = 0
|
}
|
})
|
}
|
})
|
},
|
// 取消修改
|
cancelSave() {
|
this.editReportFlag = false
|
this.editForm.fileList = []
|
this.editForm.files = []
|
this.editForm.cityCode = []
|
this.index = 0
|
},
|
// 点击差号
|
handleClose() {
|
if (this.index === 1) {
|
this.editReportFlag = false
|
this.editForm.fileList = []
|
this.editForm.files = []
|
this.editForm.cityCode = []
|
this.index = 0
|
} else {
|
this.dialogVisible = false
|
this.dialogImageUrl = ''
|
this.$refs['ruleForm'].resetFields() // 重置表单
|
this.addForm.cityCode = []
|
this.addForm.cityName = ''
|
this.addForm.files = []
|
this.$refs.upload.clearFiles()
|
}
|
},
|
// 点击差号
|
handleClose1() {
|
this.showForm.fileList = []
|
this.showReportFlag = false
|
},
|
// 删除报告
|
deleteReport(obj) {
|
this.$request({
|
method: 'get',
|
url: '/supervision/delete',
|
params: {
|
supervisionId: obj.id
|
}
|
}).then(res => {
|
if (res.code === 0) {
|
this.$message.success(res.message)
|
this.getSurveyData()
|
} else {
|
this.$message.warning(res.message)
|
}
|
})
|
},
|
// 导出word
|
exportWord() {
|
// 判断有无附加商品来选择word模版
|
// 读取并获得模板文件的二进制内容
|
if (this.showForm.measures === null) {
|
this.showForm.measures = ''
|
}
|
exportDocx('/demo.docx', this.showForm, `${this.showForm.cityName}大气污染防治督办单(${this.showForm.time}).docx`)
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="less">
|
#elementImageHidden {
|
.el-icon-upload-success {
|
display: none;
|
}
|
.el-upload-list__item-status-label{
|
display: none;
|
}
|
.el-upload-list__item-actions {
|
display: none;
|
}
|
.el-upload--picture-card {
|
display: none;
|
}
|
}
|
.topStyle {
|
color: red; display: inline-block; height: 40px;line-height: 40px
|
}
|
.sForm {
|
width: 100%;
|
height: 640px;
|
border: 1px solid black;
|
border-collapse: collapse;
|
color: black;
|
font-weight: 400;
|
tr {
|
border: 1px solid black;
|
}
|
}
|
.value_name {
|
width: 16%;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
border: 1px solid black;
|
}
|
|
.value_name1 {
|
width: 42%;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
border: 1px solid black;
|
.el-form-item {
|
margin-bottom: 0;
|
}
|
input {
|
width: 90%;
|
border: none;
|
height: 40px;
|
opacity: 0.6;
|
padding: 0;
|
&:focus {
|
outline: none;
|
opacity: 1;
|
}
|
}
|
}
|
|
.value_name2 {
|
width: 26%;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
border: 1px solid black;
|
.el-form-item {
|
margin-bottom: 0;
|
}
|
input {
|
width: 80%;
|
border: none;
|
height: 40px;
|
opacity: 0.6;
|
padding: 0;
|
&:focus {
|
outline: none;
|
opacity: 1;
|
}
|
}
|
}
|
.el-textarea__inner {
|
border: none;
|
}
|
/deep/.el-range-separator {
|
width: 8%;
|
}
|
/deep/.el-table__body-wrapper {
|
overflow-x: hidden;
|
}
|
|
</style>
|
