feat(contract): 新增合同预览和列表组件
refactor(QRCode): 优化二维码组件并修复空值检查 将QRCode组件从print目录移动到components目录,并添加空值检查防止错误 feat(crm): 在合同模型中添加交货日期字段 在CrmContract、CrmContractVo、CrmContractBo及相关Mapper中添加deliveryDate字段 refactor(wms): 统一使用全局QRCode组件路径 将多个文件中的QRCode引用路径从相对路径改为@/components/QRCode style(order): 调整订单页面标签顺序 调整操作记录和发货配卷标签的顺序 chore: 删除废弃的打印相关文件 移除print目录下不再使用的QRCode、CodeRenderer等组件和页面
This commit is contained in:
106
klp-ui/src/views/crm/contract/components/ContractPreview.vue
Normal file
106
klp-ui/src/views/crm/contract/components/ContractPreview.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div class="contract-preview">
|
||||
<div v-if="contract" class="preview-content">
|
||||
<h3 style="margin-bottom: 20px; color: #303133; display: flex; justify-content: space-between; align-items: center;">
|
||||
{{ contract.contractName }}
|
||||
<el-select v-hasPermi="['crm:contract:status']" v-model="contract.status" placeholder="请选择合同状态" style="width: 150px;" @change="handleStatusChange">
|
||||
<el-option label="草稿" :value="0" />
|
||||
<el-option label="已生效" :value="1" />
|
||||
<el-option label="已作废" :value="2" />
|
||||
<el-option label="已完成" :value="3" />
|
||||
</el-select>
|
||||
</h3>
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="合同编号">{{ contract.contractNo }}</el-descriptions-item>
|
||||
<el-descriptions-item label="合同状态">
|
||||
<el-tag :type="contract.status == 0 ? 'info' : contract.status == 1 ? 'success' : contract.status == 2 ? 'danger' : 'primary'">
|
||||
{{ contract.status == 0 ? '草稿' : contract.status == 1 ? '已生效' : contract.status == 2 ? '已作废' : '已完成' }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="供方">{{ contract.supplier }}</el-descriptions-item>
|
||||
<el-descriptions-item label="需方">{{ contract.customer }}</el-descriptions-item>
|
||||
<el-descriptions-item label="签订时间">{{ parseTime(contract.signTime, '{y}-{m}-{d}') }}</el-descriptions-item>
|
||||
<el-descriptions-item label="交货日期">{{ parseTime(contract.deliveryDate, '{y}-{m}-{d}') }}</el-descriptions-item>
|
||||
<el-descriptions-item label="签订地点">{{ contract.signLocation }}</el-descriptions-item>
|
||||
<el-descriptions-item label="备注">{{ contract.remark }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<div style="margin-top: 20px;">
|
||||
<h4 style="margin-bottom: 10px; color: #606266;">产品内容</h4>
|
||||
<div v-html="contract.productContent" style="border: 1px solid #e4e7ed; padding: 10px; border-radius: 4px;"></div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 20px;">
|
||||
<h4 style="margin-bottom: 10px; color: #606266;">合同内容</h4>
|
||||
<div v-html="contract.contractContent" style="border: 1px solid #e4e7ed; padding: 10px; border-radius: 4px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-selection" style="display: flex; align-items: center; justify-content: center; height: 100%;">
|
||||
<el-empty description="请先选择合同" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { updateContract } from '@/api/crm/contract';
|
||||
|
||||
export default {
|
||||
name: "ContractPreview",
|
||||
props: {
|
||||
contract: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusOptions: [
|
||||
{ label: '草稿', value: '0' },
|
||||
{ label: '已生效', value: '1' },
|
||||
{ label: '已作废', value: '2' },
|
||||
{ label: '已完成', value: '3' }
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 解析时间
|
||||
parseTime(time, pattern) {
|
||||
if (!time) return '';
|
||||
const d = new Date(time);
|
||||
const year = d.getFullYear();
|
||||
const month = (d.getMonth() + 1).toString().padStart(2, '0');
|
||||
const day = d.getDate().toString().padStart(2, '0');
|
||||
const hours = d.getHours().toString().padStart(2, '0');
|
||||
const minutes = d.getMinutes().toString().padStart(2, '0');
|
||||
const seconds = d.getSeconds().toString().padStart(2, '0');
|
||||
return pattern
|
||||
.replace('{y}', year)
|
||||
.replace('{m}', month)
|
||||
.replace('{d}', day)
|
||||
.replace('{h}', hours)
|
||||
.replace('{i}', minutes)
|
||||
.replace('{s}', seconds);
|
||||
},
|
||||
handleStatusChange(value) {
|
||||
this.$emit('updateStatus', value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.contract-preview {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.no-selection {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user