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">测试用模具001</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">{{mould.typeNumber}}</span>
                </el-col>
                <el-col :span="6" class="detail">
                    模具编号：
                    <span class="info">{{mould.typeNumber}}</span>
                  </el-col>
                  <el-col :span="12" 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.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="6" 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 :span="12" class="detail">
                    制造方工厂：
                    <span class="info">{{mould.manufacturer}}</span>
                  </el-col>
            </el-col>

            <el-col :span="24" class="title">文档资料
                <el-upload class="upload-demo" 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-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%;height:300px;">
                        <el-table-column type="index" width="40"></el-table-column>
                        <el-table-column prop="name" label="名称" 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="120" 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="300" sortable>
                            <el-button size="small">审批</el-button>
                            <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%;height:300px;">
                <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.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>
        </el-col>
    </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: "时间"
                    }
                ],

                allDetail: {
                    overflow: 'auto',
                    padding: '0px 5px',
                    height: 0
                },
                listLoading: false,
                activePage: 0
            };
        },
        methods: {
            backToList() {
                this.$router.push("/moldList");
            },
            toDetection(){
              this.$router.push("/detection");
            },
            handleClick(tab, event) {
                console.log(tab, event);
            }
        },
        created() {
            let height = window.innerHeight;
            this.allDetail.height = height - 170 + "px";
        },
        mounted() {
            var mouldId = this.$route.params.id; //传到当前页面的模具编号
        }
    };
</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 blue solid;
    }

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

    .info {
        color: grey;
    }

    .main {
        padding-left: 10px;
    }

    .detail {
        margin-bottom: 20px;
    }
</style>