240 lines
8.5 KiB
Vue
240 lines
8.5 KiB
Vue
|
<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>
|