zhgdyun/src/views/projectFront/towerCrane/devMaintain.vue

<template>
  <!-- 设备维保 -->
  <vue-scroll style="height: 100%">
    <div class="alarmInfo">
      <div class="title whiteBlock">
        <el-form :inline="true" size="medium" class="demo-form-inline">
          <!-- <el-form-item label="设备编号">
            <el-input
              v-model="formInline.user"
              placeholder="请输入设备编号"
            ></el-input>
          </el-form-item> -->
          <el-form-item :label="$t('message.lifter.devName')">
            <el-select
              v-model="devSn"
              :placeholder="
                $t('message.lifter.pleaseSelect') + $t('message.lifter.devName')
              "
              clearable
            >
              <el-option
                :label="item.devName"
                :value="item.devSn"
                v-for="(item, index) in towerList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="维保日期">
            <el-date-picker
              @change="getTime"
              v-model="time"
              type="daterange"
              value-format="yyyy-MM-dd"
              :range-separator="$t('message.lifter.to')"
              :start-placeholder="$t('message.lifter.startDate')"
              :end-placeholder="$t('message.lifter.deadline')"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getMaintenanceList" plain>{{
              $t('message.lifter.demand')
            }}</el-button>
            <el-button type="warning" plain @click="refresh">{{
              $t('message.lifter.refresh')
            }}</el-button>
            <el-button type="primary" @click="addMaintenanceBtn">{{
              $t('message.videoManage.add')
            }}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="content whiteBlock">
        <el-table
          :data="tableData"
          class="tables"
          style="width: 100%"
          height="600px"
        >
          <el-table-column prop="devName" :label="$t('message.lifter.devName')">
          </el-table-column>
          <el-table-column prop="devSn" :label="$t('message.lifter.devNumber')">
          </el-table-column>
          <el-table-column
            prop="maintenanceUnit"
            :label="$t('message.lifter.maintenanceUnit')"
          >
          </el-table-column>
          <el-table-column
            prop="personLiable"
            :label="$t('message.lifter.maintenanceSupervisor')"
          >
          </el-table-column>
          <el-table-column
            prop="maintenanceTime"
            :label="$t('message.lifter.maintenanceTime')"
          >
          </el-table-column>
          <!-- <el-table-column prop="date" :label="$t('message.lifter.reportTime')"> </el-table-column> -->
          <el-table-column
            prop="maintenanceStatus"
            :label="$t('message.lifter.maintenanceState')"
          >
            <template slot-scope="scope">
              {{ scope.row.maintenanceStatus == 1 ? '正常' : '不正常' }}
            </template>
          </el-table-column>
          <el-table-column prop="maintenanceImage" label="维保照片">
            <template slot-scope="scope">
              <img
                :src="fileUrl + scope.row.maintenanceImage"
                style="width: 40px; heigth: auto"
              />
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="maintenanceRecord"
            :label="$t('message.lifter.maintenanceRecord')"
          >
          </el-table-column> -->
          <el-table-column prop="remark" :label="$t('message.lifter.describe')">
          </el-table-column>
        </el-table>
        <el-pagination
          class="pagerBox"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="$store.state.PAGESIZRS"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="Number(total)"
          background
        ></el-pagination>
      </div>

      <el-dialog
        :modal-append-to-body="false"
        title="新增维保信息"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        width="667px"
      >
        <div class="dialog_content">
          <el-form
            :model="maintenanceForm"
            ref="maintenanceForm"
            label-width="120px"
            class="demo-ruleForm"
            :rules="rules"
            size="medium"
          >
            <el-form-item label="维保设备" prop="devSn">
              <el-select
                v-model="maintenanceForm.devSn"
                :placeholder="
                  $t('message.lifter.pleaseSelect') +
                  $t('message.lifter.devName')
                "
                style="width: 100%"
              >
                <el-option
                  :label="item.devName"
                  clearable
                  :value="item.devSn"
                  v-for="(item, index) in towerList"
                  :key="index"
                  style="width: 100%"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="维保后状态" prop="maintenanceStatus">
              <el-select
                v-model="maintenanceForm.maintenanceStatus"
                :placeholder="
                  $t('message.lifter.pleaseSelect') +
                  $t('message.lifter.devName')
                "
                style="width: 100%"
              >
                <el-option label="正常" :value="1"></el-option>
                <el-option label="不正常" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="维保时间" prop="maintenanceTime">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="maintenanceForm.maintenanceTime"
                type="datetime"
                placeholder="选择日期时间"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="维保人" prop="personLiable">
              <el-input
                v-model="maintenanceForm.personLiable"
                placeholder="请输入"
              ></el-input>
              <!-- <el-select
                v-model="maintenanceForm.personLiable"
                :placeholder="
                  $t('message.lifter.pleaseSelect') +
                  $t('message.lifter.devName')
                "
                style="width: 100%"
              >
                <el-option
                  :label="item.workerName"
                  :value="item.id"
                  v-for="(item, index) in managementInfoList"
                  :key="index"
                ></el-option>
              </el-select> -->
            </el-form-item>
            <el-form-item label="维保单位" prop="maintenanceUnit">
              <el-input
                v-model="maintenanceForm.maintenanceUnit"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="remark">
              <el-input
                v-model="maintenanceForm.remark"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="上传图片" prop="maintenanceImage">
              <el-upload
                :action="uploadUrl"
                list-type="picture-card"
                name="files"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
              >
                <img
                  v-if="maintenanceForm.maintenanceImage"
                  :src="fileUrl + maintenanceForm.maintenanceImage"
                  style="width: 100%; height: 100%"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" size="medium"
              >取 消</el-button
            >
            <el-button type="primary" @click="saveBtn" size="medium"
              >确 定</el-button
            >
          </span>
        </div>
      </el-dialog>
    </div>
  </vue-scroll>
