|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <GlobalWindow :title="title" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm"> | 
|---|
|  |  |  | <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="1"></el-option> | 
|---|
|  |  |  | </el-select> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="报修区域"> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="分类" prop="cateId"> | 
|---|
|  |  |  | <el-select v-model="form.cateId"> | 
|---|
|  |  |  | <el-option label="" value=""></el-option> | 
|---|
|  |  |  | <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="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 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"> | 
|---|
|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="情况说明" prop="content"> | 
|---|
|  |  |  | <el-input type="textarea" :rows="4" v-model="form.content" placeholder="请输入情况说明" v-trim /> | 
|---|
|  |  |  | <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> | 
|---|
|  |  |  | <!--  --> | 
|---|
|  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  | import BaseOpera from '@/components/base/BaseOpera' | 
|---|
|  |  |  | import GlobalWindow from '@/components/common/GlobalWindow' | 
|---|
|  |  |  | import { Loading } from 'element-ui' | 
|---|
|  |  |  | 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, | 
|---|
|  |  |  | 
|---|
|  |  |  | // 表单数据 | 
|---|
|  |  |  | form: { | 
|---|
|  |  |  | id: null, | 
|---|
|  |  |  | creator: '', | 
|---|
|  |  |  | createDate: '', | 
|---|
|  |  |  | editor: '', | 
|---|
|  |  |  | editDate: '', | 
|---|
|  |  |  | isdeleted: '', | 
|---|
|  |  |  | floor: '', | 
|---|
|  |  |  | title: '', | 
|---|
|  |  |  | remark: '', | 
|---|
|  |  |  | status: '', | 
|---|
|  |  |  | 
|---|
|  |  |  | getDate: '', | 
|---|
|  |  |  | projectId: '', | 
|---|
|  |  |  | buildingId: '', | 
|---|
|  |  |  | floorId: '', | 
|---|
|  |  |  | roomId: '', | 
|---|
|  |  |  | userId: '', | 
|---|
|  |  |  | phone: '', | 
|---|
|  |  |  | submitDate: '', | 
|---|
|  |  |  | cateId: '', | 
|---|
|  |  |  | areaType: '0', | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | loadingInstance: null, | 
|---|
|  |  |  | // 验证规则 | 
|---|
|  |  |  | rules: { | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | rules, | 
|---|
|  |  |  | projectList: [], | 
|---|
|  |  |  | buildList: [], | 
|---|
|  |  |  | levelList: [], | 
|---|
|  |  |  | roomList: [], | 
|---|
|  |  |  | cateList: [], | 
|---|
|  |  |  | uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/uploadBatch', | 
|---|
|  |  |  | fileList: [], | 
|---|
|  |  |  | uploadData: { | 
|---|
|  |  |  | folder: 'HIDDEN_DANGER_FILE' | 
|---|
|  |  |  | folder: 'YW_WORKORDER_FILE' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | 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) { | 
|---|
|  |  |  | open(title, target) { | 
|---|
|  |  |  | this.title = title | 
|---|
|  |  |  | this.visible = true | 
|---|
|  |  |  | this.getProject() | 
|---|
|  |  |  | this.getCate() | 
|---|
|  |  |  | // 新建 | 
|---|
|  |  |  | if (target == null) { | 
|---|
|  |  |  | this.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.$nextTick(() => { | 
|---|
|  |  |  | 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 || [] | 
|---|
|  |  |  | if(this.projectList.length > 0){ | 
|---|
|  |  |  | this.$set(this.form, 'projectId', this.projectList[0].id) | 
|---|
|  |  |  | this.getBuild(this.projectList[0].id) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getBuild(projectId) { | 
|---|
|  |  |  | this.$set(this.form, 'buildingId', '') | 
|---|
|  |  |  | this.$set(this.form, 'floorId', '') | 
|---|
|  |  |  | this.$set(this.form, 'roomId', '') | 
|---|
|  |  |  | getBuildList({ projectId }).then(res => { | 
|---|
|  |  |  | this.buildList = res || [] | 
|---|
|  |  |  | // if(projectId && this.buildList.length > 0){ | 
|---|
|  |  |  | //   this.$set(this.form, 'buildingId', this.buildList[0].id) | 
|---|
|  |  |  | //   this.changeBuild(this.buildList[0].id) | 
|---|
|  |  |  | // } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 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', | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | uploadError() { | 
|---|
|  |  |  | this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭 | 
|---|
|  |  |  | if(this.loadingInstance){ | 
|---|
|  |  |  | if (this.loadingInstance) { | 
|---|
|  |  |  | this.loadingInstance.close() | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | uploadAvatarSuccess (file) { | 
|---|
|  |  |  | uploadAvatarSuccess(file) { | 
|---|
|  |  |  | this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭 | 
|---|
|  |  |  | if(this.loadingInstance){ | 
|---|
|  |  |  | if (this.loadingInstance) { | 
|---|
|  |  |  | this.loadingInstance.close() | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | 
|---|
|  |  |  | fileurlFull: item.url | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | console.log('file', this.fileList) | 
|---|
|  |  |  | // this.$set(this.param, 'faceImg', file.imgurl) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // console.log('file', this.fileList) | 
|---|
|  |  |  | this.$set(this.form, 'fileList', this.fileList) | 
|---|
|  |  |  | // this.$set(this.param, 'faceImgUrl', file.imgurlfull) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | handleDelImg (i) { | 
|---|
|  |  |  | handleDelImg(i) { | 
|---|
|  |  |  | this.fileList.splice(i, 1) | 
|---|
|  |  |  | this.$set(this.form, 'fileList', this.fileList) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | close(){ | 
|---|
|  |  |  | close() { | 
|---|
|  |  |  | this.isShowModal = false | 
|---|
|  |  |  | this.$emit('close') | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | .file_list { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-wrap: wrap; | 
|---|
|  |  |  | .avatar-uploader{ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .avatar-uploader { | 
|---|
|  |  |  | width: 92px; | 
|---|
|  |  |  | height: 92px; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | border: 1px dashed #d9d9d9; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .item { | 
|---|
|  |  |  | width: 92px; | 
|---|
|  |  |  | max-height: 92px; | 
|---|