| | |
| | | <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; |