773 lines
23 KiB
Vue
773 lines
23 KiB
Vue
<template>
|
||
<div>
|
||
<div class="operation-inspection">
|
||
<div class="navigation-tabs">
|
||
<div class="nav-tab" @click="handleInspection1">待办事项</div>
|
||
<div class="nav-tab active" @click="handleInspection2">巡检管理</div>
|
||
<div class="nav-tab" @click="handleInspection3">试验管理</div>
|
||
<div class="nav-tab" @click="handleInspection4">报修管理</div>
|
||
<div class="nav-tab" @click="handleInspection5">抢修管理</div>
|
||
<div class="nav-tab" @click="handleInspection6">工单管理</div>
|
||
<div class="nav-tab" @click="handleInspection7">运维组织</div>
|
||
</div>
|
||
<TitleComponent title="运维巡检管理" subtitle="制定巡检计划，安排巡检任务，跟进巡检记录"></TitleComponent>
|
||
|
||
<!-- 选项卡和按钮组合 -->
|
||
<div class="tabs-wrapper">
|
||
<div style="display: flex; align-items: center; gap: 10px">
|
||
<el-button type="primary" @click="handleInspectionManagement1">巡检计划</el-button>
|
||
<el-button type="primary" @click="handleInspectionManagement2">巡检任务</el-button>
|
||
<el-button type="primary" @click="handleInspectionManagement3">巡检记录</el-button>
|
||
</div>
|
||
</div>
|
||
<!-- 筛选栏 -->
|
||
<div class="filter-bar">
|
||
<div class="filter-item">
|
||
<el-select v-model="planType" placeholder="计划类型" clearable>
|
||
<el-option label="全部类型" value="all"></el-option>
|
||
<el-option label="每日巡检" value="daily"></el-option>
|
||
<el-option label="每周巡检" value="weekly"></el-option>
|
||
<el-option label="每月巡检" value="monthly"></el-option>
|
||
<el-option label="每季度巡检" value="quarterly"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="filter-item">
|
||
<el-select v-model="status" placeholder="全部状态" clearable>
|
||
<el-option label="全部状态" value="all"></el-option>
|
||
<el-option label="启用中" value="enabled"></el-option>
|
||
<el-option label="已停用" value="disabled"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="filter-item">
|
||
<el-select v-model="inspectionObject" placeholder="巡检对象" clearable>
|
||
<el-option label="全部对象" value="all"></el-option>
|
||
<el-option label="服务器" value="server"></el-option>
|
||
<el-option label="网络设备" value="network"></el-option>
|
||
<el-option label="应用系统" value="application"></el-option>
|
||
<el-option label="基础设施" value="infrastructure"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="filter-actions">
|
||
<el-button type="primary" class="search-btn">搜索</el-button>
|
||
<el-button type="primary" icon="el-icon-plus" class="create-btn" @click="handleCreate">手动创建计划</el-button>
|
||
</div>
|
||
</div>
|
||
<!-- 表格 -->
|
||
<div class="table-wrapper">
|
||
<el-table :data="pagedTableData" stripe style="width: 100%" highlight-current-row class="custom-table">
|
||
<el-table-column align="center" prop="name" label="计划名称" style="width: 14.2%"></el-table-column>
|
||
<el-table-column align="center" prop="type" label="类型" style="width: 14.2%"></el-table-column>
|
||
<el-table-column align="center" prop="object" label="巡检对象" style="width: 14.2%"></el-table-column>
|
||
<el-table-column align="center" prop="frequency" label="频率" style="width: 14.2%"></el-table-column>
|
||
<el-table-column align="center" prop="status" label="状态" style="width: 14.2%">
|
||
<template #default="scope">
|
||
<el-tag :type="scope.row.status === 'enabled' ? 'success' : 'info'" class="status-tag">
|
||
{{ scope.row.status === 'enabled' ? '启用中' : '已停用' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="responsible" label="负责人" style="width: 14.2%"></el-table-column>
|
||
<el-table-column align="center" label="操作" style="width: 14.2%" fixed="right">
|
||
<template #default="scope">
|
||
<el-button type="text" @click="handleEdit(scope.row)" size="small" class="action-btn">编辑</el-button>
|
||
<el-button type="text" @click="handleDetail(scope.row)" size="small" class="action-btn">详情</el-button>
|
||
<el-button
|
||
type="text"
|
||
:disabled="scope.row.status === 'disabled'"
|
||
@click="handleEnable(scope.row)"
|
||
size="small"
|
||
class="action-btn"
|
||
:class="{ 'text-success': scope.row.status === 'disabled' }"
|
||
>
|
||
{{ scope.row.status === 'enabled' ? '停用' : '启用' }}
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<!-- 分页区域 -->
|
||
<div class="pagination-section">
|
||
<div class="pagination-info">
|
||
显示第{{ (currentPage - 1) * pageSize + 1 }}到{{ Math.min(currentPage * pageSize, total) }}条，共有{{ total }}条记录
|
||
</div>
|
||
<div class="pagination-controls">
|
||
<el-pagination
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="currentPage"
|
||
:page-sizes="[10, 20, 30, 40]"
|
||
:page-size="pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="total"
|
||
background
|
||
>
|
||
</el-pagination>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 创建计划弹窗 -->
|
||
<el-dialog v-model="dialogVisible" title="新建巡检计划" width="700px" class="create-plan-dialog" center :show-close="true">
|
||
<el-form :model="createForm" :rules="createFormRules" ref="createFormRef" label-width="150px" class="custom-form">
|
||
<el-form-item label="计划名称*" prop="planName" class="form-item-large">
|
||
<el-input v-model="createForm.planName" placeholder="请输入计划名称" class="custom-input" />
|
||
</el-form-item>
|
||
|
||
<div class="form-row">
|
||
<el-form-item label="计划类型*" prop="planType" class="form-item-half">
|
||
<el-select v-model="createForm.planType" placeholder="请选择计划类型" class="custom-select">
|
||
<el-option label="每日巡检" value="daily" />
|
||
<el-option label="每周巡检" value="weekly" />
|
||
<el-option label="每月巡检" value="monthly" />
|
||
<el-option label="每季度巡检" value="quarterly" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="巡检对象类型*" prop="objectType" class="form-item-half">
|
||
<el-select v-model="createForm.objectType" placeholder="请选择对象类型" class="custom-select">
|
||
<el-option label="服务器" value="server" />
|
||
<el-option label="网络设备" value="network" />
|
||
<el-option label="应用系统" value="application" />
|
||
<el-option label="基础设施" value="infrastructure" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<el-form-item label="开始日期*" prop="startDate" class="form-item-half">
|
||
<el-date-picker
|
||
v-model="createForm.startDate"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
class="custom-date-picker"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="结束日期*" prop="endDate" class="form-item-half">
|
||
<el-date-picker
|
||
v-model="createForm.endDate"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
class="custom-date-picker"
|
||
/>
|
||
</el-form-item>
|
||
</div>
|
||
<el-form-item label="巡检频率*" class="form-item-large">
|
||
<div style="display: flex; align-items: center; gap: 20px">
|
||
<el-radio-group v-model="createForm.frequencyType" class="frequency-radio-group">
|
||
<el-radio label="daily">每天</el-radio>
|
||
<el-radio label="weekly">每周</el-radio>
|
||
<el-radio label="monthly">每月</el-radio>
|
||
</el-radio-group>
|
||
|
||
<!-- 每周选择框 - 变小并排在单选框后面 -->
|
||
<el-select
|
||
v-if="createForm.frequencyType === 'weekly'"
|
||
v-model="createForm.weekday"
|
||
placeholder="选择周几"
|
||
class="custom-select-small"
|
||
style="width: 100px"
|
||
>
|
||
<el-option label="周一" value="1" />
|
||
<el-option label="周二" value="2" />
|
||
<el-option label="周三" value="3" />
|
||
<el-option label="周四" value="4" />
|
||
<el-option label="周五" value="5" />
|
||
<el-option label="周六" value="6" />
|
||
<el-option label="周日" value="0" />
|
||
</el-select>
|
||
|
||
<!-- 每月选择框 - 变小并排在单选框后面 -->
|
||
<el-select
|
||
v-if="createForm.frequencyType === 'monthly'"
|
||
v-model="createForm.monthday"
|
||
placeholder="选择几号"
|
||
class="custom-select-small"
|
||
style="width: 100px"
|
||
>
|
||
<template v-for="day in 31" :key="day">
|
||
<el-option :label="day + '号'" :value="day" />
|
||
</template>
|
||
</el-select>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<div class="form-row" s>
|
||
<el-form-item label="计划开始时间*" prop="startTime" class="form-item-half">
|
||
<el-time-picker v-model="createForm.startTime" placeholder="选择时间" format="HH:mm" value-format="HH:mm" class="custom-time-picker" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="预计时长(分钟)" class="form-item-half">
|
||
<el-input v-model.number="createForm.estimatedDuration" class="custom-input" />
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<el-form-item label="负责人*" prop="responsiblePerson" class="form-item-large">
|
||
<el-select v-model="createForm.responsiblePerson" placeholder="请选择负责人" class="custom-select">
|
||
<el-option label="张明" value="zhangming" />
|
||
<el-option label="李华" value="lihua" />
|
||
<el-option label="王强" value="wangqiang" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="巡检项*" class="form-item-large">
|
||
<el-checkbox-group v-model="createForm.inspectionItems" style="border: 0.1 solid black; padding: 5px">
|
||
<el-checkbox label="CPU使用率检查" />
|
||
<el-checkbox label="内存使用情况" />
|
||
<el-checkbox label="磁盘空间检查" />
|
||
<el-checkbox label="网络连接状态" />
|
||
<el-checkbox label="系统日志检查" />
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="备注说明" prop="remarks" class="form-item-large">
|
||
<el-input v-model="createForm.remarks" type="textarea" placeholder="请输入备注" rows="3" class="custom-textarea" />
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="cancelCreatePlan">取消</el-button>
|
||
<el-button type="primary" @click="submitCreatePlan">新增任务</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
// 表单引用
|
||
const createFormRef = ref(null);
|
||
import { ref, computed, reactive } from 'vue';
|
||
import router from '@/router';
|
||
import TitleComponent from '@/views/demo/components/TitleComponent.vue';
|
||
|
||
// 激活的选项卡
|
||
const activeTab = ref('plan');
|
||
// 计划类型
|
||
const planType = ref('all');
|
||
// 状态
|
||
const status = ref('all');
|
||
// 巡检对象
|
||
const inspectionObject = ref('all');
|
||
// 原始表格数据
|
||
const rawTableData = ref([
|
||
{
|
||
name: '生产服务器每日巡检 2025-05-14',
|
||
type: '每日巡检',
|
||
object: '服务器',
|
||
frequency: '每天8:30',
|
||
status: 'enabled',
|
||
responsible: '张明'
|
||
},
|
||
{
|
||
name: '网络设备安全巡检 2025-04-15',
|
||
type: '每周巡检',
|
||
object: '网络设备',
|
||
frequency: '每天10:30',
|
||
status: 'enabled',
|
||
responsible: '张明'
|
||
},
|
||
{
|
||
name: '数据库性能巡检 2025-03-03',
|
||
type: '每月巡检',
|
||
object: '应用系统',
|
||
frequency: '每月1日14:00',
|
||
status: 'disabled',
|
||
responsible: '张明'
|
||
},
|
||
{
|
||
name: '机房环境季度检查',
|
||
type: '每季度巡检',
|
||
object: '基础设备',
|
||
frequency: '每季度第一个月5号',
|
||
status: 'enabled',
|
||
responsible: '张明'
|
||
},
|
||
{
|
||
name: '生产服务器每日巡检 2025-05-14',
|
||
type: '每日巡检',
|
||
object: '服务器',
|
||
frequency: '每天8:30',
|
||
status: 'enabled',
|
||
responsible: '张明'
|
||
},
|
||
{
|
||
name: '生产服务器每日巡检 2025-05-14',
|
||
type: '每日巡检',
|
||
object: '服务器',
|
||
frequency: '每天8:30',
|
||
status: 'enabled',
|
||
responsible: '张明'
|
||
},
|
||
{
|
||
name: '生产服务器每日巡检 2025-05-14',
|
||
type: '每日巡检',
|
||
object: '服务器',
|
||
frequency: '每天8:30',
|
||
status: 'enabled',
|
||
responsible: '张明'
|
||
},
|
||
{
|
||
name: '生产服务器每日巡检 2025-05-14',
|
||
type: '每日巡检',
|
||
object: '服务器',
|
||
frequency: '每天8:30',
|
||
status: 'enabled',
|
||
responsible: '张明'
|
||
},
|
||
{
|
||
name: '生产服务器每日巡检 2025-05-14',
|
||
type: '每日巡检',
|
||
object: '服务器',
|
||
frequency: '每天8:30',
|
||
status: 'enabled',
|
||
responsible: '张明'
|
||
},
|
||
{
|
||
name: '生产服务器每日巡检 2025-05-14',
|
||
type: '每日巡检',
|
||
object: '服务器',
|
||
frequency: '每天8:30',
|
||
status: 'enabled',
|
||
responsible: '张明'
|
||
},
|
||
{
|
||
name: '生产服务器每日巡检 2025-05-14',
|
||
type: '每日巡检',
|
||
object: '服务器',
|
||
frequency: '每天8:30',
|
||
status: 'enabled',
|
||
responsible: '张明'
|
||
},
|
||
// 增加更多数据用于测试分页
|
||
{
|
||
name: '应用系统安全检查',
|
||
type: '每周巡检',
|
||
object: '应用系统',
|
||
frequency: '每周五16:00',
|
||
status: 'enabled',
|
||
responsible: '李华'
|
||
},
|
||
{
|
||
name: '网络带宽监控',
|
||
type: '每日巡检',
|
||
object: '网络设备',
|
||
frequency: '每天12:00',
|
||
status: 'enabled',
|
||
responsible: '王强'
|
||
}
|
||
]);
|
||
// 当前页码
|
||
const currentPage = ref(1);
|
||
// 每页条数 - 与分页控件默认值保持一致
|
||
const pageSize = ref(10);
|
||
// 总条数 - 从原始数据计算得出
|
||
const total = ref(rawTableData.value.length);
|
||
|
||
// 计算属性：根据当前页码和每页条数获取分页后的数据
|
||
const pagedTableData = computed(() => {
|
||
const startIndex = (currentPage.value - 1) * pageSize.value;
|
||
const endIndex = startIndex + pageSize.value;
|
||
return rawTableData.value.slice(startIndex, endIndex);
|
||
});
|
||
|
||
// 每页条数改变
|
||
const handleSizeChange = (val) => {
|
||
pageSize.value = val;
|
||
currentPage.value = 1; // 重置到第一页
|
||
};
|
||
|
||
// 当前页码改变
|
||
const handleCurrentChange = (val) => {
|
||
currentPage.value = val;
|
||
};
|
||
|
||
// 编辑
|
||
const handleEdit = (row) => {
|
||
console.log('编辑', row);
|
||
};
|
||
|
||
// 详情
|
||
const handleDetail = (row) => {
|
||
console.log('详情', row);
|
||
};
|
||
|
||
// 启用/停用
|
||
const handleEnable = (row) => {
|
||
row.status = row.status === 'enabled' ? 'disabled' : 'enabled';
|
||
};
|
||
|
||
// 选项卡切换
|
||
const handleTabChange = (newTab, oldTab) => {
|
||
// 可以在这里添加选项卡切换时的逻辑
|
||
console.log('选项卡切换:', newTab, oldTab);
|
||
return true;
|
||
};
|
||
|
||
// 创建计划弹窗相关
|
||
const dialogVisible = ref(false);
|
||
const createForm = reactive({
|
||
planName: '',
|
||
planType: '',
|
||
objectType: '',
|
||
startDate: '',
|
||
endDate: '',
|
||
frequencyType: 'daily',
|
||
frequencyValue: '',
|
||
weekday: '', // 存储周几
|
||
monthday: '', // 存储几号
|
||
startTime: '',
|
||
estimatedDuration: 60,
|
||
responsiblePerson: '',
|
||
inspectionItems: [],
|
||
remarks: ''
|
||
});
|
||
|
||
// 创建计划表单验证规则
|
||
const createFormRules = computed(() => ({
|
||
planName: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
|
||
planType: [{ required: true, message: '请选择计划类型', trigger: 'change' }],
|
||
objectType: [{ required: true, message: '请选择对象类型', trigger: 'change' }],
|
||
startDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
|
||
endDate: [{ required: true, message: '请选择结束日期', trigger: 'change' }],
|
||
startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
|
||
responsiblePerson: [{ required: true, message: '请选择负责人', trigger: 'change' }],
|
||
weekday: createForm.frequencyType === 'weekly' ? [{ required: true, message: '请选择周几', trigger: 'change' }] : [],
|
||
monthday: createForm.frequencyType === 'monthly' ? [{ required: true, message: '请选择几号', trigger: 'change' }] : []
|
||
}));
|
||
|
||
// 打开创建计划弹窗
|
||
const handleCreate = () => {
|
||
dialogVisible.value = true;
|
||
};
|
||
|
||
// 提交创建计划
|
||
const submitCreatePlan = () => {
|
||
console.log('提交创建计划:', createForm);
|
||
// 这里可以添加实际的创建计划逻辑
|
||
dialogVisible.value = false;
|
||
// 重置表单
|
||
Object.keys(createForm).forEach((key) => {
|
||
if (Array.isArray(createForm[key])) {
|
||
createForm[key] = [];
|
||
} else if (key === 'estimatedDuration') {
|
||
createForm[key] = 60;
|
||
} else if (key === 'frequencyType') {
|
||
createForm[key] = 'daily';
|
||
} else {
|
||
createForm[key] = '';
|
||
}
|
||
});
|
||
};
|
||
|
||
// 取消创建计划
|
||
const cancelCreatePlan = () => {
|
||
dialogVisible.value = false;
|
||
// 重置表单
|
||
Object.keys(createForm).forEach((key) => {
|
||
if (Array.isArray(createForm[key])) {
|
||
createForm[key] = [];
|
||
} else if (key === 'estimatedDuration') {
|
||
createForm[key] = 60;
|
||
} else if (key === 'frequencyType') {
|
||
createForm[key] = 'daily';
|
||
} else {
|
||
createForm[key] = '';
|
||
}
|
||
});
|
||
};
|
||
const handleInspection1 = () => {
|
||
router.push('/rili/rili');
|
||
};
|
||
const handleInspection2 = () => {
|
||
router.push('/rili/InspectionManagement');
|
||
};
|
||
const handleInspection3 = () => {
|
||
router.push('/rili/shiyanguanli');
|
||
};
|
||
const handleInspection4 = () => {
|
||
router.push('/rili/baoxiuguanli');
|
||
};
|
||
const handleInspection5 = () => {
|
||
router.push('/rili/qiangxiuguanli');
|
||
};
|
||
const handleInspection6 = () => {
|
||
router.push('/rili/gongdanliebiao');
|
||
};
|
||
const handleInspection7 = () => {
|
||
router.push('/rili/renyuanzhuangtai');
|
||
};
|
||
const handleInspectionManagement1 = () => {
|
||
router.push('/rili/InspectionManagement');
|
||
};
|
||
|
||
const handleInspectionManagement2 = () => {
|
||
router.push('/rili/xunjianrenwu');
|
||
};
|
||
const handleInspectionManagement3 = () => {
|
||
router.push('/rili/xunjianjihua');
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 样式保持不变 */
|
||
.operation-inspection {
|
||
padding: 20px;
|
||
background-color: #f5f7fa;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* 标题区域样式 */
|
||
.title-section {
|
||
background-color: #fff;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-bottom: 16px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
margin: 0 0 8px 0;
|
||
}
|
||
|
||
.page-subtitle {
|
||
font-size: 14px;
|
||
color: #909399;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 选项卡样式 */
|
||
.tabs-wrapper {
|
||
background-color: #fff;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-bottom: 16px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.custom-tabs {
|
||
border-bottom: none;
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.custom-tabs .el-tabs__header {
|
||
margin: 0 -20px 0 -20px;
|
||
padding: 0 20px;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
}
|
||
|
||
.custom-tabs .el-tabs__nav-wrap::after {
|
||
height: 0;
|
||
}
|
||
|
||
.custom-tabs .el-tabs__item {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
padding: 12px 20px;
|
||
margin-right: 20px;
|
||
border-bottom: 2px solid transparent;
|
||
}
|
||
|
||
.custom-tabs .el-tabs__item.is-active {
|
||
color: #409eff;
|
||
border-bottom-color: #409eff;
|
||
}
|
||
|
||
.custom-tabs .el-tabs__item:hover {
|
||
color: #409eff;
|
||
}
|
||
|
||
/* 筛选栏样式 */
|
||
.filter-bar {
|
||
background-color: #fff;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-bottom: 16px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
}
|
||
|
||
.filter-item {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.filter-bar .el-select {
|
||
width: 150px;
|
||
height: 36px;
|
||
}
|
||
|
||
.filter-actions {
|
||
margin-left: auto;
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.search-btn,
|
||
.create-btn {
|
||
height: 36px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* 表格样式 */
|
||
.table-wrapper {
|
||
background-color: #fff;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-bottom: 16px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.custom-table {
|
||
border: 1px solid #ebeef5;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.custom-table th {
|
||
background-color: #fafafa;
|
||
font-weight: 500;
|
||
color: #606266;
|
||
text-align: left;
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid #ebeef5;
|
||
}
|
||
|
||
.custom-table td {
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid #ebeef5;
|
||
color: #303133;
|
||
}
|
||
|
||
.custom-table tr:hover {
|
||
background-color: #f5f7fa;
|
||
}
|
||
|
||
.custom-table tr.current-row {
|
||
background-color: #ecf5ff;
|
||
}
|
||
|
||
.status-tag {
|
||
padding: 4px 8px;
|
||
font-size: 12px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.action-btn {
|
||
color: #409eff;
|
||
font-size: 12px;
|
||
padding: 4px 8px;
|
||
}
|
||
|
||
.action-btn:hover {
|
||
color: #66b1ff;
|
||
background-color: #ecf5ff;
|
||
}
|
||
|
||
/* 分页区域样式 */
|
||
.pagination-section {
|
||
background-color: #fff;
|
||
padding: 16px 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.pagination-info {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
}
|
||
|
||
.pagination-controls .el-pagination {
|
||
margin: 0;
|
||
}
|
||
|
||
.pagination-controls .el-pagination__sizes {
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.pagination-controls .el-pagination button {
|
||
min-width: 32px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.pagination-controls .el-pagination .el-pager li {
|
||
min-width: 32px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.pagination-controls .el-pagination .el-pager li.active {
|
||
background-color: #409eff;
|
||
color: #fff;
|
||
}
|
||
/* 导航栏样式 */
|
||
.navigation-tabs {
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||
padding: 2px;
|
||
}
|
||
|
||
.nav-tab {
|
||
padding: 12px 24px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
color: #606266;
|
||
border-right: 1px solid #f0f0f0;
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.nav-tab:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
.nav-tab:hover {
|
||
color: #409eff;
|
||
background-color: #ecf5ff;
|
||
}
|
||
|
||
.nav-tab.active {
|
||
background-color: #409eff;
|
||
color: #fff;
|
||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||
}
|
||
|
||
.nav-tab {
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
/* 响应式设计 */
|
||
@media (max-width: 1200px) {
|
||
.filter-bar {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.filter-actions {
|
||
margin-left: 0;
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
</style>
|