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="primary" @click="backToList">返回</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24" class="title">模具基本信息</el-col>
    <el-col :span="24" class="main">
      <el-col :span="6" class="detail">
        模具信息编号：
        <span class="info">{{mould.typeNumber}}</span>
      </el-col>
      <el-col :span="6" class="detail">
        模具名称：
        <span class="info">{{mould.name}}</span>
      </el-col>
      <el-col :span="6" class="detail">
        模次寿命：
        <span class="info">{{mould.lifetime}}</span>
      </el-col>
      <el-col :span="6" class="detail">
        初始模次：
        <span class="info">{{mould.initial}}</span>
      </el-col>
      <el-col :span="6" class="detail">
        对应RFID码：
        <span class="info">{{mould.RFIDcode}}</span>
      </el-col>
      <el-col :span="6" class="detail">
        云模盒编号：
        <span class="info">{{mould.mouldNumber}}</span>
      </el-col>
      <el-col :span="12" class="detail">
        所属项目：
        <span class="info">{{mould.project}}</span>
      </el-col>
      <el-col :span="12" class="detail">
        生产厂家：
        <span class="info">{{mould.manufacturer}}</span>
      </el-col>
    </el-col>

    <el-col :span="24" class="title">文档资料</el-col>
    <el-col :span="24">
      <el-tabs v-model="activePage" @tab-click="handleClick">
        <el-tab-pane label="模具文档" name="0">
          <el-table
            :data="documents"
            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="size" label="大小" width="200" sortable></el-table-column>
            <el-table-column prop="uploader" label="上传者" width="200" sortable></el-table-column>
            <el-table-column prop="uploadTime" label="上传时间" width="200" sortable></el-table-column>
            <el-table-column label="状态" width="200" sortable>
              <template slot-scope="scope">
                <span v-if="scope.row.state == 0">需要</span>
                <span v-else>不需要</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="220" sortable>
              <el-button size="small">浏览</el-button>
              <el-button size="small">下载</el-button>
              <el-button size="small" type="danger">删除</el-button>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <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-tab-pane label="模具报废" name="5">模具报废</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="文档名称" width="400" sortable></el-table-column>
      <el-table-column label="操作" width="400" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.operations == 0">浏览</span>
          <span v-else-if="scope.row.operations == 1">下载</span>
          <span v-else>删除</span>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="时间" width="400" sortable></el-table-column>
    </el-table>
  </section>
</template>

<script>
import util from "../../common/js/util";
export default {
  data() {
    return {
      //临时数据
      mould: {
        typeNumber: "MUJU002",
        name: "墨模具测试",
        project: "墨盒项目",
        client: "南京海市蜃楼有限公司",
        manufacturer: "南京江宁制造局",
        mouldNumber: "MOHE0023",
        lifetime: "1年",
        initial: "36",
        RFIDcode: "RFID1234",
        blueprint: true,
        BOMtable: true,
        partList: false,
        standard: false
      },
      documents: [
        {
          name: "墨盒产品验证文档.word",
          size: "100KB",
          uploader: "张富贵",
          uploadTime: "2019-07-24",
          state: 0
        }
      ],
      operations: [
        {
          name: "王多银",
          document: "墨盒产品验证文档.word",
          operation: 0,
          time: "时间"
        }
      ],
      listLoading: false,
      activePage: 0
    };
  },
  methods: {
    backToList() {
      this.$router.push("/moldList");
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  created() {},
  mounted() {
    var mouldId = this.$route.params.id; //传到当前页面的模具编号
  }
};
</script>

<style scoped>
.title {
  padding-left: 10px;
  padding-bottom: 0px;
  margin: 20px 0;
  font-size: 16px;
  line-height: 16px;
  border-left: 1px blue solid;
}
.info {
  color: grey;
}
.main {
  padding-left: 10px;
}
.detail {
  margin-bottom: 20px;
}
</style>