</template>
<script>
import {
  getTowerListApi,
  getMaintenanceListApi,
  getManagementInfoListApi,
  addMaintenanceRecordApi
} from '@/assets/js/api/towerCrane'
export default {
  data() {
    return {
      projectSn: '',
      towerList: [],
      devSn: '',
      time: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      uploadUrl: '',
      fileUrl: '',
      dialogVisible: false,
      managementInfoList: [],
      maintenanceForm: {
        devSn: '',
        devType: 1,
        maintenanceTime: '',
        maintenanceStatus: '',
        personLiable: '',
        maintenanceUnit: '',
        remark: '',
        maintenanceImage: ''
      },
      rules: {
        devSn: [{ required: true, message: '请选择设备', trigger: 'change' }],
        maintenanceStatus: [
          {
            required: true,
            message: '请选择设备维保后状态',
            trigger: 'change'
          }
        ],
        maintenanceTime: [
          { required: true, message: '请选择维保时间', trigger: 'change' }
        ],
        personLiable: [
          { required: true, message: '请选择维保人', trigger: 'change' }
        ],
        maintenanceImage: [
          { required: true, message: '请上传图片', trigger: 'change' }
        ]
      },
      maintenanceEndTime: '',
      maintenanceStartTime: '',
      time: [],

    }
  },

  created() {
    this.projectSn = this.$store.state.projectSn
    this.uploadUrl = this.$store.state.UPLOADURL
    this.fileUrl = this.$store.state.FILEURL
    this.getTowerList()
    this.getMaintenanceList()
  },

  methods: {
     //选择时间
     getTime(val) {
      if (val || val.length > 0) {
        this.maintenanceEndTime = val[1];
        this.maintenanceStartTime = val[0];
      } else {
        this.maintenanceEndTime = "";
        this.maintenanceStartTime = "";
      }
    },
    //获取设备下拉
    getTowerList() {
      let data = {
        projectSn: this.projectSn
      }
      getTowerListApi(data).then((res) => {
        if (res.code == 200) {
          this.towerList = res.result
        }
      })
    },

    //获取维保列表
    getMaintenanceList() {
      let data = {
        devType: 1,
        projectSn: this.projectSn,
        devSn: this.devSn,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        maintenanceStartTime: this.maintenanceStartTime,
        maintenanceEndTime: this.maintenanceEndTime,
      }
      getMaintenanceListApi(data).then((res) => {
        if (res.code == 200) {
          this.tableData = res.result.records
          this.total = res.result.total
        }
      })
    },

    //刷新
    refresh() {
      this.devSn = ''
      this.pageNo = 1
      this.pageSize = 10
      this.getMaintenanceList()
      this.time=[]
    },
    //新增按钮
    addMaintenanceBtn() {
      this.dialogVisible = true
      this.getManagementInfoList()
      this.maintenanceForm = {
        devSn: '',
        devType: 1,
        maintenanceTime: '',
        maintenanceStatus: '',
        personLiable: '',
        maintenanceUnit: '',
        remark: '',
        maintenanceImage: ''
      }
      setTimeout(() => {
        this.$refs.maintenanceForm.clearValidate()
      }, 200)
    },
    //关闭弹窗前
    handleClose() {
      this.dialogVisible = false
    },
    // 文件上传成功
    handleAvatarSuccess(file) {
      if (file.data.length > 0) {
        this.maintenanceForm.maintenanceImage = file.data[0].imageUrl
      }
    },

    //获取维保人
    getManagementInfoList() {
      let data = {
        projectSn: this.projectSn
      }
      getManagementInfoListApi(data).then((res) => {
        if (res.code == 200) {
          this.managementInfoList = res.result
        }
      })
    },

    //保存按钮
    saveBtn() {
      this.$refs['maintenanceForm'].validate((valid) => {
        if (valid) {
          let data = this.maintenanceForm
          data.projectSn = this.projectSn
          addMaintenanceRecordApi(data).then((res) => {
            if (res.code == 200) {
              this.dialogVisible = false
              this.getMaintenanceList()
            }
          })
        } else {
          return false
        }
      })
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.getMaintenanceList()
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.getMaintenanceList()
    }
  }
}
</script>

<style lang="less" scoped>
.alarmInfo {
  width: 100%;
  height: 100%;
  .title {
    // background-color: #ffffff;
    padding: 0 20px;
    padding-top: 17px;
    height: 70px;
    box-sizing: border-box;
  }
  .content {
    margin-top: 10px;
    box-sizing: border-box;
    width: 100%;
    height: 720px;
    // background-color: #ffffff;
  }
}
.demo-ruleForm {
  width: 90%;
}
.dialog_content {
  margin: 0 20px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>