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 class="state" style="float: right;">
          当前状态：
          <span v-if="mouldState == 0">静止</span>
          <span v-else-if="mouldState == 1">运行</span>
          <!-- 因为目前还不知道mouldState的意义 -->
          <span v-else>不明</span>
        </el-form-item>
      </el-form>
    </el-col>
    <!-- v-if="requirement" -->
    <!-- 模具处理 -->
    <el-col :span="24" class="title">模具处理</el-col>
    <el-col :span="6" style="line-height: 32px; border-right: #c3c3c3 1px solid;">
      当前保养状态：
      <span v-if="requirement" style="color: #ff4949;">需要</span>
      <span v-else style="color: black;">正常</span>
      <el-button
        size="small"
        type="primary"
        @click="showMaintenance"
        style="margin-left: 16px;"
      >立即处理</el-button>
    </el-col>
    <el-col :span="4" :offset="2" style="line-height: 32px;">
      云模盒告警：{{warning}}
      <el-button size="small" type="primary" style="margin-left: 16px;">立即处理</el-button>
    </el-col>

    <!-- 操作记录 -->
    <el-col :span="24" class="title">处理记录</el-col>
    <!--列表-->
    <!-- :height="tableHeight" -->

    <!-- <el-tabs v-model="activePage" @tab-click="handleClick">
      <el-tab-pane label="模具保养" name="0">0</el-tab-pane>
      <el-tab-pane label="模具告警" name="1">1</el-tab-pane>
    </el-tabs>-->
    <!-- <el-col :span="24">
      <el-tabs v-model="activePage" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="1">用户管理</el-tab-pane>
        <el-tab-pane label="配置管理" name="2">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="3">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="4">定时任务补偿</el-tab-pane>
      </el-tabs>
    </el-col>-->
    <el-table :data="records" highlight-current-row 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>
        <template slot-scope="scope" v-if="scope.row.fileUrl != null">
          <a
            style="color: #409EFF; cursor: pointer; text-decoration: none;"
            :href="scope.row.fileUrl"
            :download="scope.row.fileName"
          >
            <!-- 大图加载 -->
            <div class="demo-image__preview">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.fileUrl"
                :preview-src-list="scope.row.fileUrl"
              ></el-image>
            </div>
          </a>
        </template>
      </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"
            before-upload="beforeUpload"
          >
            <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,
      //模具状态
      mouldState: 0,
      options: [{ value: "aaa", label: "123" }, { value: "bbb", label: "456" }],
      //记录
      records: [],
      //警告信息
      warning: "低电量、过热",
      //标题栏过滤器
      filters: {
        name: "",
        value: ""
      },
      listLoading: false,
      page: 1,
      size: 20,
      total: 0,
      tableHeight: 0,
      //活跃页面
      activePage: 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();
    },
    //标签页面切换时
    handleClick(tab, event) {
      this.activeTab = tab.name;
      //应该是取得对应的消息
    },
    selsChange: function(sels) {
      this.sels = sels;
    },
    backToDetection() {
      this.$router.go(-1);
    },
    //上传格式和大小限制
    beforeUpload(file) {
      const isJPG = file.type === "image/jpg";
      const isPNG = file.type === "image/jpg";
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isJPG || !isPNG) {
        this.$message.error("上传头像图片只能是 JPG 或 PNG 格式!");
      }
      if (!isLt5M) {
        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;
            this.mouldState = res.data.vo.state;
            this.requirement = res.data.vo.isMaintain == 1;
          } 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();
      } else {
        this.$message({
          message: "必须上传照片",
          type: "error"
        });
      }
    },
    //模具保养
    maintain(params) {
      if (this.type.value != null) {
        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) {
          if (this.action.value != null) {
            return;
          }
          form.append("ways", this.action.value);
        } else {
          if (this.vulnerable.value == null) {
            return;
          }
          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"
              });
              this.maintenanceFormVisible = false;
              this.$refs.upload.clearFiles();
              this.getList();
            } 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>
.title {
  padding-left: 10px;
  padding-bottom: 0px;
  margin: 20px 0;
  font-size: 16px;
  line-height: 24px;
  border-left: 1px #20a0ff solid;
}
.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>