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

<template>
  <!-- 设备维保 -->
  <vue-scroll style="height: 100%">
    <div class="fullHeight">
      <div class="searchBox 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')">
            <!-- pleaseSelect 请选择 -->
            <el-select
              v-model="devSn"
              :placeholder="
                $t('message.lifter.pleaseSelect') + $t('message.lifter.devName')
              "
            >
              <el-option
                v-for="(item, index) in lifterList"
                :key="index"
                :label="item.devName"
                :value="item.devSn"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item :label="$t('message.lifter.alarmTime')">
            <el-date-picker
              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="
                pageNo = 1;
                pageSize = 10;
                getListData();
              "
              plain
              >{{ $t("message.lifter.demand") }}</el-button
            >
            <!-- 刷新 -->
            <el-button type="warning" plain @click="onSubmit">{{
              $t("message.lifter.refresh")
            }}</el-button>
            <!-- 新增 -->
            <el-button type="primary" @click="addBtn">{{
              $t("message.videoManage.add")
            }}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table_wrap 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="maintenanceStatus"
            :label="$t('message.lifter.maintenanceState')"
          >
          <!-- normal正常   abnormalTow不正常 -->
            <template slot-scope="scope">
              {{ scope.row.maintenanceStatus == 1 ? $t('message.lifter.normal') : $t('message.lifter.abnormalTow') }}
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="maintenanceRecord"
            :label="$t('message.lifter.maintenanceRecord')"
          >
          </el-table-column> -->

          <!-- 维保照片 -->
          <el-table-column prop="maintenanceImage" :label="$t('message.lifter.maintenancePhotos')">
            <template slot-scope="scope">
              <!-- <img
                :src="fileUrl + scope.row.maintenanceImage"
                style="width: 40px; heigth: auto"
              /> -->
               <el-image 
                style="width: 40px; heigth: auto"
                :src="fileUrl + scope.row.maintenanceImage" 
                :preview-src-list="[fileUrl + scope.row.maintenanceImage]">
              </el-image>
            </template>
          </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>

      <!-- 新增 -->


      <!-- addMaintenanceInfo 新增维保信息 -->
      <el-dialog
        :modal-append-to-body="false"
        :title="$t('message.lifter.addMaintenanceInfo')"
        :visible.sync="dialogVisible"
        width="667px"
      >
        <div class="dialog_content">
          <el-form
            :model="maintenanceForm"
            ref="maintenanceForm"
            label-width="100px"
            class="demo-ruleForm"
            :rules="rules" size="medium"
          >
            <!-- 维保设备 -->
            <el-form-item :label="$t('message.lifter.maintenanceEquipment')" 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 lifterList"
                  :key="index"
                  style="width: 100%"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 维保后状态 -->
            <el-form-item :label="$t('message.lifter.afterStatus')" prop="maintenanceStatus">
              <el-select
                v-model="maintenanceForm.maintenanceStatus"
                :placeholder="
                  $t('message.lifter.pleaseSelect') +
                  $t('message.lifter.devName')
                "
                style="width: 100%"
              >
                <el-option :label="$t('message.lifter.normal')" :value="1"></el-option>
                <el-option :label="$t('message.lifter.abnormalTow')" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <!-- 维保时间 -->
            <el-form-item :label="$t('message.lifter.maintenanceTime')" prop="maintenanceTime">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="maintenanceForm.maintenanceTime"
                type="datetime"
                :placeholder="$t('message.lifter.selectDateAndTime')"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
            <!-- 维保人 -->
            <el-form-item :label="$t('message.lifter.maintainer')" prop="personLiable">
              <el-input
                v-model="maintenanceForm.personLiable"
                :placeholder="$t('message.lifter.pleaseEnter')"
              ></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="$t('message.lifter.maintenanceUnit')" prop="maintenanceUnit">
              <el-input
                v-model="maintenanceForm.maintenanceUnit"
                :placeholder="$t('message.lifter.pleaseEnter')"
              ></el-input>
            </el-form-item>
            <!-- 描述 -->
            <el-form-item :label="$t('message.lifter.describe')" prop="remark">
              <el-input
                v-model="maintenanceForm.remark"
                :placeholder="$t('message.lifter.pleaseEnter')"
              ></el-input>
            </el-form-item>
            <!-- 上传图片 -->
            <el-form-item :label="$t('message.lifter.uploadPictures')" 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"
              >{{ $t('message.lifter.cancel') }}</el-button
            >
            <!-- 确 定 -->
            <el-button type="primary" @click="saveBtn" size="medium"
              >{{ $t('message.lifter.determine') }}</el-button
            >
          </span>
        </div>
      </el-dialog>
    </div>
  </vue-scroll>
