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