<template>
|
<GlobalWindow width="800px" :title="title" :visible.sync="visible" @close="close" :confirm-working="isWorking"
|
@confirm="confirm">
|
<el-form :model="form" ref="form" :rules="rules">
|
<el-form-item label="位置类型" prop="areaType">
|
<el-select v-model="form.areaType">
|
<el-option label="室内维修" value="0"></el-option>
|
<el-option label="公共维修" value="1"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="选择项目" prop="projectId">
|
<el-select v-model="form.projectId" clearable filterable @change="getBuild">
|
<el-option v-for="item in projectList" :label="item.name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="选择楼宇" prop="buildingId">
|
<el-select v-model="form.buildingId" clearable filterable @change="changeBuild">
|
<el-option v-for="item in buildList" :label="item.name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item v-if="form.areaType == 1" label="选择楼层" prop="floorId">
|
<el-select v-model="form.floorId">
|
<el-option v-for="item in levelList" clearable filterable :label="item.name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="form.areaType == 0" label="选择房间" prop="roomId">
|
<el-select v-model="form.roomId" clearable filterable>
|
<el-option v-for="item in roomList" :label="item.roomNum" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="工单分类" prop="cateId">
|
<el-cascader v-model="form.areaIds" @change="changeSel" placeholder="请选择分类" clearable :options="cateList"
|
:props="{
|
label: 'name',
|
value: 'id',
|
children: 'childCategoryList'
|
}"></el-cascader>
|
</el-form-item>
|
<el-form-item label="上门时间" v-if="form.areaType == 0" prop="getDate">
|
<el-date-picker type="datetime" v-model="form.getDate" format="yyyy-MM-dd HH:mm"
|
value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择上门时间"></el-date-picker>
|
</el-form-item>
|
<el-form-item label="现场图片">
|
<div class="file_list">
|
<el-upload class="avatar-uploader" :data="uploadData" :auto-upload="true" :action="uploadImgUrl"
|
:show-file-list="false" :on-success="uploadAvatarSuccess" :on-error="uploadError"
|
:before-upload="beforeUpload">
|
<div class="upload_wrap">
|
<i class="el-icon-plus avatar-uploader-icon"></i>
|
<div>图片/视频</div>
|
</div>
|
</el-upload>
|
<div v-for="(item, i) in fileList" :key="i" class="item">
|
<i @click="handleDelImg(i)" class="el-icon-error close"></i>
|
<el-image :src="item.fileurlFull" :preview-src-list="[item.fileurlFull]" v-if="item.type == 0"
|
class="img"></el-image>
|
<video :src="item.fileurlFull" controls v-if="item.type == 1" class="img"></video>
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item label="描述" prop="content">
|
<el-input type="textarea" :rows="4" v-model="form.content" placeholder="请输入" :maxlength="300" v-trim />
|
</el-form-item>
|
</el-form>
|
<!-- -->
|
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { Loading, Message } from 'element-ui'
|
import { getProjectList } from '@/api/project/ywProject'
|
import { getBuildList } from '@/api/project/ywBuilding'
|
import { getRoomList } from '@/api/project/ywRoom'
|
import { getFloorList } from '@/api/project/yeFloor'
|
import { fetchList as getCateList } from '@/api/business/category.js'
|
import { rules } from './config'
|
export default {
|
name: 'OperaYwWorkorderWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data() {
|
return {
|
// 表单数据
|
form: {
|
id: null,
|
editDate: '',
|
floor: '',
|
title: '',
|
remark: '',
|
status: '',
|
sortnum: '',
|
content: '',
|
getDate: '',
|
projectId: '',
|
buildingId: '',
|
floorId: '',
|
roomId: '',
|
userId: '',
|
submitDate: '',
|
cateId: '',
|
areaType: '0',
|
code: '',
|
dealStatus: '',
|
dispatchUserId: '',
|
dispatchDate: '',
|
dispatchInfo: '',
|
dealUserId: '',
|
dealDate: '',
|
dealInfo: '',
|
dealType: ''
|
},
|
loadingInstance: null,
|
// 验证规则
|
rules,
|
projectList: [],
|
buildList: [],
|
levelList: [],
|
roomList: [],
|
cateList: [],
|
uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/uploadBatch',
|
fileList: [],
|
uploadData: {
|
folder: 'YW_WORKORDER_FILE'
|
},
|
}
|
},
|
created() {
|
this.config({
|
api: '/workorder/ywWorkorder',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
open(title, target) {
|
this.title = title
|
this.visible = true
|
this.getProject()
|
this.getCate()
|
// 新建
|
if (target == null) {
|
this.$nextTick(() => {
|
this.$refs.form = {
|
id: null,
|
editDate: '',
|
floor: '',
|
title: '',
|
remark: '',
|
status: '',
|
sortnum: '',
|
content: '',
|
getDate: '',
|
projectId: '',
|
buildingId: '',
|
floorId: '',
|
roomId: '',
|
userId: '',
|
submitDate: '',
|
cateId: '',
|
areaType: '0',
|
code: '',
|
dealStatus: '',
|
dispatchUserId: '',
|
dispatchDate: '',
|
dispatchInfo: '',
|
dealUserId: '',
|
dealDate: '',
|
dealInfo: '',
|
dealType: ''
|
}
|
this.buildList = []
|
this.roomList = []
|
this.levelList = []
|
this.$refs.form.resetFields()
|
this.form[this.configData['field.id']] = null
|
})
|
return
|
}
|
// 编辑
|
this.$nextTick(() => {
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
})
|
},
|
close() {
|
this.visible = false
|
this.$emit('close')
|
},
|
getProject() {
|
getProjectList({}).then(res => {
|
this.projectList = res
|
})
|
},
|
getBuild(projectId) {
|
this.$set(this.form, 'buildingId', '')
|
this.$set(this.form, 'floorId', '')
|
this.$set(this.form, 'roomId', '')
|
getBuildList({ projectId }).then(res => {
|
this.buildList = res
|
})
|
},
|
changeBuild(e) {
|
this.$set(this.form, 'floorId', '')
|
this.$set(this.form, 'roomId', '')
|
if (this.form.areaType == 1) {
|
this.getLevel(e)
|
} else {
|
this.getRoom(e)
|
}
|
|
|
},
|
getLevel(buildingId) {
|
getFloorList({ buildingId }).then(res => {
|
this.levelList = res
|
})
|
},
|
getRoom(buildingId) {
|
const { form } = this
|
getRoomList({ buildingId }).then(res => {
|
this.roomList = res
|
})
|
},
|
changeSel(e) {
|
if (e && e.length == 2) {
|
this.$set(this.form, 'cateId', e[1])
|
} else {
|
this.$set(this.form, 'cateId', '')
|
}
|
},
|
getCate() {
|
getCateList({
|
model: { type: 3 },
|
capacity: 1000,
|
page: 1,
|
}).then(res => {
|
this.cateList = res.records || []
|
})
|
},
|
beforeUpload(file) {
|
if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'image/jpeg', 'image/jpg', 'image/png', 'image/gif'].indexOf(file.type) == -1) {
|
this.$message.error('请上传正确的视频/图片格式')
|
return false
|
}
|
if (this.fileList.length > 8) return Message.warning('现场图片不能超过9张')
|
this.loadingInstance = Loading.service({
|
lock: true,
|
text: 'Loading',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
})
|
},
|
uploadError() {
|
this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
|
if (this.loadingInstance) {
|
this.loadingInstance.close()
|
}
|
})
|
},
|
uploadAvatarSuccess(file) {
|
this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
|
if (this.loadingInstance) {
|
this.loadingInstance.close()
|
}
|
})
|
console.log('file', file)
|
const item = file.data[0]
|
if (['.mp4', '.avi', '.flv', '.wmv'].some(char => item.imgaddr.includes(char))) {
|
this.fileList.push({
|
type: 1,
|
fileurl: item.imgaddr,
|
fileurlFull: item.url
|
})
|
} else {
|
this.fileList.push({
|
type: 0,
|
fileurl: item.imgaddr,
|
fileurlFull: item.url
|
})
|
}
|
|
// console.log('file', this.fileList)
|
this.$set(this.form, 'fileList', this.fileList)
|
// this.$set(this.param, 'faceImgUrl', file.imgurlfull)
|
},
|
handleDelImg(i) {
|
this.fileList.splice(i, 1)
|
this.$set(this.form, 'fileList', this.fileList)
|
},
|
close() {
|
this.isShowModal = false
|
this.$emit('close')
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.file_list {
|
display: flex;
|
flex-wrap: wrap;
|
|
.avatar-uploader {
|
width: 92px;
|
height: 92px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border: 1px dashed #d9d9d9;
|
}
|
|
.item {
|
width: 92px;
|
max-height: 92px;
|
margin-left: 10px;
|
position: relative;
|
border: 1px dashed #d9d9d9;
|
border-radius: 4px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.close {
|
font-size: 20px;
|
position: absolute;
|
right: -10px;
|
top: -10px;
|
z-index: 111;
|
color: red;
|
cursor: pointer;
|
}
|
|
.img {
|
width: 92px;
|
max-height: 92px;
|
}
|
}
|
}
|
</style>
|
