Skip to content

肖康 / cloudSystem

Go to a project
Commit 34dc1ab3 by liangjianmin
Options

refactor(orderTrack): enhance goods detail layout and functionality 

- Updated the goods detail component to improve layout consistency and user experience.
- Added a button for adding new contracts and ensured proper handling of contract data display.
- Refined the sign contract dialog for better usability and streamlined the contract signing process.
- Adjusted styles for improved visual appeal and responsiveness.
parent bd8b561e
Inline Side-by-side
Showing with 536 additions and 536 deletions
src/views/OrderTrack/goodsDetail.vue
<template> <template>
<section class="goods pagex"> <section class="goods pagex">
<div class="goods-con"> <div class="goods-con">
<div class="xktitle">基本信息</div> <div class="xktitle">基本信息</div>
<el-row :gutter="20" class="infoboxpx"> <el-row :gutter="20" class="infoboxpx">
<el-col :span="6"> <el-col :span="6">
<div class="">订货公司：{{ infos.company_name }}</div> <div class="">订货公司：{{ infos.company_name }}</div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="">订单状态：{{ infos.status_val }}</div> <div class="">订单状态：{{ infos.status_val }}</div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="">收款状态：{{ infos.pay_status_val }}</div> <div class="">收款状态：{{ infos.pay_status_val }}</div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="">发货状态：{{ infos.shipping_status_val }}</div> <div class="">发货状态：{{ infos.shipping_status_val }}</div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="">订单来源：{{ infos.source_type }}</div> <div class="">订单来源：{{ infos.source_type }}</div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="">订单人员：{{ infos.purchase_name }}</div> <div class="">订单人员：{{ infos.purchase_name }}</div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="">订单总额：{{ infos.purchase_amount }}</div> <div class="">订单总额：{{ infos.purchase_amount }}</div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="">币种：{{ infos.currency_val }}</div> <div class="">币种：{{ infos.currency_val }}</div>
</el-col> </el-col>
</el-row> </el-row>
<div class="xktitle" style="margin-bottom:10px;">合同信息</div> <div class="xktitle" style="margin-bottom:10px;">合同信息</div>
<div class="operation-button row verCenter" style="margin-bottom:10px;"> <div class="operation-button row verCenter" style="margin-bottom:10px;">
<el-button type="primary" @click="downloadContract">下载猎芯合同</el-button> <el-button type="primary" @click="downloadContract">下载猎芯合同</el-button>
<el-select v-model="selectedLang" placeholder="" style="margin-left:10px;width: 5%;"> <el-select v-model="selectedLang" placeholder="" style="margin-left:10px;width: 5%;">
<el-option v-for="option in langOptions" :label="option.label" :value="option.value" :key="option.value"></el-option> <el-option v-for="option in langOptions" :label="option.label" :value="option.value" :key="option.value"></el-option>
</el-select> </el-select>
</div> <el-button type="primary" @click="addContract" style="margin-left:10px;">新增合同</el-button>
<div class="data-box th-all" style="margin-bottom:20px;"> </div>
<el-table :data="contractData" border> <div class="data-box th-all" style="margin-bottom:20px;">
<el-table-column prop="languageType" label="语言" width="50"></el-table-column> <el-table :data="contractData" border>
<el-table-column prop="contractSn" label="合同编号" min-width="225" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="languageType" label="语言" width="50"></el-table-column>
<el-table-column label="合同附件" width="100" align="center"> <el-table-column prop="contractSn" label="合同编号" min-width="225" :show-overflow-tooltip="true"></el-table-column>
<template slot-scope="scope"> <el-table-column label="合同附件" width="100" align="center">
<el-link v-if="scope.row.contractFileUrl != ''" :href="scope.row.contractFileUrl + '?fileType=pdf'" target="_blank" style="font-size:12px;color:#409eff;">查看</el-link> <template slot-scope="scope">
</template> <el-link v-if="scope.row.contractFileUrl != ''" :href="scope.row.contractFileUrl + '?fileType=pdf'" target="_blank" style="font-size:12px;color:#409eff;">查看</el-link>
</el-table-column> </template>
<el-table-column prop="contractBuildTime" label="生成时间" width="160"></el-table-column> </el-table-column>
<el-table-column prop="createName" label="上传人" width="93"></el-table-column> <el-table-column prop="contractBuildTime" label="生成时间" width="160"></el-table-column>
<el-table-column prop="contractReturnDate" label="回传时间" width="160"></el-table-column> <el-table-column prop="createName" label="上传人" width="93"></el-table-column>
<el-table-column prop="sign_time_val" label="签署时间" width="160"></el-table-column> <el-table-column prop="contractReturnDate" label="回传时间" width="160"></el-table-column>
<el-table-column prop="sign_status_val" label="签署状态" width="84"></el-table-column> <el-table-column prop="sign_time_val" label="签署时间" width="160"></el-table-column>
<el-table-column prop="statusValue" label="状态" width="80"> <el-table-column prop="sign_status_val" label="签署状态" width="84"></el-table-column>
<template slot-scope="scope"> <el-table-column prop="statusValue" label="状态" width="80">
<template v-if="scope.row.status == -1"> <template slot-scope="scope">
<span>{{ scope.row.statusValue }}</span> <template v-if="scope.row.status == -1">
<el-tooltip :aa="scope" class="item" effect="dark" placement="top-start"> <span>{{ scope.row.statusValue }}</span>
<i class="el-icon-question" style="color:#ff7e11;margin-left:5px;cursor:pointer;font-size:16px;"></i> <el-tooltip :aa="scope" class="item" effect="dark" placement="top-start">
<div slot="content">{{ scope.row.invalidate_reason }}</div> <i class="el-icon-question" style="color:#ff7e11;margin-left:5px;cursor:pointer;font-size:16px;"></i>
</el-tooltip> <div slot="content">{{ scope.row.invalidate_reason }}</div>
</template> </el-tooltip>
<span v-else>{{ scope.row.statusValue }}</span> </template>
</template> <span v-else>{{ scope.row.statusValue }}</span>
</el-table-column> </template>
<el-table-column prop="expire_time_val" label="失效时间" width="145"></el-table-column> </el-table-column>
<el-table-column prop="contract_type_val" label="类型" width="120"></el-table-column> <el-table-column prop="expire_time_val" label="失效时间" width="145"></el-table-column>
<el-table-column fixed="right" label="操作" width="120" align="center"> <el-table-column prop="contract_type_val" label="类型" width="120"></el-table-column>
<template slot-scope="scope"> <el-table-column fixed="right" label="操作" width="120" align="center">
<el-row> <template slot-scope="scope">
<!-- 电子签 --> <el-row>
<template v-if="scope.row.contract_type == 2"> <!-- 电子签 -->
<!-- 签署状态为待签署+状态为有效 --> <template v-if="scope.row.contract_type == 2">
<el-button type="primary" @click="showSignDialog(scope.row)" v-if="scope.row.status == 1 && scope.row.sign_status == 2">签署合同</el-button> <!-- 签署状态为待签署+状态为有效 -->
</template> <el-button type="primary" @click="showSignDialog(scope.row)" v-if="scope.row.status == 1 && scope.row.sign_status == 2">签署合同</el-button>
<!-- 人工签 --> </template>
<template v-else> <!-- 人工签 -->
<!-- 深贸电子 --> <template v-else>
<template v-if="infos.company_id == 2 && infos.status != 4 && infos.status != -3 && scope.row.status == 1"> <!-- 深贸电子 -->
<el-button v-if="scope.row.contractFileUrl" type="primary" @click="delContract(scope.row)">删除</el-button> <template v-if="infos.company_id == 2 && infos.status != 4 && infos.status != -3 && scope.row.status == 1">
<el-upload v-else-if="scope.row.languageType == '中文'" :headers="{ Authorization: 'Bearer ' + token }" :data="getUploadData(scope.row)" :action="uploadUrl" :on-success="handleUploadSuccess"> <el-button v-if="scope.row.contractFileUrl" type="primary" @click="delContract(scope.row)">删除</el-button>
<el-button type="primary">上传PI</el-button> <el-upload v-else-if="scope.row.languageType == '中文'" :headers="{ Authorization: 'Bearer ' + token }" :data="getUploadData(scope.row)" :action="uploadUrl" :on-success="handleUploadSuccess">
</el-upload> <el-button type="primary">上传PI</el-button>
<el-upload v-else-if="scope.row.languageType == '英文'" :headers="{ Authorization: 'Bearer ' + token }" :data="getUploadData(scope.row)" :action="uploadUrl" :on-success="handleUploadSuccess"> </el-upload>
<el-button type="primary">上传合同</el-button> <el-upload v-else-if="scope.row.languageType == '英文'" :headers="{ Authorization: 'Bearer ' + token }" :data="getUploadData(scope.row)" :action="uploadUrl" :on-success="handleUploadSuccess">
</el-upload> <el-button type="primary">上传合同</el-button>
</template> </el-upload>
<!-- 猎芯科技 --> </template>
<template v-else-if="infos.company_id == 1 && infos.status != 4 && infos.status != -3 && scope.row.status == 1"> <!-- 猎芯科技 -->
<el-button v-if="scope.row.contractFileUrl" type="primary" @click="delContract(scope.row)">删除</el-button> <template v-else-if="infos.company_id == 1 && infos.status != 4 && infos.status != -3 && scope.row.status == 1">
<el-upload v-else-if="scope.row.languageType == '中文'" :headers="{ Authorization: 'Bearer ' + token }" :data="getUploadData(scope.row)" :action="uploadUrl" :on-success="handleUploadSuccess"> <el-button v-if="scope.row.contractFileUrl" type="primary" @click="delContract(scope.row)">删除</el-button>
<el-button type="primary">上传合同</el-button> <el-upload v-else-if="scope.row.languageType == '中文'" :headers="{ Authorization: 'Bearer ' + token }" :data="getUploadData(scope.row)" :action="uploadUrl" :on-success="handleUploadSuccess">
</el-upload> <el-button type="primary">上传合同</el-button>
</template> </el-upload>
</template> </template>
</el-row> </template>
</template> </el-row>
</el-table-column> </template>
</el-table> </el-table-column>
</div> </el-table>
<!-- 型号明细 --> </div>
<div class="xktitle" style="margin-bottom:20px;">型号明细</div> <!-- 型号明细 -->
<div class="data-box th-all" v-if="tableData"> <div class="xktitle" style="margin-bottom:20px;">型号明细</div>
<el-table :data="tableData" border> <div class="data-box th-all" v-if="tableData">
<el-table-column prop="quote_sn" label="报价单号" min-width="150"></el-table-column> <el-table :data="tableData" border>
<el-table-column prop="goods_name" label="型号" min-width="150"></el-table-column> <el-table-column prop="quote_sn" label="报价单号" min-width="150"></el-table-column>
<el-table-column prop="brand_name" label="品牌" min-width="150"></el-table-column> <el-table-column prop="goods_name" label="型号" min-width="150"></el-table-column>
<el-table-column prop="purchase_qty" label="订单数量" width="100"></el-table-column> <el-table-column prop="brand_name" label="品牌" min-width="150"></el-table-column>
<el-table-column prop="price_without_tax" label="单价(未税)" width="110"></el-table-column> <el-table-column prop="purchase_qty" label="订单数量" width="100"></el-table-column>
<el-table-column prop="price_in_tax" label="单价(含税)" width="110"></el-table-column> <el-table-column prop="price_without_tax" label="单价(未税)" width="110"></el-table-column>
<el-table-column prop="total_amount" label="小计" width="110"></el-table-column> <el-table-column prop="price_in_tax" label="单价(含税)" width="110"></el-table-column>
<el-table-column prop="out_qty" label="已发货" width="70"></el-table-column> <el-table-column prop="total_amount" label="小计" width="110"></el-table-column>
<el-table-column prop="no_out_qty" label="未发货" width="70"></el-table-column> <el-table-column prop="out_qty" label="已发货" width="70"></el-table-column>
<el-table-column prop="source_type" label="来源" width="100"></el-table-column> <el-table-column prop="no_out_qty" label="未发货" width="70"></el-table-column>
</el-table> <el-table-column prop="source_type" label="来源" width="100"></el-table-column>
</div> </el-table>
</div> </div>
<!-- 签署合同弹窗 -->
<el-dialog title="签署合同" :visible.sync="signDialogVisible" width="900px" :before-close="closeSignDialog">
<div class="sign-contract-content" @scroll="handleScroll" ref="contractContent">
<div class="title column rowCenter verCenter">
<h2>{{ signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyACompanyName || '' }}</h2>
<h4>采购合同</h4>
</div> </div>
<table class="sign-table norder sign-table-left">
<tr>
<td style="position: relative;">
<span class="label letter">编号：</span>
<span class="value-text">{{ signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.purchaseNum || '' }}</span>
<i class="company-logo" v-if="signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.companyId == 1"></i>
</td>
<td>
<span class="label letter">日期：</span>
<span class="value-text">{{ signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.date || '' }}</span>
</td>
</tr>
<tr>
<td>
<span class="label letter">甲方：</span>
<span class="value-text">{{ signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyACompanyName || '' }}</span>
</td>
<td>
<span class="label letter">乙方：</span>
<span class="value-text">{{ signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyBCompanyName || '' }}</span>
</td>
</tr>
<tr>
<td>
<span class="label">联系人：</span>
<span class="value-text">&nbsp;{{ signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyAContactName || '' }}</span>
</td>
<td>
<span class="label">联系人：</span>
<!-- <span class="value-text">&nbsp;{{ signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyBContactName || '' }}</span> -->
</td>
</tr>
<tr>
<td>
<span class="label letter">地址：</span>
<span class="value-text">深圳市龙岗区坂田街道清丽路1号宝能科技园12栋11楼</span>
</td>
<td>
<span class="label letter">地址：</span>
<span class="value-text">{{ signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyBAddress || '' }}</span>
</td>
</tr>
<tr v-if="signContractData.pdfInfo">
<td style="position: relative;">
<span class="label letter">电话：</span>
<span class="value-text">{{ signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyATel || '' }}</span>
<template v-if="signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.companyId == 1">
<i class="stamp"></i>
</template>
<template v-else>
<i class="stamp-hk"></i>
</template>
</td>
<td>
<span class="label letter">电话：</span>
<span class="value-text">{{ signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyBTel || '' }}</span>
</td>
</tr>
</table>
<table class="sign-table" v-if="signContractData.pdfInfo">
<tr>
<th>项次</th>
<th>物料名称</th>
<th>品牌</th>
<th>数量</th>
<th>批次</th>
<th>单价</th>
<th>金额</th>
<th>交货日期</th>
<th>入仓单号</th>
<th>备注</th>
</tr>
<tr v-for="(item, index) in signContractData.pdfInfo.itemList" :key="index">
<td>{{ item.index }}</td>
<td>{{ item.goodsName }}</td>
<td>{{ item.brandName }}</td>
<td>{{ item.purchaseQty }}</td>
<td>{{ item.dateCode }}</td>
<td>{{ item.unitPrice }}</td>
<td>{{ item.price }}</td>
<td>{{ item.estimatDeliveryTime }}</td>
<td>{{ item.warehouseReceiptSn }}</td>
<td>{{ item.frqRemark }}</td>
</tr>
</table>
<p class="row total" v-if="signContractData.pdfInfo">
<span>合计({{ signContractData.pdfInfo.currencyType }})：{{ signContractData.pdfInfo.itemPriceTotal }}</span>
</p>
<div class="sign-text">
<p><b>交易条款：</b></p>
<p>
一、<b>交货地点：深圳市龙岗区坂田街道清丽路1号宝能科技园南区12栋10楼(送货时，请备注入仓单号)</b><br>
<b style="margin-left: 26px;">发票邮寄地址：深圳市龙岗区坂田街道清丽路1号宝能科技园南区12栋11楼</b>
</p>
<p>
二、付款方式： 预付款。 三、发货方式： 包邮 货交甲方验收合格前，风险由乙方承担。
</p>
<p>
四、以上价格为含税人民币价格，提供13%增值税专用发票。
</p>
<p>
五、【品质要求】：<br>
1. 乙方供应的产品,各项指标均符合产品制造商的技术指标。甲方验收或使用过程中,实际测试参数与规格书参数不一样的，甲方有权进行批
量退货；给甲方造成其他损失的，乙方还应当赔偿甲方的实际损失。<br>
2. 乙方提供的产品必须与采购合同的料号规格一致，并符合与合同约定协议要求。有任何变更，乙方要及时通知甲方，并经甲方确认接受更
改后执行，否则甲方可以拒收、退货。视情节影响程度，有权要求乙方承担相关的损失赔偿。<br>
3. 乙方保证提供的产品均来源于原厂正规供销体系，产品外观及管脚正常，并保证产品未经使用，没有翻新、更改丝印、更改产品包装的重
要信息（型号、生产日期、产地等）等。产品处于原厂规定的保质期，并符合原厂官方发布的存储（非拆包产品包装耗材不得更改，密封包
装产品需保证未氧化而且湿度处于正常等级）、运输要求。<br>
</p> <!-- 签署合同弹窗 -->
<p> <el-dialog title="签署合同" :visible.sync="signDialogVisible" width="900px" :before-close="closeSignDialog">
<b>4.要求全新原装，原标签原包装，如整包装，不接受原真空包装破损漏气。</b> <div class="sign-contract-content" @scroll="handleScroll" ref="contractContent">
</p> <div class="title column rowCenter verCenter">
<p> <h2>{{ signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyACompanyName || '' }}</h2>
六、<b>【交付】：</b><br> <h4>采购合同</h4>
1. 乙方对交付甲方的产品的相关认证必须符合或适用于中国的相关要求。<br> </div>
2. 乙方在双方规定的交期内交货，如遇不可抗力因素导致无法按期交货，需及时与甲方沟通，共同解决交期问题。如乙方交期延迟，每迟延 <table class="sign-table norder sign-table-left">
一日，应按照当期货款的千分之三支付违约金；迟延超过3日的，甲乙双方协商解决，协商不成，甲方有权解除本协议，并要求按照总货款 <tr>
的30%￥支付违约金。违约金不足以覆盖甲方损失的，甲方有权要求乙方赔偿相关的损失（包括但不限于直接损失、间接损失及因维权产生 <td style="position: relative;">
的诉讼费、保全费、保全担保/保险费、检测费、鉴定费、律师费、差旅费等费用）。<br> <span class="label letter">编号：</span>
</p> <span class="value-text">{{ signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.purchaseNum || '' }}</span>
<p> <i class="company-logo" v-if="signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.companyId == 1"></i>
七、<b>【品质问题归责】：</b><br> </td>
1.一旦产生产品品质引起的交易纠纷，乙方需向甲方提供品质追溯的管理办法并协助甲方完成品质问题的认定及追溯。<br> <td>
2.如双方对问题归责方有异议，甲方可依据双方认可的第三方检测机构出具分析报告做出评定，检测费用由过错方承担。<br> <span class="label letter">日期：</span>
3.自双方确认品质责任之日起，乙方协助甲方处理终端问题，并由甲方向乙方提报损失费用，由乙方对甲方进行经济赔偿。<br> <span class="value-text">{{ signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.date || '' }}</span>
4.因产品品质问题引起的损失经双方确认，属于乙方责任的，实际发生费用由乙方负责承担。<br> </td>
八、争议解决 </tr>
如甲乙双方因本协议产生争议，双方应协商解决，协商不成，双方同意由甲方所在地人民法院管辖，适用中国法律（为本协议表述之方便， <tr>
不包括香港特别行政区、澳门特别行政区、台湾地区）进行审理。<br> <td>
九、甲乙双方的指定对接人通过甲方商家系统账号发送的订单或者订单确认信息均属于双方合意的重要体现。甲方指定对接人通过商家系统推送电子采购合同给到乙方后，乙方指定对接人通过乙方在甲方商家系统设立的账号点击确认签署合同，即构成对订单的有效确认，订单自双方对接人通过商家系统确认之日起生效。 <span class="label letter">甲方：</span>
</p> <span class="value-text">{{ signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyACompanyName || '' }}</span>
</div> </td>
<table class="sign-table norder sign-table-left" style="margin-top: 30px;" v-if="signContractData.pdfInfo"> <td>
<tr> <span class="label letter">乙方：</span>
<td> <span class="value-text">{{ signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyBCompanyName || '' }}</span>
<span class="label letter label-width">甲方：</span> </td>
<span class="value-text">{{ signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyACompanyName }}</span> </tr>
</td> <tr>
<td> <td>
<span class="label letter label-width">乙方：</span> <span class="label">联系人：</span>
<span class="value-text">{{ signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyBCompanyName }}</span> <span class="value-text">&nbsp;{{ signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyAContactName || '' }}</span>
</td> </td>
</tr> <td>
<tr> <span class="label">联系人：</span>
<td> </td>
<span class="label letter label-width">经办人：</span> </tr>
<span class="value-text">{{ signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyAContactName }}</span> <tr>
</td> <td>
<td> <span class="label letter">地址：</span>
<span class="label letter label-width">经办人：</span> <span class="value-text">深圳市龙岗区坂田街道清丽路1号宝能科技园12栋11楼</span>
<!-- <span class="value-text">{{ signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyBContactName }}</span> --> </td>
</td> <td>
</tr> <span class="label letter">地址：</span>
<tr> <span class="value-text">{{ signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyBAddress || '' }}</span>
<td> </td>
<span class="label letter label-width">批准：</span> </tr>
<span class="value-text"></span> <tr v-if="signContractData.pdfInfo">
</td> <td style="position: relative;">
<td> <span class="label letter">电话：</span>
<span class="label letter label-width">批准：</span> <span class="value-text">{{ signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyATel || '' }}</span>
<span class="value-text"></span> <template v-if="signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.companyId == 1">
</td> <i class="stamp"></i>
</tr> </template>
<tr> <template v-else>
<td style="position: relative;"> <i class="stamp-hk"></i>
<span class="label letter label-width">合同专用章：</span> </template>
<span class="value-text"></span> </td>
<template v-if="signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.companyId == 1"> <td>
<i class="stamp"></i> <span class="label letter">电话：</span>
</template> <span class="value-text">{{ signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyBTel || '' }}</span>
<template v-else> </td>
<i class="stamp-hk"></i> </tr>
</template> </table>
</td> <table class="sign-table" v-if="signContractData.pdfInfo">
<td style="position: relative;"> <tr>
<span class="label letter label-width">授权签字(代表)：</span> <th>项次</th>
<span class="value-text"></span> <th>物料名称</th>
<div class="seal" v-if="signContractData.to_sign_user_info && signContractData.to_sign_user_info.name"> <th>品牌</th>
<p>{{ signContractData.to_sign_user_info.name }}</p> <th>数量</th>
<p>{{ signContractData.to_sign_user_info.phone }}</p> <th>批次</th>
<p>{{ signContractData.to_sign_user_info.sign_date }}</p> <th>单价</th>
</div> <th>金额</th>
</td> <th>交货日期</th>
</tr> <th>入仓单号</th>
</table> <th>备注</th>
</div> </tr>
<div slot="footer" class="dialog-footer"> <tr v-for="(item, index) in signContractData.pdfInfo.itemList" :key="index">
<el-button @click="closeSignDialog">取消</el-button> <td>{{ item.index }}</td>
<el-button type="primary" @click="submitSignContract" :disabled="disabled">确认签署</el-button> <td>{{ item.goodsName }}</td>
</div> <td>{{ item.brandName }}</td>
</el-dialog> <td>{{ item.purchaseQty }}</td>
<td>{{ item.dateCode }}</td>
<td>{{ item.unitPrice }}</td>
<td>{{ item.price }}</td>
<td>{{ item.estimatDeliveryTime }}</td>
<td>{{ item.warehouseReceiptSn }}</td>
<td>{{ item.frqRemark }}</td>
</tr>
</table>
<p class="row total" v-if="signContractData.pdfInfo">
<span>合计({{ signContractData.pdfInfo.currencyType }})：{{ signContractData.pdfInfo.itemPriceTotal }}</span>
</p>
<div class="sign-text">
<p><b>交易条款：</b></p>
<p>
一、<b>交货地点：深圳市龙岗区坂田街道清丽路1号宝能科技园南区12栋10楼(送货时，请备注入仓单号)</b><br>
<b style="margin-left: 26px;">发票邮寄地址：深圳市龙岗区坂田街道清丽路1号宝能科技园南区12栋11楼</b>
</p>
<p>
二、付款方式： 预付款。 三、发货方式： 包邮 货交甲方验收合格前，风险由乙方承担。
</p>
<p>
四、以上价格为含税人民币价格，提供13%增值税专用发票。
</p>
<p>
五、【品质要求】：<br>
1. 乙方供应的产品,各项指标均符合产品制造商的技术指标。甲方验收或使用过程中,实际测试参数与规格书参数不一样的，甲方有权进行批
量退货；给甲方造成其他损失的，乙方还应当赔偿甲方的实际损失。<br>
2. 乙方提供的产品必须与采购合同的料号规格一致，并符合与合同约定协议要求。有任何变更，乙方要及时通知甲方，并经甲方确认接受更
改后执行，否则甲方可以拒收、退货。视情节影响程度，有权要求乙方承担相关的损失赔偿。<br>
3. 乙方保证提供的产品均来源于原厂正规供销体系，产品外观及管脚正常，并保证产品未经使用，没有翻新、更改丝印、更改产品包装的重
要信息（型号、生产日期、产地等）等。产品处于原厂规定的保质期，并符合原厂官方发布的存储（非拆包产品包装耗材不得更改，密封包
装产品需保证未氧化而且湿度处于正常等级）、运输要求。<br>
<Menu /> </p>
</section> <p>
<b>4.要求全新原装，原标签原包装，如整包装，不接受原真空包装破损漏气。</b>
</p>
<p>
六、<b>【交付】：</b><br>
1. 乙方对交付甲方的产品的相关认证必须符合或适用于中国的相关要求。<br>
2. 乙方在双方规定的交期内交货，如遇不可抗力因素导致无法按期交货，需及时与甲方沟通，共同解决交期问题。如乙方交期延迟，每迟延
一日，应按照当期货款的千分之三支付违约金；迟延超过3日的，甲乙双方协商解决，协商不成，甲方有权解除本协议，并要求按照总货款
的30%￥支付违约金。违约金不足以覆盖甲方损失的，甲方有权要求乙方赔偿相关的损失（包括但不限于直接损失、间接损失及因维权产生
的诉讼费、保全费、保全担保/保险费、检测费、鉴定费、律师费、差旅费等费用）。<br>
</p>
<p>
七、<b>【品质问题归责】：</b><br>
1.一旦产生产品品质引起的交易纠纷，乙方需向甲方提供品质追溯的管理办法并协助甲方完成品质问题的认定及追溯。<br>
2.如双方对问题归责方有异议，甲方可依据双方认可的第三方检测机构出具分析报告做出评定，检测费用由过错方承担。<br>
3.自双方确认品质责任之日起，乙方协助甲方处理终端问题，并由甲方向乙方提报损失费用，由乙方对甲方进行经济赔偿。<br>
4.因产品品质问题引起的损失经双方确认，属于乙方责任的，实际发生费用由乙方负责承担。<br>
八、争议解决
如甲乙双方因本协议产生争议，双方应协商解决，协商不成，双方同意由甲方所在地人民法院管辖，适用中国法律（为本协议表述之方便，
不包括香港特别行政区、澳门特别行政区、台湾地区）进行审理。<br>
九、甲乙双方的指定对接人通过甲方商家系统账号发送的订单或者订单确认信息均属于双方合意的重要体现。甲方指定对接人通过商家系统推送电子采购合同给到乙方后，乙方指定对接人通过乙方在甲方商家系统设立的账号点击确认签署合同，即构成对订单的有效确认，订单自双方对接人通过商家系统确认之日起生效。
</p>
</div>
<table class="sign-table norder sign-table-left" style="margin-top: 30px;" v-if="signContractData.pdfInfo">
<tr>
<td>
<span class="label letter label-width">甲方：</span>
<span class="value-text">{{ signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyACompanyName }}</span>
</td>
<td>
<span class="label letter label-width">乙方：</span>
<span class="value-text">{{ signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyBCompanyName }}</span>
</td>
</tr>
<tr>
<td>
<span class="label letter label-width">经办人：</span>
<span class="value-text">{{ signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyAContactName }}</span>
</td>
<td>
<span class="label letter label-width">经办人：</span>
</td>
</tr>
<tr>
<td>
<span class="label letter label-width">批准：</span>
<span class="value-text"></span>
</td>
<td>
<span class="label letter label-width">批准：</span>
<span class="value-text"></span>
</td>
</tr>
<tr>
<td style="position: relative;">
<span class="label letter label-width">合同专用章：</span>
<span class="value-text"></span>
<template v-if="signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.companyId == 1">
<i class="stamp"></i>
</template>
<template v-else>
<i class="stamp-hk"></i>
</template>
</td>
<td style="position: relative;">
<span class="label letter label-width">授权签字(代表)：</span>
<span class="value-text"></span>
<div class="seal" v-if="signContractData.to_sign_user_info && signContractData.to_sign_user_info.name">
<p>{{ signContractData.to_sign_user_info.name }}</p>
<p>{{ signContractData.to_sign_user_info.phone }}</p>
<p>{{ signContractData.to_sign_user_info.sign_date }}</p>
</div>
</td>
</tr>
</table>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="closeSignDialog">取消</el-button>
<el-button type="primary" @click="submitSignContract" :disabled="disabled">确认签署</el-button>
</div>
</el-dialog>
<Menu />
</section>
</template> </template>
<script> <script>
import Vue from 'vue'; import Vue from 'vue';
import Tool from '../../tool' import Tool from '../../tool'
import Menu from "@/components/menu.vue"; import Menu from "@/components/menu.vue";
import { Col, Message, MessageBox, Pagination, Row, Table, TableColumn, Select, Option, Link, Upload, Tooltip, Dialog } from 'element-ui'; import { Col, Message, MessageBox, Pagination, Row, Table, TableColumn, Select, Option, Link, Upload, Tooltip, Dialog } from 'element-ui';
import { NODE_ENVS } from "../../ajax"; import { NODE_ENVS } from "../../ajax";
Vue.prototype.$message = Message; Vue.prototype.$message = Message;
Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$confirm = MessageBox.confirm;
Vue.use(Pagination); Vue.use(Pagination);
Vue.use(TableColumn).use(Table).use(Row).use(Col).use(Select).use(Option).use(Link).use(Upload).use(Tooltip).use(Dialog); Vue.use(TableColumn).use(Table).use(Row).use(Col).use(Select).use(Option).use(Link).use(Upload).use(Tooltip).use(Dialog);
export default { export default {
name: "orderTrackGoodsDetail", name: "orderTrackGoodsDetail",
data() { data() {
return { return {
token: Tool.getCookie('token'), token: Tool.getCookie('token'),
supplier_id: 0, supplier_id: 0,
infos: {}, infos: {},
tableData: "", tableData: "",
purchase_id: "", purchase_id: "",
contractData: [], contractData: [],
langOptions: [], langOptions: [],
selectedLang: '', selectedLang: '',
uploadUrl: NODE_ENVS + '/api/purContract/updateOrderContract', uploadUrl: NODE_ENVS + '/api/purContract/updateOrderContract',
contract_id: '',//合同id contract_id: '',//合同id
fileData: { fileData: {
token: this.token, token: this.token,
contract_id: 0, contract_id: 0,
oss_file_id: '' oss_file_id: ''
},
signDialogVisible: false,
signContractData: {},
disabled: true
};
}, },
signDialogVisible: false, created() {
signContractData: {}, this.getData(this.$route.query.purchase_id);
disabled: true this.supplier_id = localStorage.getItem('supplier_id');
}; },
}, watch: {
created() { $route(to, from) {
this.getData(this.$route.query.purchase_id); if (to.path == '/orderTrackGoodsDetail') {
this.supplier_id = localStorage.getItem('supplier_id'); this.getData(to.query.purchase_id);
}, }
watch: {
$route(to, from) {
if (to.path == '/orderTrackGoodsDetail') {
this.getData(to.query.purchase_id);
}
}
},
computed: {
id: function () {
return this.$route.query.purchase_id
}
},
methods: {
getData() {
this.$http('post', "/api/purchase/purOrderDetail", { id: this.id }).then(res => {
if (res.code === 0) {
this.infos = res.data.purchase_info;
this.tableData = res.data.purchase_item_list || [];
this.contractData = res.data.pur_contract_list || [];
// 1猎芯科技，2深茂电子
if (this.infos.company_id == 1) {
this.langOptions = [
{ label: '中文', value: 1 }
];
this.selectedLang = 1;
} else {
this.langOptions = [
{ label: '中文', value: 2 },
{ label: '英文', value: 3 }
];
this.selectedLang = 2;
} }
} else { },
this.$message({ computed: {
message: res.msg, id: function () {
type: "error" return this.$route.query.purchase_id
}); }
} },
}) methods: {
}, getData() {
handleUploadSuccess(file, fileList) { this.$http('post', "/api/purchase/purOrderDetail", { id: this.id }).then(res => {
if (file.code === 0) { if (res.code === 0) {
this.$message({ this.infos = res.data.purchase_info;
message: '上传成功', this.tableData = res.data.purchase_item_list || [];
type: 'success' this.contractData = res.data.pur_contract_list || [];
}); // 1猎芯科技，2深茂电子
window.location.reload(); if (this.infos.company_id == 1) {
} else { this.langOptions = [
this.$message({ { label: '中文', value: 1 }
message: file.msg, ];
type: 'warning' this.selectedLang = 1;
}); } else {
} this.langOptions = [
}, { label: '中文', value: 2 },
//下载猎芯合同 { label: '英文', value: 3 }
downloadContract() { ];
let pdf_url = "" this.selectedLang = 2;
if (this.selectedLang == 1) { }
pdf_url = "/api/purContract/pdf"; } else {
} this.$message({
if (this.selectedLang == 2) { message: res.msg,
pdf_url = "/api/purContract/pdfHk"; type: "error"
} });
if (this.selectedLang == 3) { }
pdf_url = "/api/purContract/pdfUs"; })
} },
this.$http('get', pdf_url, { id: this.$route.query.purchase_id }, true, 'blob').then(res => { handleUploadSuccess(file, fileList) {
// 包装成 Blob 对象 if (file.code === 0) {
const blob = new Blob([res], { type: 'application/pdf' }); this.$message({
// 创建 URL 对象 message: '上传成功',
let pdfUrl = window.URL.createObjectURL(blob); type: 'success'
window.open(pdfUrl, '_blank'); });
}) window.location.reload();
}, } else {
// 删除合同 this.$message({
delContract(contractItem) { message: file.msg,
this.$http('post', "/api/purContract/updateOrderContract", { type: 'warning'
contract_id: contractItem.contractId, });
type: 'delete' }
}).then(res => { },
console.log(res); //下载猎芯合同
if (res.code === 0) { downloadContract() {
this.$message({ let pdf_url = ""
message: '删除成功', if (this.selectedLang == 1) {
type: 'success' pdf_url = "/api/purContract/pdf";
}); }
window.location.reload(); if (this.selectedLang == 2) {
} else { pdf_url = "/api/purContract/pdfHk";
this.$message({ }
message: file.msg, if (this.selectedLang == 3) {
type: 'warning' pdf_url = "/api/purContract/pdfUs";
}); }
} this.$http('get', pdf_url, { id: this.$route.query.purchase_id }, true, 'blob').then(res => {
}) // 包装成 Blob 对象
}, const blob = new Blob([res], { type: 'application/pdf' });
// 签署合同 // 创建 URL 对象
showSignDialog(contractItem) { let pdfUrl = window.URL.createObjectURL(blob);
this.contract_id = contractItem.contractId; window.open(pdfUrl, '_blank');
})
},
// 删除合同
delContract(contractItem) {
this.$http('post', "/api/purContract/updateOrderContract", {
contract_id: contractItem.contractId,
type: 'delete'
}).then(res => {
console.log(res);
if (res.code === 0) {
this.$message({
message: '删除成功',
type: 'success'
});
window.location.reload();
} else {
this.$message({
message: file.msg,
type: 'warning'
});
}
})
},
// 签署合同
showSignDialog(contractItem) {
this.contract_id = contractItem.contractId;
//获取合同信息 //获取合同信息
this.$http('POST', "/api/purContract/getContractInfo", { contract_id: this.contract_id }).then(res => { this.$http('POST', "/api/purContract/getContractInfo", { contract_id: this.contract_id }).then(res => {
if (res.code === 0) { if (res.code === 0) {
this.signContractData = res.data; this.signContractData = res.data;
this.disabled = true; // 重置按钮状态 this.disabled = true; // 重置按钮状态
this.signDialogVisible = true; this.signDialogVisible = true;
} else { } else {
this.$message.error('获取合同信息失败'); this.$message.error('获取合同信息失败');
} }
}) })
}, },
// 关闭签署合同弹窗 // 关闭签署合同弹窗
closeSignDialog() { closeSignDialog() {
this.signDialogVisible = false; this.signDialogVisible = false;
}, },
// 提交签署合同 // 提交签署合同
submitSignContract() { submitSignContract() {
var confirmMessage = ''; var confirmMessage = '';
if (this.signContractData.isExistsOldContract == 1) { if (this.signContractData.isExistsOldContract == 1) {
// 存在已签署+有效+电子签的合同，提示2句话 // 存在已签署+有效+电子签的合同，提示2句话
confirmMessage = ` confirmMessage = `
<div style="text-align: left; padding: 10px;font-size: 14px;"> <div style="text-align: left; padding: 10px;font-size: 14px;">
<div style="color: #FF961C;margin-bottom: 6px;">请注意：</div> <div style="color: #FF961C;margin-bottom: 6px;">请注意：</div>
<div style="line-height: 1.5; color: #666;"> <div style="line-height: 1.5; color: #666;">
...@@ -488,9 +487,9 @@ ...@@ -488,9 +487,9 @@
</div> </div>
</div> </div>
`; `;
} else { } else {
// 不存在已签署+有效+电子签的合同，提示1句话 // 不存在已签署+有效+电子签的合同，提示1句话
confirmMessage = ` confirmMessage = `
<div style="text-align: left; padding: 10px;font-size: 14px;"> <div style="text-align: left; padding: 10px;font-size: 14px;">
<div style="color: #FF961C;margin-bottom: 6px;">请注意：</div> <div style="color: #FF961C;margin-bottom: 6px;">请注意：</div>
<div style="line-height: 1.5; color: #666;"> <div style="line-height: 1.5; color: #666;">
...@@ -498,79 +497,79 @@ ...@@ -498,79 +497,79 @@
</div> </div>
</div> </div>
`; `;
} }
this.$confirm(confirmMessage, '确认签署', { this.$confirm(confirmMessage, '确认签署', {
confirmButtonText: '确定签署', confirmButtonText: '确定签署',
cancelButtonText: '取消', cancelButtonText: '取消',
dangerouslyUseHTMLString: true, dangerouslyUseHTMLString: true,
customClass: 'sign-confirm-dialog' customClass: 'sign-confirm-dialog'
}).then(() => { }).then(() => {
this.$http('POST', "/api/purContract/signContract", { contract_id: this.contract_id }).then(res => { this.$http('POST', "/api/purContract/signContract", { contract_id: this.contract_id }).then(res => {
if (res.code === 0) { if (res.code === 0) {
this.$message({ this.$message({
message: '签署合同成功', message: '签署合同成功',
type: 'success', type: 'success',
onClose: () => { onClose: () => {
this.signDialogVisible = false; this.signDialogVisible = false;
this.getData(); this.getData();
}
});
} else {
this.$message.error(res.msg || '操作失败');
}
})
}).catch(() => {
// 用户取消签署
});
},
// 监听合同内容滚动事件，滚动到底部时启用签署按钮
handleScroll(event) {
// 如果已经启用按钮，不再检查滚动状态
if (!this.disabled) {
return;
} }
});
} else {
this.$message.error(res.msg || '操作失败');
}
})
}).catch(() => {
// 用户取消签署
});
},
// 监听合同内容滚动事件，滚动到底部时启用签署按钮
handleScroll(event) {
// 如果已经启用按钮，不再检查滚动状态
if (!this.disabled) {
return;
}
var contractContent = this.$refs.contractContent; var contractContent = this.$refs.contractContent;
// 检查是否距离底部100px // 检查是否距离底部100px
if (contractContent.scrollHeight - contractContent.scrollTop <= contractContent.clientHeight + 200) { if (contractContent.scrollHeight - contractContent.scrollTop <= contractContent.clientHeight + 200) {
this.disabled = false; this.disabled = false;
}
},
// 获取上传数据
getUploadData(row) {
return {
supplier_id: this.supplier_id,
contract_id: row.contractId,
type: 'upload'
};
}
},
components: {
Menu
} }
}, };
// 获取上传数据
getUploadData(row) {
return {
supplier_id: this.supplier_id,
contract_id: row.contractId,
type: 'upload'
};
}
},
components: {
Menu
}
};
</script> </script>
<style scoped> <style scoped>
@import "../../assets/css/goods/goods.min.css"; @import "../../assets/css/goods/goods.min.css";
@import "../../assets/css/public/contract.css"; @import "../../assets/css/public/contract.css";
.el-button--primary.is-disabled, .el-button--primary.is-disabled,
.el-button--primary.is-disabled:active, .el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover { .el-button--primary.is-disabled:hover {
color: #FFF !important; color: #FFF !important;
background-color: #a0cfff !important; background-color: #a0cfff !important;
border-color: #a0cfff !important; border-color: #a0cfff !important;
} }
</style> </style>
<style> <style>
.sign-confirm-dialog { .sign-confirm-dialog {
width: 574px !important; width: 574px !important;
} }
.sign-confirm-dialog .el-message-box { .sign-confirm-dialog .el-message-box {
width: 574px !important; width: 574px !important;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment