| | |
| | | <template> |
| | | <GlobalWindow :title="param.id ? '编辑设备' : '新建设备'" :confirmWorking="subLoading" :visible.sync="isShowModal" |
| | | width="600px" @close="close" @confirm="handleSub"> |
| | | width="100%" @close="close" @confirm="handleSub"> |
| | | <el-form :model="param" ref="paramRef" :rules="rules"> |
| | | <div style="width: 100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 20px; box-sizing: border-box;"> |
| | | <div class="title">基础信息</div> |
| | | <div style="width: 31%;"> |
| | | <el-form-item label="设备编码" prop="code"> |
| | | <el-input v-model="param.code" placeholder="请输入" v-trim /> |
| | | </el-form-item> |
| | | </div> |
| | | <div style="width: 31%;"> |
| | | <el-form-item label="设备名称" prop="name"> |
| | | <el-input v-model="param.name" placeholder="请输入" v-trim /> |
| | | </el-form-item> |
| | | <el-form-item label="设备型号" prop=""> |
| | | </div> |
| | | <div style="width: 31%;"> |
| | | <el-form-item label="设备型号" prop="modelNo"> |
| | | <el-input v-model="param.modelNo" placeholder="请输入" v-trim /> |
| | | </el-form-item> |
| | | <el-form-item label="设备分类" prop="cateId"> |
| | | </div> |
| | | <div style="width: 31%;"> |
| | | <el-form-item label="设备分类" prop="cateIds"> |
| | | <el-cascader v-model="param.cateIds" @change="changeSel" placeholder="请选择设备分类" clearable :options="cateList" |
| | | :props="{ |
| | | label: 'name', |
| | |
| | | children: 'childCategoryList' |
| | | }"></el-cascader> |
| | | </el-form-item> |
| | | <el-form-item label="设备管理员" prop=""> |
| | | </div> |
| | | <div style="width: 31%;"> |
| | | <el-form-item label="设备管理员" prop="userId"> |
| | | <el-select v-model="param.userId" clearable filterable> |
| | | <el-option v-for="item in staffList" :label="item.realname" :value="item.id"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="所在位置" prop=""> |
| | | </div> |
| | | <div style="width: 31%;"> |
| | | <el-form-item label="所在位置" prop="addr"> |
| | | <el-input v-model="param.addr" placeholder="请输入" v-trim /> |
| | | |
| | | </el-form-item> |
| | | <el-form-item label="供应商" prop=""> |
| | | <el-input v-model="param.supplier" placeholder="请输入" v-trim /> |
| | | </div> |
| | | <div style="width: 31%;"> |
| | | <el-form-item label="所属项目" prop="projectId"> |
| | | <el-select v-model="param.projectId" @change="changeProject" filterable> |
| | | <el-option v-for="item in projectList" :label="item.name" :value="item.id"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="运维内容" prop=""> |
| | | <el-input type="textarea" :rows="4" v-model="param.content" placeholder="请输入" /> |
| | | </div> |
| | | <div style="width: 31%;"> |
| | | <el-form-item label="关联房源" prop="rooms"> |
| | | <el-cascader v-model="param.rooms" :disabled="!param.projectId" ref="cascader" @change="getHouseVal" placeholder="请选择关联房源" :options="houseList" |
| | | :props="{ |
| | | label: 'name', |
| | | value: 'id', |
| | | children: 'projectDataVOList' |
| | | }"></el-cascader> |
| | | </el-form-item> |
| | | <el-form-item label="设备状态" prop=""> |
| | | </div> |
| | | <div style="width: 31%;"> |
| | | <el-form-item label="购入时间" prop="buyDate"> |
| | | <el-date-picker |
| | | v-model="param.buyDate" |
| | | type="date" |
| | | value-format="yyyy-MM-dd" |
| | | placeholder="选择日期"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | </div> |
| | | <div style="width: 31%;"> |
| | | <el-form-item label="设备状态" prop="status"> |
| | | <el-select v-model="param.status" filterable> |
| | | <el-option :value="0" label="正常"></el-option> |
| | | <el-option :value="1" label="损坏"></el-option> |
| | | <el-option :value="2" label="报废"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </div> |
| | | <div style="width: 100%;"> |
| | | <el-form-item label="运维内容" prop="content"> |
| | | <el-input type="textarea" :rows="4" v-model="param.content" placeholder="请输入" /> |
| | | </el-form-item> |
| | | </div> |
| | | <div style="width: 100%;"> |
| | | <el-form-item label="照片" prop=""> |
| | | <UploadAvatarImage :file="{ 'imgurlfull': param.fileFullUrl, 'imgurl': param.fileUrl }" |
| | | :uploadData="{ folder: 'ywDevice/' }" @uploadSuccess="uploadAvatarSuccess" @uploadEnd="isUploading = false" |
| | | @uploadBegin="isUploading = true" /> |
| | | <div style="width: 100%; height: 40px;"></div> |
| | | </el-form-item> |
| | | </div> |
| | | <div style="width: 100%;"> |
| | | <el-form-item label="附件" prop="multifileList"> |
| | | <div style="display: flex; flex-direction: column; align-items: flex-start;"> |
| | | <el-button type="text" @click="$refs.uploadFile.click()">+添加附件</el-button> |
| | | <el-table |
| | | :data="param.multifileList" |
| | | border |
| | | style="width: 100%"> |
| | | <el-table-column |
| | | prop="name" |
| | | label="附件名称"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="createUserName" |
| | | label="操作人"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="createTime" |
| | | label="操作时间"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="操作"> |
| | | <template slot-scope="scope"> |
| | | <el-button type="text" @click="deleFile(scope.$index)">删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </el-form-item> |
| | | </div> |
| | | |
| | | <div class="title">供应商信息</div> |
| | | <div style="width: 31%;"> |
| | | <el-form-item label="供应商" prop="supplier"> |
| | | <el-input v-model="param.supplier" placeholder="请输入" v-trim /> |
| | | </el-form-item> |
| | | </div> |
| | | <div style="width: 31%;"> |
| | | <el-form-item label="联系人" prop="supplierLinker"> |
| | | <el-input v-model="param.supplierLinker" placeholder="请输入" v-trim /> |
| | | </el-form-item> |
| | | </div> |
| | | <div style="width: 31%;"> |
| | | <el-form-item label="联系方式" prop="supplierPhone"> |
| | | <el-input v-model="param.supplierPhone" placeholder="请输入" v-trim /> |
| | | </el-form-item> |
| | | </div> |
| | | |
| | | <div class="title">维保信息</div> |
| | | <div style="width: 31%;"> |
| | | <el-form-item label="维保负责人" prop="maintenanceUserId"> |
| | | <el-select v-model="param.maintenanceUserId" clearable filterable> |
| | | <el-option v-for="item in staffList" :label="item.realname" :value="item.id"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </div> |
| | | <div style="width: 31%;"> |
| | | <el-form-item label="维保到期日" prop="maintenanceOverDate"> |
| | | <el-date-picker |
| | | v-model="param.maintenanceOverDate" |
| | | type="date" |
| | | value-format="yyyy-MM-dd" |
| | | placeholder="选择日期"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | </div> |
| | | <div style="width: 31%;"></div> |
| | | <div style="width: 100%;"> |
| | | <el-form-item label="维保说明" prop="maintenanceContent"> |
| | | <el-input v-model="param.maintenanceContent" type="textarea" placeholder="请输入" v-trim /> |
| | | </el-form-item> |
| | | </div> |
| | | </div> |
| | | </el-form> |
| | | <input type="file" ref="uploadFile" style="position: fixed; top: -20px; left: 0;" @change="getFile" /> |
| | | </GlobalWindow> |
| | | </template> |
| | | |
| | |
| | | import { fetchList } from '@/api/business/category' |
| | | import { create, updateById, detailById } from '@/api/Inspection/device' |
| | | import { getUserList } from '@/api/system/user' |
| | | import { Message } from 'element-ui' |
| | | import { uploadBatch } from '@/api/system/common' |
| | | import { getProjectList, tree } from '@/api/project/ywProject' |
| | | import { Loading, Message } from 'element-ui' |
| | | import { mapState } from 'vuex' |
| | | export default { |
| | | components: { GlobalWindow, UploadAvatarImage }, |
| | | data() { |
| | |
| | | isShowModal: false, |
| | | subLoading: false, |
| | | param: { |
| | | status: 0 |
| | | }, |
| | | cateList: [], |
| | | rules: { |
| | | name: [{ required: true, message: '请输入' }], |
| | | code: [{ required: true, message: '请输入' }], |
| | | cateId: [{ required: true, message: '请选择' }], |
| | | }, |
| | | staffList: [] |
| | | code: '', |
| | | name: '', |
| | | modelNo: '', |
| | | cateIds: '', |
| | | userId: '', |
| | | addr: '', |
| | | projectId: '', |
| | | rooms: [], |
| | | buildingId: '', |
| | | floorId: '', |
| | | roomId: '', |
| | | |
| | | supplier: [], |
| | | buyDate: '', |
| | | content: '', |
| | | supplierLinker: '', |
| | | supplierPhone: '', |
| | | maintenanceUserId: '', |
| | | maintenanceOverDate: '', |
| | | maintenanceContent: '', |
| | | status: 0, |
| | | multifileList: [] |
| | | }, |
| | | rules: { |
| | | name: [{ required: true, message: '请输入', trigger: 'blur' }], |
| | | code: [{ required: true, message: '请输入', trigger: 'blur' }], |
| | | cateId: [{ required: true, message: '请选择', trigger: 'blur' }], |
| | | projectId: [{ required: true, message: '请选择', trigger: 'blur' }], |
| | | rooms: [{ required: true, message: '请选择', trigger: 'blur' }] |
| | | }, |
| | | loadings: false, |
| | | cateList: [], |
| | | houseList: [], |
| | | staffList: [], |
| | | projectList: [] |
| | | } |
| | | }, |
| | | computed: { |
| | | ...mapState(['userInfo']) |
| | | }, |
| | | created() { |
| | | this.initData() |
| | | this.getProjectLists() |
| | | console.log(this.userInfo) |
| | | }, |
| | | methods: { |
| | | getHouseVal(e) { |
| | | this.param.buildingId = e[1] |
| | | this.param.floorId = e[2] |
| | | this.param.roomId = e[3] |
| | | }, |
| | | changeProject(e) { |
| | | this.getHouseTree() |
| | | }, |
| | | getHouseTree() { |
| | | tree({ |
| | | projectId: this.param.projectId |
| | | }).then(res => { |
| | | this.addParamToArray(res) |
| | | this.houseList = res |
| | | }) |
| | | }, |
| | | addParamToArray(arr) { |
| | | for (let i = 0; i < arr.length; i++) { |
| | | const currentItem = arr[i].projectDataVOList |
| | | if (currentItem && currentItem.length >= 0) { |
| | | currentItem.forEach(item => { |
| | | if (item.lv === 3) { |
| | | delete item.projectDataVOList |
| | | } |
| | | }) |
| | | } |
| | | if (currentItem && currentItem.length > 0) { |
| | | this.addParamToArray(currentItem) |
| | | } |
| | | } |
| | | }, |
| | | deleFile(index) { |
| | | this.param.multifileList.splice(index, 1) |
| | | }, |
| | | // 获取项目 |
| | | getProjectLists() { |
| | | getProjectList({}) |
| | | .then(res => { |
| | | this.projectList = res |
| | | }) |
| | | }, |
| | | // 上传附件 |
| | | getFile(e) { |
| | | this.loadings = Loading.service({ |
| | | lock: true, |
| | | text: 'Loading', |
| | | spinner: 'el-icon-loading', |
| | | background: 'rgba(0, 0, 0, 0.7)' |
| | | }) |
| | | let formDate = new FormData() |
| | | formDate.append('folder', 'YW_DEVICE') |
| | | formDate.append('file', e.target.files[0]) |
| | | uploadBatch(formDate) |
| | | .then(res => { |
| | | this.param.multifileList.push({ ...res[0], fileurl: res[0].imgaddr, name: res[0].originname, createUserName: this.userInfo.realname, createTime: this.getDate() }) |
| | | }) |
| | | .finally(() => { |
| | | e.target.files = null |
| | | this.loadings.close() |
| | | }) |
| | | }, |
| | | getDate() { |
| | | const currentDate = new Date(); |
| | | |
| | | const year = currentDate.getFullYear(); // 获取当前年份 |
| | | const month = currentDate.getMonth() + 1; // 获取当前月份 (0-11,所以需要 +1) |
| | | const day = currentDate.getDate(); // 获取当前日期 |
| | | const hours = currentDate.getHours(); // 获取当前小时 |
| | | const minutes = currentDate.getMinutes(); // 获取当前分钟 |
| | | const seconds = currentDate.getSeconds(); // 获取当前秒钟 |
| | | |
| | | return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day} ` |
| | | + `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`; |
| | | }, |
| | | handleSub() { |
| | | const { param, subLoading } = this |
| | | this.$refs['paramRef'].validate((valid) => { |
| | |
| | | getDetail(id) { |
| | | detailById(id).then(res => { |
| | | this.param = res |
| | | this.param.rooms = [res.projectId, res.buildingId, res.floorId, res.roomId] |
| | | this.param.multifileList = res.multifileList.map(item => { |
| | | return { |
| | | ...item, |
| | | createUserName: item.userName, |
| | | createTime: item.createDate |
| | | } |
| | | }) |
| | | this.getHouseTree() |
| | | const cateId = this.param.cateId || '' |
| | | setTimeout(() => { |
| | | if (cateId) { |
| | |
| | | item.childCategoryList.forEach(item2 => { |
| | | if (item2.id == cateId) { |
| | | this.$set(this.param, 'cateIds', [item.id, item2.id]) |
| | | console.log('cateId', this.form) |
| | | } |
| | | }) |
| | | } |
| | |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | @import '@/assets/style/variables.scss'; |
| | | .title { |
| | | width: 100%; |
| | | font-weight: 500; |
| | | font-size: 18px; |
| | | color: $primary-color; |
| | | margin-bottom: 10px; |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | </style> |