</template>
<script>
import {
  getLifterListApi,
  getMaintenanceListApi,
  getManagementInfoListApi,
  addManagementInfoListApi,
} from "@/assets/js/api/lifter";
export default {
  data() {
    return {
      projectSn: "",
      lifterList: [],
      devSn: "",
      pageNo: 1,
      pageSize: 10,
      total: 0,
      fileUrl: "",
      uploadUrl: "",
      tableData: [],
      dialogVisible: false,
      managementInfoList: [],
      maintenanceForm: {
        devSn: "",
        devType: 2,
        maintenanceStatus: "",
        maintenanceTime: "",
        personLiable: "",
        maintenanceUnit: "",
        remark: "",
        maintenanceImage: "",
      },
      rules: {
        //  pleaseSelectADevice 请选择设备
        devSn: [{ required: true, message: this.$t('message.lifter.pleaseSelectADevice'), trigger: "change" }],
        // afterMaintenanceSta 请选择设备维保后状态
        maintenanceStatus: [
          {
            required: true,
            message: this.$t('message.lifter.afterMaintenanceSta'),
            trigger: "change",
          },
        ],
        // pleaseSelectMainTime  请选择维保时间
        maintenanceTime: [
          { required: true, message: this.$t('message.lifter.pleaseSelectMainTime'), trigger: "change" },
        ],
        // pSelectAMaintainer 请选择维保人
        personLiable: [
          { required: true, message: this.$t('message.lifter.pSelectAMaintainer'), trigger: "change" },
        ],
        // pleaseUploadPictures 请上传图片
        maintenanceImage: [
          { required: true, message: this.$t('message.lifter.pleaseUploadPictures'), trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.uploadUrl = this.$store.state.UPLOADURL;
    this.fileUrl = this.$store.state.FILEURL;
    this.getLifterList();
    this.getListData();
  },

  methods: {
    //获取设备列表下拉
    getLifterList() {
      let data = {
        projectSn: this.projectSn,
      };
      getLifterListApi(data).then((res) => {
        if (res.code == 200) {
          this.lifterList = res.result;
        }
      });
    },

    //获取列表信息
    getListData() {
      let data = {
        devType: 2,
        projectSn: this.projectSn,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        devSn: this.devSn,
      };
      getMaintenanceListApi(data).then((res) => {
        if (res.code == 200) {
          this.tableData = res.result.records;
          this.total = res.result.total;
        }
      });
    },
    //新增按钮
    addBtn() {
      this.dialogVisible = true;
      this.maintenanceForm = {
        devSn: "",
        devType: 2,
        maintenanceStatus: "",
        maintenanceTime: "",
        personLiable: "",
        maintenanceUnit: "",
        remark: "",
        maintenanceImage: "",
      };
      this.getManagementInfoList();
      setTimeout(() => {
        this.$refs.maintenanceForm.clearValidate();
      }, 200);
    },

    //获取维保人
    getManagementInfoList() {
      let data = {
        projectSn: this.projectSn,
      };
      getManagementInfoListApi(data).then((res) => {
        if (res.code == 200) {
          this.managementInfoList = res.result;
        }
      });
    },
    //文件上传成功
    handleAvatarSuccess(file) {
      if (file.data.length > 0) {
        this.maintenanceForm.maintenanceImage = file.data[0].imageUrl;
      }
    },

    //保存
    saveBtn() {
      this.$refs["maintenanceForm"].validate((valid) => {
        if (valid) {
          let data = this.maintenanceForm;
          data.projectSn = this.projectSn;
          addManagementInfoListApi(data).then((res) => {
            if (res.code == 200) {
              this.dialogVisible = false;
              this.getListData();
            }
          });
        } else {
          return false;
        }
      });
    },

    //刷新
    onSubmit() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.devSn = "";
      this.getListData();
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.getListData();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getListData();
    },
  },
};
</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;
  // }
// }
.dialog-footer{
    display: flex;
    justify-content: flex-end;
}
.dialog_content{
  margin: 0 20px;
}
</style>