DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(contract): 新增合同预览和列表组件

Browse Source 
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:
砂糖
2026-04-01 10:44:51 +08:00
parent 800cf0c8d1
commit f959f97099
26 changed files with 655 additions and 3244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
klp-ui/src/views/crm/contract/components/ContractList.vue Normal file
View File

@@ -0,0 +1,240 @@
<template>
<div class="contract-list">
<!-- 筛选区和按钮操作区合并 -->
<div class="filter-section" style="padding: 10px; border-bottom: 1px solid #e4e7ed;">
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;">
<div style="display: flex; align-items: center; gap: 10px;">
<el-input
v-model="queryParams.contractName"
placeholder="请输入合同名称"
clearable
@keyup.enter.native="handleQuery"
style="width: 200px;"
/>
<el-button
icon="el-icon-search"
size="mini"
@click="toggleMoreFilter"
:type="showMoreFilter ? 'primary' : 'default'"
>
{{ showMoreFilter ? '收起' : '更多' }}
</el-button>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="$emit('add')">新增</el-button>
</div>
</div>
<!-- 更多筛选条件 -->
<div v-show="showMoreFilter" class="more-filter" style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e4e7ed;">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
<el-form-item label="合同编号" prop="contractNo">
<el-input v-model="queryParams.contractNo" placeholder="请输入合同编号" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="供方" prop="supplier">
<el-input v-model="queryParams.supplier" placeholder="请输入供方" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="需方" prop="customer">
<el-input v-model="queryParams.customer" placeholder="请输入需方" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="签订时间" prop="signTime">
<el-date-picker clearable v-model="queryParams.signTime" type="date" value-format="yyyy-MM-dd"
placeholder="请选择签订时间">
</el-date-picker>
</el-form-item>
<el-form-item label="交货日期" prop="deliveryDate">
<el-date-picker clearable v-model="queryParams.deliveryDate" type="date" value-format="yyyy-MM-dd"
placeholder="请选择交货日期">
</el-date-picker>
</el-form-item>
<el-form-item label="签订地点" prop="signLocation">
<el-input v-model="queryParams.signLocation" placeholder="请输入签订地点" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="合同状态" prop="contractStatus">
<el-select v-model="queryParams.contractStatus" placeholder="请选择合同状态">
<el-option label="草稿" value="0" />
<el-option label="已生效" value="1" />
<el-option label="已作废" value="2" />
<el-option label="已完成" value="3" />
</el-select>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
<div class="custom-list" v-loading="loading">
<div class="list-body">
<div
v-for="row in contractList"
:key="row.contractId"
class="list-item"
style="padding: 10px; border-bottom: 2px solid #dddddd; cursor: pointer;"
:class="{ 'list-item-active': selectedRow === row }"
@click="handleRowClick(row)"
>
<!-- 合同名称和编号 -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<div style="font-weight: bold;">{{ row.contractName }}</div>
<div style="font-size: 12px; color: #606266;">{{ row.contractNo }}</div>
</div>
<!-- 供方和需方 -->
<div style="font-size: 12px; color: #909399; margin-bottom: 6px;">
<span>供方: {{ row.supplier }}</span>
<span style="margin-left: 20px;">需方: {{ row.customer }}</span>
</div>
<!-- 签订时间和交货日期 -->
<div style="font-size: 12px; color: #909399; margin-bottom: 6px;">
<span>签订时间: {{ parseTime(row.signTime, '{y}-{m}-{d}') }}</span>
<span style="margin-left: 20px;">交货日期: {{ parseTime(row.deliveryDate, '{y}-{m}-{d}') }}</span>
</div>
<!-- 签订地点和状态 -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<div style="font-size: 12px; color: #909399;">
签订地点: {{ row.signLocation }}
</div>
<el-tag
:type="row.status == 0 ? 'info' : row.status == 1 ? 'success' : row.status == 2 ? 'danger' : 'primary'"
size="small">
{{ row.status == 0 ? '草稿' : row.status == 1 ? '已生效' : row.status == 2 ? '已作废' : '已完成' }}
</el-tag>
</div>
<!-- 操作按钮独占一行 -->
<div style="display: flex; gap: 10px; padding-top: 8px; border-top: 1px dashed #f0f0f0;">
<el-button size="mini" type="text" icon="el-icon-download"
@click.stop="$emit('exportContract', row)">导出</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click.stop="$emit('update', row)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click.stop="$emit('delete', row)">删除</el-button>
</div>
</div>
<div v-if="contractList.length === 0" style="padding: 40px; text-align: center; color: #909399;">
暂无合同数据
</div>
</div>
</div>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" style="padding: 10px; margin-bottom: 10px !important;" />
</div>
</template>
<script>
import { listContract, updateContract } from "@/api/crm/contract";
export default {
name: "ContractList",
data() {
return {
// 合同信息表格数据
contractList: [],
// 遮罩层
loading: false,
// 总条数
total: 0,
// 选中的行
selectedRow: null,
// 是否显示更多筛选
showMoreFilter: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
contractName: undefined,
contractNo: undefined,
supplier: undefined,
customer: undefined,
signTime: undefined,
deliveryDate: undefined,
signLocation: undefined,
status: undefined,
},
};
},
created() {
this.getList();
},
methods: {
/** 查询合同信息列表 */
getList() {
this.loading = true;
listContract(this.queryParams).then(response => {
this.contractList = response.rows;
this.total = response.total;
this.loading = false;
});
},
/** 状态变更 */
handleChangeStatus(row) {
updateContract(row).then(response => {
this.$message({
message: "状态变更成功",
type: "success"
});
this.getList();
})
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.$refs["queryForm"].resetFields();
this.handleQuery();
},
// 行点击事件
handleRowClick(row) {
this.selectedRow = row;
this.$emit('rowClick', row);
},
// 切换更多筛选显示/隐藏
toggleMoreFilter() {
this.showMoreFilter = !this.showMoreFilter;
}
}
};
</script>
<style scoped>
.contract-list {
height: 100%;
overflow-y: auto;
}
.custom-list {
border: 1px solid #e4e7ed;
border-radius: 4px;
overflow: hidden;
}
.list-item:hover {
background-color: #f5f7fa;
}
.list-item-active {
background-color: #ecf5ff;
border-left: 3px solid #409eff;
}
@media screen and (max-width: 1200px) {
.list-header {
font-size: 12px;
}
.list-item {
font-size: 12px;
}
.list-item .el-button {
font-size: 10px;
}
}
</style>

