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 @@
background: url("https://img.ichunt.com/images/ichunt/202507/04/b3b50c3ae7da89fc1ca83bd63de22b6e.png") no-repeat center;
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 {
position: absolute;
left: 0px;
......
src/assets/css/public/contract.less
......@@ -100,6 +100,17 @@
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 {
position: absolute;
left: 0px;
......
src/views/OrderTrack/goodsDetail.vue
......@@ -167,7 +167,12 @@
<td style="position: relative;">
<span class="label letter">电话：</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>
<span class="label letter">电话：</span>
......@@ -288,7 +293,12 @@
<td style="position: relative;">
<span class="label letter label-width">合同专用章：</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 style="position: relative;">
<span class="label letter label-width">合同专用章：</span>
......@@ -312,128 +322,88 @@
</section>
</template>
<script>
import Vue from 'vue';
import Tool from '../../tool'
import Menu from "@/components/menu.vue";
import { Col, Message, MessageBox, Pagination, Row, Table, TableColumn, Select, Option, Link, Upload, Tooltip, Dialog } from 'element-ui';
import { NODE_ENVS } from "../../ajax";
import Vue from 'vue';
import Tool from '../../tool'
import Menu from "@/components/menu.vue";
import { Col, Message, MessageBox, Pagination, Row, Table, TableColumn, Select, Option, Link, Upload, Tooltip, Dialog } from 'element-ui';
import { NODE_ENVS } from "../../ajax";
Vue.prototype.$message = Message;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.use(Pagination);
Vue.use(TableColumn).use(Table).use(Row).use(Col).use(Select).use(Option).use(Link).use(Upload).use(Tooltip).use(Dialog);
export default {
name: "orderTrackGoodsDetail",
data() {
return {
token: Tool.getCookie('token'),
supplier_id: 0,
infos: {},
tableData: "",
purchase_id: "",
contractData: [],
langOptions: [],
selectedLang: '',
uploadUrl: NODE_ENVS + '/api/purContract/updateOrderContract',
contract_id: '',//合同id
fileData: {
token: this.token,
contract_id: 0,
oss_file_id: ''
},
signDialogVisible: false,
signContractData: {},
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"
});
}
})
Vue.prototype.$message = Message;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.use(Pagination);
Vue.use(TableColumn).use(Table).use(Row).use(Col).use(Select).use(Option).use(Link).use(Upload).use(Tooltip).use(Dialog);
export default {
name: "orderTrackGoodsDetail",
data() {
return {
token: Tool.getCookie('token'),
supplier_id: 0,
infos: {},
tableData: "",
purchase_id: "",
contractData: [],
langOptions: [],
selectedLang: '',
uploadUrl: NODE_ENVS + '/api/purContract/updateOrderContract',
contract_id: '',//合同id
fileData: {
token: this.token,
contract_id: 0,
oss_file_id: ''
},
signDialogVisible: false,
signContractData: {},
disabled: true
};
},
handleUploadSuccess(file, fileList) {
if (file.code === 0) {
this.$message({
message: '上传成功',
type: 'success'
});
window.location.reload();
} else {
this.$message({
message: file.msg,
type: 'warning'
});
}
created() {
this.getData(this.$route.query.purchase_id);
this.supplier_id = localStorage.getItem('supplier_id');
},
//下载猎芯合同
downloadContract() {
let pdf_url = ""
if (this.selectedLang == 1) {
pdf_url = "/api/purContract/pdf";
}
if (this.selectedLang == 2) {
pdf_url = "/api/purContract/pdfHk";
watch: {
$route(to, from) {
if (to.path == '/orderTrackGoodsDetail') {
this.getData(to.query.purchase_id);
}
}
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');
})
},
// 删除合同
delContract(contractItem) {
this.$http('post', "/api/purContract/updateOrderContract", {
contract_id: contractItem.contractId,
type: 'delete'
}).then(res => {
console.log(res);
if (res.code === 0) {
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) {
if (file.code === 0) {
this.$message({
message: '删除成功',
message: '上传成功',
type: 'success'
});
window.location.reload();
......@@ -443,36 +413,76 @@ export default {
type: 'warning'
});
}
})
},
// 签署合同
showSignDialog(contractItem) {
this.contract_id = contractItem.contractId;
},
//下载猎芯合同
downloadContract() {
let pdf_url = ""
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 => {
if (res.code === 0) {
this.signContractData = res.data;
//获取合同信息
this.$http('POST', "/api/purContract/getContractInfo", { contract_id: this.contract_id }).then(res => {
if (res.code === 0) {
this.signContractData = res.data;
this.disabled = true; // 重置按钮状态
this.signDialogVisible = true;
} else {
this.$message.error('获取合同信息失败');
}
})
this.disabled = true; // 重置按钮状态
this.signDialogVisible = true;
} else {
this.$message.error('获取合同信息失败');
}
})
},
// 关闭签署合同弹窗
closeSignDialog() {
this.signDialogVisible = false;
},
// 提交签署合同
submitSignContract() {
var confirmMessage = '';
},
// 关闭签署合同弹窗
closeSignDialog() {
this.signDialogVisible = false;
},
// 提交签署合同
submitSignContract() {
var confirmMessage = '';
if (this.signContractData.isExistsOldContract == 1) {
// 存在已签署+有效+电子签的合同，提示2句话
confirmMessage = `
if (this.signContractData.isExistsOldContract == 1) {
// 存在已签署+有效+电子签的合同，提示2句话
confirmMessage = `
<div style="text-align: left; padding: 10px;font-size: 14px;">
<div style="color: #FF961C;margin-bottom: 6px;">请注意：</div>
<div style="line-height: 1.5; color: #666;">
......@@ -481,9 +491,9 @@ export default {
</div>
</div>
`;
} else {
// 不存在已签署+有效+电子签的合同，提示1句话
confirmMessage = `
} else {
// 不存在已签署+有效+电子签的合同，提示1句话
confirmMessage = `
<div style="text-align: left; padding: 10px;font-size: 14px;">
<div style="color: #FF961C;margin-bottom: 6px;">请注意：</div>
<div style="line-height: 1.5; color: #666;">
......@@ -491,79 +501,79 @@ export default {
</div>
</div>
`;
}
}
this.$confirm(confirmMessage, '确认签署', {
confirmButtonText: '确定签署',
cancelButtonText: '取消',
dangerouslyUseHTMLString: true,
customClass: 'sign-confirm-dialog'
}).then(() => {
this.$http('POST', "/api/purContract/signContract", { contract_id: this.contract_id }).then(res => {
if (res.code === 0) {
this.$message({
message: '签署合同成功',
type: 'success',
onClose: () => {
this.signDialogVisible = false;
this.getData();
}
});
} else {
this.$message.error(res.msg || '操作失败');
}
})
}).catch(() => {
// 用户取消签署
});
},
// 监听合同内容滚动事件，滚动到底部时启用签署按钮
handleScroll(event) {
// 如果已经启用按钮，不再检查滚动状态
if (!this.disabled) {
return;
}
this.$confirm(confirmMessage, '确认签署', {
confirmButtonText: '确定签署',
cancelButtonText: '取消',
dangerouslyUseHTMLString: true,
customClass: 'sign-confirm-dialog'
}).then(() => {
this.$http('POST', "/api/purContract/signContract", { contract_id: this.contract_id }).then(res => {
if (res.code === 0) {
this.$message({
message: '签署合同成功',
type: 'success',
onClose: () => {
this.signDialogVisible = false;
this.getData();
}
});
} else {
this.$message.error(res.msg || '操作失败');
}
})
}).catch(() => {
// 用户取消签署
});
},
// 监听合同内容滚动事件，滚动到底部时启用签署按钮
handleScroll(event) {
// 如果已经启用按钮，不再检查滚动状态
if (!this.disabled) {
return;
}
var contractContent = this.$refs.contractContent;
// 检查是否滚动到底部
if (contractContent.scrollHeight - contractContent.scrollTop === contractContent.clientHeight) {
this.disabled = false;
var contractContent = this.$refs.contractContent;
// 检查是否滚动到底部
if (contractContent.scrollHeight - contractContent.scrollTop === contractContent.clientHeight) {
this.disabled = false;
}
},
// 获取上传数据
getUploadData(row) {
return {
supplier_id: this.supplier_id,
contract_id: row.contractId,
type: 'upload'
};
}
},
// 获取上传数据
getUploadData(row) {
return {
supplier_id: this.supplier_id,
contract_id: row.contractId,
type: 'upload'
};
components: {
Menu
}
},
components: {
Menu
}
};
};
</script>
<style scoped>
@import "../../assets/css/goods/goods.min.css";
@import "../../assets/css/public/contract.css";
@import "../../assets/css/goods/goods.min.css";
@import "../../assets/css/public/contract.css";
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover {
color: #FFF !important;
background-color: #a0cfff !important;
border-color: #a0cfff !important;
}
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover {
color: #FFF !important;
background-color: #a0cfff !important;
border-color: #a0cfff !important;
}
</style>
<style>
.sign-confirm-dialog {
width: 574px !important;
}
.sign-confirm-dialog {
width: 574px !important;
}
.sign-confirm-dialog .el-message-box {
width: 574px !important;
}
.sign-confirm-dialog .el-message-box {
width: 574px !important;
}
</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