客户资料 巡检任务业务

renkang

2025-05-13 0a99001be87811ebb884b8f3f491f48054a22330

 admin/src/views/operation/components/deviceEdit.vue

@@ -1,56 +1,170 @@
<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">
      <el-form-item label="设备编码" prop="code">
        <el-input v-model="param.code" placeholder="请输入" v-trim />
      </el-form-item>
      <el-form-item label="设备名称" prop="name">
        <el-input v-model="param.name" placeholder="请输入" v-trim />
      </el-form-item>
      <el-form-item label="设备型号" prop="">
        <el-input v-model="param.modelNo" placeholder="请输入" v-trim />
      </el-form-item>
      <el-form-item label="设备分类" prop="">
        <el-cascader v-model="param.areaIds" @change="changeSel" placeholder="请选择设备分类" clearable :options="cateList"
          :props="{
            label: 'name',
            value: 'id',
            children: 'childCategoryList'
          }"></el-cascader>
      </el-form-item>
      <el-form-item label="设备管理员" prop="">
        <el-select v-model="param.userId" clearable filterable class="w400">
          <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="">
        <el-input v-model="param.addr" placeholder="请输入" v-trim />

      </el-form-item>
      <el-form-item label="供应商" prop="">
        <el-input v-model="param.company" placeholder="请输入" v-trim />

      </el-form-item>
      <el-form-item label="运维内容" prop="">
        <el-input type="textarea" :rows="4" v-model="param.content" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="设备状态" prop="">
        <el-select v-model="param.status" filterable clearable>
          <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>
      <el-form-item label="照片" prop="">
        <UploadAvatarImage :file="{ 'imgurlfull': param.imgurlfull, 'imgurl': param.imgurl }"
          :uploadData="{ folder: 'projects' }" @uploadSuccess="uploadAvatarSuccess" @uploadEnd="isUploading = false"
          @uploadBegin="isUploading = true" />
      </el-form-item>



      <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>
        </div>
        <div style="width: 31%;">
          <el-form-item label="设备型号" prop="modelNo">
            <el-input v-model="param.modelNo" placeholder="请输入" v-trim />
          </el-form-item>
        </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',
              value: 'id',
              children: 'childCategoryList'
            }"></el-cascader>
          </el-form-item>
        </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>
        </div>
        <div style="width: 31%;">
          <el-form-item label="所在位置" prop="addr">
            <el-input v-model="param.addr" placeholder="请输入" v-trim />
          </el-form-item>
        </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>
        </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>
        </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>

@@ -58,29 +172,138 @@
import GlobalWindow from '@/components/common/GlobalWindow'
import UploadAvatarImage from '@/components/common/UploadAvatarImage'
import { fetchList } from '@/api/business/category'
import { create, updateById } from '@/api/Inspection/device'
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() {
    return {
      isShowModal: false,
      subLoading: false,
      param: {},
      cateList: [],
      rules: {
        name: [{ required: true, message: '请输入' }],
        code: [{ required: true, message: '请输入' }]
      param: {
        code: '',
        name: '',
        modelNo: '',
        cateIds: '',
        userId: '',
        addr: '',
        projectId: '',
        rooms: [],
        buildingId: '',
        floorId: '',
        roomId: '',
        
        supplier: '',
        buyDate: '',
        content: '',
        supplierLinker: '',
        supplierPhone: '',
        maintenanceUserId: '',
        maintenanceOverDate: '',
        maintenanceContent: '',
        status: 0,
        multifileList: []
      },
      staffList: []

      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()
  },
  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) => {
@@ -88,16 +311,46 @@
          let fn = param.id ? updateById : create
          this.subLoading = true
          fn(param).then(res => {
            if (res.code == 200) {
              this.subLoading = false
              this.$emit('success')
              Message.success('保存成功')
              this.close()
            }
            this.subLoading = false
            this.$emit('success')
            Message.success('保存成功')
            this.close()
          }).catch(() => {
            this.subLoading = false
          })
        }
      })
    },
    getDetail(id) {
      detailById(id).then(res => {
        this.param = res
        this.param.rooms = [res.projectId, res.buildingId, res.floorId, res.roomId]
        console.log(this.param.rooms)
        if (res.multifileList && res.multifileList.length > 0) {
          this.param.multifileList = res.multifileList.map(item => {
            return {
              ...item,
              createUserName: item.userName,
              createTime: item.createDate
            }
          })
        }
        this.changeProject()
        this.getHouseTree()
        const cateId = this.param.cateId || ''
        setTimeout(() => {
          if (cateId) {
            this.cateList.forEach(item => {
              if (item.childCategoryList) {
                item.childCategoryList.forEach(item2 => {
                  if (item2.id == cateId) {
                    this.$set(this.param, 'cateIds', [item.id, item2.id])
                  }
                })
              }
            })
          }
        },1000)
      })
    },
    getStaff() {
@@ -117,14 +370,14 @@
    },
    changeSel(e) {
      if (e && e.length == 2) {
        this.$set(this.param, 'areaId', e[1])
        this.$set(this.param, 'cateId', e[1])
      } else {
        this.$set(this.param, 'areaId', '')
        this.$set(this.param, 'cateId', '')
      }
    },
    uploadAvatarSuccess(file) {
      this.$set(this.param, 'imgurl', file.imgurl)
      this.$set(this.param, 'imgurlfull', file.imgurlfull)
      this.$set(this.param, 'fileUrl', file.imgurl)
      this.$set(this.param, 'fileFullUrl', file.imgurlfull)
    },
    close() {
      this.isShowModal = false
@@ -132,4 +385,17 @@
    }
  }
}
</script>
</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>