|
|
<template> <div class="mod-config"> <!-- 查询条件 --> <el-form :inline="true" label-position="top" :model="searchData"> <el-form-item label="序列号"> <el-input v-model="searchData.referenceNo" clearable style="width: 120px"></el-input> </el-form-item> <el-form-item label="申请人"> <el-input v-model="searchData.applicant" clearable style="width: 120px"></el-input> </el-form-item> <el-form-item :label="' '"> <el-button @click="getDataList">查询</el-button> <el-button @click="addOrUpdateHandle()">新增</el-button> <el-button @click="exportHandle()">导出</el-button> <el-button @click="searchHandle()">搜索</el-button> </el-form-item> </el-form>
<!-- 列表 --> <el-table ref="rohsTable" :height="height" :data="dataList" border :row-style="rowStyle" @row-click="changeClickRow" @current-change="currentChange" v-loading="dataListLoading" style="width: 100%;"> <el-table-column prop="referenceNo" header-align="center" align="center" label="序列号/Reference No." width="165"></el-table-column> <el-table-column prop="status" header-align="center" align="center" label="单据状态/Status" width="120"></el-table-column> <el-table-column prop="applicant" header-align="center" align="center" label="申请人/Applicant" width="120"></el-table-column> <el-table-column prop="applicationDate" header-align="center" align="center" label="申请日期/Application Date" width="165"></el-table-column> <el-table-column prop="process" header-align="center" align="center" label="工艺/Process" width="120"></el-table-column> <el-table-column prop="vendorCode" header-align="center" align="center" label="供应商代码/Vendor Code" width="160"></el-table-column> <el-table-column prop="vendorMaterialCode" header-align="center" align="center" label="供应商材料编号/Vendor Material Code" width="200" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="materialClassify" header-align="center" align="center" label="材料分类/Material Classify" width="200" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="otherMaterialClassify" header-align="center" align="center" label="其他材料分类/Other Material Classify" width="210" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="materialUseFor" header-align="center" align="center" label="辅材用途/Material Use For" width="180" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="endCustomer" header-align="center" align="center" label="最终客户/End Customer" width="150"></el-table-column> <el-table-column prop="projectId" header-align="center" align="center" label="项目编码/Project ID" width="140"></el-table-column> <el-table-column prop="isMacallanMaterial" header-align="center" align="center" label="Macallan材料/Macallan Material" width="180"></el-table-column> <el-table-column prop="needCreateNumber" header-align="center" align="center" label="需创建内部编号/Need Create No." width="200"></el-table-column> <el-table-column prop="npdEngineer" header-align="center" align="center" label="NPD工程师/NPD Engineer" width="170"></el-table-column> <el-table-column prop="materialValidityTime" header-align="center" align="center" label="材料有效期/Material Validity Time" width="200"></el-table-column> <el-table-column prop="needDeviation" header-align="center" align="center" label="是否需偏差许可/Need Deviation" width="190"></el-table-column> <el-table-column prop="technicalPlan" header-align="center" align="center" label="技术计划/Technical Plan" width="170"></el-table-column> <el-table-column prop="buyer" header-align="center" align="center" label="采购/Buyer" width="130"></el-table-column> <el-table-column prop="expectReportTime" header-align="center" align="center" label="报告时间(月)/Expect Report Time" width="200"></el-table-column> <el-table-column prop="sgsReportNumber" header-align="center" align="center" label="SGS报告编号/SGS Report Number" width="190" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="expiredDate" header-align="center" align="center" label="报告有效期/Expired Date" width="165"></el-table-column> <el-table-column prop="isMeetRohsRequirement" header-align="center" align="center" label="符合RoHS/Meet RoHS Req" width="170"></el-table-column> <el-table-column prop="hsfSupplierClassification" header-align="center" align="center" label="HSF供应商等级/Supplier Class" width="220"></el-table-column> <el-table-column prop="isSameMaterialDiffSize" header-align="center" align="center" label="同材不同规格/Same Material Diff Size" width="220"></el-table-column> <el-table-column prop="ifsPartNo" header-align="center" align="center" label="IFS编号/IFS Part No." width="150"></el-table-column> <el-table-column prop="remark" header-align="center" align="center" label="备注/Remark" width="220" :show-overflow-tooltip="true"></el-table-column> <el-table-column fixed="right" header-align="center" align="center" width="130" label="操作/Operation"> <template slot-scope="scope"> <el-link style="cursor: pointer" @click="addOrUpdateHandle(scope.row)">编辑</el-link> <el-link v-if="scope.row.status === '草稿'" style="cursor: pointer; margin-left: 10px;" @click="issueModal(scope.row)">下达</el-link> </template> </el-table-column> </el-table>
<!-- 分页 --> <el-pagination style="margin-top: 0px" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[20, 50, 100, 200, 500]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"> </el-pagination>
<!-- 编辑模态框 --> <el-dialog :title="modalTitle" :visible.sync="modalFlag" width="1010px" top="10vh" v-drag :close-on-click-modal="false" :showClose="false">
<el-tabs tab-position="left" type="border-card" v-model="activeName" style="width: 100%;height: 565px;"> <!-- 基本信息 --> <el-tab-pane label="基本信息" name="basicInfo"> <div style="height: 550px"> <el-form :inline="true" label-position="top" :model="modalData" style="margin-top: -5px;"> <el-form-item> <span style="cursor: pointer" slot="label" @click="getBaseList(103, 1)"><a herf="#">申请人/Applicant</a></span> <el-input v-model="modalData.applicant" @blur="applicantBlur(103)" style="width: 150px"></el-input> <el-input v-model="modalData.applicantName" disabled style="width: 240px"></el-input> </el-form-item> <el-form-item label="申请日期/Application Date"> <el-date-picker v-model="modalData.applicationDate" type="date" value-format="yyyy-MM-dd" style="width: 190px" :editable=false></el-date-picker> </el-form-item> <el-form-item label="工艺/Process"> <dict-data-select v-model="modalData.process" clearable style="width: 190px" dict-type="rohs_process"></dict-data-select> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="modalData"> <el-form-item label="供应商代码/Vendor Code"> <el-input v-model="modalData.vendorCode" style="width: 150px"></el-input> </el-form-item> <el-form-item label="供应商材料编号/Vendor Material Code" style="margin-left: -10px"> <el-input v-model="modalData.vendorMaterialCode" style="width: 240px"></el-input> </el-form-item> <el-form-item label="辅材用途/Material Use For"> <el-input v-model="modalData.materialUseFor" style="width: 190px"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="modalData"> <el-form-item label="材料分类/Material Classify"> <dict-data-select v-model="modalData.materialClassifyList" multiple :collapse-tags="true" style="width: 394px" dict-type="rohs_material_classify"></dict-data-select> </el-form-item> <el-form-item label="其他材料分类/Other Material Classify" v-if="modalData.materialClassifyList && modalData.materialClassifyList.includes('Other其他')"> <el-input v-model="modalData.otherMaterialClassify" style="width: 190px"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="modalData"> <el-form-item> <span slot="label" v-if="!modalData.endCustomerFlag" @click="getBaseList(102, 1)"><a herf="#">最终客户/End Customer</a></span> <span slot="label" v-else>最终客户/End Customer</span> <el-input :disabled="modalData.endCustomerFlag" readonly v-model="modalData.endCustomer" @blur="handleQueryCustomer" style="width: 150px"></el-input> <el-input disabled v-model="modalData.endCustomerName" style="width: 240px"></el-input> </el-form-item> <el-form-item label="Macallan材料/Macallan Material"> <el-radio-group v-model="modalData.isMacallanMaterial" style="width: 190px"> <el-radio label="Y" @click.native.prevent="radioClick('isMacallanMaterial', 'Y')">是</el-radio> <el-radio label="N" @click.native.prevent="radioClick('isMacallanMaterial', 'N')">否</el-radio> </el-radio-group> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="modalData"> <el-form-item> <span slot="label" v-if="!modalData.projectIdFlag" @click="chooseProjectListFlag = true"><a herf="#">项目编码/Project ID</a></span> <span slot="label" v-else>项目编码/Project ID</span> <el-input :disabled="modalData.projectIdFlag" readonly v-model="modalData.projectId" @blur="handleQueryProjectByCustomer" style="width: 150px"></el-input> <el-input disabled v-model="modalData.projectName" style="width: 240px"></el-input> </el-form-item> <el-form-item label="需创建内部编号/Need Create No."> <el-radio-group v-model="modalData.needCreateNumber" style="width: 190px"> <el-radio label="Y" @click.native.prevent="radioClick('needCreateNumber', 'Y')">是</el-radio> <el-radio label="N" @click.native.prevent="radioClick('needCreateNumber', 'N')">否</el-radio> </el-radio-group> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="modalData"> <el-form-item> <span style="cursor: pointer" slot="label" @click="getBaseList(103, 3)"><a herf="#">NPD工程师/NPD Engineer</a></span> <el-input v-model="modalData.npdEngineer" @blur="npdEngineerBlur(103)" style="width: 150px"></el-input> <el-input v-model="modalData.npdEngineerName" disabled style="width: 240px"></el-input> </el-form-item> <el-form-item label="是否需偏差许可/Need Deviation"> <el-radio-group v-model="modalData.needDeviation" style="width: 190px"> <el-radio label="Y" @click.native.prevent="radioClick('needDeviation', 'Y')">是</el-radio> <el-radio label="N" @click.native.prevent="radioClick('needDeviation', 'N')">否</el-radio> </el-radio-group> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="modalData"> <el-form-item label="材料有效期/Material Validity Time"> <el-date-picker v-model="modalData.materialValidityTime" type="date" value-format="yyyy-MM-dd" style="width: 190px" :editable=false></el-date-picker> </el-form-item> <el-form-item label="有效期备注/Validity Comments"> <el-input v-model="modalData.materialValidityComments" style="width: 190px"></el-input> </el-form-item> <el-form-item label="是否Fiber材料/Fiber Material"> <el-radio-group v-model="modalData.isFiberMaterial" style="width: 190px"> <el-radio label="Y" @click.native.prevent="radioClick('isFiberMaterial', 'Y')">是</el-radio> <el-radio label="N" @click.native.prevent="radioClick('isFiberMaterial', 'N')">否</el-radio> </el-radio-group> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="modalData"> <el-form-item> <span style="cursor: pointer" slot="label" @click="getBaseList(103, 4)"><a herf="#">技术计划/Technical Plan</a></span> <el-input v-model="modalData.technicalPlan" @blur="technicalPlanBlur(103)" style="width: 150px"></el-input> <el-input v-model="modalData.technicalPlanName" disabled style="width: 240px"></el-input> </el-form-item> <el-form-item label="WM所需求规格/WM Required Spec"> <el-input v-model="modalData.wmRequiredSpec" style="width: 190px"></el-input> </el-form-item> <el-form-item label="材料厚度/Material Thickness"> <el-input v-model="modalData.materialThickness" style="width: 190px"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="modalData"> <el-form-item> <span style="cursor: pointer" slot="label" @click="getBaseList(2000, 2)"><a herf="#">采购/Buyer</a></span> <el-input v-model="modalData.buyer" @blur="buyerBlur(2000)" style="width: 150px"></el-input> <el-input v-model="modalData.buyerName" disabled style="width: 240px"></el-input> </el-form-item> <el-form-item label="报告时间(月)/Expect Report Time"> <el-input class="inlineNumber numInput" v-model="modalData.expectReportTime" type="number" style="width: 190px"></el-input> </el-form-item> <el-form-item label=" " style="margin-top: -2px;margin-left: 2px"> <el-button type="primary" icon="el-icon-upload" @click="uploadDialog = true">上传附件</el-button> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="modalData"> <el-form-item label="所需审批文件/Docs Needed" > <dict-data-select v-model="modalData.qualificationDocumentsNeededList" multiple :collapse-tags="true" style="width: 394px" dict-type="rohs_qualification_docs"></dict-data-select> </el-form-item> <el-form-item label="测试报告必测项/Test Items"> <dict-data-select v-model="modalData.testReportIncludingItemsList" multiple :collapse-tags="true" style="width: 394px" dict-type="rohs_test_report_items"></dict-data-select> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="modalData"> <el-form-item label="备注说明/Remark" style="display: block;"> <el-input type="textarea" :rows="3" v-model="modalData.remark" resize="none" style="width: 802px;height: 30px"></el-input> </el-form-item> </el-form> </div> </el-tab-pane>
<!-- HSF 填写信息 --> <el-tab-pane label="HSF 填写信息" name="hsfInfo"> <div style="height: 550px"> <el-form :inline="true" label-position="top" :model="modalData" style="margin-top: -5px;"><!-- <el-form-item label="单据状态/Doc Status">--><!-- <el-input v-model="modalData.status" disabled style="width: 205px"></el-input>--><!-- </el-form-item>--> <el-form-item label="SGS报告编号/SGS Report Number"> <el-input v-model="modalData.sgsReportNumber" style="width: 230px"></el-input> </el-form-item> <el-form-item label="报告有效期/Expired Date"> <el-date-picker v-model="modalData.expiredDate" type="date" value-format="yyyy-MM-dd" style="width: 150px" :editable=false></el-date-picker> </el-form-item> <el-form-item label="是否符合RoHS/Meet RoHS Req"> <el-radio-group v-model="modalData.isMeetRohsRequirement" style="width: 180px"> <el-radio label="Y" @click.native.prevent="radioClick('isMeetRohsRequirement', 'Y')">是</el-radio> <el-radio label="N" @click.native.prevent="radioClick('isMeetRohsRequirement', 'N')">否</el-radio> </el-radio-group> </el-form-item> <el-form-item label="HSF供应商等级/Supplier Class"> <el-radio-group v-model="modalData.hsfSupplierClassification" style="width: 200px"> <el-radio label="A类" @click.native.prevent="radioClick('hsfSupplierClassification', 'A类')">A类</el-radio> <el-radio label="B类" @click.native.prevent="radioClick('hsfSupplierClassification', 'B类')">B类</el-radio> <el-radio label="C类" @click.native.prevent="radioClick('hsfSupplierClassification', 'C类')">C类</el-radio> </el-radio-group> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="modalData"> <el-form-item label="Fiber报告信息/Fiber Information" style="display: block;"> <el-input type="textarea" :rows="3" v-model="modalData.fiberInformation" resize="none" style="width: 802px;height: 30px"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="modalData" style="margin-top: 50px"> <el-form-item label="HSF标准/HSF Standard" style="display: block;"> <el-input type="textarea" :rows="3" v-model="modalData.hsfStandard" resize="none" style="width: 802px;height: 30px"></el-input> </el-form-item> </el-form> </div> </el-tab-pane>
<!-- NPD 信息 --> <el-tab-pane label="NPD 信息" name="npdInfo"> <div style="height: 550px"> <el-form :inline="true" label-position="top" :model="modalData" style="margin-top: -5px;"> <el-form-item label="现有材料不同规格/Same Material Diff Size"> <el-radio-group v-model="modalData.isSameMaterialDiffSize" style="width: 190px"> <el-radio label="Y" @click.native.prevent="radioClick('isSameMaterialDiffSize', 'Y')">是</el-radio> <el-radio label="N" @click.native.prevent="radioClick('isSameMaterialDiffSize', 'N')">否</el-radio> </el-radio-group> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="modalData"> <el-form-item label="材料描述/Material Desc." style="display: block;"> <el-input type="textarea" :rows="3" v-model="modalData.materialDesc" resize="none" style="width: 802px;height: 30px"></el-input> </el-form-item> </el-form> </div> </el-tab-pane>
<!-- 材料信息 --> <el-tab-pane label="材料信息" name="materialInfo"> <div style="height: 550px"> <el-form :inline="true" label-position="top" :model="modalData" style="margin-top: -5px;"> <el-form-item label="材料IFS编号/IFS Part No."> <el-input v-model="modalData.ifsPartNo" style="width: 190px"></el-input> </el-form-item> </el-form> </div> </el-tab-pane> </el-tabs>
<el-footer style="height:35px;margin-top: 15px;text-align:center"> <el-button type="primary" v-if="modalData.status === '草稿'" @click="dataFormSubmit()">保存</el-button> <el-button type="primary" @click="modalFlag = false">关闭</el-button> <!-- 走OA流程按钮预留 --> <el-button type="primary" v-if="modalData.status === '审批中'" @click="agreeSubmit">同意</el-button> <el-button type="primary" v-if="modalData.status === '审批中'" @click="rejectSubmit">驳回</el-button> </el-footer> </el-dialog>
<upload-file-list v-if="modalFlag" folder="rohs" title="RoHs 附件上传" :label="'序列号'" :file-list.sync="fileList" :no="modalData.referenceNo" :upload-dialog.sync="uploadDialog" path="/upload/test"> </upload-file-list>
<!--选择项目模态框--> <el-dialog title="选择-项目" :close-on-click-modal="false" @close="closeProjectInfoDialog" @open="searchProjectInfoList" :visible.sync="chooseProjectListFlag" width="35%"> <el-form label-position="top" :model="searchProjectData" ref="closeProjectInfoForm"> <el-row :gutter="10"> <el-col :span="6"> <el-form-item label="项目号"> <el-input v-model="searchProjectData.projectId"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="项目名称"> <el-input v-model="searchProjectData.projectName"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label=" "> <el-button type="primary" @click="searchProjectInfoList">查询</el-button> </el-form-item> </el-col> </el-row> <el-table :height="223" :data="projectList" border @row-click="projectClickRow"> <el-table-column label="项目号" prop="projectId"/> <el-table-column label="项目名称" prop="projectName"/> </el-table> </el-form> </el-dialog>
<!-- 底部附件页签 --> <el-tabs v-model="activeTable" style="width: 100%; height: 100%;" type="border-card" class="customer-tab"> <el-tab-pane label="基本信息" name="basicInfo"> <div :style="{height: secondHeight - 25 + 'px'}" style="margin-left: 5px;margin-top: 0px; overflow-y: auto;"> <el-form :inline="true" label-position="top" :model="currentRow"> <el-form-item> <span slot="label">申请人/Applicant</span> <el-input :value="currentRow.applicant || ''" disabled style="width: 150px"></el-input> <el-input :value="currentRow.applicantName || ''" disabled style="width: 240px"></el-input> </el-form-item> <el-form-item label="申请日期/Application Date"> <el-date-picker :value="currentRow.applicationDate" disabled type="date" value-format="yyyy-MM-dd" style="width: 190px"></el-date-picker> </el-form-item> <el-form-item label="工艺/Process"> <el-input :value="currentRow.process || ''" disabled style="width: 190px"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="currentRow"> <el-form-item label="供应商代码/Vendor Code"> <el-input :value="currentRow.vendorCode || ''" disabled style="width: 150px"></el-input> </el-form-item> <el-form-item label="供应商材料编号/Vendor Material Code" style="margin-left: -10px"> <el-input :value="currentRow.vendorMaterialCode || ''" disabled style="width: 240px"></el-input> </el-form-item> <el-form-item label="辅材用途/Material Use For"> <el-input :value="currentRow.materialUseFor || ''" disabled style="width: 190px"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="currentRow"> <el-form-item label="材料分类/Material Classify"> <el-input :value="currentRow.materialClassify || ''" disabled style="width: 394px"></el-input> </el-form-item> <el-form-item label="其他材料分类/Other Material Classify" v-if="currentRow.materialClassify && currentRow.materialClassify.includes('Other其他')"> <el-input :value="currentRow.otherMaterialClassify || ''" disabled style="width: 190px"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="currentRow"> <el-form-item> <span slot="label">最终客户/End Customer</span> <el-input :value="currentRow.endCustomer || ''" disabled style="width: 150px"></el-input> <el-input :value="currentRow.endCustomerName || ''" disabled style="width: 240px"></el-input> </el-form-item> <el-form-item label="Macallan材料/Macallan Material"> <el-input :value="displayYesNo(currentRow.isMacallanMaterial)" disabled style="width: 190px"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="currentRow"> <el-form-item> <span slot="label">项目编码/Project ID</span> <el-input :value="currentRow.projectId || ''" disabled style="width: 150px"></el-input> <el-input :value="currentRow.projectName || ''" disabled style="width: 240px"></el-input> </el-form-item> <el-form-item label="需创建内部编号/Need Create No."> <el-input :value="displayYesNo(currentRow.needCreateNumber)" disabled style="width: 190px"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="currentRow"> <el-form-item> <span slot="label">NPD工程师/NPD Engineer</span> <el-input :value="currentRow.npdEngineer || ''" disabled style="width: 150px"></el-input> <el-input :value="currentRow.npdEngineerName || ''" disabled style="width: 240px"></el-input> </el-form-item> <el-form-item label="是否需偏差许可/Need Deviation"> <el-input :value="displayYesNo(currentRow.needDeviation)" disabled style="width: 190px"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="currentRow"> <el-form-item label="材料有效期/Material Validity Time"> <el-date-picker :value="currentRow.materialValidityTime" disabled type="date" value-format="yyyy-MM-dd" style="width: 190px"></el-date-picker> </el-form-item> <el-form-item label="有效期备注/Validity Comments"> <el-input :value="currentRow.materialValidityComments || ''" disabled style="width: 190px"></el-input> </el-form-item> <el-form-item label="是否Fiber材料/Fiber Material"> <el-input :value="displayYesNo(currentRow.isFiberMaterial)" disabled style="width: 190px"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="currentRow"> <el-form-item> <span slot="label">技术计划/Technical Plan</span> <el-input :value="currentRow.technicalPlan || ''" disabled style="width: 150px"></el-input> <el-input :value="currentRow.technicalPlanName || ''" disabled style="width: 240px"></el-input> </el-form-item> <el-form-item label="WM所需求规格/WM Required Spec"> <el-input :value="currentRow.wmRequiredSpec || ''" disabled style="width: 190px"></el-input> </el-form-item> <el-form-item label="材料厚度/Material Thickness"> <el-input :value="currentRow.materialThickness || ''" disabled style="width: 190px"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="currentRow"> <el-form-item> <span slot="label">采购/Buyer</span> <el-input :value="currentRow.buyer || ''" disabled style="width: 150px"></el-input> <el-input :value="currentRow.buyerName || ''" disabled style="width: 240px"></el-input> </el-form-item> <el-form-item label="报告时间(月)/Expect Report Time"> <el-input :value="currentRow.expectReportTime" disabled style="width: 190px"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="currentRow"> <el-form-item label="所需审批文件/Docs Needed"> <el-input :value="currentRow.qualificationDocumentsNeeded || ''" disabled style="width: 394px"></el-input> </el-form-item> <el-form-item label="测试报告必测项/Test Items"> <el-input :value="currentRow.testReportIncludingItems || ''" disabled style="width: 394px"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="currentRow"> <el-form-item label="备注说明/Remark" style="display: block;"> <el-input type="textarea" :rows="3" :value="currentRow.remark || ''" disabled resize="none" style="width: 802px;height: 30px"></el-input> </el-form-item> </el-form> </div> </el-tab-pane>
<el-tab-pane label="HSF 填写信息" name="hsfInfo"> <div :style="{height: secondHeight - 25 + 'px'}" style="margin-left: 5px;margin-top: 0px; overflow-y: auto;"> <el-form :inline="true" label-position="top" :model="currentRow"><!-- <el-form-item label="单据状态/Doc Status"><el-input :value="currentRow.status || ''" disabled style="width: 205px"></el-input></el-form-item>--> <el-form-item label="SGS报告编号/SGS Report Number"><el-input :value="currentRow.sgsReportNumber || ''" disabled style="width: 205px"></el-input></el-form-item> <el-form-item label="报告有效期/Expired Date"><el-date-picker :value="currentRow.expiredDate" disabled type="date" value-format="yyyy-MM-dd" style="width: 205px"></el-date-picker></el-form-item> <el-form-item label="Fiber报告信息/Fiber Information"><el-input :value="currentRow.fiberInformation || ''" disabled style="width: 205px"></el-input></el-form-item> <el-form-item label="是否符合RoHS/Meet RoHS Req"><el-input :value="displayYesNo(currentRow.isMeetRohsRequirement)" disabled style="width: 205px"></el-input></el-form-item> <el-form-item label="HSF供应商等级/Supplier Class"><el-input :value="currentRow.hsfSupplierClassification || ''" disabled style="width: 205px"></el-input></el-form-item> <el-form-item label="HSF标准/HSF Standard" style="display: block;"><el-input type="textarea" :rows="3" :value="currentRow.hsfStandard || ''" disabled resize="none" style="width: 636px;height: 30px"></el-input></el-form-item> </el-form> </div> </el-tab-pane>
<el-tab-pane label="NPD 信息" name="npdInfo"> <div :style="{height: secondHeight - 25 + 'px'}" style="margin-left: 5px;margin-top: 0px; overflow-y: auto;"> <el-form :inline="true" label-position="top" :model="currentRow"> <el-form-item label="现有材料不同规格/Same Material Diff Size"><el-input :value="displayYesNo(currentRow.isSameMaterialDiffSize)" disabled style="width: 205px"></el-input></el-form-item> <el-form-item label="材料描述/Material Desc." style="display: block;"><el-input type="textarea" :rows="3" :value="currentRow.materialDesc || ''" disabled resize="none" style="width: 636px;height: 30px"></el-input></el-form-item> </el-form> </div> </el-tab-pane>
<el-tab-pane label="材料信息" name="materialInfo"> <div :style="{height: secondHeight - 25 + 'px'}" style="margin-left: 5px;margin-top: 0px; overflow-y: auto;"> <el-form :inline="true" label-position="top" :model="currentRow"> <el-form-item label="材料IFS编号/IFS Part No."><el-input :value="currentRow.ifsPartNo || ''" disabled style="width: 205px"></el-input></el-form-item> </el-form> </div> </el-tab-pane>
<el-tab-pane label="附件信息" name="attachment"> <oss-components :save-visible="authFileSave" :download-visible="authFileDownLoad" :remove-visible="authFileRemove" :preview-visible="authFilePreview" :disabled="currentRow.status === '已完成'" label="序列号" :height="secondHeight - 25" style="margin-top: 2px" :columns="fileColumnList" :order-ref1="currentRow.site" :order-ref2="currentRow.referenceNo"> </oss-components> </el-tab-pane> </el-tabs> <ChooseList ref="baseList" @getBaseData="getBaseData"></ChooseList> </div></template>
<script>import * as api from '@/api/rohs/rohs'import { checkSuperAdmin } from "@/api/changeManagement/changeManagement"import { verifyData } from "@/api/chooselist/chooselist.js"import { searchProjectInfoList } from "@/api/quotation/quotationInformation.js"import { queryCustomer } from "@/api/customer/customerInformation"import { queryProjectByCustomer } from "@/api/project/project"import uploadFileList from '../common/uploadFileList'import ossComponents from '../oss/ossComponents.vue'import ChooseList from '@/views/modules/common/Chooselist'import DictDataSelect from "../sys/dict-data-select.vue"
export default { components: { uploadFileList, ossComponents, ChooseList, DictDataSelect }, data () { return { searchData: { site: this.$store.state.user.site, referenceNo: '', applicant: '' }, dataList: [], pageIndex: 1, pageSize: 20, totalPage: 0, dataListLoading: false,
activeTable: 'basicInfo', menuId: '108006', // 暂定ROHS菜单ID
authSearch: false, authUpdate: false, authIssue: false, authSubmit: false, authReject: false, authFileSave: false, authFileDownLoad: false, authFileRemove: false, authFilePreview: false, authDelete: false, superAdmin: false, height: 400, secondHeight: 200, currentRow: {}, currentRowNameSeq: 0, fileColumnList: [ {columnLabel: '文件名称', columnProp: 'fileName', headerAlign: 'center', align: 'left', columnWidth: '100'}, {columnLabel: '上传人', columnProp: 'createBy', headerAlign: 'center', align: 'left', columnWidth: '100'}, {columnLabel: '上传日期', columnProp: 'createDate', headerAlign: 'center', align: 'center', columnWidth: '100'} ],
modalFlag: false, uploadDialog: false, chooseProjectListFlag: false, searchProjectData: { site: '', projectId: undefined, projectName: undefined, customerId: undefined, }, projectList: [], fileList: [], modalTitle: 'RoHs 新增', activeName: 'basicInfo', modalData: { site: 'DEFAULT', referenceNo: '', applicant: '', applicationDate: '', process: '', vendorCode: '', vendorMaterialCode: '', materialClassify: '', otherMaterialClassify: '', materialUseFor: '', endCustomer: '', projectId: '', isMacallanMaterial: '', needCreateNumber: '', npdEngineer: '', materialValidityTime: '', materialValidityComments: '', needDeviation: '', technicalPlan: '', wmRequiredSpec: '', isFiberMaterial: '', materialThickness: '', buyer: '', expectReportTime: 0, qualificationDocumentsNeeded: '', qualificationDocumentsNeededList: [], testReportIncludingItems: '', testReportIncludingItemsList: [], remark: '', status: '', sgsReportNumber: '', expiredDate: '', fiberInformation: '', hsfStandard: '', isMeetRohsRequirement: '', hsfSupplierClassification: '', materialDesc: '', isSameMaterialDiffSize: '', ifsPartNo: '' } } }, created () { this.menuId = this.$route.meta.menuId this.getButtonAuthData() this.checkSuperAdmin() }, mounted () { this.getDataList() this.$nextTick(() => { this.height = window.innerHeight / 2 - 30 /*第二个表格高度的动态调整*/ this.secondHeight = window.innerHeight / 2 - 186 }) }, methods: { displayYesNo (value) { if (value === 'Y') { return '是' } if (value === 'N') { return '否' } return value || '' }, // 列表行选中变色
rowStyle ({row}) { if (this.currentRow && this.currentRow.referenceNo === row.referenceNo) { return { 'background-color': '#E8F7F6', cursor: 'pointer' } } }, // 获取按钮的权限数据
getButtonAuthData () { this.authSearch = this.isAuth(this.menuId+":search") this.authUpdate = this.isAuth(this.menuId+":update") this.authIssue = this.isAuth(this.menuId+":issue") this.authSubmit = this.isAuth(this.menuId+":submit") this.authReject = this.isAuth(this.menuId+":reject") this.authFileSave = this.isAuth(this.menuId+":fileSave") this.authFileDownLoad = this.isAuth(this.menuId+":fileDownLoad") this.authFileRemove = this.isAuth(this.menuId+":fileRemove") this.authFilePreview = this.isAuth(this.menuId+":filePreview") this.authDelete = this.isAuth(this.menuId+":delete") }, // 校验是否为超级管理员
checkSuperAdmin () { checkSuperAdmin().then(({data}) => { this.superAdmin = data.superAdmin }) }, changeClickRow (row, column, event) { // 通过接口或直接赋值，让底部的页签显示当前选中行的数据
api.getRohsDetail(row.site, row.referenceNo).then(({data}) => { if (data && data.code === 0) { this.currentRow = data.data || {} } else { this.currentRow = row || {} } this.loadCurrentRowNames() }).catch(() => { this.currentRow = row || {} this.loadCurrentRowNames() }) }, currentChange (val) { this.currentRow = val || {} this.loadCurrentRowNames() }, loadCurrentRowNames () { if (!this.currentRow) { return } const site = this.currentRow.site || this.$store.state.user.site const requestSeq = ++this.currentRowNameSeq const setName = (field, value) => { if (requestSeq !== this.currentRowNameSeq || !this.currentRow) { return } this.$set(this.currentRow, field, value || '') } const tasks = [] if (this.currentRow.applicant) { tasks.push(this.queryUserDisplayName(this.currentRow.applicant, site, 103).then(name => setName('applicantName', name))) } else { setName('applicantName', '') } if (this.currentRow.npdEngineer) { tasks.push(this.queryUserDisplayName(this.currentRow.npdEngineer, site, 103).then(name => setName('npdEngineerName', name))) } else { setName('npdEngineerName', '') } if (this.currentRow.technicalPlan) { tasks.push(this.queryUserDisplayName(this.currentRow.technicalPlan, site, 103).then(name => setName('technicalPlanName', name))) } else { setName('technicalPlanName', '') } if (this.currentRow.buyer) { tasks.push(this.queryUserDisplayName(this.currentRow.buyer, site, 2000).then(name => setName('buyerName', name))) } else { setName('buyerName', '') } if (this.currentRow.endCustomer) { tasks.push(this.queryCustomerDisplayName(site, this.currentRow.endCustomer).then(name => setName('endCustomerName', name))) } else { setName('endCustomerName', '') } if (this.currentRow.projectId) { tasks.push(this.queryProjectDisplayName(site, this.currentRow.endCustomer, this.currentRow.projectId).then(name => setName('projectName', name))) } else { setName('projectName', '') } if (tasks.length > 0) { Promise.all(tasks).catch(() => {}) } }, queryUserDisplayName (username, site, tagno) { if (!username) { return Promise.resolve('') } let tempData = { tagno: tagno, conditionSql: " and a.username = '" + username + "'" + " and b.site = '" + site + "'" } return verifyData(tempData).then(({data}) => { if (data && data.code === 0 && data.baseListData && data.baseListData.length > 0) { return data.baseListData[0].user_display || '' } return '' }).catch(() => { return '' }) }, queryCustomerDisplayName (site, customerNo) { if (!customerNo) { return Promise.resolve('') } return queryCustomer({ site, customerNo }).then(({data}) => { if (data && data.code === 0 && data.rows && data.rows.length > 0) { const customer = data.rows[0] return customer.customerDesc || customer.Customer_desc || customer.customerName || '' } return '' }).catch(() => { return '' }) }, queryProjectDisplayName (site, customerId, projectId) { if (!projectId) { return Promise.resolve('') } let params = { site, projectId } if (customerId) { params.customerId = customerId } return queryProjectByCustomer(params).then(({data}) => { if (data && data.code === 0 && data.rows && data.rows.length > 0) { return data.rows[0].projectName || data.rows[0].Project_name || '' } return '' }).catch(() => { return '' }) },
// 获取列表
getDataList () { this.dataListLoading = true let params = { page: this.pageIndex, limit: this.pageSize, site: this.$store.state.user.site, referenceNo: this.searchData.referenceNo, applicant: this.searchData.applicant } api.getRohsList(params).then(({data}) => { if (data && data.code === 0) { this.dataList = data.page.list this.totalPage = data.page.totalCount this.$nextTick(() => { if (this.$refs.rohsTable && this.dataList.length > 0) { this.$refs.rohsTable.setCurrentRow(this.dataList[0]) } else if (this.$refs.rohsTable) { this.$refs.rohsTable.setCurrentRow() } }) } else { this.dataList = [] this.totalPage = 0 this.currentRow = {} } this.dataListLoading = false }).catch(() => { this.currentRow = {} this.dataListLoading = false }) }, // 分页
sizeChangeHandle (val) { this.pageSize = val this.pageIndex = 1 this.getDataList() }, currentChangeHandle (val) { this.pageIndex = val this.getDataList() }, // 搜索条件点击
searchHandle () { this.pageIndex = 1 this.getDataList() }, // 单选可取消
radioClick (field, value) { if (this.modalData[field] === value) { this.modalData[field] = '' } else { this.modalData[field] = value } }, // 导出
exportHandle () { this.$message.info('导出功能开发中') }, // 新增 / 修改
addOrUpdateHandle (row) { this.modalFlag = true this.activeName = 'basicInfo' this.fileList = [] this.uploadDialog = false
if (row) { this.modalTitle = 'RoHs 编辑' api.getRohsDetail(row.site, row.referenceNo).then(({data}) => { if (data && data.code === 0) { this.modalData = data.data || {} this.$set(this.modalData, 'qualificationDocumentsNeededList', this.modalData.qualificationDocumentsNeeded ? this.modalData.qualificationDocumentsNeeded.split(';').filter(item => item) : []) this.$set(this.modalData, 'testReportIncludingItemsList', this.modalData.testReportIncludingItems ? this.modalData.testReportIncludingItems.split(';').filter(item => item) : []) this.$set(this.modalData, 'materialClassifyList', this.modalData.materialClassify ? this.modalData.materialClassify.split(';').filter(item => item) : []) // Initialize names for display if needed
this.$set(this.modalData, 'applicantName', '') this.$set(this.modalData, 'buyerName', '') this.$set(this.modalData, 'npdEngineerName', '') this.$set(this.modalData, 'technicalPlanName', '') this.$set(this.modalData, 'endCustomerName', '') this.$set(this.modalData, 'projectName', '') // 编辑时允许重新选择客户和项目
this.$set(this.modalData, 'endCustomerFlag', false) this.$set(this.modalData, 'projectIdFlag', !this.modalData.endCustomer)
// Try to trigger verify data on open to fetch names
this.applicantBlur(103) this.buyerBlur(2000) this.npdEngineerBlur(103) this.technicalPlanBlur(103) this.handleQueryCustomer() this.handleQueryProjectByCustomer() } }) } else { this.modalTitle = 'RoHs 新增' // 生成一个临时ID用于附件上传绑定
const tempReferenceNo = 'TEMP-' + new Date().getTime() + '-' + Math.floor(Math.random() * 1000) this.modalData = { site: this.$store.state.user.site, referenceNo: tempReferenceNo, applicant: '', applicantName: '', applicationDate: '', process: '', vendorCode: '', vendorMaterialCode: '', materialClassify: '', materialClassifyList: [], otherMaterialClassify: '', materialUseFor: '', endCustomer: '', endCustomerName: '', endCustomerFlag: false, projectId: '', projectName: '', projectIdFlag: true, isMacallanMaterial: '', needCreateNumber: '', npdEngineer: '', npdEngineerName: '', materialValidityTime: '', materialValidityComments: '', needDeviation: '', technicalPlan: '', wmRequiredSpec: '', isFiberMaterial: '', materialThickness: '', buyer: '', buyerName: '', expectReportTime: 0, qualificationDocumentsNeeded: '', qualificationDocumentsNeededList: [], testReportIncludingItems: '', testReportIncludingItemsList: [], remark: '', status: '草稿', sgsReportNumber: '', expiredDate: '', fiberInformation: '', hsfStandard: '', isMeetRohsRequirement: '', hsfSupplierClassification: '', materialDesc: '', isSameMaterialDiffSize: '', ifsPartNo: '' } } }, // 表单提交
dataFormSubmit () { this.modalData.qualificationDocumentsNeeded = this.modalData.qualificationDocumentsNeededList.join(';') this.modalData.testReportIncludingItems = this.modalData.testReportIncludingItemsList.join(';') this.modalData.materialClassify = this.modalData.materialClassifyList.join(';')
const submitMethod = this.modalTitle === 'RoHs 新增' ? api.saveRohs : api.updateRohs submitMethod(this.modalData).then(({data}) => { if (data && data.code === 0) { this.$message.success('操作成功') this.modalFlag = false this.getDataList() } else { this.$message.error(data.msg || '操作失败') } }) }, // 同意
agreeSubmit () { this.$message.info('同意（OA流程）待开发') }, // 驳回
rejectSubmit () { this.$message.info('驳回（OA流程）待开发') }, // 下达
issueModal (row) { this.$confirm('确认下达该申请单?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { const data = Object.assign({}, row, { status: '审批中' }) api.updateRohs(data).then(({data}) => { if (data && data.code === 0) { this.$message.success('下达成功') this.getDataList() } else { this.$message.error(data.msg || '下达失败') } }) }) }, // ======== chooseList相关方法 ========
// 获取基础数据列表
getBaseList (val, type) { this.tagNo = val this.tagNo1 = type this.$nextTick(() => { let strVal = '' let conSql = '' if (val === 102) { if (type === 1) { strVal = this.modalData.endCustomer } } if (val === 103) { if (type === 1) { strVal = this.modalData.applicant } else if (type === 3) { strVal = this.modalData.npdEngineer } else if (type === 4) { strVal = this.modalData.technicalPlan } conSql = " and b.site = '" + this.$store.state.user.site + "'" } if (val === 2000) { strVal = this.modalData.buyer conSql = " and b.site = '" + this.$store.state.user.site + "'" } this.$refs.baseList.init(val, strVal, conSql) }) }, // 列表方法的回调
getBaseData (val) { if (this.tagNo === 102) { if (this.tagNo1 === 1) { if (val.Customer_no === this.modalData.endCustomer) { return } if (this.modalData.projectIdFlag) { this.modalData.projectIdFlag = false } this.modalData.endCustomer = val.Customer_no this.modalData.endCustomerName = val.Customer_desc this.modalData.projectId = '' this.modalData.projectName = '' } } if (this.tagNo === 103) { if (this.tagNo1 === 1) { this.modalData.applicant = val.username this.modalData.applicantName = val.user_display } else if (this.tagNo1 === 3) { this.modalData.npdEngineer = val.username this.modalData.npdEngineerName = val.user_display } else if (this.tagNo1 === 4) { this.modalData.technicalPlan = val.username this.modalData.technicalPlanName = val.user_display } } if (this.tagNo === 2000) { this.modalData.buyer = val.username this.modalData.buyerName = val.user_display } }, handleQueryCustomer() { if (!this.modalData.endCustomer) { this.modalData.endCustomerName = '' this.modalData.projectId = '' this.modalData.projectName = '' this.modalData.projectIdFlag = true return } let params = { site: this.$store.state.user.site, customerNo: this.modalData.endCustomer } queryCustomer(params).then(({data}) => { if (data && data.code === 0) { if (data.rows && data.rows.length === 1) { const customer = data.rows[0] this.modalData.endCustomerName = customer.customerDesc || customer.Customer_desc || customer.customerName || '' this.modalData.projectIdFlag = false } else { this.modalData.endCustomerName = '' this.modalData.projectId = '' this.modalData.projectName = '' this.modalData.projectIdFlag = true } } else { this.modalData.endCustomerName = '' this.modalData.projectId = '' this.modalData.projectName = '' this.modalData.projectIdFlag = true } }).catch((error) => { this.modalData.endCustomerName = '' this.modalData.projectId = '' this.modalData.projectName = '' this.modalData.projectIdFlag = true }) }, handleQueryProjectByCustomer() { if (!this.modalData.projectId) { this.modalData.projectName = '' return } let params = { site: this.$store.state.user.site, projectId: this.modalData.projectId } if (this.modalData.endCustomer) { params.customerId = this.modalData.endCustomer } queryProjectByCustomer(params).then(({data}) => { if (data && data.code === 0) { if (data.rows && data.rows.length === 1) { const project = data.rows[0] this.modalData.projectName = project.projectName || project.Project_name || '' } else { this.modalData.projectName = '' } } else { this.modalData.projectName = '' } }).catch((error) => { this.modalData.projectName = '' }) }, projectClickRow(row) { this.modalData.projectId = row.projectId this.modalData.projectName = row.projectName if (this.modalData.endCustomer && this.modalData.endCustomer !== '') { // do nothing
} else { this.modalData.endCustomer = row.customerId this.modalData.endCustomerName = row.customerName } this.chooseProjectListFlag = false }, searchProjectInfoList() { this.projectList = []; if (this.modalData.endCustomer && this.modalData.endCustomer !== '') { this.searchProjectData.customerId = this.modalData.endCustomer } else { this.searchProjectData.customerId = undefined } this.searchProjectData.site = this.$store.state.user.site searchProjectInfoList(this.searchProjectData).then(({data}) => { if (data && data.code === 0) { const rows = data.rows || [] this.projectList = rows if ((!this.modalData.endCustomer || this.modalData.endCustomer === '') && rows.length > 0) { this.modalData.projectId = rows[0].projectId this.modalData.projectName = rows[0].projectName this.modalData.endCustomer = rows[0].customerId this.modalData.endCustomerName = rows[0].customerName } } else { this.projectList = [] } }).catch((error) => { this.$message.error('查询项目信息失败') }) }, closeProjectInfoDialog() { if(this.$refs.closeProjectInfoForm) { this.$refs.closeProjectInfoForm.resetFields(); } this.searchProjectData = { site: this.$store.state.user.site, projectId: undefined, projectName: undefined, customerId: undefined, } }, // 申请人输入校验
applicantBlur (tagNo) { if (this.modalData.applicant != null && this.modalData.applicant !== '') { let tempData = { tagno: tagNo, conditionSql: " and a.username = '" + this.modalData.applicant + "'" + " and b.site = '" + this.$store.state.user.site + "'" } verifyData(tempData).then(({data}) => { if (data && data.code === 0) { if (data.baseListData.length > 0) { this.modalData.applicant = data.baseListData[0].username this.modalData.applicantName = data.baseListData[0].user_display return } } this.modalData.applicantName = '' }) } else { this.modalData.applicantName = '' } }, // NPD工程师输入校验
npdEngineerBlur (tagNo) { if (this.modalData.npdEngineer != null && this.modalData.npdEngineer !== '') { let tempData = { tagno: tagNo, conditionSql: " and a.username = '" + this.modalData.npdEngineer + "'" + " and b.site = '" + this.$store.state.user.site + "'" } verifyData(tempData).then(({data}) => { if (data && data.code === 0) { if (data.baseListData.length > 0) { this.modalData.npdEngineer = data.baseListData[0].username this.modalData.npdEngineerName = data.baseListData[0].user_display return } } this.modalData.npdEngineerName = '' }) } else { this.modalData.npdEngineerName = '' } }, // 技术计划输入校验
technicalPlanBlur (tagNo) { if (this.modalData.technicalPlan != null && this.modalData.technicalPlan !== '') { let tempData = { tagno: tagNo, conditionSql: " and a.username = '" + this.modalData.technicalPlan + "'" + " and b.site = '" + this.$store.state.user.site + "'" } verifyData(tempData).then(({data}) => { if (data && data.code === 0) { if (data.baseListData.length > 0) { this.modalData.technicalPlan = data.baseListData[0].username this.modalData.technicalPlanName = data.baseListData[0].user_display return } } this.modalData.technicalPlanName = '' }) } else { this.modalData.technicalPlanName = '' } }, // 采购输入校验
buyerBlur (tagNo) { if (this.modalData.buyer != null && this.modalData.buyer !== '') { let tempData = { tagno: tagNo, conditionSql: " and a.username = '" + this.modalData.buyer + "'" + " and b.site = '" + this.$store.state.user.site + "'" } verifyData(tempData).then(({data}) => { if (data && data.code === 0) { if (data.baseListData.length > 0) { this.modalData.buyer = data.baseListData[0].username this.modalData.buyerName = data.baseListData[0].user_display return } } this.modalData.buyerName = '' }) } else { this.modalData.buyerName = '' } } }}</script>
<style scoped></style>
|
