yunsu/ys_vue/src/views/detection/maintenance.vue

<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-button type="text" @click="backToDetection" icon="el-icon-back" class="back">返回</el-button>
        </el-form-item>
        <el-form-item class="divLine"></el-form-item>
        <el-form-item>{{mouldName}}</el-form-item>
        <!-- <el-form-item style="float:right;">
          保养提醒：
          <el-switch v-model="prompt" active-color="#ff4949"></el-switch>
        </el-form-item>-->
        <el-form-item style="float: right">
          当前保养状态：
          <span style="color: #ff4949; margin-right: 16px;">需要</span>
          <el-button size="small" type="primary" v-if="requirement" @click="showMaintenance">立即处理</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table
      :data="records"
      highlight-current-row
      :height="tableHeight"
      v-loading="listLoading"
      style="width: 100%;"
    >
      <el-table-column type="index" width="60"></el-table-column>
      <el-table-column prop="maintainUserName" label="保养人" width="100" sortable></el-table-column>
      <el-table-column prop="maintainType" label="保养方案" sortable></el-table-column>
      <el-table-column prop="fileName" label="保养照片" width="200" sortable></el-table-column>
      <el-table-column prop="indate" label="关闭时间" width="200" sortable></el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[20 , 50 , 80 , 100 , 200]"
        :page-size="20"
        layout="total, sizes, prev, pager, next"
        :total="total"
        style="float:right;"
      ></el-pagination>
    </el-col>

    <!--新增界面-->
    <el-dialog
      title="处理保养"
      v-if="maintenanceFormVisible"
      :visible.sync="maintenanceFormVisible"
      :close-on-click-modal="false"
      customClass="customWidth"
    >
      <el-form
        :model="maintenanceForm"
        label-width="100px"
        :rules="formRules"
        ref="addForm"
        :inline="true"
        class="demo-form-inline"
      >
        <el-form-item label="保养类型" prop="type">
          <!-- 保养类型选择 -->
          <el-select v-model="type.value" filterable placeholder="请选择保养类型" style="width:202px">
            <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 保养类型为1时 选择易损件ID -->
        <el-form-item v-if="type.value == 1" label="选择易损件" prop="vulnerable">
          <el-select
            v-model="vulnerable.value"
            clearable
            filterable
            placeholder="请选择易损件"
            style="width:202px"
          >
            <el-option
              v-for="item in vulnerable"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 保养类型为0时 选择保养动作 -->
        <el-form-item v-else label="选择动作" prop="action">
          <el-select
            v-model="action.value"
            filterable
            placeholder="请选择动作"
            style="width:202px"
          >
            <el-option
              v-for="item in action"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择照片">
          <el-upload
            ref="upload"
            action="customize"
            :http-request="maintain"
            :limit="1"
            :auto-upload="false"
          >
            <el-button size="small" type="primary">上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="maintenanceFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="maintainConfirm" :loading="maintenanceLoading">立即处理</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import util from "../../common/js/util";
export default {
  data() {
    return {
      //本页模具ID
      mouldId: null,
      //模具名字
      mouldName: null,
      options: [{ value: "aaa", label: "123" }, { value: "bbb", label: "456" }],
      //记录
      records: [],
      //标题栏过滤器
      filters: {
        name: "",
        value: ""
      },
      listLoading: false,
      page: 1,
      size: 20,
      total: 0,
      tableHeight: 0,
      formRules: {},
      //保养界面 种类
      type: [{ label: "动作", value: 0 }, { label: "易损件", value: 1 }],
      //保养界面 动作
      action: [{ label: "喷漆", value: 0 }, { label: "检查", value: 1 }],
      //易损件
      vulnerable: [
        { label: "易损件1", value: 0 },
        { label: "易损件12450", value: 1 },
        { label: "易损件114514", value: 2 }
      ],
      //是否需要保养 提示
      requirement: true,
      prompt: true,
      //保养详情界面显示
      maintenanceFormVisible: false,
      maintenanceLoading: false,
      //保养详情界面数据
      maintenanceForm: {
        username: "",
        account: "",
        mobile: "",
        teamName: "",
        companyId: "",
        roleType: "",
        flag: 0
      },
      imageUrl: ""
    };
  },
  methods: {
    //分页
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.size = val;
      this.getList();
    },
    selsChange: function(sels) {
      this.sels = sels;
    },
    backToDetection() {
      this.$router.go(-1);
    },
    beforeUpload(file) {
      const isJPG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //显示新增界面
    showMaintenance: function() {
      this.maintenanceFormVisible = true;
    },
    //获取记录
    getList() {
      this.listLoading = true;
      this.http.post(
        this.port.mold.moldMaintainList,
        { mouldId: this.mouldId, pageSize: this.size, pageNum: this.page },
        res => {
          this.listLoading = false;
          if (res.code == "ok") {
            this.records = res.data.list;
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.listLoading = false;
          this.$message({
            message: error,
            type: "error"
          });
        }
      );
    },
    //模具详情 获取模具名字用的
    getDetail() {
      this.http.post(
        this.port.mold.moldDetail,
        {
          id: this.mouldId
        },
        res => {
          if (res.code == "ok") {
            this.mouldName = res.data.vo.modelName;
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        }
      );
    },
    //模具保养的按钮按下之后（关闭之后也要清理文件但是还没写）
    maintainConfirm() {
      if (this.$refs.upload.uploadFiles.length == 1) {
        this.$refs.upload.submit();
        this.$refs.upload.clearFiles();
      } else {
        this.$message({
          message: "必须上传照片",
          type: "error"
        });
      }
    },
    //模具保养
    maintain(params) {
      var fileObj = params.file;
      var form = new FormData();
      form.append("file", fileObj);
      form.append("mouldId", this.mouldId);
      form.append("maintainType", this.type.value);
      if (this.type.value == 0) {
        form.append("ways", this.action.value);
      } else {
        form.append("ways", this.vulnerable.value); //后面应该换成易损件的ID
      }
      this.http.uploadFile(
        this.port.mold.moldMaintain,
        form,
        res => {
          if (res.code == "ok") {
            this.$message({
              message: "保养完成",
              type: "success"
            });
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.listLoading = false;
          this.$message({
            message: error,
            type: "error"
          });
        }
      );
    }
  },
  created() {
    let height = window.innerHeight;
    this.tableHeight = height - 260;
  },
  mounted() {
    this.mouldId = this.$route.params.id; //传到当前页面的模具编号
    // this.getList();
    this.getDetail();
  }
};
</script>

<style scoped>
.toolbar .el-form-item {
  font-size: 14px;
  vertical-align: middle;
}
.back {
  font-size: 16px;
}
.divLine {
  width: 2px;
  background: #c3c3c3;
  height: 100%;
}

.projectTitle {
  font-size: 18px;
  color: #333;
}
</style>