yunsu/ys_vue/src/views/mold/moldDetail.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="backToList" icon="el-icon-back" class="back">返回</el-button>
        </el-form-item>
        <el-form-item class="divLine"></el-form-item>
        <el-form-item>
          <span class="projectTitle">{{moldDetail.modelName}}</span>
        </el-form-item>
        <el-form-item class="state">
          当前状态：
          <a style="color: #409EFF; cursor: pointer" @click="toDetection">运行</a>
          <span class="tips">（点击查看运行状态）</span>
        </el-form-item>
      </el-form>
    </el-col>

    <!-- 主区域 -->
    <el-col :span="24" :style="allDetail">
      <el-col :span="24" class="title">
        模具基本信息
        <i class="el-icon-edit editDetail"></i>
      </el-col>
      <el-col :span="24" class="main">
        <el-col :span="6" class="detail">
          模具名称：
          <span class="info">{{moldDetail.modelName}}</span>
        </el-col>
        <el-col :span="6" class="detail">
          模具编号：
          <span class="info">{{moldDetail.modelNo}}</span>
        </el-col>
        <el-col :span="6" class="detail">
          云模盒编号：
          <span class="info">{{moldDetail.equipmentNo}}</span>
        </el-col>
        <el-col :span="6" class="detail">
          设备电量：
          <span class="info">{{moldDetail.hillNumber}}</span>
        </el-col>
        <el-col :span="6" class="detail">
          倒计时：
          <span class="info">{{moldDetail.ocCycle}}</span>
        </el-col>
        <el-col :span="6" class="detail">
          初始模次：
          <span class="info">{{moldDetail.initialModulus}}</span>
        </el-col>
        <el-col :span="6" class="detail">
          对应RFID码：
          <span class="info">{{moldDetail.rfid}}</span>
        </el-col>
        <el-col :span="6" class="detail">
          穴数：
          <span class="info">N/A</span>
        </el-col>
        <el-col :span="6" class="detail">
          模次寿命：
          <span class="info">{{moldDetail.settingLife}}</span>
        </el-col>
        <el-col :span="12" class="detail">
          所属项目：
          <span class="info">{{moldDetail.projectName}}</span>
        </el-col>
        <el-col :span="12" class="detail">
          生产方：
          <span class="info">{{moldDetail.factoryName}}</span>
        </el-col>
      </el-col>

      <el-col :span="24" class="title">
        文档资料
        <el-upload
          ref="upload"
          v-show="activeTab != 5"
          action="customize"
          :http-request="uploadFile"
          :show-file-list="false"
          multiple
          :limit="5"
          style="float:right;"
        >
          <el-button size="small" type="primary">上传</el-button>
        </el-upload>
        <el-button
          v-show="activeTab == 5"
          size="small"
          type="primary"
          style="float:right;"
          @click="centerDialog2Visible = true"
        >上传</el-button>
      </el-col>
      <el-col :span="24">
        <el-tabs v-model="activePage" @tab-click="handleClick">
          <!-- 模具文档 -->
          <el-tab-pane label="模具文档" name="0">
            <el-table
              :data="documents.mould"
              highlight-current-row
              v-loading="listLoading"
              style="width: 100%;"
            >
              <el-table-column type="index" width="40"></el-table-column>
              <el-table-column prop="fileName" label="名称" sortable></el-table-column>
              <el-table-column prop="fileSize" label="大小" width="200" sortable></el-table-column>
              <el-table-column prop="uploadtor" label="上传者" width="200" sortable></el-table-column>
              <el-table-column prop="indate" label="上传时间" width="200" sortable></el-table-column>
              <el-table-column label="状态" width="120" sortable>
                <template slot-scope="scope">
                  <span v-if="scope.row.state == -2">生产方审核不通过</span>
                  <span v-else-if="scope.row.state == -1">资产方审核不通过</span>
                  <span v-else-if="scope.row.state == 0">待双方审核</span>
                  <span v-else-if="scope.row.state == 1">待资产方审核</span>
                  <span v-else-if="scope.row.state == 2">待生产方审核</span>
                  <span v-else-if="scope.row.state == 3">审核通过</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" sortable>
                <template slot-scope="scope">
                  <el-button size="small" @click="checkOpen(scope.row.id, scope.row.fileName)">审批</el-button>
                  <a :href="scope.row.fileUrl" :download="scope.row.fileName">
                    <el-button size="small" @click="download(scope.row.id)">下载</el-button>
                  </a>
                  <el-button size="small" @click="deleteFile(scope.row.id)" type="danger">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <!-- 零件文档 -->
          <el-tab-pane label="零件文档" name="1">
            <el-table
              :data="documents.part"
              highlight-current-row
              v-loading="listLoading"
              style="width: 100%;"
            >
              <el-table-column type="index" width="40"></el-table-column>
              <el-table-column prop="fileName" label="名称" sortable></el-table-column>
              <el-table-column prop="fileSize" label="大小" width="200" sortable></el-table-column>
              <el-table-column prop="uploadtor" label="上传者" width="200" sortable></el-table-column>
              <el-table-column prop="indate" label="上传时间" width="200" sortable></el-table-column>
              <el-table-column label="状态" width="120" sortable>
                <template slot-scope="scope">
                  <span v-if="scope.row.state == -2">生产方审核不通过</span>
                  <span v-else-if="scope.row.state == -1">资产方审核不通过</span>
                  <span v-else-if="scope.row.state == 0">待双方审核</span>
                  <span v-else-if="scope.row.state == 1">待资产方审核</span>
                  <span v-else-if="scope.row.state == 2">待生产方审核</span>
                  <span v-else-if="scope.row.state == 3">审核通过</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" sortable>
                <template slot-scope="scope">
                  <el-button size="small" @click="checkOpen(scope.row.id, scope.row.fileName)">审批</el-button>
                  <a :href="scope.row.fileUrl" :download="scope.row.fileName">
                    <el-button size="small" @click="download(scope.row.id)">下载</el-button>
                  </a>
                  <el-button size="small" @click="deleteFile(scope.row.id)" type="danger">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <!-- 试模及验收 -->
          <el-tab-pane label="试模及验收" name="2">
            <el-table
              :data="documents.check"
              highlight-current-row
              v-loading="listLoading"
              style="width: 100%;"
            >
              <el-table-column type="index" width="40"></el-table-column>
              <el-table-column prop="fileName" label="名称" sortable></el-table-column>
              <el-table-column prop="fileSize" label="大小" width="200" sortable></el-table-column>
              <el-table-column prop="uploadtor" label="上传者" width="200" sortable></el-table-column>
              <el-table-column prop="indate" label="上传时间" width="200" sortable></el-table-column>
              <el-table-column label="状态" width="120" sortable>
                <template slot-scope="scope">
                  <span v-if="scope.row.state == -2">生产方审核不通过</span>
                  <span v-else-if="scope.row.state == -1">资产方审核不通过</span>
                  <span v-else-if="scope.row.state == 0">待双方审核</span>
                  <span v-else-if="scope.row.state == 1">待资产方审核</span>
                  <span v-else-if="scope.row.state == 2">待生产方审核</span>
                  <span v-else-if="scope.row.state == 3">审核通过</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" sortable>
                <template slot-scope="scope">
                  <el-button size="small" @click="checkOpen(scope.row.id, scope.row.fileName)">审批</el-button>
                  <a :href="scope.row.fileUrl" :download="scope.row.fileName">
                    <el-button size="small" @click="download(scope.row.id)">下载</el-button>
                  </a>
                  <el-button size="small" @click="deleteFile(scope.row.id)" type="danger">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <!-- 保养方案 -->
          <el-tab-pane label="保养方案" name="3">
            <el-table
              :data="documents.maintain"
              highlight-current-row
              v-loading="listLoading"
              style="width: 100%;"
            >
              <el-table-column type="index" width="40"></el-table-column>
              <el-table-column prop="fileName" label="名称" sortable></el-table-column>
              <el-table-column prop="fileSize" label="大小" width="200" sortable></el-table-column>
              <el-table-column prop="uploadtor" label="上传者" width="200" sortable></el-table-column>
              <el-table-column prop="indate" label="上传时间" width="200" sortable></el-table-column>
              <el-table-column label="状态" width="120" sortable>
                <template slot-scope="scope">
                  <span v-if="scope.row.state == -2">生产方审核不通过</span>
                  <span v-else-if="scope.row.state == -1">资产方审核不通过</span>
                  <span v-else-if="scope.row.state == 0">待双方审核</span>
                  <span v-else-if="scope.row.state == 1">待资产方审核</span>
                  <span v-else-if="scope.row.state == 2">待生产方审核</span>
                  <span v-else-if="scope.row.state == 3">审核通过</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" sortable>
                <template slot-scope="scope">
                  <el-button size="small" @click="checkOpen(scope.row.id, scope.row.fileName)">审批</el-button>
                  <a :href="scope.row.fileUrl" :download="scope.row.fileName">
                    <el-button size="small" @click="download(scope.row.id)">下载</el-button>
                  </a>
                  <el-button size="small" @click="deleteFile(scope.row.id)" type="danger">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <!-- 模具更新 -->
          <el-tab-pane label="模具更新" name="4">
            <el-table
              :data="documents.update"
              highlight-current-row
              v-loading="listLoading"
              style="width: 100%;"
            >
              <el-table-column type="index" width="40"></el-table-column>
              <el-table-column prop="fileName" label="名称" sortable></el-table-column>
              <el-table-column prop="fileSize" label="大小" width="200" sortable></el-table-column>
              <el-table-column prop="uploadtor" label="上传者" width="200" sortable></el-table-column>
              <el-table-column prop="indate" label="上传时间" width="200" sortable></el-table-column>
              <el-table-column label="状态" width="120" sortable>
                <template slot-scope="scope">
                  <span v-if="scope.row.state == -2">生产方审核不通过</span>
                  <span v-else-if="scope.row.state == -1">资产方审核不通过</span>
                  <span v-else-if="scope.row.state == 0">待双方审核</span>
                  <span v-else-if="scope.row.state == 1">待资产方审核</span>
                  <span v-else-if="scope.row.state == 2">待生产方审核</span>
                  <span v-else-if="scope.row.state == 3">审核通过</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" sortable>
                <template slot-scope="scope">
                  <el-button size="small" @click="checkOpen(scope.row.id, scope.row.fileName)">审批</el-button>
                  <a :href="scope.row.fileUrl" :download="scope.row.fileName">
                    <el-button size="small" @click="download(scope.row.id)">下载</el-button>
                  </a>
                  <el-button size="small" @click="deleteFile(scope.row.id)" type="danger">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <!-- 模具报废 -->
          <el-tab-pane label="模具报废" name="5">
            <el-table
              :data="documents.abandon"
              highlight-current-row
              v-loading="listLoading"
              style="width: 100%;"
            >
              <el-table-column type="index" width="40"></el-table-column>
              <el-table-column prop="fileName" label="名称" sortable></el-table-column>
              <el-table-column prop="fileSize" label="大小" width="200" sortable></el-table-column>
              <el-table-column prop="uploadtor" label="上传者" width="200" sortable></el-table-column>
              <el-table-column prop="indate" label="上传时间" width="200" sortable></el-table-column>
              <el-table-column label="状态" width="120" sortable>
                <template slot-scope="scope">
                  <span v-if="scope.row.state == -2">生产方审核不通过</span>
                  <span v-else-if="scope.row.state == -1">资产方审核不通过</span>
                  <span v-else-if="scope.row.state == 0">待双方审核</span>
                  <span v-else-if="scope.row.state == 1">待资产方审核</span>
                  <span v-else-if="scope.row.state == 2">待生产方审核</span>
                  <span v-else-if="scope.row.state == 3">审核通过</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" sortable>
                <template slot-scope="scope">
                  <el-button size="small" @click="checkOpen(scope.row.id, scope.row.fileName)">审批</el-button>
                  <a :href="scope.row.fileUrl" :download="scope.row.fileName">
                    <el-button size="small" @click="download(scope.row.id)">下载</el-button>
                  </a>
                  <el-button size="small" @click="deleteFile(scope.row.id)" type="danger">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>

      <!-- 操作记录 -->
      <el-col :span="24" class="title">操作记录</el-col>
      <el-table
        :data="operations"
        highlight-current-row
        v-loading="listLoading"
        style="width: 100%;"
      >
        <el-table-column type="index" width="40"></el-table-column>
        <el-table-column prop="name" label="姓名" width="400" sortable></el-table-column>
        <el-table-column prop="document" label="文档名称" sortable></el-table-column>
        <el-table-column label="操作" width="400" sortable>
          <template slot-scope="scope">
            <span v-if="scope.row.operation == 0">浏览</span>
            <span v-else-if="scope.row.operation == 1">下载</span>
            <span v-else>删除</span>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="时间" width="400" sortable></el-table-column>
      </el-table>
    </el-col>

    <!-- 审批弹窗 -->
    <el-dialog title="审批" :visible.sync="centerDialogVisible" width="30%" center>
      <span>{{this.activeFileName}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="check(false)">不通过</el-button>
        <el-button type="primary" @click="check(true)">通过</el-button>
      </span>
    </el-dialog>

    <!-- 模具报废上传弹窗 -->
    <el-dialog title="模具报废上传" :visible.sync="centerDialog2Visible" width="30%" center>
      <p>申请单</p>
      <el-upload
        ref="upload1"
        action="customize"
        :http-request="uploadFile"
        :limit="1"
        :auto-upload="false"
      >
        <el-button size="small" type="primary">上传</el-button>
      </el-upload>
      <p>报废单</p>
      <el-upload
        ref="upload2"
        action="customize"
        :http-request="uploadFile"
        :limit="1"
        :auto-upload="false"
      >
        <el-button size="small" type="primary">上传</el-button>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="confirmUpload">确定</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
import util from "../../common/js/util";
export default {
  data() {
    return {
      detailId: this.$route.params.id,
      moldDetail: {},
      documents: {
        mould: [],
        part: [],
        check: [],
        maintain: [],
        update: [],
        abandon: []
      },
      //临时数据
      operations: [
        {
          name: "王多银",
          document: "墨盒产品验证文档.word",
          operation: 0,
          time: "时间"
        }
      ],
      allDetail: {
        overflow: "auto",
        padding: "0px 5px",
        height: 0
      },
      centerDialogVisible: false,
      centerDialog2Visible: false,
      listLoading: false,
      activeTab: 0,
      activePage: 0,
      activeArticleId: null,
      activeFileName: null
    };
  },
  methods: {
    backToList() {
      this.$router.go(-1);
    },
    toDetection() {
      this.$router.push("/detection");
    },
    //标签页面切换时
    handleClick(tab, event) {
      this.activeTab = tab.name;
    },
    //模具详情
    getDetail() {
      this.http.post(
        this.port.mold.moldDetail,
        {
          id: this.detailId
        },
        res => {
          if (res.code == "ok") {
            this.moldDetail = res.data;
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        }
      );
    },
    //获取文档
    getDocument() {
      this.http.post(
        this.port.mold.moldFileListAll,
        {
          mouldId: this.detailId
        },
        res => {
          if (res.code == "ok") {
            this.documents.mould = res.data[0].list;
            this.documents.part = res.data[1].list;
            this.documents.check = res.data[2].list;
            this.documents.maintain = res.data[3].list;
            this.documents.update = res.data[4].list;
            this.documents.abandon = res.data[5].list;
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        }
      );
    },
    //打开审批窗口
    checkOpen(id, name) {
      this.activeArticleId = id;
      this.activeFileName = name;
      this.centerDialogVisible = true;
    },
    //审批文件
    check(adoption) {
      this.http.post(
        this.port.mold.moldFileCheck,
        {
          mouldFileId: this.activeArticleId,
          isPass: adoption ? 1 : 0 //通过为1 不通过为0
        },
        res => {
          if (res.code == "ok") {
            this.$message({
              message: "审批成功",
              type: "success"
            });
            this.getDocument();
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        }
      );
      this.centerDialogVisible = false;
    },
    //下载文件
    download(id) {
      console.log(id + "被下载啦"); //这里应该有下载记录
    },
    //报废文件上传
    confirmUpload() {
      if (
        this.$refs.upload1.uploadFiles.length == 1 &&
        this.$refs.upload2.uploadFiles.length == 1
      ) {
        this.$refs.upload1.submit();
        this.$refs.upload2.submit();
        this.centerDialog2Visible = false;
      } else {
        this.$message({
          message: "必须各上传一个文件",
          type: "error"
        });
      }
    },
    //文件上传
    uploadFile(params) {
      var fileObj = params.file;
      var form = new FormData();
      form.append("file", fileObj);
      form.append("blongType", this.activeTab);
      form.append("mouldId", this.detailId);
      this.http.uploadFile(
        this.port.mold.moldFileUpload,
        form,
        res => {
          if (res.code == "ok") {
            this.$message({
              message: "上传成功",
              type: "success"
            });
            this.$refs.upload.clearFiles();
            this.getDocument();
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        }
      );
    },
    //文件删除
    deleteFile(fileId) {
      this.http.post(
        this.port.mold.moldFileDelete,
        {
          id: fileId
        },
        res => {
          if (res.code == "ok") {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getDocument();
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        }
      );
    }
  },
  created() {
    let height = window.innerHeight;
    this.allDetail.height = height - 170 + "px";
    const that = this;
    window.onresize = function temp() {
      that.allDetail.height = window.innerHeight - 210;
    };
  },
  mounted() {
    this.getDetail();
    this.getDocument();
  }
};
</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;
}

.state {
  float: right;
}

.tips {
  color: #bbb;
}

.title {
  padding-left: 10px;
  padding-bottom: 0px;
  margin: 20px 0;
  font-size: 16px;
  line-height: 24px;
  border-left: 1px #20a0ff solid;
}

.editDetail {
  margin-left: 10px;
  color: #20a0ff;
  cursor: pointer;
}

.info {
  color: grey;
}

.main {
  padding-left: 10px;
}

.detail {
  margin-bottom: 20px;
}

/* .upload-demo {
  position: absolute;
  right: 0;
  top: -5px;
} */
</style>