Gugongyu/vue-tickets
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改卡片的数据统计方式（通过接口）

Browse Source
This commit is contained in:
GiveMePast
2026-02-28 17:46:51 +08:00
parent b271298fef
commit 3a1acebed0
1 changed files with 284 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

436
src/views/TicketManagement.vue
View File

@@ -6,35 +6,45 @@
<div class="stat-label">总工单数</div> <div class="stat-label">总工单数</div>
<div class="stat-value">{{ allStats.total }}</div> <div class="stat-value">{{ allStats.total }}</div>
</div> </div>
<el-icon class="stat-icon"><Memo /></el-icon> <el-icon class="stat-icon">
<Memo />
</el-icon>
</div> </div>
<div class="stat-card pending"> <div class="stat-card pending">
<div class="stat-info"> <div class="stat-info">
<div class="stat-label">未分配</div> <div class="stat-label">未分配</div>
<div class="stat-value">{{ allStats.pending }}</div> <div class="stat-value">{{ allStats.pending }}</div>
</div> </div>
<el-icon class="stat-icon"><Clock /></el-icon> <el-icon class="stat-icon">
<Clock />
</el-icon>
</div> </div>
<div class="stat-card ongoing"> <div class="stat-card ongoing">
<div class="stat-info"> <div class="stat-info">
<div class="stat-label">进行中</div> <div class="stat-label">进行中</div>
<div class="stat-value">{{ allStats.ongoing }}</div> <div class="stat-value">{{ allStats.ongoing }}</div>
</div> </div>
<el-icon class="stat-icon"><Loading /></el-icon> <el-icon class="stat-icon">
<Loading />
</el-icon>
</div> </div>
<div class="stat-card success"> <div class="stat-card success">
<div class="stat-info"> <div class="stat-info">
<div class="stat-label">已完成</div> <div class="stat-label">已完成</div>
<div class="stat-value">{{ allStats.completed }}</div> <div class="stat-value">{{ allStats.completed }}</div>
</div> </div>
<el-icon class="stat-icon"><CircleCheck /></el-icon> <el-icon class="stat-icon">
<CircleCheck />
</el-icon>
</div> </div>
<div class="stat-card finished"> <div class="stat-card finished">
<div class="stat-info"> <div class="stat-info">
<div class="stat-label">已完结</div> <div class="stat-label">已完结</div>
<div class="stat-value">{{ allStats.is_completed }}</div> <div class="stat-value">{{ allStats.is_completed }}</div>
</div> </div>
<el-icon class="stat-icon"><Checked /></el-icon> <el-icon class="stat-icon">
<Checked />
</el-icon>
</div> </div>
</div> </div>
@@ -43,100 +53,112 @@
<div class="left"> <div class="left">
<el-button type="primary" @click="handleAdd" :icon="Plus">新增任务</el-button> <el-button type="primary" @click="handleAdd" :icon="Plus">新增任务</el-button>
</div> </div>
<TicketFilter <TicketFilter
:operators="operatorsForFilter" :operators="operatorsForFilter"
:staffs="staffList" :staffs="staffList"
:filters="filters" :filters="filters"
@filter-change="handleFilterChange" @filter-change="handleFilterChange"
@reset="handleFilterReset" @reset="handleFilterReset"
/> />
</div> </div>
<TicketList <TicketList
:tickets="tickets" :tickets="tickets"
:loading="loading" :loading="loading"
@edit="handleEdit" @edit="handleEdit"
@delete="handleDelete" @delete="handleDelete"
/> />
<div class="pagination-container"> <div class="pagination-container">
<el-pagination <el-pagination
v-model:current-page="pagination.page" v-model:current-page="pagination.page"
v-model:page-size="pagination.limit" v-model:page-size="pagination.limit"
:total="pagination.total" :total="pagination.total"
:page-sizes="[15, 30, 50, 100]" :page-sizes="[15, 30, 50, 100]"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
/> />
</div> </div>
</div> </div>
<TicketForm <TicketForm
v-model="showAddDialog" v-model="showAddDialog"
:form-data="currentTicket" :form-data="currentTicket"
:customers="customerList" :customers="customerList"
:customer-employees="allCustomerEmployees" :customer-employees="allCustomerEmployees"
:staffs="staffList" :staffs="staffList"
:is-editing="isEditing" :is-editing="isEditing"
@submit="handleFormSubmit" @submit="handleFormSubmit"
/> />
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, reactive, onMounted, computed} from 'vue' import { ref, reactive, onMounted, computed } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from "element-plus";
import { Plus, Memo, Clock, Loading, CircleCheck, Checked } from '@element-plus/icons-vue' import {
Plus,
Memo,
Clock,
Loading,
CircleCheck,
Checked,
} from "@element-plus/icons-vue";
// API 引入 // API 引入
import { ticketApi ,customerApi} from '@/api/ticket' import { ticketApi, customerApi } from "@/api/ticket";
// 组件引入 // 组件引入
import TicketFilter from '@/components/ticket/TicketFilter.vue' import TicketFilter from "@/components/ticket/TicketFilter.vue";
import TicketList from '@/components/ticket/TicketList.vue' import TicketList from "@/components/ticket/TicketList.vue";
import TicketForm from '@/components/ticket/TicketForm.vue' import TicketForm from "@/components/ticket/TicketForm.vue";
// --- 响应式状态 --- // --- 响应式状态 ---
const tickets = ref([]) const tickets = ref([]);
const operators = ref([]) const operators = ref([]);
const staffList = ref([]) const staffList = ref([]);
const customerList = ref([]) const customerList = ref([]);
const allCustomerEmployees = ref([]) const allCustomerEmployees = ref([]);
const loading = ref(false) const loading = ref(false);
const showAddDialog = ref(false) const showAddDialog = ref(false);
const isEditing = ref(false) const isEditing = ref(false);
const currentTicket = ref({}) const currentTicket = ref({});
const allStats = reactive({ const allStats = reactive({
total: 0, pending: 0, ongoing: 0, completed: 0, is_completed: 0 total: 0,
}) pending: 0,
ongoing: 0,
completed: 0,
is_completed: 0,
});
const pagination = reactive({ const pagination = reactive({
page: 1, limit: 15, total: 0 page: 1,
}) limit: 15,
total: 0,
});
const filters = reactive({ const filters = reactive({
status: null, status: null,
operator_name: null, operator_name: null,
staff_id: null, staff_id: null,
search: null, search: null,
sort_order: 'desc' sort_order: "desc",
}) });
// --- 核心数据加载方法 --- // --- 核心数据加载方法 ---
// 在 TicketManagement.vue 中利用 computed 提取 // 在 TicketManagement.vue 中利用 computed 提取
const operatorsForFilter = computed(() => { const operatorsForFilter = computed(() => {
// 返回包含 ID、姓名和公司名的对象数组 // 返回包含 ID、姓名和公司名的对象数组
return allCustomerEmployees.value.map(emp => { return allCustomerEmployees.value.map((emp) => {
// 在 allCustomers 中找到该员工所属的公司名 // 在 allCustomers 中找到该员工所属的公司名
const company = customerList.value.find(c => c.customer_id === emp.customer_id); const company = customerList.value.find((c) => c.customer_id === emp.customer_id);
return { return {
id: emp.employee_id, id: emp.employee_id,
name: emp.employee_name, name: emp.employee_name,
company: company ? company.company_name : '未知单位' company: company ? company.company_name : "未知单位",
}; };
}); });
}); });
@@ -147,117 +169,116 @@ const operatorsForFilter = computed(() => {
*/ */
const loadCustomerData = async () => { const loadCustomerData = async () => {
try { try {
const res = await customerApi.getCustomers() const res = await customerApi.getCustomers();
// 适配点：根据返回的 code: 200 逻辑进行判断 // 适配点：根据返回的 code: 200 逻辑进行判断
if (res.code === 200) { if (res.code === 200) {
// 适配点：直接从 res 中获取 customers 和 employees 数组 // 适配点：直接从 res 中获取 customers 和 employees 数组
customerList.value = res.customers || [] customerList.value = res.customers || [];
allCustomerEmployees.value = res.employees || [] allCustomerEmployees.value = res.employees || [];
} }
} catch (error) { } catch (error) {
console.error('获取客户数据失败:', error) console.error("获取客户数据失败:", error);
} }
} };
/** /**
* 加载我方员工列表 * 加载我方员工列表
*/ */
const loadStaffData = async () => { const loadStaffData = async () => {
try { try {
const res = await ticketApi.getStaffs() const res = await ticketApi.getStaffs();
if (res.code) { if (res.code) {
staffList.value = res.data staffList.value = res.data;
} }
} catch (error) { } catch (error) {
console.error('获取我方员工列表失败:', error) console.error("获取我方员工列表失败:", error);
} }
} };
/** /**
* 获取全局统计数据 * 获取全局统计数据
*/ */
const initGlobalStats = async () => { const initGlobalStats = async () => {
try { try {
const response = await ticketApi.getTickets({ page: 1, limit: 1000 }) const response = await ticketApi.getticketsstatuscount();
if (response.code) { if (response.code) {
const allData = response.data.data allStats.total = response.data["total"];
allStats.total = response.data.total allStats.pending = response.data["pending"];
allStats.pending = allData.filter(t => t.is_complete === '未分配').length allStats.ongoing = response.data["ongoing"];
allStats.ongoing = allData.filter(t => t.is_complete === '进行中').length allStats.completed = response.data["completed"];
allStats.completed = allData.filter(t => t.is_complete === '已完成').length allStats.is_completed = response.data["is_completed"];
allStats.is_completed = allData.filter(t => t.is_complete === '已完结').length
} }
} catch (error) { } catch (error) {
console.error('统计全局数据失败:', error) console.error("统计全局数据失败:", error);
} }
} };
/** /**
* 加载列表数据 * 加载列表数据
*/ */
const loadTickets = async () => { const loadTickets = async () => {
loading.value = true loading.value = true;
try { try {
const params = { const params = {
page: pagination.page, page: pagination.page,
limit: pagination.limit, limit: pagination.limit,
...filters ...filters,
} };
const response = await ticketApi.getTickets(params) const response = await ticketApi.getTickets(params);
if (response.code) { if (response.code) {
tickets.value = response.data.data || [] tickets.value = response.data.data || [];
pagination.total = response.data.total || 0 pagination.total = response.data.total || 0;
} }
} catch (error) { } catch (error) {
ElMessage.error('加载列表失败') ElMessage.error("加载列表失败");
} finally { } finally {
loading.value = false loading.value = false;
} }
} };
const refreshAll = () => { const refreshAll = () => {
loadTickets() loadTickets();
initGlobalStats() initGlobalStats();
} };
// --- 事件处理 --- // --- 事件处理 ---
const handleFilterChange = (newFilters) => { const handleFilterChange = (newFilters) => {
Object.assign(filters, newFilters) Object.assign(filters, newFilters);
pagination.page = 1 pagination.page = 1;
loadTickets() loadTickets();
} };
const handleFilterReset = () => { const handleFilterReset = () => {
Object.assign(filters, { Object.assign(filters, {
status: null, status: null,
operator_name: null, operator_name: null,
staff_id: null, staff_id: null,
search: null, search: null,
sort_order: 'desc' sort_order: "desc",
}) });
pagination.page = 1 pagination.page = 1;
loadTickets() loadTickets();
} };
const handleAdd = () => { const handleAdd = () => {
isEditing.value = false isEditing.value = false;
currentTicket.value = { currentTicket.value = {
website: '', website: "",
operator: '', operator: "",
staff_id: null, staff_id: null,
is_complete: '未分配', is_complete: "未分配",
remark: '' remark: "",
} };
showAddDialog.value = true showAddDialog.value = true;
} };
// 编辑工单 // 编辑工单
const handleEdit = (row) => { const handleEdit = (row) => {
isEditing.value = true isEditing.value = true;
currentTicket.value = { ...row } currentTicket.value = { ...row };
showAddDialog.value = true showAddDialog.value = true;
} };
// 处理工单提交 // 处理工单提交
const handleFormSubmit = async (formData) => { const handleFormSubmit = async (formData) => {
@@ -270,80 +291,191 @@ const handleFormSubmit = async (formData) => {
} }
if (response.code) { if (response.code) {
ElMessage.success(isEditing.value ? '修改成功 ✨' : '创建成功 🚀'); ElMessage.success(isEditing.value ? "修改成功 ✨" : "创建成功 🚀");
showAddDialog.value = false; showAddDialog.value = false;
refreshAll(); refreshAll();
} else { } else {
ElMessage.error(response.msg || '操作失败'); ElMessage.error(response.msg || "操作失败");
} }
} catch (error) { } catch (error) {
ElMessage.error('提交失败，系统异常'); ElMessage.error("提交失败，系统异常");
} }
} };
// 删除工单 // 删除工单
const handleDelete = async (id) => { const handleDelete = async (id) => {
try { try {
await ElMessageBox.confirm('确定要删除该工单吗？此操作不可逆', '提示', { await ElMessageBox.confirm("确定要删除该工单吗？此操作不可逆", "提示", {
type: 'warning', confirmButtonText: '确定', cancelButtonText: '取消' type: "warning",
}) confirmButtonText: "确定",
const res = await ticketApi.deleteTicket(id) cancelButtonText: "取消",
});
const res = await ticketApi.deleteTicket(id);
// console.log('删除',res) // console.log('删除',res)
if (res.code) { if (res.code) {
ElMessage.success('删除成功') ElMessage.success("删除成功");
refreshAll() refreshAll();
} }
} catch (error) { } catch (error) {
if (error !== 'cancel') ElMessage.error('删除失败') if (error !== "cancel") ElMessage.error("删除失败");
} }
} };
// 加载所有运营人员 // 加载所有运营人员
const loadOperators = async () => { const loadOperators = async () => {
try { try {
const response = await ticketApi.getOperators() const response = await ticketApi.getOperators();
if (response.code) { if (response.code) {
operators.value = response.data operators.value = response.data;
} }
} catch (error) { } catch (error) {
console.error('获取运营人员筛选列表失败:', error) console.error("获取运营人员筛选列表失败:", error);
} }
} };
const handleSizeChange = (val) => { pagination.limit = val; loadTickets(); } const handleSizeChange = (val) => {
const handleCurrentChange = (val) => { pagination.page = val; loadTickets(); } pagination.limit = val;
loadTickets();
};
const handleCurrentChange = (val) => {
pagination.page = val;
loadTickets();
};
onMounted(() => { onMounted(() => {
loadTickets() loadTickets();
initGlobalStats() initGlobalStats();
loadOperators() loadOperators();
loadStaffData() loadStaffData();
loadCustomerData() // 级联数据加载 loadCustomerData(); // 级联数据加载
}) });
</script> </script>
<style scoped> <style scoped>
/* 样式部分保持不变 */ /* 样式部分保持不变 */
.ticket-management { padding: 20px; background-color: #f8fafc; min-height: 100vh; } .ticket-management {
.stats-container { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 16px; margin-bottom: 24px; } padding: 20px;
.stat-card { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; border-bottom: 3px solid transparent; } background-color: #f8fafc;
.stat-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } min-height: 100vh;
.total { border-bottom-color: #409eff; } }
.total .stat-icon { color: #409eff; background: #ecf5ff; }
.pending { border-bottom-color: #909399; } .stats-container {
.pending .stat-icon { color: #909399; background: #f4f4f5; } display: grid;
.ongoing { border-bottom-color: #e6a23c; } grid-template-columns: repeat(5, minmax(150px, 1fr));
.ongoing .stat-icon { color: #e6a23c; background: #fdf6ec; } gap: 16px;
.success { border-bottom-color: #67c23a; } margin-bottom: 24px;
.success .stat-icon { color: #67c23a; background: #f0f9eb; } }
.finished { border-bottom-color: #009688; }
.finished .stat-icon { color: #009688; background: #e6f6f5; } .stat-card {
.stat-label { font-size: 13px; color: #64748b; margin-bottom: 8px; font-weight: 500; } background: white;
.stat-value { font-size: 24px; font-weight: 700; color: #1e293b; } padding: 20px;
.stat-icon { font-size: 24px; padding: 12px; border-radius: 10px; } border-radius: 12px;
.main-content { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
.action-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } display: flex;
.pagination-container { margin-top: 20px; display: flex; justify-content: flex-end; } justify-content: space-between;
@media (max-width: 1400px) { .stats-container { grid-template-columns: repeat(3, 1fr); } } align-items: center;
@media (max-width: 768px) { .stats-container { grid-template-columns: 1fr 1fr; } } transition: all 0.3s ease;
</style> border-bottom: 3px solid transparent;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.total {
border-bottom-color: #409eff;
}
.total .stat-icon {
color: #409eff;
background: #ecf5ff;
}
.pending {
border-bottom-color: #909399;
}
.pending .stat-icon {
color: #909399;
background: #f4f4f5;
}
.ongoing {
border-bottom-color: #e6a23c;
}
.ongoing .stat-icon {
color: #e6a23c;
background: #fdf6ec;
}
.success {
border-bottom-color: #67c23a;
}
.success .stat-icon {
color: #67c23a;
background: #f0f9eb;
}
.finished {
border-bottom-color: #009688;
}
.finished .stat-icon {
color: #009688;
background: #e6f6f5;
}
.stat-label {
font-size: 13px;
color: #64748b;
margin-bottom: 8px;
font-weight: 500;
}
.stat-value {
font-size: 24px;
font-weight: 700;
color: #1e293b;
}
.stat-icon {
font-size: 24px;
padding: 12px;
border-radius: 10px;
}
.main-content {
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.action-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.pagination-container {
margin-top: 20px;
display: flex;
justify-content: flex-end;
}
@media (max-width: 1400px) {
.stats-container {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.stats-container {
grid-template-columns: 1fr 1fr;
}
}
</style>