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-26 09:44:11 +08:00
parent f6ebafccb9
commit ccc9cb717a
3 changed files with 61 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/components/contract.vue
View File

@@ -11,7 +11,6 @@ import {
import { getSimpleCustomerList } from '../api/customer'
import { getEmployeeList } from '../api/employee'
import { getSimpleSupplierList } from '../api/suppliers'
import { getSimpleUserList } from '../api/user'
import { formatDateTime, formatDate } from "../utils/date"
import { hasPermission, getUserInfo } from '../store/user'
@@ -24,19 +23,15 @@ 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 customerList = ref([])
const employeeList = ref([])
const supplierList = ref([])
const userList = ref([])
// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
// 采购经理只能操作采购合同，招商经理只能操作加盟合同（提前定义，供 form 初始化使用）
const isAdmin = computed(() => getUserInfo()?.departmentName === 'admin')
const isProcurementManager = computed(() => getUserInfo()?.departmentName === 'procurement_manager')
const isFranchiseManager = computed(() => getUserInfo()?.departmentName === 'franchise_manager')
const getDefaultType = () => {
@@ -56,8 +51,7 @@ const form = reactive({
expiry_date: '',
amount: 0,
status: '生效中',
remark: '',
responsible_user_id: ''
remark: ''
})
onMounted(() => {
@@ -71,10 +65,19 @@ watch(searchResults, () => {
})
// 分页后的数据
const filteredResults = computed(() => {
if (!isFranchiseManager.value && !isProcurementManager.value) return searchResults.value
return searchResults.value.filter(row => {
if (row.type === 'supply' && isProcurementManager.value) return true
if (row.type === 'franchise' && isFranchiseManager.value) return true
return false
})
})
const paginatedData = computed(() => {
const start = (currentPage.value - 1) * pageSize.value
const end = start + pageSize.value
return searchResults.value.slice(start, end)
return filteredResults.value.slice(start, end)
})
// 页码变化
@@ -87,8 +90,7 @@ const fetchOptions = async () => {
const results = await Promise.allSettled([
getSimpleCustomerList(null, { quiet: true }),
getEmployeeList(null, { quiet: true }),
getSimpleSupplierList(null, { quiet: true }),
getSimpleUserList({ quiet: true })
getSimpleSupplierList(null, { quiet: true })
])
if (results[0].status === 'fulfilled') {
const cRes = results[0].value
@@ -102,10 +104,6 @@ const fetchOptions = async () => {
const sRes = results[2].value
supplierList.value = sRes?.data || []
}
if (results[3].status === 'fulfilled') {
const uRes = results[3].value
userList.value = uRes?.data || []
}
}
// 获取合同列表
@@ -163,6 +161,7 @@ const resetSearch = () => {
// 新增合同
const addContract = () => {
resetForm()
form.employee_id = getUserInfo()?.id || ''
showAddForm.value = true
showSearchResults.value = false
}
@@ -182,8 +181,7 @@ const editContract = (row) => {
expiry_date: row.expiry_date,
amount: row.amount,
status: row.status,
remark: row.remark,
responsible_user_id: row.responsible_user_id || ''
remark: row.remark
})
showAddForm.value = true
showSearchResults.value = false
@@ -206,8 +204,7 @@ const saveContract = async () => {
...form,
customer_id: form.customer_id || null,
supplier_id: form.supplier_id || null,
employee_id: form.employee_id || null,
responsible_user_id: form.responsible_user_id || null
employee_id: form.employee_id || null
}
try {
if (isEditMode.value) {
@@ -261,25 +258,12 @@ const resetForm = () => {
expiry_date: '',
amount: 0,
status: '生效中',
remark: '',
responsible_user_id: ''
remark: ''
})
isEditMode.value = false
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 = {
@@ -394,8 +378,7 @@ const canDeleteRow = (row) => {
<span class="total-count">共找到 {{ searchResults.length }} 条合同</span>
</div>
<el-table :data="paginatedData" border style="width: 100%" @row-dblclick="showDetail"
row-class-name="clickable-row">
<el-table :data="paginatedData" border style="width: 100%">
<el-table-column prop="id" label="编号" width="70" />
<el-table-column prop="contract_name" label="合同名称" min-width="180" />
<el-table-column prop="type" label="类型" width="90">
@@ -438,7 +421,7 @@ const canDeleteRow = (row) => {
{{ formatDate(row.expiry_date) }}
</template>
</el-table-column>
<el-table-column label="操作" width="140" fixed="right" v-if="canOperate">
<el-table-column label="操作" width="160" fixed="right" v-if="canOperate">
<template #default="{ row }">
<el-button link type="primary" @click="editContract(row)" v-if="canEditRow(row)">编辑</el-button>
<el-button link type="danger" @click="deleteContract(row.id)" v-if="canDeleteRow(row)">删除</el-button>
@@ -451,7 +434,7 @@ const canDeleteRow = (row) => {
<el-pagination
v-model:current-page="currentPage"
:page-size="pageSize"
:total="searchResults.length"
:total="filteredResults.length"
layout="prev, pager, next"
prev-text="上一页"
next-text="下一页"
@@ -526,16 +509,6 @@ const canDeleteRow = (row) => {
</el-col>
</el-row>
<el-row :gutter="20" v-if="isAdmin">
<el-col :span="12">
<el-form-item label="负责人">
<el-select v-model="form.responsible_user_id" placeholder="请选择负责人" style="width: 100%;" filterable clearable>
<el-option v-for="u in userList" :key="u.id" :label="`${u.id} - ${u.real_name || u.username}`" :value="u.id" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="状态" required>
@@ -565,40 +538,7 @@ const canDeleteRow = (row) => {
</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.id }}</el-descriptions-item>
<el-descriptions-item label="合同名称">{{ currentDetail.contract_name }}</el-descriptions-item>
<el-descriptions-item label="合同类型">{{ currentDetail.type === 'franchise' ? '加盟合同' : '采购合同' }}</el-descriptions-item>
<el-descriptions-item v-if="currentDetail.type !== 'supply'" label="客户">{{ currentDetail.customer_name || currentDetail.customer_id }}</el-descriptions-item>
<el-descriptions-item v-else label="供应商">{{ currentDetail.supplier_name || currentDetail.supplier_id }}</el-descriptions-item>
<el-descriptions-item label="业务员">{{ currentDetail.employee_name || 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="生效日期">{{ formatDate(currentDetail.effective_date) }}</el-descriptions-item>
<el-descriptions-item label="到期日期" :span="2">{{ formatDate(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-item label="负责人">
{{ currentDetail.responsible_user_name || currentDetail.responsible_user_id || '无' }}
</el-descriptions-item>
</el-descriptions>
</div>
<template #footer>
<el-button @click="closeDetail">关闭</el-button>
<el-button type="primary" @click="(() => { const d = currentDetail; closeDetail(); editContract(d) })()">编辑</el-button>
</template>
</el-dialog>
</div>
</template>
@@ -656,27 +596,6 @@ const canDeleteRow = (row) => {
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;
}
.pagination-container {
display: flex;
justify-content: center;

32
src/components/customer.vue
View File

@@ -10,10 +10,7 @@ import {
updateCustomer,
deleteCustomerAPI
} from '../api/customer'
import { getSimpleUserList } from '../api/user'
import { hasPermission, getUserInfo } from '../store/user'
const isAdmin = computed(() => getUserInfo()?.departmentName === 'admin')
import { hasPermission } from '../store/user'
const form = reactive({
id: '',
@@ -22,8 +19,7 @@ const form = reactive({
region: [],
address: '',
email: '',
remark: '',
responsible_user_id: ''
remark: ''
})
const search = ref('')
@@ -38,7 +34,6 @@ let searchSeq = 0
const showDetailDialog = ref(false)
const currentDetail = ref(null)
const filterRegion = ref([])
const userList = ref([])
// 分页相关
const currentPage = ref(1)
@@ -64,12 +59,6 @@ const paginatedData = computed(() => {
onMounted(() => {
fetchData()
// 仅管理员可加载用户列表用于选择负责人
if (isAdmin.value) {
getSimpleUserList({ quiet: true }).then(res => {
userList.value = res.data || []
}).catch(() => {})
}
})
// 监听搜索结果变化，重置页码
@@ -124,7 +113,6 @@ const resetForm = () => {
form.address = ''
form.email = ''
form.remark = ''
form.responsible_user_id = ''
isEditMode.value = false
currentCustomerId.value = null
}
@@ -150,7 +138,6 @@ const editCustomer = (row) => {
form.address = row.address
form.email = row.email
form.remark = row.remark
form.responsible_user_id = row.responsible_user_id || ''
showAddForm.value = true
showSearchResults.value = false
}
@@ -164,8 +151,7 @@ const saveCustomer = async () => {
district: CodeToText[form.region[2]] || '',
address: form.address,
email: form.email,
remark: form.remark,
responsible_user_id: form.responsible_user_id !== '' ? form.responsible_user_id : null
remark: form.remark
}
try {
if (isEditMode.value) {
@@ -306,11 +292,7 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
</el-table-column>
<el-table-column prop="email" label="邮箱" min-width="180" show-overflow-tooltip />
<el-table-column prop="address" label="地址" min-width="180" show-overflow-tooltip />
<el-table-column prop="responsible_user_name" label="负责人" width="100">
<template #default="{ row }">
{{ row.responsible_user_name || '-' }}
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" min-width="160" show-overflow-tooltip />
<el-table-column label="操作" width="150" fixed="right" v-if="canOperate">
<template #default="{ row }">
<el-button link type="primary" @click="editCustomer(row)" v-if="canUpdate">编辑</el-button>
@@ -364,11 +346,6 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
<el-input v-model="form.email" placeholder="请输入邮箱地址" />
</el-form-item>
<el-form-item v-if="isAdmin" label="负责人">
<el-select v-model="form.responsible_user_id" placeholder="请选择负责人" style="width: 100%;" filterable clearable>
<el-option v-for="u in userList" :key="u.id" :label="`${u.id} - ${u.real_name || u.username}`" :value="u.id" />
</el-select>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
@@ -393,7 +370,6 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
{{ [currentDetail.province, currentDetail.city, currentDetail.district].filter(Boolean).join(' ') }}
</el-descriptions-item>
<el-descriptions-item label="详细地址" :span="2">{{ currentDetail.address || '无' }}</el-descriptions-item>
<el-descriptions-item label="负责人">{{ currentDetail.responsible_user_name || '-' }}</el-descriptions-item>
<el-descriptions-item label="备注" :span="2">
{{ currentDetail.remark || '无' }}
</el-descriptions-item>

108
src/components/service.vue
View File

@@ -11,8 +11,8 @@ import {
} from '../api/service'
import { getSimpleCustomerList } from '../api/customer'
import { getSimpleEmployeeList } from '../api/employee'
import { hasPermission } from '../store/user'
import { formatDateTime, formatDate } from '../utils/date'
import { hasPermission, getUserInfo } from '../store/user'
import { formatDate } from '../utils/date'
const form = reactive({
customer_id: '',
@@ -33,8 +33,6 @@ const showAddForm = ref(false)
const isEditMode = ref(false)
const currentServiceId = ref(null)
const loading = ref(false)
const showDetailDialog = ref(false)
const currentDetail = ref(null)
const customerList = ref([])
const employeeList = ref([])
@@ -86,11 +84,18 @@ watch(searchResults, () => {
currentPage.value = 1
})
const filteredResults = computed(() => {
if (!isOperationsManager.value) return searchResults.value
return searchResults.value.filter(row => {
return row.responsible_user_id != null && Number(row.responsible_user_id) === Number(currentUserId.value)
})
})
// 分页后的数据
const paginatedData = computed(() => {
const start = (currentPage.value - 1) * pageSize.value
const end = start + pageSize.value
return searchResults.value.slice(start, end)
return filteredResults.value.slice(start, end)
})
// 获取售后列表
@@ -163,6 +168,14 @@ const resetForm = () => {
// 显示新增表单
const addService = () => {
resetForm()
// 默认选中当前用户为业务员（如果其员工信息在列表中）
const currentUser = getUserInfo()
if (currentUser?.name && employeeList.value.length > 0) {
const matched = employeeList.value.find(e => e.name === currentUser.name)
if (matched) {
form.employee_id = matched.id
}
}
showAddForm.value = true
showSearchResults.value = false
}
@@ -193,7 +206,7 @@ const saveService = async () => {
const formData = {
customer_id: form.customer_id,
feedback: form.feedback,
employee_id: form.handle_status === '待处理' ? null : form.employee_id,
employee_id: form.employee_id || null,
handle_method: form.handle_method,
handle_status: form.handle_status,
service_date: form.service_date,
@@ -240,18 +253,6 @@ const cancelAdd = () => {
showSearchResults.value = true
}
// 双击行查看详情
const handleRowDblClick = (row) => {
currentDetail.value = { ...row }
showDetailDialog.value = true
}
// 关闭详情弹窗
const closeDetail = () => {
showDetailDialog.value = false
currentDetail.value = null
}
// 页码变化
const handleCurrentChange = (val) => {
currentPage.value = val
@@ -263,6 +264,18 @@ const canUpdate = computed(() => hasPermission('after_sale', 'update'))
const canDelete = computed(() => hasPermission('after_sale', 'delete'))
const canOperate = computed(() => canUpdate.value || canDelete.value)
const isOperationsManager = computed(() => getUserInfo()?.departmentName === 'operations_manager')
const currentUserId = computed(() => getUserInfo()?.id)
const canEditRow = (row) => {
if (!canUpdate.value) return false
return true
}
const canDeleteRow = (row) => {
if (!canDelete.value) return false
return true
}
</script>
<template>
@@ -315,8 +328,7 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
<span class="total-count">共找到 {{ searchResults.length }} 条记录</span>
</div>
<el-table :data="paginatedData" v-loading="loading" border style="width: 100%"
@row-dblclick="handleRowDblClick" row-class-name="clickable-row">
<el-table :data="paginatedData" v-loading="loading" border style="width: 100%">
<el-table-column prop="id" label="编号" width="70" />
<el-table-column prop="customer_name" label="客户" width="100">
<template #default="{ row }">
@@ -342,10 +354,10 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
</template>
</el-table-column>
<el-table-column prop="handle_method" label="处理方式" min-width="180" show-overflow-tooltip />
<el-table-column label="操作" width="150" fixed="right" v-if="canOperate">
<el-table-column label="操作" width="160" fixed="right" v-if="canOperate">
<template #default="{ row }">
<el-button link type="primary" @click="editService(row)" v-if="canUpdate">编辑</el-button>
<el-button link type="danger" @click="deleteService(row.id)" v-if="canDelete">删除</el-button>
<el-button link type="primary" @click="editService(row)" v-if="canEditRow(row)">编辑</el-button>
<el-button link type="danger" @click="deleteService(row.id)" v-if="canDeleteRow(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
@@ -355,7 +367,7 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
<el-pagination
v-model:current-page="currentPage"
:page-size="pageSize"
:total="searchResults.length"
:total="filteredResults.length"
layout="prev, pager, next"
prev-text="上一页"
next-text="下一页"
@@ -393,8 +405,7 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
</el-form-item>
<el-form-item label="处理业务员">
<el-select v-model="form.employee_id" placeholder="请选择业务员" style="width: 100%;" filterable clearable
:disabled="form.handle_status === '待处理'">
<el-select v-model="form.employee_id" placeholder="请选择业务员" style="width: 100%;" filterable clearable>
<el-option v-for="e in employeeList" :key="e.id" :label="`${e.id} - ${e.name}`" :value="e.id" />
</el-select>
</el-form-item>
@@ -415,36 +426,6 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
</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.id }}</el-descriptions-item>
<el-descriptions-item label="售后日期">{{ formatDate(currentDetail.service_date) }}</el-descriptions-item>
<el-descriptions-item label="客户">{{ currentDetail.customer_name || currentDetail.customer_id }}</el-descriptions-item>
<el-descriptions-item label="业务员">{{ currentDetail.employee_name || currentDetail.employee_id || '未分配' }}</el-descriptions-item>
<el-descriptions-item label="处理状态">
<el-tag :type="statusMap[currentDetail.handle_status]">
{{ currentDetail.handle_status }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="创建时间">{{ formatDateTime(currentDetail.created_at) }}</el-descriptions-item>
<el-descriptions-item label="反馈内容" :span="2">
<div class="content-text">{{ currentDetail.feedback }}</div>
</el-descriptions-item>
<el-descriptions-item label="处理方式" :span="2">
<div class="content-text">{{ currentDetail.handle_method || '暂无' }}</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="(() => { const d = currentDetail; closeDetail(); editService(d) })()">编辑</el-button>
</template>
</el-dialog>
</div>
</template>
@@ -502,10 +483,6 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
padding: 40px 0;
}
.clickable-row {
cursor: pointer;
}
.pagination-container {
display: flex;
justify-content: center;
@@ -513,15 +490,4 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
padding-top: 15px;
border-top: 1px solid #eee;
}
.detail-content {
padding: 10px 0;
}
.content-text {
white-space: pre-wrap;
line-height: 1.6;
max-height: 120px;
overflow-y: auto;
}
</style>