<!--
* @Author: gtz
* @Date: 2022-07-28 10:22:30
* @LastEditors: gtz
* @LastEditTime: 2022-08-04 15:34:51
* @Description: file content
* @FilePath: \hf-pda\src\pages\eqInspection\eqInspection-edit.vue
-->
<template>
<div class="eqInspectionEdit">
<!-- navbar -->
<van-sticky :offset-top="0">
<van-nav-bar
title="PDA巡检信息"
left-arrow
sticky
class="eq-header"
@click-left="onClickLeft"
/>
<!-- @click-right="onClickRight" -->
</van-sticky>
<div class="eq-edit-main">
<div class="eq-main-item">
<van-row class="eq-field-item">
<van-col :span="7" class="eq-field-item-lable">
<short-line />
设备名称
</van-col>
<van-col :span="15" :offset="1" class="eq-field-item-input">
<van-field
v-model="dataForm.equipmentName"
ref="eqCodeInput"
class="canInput"
disabled
/>
</van-col>
</van-row>
<van-row class="eq-field-item">
<van-col :span="7" class="eq-field-item-lable">
<short-line />
巡检人员
</van-col>
<van-col :span="15" :offset="1" class="eq-field-item-input">
<van-field
v-model="dataForm.inspectionWorker"
ref="eqCodeInput"
clearable
placeholder="填写巡检人员以逗号隔开"
/>
</van-col>
</van-row>
<van-row class="eq-field-item">
<van-col :span="7" class="eq-field-item-lable">
<short-line />
巡检时间
</van-col>
<van-col :span="15" :offset="1" class="eq-field-item-input">
<van-field
v-model="insTime"
ref="eqCodeInput"
clearable
clear-trigger="always"
disabled
class="canInput"
placeholder="选择巡检时间"
@click="handleDate"
/>
</van-col>
</van-row>
</div>
<div class="eq-main-edit-neirong-item" v-if="eqId">
<van-row class="eq-field-item">
<van-col :span="7" class="eq-field-item-lable">
<short-line />
巡检内容
</van-col>
<van-col :span="15" :offset="1" />
<template v-if="insList && insList.length">
<van-col :span="24" v-for="item in insList" :key="item.id" class="eq-main-edit-neirong-item-item">
<van-swipe-cell>
<van-cell :border="false" :title="item.inspectionItem" :label="item.inspectionContent">
<template #right-icon>
<span style="display: flex; align-items: center; -webkit-box-align: center; margin-right: .1rem; font-size: .3125rem; position: relative; top: .032rem;">是否完成</span>
<van-checkbox v-model="item.statusBoolean" @change="updateStatus(item)" />
</template>
</van-cell>
<template #right>
<van-button square @click="toInsDetail(item)">
<van-icon name="add-o" />
<div>编辑详情</div>
</van-button>
</template>
</van-swipe-cell>
</van-col>
</template>
<van-col :span="22" :offset="1" style="font-size: .4rem">暂无</van-col>
</van-row>
</div>
<div class="eq-main-edit-item">
<van-row class="eq-field-item">
<van-col :span="7" class="eq-field-item-lable">
<short-line />
巡检详情
</van-col>
<van-col :span="15" :offset="1" />
<van-field
v-model="dataForm.inspectionDesc"
type="textarea"
rows="5"
autosize
/>
</van-row>
</div>
<div class="eq-main-edit-item">
<van-row class="eq-field-item">
<van-col :span="7" class="eq-field-item-lable">
<short-line />
附件
</van-col>
<van-col :span="15" :offset="1" />
<van-col :span="24" style="padding-left: .25rem">
<van-uploader
v-model="fileList"
:max-count="1"
:max-size="10485760"
accept=".doc,.docx,.xls,.xlsx,.pdf,image/*"
:after-read="upload"
@oversize="oversize"
/>
</van-col>
<van-col :span="22" :offset="1">
<van-button type="info" round size="large" @click="handleSubmit">
提交
</van-button>
</van-col>
</van-row>
</div>
</div>
<van-popup v-model="show" position="bottom">
<van-datetime-picker
v-model="currentDate"
type="datetime"
:title="dateType ? '选择结束时间' : '选择开始时间'"
:min-date="minDate"
@confirm="setDate"
@cancel="show = false; dateType = 0"
/>
</van-popup>
</div>
</template>
<script>
import moment from 'moment'
import { detail, eqList, getInsList, updateInsStatus, add, update } from '@/api/eqInspection'
import { uploadFile, downloadFile } from '@/api/file'
import { blobToBase64 } from '@/util/utils'
import shortLine from '@/components/shortLine.vue'
import { Toast } from 'vant'
export default {
name: 'eqInspectionEdit',
components: { shortLine },
data () {
return {
eqList: [],
dataForm: {
id: null,
annexUrl: null,
equipmentId: null,
equipmentName: null,
inspectionDesc: null,
inspectionWorker: null,
inspectionEndTime: null,
inspectionStartTime: null,
source: 3
},
insList: [],
insTime: null,
fileList: [],
eqId: null,
show: false,
currentDate: null,
minDate: new Date(2020, 0, 1),
dateType: 0
}
},
mounted () {
if (this.$route.query.equipmentName) {
this.dataForm.equipmentName = this.$route.query.equipmentName
}
this.getEqList()
},
methods: {
// 返回上一页
onClickLeft () {
this.$router.goBack()
},
async getEqList () {
const result = await eqList({
current: 1,
size: 999
})
if (result.success) {
this.eqList = result.data.records
if (this.$route.query.id) {
this.getDetail()
} else {
this.dataForm.equipmentId = this.$route.query.equipmentId
}
}
},
// 获取详情
async getDetail () {
this.eqId = this.$route.query.id
const result = await detail({
id: this.$route.query.id
})
if (result.success) {
this.dataForm = result.data
if (this.dataForm.inspectionStartTime && this.dataForm.inspectionEndTime) {
this.insTime = moment(this.dataForm.inspectionStartTime).format('YYYY-MM-DD HH:mm:ss') + '-' + moment(this.dataForm.inspectionEndTime).format('YYYY-MM-DD HH:mm:ss')
}
const result1 = await getInsList({
equipmentInspectionId: this.$route.query.id
})
if (result1.success) {
this.insList = result1.data.map(item => {
if (item.status === '1') {
item.statusBoolean = true
} else {
item.statusBoolean = false
}
return item
})
}
if (result.data.annexUrl) {
const result2 = await downloadFile({
type: 'file',
attachmentId: result.data.annexUrl
})
blobToBase64(result2.data.data, (v) => {
const file = new File([result2.data.data], result2.data.headers['content-disposition'].slice(result2.data.headers['content-disposition'].indexOf('filename=') + 9), { type: '*' })
this.fileList.push({
content: v,
file
})
})
}
}
},
// 文件上传
async upload (file) {
const data = new FormData()
data.append('files', file.file)
data.append('typeCode', 'file')
const result = await uploadFile(data)
if (result.success) {
this.dataForm.annexUrl = result.data[0].id
}
},
// 文件超出大小
oversize () {
this.$toast.fail('文件不能超过10M')
},
// 更新巡检内容状态
async updateStatus (item) {
const result = await updateInsStatus({
id: item.id,
status: item.statusBoolean ? '1' : '0'
})
if (result.success) {
Toast.success({
message: '更新成功'
})
} else {
item.statusBoolean = !item.statusBoolean
}
},
// 更新时间
setDate (v) {
if (this.dateType) {
if (v.valueOf() - new Date(this.dataForm.inspectionStartTime).valueOf()) {
this.dataForm.inspectionEndTime = moment(v).format('YYYY-MM-DDTHH:mm:ss')
this.show = false
this.insTime = moment(this.dataForm.inspectionStartTime).format('YYYY-MM-DD HH:mm:ss') + '-' + moment(v).format('YYYY-MM-DD HH:mm:ss')
this.dateType = 0
} else {
this.$notify('结束时间必须大于开始时间！')
}
} else {
this.dataForm.inspectionStartTime = moment(v).format('YYYY-MM-DDTHH:mm:ss')
this.dateType = 1
}
},
// 弹出日期选择器
handleDate () {
this.show = true
},
// 提交表单
async handleSubmit () {
let result = {}
if (this.$route.query.id) {
result = await update(this.dataForm)
} else {
result = await add(this.dataForm)
}
if (result.success) {
Toast.success({
message: '操作成功',
onClose: () => {
this.$router.push({
name: 'eqInspection'
})
}
})
}
},
// 前往巡检内容详情
toInsDetail (item) {
this.$router.push({
name: 'eqInspectionDetail',
query: {
id: item.id,
insId: this.dataForm.id
}
})
}
}
}
</script>
<style lang="scss">
.eqInspectionEdit {
width: 100%;
background: #F6F6F6;
.eq-header {
background: #4271FF;
.van-icon {
color: #fff;
font-size: .4375rem;
}
.van-nav-bar__content {
height: 1.5rem;
line-height: 1.5rem;
.van-nav-bar__title {
color: #fff;
font-size: .4375rem;
}
}
}
.eq-edit-main {
width: 100%;
position: absolute;
top: 1.5rem;
bottom: 0;
overflow: scroll;
.eq-main-item {
background: #fff;
padding-bottom: .25rem;
margin-bottom: .25rem;
.eq-field-item {
padding-top: .25rem;
line-height: .875rem;
.eq-field-item-lable {
text-indent: .375rem;
font-size: .375rem;
}
.van-cell {
padding: 0 .25rem;
height: .875rem;
background: #F6F6F6;
border-radius: .1875rem;
.van-field__body {
height: .875rem;
.van-field__control {
height: .875rem;
}
}
}
}
}
.eq-main-edit-item {
background: #fff;
padding-bottom: .25rem;
margin-bottom: .25rem;
.eq-field-item {
padding-top: .25rem;
line-height: .875rem;
.eq-field-item-lable {
text-indent: .375rem;
font-size: .375rem;
}
.van-cell {
width: calc(100% - .75rem);
margin: 0 .375rem;
padding: 0 .25rem;
background: #F6F6F6;
border-radius: .125rem;
}
}
}
.eq-main-edit-neirong-item {
background: #fff;
padding-bottom: .25rem;
margin-bottom: .25rem;
.eq-field-item {
padding-top: .25rem;
line-height: .875rem;
.eq-field-item-lable {
text-indent: .375rem;
font-size: .375rem;
}
.eq-main-edit-neirong-item-item {
border-bottom: 1px solid #F6F6F6;
.van-cell__title {
font-size: .3125rem;
}
.van-cell__label {
font-size: .3125rem;
}
.van-button {
height: 100%;
border: 0;
background: #42D1A5;
color: #fff;
font-size: .3125rem;
.van-icon {
font-size: .5rem;
margin-bottom: .1rem;
}
}
}
}
}
}
}
</style>