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: #999999; cursor: pointer" @click="toDetection" v-if="moldDetail.state == 0">静止</a>
                <a style="color: #00CD66; cursor: pointer" @click="toDetection" v-if="moldDetail.state == 1">运行</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" v-if="user.id == moldDetail.managerId || user.id == moldDetail.creatorId" @click="edit"></i>
        </el-col>

        <el-col :span="24" class="main">
            <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.diffTime}}</span>
            </el-col>
            <el-col :span="6" class="detail">
                初始模次：
                <span class="info">{{moldDetail.initialModulus}}</span>
            </el-col>
            <el-col :span="6" class="detail">
                模次寿命：
                <span class="info">{{moldDetail.settingLife}}</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">{{moldDetail.waterGap}}</span>
            </el-col>
            <el-col :span="12" class="detail">
                所属项目：
                <span class="info">{{moldDetail.projectName}}</span>
            </el-col>
            <el-col :span="24" class="detail">
                生产方：
                <!-- <span class="info" v-for="(item, index) in customCompany">
                    {{item.companyName}}
                    <span v-if="index != customCompany.length-1">、</span>
                </span> -->
                <span class="info">{{moldDetail.produceCompany}}</span>
            </el-col>
            <el-col :span="24" class="detail">
                生产方地址：
                <!-- <span class="info" v-for="(item, index) in customCompany">
                    {{item.companyName}}
                    <span v-if="index != customCompany.length-1">、</span>
                </span> -->
                <span class="info">{{moldDetail.area}}</span>
            </el-col>
        </el-col>

        <el-col :span="24" class="title">
            文档资料

            <!-- 上传 模具0 零件1 时 -->
            <el-dropdown trigger="click" style="float:right;" v-show="activeTab == 0 && update == 1">
                <el-button size="small" type="primary">
                    上传
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-upload ref="upload" action="customize" :http-request="uploadFile" :show-file-list="false" multiple :limit="5" style="float:right;">
                        <el-dropdown-item @click.native="fileType = 0">2D图档</el-dropdown-item>
                        <el-dropdown-item @click.native="fileType = 1">3D图档</el-dropdown-item>
                    </el-upload>
                </el-dropdown-menu>
            </el-dropdown>
            
            <!-- 上传 模具0 零件1 时 -->
            <el-button size="small" type="primary" style="float:right;" v-show="activeTab == 1 && update == 1" @click.native="fileType = 0;centerDialog4Visible = true;">
                上传
            </el-button>

            <!-- 零件1 新建零件 -->
            <el-dropdown trigger="click" style="float:right; margin-right: 10px;" v-show=" activeTab == 1 && update == 1">
                <el-button size="small" type="primary">
                    新建零件
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="centerDialog3Visible = true">单个新建</el-dropdown-item>
                    <el-dropdown-item>
                         <el-upload ref="upload"
                            action="customize"
                            :http-request="uploadPart"
                            :show-file-list="false"
                            :limit="1"
                        >
                            批量导入
                        </el-upload>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>

            <!-- 上传 试模2 保养3 更新4 时 -->
            <el-upload ref="upload"
                v-show="(activeTab == 2 || activeTab == 3 || activeTab == 4) && update == 1"
                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>

            <!-- 上传 报废5 时 -->
            <el-button
                v-show="activeTab == 5 && update == 1"
                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" align="center" sortable></el-table-column>
                        <el-table-column prop="uploadtor" label="上传者" width="200" align="center" sortable></el-table-column>
                        <el-table-column prop="indate" label="上传时间" width="200" sortable></el-table-column>
                        <el-table-column label="状态" width="120" align="center" 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" align="center" sortable>
                            <template slot-scope="scope">
                                <el-button size="small"
                                    v-if="approve == 1 && (scope.row.state == 0 || (scope.row.state == 1 && user.subordinateType == 1) || (scope.row.state == 2 && user.subordinateType == 0))" 
                                    @click="checkOpen(scope.row.id, scope.row.fileName)">审批</el-button>
                                <a :href="scope.row.fileUrl" :download="scope.row.fileName" v-if="download == 1 && scope.row.state == 3">
                                    <el-button size="small" @click="dowloadfile(scope.row.id)">下载</el-button>
                                </a>
                                <el-button size="small" 
                                    v-if="scope.row.uplodtorId == user.id && scope.row.state <= 0" 
                                    @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="partNo" label="零件编号" width="150" sortable></el-table-column>
                        <el-table-column prop="partName" label="零件名称" sortable></el-table-column>
                        <el-table-column prop="partLife" label="寿命次数" align="center" width="100" sortable></el-table-column>
                        <el-table-column prop="isVulnerable" label="易损件" align="center" width="100" sortable>
                            <template slot-scope="scope">{{scope.row.isVulnerable==0?'否':'是'}}</template>
                        </el-table-column>
                        <el-table-column prop="part3dFile.fileName" label="3D图档" width="200" sortable>
                            <template slot-scope="scope" v-if="scope.row.part3dFile != null">
                                <a class="download" :href="scope.row.part3dFile.fileUrl" target="_blank">{{scope.row.part3dFile.fileName}}</a> 
                                <!--  :download="scope.row.part3dFile.fileName" -->
                            </template>
                        </el-table-column>
                        <el-table-column prop="part2dFile.fileName" label="2D图档" width="200" sortable>
                            <template slot-scope="scope" v-if="scope.row.part2dFile != null">
                                <a class="download" :href="scope.row.part2dFile.fileUrl" :download="scope.row.part2dFile.fileName">{{scope.row.part2dFile.fileName}}</a>
                            </template>
                        </el-table-column>
                        <el-table-column prop="indate" label="上传时间" width="200" align="center" sortable></el-table-column>
                        <el-table-column label="状态" width="120" align="center" 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" align="center" sortable>
                            <template slot-scope="scope">
                                <el-button size="small" 
                                    v-if="approve == 1 && (scope.row.state == 0 
                                        || (scope.row.state == 1 && user.subordinateType == 1) 
                                        || (scope.row.state == 2 && user.subordinateType == 0))" 
                                    @click="checkOpenPort(scope.row)">审批</el-button>
                                <el-button size="small" @click="editPort(scope.row)" v-if="scope.row.creatorId == user.id">
                                    修改
                                </el-button>
                                <!-- <el-button size="small" @click="dowloadfile(scope.row.id)" v-if="download == 1 && scope.row.state == 3 ">
                                    <a :href="scope.row.fileUrl" :download="scope.row.fileName">下载 </a>
                                </el-button> -->
                                <!-- <el-button size="small" 
                                    v-if="scope.row.uplodtorId == user.id && scope.row.state <= 0" 
                                    @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" 
                                    v-if="approve == 1 && (scope.row.state == 0 || (scope.row.state == 1 && user.subordinateType == 1) || (scope.row.state == 2 && user.subordinateType == 0))" 
                                    @click="checkOpen(scope.row.id, scope.row.fileName)">审批</el-button>
                                <a :href="scope.row.fileUrl" :download="scope.row.fileName" v-if="download == 1 && scope.row.state == 3">
                                    <el-button size="small" @click="dowloadfile(scope.row.id)">下载</el-button>
                                </a>
                                <el-button size="small"
                                    v-if="scope.row.uplodtorId == user.id && scope.row.state <= 0" 
                                    @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" 
                                    v-if="approve == 1 && (scope.row.state == 0 || (scope.row.state == 1 && user.subordinateType == 1) || (scope.row.state == 2 && user.subordinateType == 0))" 
                                    @click="checkOpen(scope.row.id, scope.row.fileName)">审批</el-button>
                                <a :href="scope.row.fileUrl" :download="scope.row.fileName" v-if="download == 1 && scope.row.state == 3">
                                    <el-button size="small" @click="dowloadfile(scope.row.id)">下载</el-button>
                                </a>
                                <el-button size="small"
                                    v-if="scope.row.uplodtorId == user.id && scope.row.state <= 0" 
                                    @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" 
                                    v-if="approve == 1 && (scope.row.state == 0 || (scope.row.state == 1 && user.subordinateType == 1) || (scope.row.state == 2 && user.subordinateType == 0))" 
                                    @click="checkOpen(scope.row.id, scope.row.fileName)">审批</el-button>
                                <a :href="scope.row.fileUrl" :download="scope.row.fileName" v-if="download == 1 && scope.row.state == 3">
                                    <el-button size="small" @click="dowloadfile(scope.row.id)">下载</el-button>
                                </a>
                                <el-button size="small" 
                                    v-if="scope.row.uplodtorId == user.id && scope.row.state <= 0" 
                                    @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" 
                                    v-if="approve == 1 && (scope.row.state == 0 || (scope.row.state == 1 && user.subordinateType == 1) || (scope.row.state == 2 && user.subordinateType == 0))" 
                                    @click="checkOpen(scope.row.id, scope.row.fileName)">审批</el-button>
                                <a :href="scope.row.fileUrl" :download="scope.row.fileName" v-if="download == 1 && scope.row.state == 3">
                                    <el-button size="small" @click="dowloadfile(scope.row.id)">下载</el-button>
                                </a>
                                <el-button size="small"
                                    v-if="scope.row.uplodtorId == user.id && scope.row.state <= 0"
                                    @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="content" label="操作" width="120" sortable></el-table-column>
                <el-table-column prop="fileName" label="操作文档名称" sortable></el-table-column>
                <el-table-column prop="operatorName" label="操作人" align="center" width="120" sortable></el-table-column>
                <el-table-column prop="indate" label="操作时间" width="200" align="center" sortable></el-table-column>
            </el-table>
        </el-col>

        <!-- 审批弹窗 -->
        <el-dialog title="审批" :visible.sync="centerDialogVisible" width="100" 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="100" :before-close="clearFileRecord" 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>

        <!-- 零件文档上传弹窗 -->
        <el-dialog title="零件文档上传" v-if="centerDialog4Visible" :visible.sync="centerDialog4Visible" width="100" :before-close="clearFileRecord" center>
            <p style="color:#ccc;">文件命名规则：零件编号+2D/3D  如 LJ001+2D.dwg</p>
            <el-upload ref="upload4" action="uploadFile" :http-request="uploadPartFile" :show-file-list="true" :before-remove="beforeRemove" multiple>
                <el-button size="small" type="primary">上传</el-button>
            </el-upload>
            <span slot="footer" class="dialog-footer">
                <el-button @click="uploadFilePart">确定</el-button>
            </span>
        </el-dialog>

        <!-- 单个新增零件弹窗 -->
        <el-dialog title="新增零件" v-if="centerDialog3Visible" :visible.sync="centerDialog3Visible" :close-on-click-modal="false" customClass="customWidth">
            <el-form :model="newParts" label-width="100px" :rules="formRules" ref="newParts" :inline="true" class="demo-form-inline">
                <el-form-item label="零件编号" prop="number">
                    <el-input v-model="newParts.number" autocomplete="off" placeholder="请输入零件编号"></el-input>
                </el-form-item>
                <el-form-item label="零件名称" prop="name">
                    <el-input v-model="newParts.name" autocomplete="off" placeholder="请输入零件名称"></el-input>
                </el-form-item>
                <el-form-item label="零件寿命" prop="life">
                    <el-input v-model="newParts.life" autocomplete="off" placeholder="请输入零件寿命"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="centerDialog3Visible = false">取消</el-button>
                <el-button type="primary" @click.native="subPart" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>

        <!-- 单个编辑零件弹窗 -->
        <el-dialog title="编辑零件" v-if="editPortVisible" :visible.sync="editPortVisible" :close-on-click-modal="false" customClass="customWidth">
            <el-form :model="editParts" label-width="100px" :rules="formRules" ref="editParts" :inline="true" class="demo-form-inline">
                <el-form-item label="零件编号" prop="number">
                    <el-input v-model="editParts.number" autocomplete="off" placeholder="请输入零件编号"></el-input>
                </el-form-item>
                <el-form-item label="零件名称" prop="name">
                    <el-input v-model="editParts.name" autocomplete="off" placeholder="请输入零件名称"></el-input>
                </el-form-item>
                <el-form-item label="零件寿命" prop="life">
                    <el-input v-model="editParts.life" autocomplete="off" placeholder="请输入零件寿命"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editPortVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editPartVisible" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>

        <!--编辑界面-->
        <el-dialog title="编辑模具" v-if="editFormVisible" :visible.sync="editFormVisible" :close-on-click-modal="false" customClass="customWidth">
            <el-form :model="editForm" label-width="100px" :rules="formRules" ref="editForm" :inline="true" class="demo-form-inline">
                <el-form-item label="模具名称" prop="modelName">
                    <el-input v-model="editForm.modelName" autocomplete="off" placeholder="请输入模具名称"></el-input>
                </el-form-item>
                <el-form-item label="模具编号" prop="modelNo">
                    <el-input v-model="editForm.modelNo" autocomplete="off" placeholder="请输入模具编号"></el-input>
                </el-form-item>
                <el-form-item label="云模盒编号" prop="equipmentId">
                    <el-select v-model="editForm.equipmentId" clearable filterable placeholder="请选择云模盒编号" style="width:202px">
                        <el-option v-for="item in boxes" :key="item.id" :label="item.equipmentNo" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="初始模次">
                    <el-input v-model="editForm.initialModulus" autocomplete="off" placeholder="请输入初始模次"></el-input>
                </el-form-item>
                <el-form-item label="模次寿命">
                    <el-input v-model="editForm.settingLife" autocomplete="off" placeholder="请输入模次寿命"></el-input>
                </el-form-item>
                <el-form-item label="RIFD码">
                    <el-input v-model="editForm.rfid" autocomplete="off" placeholder="请输入RIFD码"></el-input>
                </el-form-item>
                <el-form-item label="保养次数">
                    <el-select v-model="editForm.maintainCount" clearable multiple allow-create filterable default-first-option placeholder="请选择保养次数" style="width:202px">
                        <el-option v-for="item in maintainCount" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属生产方" v-if="moldDetail.projectId != null">
                    <el-select v-model="editForm.produceCompanyId" clearable filterable placeholder="请选择所属生产方" style="width:202px">
                        <el-option v-for="item in customCompany" :key="item.companyId" :label="item.companyName" :value="item.companyId"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="addSubmit" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import util from "../../common/js/util";
    export default {
        data() {
            return {
                detailId: this.$route.params.id,
                user: JSON.parse(sessionStorage.getItem("user")),
                moldDetail: {},
                customCompany: [],
                boxes: [],
                //单独新增零件时所需的三个变量
                newParts: {
                    number: "",
                    name: "",
                    life: ""
                },

                editParts: {
                    id: 0,
                    number: "",
                    name: "",
                    life: ""
                },
                maintainCount: [5000,10000],
                formRules: {
                    modelNo: [
                        { required: true, message: "请输入模具编号", trigger: "blur" }
                    ],
                    modelName: [
                        { required: true, message: "请输入模具名称", trigger: "blur" }
                    ],
                    equipmentId: [
                        {
                            required: true,
                            message: "请选择云模盒编号",
                            trigger: ["blur", "change"]
                        }
                    ],
                    number: [
                        { required: true, message: "请输入零件编号", trigger: "blur" }
                    ],
                    name: [
                        { required: true, message: "请输入零件名称", trigger: "blur" }
                    ],
                    life: [
                        { required: true, message: "请输入零件寿命次数", trigger: "blur" }
                    ],
                },

                //权限
                update: 0,
                download: 0,
                view: 0,
                approve: 0,

                //6种文档
                documents: {
                    mould: [],
                    part: [],
                    check: [],
                    maintain: [],
                    update: [],
                    abandon: []
                },
                //2D还是3D
                fileType: 1,
                //操作记录
                operations: [],
                allDetail: {
                    overflow: "auto",
                    padding: "0px 5px",
                    height: 0
                },

                centerDialogVisible: false, //审批界面
                centerDialog2Visible: false, //模具界面
                centerDialog3Visible: false, //创建零件界面
                centerDialog4Visible: false, //零件文档上传界面
                editPortVisible: false,//编辑零件界面

                listLoading: false,
                activeTab: 0,
                activePage: 0,
                activeArticleId: null,
                activeFileName: null,

                editFormVisible: false, //修改界面是否显示
                editLoading: false,
                //修改界面数据
                editForm: {
                    id: 0,
                    modelName: "",
                    modelNo: "",
                    equipmentId: "",
                    initialModulus: "",
                    settingLife: "",
                    rfid: "",
                    produceCompanyId: "",
                    maintainCount: [],
                    flag: 1
                },

                files: [],

                twoId: null,
                threeId: null,
            };
        },
        methods: {
            backToList() {
                this.$router.go(-1);
            },

            toDetection() {
                this.$router.push("/detection");
            },

            //标签页面切换时
            handleClick(tab, event) {
                this.activeTab = tab.name;
                this.getOperationRecord(this.activeTab);
            },

            getMsg() {
                this.http.post( this.port.base.moulds, {
                    belongCompanyId: this.user.companyId,
                    mouldId: this.detailId
                },
                res => {
                    if (res.code == "ok") {
                        this.boxes = res.data;
                    } 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.detailId
                },
                res => {
                    if (res.code == "ok") {
                        var detail = res.data.vo;
                        if (detail.endTime == null) {
                            detail.diffTime = "";
                        } else {
                            detail.diffTime = util.formatDate.dateDiff(
                                util.formatDate.format(new Date(detail.endTime), "yyyy-MM-dd"),
                                util.formatDate.format(new Date(new Date()), "yyyy-MM-dd")
                            );
                        }
                        this.moldDetail = detail;
                        this.customCompany = res.data.customCompany;

                        this.update = res.data.update;
                        this.download = res.data.download;
                        this.view = res.data.view;
                        this.approve = res.data.approve;

                        this.getDocument();
                        this.getPartList();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            //打开编辑
            edit() {
                this.editFormVisible = true;
                var maintainCount = this.moldDetail.maintainCount;
                maintainCount = maintainCount.split(",");

                this.editForm = {
                    id: this.moldDetail.id,
                    modelName: this.moldDetail.modelName,
                    modelNo: this.moldDetail.modelNo,
                    equipmentId: this.moldDetail.equipmentId,
                    initialModulus: this.moldDetail.initialModulus,
                    settingLife: this.moldDetail.settingLife,
                    rfid: this.moldDetail.rfid,
                    produceCompanyId: this.moldDetail.produceCompanyId,
                    maintainCount: maintainCount,
                    flag: 1
                };
            },

            addSubmit() {
                this.$refs.editForm.validate(valid => {
                    if (valid) {
                        this.editLoading = true;
                        var maintainCount = this.editForm.maintainCount , str = "";
                        for(var i in maintainCount) {
                            if(i == maintainCount.length-1){
                                str += maintainCount[i]
                            } else {
                                str += maintainCount[i] + ","
                            }
                        }
                        this.editForm.maintainCount = str;
                        this.http.post( this.port.mold.addMold, this.editForm,
                        res => {
                            this.editLoading = false;
                            if (res.code == "ok") {
                                this.editFormVisible = false;
                                this.$message({
                                    message: "修改成功",
                                    type: "success"
                                });
                                this.getDetail();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.editLoading = false;
                            this.editFormVisible = false;
                            this.$message({
                                message: error,
                                type: "error"
                            });
                        });
                    }
                });
            },

            //获取文档
            getDocument() {
                this.http.post( this.port.mold.moldFileListAll, {
                    mouldId: this.detailId
                },
                res => {
                    if (res.code == "ok") {
                        for(var i in res.data){
                            this.setList(res.data[i].list,i);
                        }

                        //顺便再把下面操作记录读取一下
                        this.getOperationRecord(this.activeTab);
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            //将list中对应的文件传入相应的document下
            setList(list, num) {
                var array = [];
                for(var i in list){
                    if(this.approve == 1){
                        array.push(list[i]);
                    } else {
                        if(list[i].uplodtorId == this.user.id && list[i].state <= 0){
                            array.push(list[i]);
                        }
                    }
                }
                if(num == 0){
                    this.documents.mould = array;
                } else if(num == 1) {
                    //this.documents.part = array;
                } else if(num == 2) {
                    this.documents.check = array;
                } else if(num == 3) {
                    this.documents.maintain = array;
                } else if(num == 4) {
                    this.documents.update = array;
                } else if(num == 5) {
                    this.documents.abandon = array;
                }
            },

            //打开审批窗口
            checkOpen(id, name) {
                this.activeArticleId = id;
                this.activeFileName = name;
                this.twoId = null;
                this.threeId = null;
                this.centerDialogVisible = true;
            },

            //打开审批窗口
            checkOpenPort(row) {
                if(row.part2dFile != null) {
                    this.twoId = row.part2dFile.id
                }

                if(row.part3dFile != null) {
                    this.threeId = row.part3dFile.id
                }
                this.activeArticleId = null;
                this.activeFileName = null;
                this.centerDialogVisible = true;
            },

            //清理报废文档上传窗口中的文件
            clearFileRecord() {
                this.centerDialog2Visible = false;
                this.centerDialog4Visible = false;
                this.$refs.upload1.clearFiles();
                this.$refs.upload2.clearFiles();
                this.$refs.upload4.clearFiles();
            },

            //审批文件
            check(adoption) {
                if(this.activeArticleId != null) {
                    this.onSubMit(this.activeArticleId , adoption , 0)
                }
                if(this.twoId != null) {
                    this.onSubMit(this.twoId , adoption , 1)
                }
                if(this.threeId != null) {
                    this.onSubMit(this.threeId , adoption , 1)
                }
            },

            onSubMit(id , type , from) {
                this.http.post( this.port.mold.moldFileCheck, {
                    mouldFileId: id,
                    isPass: type ? 1 : 0 //通过为1 不通过为0
                },
                res => {
                    if (res.code == "ok") {
                        this.centerDialogVisible = false;
                        this.$message({
                            message: "审批成功",
                            type: "success"
                        });
                        if(from == 0){
                            this.getDocument();
                        } else {
                            this.getPartList();
                        }
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    }
                );
            },

            //报废文件上传
            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;
                    this.clearFileRecord();
                } 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);
                if (this.activeTab == 0 || this.activeTab == 1) {
                    form.append("dwgType", this.fileType);
                }
                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"
                    });
                });
            },

            //文件下载
            dowloadfile(id) {
                this.http.post( this.port.mold.moldFileDowload, { 
                    id: id
                },
                res => {
                    this.getOperationRecord(this.activePage);
                },
                error => {

                });
            },

            //文件删除
            deleteFile(fileId) {
                this.$confirm('确认删除该文档吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    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"
                        });
                    });
                })
            },

            //零件新建
            subPart() {
                this.$refs.newParts.validate(valid => {
                    if (valid) {
                        this.editLoading = true;
                        this.http.post( this.port.mold.addPart, {
                            partNo: this.newParts.number,
                            partName: this.newParts.name,
                            partLife: this.newParts.life,
                            mouldId: this.detailId
                        },
                        res => {
                            this.editLoading = false;
                            if (res.code == "ok") {
                                this.centerDialog3Visible = false;
                                this.$message({
                                    message: "新建成功",
                                    type: "success"
                                });
                                this.getPartList();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.editLoading = false;
                            this.centerDialog3Visible = false;
                            this.$message({
                                message: error,
                                type: "error"
                            });
                        });
                    }
                })
            },
            
            //打开零件修改
            editPort(row) {
                this.editPortVisible = true;
                this.editParts = {
                    id: row.id,
                    number: row.partNo,
                    name: row.partName,
                    life: row.partLife
                }
            },

            editPartVisible() {
                this.$refs.editParts.validate(valid => {
                    if (valid) {
                        this.editLoading = true;
                        this.http.post( this.port.mold.addPart, {
                            partNo: this.editParts.number,
                            partName: this.editParts.name,
                            partLife: this.editParts.life,
                            mouldId: this.detailId
                        },
                        res => {
                            this.editLoading = false;
                            if (res.code == "ok") {
                                this.editPortVisible = false;
                                this.$message({
                                    message: "新建成功",
                                    type: "success"
                                });
                                this.getPartList();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.editLoading = false;
                            this.editPortVisible = false;
                            this.$message({
                                message: error,
                                type: "error"
                            });
                        });
                    }
                })
            },

            //零件列表
            getPartList() {
                this.http.post( this.port.mold.partList, {
                    mouldId: this.detailId
                },
                res => {
                    if (res.code == "ok") {
                        var list = res.data;
                        for(var i in list){
                            if(list[i].state == null){
                                list[i].state = 100;
                            }
                        }
                        console.log(list)
                        this.documents.part = list;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            //零件导入
            uploadPart(params) {
                var fileObj = params.file;
                var form = new FormData();
                form.append("file", fileObj);
                form.append("mouldId", this.detailId);
                this.http.uploadFile( this.port.mold.importPart, form,
                res => {
                    if (res.code == "ok") {
                        this.$message({
                            message: "上传成功",
                            type: "success"
                        });
                        this.$refs.upload.clearFiles();
                        this.getPartList();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            //零件文档批量
            beforeRemove(params) {
                for(var i in this.files){
                    if(this.files[i].uid == params.uid) {
                        this.files.splice(i , 1); 
                    }
                }
            },

            uploadPartFile(params) {
                this.files.push(params.file)
                return false;
            },

            uploadFilePart() {
                var fileObj = this.files;
                var form = new FormData();
                for(var i in fileObj){
                    form.append("file", fileObj[i]);
                }
                form.append("mouldId", this.detailId);
                this.http.uploadFile( this.port.mold.partUpload, form,
                res => {
                    if (res.code == "ok") {
                        this.$message({
                            message: "上传成功",
                            type: "success"
                        });
                        this.centerDialog4Visible = false;
                        this.$refs.upload4.clearFiles();
                        this.getPartList();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.centerDialog4Visible = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            //获取操作记录
            getOperationRecord(type) {
                this.http.post( this.port.mold.moldOperationList, { 
                    mouldId: this.detailId,
                    belongType: type
                },
                res => {
                    if (res.code == "ok") {
                        this.operations = res.data;
                    } 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 - 170;
            };
        },
        mounted() {
            this.getMsg();
            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;
    }

    .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;
    }

    .download {
        text-decoration:none;
        color: #20a0ff;
        cursor: pointer;
    }

    .info {
        color: grey;
    }

    .main {
        padding-left: 10px;
    }

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