106
klp-ui/src/views/crm/contract/components/ContractPreview.vue Normal file
View 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>

119
klp-ui/src/views/crm/contract/components/ContractTabs.vue Normal file
View File

@@ -0,0 +1,119 @@
<template>
<div class="contract-tabs">
<div v-if="contractId" class="tabs-content">
<el-tabs v-model="activeTab" type="card" tab-position="top" v-loading="tabLoading">
<el-tab-pane label="下发订单" name="second">
<OrderPage v-if="activeTab === 'second'" :contractId="contractId" />
</el-tab-pane>
<el-tab-pane label="财务状态" name="third">
<KLPTable v-loading="loading" :data="financeList">
<el-table-column label="收款日期" align="center" prop="dueDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="收款金额" align="center" prop="amount" />
<el-table-column label="备注" align="center" prop="remark" />
</KLPTable>
</el-tab-pane>
<el-tab-pane label="订单异议" name="fourth">
<el-table v-loading="loading" :data="objectionList">
<el-table-column label="编号" align="center" prop="objectionCode" />
<el-table-column label="状态" align="center" prop="objectionStatus">
<template slot-scope="scope">
<el-tag v-if="scope.row.objectionStatus === 0" type="danger">待处理</el-tag>
<el-tag v-else-if="scope.row.objectionStatus === 1" type="success">已处理</el-tag>
<el-tag v-else-if="scope.row.objectionStatus === 2" type="info">已关闭</el-tag>
</template>
</el-table-column>
<el-table-column label="处理人" align="center" prop="handleUser" />
<el-table-column label="处理时间" align="center" prop="handleTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.handleTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
</el-table>
</el-tab-pane>
<el-tab-pane label="发货配卷" name="fifth">
<CoilTable :data="coilList" />
</el-tab-pane>
</el-tabs>
</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 OrderPage from "@/views/crm/order/index.vue";
import CoilTable from "../../components/CoilTable.vue";
export default {
name: "ContractTabs",
components: {
OrderPage,
CoilTable
},
props: {
contractId: {
type: Number,
default: null
},
financeList: {
type: Array,
default: () => []
},
objectionList: {
type: Array,
default: () => []
},
coilList: {
type: Array,
default: () => []
},
loading: {
type: Boolean,
default: false
},
tabLoading: {
type: Boolean,
default: false
}
},
data() {
return {
// 活动tab
activeTab: "second"
};
},
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);
}
}
};
</script>
<style scoped>
.contract-tabs {
height: 100%;
overflow-y: auto;
}
</style>

