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

111

Browse Source
This commit is contained in:
ChoChoX
2026-06-22 23:06:04 +08:00
parent 5f67bf9122
commit cc36e9fede
7 changed files with 175 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
src/components/contract.vue
View File

@@ -12,23 +12,23 @@ import {
const search = ref('')
const select = ref('1')
const dateRange = ref([])
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 showDetailDialog = ref(false)
const currentDetail = ref(null)
const form = reactive({
contract_no: '',
contract_name: '',
type: '',
party_a: '蜜雪冰城股份有限公司',
party_b: '',
sign_date: '',
start_date: '',
end_date: '',
customer_id: '',
contract_content: '',
employee_id: '',
effective_date: '',
expiry_date: '',
amount: 0,
status: '待审批',
remark: ''
@@ -49,6 +49,11 @@ const fetchData = async () => {
// 处理搜索
const handleSearch = async () => {
// 如果在表单页面，先关闭表单
if (showAddForm.value) {
cancelAdd()
}
loading.value = true
let keyword = search.value
@@ -59,7 +64,6 @@ const handleSearch = async () => {
const params = {
keyword,
searchField: select.value,
type: filterType.value,
startDate: dateRange.value?.[0],
endDate: dateRange.value?.[1]
}
@@ -79,7 +83,6 @@ const handleDateChange = () => {
const resetSearch = () => {
search.value = ''
select.value = '1'
filterType.value = ''
dateRange.value = []
fetchData()
}
@@ -98,12 +101,11 @@ const editContract = (row) => {
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,
customer_id: row.customer_id,
contract_content: row.contract_content,
employee_id: row.employee_id,
effective_date: row.effective_date,
expiry_date: row.expiry_date,
amount: row.amount,
status: row.status,
remark: row.remark
@@ -148,12 +150,11 @@ const resetForm = () => {
Object.assign(form, {
contract_no: '',
contract_name: '',
type: '',
party_a: '蜜雪冰城股份有限公司',
party_b: '',
sign_date: '',
start_date: '',
end_date: '',
customer_id: '',
contract_content: '',
employee_id: '',
effective_date: '',
expiry_date: '',
amount: 0,
status: '待审批',
remark: ''
@@ -162,6 +163,18 @@ const resetForm = () => {
currentContractId.value = null
}
// 双击查看详情
const showDetail = (row) => {
currentDetail.value = row
showDetailDialog.value = true
}
// 关闭详情弹窗
const closeDetail = () => {
showDetailDialog.value = false
currentDetail.value = null
}
// 状态样式
const getStatusType = (status) => {
const map = {
@@ -239,20 +252,13 @@ const formatDate = (date) => {
<!-- 第二行：筛选条件 -->
<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>
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
start-placeholder="生效日期"
end-placeholder="到期日期"
style="margin-left: 10px;"
@change="handleDateChange"
/>
@@ -274,23 +280,24 @@ const formatDate = (date) => {
<span class="total-count">共找到 {{ searchResults.length }} 条合同</span>
</div>
<el-table :data="searchResults" border style="width: 100%">
<el-table :data="searchResults" border style="width: 100%" @row-dblclick="showDetail" row-class-name="clickable-row">
<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="customer_id" label="客户ID" width="80" />
<el-table-column prop="employee_id" label="业务员ID" width="90" />
<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">
<el-table-column prop="status" label="状态" width="80">
<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 prop="effective_date" label="生效日期" width="110" />
<el-table-column prop="expiry_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>
@@ -312,48 +319,34 @@ const formatDate = (date) => {
</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-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="甲方">
<el-input v-model="form.party_a" />
<el-form-item label="客户ID">
<el-input v-model="form.customer_id" style="width: 100%;" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="乙方">
<el-input v-model="form.party_b" placeholder="请输入乙方名称" />
<el-form-item label="业务员ID">
<el-input v-model="form.employee_id" style="width: 100%;" />
</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-col :span="12">
<el-form-item label="生效日期">
<el-date-picker v-model="form.start_date" type="date" style="width: 100%;" />
<el-date-picker v-model="form.effective_date" type="date" style="width: 100%;" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="12">
<el-form-item label="到期日期">
<el-date-picker v-model="form.end_date" type="date" style="width: 100%;" />
<el-date-picker v-model="form.expiry_date" type="date" style="width: 100%;" />
</el-form-item>
</el-col>
</el-row>
@@ -376,8 +369,12 @@ const formatDate = (date) => {
</el-col>
</el-row>
<el-form-item label="合同内容/条款">
<el-input v-model="form.contract_content" type="textarea" :rows="4" placeholder="请输入合同内容" />
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" :rows="3" />
<el-input v-model="form.remark" type="textarea" :rows="2" />
</el-form-item>
<el-form-item>
@@ -386,6 +383,36 @@ const formatDate = (date) => {
</el-form-item>
</el-form>
</div>
<!-- 合同详情弹窗 -->
<el-dialog v-model="showDetailDialog" title="合同详情" width="650px" @close="closeDetail">
<div v-if="currentDetail" class="detail-content">
<el-descriptions :column="2" border>
<el-descriptions-item label="合同编号">{{ currentDetail.contract_no }}</el-descriptions-item>
<el-descriptions-item label="合同名称" :span="2">{{ currentDetail.contract_name }}</el-descriptions-item>
<el-descriptions-item label="客户ID">{{ currentDetail.customer_id }}</el-descriptions-item>
<el-descriptions-item label="业务员ID">{{ currentDetail.employee_id }}</el-descriptions-item>
<el-descriptions-item label="合同金额" :span="2">
<span class="amount-text">¥{{ currentDetail.amount?.toLocaleString() }}</span>
</el-descriptions-item>
<el-descriptions-item label="状态">
<el-tag :type="getStatusType(currentDetail.status)">{{ currentDetail.status }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="生效日期">{{ currentDetail.effective_date }}</el-descriptions-item>
<el-descriptions-item label="到期日期" :span="2">{{ currentDetail.expiry_date }}</el-descriptions-item>
<el-descriptions-item label="合同内容" :span="2">
<div class="content-text">{{ currentDetail.contract_content || '无' }}</div>
</el-descriptions-item>
<el-descriptions-item label="备注" :span="2">
{{ currentDetail.remark || '无' }}
</el-descriptions-item>
</el-descriptions>
</div>
<template #footer>
<el-button @click="closeDetail">关闭</el-button>
<el-button type="primary" @click="closeDetail(); editContract(currentDetail)">编辑</el-button>
</template>
</el-dialog>
</div>
</template>
@@ -441,4 +468,25 @@ const formatDate = (date) => {
.loading-container, .empty-container {
padding: 40px 0;
}
.clickable-row {
cursor: pointer;
}
.detail-content {
padding: 10px 0;
}
.amount-text {
font-weight: 600;
color: #e6a23c;
font-size: 16px;
}
.content-text {
white-space: pre-wrap;
line-height: 1.6;
max-height: 120px;
overflow-y: auto;
}
</style>

9
src/components/customer.vue
View File

@@ -165,7 +165,7 @@ const clearSearch = () => {
重置
</el-button>
<el-button color="#E60012" @click="addCustomer" style="margin-left: 20px">
新增用户
新增客户
</el-button>
</div>
@@ -176,7 +176,7 @@ const clearSearch = () => {
</div>
<div v-else-if="searchResults.length === 0" class="empty-container">
<el-empty description="暂无客户数据" />
<el-empty description="暂无数据" />
</div>
@@ -192,10 +192,11 @@ const clearSearch = () => {
</el-table-column>
<el-table-column prop="address" label="详细地址" width="200" />
<el-table-column prop="email" label="电子邮箱" width="200" />
<el-table-column prop="remark" label="备注" width=""200 />
<el-table-column prop="customer_type" label="代理商类型" width="120">
<template #default="{ row }">
<el-tag :type="row.customer_type === 'VIP' ? 'danger' : 'info'">
{{ row.customer_type === 'VIP' ? '地区总代理' : '普通代理' }}
{{ row.customer_type === 'VIP' ? '地区总代理' : '加盟商' }}
</el-tag>
</template>
</el-table-column>
@@ -244,7 +245,7 @@ const clearSearch = () => {
<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 value="Normal">加盟商</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>

11
src/components/employee.vue Normal file
View File

@@ -0,0 +1,11 @@
<script setup>
</script>
<template>
<h1>hello ,im 3</h1>
</template>
<style scoped>
</style>

18
src/components/panel.vue
View File

@@ -63,16 +63,21 @@ const switchFold = () => {
<template #title>售后管理</template>
</el-menu-item>
<el-menu-item index="/panel/page3">
<el-menu-item index="/panel/products">
<el-icon><IceTea /></el-icon>
<template #title>产品管理</template>
</el-menu-item>
<el-menu-item index="/panel/page3">
<el-menu-item index="/panel/employee">
<el-icon><User /></el-icon>
<template #title>员工管理</template>
</el-menu-item>
<el-menu-item index="/panel/user">
<el-icon><User /></el-icon>
<template #title>用户管理</template>
</el-menu-item>
<!-- 底部收缩按钮 -->
<el-menu-item index="" class="collapse-btn" @click="switchFold">
<el-icon :class="{'rotate-180-animation':!isCollapse,'rotate-180-animation-reverse':isCollapse}">
@@ -112,6 +117,15 @@ const switchFold = () => {
display: flex;
align-items: center;
gap: 10px;
border-bottom: none !important;
}
.logo-item.is-active {
border-bottom: none !important;
}
.logo-item.is-active::after {
display: none !important;
}
.logo-img {

11
src/components/products.vue Normal file
View File

@@ -0,0 +1,11 @@
<script setup>
</script>
<template>
<h1>hello ,im 3</h1>
</template>
<style scoped>
</style>

11
src/components/user.vue Normal file
View File

@@ -0,0 +1,11 @@
<script setup>
</script>
<template>
<h1>hello ,im 3</h1>
</template>
<style scoped>
</style>

6
src/router.js
View File

@@ -5,6 +5,9 @@ import Panel from "./components/panel.vue";
import Customer from "./components/customer.vue";
import Contract from "./components/contract.vue";
import Service from "./components/service.vue";
import Products from "./components/products.vue";
import Employee from "./components/employee.vue";
import User from "./components/user.vue";
const routes = [
{ path: "/", redirect: "/login" },
@@ -18,6 +21,9 @@ const routes = [
{ path: "customer", component: Customer },
{ path: "contract", component: Contract },
{ path: "service", component: Service },
{ path: "products", component: Products },
{ path: "employee", component: Employee },
{ path: "user", component: User }
],
},
]