Skip to content

肖康 / cloudSystem

Go to a project
Commit 18721251 by liangjianmin
Options

feat: 添加香港印章样式，优化合同详情印章展示逻辑，提升用户体验

parent 533c4679
Inline Side-by-side
Showing with 241 additions and 209 deletions
src/assets/css/public/contract.css
...@@ -72,6 +72,16 @@ ...@@ -72,6 +72,16 @@
background: url("https://img.ichunt.com/images/ichunt/202507/04/b3b50c3ae7da89fc1ca83bd63de22b6e.png") no-repeat center; background: url("https://img.ichunt.com/images/ichunt/202507/04/b3b50c3ae7da89fc1ca83bd63de22b6e.png") no-repeat center;
background-size: cover; background-size: cover;
} }
.sign-contract-content .stamp-hk {
position: absolute;
left: 100px;
bottom: -30px;
width: 180px;
height: 180px;
display: block;
background: url("http://files.ichunt.net/download/1c9c10700102e0h1jrfm30") no-repeat center;
background-size: cover;
}
.sign-contract-content .company-logo { .sign-contract-content .company-logo {
position: absolute; position: absolute;
left: 0px; left: 0px;
......
src/assets/css/public/contract.less
...@@ -100,6 +100,17 @@ ...@@ -100,6 +100,17 @@
background-size: cover; background-size: cover;
} }
.stamp-hk {
position: absolute;
left: 100px;
bottom: -30px;
width: 180px;
height: 180px;
display: block;
background: url("http://files.ichunt.net/download/1c9c10700102e0h1jrfm30") no-repeat center;
background-size: cover;
}
.company-logo { .company-logo {
position: absolute; position: absolute;
left: 0px; left: 0px;
......
src/views/OrderTrack/goodsDetail.vue
...@@ -167,7 +167,12 @@ ...@@ -167,7 +167,12 @@
<td style="position: relative;"> <td style="position: relative;">
<span class="label letter">电话：</span> <span class="label letter">电话：</span>
<span class="value-text">{{ signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyATel || '' }}</span> <span class="value-text">{{ signContractData.pdfInfo && signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.partyATel || '' }}</span>
<i class="stamp" v-if="signContractData.pdfInfo.orderInfo && signContractData.pdfInfo.orderInfo.status >= 2"></i> <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>
<td> <td>
<span class="label letter">电话：</span> <span class="label letter">电话：</span>
...@@ -288,7 +293,12 @@ ...@@ -288,7 +293,12 @@
<td style="position: relative;"> <td style="position: relative;">
<span class="label letter label-width">合同专用章：</span> <span class="label letter label-width">合同专用章：</span>
<span class="value-text"></span> <span class="value-text"></span>
<i class="stamp"></i> <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>
<td style="position: relative;"> <td style="position: relative;">
<span class="label letter label-width">合同专用章：</span> <span class="label letter label-width">合同专用章：</span>
...@@ -312,128 +322,88 @@ ...@@ -312,128 +322,88 @@
</section> </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, signDialogVisible: false,
signContractData: {}, signContractData: {},
disabled: true disabled: true
}; };
},
created() {
this.getData(this.$route.query.purchase_id);
this.supplier_id = localStorage.getItem('supplier_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({
message: res.msg,
type: "error"
});
}
})
}, },
handleUploadSuccess(file, fileList) { created() {
if (file.code === 0) { this.getData(this.$route.query.purchase_id);
this.$message({ this.supplier_id = localStorage.getItem('supplier_id');
message: '上传成功',
type: 'success'
});
window.location.reload();
} else {
this.$message({
message: file.msg,
type: 'warning'
});
}
}, },
//下载猎芯合同 watch: {
downloadContract() { $route(to, from) {
let pdf_url = "" if (to.path == '/orderTrackGoodsDetail') {
if (this.selectedLang == 1) { this.getData(to.query.purchase_id);
pdf_url = "/api/purContract/pdf"; }
}
if (this.selectedLang == 2) {
pdf_url = "/api/purContract/pdfHk";
} }
if (this.selectedLang == 3) { },
pdf_url = "/api/purContract/pdfUs"; computed: {
id: function () {
return this.$route.query.purchase_id
} }
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 对象
let pdfUrl = window.URL.createObjectURL(blob);
window.open(pdfUrl, '_blank');
})
}, },
// 删除合同 methods: {
delContract(contractItem) { getData() {
this.$http('post', "/api/purContract/updateOrderContract", { this.$http('post', "/api/purchase/purOrderDetail", { id: this.id }).then(res => {
contract_id: contractItem.contractId, if (res.code === 0) {
type: 'delete' this.infos = res.data.purchase_info;
}).then(res => { this.tableData = res.data.purchase_item_list || [];
console.log(res); this.contractData = res.data.pur_contract_list || [];
if (res.code === 0) { // 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({
message: res.msg,
type: "error"
});
}
})
},
handleUploadSuccess(file, fileList) {
if (file.code === 0) {
this.$message({ this.$message({
message: '删除成功', message: '上传成功',
type: 'success' type: 'success'
}); });
window.location.reload(); window.location.reload();
...@@ -443,36 +413,76 @@ export default { ...@@ -443,36 +413,76 @@ export default {
type: 'warning' type: 'warning'
}); });
} }
}) },
}, //下载猎芯合同
// 签署合同 downloadContract() {
showSignDialog(contractItem) { let pdf_url = ""
this.contract_id = contractItem.contractId; if (this.selectedLang == 1) {
pdf_url = "/api/purContract/pdf";
}
if (this.selectedLang == 2) {
pdf_url = "/api/purContract/pdfHk";
}
if (this.selectedLang == 3) {
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 对象
let pdfUrl = window.URL.createObjectURL(blob);
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;">
...@@ -481,9 +491,9 @@ export default { ...@@ -481,9 +491,9 @@ export default {
</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;">
...@@ -491,79 +501,79 @@ export default { ...@@ -491,79 +501,79 @@ export default {
</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 { } else {
this.$message.error(res.msg || '操作失败'); this.$message.error(res.msg || '操作失败');
} }
}) })
}).catch(() => { }).catch(() => {
// 用户取消签署 // 用户取消签署
}); });
}, },
// 监听合同内容滚动事件，滚动到底部时启用签署按钮 // 监听合同内容滚动事件，滚动到底部时启用签署按钮
handleScroll(event) { handleScroll(event) {
// 如果已经启用按钮，不再检查滚动状态 // 如果已经启用按钮，不再检查滚动状态
if (!this.disabled) { if (!this.disabled) {
return; return;
} }
var contractContent = this.$refs.contractContent; var contractContent = this.$refs.contractContent;
// 检查是否滚动到底部 // 检查是否滚动到底部
if (contractContent.scrollHeight - contractContent.scrollTop === contractContent.clientHeight) { if (contractContent.scrollHeight - contractContent.scrollTop === contractContent.clientHeight) {
this.disabled = false; this.disabled = false;
}
},
// 获取上传数据
getUploadData(row) {
return {
supplier_id: this.supplier_id,
contract_id: row.contractId,
type: 'upload'
};
} }
}, },
// 获取上传数据 components: {
getUploadData(row) { Menu
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