| | |
| | | <template> |
| | | <GlobalWindow |
| | | :title="title" |
| | | :visible.sync="visible" |
| | | :confirm-working="isWorking" |
| | | @confirm="confirm" |
| | | > |
| | | <GlobalWindow :title="title" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm"> |
| | | <el-form :model="form" ref="form" :rules="rules"> |
| | | <el-form-item label="创建人编码" prop="creator"> |
| | | <el-input v-model="form.creator" placeholder="请输入创建人编码" v-trim/> |
| | | <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="createDate"> |
| | | <el-date-picker v-model="form.createDate" value-format="yyyy-MM-dd" placeholder="请输入创建时间"></el-date-picker> |
| | | <el-form-item label="报修区域"> |
| | | |
| | | </el-form-item> |
| | | <el-form-item label="更新人编码" prop="editor"> |
| | | <el-input v-model="form.editor" placeholder="请输入更新人编码" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="更新时间" prop="editDate"> |
| | | <el-date-picker v-model="form.editDate" value-format="yyyy-MM-dd" placeholder="请输入更新时间"></el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="是否删除0否 1是" prop="isdeleted"> |
| | | <el-input v-model="form.isdeleted" placeholder="请输入是否删除0否 1是" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="标题" prop="title"> |
| | | <el-input v-model="form.title" placeholder="请输入标题" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="备注" prop="remark"> |
| | | <el-input v-model="form.remark" placeholder="请输入备注" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="状态 0启用 1禁用" prop="status"> |
| | | <el-input v-model="form.status" placeholder="请输入状态 0启用 1禁用" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="排序码" prop="sortnum"> |
| | | <el-input v-model="form.sortnum" placeholder="请输入排序码" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="情况说明" prop="content"> |
| | | <el-input v-model="form.content" placeholder="请输入情况说明" v-trim/> |
| | | <el-form-item label="分类" prop="cateId"> |
| | | <el-select v-model="form.cateId"> |
| | | <el-option label="" value=""></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="上门时间" prop="getDate"> |
| | | <el-date-picker v-model="form.getDate" value-format="yyyy-MM-dd" placeholder="请输入上门时间"></el-date-picker> |
| | | <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="所属项目编码(关联yw_project)" prop="projectId"> |
| | | <el-input v-model="form.projectId" placeholder="请输入所属项目编码(关联yw_project)" v-trim/> |
| | | <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="所属项目编码(关联yw_building)" prop="buildingId"> |
| | | <el-input v-model="form.buildingId" placeholder="请输入所属项目编码(关联yw_building)" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="所属房间编码(关联yw_room)" prop="roomId"> |
| | | <el-input v-model="form.roomId" placeholder="请输入所属房间编码(关联yw_room)" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="提报人编码" prop="userId"> |
| | | <el-input v-model="form.userId" placeholder="请输入提报人编码" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="联系电话" prop="phone"> |
| | | <el-input v-model="form.phone" placeholder="请输入联系电话" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="提报时间" prop="submitDate"> |
| | | <el-date-picker v-model="form.submitDate" value-format="yyyy-MM-dd" placeholder="请输入提报时间"></el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="工单分类编码(关联category)" prop="cateId"> |
| | | <el-input v-model="form.cateId" placeholder="请输入工单分类编码(关联category)" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="保修区域类型 0室内维修 1公共区域" prop="areaType"> |
| | | <el-input v-model="form.areaType" placeholder="请输入保修区域类型 0室内维修 1公共区域" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="工单编号" prop="code"> |
| | | <el-input v-model="form.code" placeholder="请输入工单编号" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="处理状态 0待处理 1已分派 2已处理" prop="dealStatus"> |
| | | <el-input v-model="form.dealStatus" placeholder="请输入处理状态 0待处理 1已分派 2已处理" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="分派人编码(关联system_user)" prop="dispatchUserId"> |
| | | <el-input v-model="form.dispatchUserId" placeholder="请输入分派人编码(关联system_user)" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="分派时间" prop="dispatchDate"> |
| | | <el-date-picker v-model="form.dispatchDate" value-format="yyyy-MM-dd" placeholder="请输入分派时间"></el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="分派处理说明" prop="dispatchInfo"> |
| | | <el-input v-model="form.dispatchInfo" placeholder="请输入分派处理说明" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="处理人编码(关联system_user)" prop="dealUserId"> |
| | | <el-input v-model="form.dealUserId" placeholder="请输入处理人编码(关联system_user)" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="处理时间" prop="dealDate"> |
| | | <el-date-picker v-model="form.dealDate" value-format="yyyy-MM-dd" placeholder="请输入处理时间"></el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="处理备注" prop="dealInfo"> |
| | | <el-input v-model="form.dealInfo" placeholder="请输入处理备注" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="处理方式 0指派后处理 1直接回复" prop="dealType"> |
| | | <el-input v-model="form.dealType" placeholder="请输入处理方式 0指派后处理 1直接回复" v-trim/> |
| | | <el-form-item label="情况说明" prop="content"> |
| | | <el-input type="textarea" :rows="4" v-model="form.content" placeholder="请输入情况说明" v-trim /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <!-- --> |
| | | |
| | | </GlobalWindow> |
| | | </template> |
| | | |
| | | <script> |
| | | import BaseOpera from '@/components/base/BaseOpera' |
| | | import GlobalWindow from '@/components/common/GlobalWindow' |
| | | import { Loading } from 'element-ui' |
| | | export default { |
| | | name: 'OperaYwWorkorderWindow', |
| | | extends: BaseOpera, |
| | | components: { GlobalWindow }, |
| | | data () { |
| | | data() { |
| | | return { |
| | | // 表单数据 |
| | | form: { |
| | |
| | | phone: '', |
| | | submitDate: '', |
| | | cateId: '', |
| | | areaType: '', |
| | | areaType: '0', |
| | | code: '', |
| | | dealStatus: '', |
| | | dispatchUserId: '', |
| | |
| | | dealInfo: '', |
| | | dealType: '' |
| | | }, |
| | | loadingInstance: null, |
| | | // 验证规则 |
| | | rules: { |
| | | } |
| | | }, |
| | | uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/uploadBatch', |
| | | fileList: [], |
| | | uploadData: { |
| | | folder: 'HIDDEN_DANGER_FILE' |
| | | }, |
| | | } |
| | | }, |
| | | created () { |
| | | created() { |
| | | this.config({ |
| | | api: '/workorder/ywWorkorder', |
| | | 'field.id': 'id' |
| | | }) |
| | | }, |
| | | 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) { |
| | | this.$message.error('请上传正确的视频/图片格式') |
| | | return false |
| | | } |
| | | 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.param, 'faceImg', file.imgurl) |
| | | // this.$set(this.param, 'faceImgUrl', file.imgurlfull) |
| | | }, |
| | | handleDelImg (i) { |
| | | this.fileList.splice(i, 1) |
| | | }, |
| | | 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> |