394
klp-ui/src/views/crm/contract/index.vue
View File

@@ -1,103 +1,36 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="合同名称" prop="contractName">
<el-input v-model="queryParams.contractName" placeholder="请输入合同名称" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="合同编号" prop="contractNo">
<el-input v-model="queryParams.contractNo" placeholder="请输入合同编号" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="供方" prop="supplier">
<el-input v-model="queryParams.supplier" placeholder="请输入供方" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="需方" prop="customer">
<el-input v-model="queryParams.customer" placeholder="请输入需方" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="签订时间" prop="signTime">
<el-date-picker clearable v-model="queryParams.signTime" type="date" value-format="yyyy-MM-dd"
placeholder="请选择签订时间">
</el-date-picker>
</el-form-item>
<el-form-item label="签订地点" prop="signLocation">
<el-input v-model="queryParams.signLocation" placeholder="请输入签订地点" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="合同状态" prop="contractStatus">
<el-select v-model="queryParams.contractStatus" placeholder="请选择合同状态">
<el-option label="草稿" value="0" />
<el-option label="已生效" value="1" />
<el-option label="已作废" value="2" />
<el-option label="已完成" value="3" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<div class="app-container" style="height: calc(100vh - 84px); display: flex;">
<!-- 左侧合同列表 -->
<div class="left-panel" style="width: 30%; border-right: 1px solid #e4e7ed; overflow-y: auto;">
<ContractList ref="contractList"
@add="handleAdd" @update="handleUpdate" @delete="handleDelete" @export="handleExport"
@exportContract="handleExportContract" @rowClick="handleRowClick" />
</div>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
@click="handleUpdate">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
@click="handleDelete">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<!-- 右侧内容区域 -->
<div class="right-panel" v-if="form.contractId" style="flex: 1; display: flex; flex-direction: column;">
<!-- 右侧上方：合同内容信息预览 -->
<div class="preview-panel" ref="previewPanel"
style="flex: 1; overflow-y: auto; border-bottom: 1px solid #e4e7ed;">
<ContractPreview :contract="form" @updateStatus="handleStatusChange" />
</div>
<el-table v-loading="loading" :data="contractList" @selection-change="handleSelectionChange"
@row-click="handleRowClick">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="合同名称" align="center" prop="contractName" />
<el-table-column label="合同编号" align="center" prop="contractNo" />
<el-table-column label="供方" align="center" prop="supplier" />
<el-table-column label="需方" align="center" prop="customer" />
<el-table-column label="签订时间" align="center" prop="signTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.signTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="签订地点" align="center" prop="signLocation" />
<el-table-column label="合同状态" align="center" prop="status">
<template slot-scope="scope">
<span-tag
:type="scope.row.status == 0 ? 'info' : scope.row.status == 1 ? 'success' : scope.row.status == 2 ? 'danger' : 'primary'">
{{ scope.row.status == 0 ? '草稿' : scope.row.status == 1 ? '已生效' : scope.row.status == 2 ? '已作废' : '已完成' }}
</span-tag>
</template>
</el-table-column>
<el-table-column label="状态变更" align="center" prop="status" v-hasPermi="['crm:contract:status']">
<template slot-scope="scope">
<el-select v-model="scope.row.status" placeholder="请选择状态变更" @change="handleChangeStatus(scope.row)">
<el-option label="草稿" :value="0" />
<el-option label="已生效" :value="1" />
<el-option label="已作废" :value="2" />
<el-option label="已完成" :value="3" />
</el-select>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-download" @click.stop="handleExportContract(scope.row)">导出</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleUpdate(scope.row)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click.stop="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 拖拽调整条 -->
<div class="resize-handle" ref="resizeHandle"
style="height: 8px; background-color: #f5f7fa; cursor: row-resize; display: flex; align-items: center; justify-content: center;"
@mousedown="startResize">
<div style="width: 40px; height: 2px; background-color: #dcdfe6;"></div>
</div>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<!-- 右侧下方：Tab标签页 -->
<div class="tab-panel" ref="tabPanel" style="flex: 1; overflow-y: auto;">
<ContractTabs :contractId="form.contractId" :financeList="financeList" :objectionList="objectionList"
:coilList="coilList" :tabLoading="tabLoading" />
</div>
</div>
<div v-else style="flex: 1; display: flex; flex-direction: column;">
<el-empty description="选择合同后查看内容" />
</div>
<!-- 添加或修改合同信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
@@ -121,7 +54,14 @@
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="12">
<el-form-item label="交货日期" prop="deliveryDate">
<el-date-picker clearable v-model="form.deliveryDate" type="date" value-format="yyyy-MM-dd"
placeholder="请选择交货日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="签订地点" prop="signLocation">
<el-input v-model="form.signLocation" placeholder="请输入签订地点" />
</el-form-item>
@@ -187,13 +127,14 @@
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
<el-form-item label="技术附件" prop="techAnnex">
<file-upload v-model="form.techAnnex"></file-upload>
<file-upload v-model="form.techAnnex" :fileType="['pdf', 'jpeg', 'jpg', 'png', 'webp']"></file-upload>
</el-form-item>
<el-form-item label="商务附件" prop="businessAnnex">
<file-upload v-model="form.businessAnnex"></file-upload>
<file-upload v-model="form.businessAnnex" :fileType="['pdf', 'jpeg', 'jpg', 'png', 'webp']"></file-upload>
</el-form-item>
<el-form-item label="排产函" prop="productionSchedule">
<file-upload v-model="form.productionSchedule"></file-upload>
<file-upload v-model="form.productionSchedule"
:fileType="['pdf', 'jpeg', 'jpg', 'png', 'webp']"></file-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@@ -201,107 +142,35 @@
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog title="合同详情" :visible.sync="dialogOpen" fullscreen>
<el-tabs v-model="activeTab" type="card">
<el-tab-pane label="合同信息" name="first">
合同信息
</el-tab-pane>
<el-tab-pane label="下发订单" name="second">
<OrderPage v-if="activeTab === 'second'" :contractId="form.contractId" />
</el-tab-pane>
<el-tab-pane label="收款记录" name="third">
<KLPTable v-loading="loading" :data="financeList">
<el-table-column label="应收ID" align="center" prop="receivableId" v-if="false" />
<!-- <el-table-column label="客户" align="center" prop="customerName" /> -->
<el-table-column label="收款日期" align="center" prop="dueDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
<!-- <el-tag v-if="new Date(scope.row.dueDate) < new Date()" type="danger">过期</el-tag>
<el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天</el-tag> -->
</template>
</el-table-column>
<el-table-column label="收款金额" align="center" prop="amount" />
<!-- <el-table-column label="已收金额" align="center" prop="paidAmount" /> -->
<!-- <el-table-column label="未收金额" align="center" prop="balanceAmount" /> -->
<!-- <el-table-column label="状态" align="center" prop="status" /> -->
<el-table-column label="备注" align="center" prop="remark" />
</KLPTable>
</el-tab-pane>
<el-tab-pane label="订单异议" name="fourth">
<el-table v-loading="loading" :data="objectionList">
<el-table-column label="编号" align="center" prop="objectionCode" />
<el-table-column label="状态" align="center" prop="objectionStatus">
<template slot-scope="scope">
<el-tag v-if="scope.row.objectionStatus === 0" type="danger">待处理</el-tag>
<el-tag v-else-if="scope.row.objectionStatus === 1" type="success">已处理</el-tag>
<el-tag v-else-if="scope.row.objectionStatus === 2" type="info">已关闭</el-tag>
</template>
</el-table-column>
<el-table-column label="处理人" align="center" prop="handleUser" />
<el-table-column label="处理时间" align="center" prop="handleTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.handleTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"></el-button>
<el-button size="mini" type="text" icon="el-icon-check" @click="handleDo(scope.row)"
v-if="scope.row.objectionStatus == 0"></el-button>
<el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)"
v-if="scope.row.objectionStatus == 1"></el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button>
</template>
</el-table-column> -->
</el-table>
</el-tab-pane>
<el-tab-pane label="发货配卷" name="fifth">
<CoilTable :data="coilList" />
</el-tab-pane>
</el-tabs>
</el-dialog>
</div>
</template>
<script>
import { listContract, getContract, delContract, addContract, updateContract, listContractOrderObjection, listContractPackaging } from "@/api/crm/contract";
import OrderPage from "@/views/crm/order/index.vue";
import CoilTable from "../components/CoilTable.vue";
import { getContract, delContract, addContract, updateContract, listContractOrderObjection, listContractPackaging } from "@/api/crm/contract";
import ContractList from "./components/ContractList.vue";
import ContractPreview from "./components/ContractPreview.vue";
import ContractTabs from "./components/ContractTabs.vue";
export default {
name: "Contract",
components: {
OrderPage,
CoilTable,
ContractList,
ContractPreview,
ContractTabs
},
data() {
return {
// 活动tab
activeTab: "first",
financeList: [],
objectionList: [],
coilList: [],
loading: false,
tabLoading: false,
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 合同信息表格数据
contractList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 是否显示详情弹出层
dialogOpen: false,
// 查询参数
queryParams: {
pageNum: 1,
@@ -311,6 +180,7 @@ export default {
supplier: undefined,
customer: undefined,
signTime: undefined,
deliveryDate: undefined,
signLocation: undefined,
status: undefined,
},
@@ -336,6 +206,9 @@ export default {
signTime: [
{ required: true, message: "签订时间不能为空", trigger: "blur" }
],
deliveryDate: [
{ required: true, message: "交货日期不能为空", trigger: "blur" }
],
signLocation: [
{ required: true, message: "签订地点不能为空", trigger: "blur" }
],
@@ -378,33 +251,43 @@ export default {
status: [
{ required: true, message: "合同状态不能为空", trigger: "change" }
],
financeList: [],
oobjectionList: [],
coilList: [],
}
};
},
created() {
this.getList();
},
methods: {
/** 查询合同信息列表 */
getList() {
this.loading = true;
listContract(this.queryParams).then(response => {
this.contractList = response.rows;
this.total = response.total;
this.loading = false;
});
/** 处理合同状态更新 */
handleStatusChange(status) {
this.form.status = status;
updateContract({
...this.form,
status: status
}).then(res => {
if (res.code == 200) {
this.$message({
message: '合同状态更新成功',
type: 'success'
});
}
})
this.$refs.contractList.getList();
},
/** 状态变更 */
handleChangeStatus(row) {
updateContract(row).then(response => {
this.$message({
message: "状态变更成功",
type: "success"
});
this.getList();
/** 取消按钮 */
cancel() {
this.open = false;
this.reset();
},
/** 行点击事件 */
handleRowClick(row) {
this.form = row;
this.tabLoading = true;
this.getCoilList();
listContractOrderObjection(row.contractId).then(response => {
this.financeList = response.data.financeList || [];
this.objectionList = response.data.oobjectionList || [];
}).finally(() => {
this.tabLoading = false;
})
},
/** 查询合同配卷列表 */
@@ -413,22 +296,7 @@ export default {
this.coilList = response.data || [];
})
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 行点击事件
handleRowClick(row) {
this.form = row;
this.dialogOpen = true;
this.getCoilList();
listContractOrderObjection(row.contractId).then(response => {
this.form.financeList = response.data.financeList || [];
this.form.oobjectionList = response.data.oobjectionList || [];
})
},
// 表单重置
/** 表单重置 */
reset() {
this.form = {
contractId: undefined,
@@ -437,6 +305,7 @@ export default {
supplier: undefined,
customer: undefined,
signTime: undefined,
deliveryDate: undefined,
signLocation: undefined,
productContent: undefined,
contractContent: undefined,
@@ -463,17 +332,7 @@ export default {
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
/** 多选框选中数据 */
handleSelectionChange(selection) {
this.ids = selection.map(item => item.contractId)
this.single = selection.length !== 1
@@ -506,7 +365,7 @@ export default {
updateContract(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
this.$refs.contractList.getList();
}).finally(() => {
this.buttonLoading = false;
});
@@ -514,7 +373,7 @@ export default {
addContract(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
this.$refs.contractList.getList();
}).finally(() => {
this.buttonLoading = false;
});
@@ -526,16 +385,11 @@ export default {
handleDelete(row) {
const contractIds = row.contractId || this.ids;
this.$modal.confirm('是否确认删除合同信息编号为"' + contractIds + '"的数据项？').then(() => {
this.loading = true;
return delContract(contractIds);
}).then(() => {
this.loading = false;
this.getList();
this.$refs.contractList.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
})
},
/** 导出按钮操作 */
handleExport() {
@@ -543,10 +397,64 @@ export default {
...this.queryParams
}, `contract_${new Date().getTime()}.xlsx`)
},
/** 导出合同操作 */
handleExportContract(row) {
// 合同导出
},
/** 开始拖拽调整 */
startResize(e) {
e.preventDefault();
const previewPanel = this.$refs.previewPanel;
const tabPanel = this.$refs.tabPanel;
const startY = e.clientY;
const startPreviewHeight = previewPanel.offsetHeight;
const parentHeight = previewPanel.parentElement.offsetHeight;
const handleMouseMove = (event) => {
const deltaY = event.clientY - startY;
const newPreviewHeight = startPreviewHeight + deltaY;
const newTabHeight = parentHeight - newPreviewHeight - 8; // 8是拖拽条的高度
if (newPreviewHeight > 100 && newTabHeight > 100) { // 最小高度限制
previewPanel.style.flex = `0 0 ${newPreviewHeight}px`;
tabPanel.style.flex = `0 0 ${newTabHeight}px`;
}
};
const handleMouseUp = () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
}
}
};
</script>
<style scoped>
.app-container {
overflow: hidden;
padding: 0;
}
.left-panel {
height: calc(100vh - 84px);
box-sizing: border-box;
overflow-y: auto;
}
.right-panel {
height: calc(100vh - 84px);
overflow: hidden;
}
.preview-panel {
overflow-y: auto;
}
.tab-panel {
overflow-y: auto;
}
</style>