ChoChoX/backmanagerweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

暂存更改

Browse Source
This commit is contained in:
ChoChoX
2026-06-22 22:18:08 +08:00
parent c0b84b9ea4
commit 5f67bf9122
10 changed files with 987 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/contract.vue
+379 -131
View File
@@ -1,33 +1,176 @@
<script setup>
import { ref,computed } from 'vue'
import { ElMessage } from 'element-plus'
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import {
getContractList,
createContract,
updateContract,
deleteContractAPI
} from '../api/contract'
const searchKeyword = ref('')
const selectField = ref('1')
const search = ref('')
const select = ref('1')
const dateRange = ref([])
const loading=ref(false)
//过滤搜索结果
const filteredContracts=computed(()=>{
const filterType = ref('')
const loading = ref(false)
const searchResults = ref([])
const showSearchResults = ref(false)
const showAddForm = ref(false)
const isEditMode = ref(false)
const currentContractId = ref(null)
const form = reactive({
contract_no: '',
contract_name: '',
type: '',
party_a: '蜜雪冰城股份有限公司',
party_b: '',
sign_date: '',
start_date: '',
end_date: '',
amount: 0,
status: '待审批',
remark: ''
})
//处理搜索
const handleSearch=()=>{
onMounted(() => {
fetchData()
})
// 获取合同列表
const fetchData = async () => {
loading.value = true
const res = await getContractList()
searchResults.value = res.data
showSearchResults.value = true
loading.value = false
}
//日期变更处理
const handleDateChange=()=>{
handleSearch();
// 处理搜索
const handleSearch = async () => {
loading.value = true
let keyword = search.value
if (select.value === '1' && keyword && !keyword.startsWith('HT')) {
keyword = 'HT' + keyword
}
const params = {
keyword,
searchField: select.value,
type: filterType.value,
startDate: dateRange.value?.[0],
endDate: dateRange.value?.[1]
}
const res = await getContractList(params)
searchResults.value = res.data
showSearchResults.value = true
loading.value = false
}
// 日期变更处理
const handleDateChange = () => {
handleSearch()
}
// 重置搜索
const resetSearch = () => {
searchKeyword.value = ''
searchField.value = '1'
search.value = ''
select.value = '1'
filterType.value = ''
dateRange.value = []
handleSearch()
fetchData()
}
// 新增合同
const addContract = () => {
resetForm()
showAddForm.value = true
showSearchResults.value = false
}
// 编辑合同
const editContract = (row) => {
isEditMode.value = true
currentContractId.value = row.id
Object.assign(form, {
contract_no: row.contract_no,
contract_name: row.contract_name,
type: row.type,
party_a: row.party_a,
party_b: row.party_b,
sign_date: row.sign_date,
start_date: row.start_date,
end_date: row.end_date,
amount: row.amount,
status: row.status,
remark: row.remark
})
showAddForm.value = true
showSearchResults.value = false
}
// 保存合同
const saveContract = async () => {
if (isEditMode.value) {
await updateContract(currentContractId.value, { ...form })
ElMessage.success('更新成功')
} else {
await createContract({ ...form })
ElMessage.success('新增成功')
}
cancelAdd()
fetchData()
}
// 删除合同
const deleteContract = (id) => {
ElMessageBox.confirm('确定删除该合同吗？', '提示', {
type: 'warning'
}).then(async () => {
await deleteContractAPI(id)
ElMessage.success('删除成功')
fetchData()
})
}
// 取消
const cancelAdd = () => {
resetForm()
showAddForm.value = false
showSearchResults.value = true
}
// 重置表单
const resetForm = () => {
Object.assign(form, {
contract_no: '',
contract_name: '',
type: '',
party_a: '蜜雪冰城股份有限公司',
party_b: '',
sign_date: '',
start_date: '',
end_date: '',
amount: 0,
status: '待审批',
remark: ''
})
isEditMode.value = false
currentContractId.value = null
}
// 状态样式
const getStatusType = (status) => {
const map = {
'生效中': 'success',
'已到期': 'danger',
'待审批': 'warning',
'已终止': 'info'
}
return map[status] || 'info'
}
// 日期快捷选项
@@ -69,128 +212,233 @@ const formatDate = (date) => {
</script>
<template>
<div class="contract-container">
<!-- 搜索栏区域 -->
<div class="contract-search">
<div class="search-row">
<el-input v-model="searchKeyword" style="max-width: 600px" placeholder="Please input"
class="contract-search-with-select">
<template #prepend>
<el-select v-model="searchField" placeholder="Select" style="width: 115px">
<el-option label="编号" value="1" />
<el-option label="名称" value="2" />
<el-option label="类型" value="3" />
</el-select>
</template>
<template #append>
<el-button :icon="Search" />
</template>
</el-input>
</div>
<div class="search-row date-range">
<span class="date-label">日期范围</span>
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:shortcuts="dateShortcuts"
@change="handleDateChange"
/>
</div>
<div class="contract-container">
<!-- 搜索栏区域 -->
<div class="contract-search">
<!-- 第一行：搜索框 + 按钮 -->
<div class="search-row">
<el-input v-model="search" style="max-width: 500px" placeholder="请输入搜索关键词"
class="contract-search-with-select" @keyup.enter="handleSearch">
<template #prepend>
<el-select v-model="select" placeholder="请选择" style="width: 115px">
<el-option label="编号" value="1" />
<el-option label="名称" value="2" />
</el-select>
</template>
<template #append>
<el-button :icon="Search" @click="handleSearch" />
</template>
</el-input>
<el-button type="primary" @click="addCustomer" style="margin-left: 20px">
新增合同
</el-button>
<el-button type="default" @click="resetSearch" style="margin-left:20px">
重置
</el-button>
<div class="search-buttons">
<el-button type="success" @click="addContract">新增合同</el-button>
<el-button type="default" @click="resetSearch">重置</el-button>
</div>
</div>
<!-- 合同列表 -->
<div class="contract-list">
<div v-if="loading" class="loading-container">
<el-skeleton :rows="5" animated />
</div>
<!-- 第二行：筛选条件 -->
<div class="filter-row">
<span class="filter-label">筛选条件：</span>
<el-select v-model="filterType" placeholder="合同类型" clearable style="width: 150px;" @change="handleSearch">
<el-option label="全部类型" value="" />
<el-option label="加盟合同" value="加盟合同" />
<el-option label="供货合同" value="供货合同" />
<el-option label="租赁合同" value="租赁合同" />
<el-option label="服务合同" value="服务合同" />
</el-select>
<div v-else-if="filteredContracts.length===0" class="empty-container">
<el-empty description="暂无合同数据" />
</div>
<div v-else>
<div class="list-header">
<span class="total-count">共找到{{ filteredContracts.length }}条合同</span>
</div>
<div class="contract-cards">
<el-card
v-for="contract in filteredContracts"
:key="contract.id"
class="contract-card"
shadow="hover"
@click="viewDetail"
>
<div class="contract-info">
<div class="contract-no">
<el-tag size="small" type="primary">编号</el-tag>
<span class="no-value">{{ contract.contractNo }}</span>
</div>
<div class="contract-name">
<el-icon><Document /></el-icon>
<span class="name-value">{{ contract.contractName }}</span>
</div>
<div class="contract-date">
<el-icon><Calendar /></el-icon>
<span class="date-value">{{ formatDate(contract.signDate) }}</span>
</div>
</div>
</el-card>
</div>
</div>
</div>
<!-- 新增客户表单 -->
<div v-if="showAddForm" class="customer-info-label">
<el-form :model="form" label-width="auto" style="max-width: 600px" label-position="top">
<el-form-item label="姓名">
<el-input v-model="form.name" placeholder="请输入姓名" />
</el-form-item>
<el-form-item label="电话">
<el-input v-model="form.phone" :controls="false" :min="0" :max="99999999999" :precision="0"
placeholder="请输入11位手机号" style="width: 100%" />
</el-form-item>
<el-form-item label="地区">
<el-cascader v-model="form.region" :options="regionData" :props="{ expandTrigger: 'hover' }"
placeholder="请选择省/市/区" clearable style="width: 100%" />
</el-form-item>
<el-form-item label="详细地址">
<el-input v-model="form.address" placeholder=" 请输入详细地址" />
</el-form-item>
<el-form-item label="电子邮箱">
<el-input v-model="form.email" placeholder=" 请输入邮箱地址" />
</el-form-item>
<el-form-item label="代理商类型">
<el-radio-group v-model="form.customer_type">
<el-radio value="VIP">地区总代理</el-radio>
<el-radio value="Normal">普通代理</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="saveCustomer">保存</el-button>
<el-button type="danger" @click="cancelAdd">取消</el-button>
</el-form-item>
</el-form>
</div>
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="margin-left: 10px;"
@change="handleDateChange"
/>
</div>
</div>
<!-- 合同列表 -->
<div v-if="showSearchResults" class="contract-list">
<div v-if="loading" class="loading-container">
<el-skeleton :rows="5" animated />
</div>
<div v-else-if="searchResults.length === 0" class="empty-container">
<el-empty description="暂无合同数据" />
</div>
<div v-else>
<div class="list-header">
<span class="total-count">共找到 {{ searchResults.length }} 条合同</span>
</div>
<el-table :data="searchResults" border style="width: 100%">
<el-table-column prop="id" label="ID" width="60" />
<el-table-column prop="contract_no" label="合同编号" width="130" />
<el-table-column prop="contract_name" label="合同名称" min-width="180" />
<el-table-column prop="type" label="合同类型" width="110" />
<el-table-column prop="party_b" label="乙方" width="100" />
<el-table-column prop="amount" label="金额" width="110">
<template #default="{ row }">
¥{{ row.amount?.toLocaleString() }}
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="90">
<template #default="{ row }">
<el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="sign_date" label="签订日期" width="110" />
<el-table-column label="操作" width="140" fixed="right">
<template #default="{ row }">
<el-button link type="primary" @click="editContract(row)">编辑</el-button>
<el-button link type="danger" @click="deleteContract(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 新增/编辑表单 -->
<div v-if="showAddForm" class="contract-form" style="margin-top: 20px;">
<el-divider content-position="left">{{ isEditMode ? '编辑合同' : '新增合同' }}</el-divider>
<el-form :model="form" label-width="auto" style="max-width: 700px;" label-position="top">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="合同编号">
<el-input v-model="form.contract_no" placeholder="如: HT-001" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同类型">
<el-select v-model="form.type" placeholder="请选择" style="width: 100%;">
<el-option label="加盟合同" value="加盟合同" />
<el-option label="供货合同" value="供货合同" />
<el-option label="租赁合同" value="租赁合同" />
<el-option label="服务合同" value="服务合同" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="合同名称">
<el-input v-model="form.contract_name" placeholder="请输入合同名称" />
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="甲方">
<el-input v-model="form.party_a" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="乙方">
<el-input v-model="form.party_b" placeholder="请输入乙方名称" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="签订日期">
<el-date-picker v-model="form.sign_date" type="date" style="width: 100%;" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="生效日期">
<el-date-picker v-model="form.start_date" type="date" style="width: 100%;" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="到期日期">
<el-date-picker v-model="form.end_date" type="date" style="width: 100%;" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="合同金额">
<el-input-number v-model="form.amount" :min="0" :step="1000" style="width: 100%;" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态">
<el-select v-model="form.status" style="width: 100%;">
<el-option label="待审批" value="待审批" />
<el-option label="生效中" value="生效中" />
<el-option label="已到期" value="已到期" />
<el-option label="已终止" value="已终止" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" :rows="3" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="saveContract">保存</el-button>
<el-button @click="cancelAdd">取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<style scoped>
.contract-container {
padding: 20px;
}
.contract-search {
margin-bottom: 20px;
padding: 15px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.search-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
.search-buttons {
display: flex;
gap: 10px;
}
.filter-row {
display: flex;
align-items: center;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #eee;
}
.filter-label {
color: #606266;
font-size: 14px;
margin-right: 10px;
}
.list-header {
margin-bottom: 15px;
}
.total-count {
color: #909399;
font-size: 14px;
}
.loading-container, .empty-container {
padding: 40px 0;
}
</style>