<template>
|
<view class="container">
|
|
<!--上报信息-->
|
<card class="card">
|
<view slot="insideHead">
|
<boxTitle title="上报信息"></boxTitle>
|
</view>
|
<view class="content" slot="content">
|
<u-form labelWidth="70" :model="form" :rules="rules" ref="form">
|
<u-form-item labelWidth="100" label="水库名称:" @click="disabled?skShow=false:skShow = true">
|
<u--input border="bottom" v-model="resName" disabled disabledColor="#ffffff"
|
placeholder="请选择水库">
|
</u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
|
<u-form-item labelWidth="100" required label="情况说明:" prop="desinfo">
|
<u-textarea confirmType="done" :disabled="disabled" v-model="form.desinfo"
|
placeholder="请填写情况说明">
|
</u-textarea>
|
</u-form-item>
|
|
<u-form-item labelWidth="100" required prop="images" label="现场图片:">
|
<u-upload v-if="!disabled" :fileList="form.images"
|
:previewFullImage="uploadConfig.previewFullImage" :accept="uploadConfig.acceptImg"
|
:maxCount="uploadConfig.maxCount" :multiple="uploadConfig.multiple"
|
:capture="uploadConfig.capture" @afterRead="afterReadImg" @delete="deletePic">
|
</u-upload>
|
|
<image v-if="disabled" @click="previewFullImage(img)" class="image"
|
v-for="(img,index) in form.images" :key="index" :src="img.url"></image>
|
</u-form-item>
|
|
<u-form-item v-if="!disabled" labelWidth="100" required prop="toUser" label="处理人:"
|
@click="selectShow.type = true">
|
<u--input border="bottom" v-model="form.toUserText" disabled disabledColor="#ffffff"
|
placeholder="请选择处理人">
|
</u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
</u-form>
|
</view>
|
</card>
|
|
|
|
<!--处理-->
|
<card v-if="disabled" class="card">
|
<view slot="insideHead">
|
<boxTitle title="处理"></boxTitle>
|
</view>
|
<view class="content" slot="content">
|
<u-form labelWidth="70" :model="handleForm" :rules="rules" ref="handleForm">
|
|
<u-form-item labelWidth="100" required label="处理说明:" prop="toDesinfo">
|
<u-textarea confirmType="done" v-model="handleForm.toDesinfo" placeholder="请填写处理说明">
|
</u-textarea>
|
</u-form-item>
|
|
<u-form-item labelWidth="100" required prop="toImages" label="处理图片:">
|
<u-upload :fileList="handleForm.toImages" :previewFullImage="uploadConfig.previewFullImage"
|
:accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
|
:maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture"
|
@afterRead="afterReadHandleImg" @delete="deleteHandlePic">
|
</u-upload>
|
</u-form-item>
|
</u-form>
|
</view>
|
</card>
|
<view class="place" style="height: 100rpx;">
|
|
</view>
|
|
<view class="page-footer">
|
<u-button type="primary" text="提交" @click="submit"></u-button>
|
</view>
|
|
|
<!-- 水库下拉框 -->
|
<my-select v-if="skShow" :show="skShow" v-model="form.reservoirId" type="radio" popupTitle="请选择水库"
|
:dataLists="skSelectList" @cancel="skShow = false" @submit="skSelect">
|
</my-select>
|
<!-- 处理人下拉框 -->
|
<my-select v-if="selectShow.type" :show="selectShow.type" v-model="form.toUser" type="radio" popupTitle="请选择处理人"
|
:dataLists="selectList" @cancel="selectShow.type = false" @submit="typeSelect">
|
</my-select>
|
</view>
|
</template>
|
|
<script>
|
import mySelect from "@/components/my-components/my-select.vue"
|
import card from "@/components/my-components/card.vue"
|
import boxTitle from "@/subPackage/jcsb/components/boxTitle.vue"
|
import {
|
add,
|
update
|
} from "@/api/jcsb/dangerReport/dangerReport.js"
|
import {
|
findResManagePersonByResIdReturnSys
|
} from "@/api/dataCenter/responsiblePerson/responsiblePerson.js"
|
import {
|
reservoirList
|
} from "@/api/dataCenter/reservoir/reservoir.js"
|
import {
|
devUrl,
|
clientId,
|
clientSecret
|
} from '@/common/setting'
|
import {
|
Base64
|
} from '@/utils/base64.js';
|
import {
|
fileUrlConvert
|
} from "@/subPackage/patrol/util/fileUtil.js"
|
export default {
|
components: {
|
mySelect,
|
card,
|
boxTitle
|
},
|
data() {
|
return {
|
resName: '',
|
skShow: false,
|
selectShow: {
|
type: false,
|
},
|
selectList: [],
|
skSelectList: [],
|
form: {
|
toUser: "",
|
images: [],
|
type: "1",
|
status: 2
|
},
|
handleForm: {
|
toImages: [],
|
toDesinfo: "",
|
status: 1
|
},
|
rules: {
|
'desinfo': {
|
required: true,
|
message: '请输入说明',
|
trigger: ['blur', 'change']
|
},
|
'images': {
|
type: 'array',
|
required: true,
|
message: '请上传图片',
|
trigger: ['blur', 'change']
|
},
|
'toUser': {
|
required: true,
|
message: '请选择处理人',
|
trigger: ['change']
|
},
|
|
'toDesinfo': {
|
required: true,
|
message: '请输入处理说明',
|
trigger: ['blur', 'change']
|
},
|
'toImages': {
|
type: 'array',
|
required: true,
|
message: '请上传处理图片',
|
trigger: ['blur', 'change']
|
},
|
},
|
uploadConfig: {
|
acceptImg: "image",
|
acceptVideo: 'video',
|
capture: ['album', 'camera'],
|
multiple: true,
|
maxCount: "5",
|
previewFullImage: true,
|
uploadText: "上传中",
|
url: devUrl + "/api/blade-resource/oss/endpoint/put-file-attach",
|
header: {},
|
},
|
disabled: false,
|
}
|
},
|
watch: {},
|
onLoad(option) {
|
this.getHeader()
|
if (option.dangerReport) {
|
this.disabled = true
|
let dangerReport = JSON.parse(option.dangerReport)
|
//配置上报信息
|
this.form.images = dangerReport.images
|
this.resName = dangerReport.reservoirName
|
this.form.desinfo = dangerReport.desinfo
|
//配置处理form
|
this.handleForm.id = dangerReport.id
|
} else {
|
this.init()
|
this.getReservoirList()
|
}
|
},
|
mounted() {
|
|
},
|
methods: {
|
showLoading() {
|
uni.showLoading({
|
mask: true,
|
title: '上传中'
|
})
|
},
|
loadingClose() {
|
uni.hideLoading()
|
},
|
init() {
|
let arr = this.userInfo.detail.resIds.split(",")
|
var filterArr = arr.filter(function(item, index) {
|
return arr.indexOf(item) === index; // 因为indexOf 只能查找到第一个
|
});
|
this.resIds = filterArr.join(",")
|
},
|
// 水库下拉框数据
|
async getReservoirList() {
|
if (this.resIds == "") {
|
return
|
}
|
let params = {
|
res_cds: this.resIds.split(",").map(e => `'${e}'`).join(",")
|
}
|
reservoirList(100, 1, params).then(res => {
|
let data = res.data.data
|
for (let i = 0; i < data.length; i++) {
|
if (i == 0) {
|
this.resName = data[i].res_nm
|
this.form.reservoirId = data[i].res_cd
|
}
|
let skRes = {
|
value: data[i].res_cd,
|
name: data[i].res_nm
|
}
|
this.skSelectList.push(skRes)
|
}
|
this.findResManagePersonByResId()
|
})
|
},
|
// 处理人下拉框数据
|
async findResManagePersonByResId() {
|
findResManagePersonByResIdReturnSys({
|
resGuid: this.form.reservoirId
|
}).then(res => {
|
let data = res.data
|
//先过滤同一个人
|
let noRepeat = this.deduplicate(data, 'value')
|
//再过滤自己
|
let filter = noRepeat.filter(person => person.value != this.userInfo.user_id)
|
this.selectList = filter
|
})
|
},
|
//获取头部
|
getHeader() {
|
let accessToken = uni.getStorageSync('accessToken');
|
let myHeader = {}
|
if (accessToken) {
|
myHeader['Blade-Auth'] = 'bearer ' + accessToken;
|
}
|
// 客户端认证参数
|
myHeader['Authorization'] = 'Basic ' + Base64.encode(clientId + ':' + clientSecret);
|
this.header = myHeader
|
this.uploadConfig.header = myHeader
|
},
|
//读取后的处理函数
|
async afterReadImg(event) {
|
this.showLoading()
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
let lists = [].concat(event.file)
|
let fileListLen = this.form.images.length
|
lists.map((item) => {
|
this.form.images.push({
|
...item,
|
status: 'uploading',
|
message: '上传中'
|
})
|
})
|
for (let i = 0; i < lists.length; i++) {
|
const result = await this.uploadFilePromise(lists[i].url)
|
let item = this.form.images[fileListLen]
|
this.form.images.splice(fileListLen, 1, Object.assign({}, {
|
url: fileUrlConvert(result.data.link)
|
}))
|
fileListLen++
|
}
|
this.loadingClose()
|
},
|
|
//读取后的处理函数
|
async afterReadHandleImg(event) {
|
this.showLoading()
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
let lists = [].concat(event.file)
|
let fileListLen = this.handleForm.toImages.length
|
lists.map((item) => {
|
this.handleForm.toImages.push({
|
...item,
|
status: 'uploading',
|
message: '上传中'
|
})
|
})
|
for (let i = 0; i < lists.length; i++) {
|
const result = await this.uploadFilePromise(lists[i].url)
|
let item = this.handleForm.toImages[fileListLen]
|
this.handleForm.toImages.splice(fileListLen, 1, Object.assign({}, {
|
url: fileUrlConvert(result.data.link)
|
}))
|
fileListLen++
|
}
|
this.loadingClose()
|
},
|
|
//上传方法
|
uploadFilePromise(url) {
|
return new Promise((resolve, reject) => {
|
let a = uni.uploadFile({
|
url: this.uploadConfig.url, //接口地址
|
filePath: url,
|
name: 'file',
|
header: this.uploadConfig.header,
|
success: (res) => {
|
let data = JSON.parse(res.data)
|
setTimeout(() => {
|
resolve(data)
|
}, 1000)
|
}
|
});
|
})
|
},
|
|
|
//删除图片
|
deletePic(event) {
|
this.form.images.splice(event.index, 1)
|
},
|
//删除图片
|
deleteHandlePic(event) {
|
this.handleForm.toImages.splice(event.index, 1)
|
},
|
|
async submit() {
|
const that = this
|
if (this.disabled) {
|
//处理
|
this.$refs.handleForm.validate().then(res => {
|
if (res) {
|
update(this.handleForm).then(res => {
|
uni.showToast({
|
icon: 'success',
|
title: '提交成功',
|
success() {
|
setTimeout(() => {
|
that.$u.func.globalNavigator(
|
"/pages/home/patrolIndex",
|
"switchTab")
|
}, 1000)
|
}
|
})
|
})
|
}
|
})
|
} else {
|
const res = await this.$refs.form.validate()
|
let that = this
|
if (res) {
|
this.form.createUser = uni.getStorageSync("userInfo").user_id
|
add(this.form).then(res => {
|
uni.showToast({
|
icon: 'success',
|
title: '提交成功',
|
success() {
|
setTimeout(() => {
|
that.$u.func.globalNavigator(
|
"/pages/home/patrolIndex", "switchTab")
|
}, 1000)
|
}
|
})
|
})
|
}
|
}
|
},
|
//责任人选择
|
typeSelect(data) {
|
this.form.toUser = data.value
|
this.form.toUserText = data.name
|
this.selectShow.type = false
|
},
|
//水库选择
|
skSelect(data) {
|
this.form.reservoirId = data.value
|
this.resName = data.name
|
this.skShow = false
|
this.findResManagePersonByResId()
|
},
|
//图片预览
|
previewFullImage(img) {
|
uni.previewImage({
|
// current: e, //预览图片的下标
|
urls: [img.url] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
|
})
|
},
|
/** 数组去重
|
* 思路：利用数组的 indexOf 下标属性来查询
|
* @param arr 需要去重的数组
|
* @param t 根据 t 字段(指定)进行去重
|
* @returns {*[]} 已去重后的数据
|
*/
|
deduplicate(arr, t = "") {
|
const newArr = [],
|
assignList = []
|
// 有指定字段
|
if (t) {
|
for (let i = 0; i < arr.length; i++) {
|
if (assignList.indexOf(arr[i][t]) === -1) {
|
assignList.push(arr[i][t])
|
newArr.push(arr[i])
|
}
|
}
|
}
|
// 无指定字段
|
else {
|
for (let i = 0; i < arr.length; i++) {
|
if (newArr.indexOf(arr[i]) === -1) newArr.push(arr[i])
|
}
|
}
|
return newArr
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
overflow: hidden;
|
// padding: 0 14rpx;
|
|
.page-footer {
|
position: fixed;
|
bottom: 0;
|
width: 100%;
|
}
|
}
|
|
.card {
|
.content {
|
padding: 0 30rpx;
|
border: 5rpx solid #edf6ff;
|
}
|
|
.image {
|
width: 100rpx;
|
height: 100rpx;
|
}
|
}
|
</style>
|
