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

wip

Browse Source
This commit is contained in:
GiveMePast
2026-07-28 16:24:31 +08:00
parent f54c58c366
commit 17505b5c22
9 changed files with 617 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.kun-canvas/code-thr_193309e7eaa14e82997b674c3c38ef1a/design-system.json Normal file
View File

@@ -0,0 +1,4 @@
{
"tokens": {},
"components": {}
}

54
src/components/common/SearchInput.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<el-input
v-model="keyword"
:placeholder="placeholder"
clearable
class="search-input"
@keyup.enter="handleSearch"
@clear="handleSearch"
>
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
</template>
<script setup>
import { ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
const props = defineProps({
modelValue: { type: String, default: '' },
placeholder: { type: String, default: '搜索网站、备注...' },
})
const emit = defineEmits(['update:modelValue', 'search'])
const keyword = ref(props.modelValue)
watch(() => props.modelValue, (val) => {
keyword.value = val
})
const handleSearch = () => {
emit('update:modelValue', keyword.value)
emit('search', keyword.value)
}
</script>
<style scoped>
.search-input {
width: 320px;
}
.search-input :deep(.el-input__wrapper) {
border-radius: 20px !important;
}
@media (max-width: 1400px) {
.search-input { width: 260px; }
}
@media (max-width: 768px) {
.search-input { width: 100%; }
}
</style>

15
src/components/ticket/TicketFilter.vue
View File

@@ -34,14 +34,7 @@
</el-form-item>
<el-form-item label="关键词" class="search-keyword">
<el-input v-model="localFilters.search" placeholder="搜索网站、备注" clearable @keyup.enter="handleSearch"
class="wide-search-input">
<template #prefix>
<el-icon>
<Search />
</el-icon>
</template>
</el-input>
<SearchInput v-model="localFilters.search" @search="handleSearch" />
</el-form-item>
</div>
</div>
@@ -70,6 +63,7 @@
<script setup>
import { reactive, watch, computed } from "vue";
import { Search, Sort } from "@element-plus/icons-vue";
import SearchInput from "@/components/common/SearchInput.vue";
const props = defineProps({
filters: { type: Object, required: true },
@@ -159,8 +153,6 @@ const setSort = (order) => {
:deep(.el-form-item__label) { color: var(--text-secondary); font-weight: 500; }
.wide-select { width: 180px; }
.wide-search-input { width: 320px; }
.filter-main :deep(.el-input__wrapper),
.filter-main :deep(.el-button) { border-radius: 20px !important; }
:deep(.el-select-dropdown) { border-radius: 12px !important; overflow: hidden; }
@@ -175,11 +167,10 @@ const setSort = (order) => {
padding-left: 12px;
}
@media (max-width: 1400px) { .wide-search-input { width: 260px; } }
@media (max-width: 768px) {
.search-container { flex-direction: column; }
.input-group-row { flex-direction: column; align-items: flex-start; }
.divider-wrapper { display: none; }
.wide-select, .wide-search-input { width: 100%; }
.wide-select { width: 100%; }
}
</style>

26
src/components/ticket/TicketForm.vue
View File

@@ -62,6 +62,12 @@
</el-radio-group>
</el-form-item>
<el-form-item label="任务进度">
<div class="progress-input-wrap">
<el-slider v-model="form.progress" :min="0" :max="100" :step="5" show-input />
</div>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="填写注意事项" resize="none" />
</el-form-item>
@@ -97,6 +103,7 @@ const props = defineProps({
const dialogVisible = ref(false);
const formRef = ref();
const submitting = ref(false);
const isInitializing = ref(false);
// 核心表单对象：customer_id 已包含在内
const form = reactive({
@@ -106,6 +113,7 @@ const form = reactive({
operator_id: null,
user_id: null,
status: 0,
progress: 0,
remark: "",
});
@@ -123,6 +131,17 @@ const handleCustomerChange = () => {
form.operator_id = null;
};
// 状态变为已完成(2)或已完结(3)时，自动将进度设为100
watch(
() => form.status,
(val) => {
if (isInitializing.value) return;
if (val === 2 || val === 3) {
form.progress = 100;
}
}
);
// --- 监听弹窗与回显 ---
watch(
() => props.modelValue,
@@ -130,6 +149,7 @@ watch(
dialogVisible.value = val;
if (val) { // 只在弹窗打开时候，执行初始化
nextTick(() => { // 等待DOM更新完成后再操作表单数据
isInitializing.value = true;
resetForm(); // 先重置
if (props.isEditing && props.formData) {
const d = props.formData;
@@ -167,6 +187,7 @@ watch(
if (u) form.user_id = u.id;
}
}
isInitializing.value = false;
});
}
}
@@ -187,6 +208,7 @@ const resetForm = () => {
operator_id: null,
user_id: null,
status: 0,
progress: 0,
remark: "",
});
};
@@ -261,6 +283,10 @@ const handleSubmit = async () => {
border-radius: var(--radius-sm);
}
.progress-input-wrap {
padding: 0 4px;
}
:deep(.el-form-item__label) {
color: var(--text-secondary);
font-weight: 500;

34
src/components/ticket/TicketList.vue
View File

@@ -3,12 +3,14 @@
<el-table
ref="tableRef"
:data="tickets"
row-key="id"
v-loading="loading"
header-cell-class-name="table-header"
style="width: 100%"
@selection-change="$emit('selection-change', $event)"
@select="onSelect"
@select-all="onSelectAll"
>
<el-table-column type="selection" width="50" />
<el-table-column type="selection" width="50" :reserve-selection="true" />
<el-table-column label="网站地址" min-width="180">
<template #default="{ row }">
<el-link
@@ -147,21 +149,43 @@
</template>
<script setup>
import { ref } from "vue";
import { ref, reactive } from "vue";
import { formatUrl, formatDateTime } from "@/utils/format";
defineProps({
const props = defineProps({
tickets: { type: Array, default: () => [] },
loading: { type: Boolean, default: false },
});
defineEmits(["edit", "delete", "selection-change"]);
const emit = defineEmits(["edit", "delete", "selection-change"]);
const tableRef = ref(null);
const selectedMap = reactive(new Map());
const emitSelection = () => {
emit("selection-change", Array.from(selectedMap.values()));
};
const onSelect = (selection, row) => {
if (selection.some((r) => r.id === row.id)) {
selectedMap.set(row.id, row);
} else {
selectedMap.delete(row.id);
}
emitSelection();
};
const onSelectAll = (selection) => {
props.tickets.forEach((t) => selectedMap.delete(t.id));
selection.forEach((row) => selectedMap.set(row.id, row));
emitSelection();
};
defineExpose({
clearSelection() {
tableRef.value?.clearSelection();
selectedMap.clear();
emit("selection-change", []);
},
});

1
src/utils/request.js
View File

@@ -14,7 +14,6 @@ function createService(basePath) {
service.interceptors.response.use(
response => response.data,
error => {
const resData = error.response?.data
const status = error.response?.status

39
src/views/LoginView.vue
View File

@@ -7,36 +7,23 @@
<p class="desc">登录以继续使用系统</p>
</div>
<el-form
ref="formRef"
:model="form"
:rules="rules"
class="login-form"
@keyup.enter="handleLogin"
>
<el-form ref="formRef" :model="form" :rules="rules" class="login-form" @keyup.enter="handleLogin">
<el-form-item prop="username">
<el-input
v-model="form.username"
placeholder="员工编号"
size="large"
clearable
>
<el-input v-model="form.username" placeholder="员工编号" size="large" clearable>
<template #prefix>
<el-icon><User /></el-icon>
<el-icon>
<User />
</el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="form.password"
type="password"
placeholder="访问密钥"
size="large"
show-password
>
<el-input v-model="form.password" type="password" placeholder="访问密钥" size="large" show-password>
<template #prefix>
<el-icon><Lock /></el-icon>
<el-icon>
<Lock />
</el-icon>
</template>
</el-input>
</el-form-item>
@@ -45,13 +32,7 @@
<el-checkbox v-model="rememberMe">保持登录</el-checkbox>
</div>
<el-button
type="primary"
size="large"
class="submit-btn"
:loading="loading"
@click="handleLogin"
>
<el-button type="primary" size="large" class="submit-btn" :loading="loading" @click="handleLogin">
登 录
</el-button>
</el-form>

29
src/views/TicketManagement.vue
View File

@@ -60,6 +60,7 @@
<div class="batch-bar" v-if="selectedTickets.length">
<span class="batch-info">已选 <strong>{{ selectedTickets.length }}</strong> 个工单</span>
<el-button type="warning" @click="handleBatchFinish">一键已完结</el-button>
<el-button type="primary" @click="handleBatchExport">一键导出</el-button>
<el-button link type="info" @click="ticketListRef.clearSelection()">取消选择</el-button>
</div>
@@ -89,6 +90,7 @@ import {
CircleCheck,
Checked,
} from "@element-plus/icons-vue";
import * as XLSX from "xlsx";
// API 引入
import { ticketApi } from "@/api/ticket";
@@ -272,6 +274,7 @@ const handleAdd = () => {
operator_id: null,
user_id: null,
status: 0,
progress: 0,
remark: "",
};
showAddDialog.value = true;
@@ -356,6 +359,32 @@ const handleBatchFinish = async () => {
}
};
const handleBatchExport = () => {
const data = selectedTickets.value.map((item) => ({
域名: item.website,
数据量: item.datanum || 0,
运营人员: item.operator_name,
采集人员: item.username,
备注: item.remark,
开始时间: item.create_time,
结束时间: item.lock_time,
}));
const worksheet = XLSX.utils.json_to_sheet(data);
const keys = Object.keys(data[0] || {});
worksheet["!cols"] = keys.map((key) => ({
wch: Math.max(
key.replace(/[^\x00-\xff]/g, "00").length,
...data.map((r) => String(r[key] ?? "").replace(/[^\x00-\xff]/g, "00").length)
) + 3,
}));
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "工单导出");
XLSX.writeFile(workbook, `工单导出_${new Date().toISOString().slice(0, 10)}.xlsx`);
ElMessage.success(`已导出 ${data.length} 条工单`);
};
const handleSizeChange = (val) => {
pagination.limit = val;
loadTickets();

514
src/views/UserView.vue
View File

@@ -1,48 +1,30 @@
<template>
<div class="user-view-container">
<!-- 顶层框 -->
<div class="user-header-card">
<div class="header-main">
<div class="welcome-container">
<div class="welcome-section">
<h2 class="greeting">{{ welcomeMessage }}，{{ currentUser.username }}</h2>
<p class="sub-text">欢迎回到你的垃圾堆，开启牛马的一天。</p>
</div>
<div class="identity-badges">
<el-space :size="8">
<el-tag
v-if="realStaffInfo"
type="warning"
effect="plain"
round
size="small"
>
<el-icon>
<User />
</el-icon>
牛马身份: {{ realStaffInfo.username }}
</el-tag>
<el-tag v-else type="danger" round size="small"
>未录入员工表，无权接单</el-tag
>
</el-space>
<p class="sub-text">欢迎回到你的工作堆，开启牛马的一天。</p>
</div>
</div>
</div>
<div class="header-action">
<el-button type="danger" plain @click="handleLogout">
<el-icon> <SwitchButton /> </el-icon>&nbsp;退出登录
<el-icon>
<SwitchButton />
</el-icon>&nbsp;退出登录
</el-button>
</div>
</div>
<!-- 状态标签 -->
<div class="tabs-toolbar-row">
<div class="status-tabs-wrapper">
<el-radio-group
v-model="currentStatus"
@change="handleStatusChange"
class="custom-radio-group"
>
<el-radio-group v-model="currentStatus" @change="handleStatusChange" class="custom-radio-group">
<el-radio-button label="未分配">
<el-icon>
<Notification />
@@ -51,8 +33,7 @@
</el-radio-button>
<el-radio-button label="进行中">
<el-icon>
<Loading v-if="loading" />
<Timer v-else />
<Timer />
</el-icon>
我的进行中
</el-radio-button>
@@ -71,12 +52,17 @@
</el-radio-group>
</div>
<!-- 搜索框 -->
<div class="search-row">
<SearchInput v-model="searchKeyword" placeholder="搜索网站" @search="handleSearch" />
<el-button v-if="searchKeyword" :icon="Close" circle size="small" @click="handleClearSearch" />
</div>
</div>
<div class="table-card">
<el-table
:data="paginatedTickets"
v-loading="loading"
class="custom-table"
>
<!-- 表格 -->
<el-table :data="paginatedTickets" v-loading="loading" class="custom-table">
<template #empty>
<el-empty :image-size="120" :description="emptyText">
<el-button type="primary" plain @click="fetchTickets">刷新列表</el-button>
@@ -86,12 +72,7 @@
<el-table-column prop="id" label="ID" width="70" align="center" />
<el-table-column prop="website" label="网站名称" min-width="150">
<template #default="{ row }">
<el-link
type="primary"
:href="formatUrl(row.website)"
target="_blank"
rel="noopener noreferrer"
>
<el-link type="primary" :href="formatUrl(row.website)" target="_blank" rel="noopener noreferrer">
{{ row.website }}
</el-link>
</template>
@@ -101,20 +82,12 @@
<template #default="scope">
<div class="cell-content-card">
<div class="data-display-area">
<span
v-if="scope.row.datanum && scope.row.datanum !== '0'"
class="display-val"
>{{ scope.row.datanum }}</span
>
<span v-if="scope.row.datanum && scope.row.datanum !== '0'" class="display-val">{{ scope.row.datanum
}}</span>
<span v-else class="no-data-placeholder">-</span>
</div>
<el-popover
v-if="currentStatus !== '未分配'"
placement="top"
:width="200"
trigger="click"
@show="prepareEdit(scope.row, 'datanum')"
>
<el-popover v-if="currentStatus !== '未分配'" placement="top" :width="200" trigger="click"
@show="prepareEdit(scope.row, 'datanum')">
<template #reference>
<el-button type="primary" size="small" link class="edit-link-btn">
{{
@@ -126,19 +99,9 @@
</template>
<div class="popover-content">
<div class="pop-header">录入站点数据量</div>
<el-input
v-model="editValue"
placeholder="请输入数值"
size="small"
clearable
/>
<el-input v-model="editValue" placeholder="请输入数值" size="small" clearable />
<div class="pop-footer">
<el-button
type="primary"
size="small"
@click="submitEdit(scope.row, 'datanum')"
>确认提交</el-button
>
<el-button type="primary" size="small" @click="submitEdit(scope.row, 'datanum')">确认提交</el-button>
</div>
</div>
</el-popover>
@@ -146,30 +109,16 @@
</template>
</el-table-column>
<el-table-column
v-if="currentStatus === '进行中'"
label="任务进度"
width="150"
align="center"
>
<el-table-column v-if="currentStatus === '进行中'" label="任务进度" width="150" align="center">
<template #default="scope">
<div class="cell-content-card">
<div class="data-display-area" style="width: 100%; padding: 0 10px">
<el-progress
:percentage="Number(scope.row.progress || 0)"
:status="Number(scope.row.progress) === 100 ? 'success' : ''"
:stroke-width="12"
striped
striped-flow
/>
<el-progress :percentage="Number(scope.row.progress || 0)"
:status="Number(scope.row.progress) === 100 ? 'success' : ''" :stroke-width="12" striped
striped-flow />
</div>
<el-popover
v-if="currentStatus === '进行中'"
placement="top"
:width="240"
trigger="click"
@show="prepareEdit(scope.row, 'progress')"
>
<el-popover v-if="currentStatus === '进行中'" placement="top" :width="240" trigger="click"
@show="prepareEdit(scope.row, 'progress')">
<template #reference>
<el-button type="primary" size="small" link class="edit-link-btn">
[ 更新进度 ]
@@ -177,11 +126,7 @@
</template>
<div class="popover-content">
<div class="pop-header">调整当前进度 (%)</div>
<el-radio-group
v-model="editValue"
size="small"
class="progress-radio-group"
>
<el-radio-group v-model="editValue" size="small" class="progress-radio-group">
<el-radio-button :label="0">0</el-radio-button>
<el-radio-button :label="30">30</el-radio-button>
<el-radio-button :label="50">50</el-radio-button>
@@ -189,12 +134,7 @@
<el-radio-button :label="99">99</el-radio-button>
</el-radio-group>
<div class="pop-footer">
<el-button
type="primary"
size="small"
@click="submitEdit(scope.row, 'progress')"
>确定</el-button
>
<el-button type="primary" size="small" @click="submitEdit(scope.row, 'progress')">确定</el-button>
</div>
</div>
</el-popover>
@@ -208,22 +148,13 @@
<template #default="scope">
<div class="cell-content-card">
<div class="data-display-area">
<div
v-if="scope.row.remark"
class="display-remark"
:title="scope.row.remark"
>
<div v-if="scope.row.remark" class="display-remark" :title="scope.row.remark">
{{ scope.row.remark }}
</div>
<span v-else class="no-data-placeholder">-</span>
</div>
<el-popover
v-if="currentStatus !== '未分配'"
placement="top"
:width="250"
trigger="click"
@show="prepareEdit(scope.row, 'remark')"
>
<el-popover v-if="currentStatus !== '未分配'" placement="top" :width="250" trigger="click"
@show="prepareEdit(scope.row, 'remark')">
<template #reference>
<el-button type="warning" size="small" link class="edit-link-btn">
{{ scope.row.remark ? "[ 修改备注 ]" : "[ 输入备注 ]" }}
@@ -231,20 +162,9 @@
</template>
<div class="popover-content">
<div class="pop-header">录入工单备注</div>
<el-input
v-model="editValue"
type="textarea"
:rows="3"
placeholder="请输入备注"
size="small"
/>
<el-input v-model="editValue" type="textarea" :rows="3" placeholder="请输入备注" size="small" />
<div class="pop-footer">
<el-button
type="primary"
size="small"
@click="submitEdit(scope.row, 'remark')"
>提交保存</el-button
>
<el-button type="primary" size="small" @click="submitEdit(scope.row, 'remark')">提交保存</el-button>
</div>
</div>
</el-popover>
@@ -252,11 +172,7 @@
</template>
</el-table-column>
<el-table-column
:label="['已完成', '已完结'].includes(currentStatus) ? '锁定日期' : '创建日期'"
width="140"
align="center"
>
<el-table-column :label="['已完成', '已完结'].includes(currentStatus) ? '锁定日期' : '创建日期'" width="140" align="center">
<template #default="scope">
<span class="pure-date">
{{
@@ -272,42 +188,21 @@
<el-table-column label="操作" width="190" fixed="right" align="center">
<template #default="scope">
<el-button
v-if="Number(scope.row.status) === 0"
type="primary"
size="small"
:disabled="!realStaffInfo"
@click="handleAccept(scope.row)"
>立即接单</el-button
>
<template
v-if="
Number(scope.row.status) === 1 &&
String(scope.row.user_id) === String(realStaffInfo?.id)
"
>
<el-button type="success" size="small" @click="handleFinish(scope.row)"
>完成任务</el-button
>
<el-button type="warning" plain size="small" @click="handleCancel(scope.row)"
>取消接单</el-button
>
<el-button v-if="Number(scope.row.status) === 0" type="primary" size="small" :disabled="!realStaffInfo"
@click="handleAccept(scope.row)">立即接单</el-button>
<template v-if="Number(scope.row.status) === 1 && realStaffInfo">
<el-button type="success" size="small" @click="handleFinish(scope.row)">完成任务</el-button>
<el-button type="warning" plain size="small" @click="handleCancel(scope.row)">取消接单</el-button>
</template>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:total="filteredTickets.length"
:page-sizes="[15, 30, 50]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
background
/>
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="allTickets.length"
:page-sizes="[15, 30, 50]" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
@current-change="handleCurrentChange" background />
</div>
</div>
</div>
@@ -325,20 +220,23 @@ import {
CircleCheck,
Checked,
Loading,
Close,
} from "@element-plus/icons-vue";
import { ticketApi, userApi } from "@/api/ticket";
import { resetRouter } from "@/router";
import { formatUrl, formatDate } from "@/utils/format";
import SearchInput from "@/components/common/SearchInput.vue";
const router = useRouter();
const loading = ref(false);
const allTickets = ref([]);
const currentStatus = ref("未分配");
const realStaffInfo = ref(null);
const editValue = ref("");
const searchKeyword = ref("");
const currentPage = ref(1);
const pageSize = ref(15);
const realStaffInfo = ref(null);
const emptyText = computed(() => `暂无${currentStatus.value}的工单`);
// js计算时间
@@ -354,13 +252,14 @@ const welcomeMessage = computed(() => {
// 获取当前用户信息
const currentUser = computed(() => {
const info = localStorage.getItem("user_info") || sessionStorage.getItem("user_info");
return info ? JSON.parse(info) : { id: null, username: "未知" };
const info = sessionStorage.getItem("user_info") || localStorage.getItem("user_info");
return info ? JSON.parse(info) : { id: null, username: "未知", role: "未知" };
});
// 获取工单信息
const fetchTickets = async () => {
loading.value = true;
loading.value = true; // 显示加载中状态
// 优化：不再获取所有工单，而是根据当前视图的状态和用户ID进行筛选
try {
const statusMap = {
@@ -370,28 +269,32 @@ const fetchTickets = async () => {
已完结: 3,
};
const statusValue =
statusMap[currentStatus.value] !== undefined
? statusMap[currentStatus.value]
: currentStatus.value;
const statusValue = statusMap[currentStatus.value]
const params = {
const params = { // 传递后端参数
status: statusValue,
limit: 1000, // 仍然获取足够的数据以支持前端分页
limit: 1000,
};
// 对于非“未分配”的视图，只拉取当前登录员工的工单
// 如果不是未分配，则只拉取当前员工相关的工单
if (currentStatus.value !== "未分配") {
if (!realStaffInfo.value?.id) {
allTickets.value = []; // 如果没有员工信息，则清空列表
// 判断是否是员工
if (currentUser.value.role !== "user") {
allTickets.value = []; // 如果不是员工，则清空列表
loading.value = false;
return;
}
params.user_id = realStaffInfo.value.id;
params.user_id = currentUser.value.id;
}
// 针对员工搜索框
if (searchKeyword.value) {
params.search = searchKeyword.value;
}
const res = await ticketApi.getTickets(params);
if (res.code === 200 || res.code === true) {
if (res.code === 200) {
allTickets.value = res.data.data || [];
} else {
allTickets.value = [];
@@ -405,31 +308,40 @@ const fetchTickets = async () => {
}
};
// 过滤工单
const filteredTickets = computed(() => {
// 优化：由于 fetchTickets 已经从后端获取了经过筛选的数据，
// allTickets 本身就是过滤后的列表，无需再在客户端进行过滤。
return allTickets.value;
});
const paginatedTickets = computed(() => {
const start = (currentPage.value - 1) * pageSize.value;
const end = start + pageSize.value;
return filteredTickets.value.slice(start, end);
return allTickets.value.slice(start, end);
});
const handleSizeChange = (val) => {
pageSize.value = val;
currentPage.value = 1;
};
const handleCurrentChange = (val) => {
currentPage.value = val;
};
const handleStatusChange = async () => {
currentPage.value = 1;
await fetchTickets();
};
const handleSearch = async () => {
currentPage.value = 1;
await fetchTickets();
};
const handleClearSearch = async () => {
searchKeyword.value = "";
currentPage.value = 1;
await fetchTickets();
};
const prepareEdit = (row, field) => {
editValue.value = row[field] || "";
};
@@ -458,7 +370,7 @@ const handleAccept = (row) => {
ElMessageBox.confirm(`确认接手工单 #${row.id}？`).then(async () => {
try {
const res = await ticketApi.updateTicket(row.id, {
user_id: realStaffInfo.value.id,
user_id: currentUser.value.id,
status: 1,
progress: 0,
});
@@ -519,6 +431,7 @@ const handleCancel = (row) => {
});
};
// 退出登录(已完成)
const handleLogout = () => {
ElMessageBox.confirm("确定退出当前账号？", "提示", { type: "warning" }).then(async () => {
try {
@@ -565,7 +478,9 @@ onMounted(async () => {
border: none;
border-radius: 16px;
padding: 28px 32px;
display: flex; justify-content: space-between; align-items: center;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
box-shadow:
0 4px 16px rgba(102, 126, 234, 0.2),
@@ -584,8 +499,19 @@ onMounted(async () => {
pointer-events: none;
}
.header-main { display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
.welcome-container { display: flex; flex-direction: column; gap: 8px; }
.header-main {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 1;
}
.welcome-container {
display: flex;
flex-direction: column;
gap: 8px;
}
.greeting {
margin: 0;
@@ -605,7 +531,14 @@ onMounted(async () => {
letter-spacing: 0.01em;
}
.identity-badges { margin-top: 8px; display: flex; align-items: center; position: relative; z-index: 1; }
.identity-badges {
margin-top: 8px;
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
:deep(.identity-badges .el-tag) {
display: inline-flex !important;
align-items: center !important;
@@ -618,9 +551,16 @@ onMounted(async () => {
padding: 4px 14px !important;
border-radius: 20px !important;
}
:deep(.identity-badges .el-tag .el-icon) { color: #fbbf24 !important; }
.header-action { position: relative; z-index: 1; }
:deep(.identity-badges .el-tag .el-icon) {
color: #fbbf24 !important;
}
.header-action {
position: relative;
z-index: 1;
}
.header-action :deep(.el-button) {
background: rgba(255, 255, 255, 0.15) !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
@@ -629,10 +569,30 @@ onMounted(async () => {
border-radius: 24px !important;
padding: 8px 18px !important;
}
.header-action :deep(.el-button:hover) {
background: rgba(255, 255, 255, 0.25) !important;
}
/* ---- Tabs + Search Row ---- */
.tabs-toolbar-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
gap: 16px;
}
.search-row {
display: flex;
align-items: center;
gap: 8px;
}
.search-row :deep(.search-input) {
width: 200px;
}
/* ---- Tab Switcher ---- */
.status-tabs-wrapper {
background: #fff;
@@ -640,7 +600,6 @@ onMounted(async () => {
border-radius: 14px;
padding: 5px;
display: inline-block;
margin-bottom: 18px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
@@ -649,7 +608,9 @@ onMounted(async () => {
border-radius: 10px !important;
margin: 0 1px;
padding: 10px 18px;
display: flex; align-items: center; gap: 6px;
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
font-size: 13px;
color: #6b6d7a;
@@ -678,7 +639,10 @@ onMounted(async () => {
0 4px 20px rgba(0, 0, 0, 0.04);
}
.custom-table { overflow: hidden; border-radius: var(--radius-md); }
.custom-table {
overflow: hidden;
border-radius: var(--radius-md);
}
:deep(.el-table__header th) {
background: #f8f9fc;
@@ -690,58 +654,150 @@ onMounted(async () => {
border-bottom: 2px solid #eef0f4 !important;
}
:deep(.el-table__body tr) { transition: all 0.15s; }
:deep(.el-table__body tr) {
transition: all 0.15s;
}
:deep(.el-table__body tr:hover > td) {
background: linear-gradient(90deg, rgba(102, 126, 234, 0.03), rgba(118, 75, 162, 0.02)) !important;
}
:deep(.el-table__body tr) { border-bottom: 1px solid #f5f5f8; }
:deep(.el-table__body tr) {
border-bottom: 1px solid #f5f5f8;
}
/* Staggered row tints */
:deep(.el-table__body tr:nth-child(odd) td) { background: #fdfdfe; }
:deep(.el-table__body tr:nth-child(even) td) { background: #fafbfd; }
.cell-content-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 60px; }
.data-display-area { min-height: 24px; display: flex; align-items: center; justify-content: center; width: 100%; }
.display-val { font-weight: 700; color: #667eea; font-size: 15px; font-family: "Courier New", monospace; }
.display-remark {
font-size: 12px; color: #5b5d68; max-width: 180px; line-height: 1.4;
background: #f8f9fc; padding: 4px 12px; border-radius: 6px; text-align: center;
:deep(.el-table__body tr:nth-child(odd) td) {
background: #fdfdfe;
}
:deep(.el-table__body tr:nth-child(even) td) {
background: #fafbfd;
}
.cell-content-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 60px;
}
.data-display-area {
min-height: 24px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.display-val {
font-weight: 700;
color: #667eea;
font-size: 15px;
font-family: "Courier New", monospace;
}
.display-remark {
font-size: 12px;
color: #5b5d68;
max-width: 180px;
line-height: 1.4;
background: #f8f9fc;
padding: 4px 12px;
border-radius: 6px;
text-align: center;
}
.no-data-placeholder {
color: #c0c4cc;
font-size: 12px;
}
.pure-date {
color: #6b6d7a;
font-weight: 500;
font-family: "Courier New", monospace;
font-size: 12px;
}
.edit-link-btn {
font-size: 12px;
height: auto;
padding: 0;
opacity: 0.6;
color: #667eea;
transition: all 0.15s;
}
.edit-link-btn:hover {
opacity: 1;
color: #4f46e5;
font-weight: 600;
}
.no-data-placeholder { color: #c0c4cc; font-size: 12px; }
.pure-date { color: #6b6d7a; font-weight: 500; font-family: "Courier New", monospace; font-size: 12px; }
.edit-link-btn { font-size: 12px; height: auto; padding: 0; opacity: 0.6; color: #667eea; transition: all 0.15s; }
.edit-link-btn:hover { opacity: 1; color: #4f46e5; font-weight: 600; }
/* ---- Pagination ---- */
.pagination-container {
margin-top: 18px; display: flex; justify-content: flex-end;
margin-top: 18px;
display: flex;
justify-content: flex-end;
padding-top: 16px;
border-top: 1px solid #f0f1f4;
}
/* ---- Progress ---- */
:deep(.el-progress-bar__outer) { background: #eef0f4; border-radius: 10px; overflow: hidden; }
:deep(.el-progress-bar__outer) {
background: #eef0f4;
border-radius: 10px;
overflow: hidden;
}
:deep(.el-progress-bar__inner) {
background: linear-gradient(90deg, #667eea, #764ba2) !important;
}
:deep(.el-progress-bar__innerText) {
display: flex !important; align-items: center !important;
justify-content: center !important; height: 100% !important;
line-height: 1 !important; vertical-align: middle !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
line-height: 1 !important;
vertical-align: middle !important;
}
:deep(.el-progress-bar__innerText svg),
:deep(.el-progress-bar__innerText .el-icon) {
margin: 0 !important; position: relative !important;
top: -1px !important; width: 0.8em; height: 0.8em;
margin: 0 !important;
position: relative !important;
top: -1px !important;
width: 0.8em;
height: 0.8em;
}
:deep(.el-progress) { display: flex; align-items: center; }
.progress-radio-group { display: flex; justify-content: center; margin: 10px 0; }
.progress-radio-group :deep(.el-radio-button__inner) { padding: 8px 10px !important; }
:deep(.el-progress) {
display: flex;
align-items: center;
}
.progress-radio-group {
display: flex;
justify-content: center;
margin: 10px 0;
}
.progress-radio-group :deep(.el-radio-button__inner) {
padding: 8px 10px !important;
}
/* ---- Table Overrides ---- */
:deep(.el-table__row) { height: 100px; }
:deep(.el-table .cell) { overflow: visible !important; }
:deep(.el-table__row) {
height: 100px;
}
:deep(.el-table .cell) {
overflow: visible !important;
}
/* ---- Popover (Inline Edit Flyout) ---- */
:deep(.el-popover) {
@@ -770,9 +826,11 @@ onMounted(async () => {
align-items: center;
gap: 6px;
}
.pop-header::before {
content: "";
width: 3px; height: 14px;
width: 3px;
height: 14px;
background: linear-gradient(180deg, #667eea, #764ba2);
border-radius: 2px;
}
@@ -782,9 +840,11 @@ onMounted(async () => {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset !important;
transition: box-shadow 0.2s;
}
:deep(.popover-content .el-input__wrapper:hover) {
box-shadow: 0 0 0 1px rgba(102, 126, 234, 0.3) inset !important;
}
:deep(.popover-content .el-input__wrapper.is-focus) {
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15), 0 0 0 1px #667eea inset !important;
}
@@ -795,6 +855,7 @@ onMounted(async () => {
transition: box-shadow 0.2s;
font-size: 13px;
}
:deep(.popover-content .el-textarea__inner:focus) {
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15), 0 0 0 1px #667eea inset !important;
}
@@ -803,6 +864,7 @@ onMounted(async () => {
margin-top: 10px;
text-align: right;
}
.pop-footer :deep(.el-button--primary) {
background: linear-gradient(135deg, #667eea, #764ba2) !important;
border: none !important;
@@ -812,6 +874,7 @@ onMounted(async () => {
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
transition: all 0.2s;
}
.pop-footer :deep(.el-button--primary:hover) {
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
transform: translateY(-1px);
@@ -822,9 +885,11 @@ onMounted(async () => {
border-radius: 8px !important;
padding: 6px 12px !important;
}
:deep(.popover-content .el-radio-button__inner:hover) {
color: #667eea !important;
}
:deep(.popover-content .is-active .el-radio-button__inner) {
background: linear-gradient(135deg, #667eea, #764ba2) !important;
border-color: transparent !important;
@@ -833,10 +898,21 @@ onMounted(async () => {
}
/* ---- Action Buttons Glow ---- */
:deep(.el-table .el-button--primary) { transition: all 0.2s; }
:deep(.el-table .el-button--primary:hover) { box-shadow: 0 0 12px var(--glow-indigo); }
:deep(.el-table .el-button--success:hover) { box-shadow: 0 0 12px var(--glow-green); }
:deep(.el-table .el-button--warning:hover) { box-shadow: 0 0 12px var(--glow-amber); }
:deep(.el-table .el-button--primary) {
transition: all 0.2s;
}
:deep(.el-table .el-button--primary:hover) {
box-shadow: 0 0 12px var(--glow-indigo);
}
:deep(.el-table .el-button--success:hover) {
box-shadow: 0 0 12px var(--glow-green);
}
:deep(.el-table .el-button--warning:hover) {
box-shadow: 0 0 12px var(--glow-amber);
}
/* ---- Logout Dropdown ---- */
:deep(.el-dropdown-menu) {