<template>
|
<div class="contract-review-page">
|
<!-- 筛选条件 -->
|
<el-card class="search-card" shadow="never">
|
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<el-form-item label="患者姓名" prop="patientName">
|
<el-input
|
v-model="queryParams.patientName"
|
placeholder="请输入患者姓名"
|
clearable
|
@keyup.enter="handleQuery"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="审核状态" prop="reviewStatus">
|
<el-select v-model="queryParams.reviewStatus" placeholder="请选择状态" clearable>
|
<el-option label="待审核" value="0" />
|
<el-option label="审核通过" value="1" />
|
<el-option label="审核驳回" value="2" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="申请时间" prop="applyDate">
|
<el-date-picker
|
v-model="queryParams.applyDate"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="yyyy-MM-dd"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-card>
|
|
<!-- 统计信息 -->
|
<el-row :gutter="20" class="stats-row">
|
<el-col :span="8">
|
<el-card shadow="hover">
|
<div class="stat-item">
|
<div class="stat-number">{{ stats.pending }}</div>
|
<div class="stat-label">待审核申请</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="8">
|
<el-card shadow="hover">
|
<div class="stat-item">
|
<div class="stat-number" style="color: #67C23A;">{{ stats.approved }}</div>
|
<div class="stat-label">已通过审核</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="8">
|
<el-card shadow="hover">
|
<div class="stat-item">
|
<div class="stat-number" style="color: #F56C6C;">{{ stats.rejected }}</div>
|
<div class="stat-label">已驳回申请</div>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<!-- 审核列表 -->
|
<el-card shadow="never">
|
<el-table
|
v-loading="loading"
|
:data="reviewList"
|
style="width: 100%"
|
:default-sort="{prop: 'applyTime', order: 'descending'}"
|
>
|
<el-table-column label="患者信息" min-width="200" fixed>
|
<template slot-scope="scope">
|
<div class="patient-info">
|
<div class="patient-name">{{ scope.row.patientName }}</div>
|
<div class="patient-detail">
|
{{ scope.row.gender }} | {{ scope.row.age }}岁 | {{ scope.row.phone }}
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="申请套餐" min-width="150">
|
<template slot-scope="scope">
|
<el-tag :type="getPackageType(scope.row.servicePackageId)">
|
{{ scope.row.servicePackage }}
|
</el-tag>
|
<div style="font-size: 12px; color: #666; margin-top: 4px;">
|
周期: {{ scope.row.contractPeriod }}年
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="包含服务" min-width="200">
|
<template slot-scope="scope">
|
<el-tooltip effect="dark" :content="scope.row.services.join('、')" placement="top">
|
<span>{{ scope.row.services.slice(0, 2).join('、') }}等{{ scope.row.services.length }}项</span>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column label="申请时间" prop="applyTime" width="160" sortable />
|
<el-table-column label="期望医生" prop="expectDoctor" width="120" />
|
<el-table-column label="特殊要求" min-width="200">
|
<template slot-scope="scope">
|
<span v-if="scope.row.specialRequirements" :title="scope.row.specialRequirements">
|
{{ scope.row.specialRequirements.substring(0, 30) }}...
|
</span>
|
<span v-else style="color: #999;">无特殊要求</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="审核状态" width="100">
|
<template slot-scope="scope">
|
<el-tag :type="getReviewStatusType(scope.row.reviewStatus)" effect="dark">
|
{{ getReviewStatusText(scope.row.reviewStatus) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="审核信息" min-width="180">
|
<template slot-scope="scope">
|
<div v-if="scope.row.reviewStatus !== 0">
|
<div style="font-size: 12px;">审核人: {{ scope.row.reviewer }}</div>
|
<div style="font-size: 12px;">时间: {{ scope.row.reviewTime }}</div>
|
<div v-if="scope.row.reviewStatus === 2" style="color: #f56c6c; font-size: 12px;">
|
原因: {{ scope.row.rejectReason }}
|
</div>
|
</div>
|
<span v-else style="color: #999;">待审核</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="180" fixed="right">
|
<template slot-scope="scope">
|
<el-button
|
v-if="scope.row.reviewStatus === 0"
|
size="mini"
|
type="primary"
|
@click="handleReview(scope.row, 1)"
|
>通过</el-button>
|
<el-button
|
v-if="scope.row.reviewStatus === 0"
|
size="mini"
|
type="danger"
|
@click="handleReview(scope.row, 2)"
|
>驳回</el-button>
|
<el-button
|
size="mini"
|
type="text"
|
@click="handleView(scope.row)"
|
>详情</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页 -->
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
:page.sync="queryParams.pageNum"
|
:limit.sync="queryParams.pageSize"
|
@pagination="getList"
|
/>
|
</el-card>
|
|
<!-- 审核对话框 -->
|
<el-dialog
|
:title="reviewForm.reviewStatus === 1 ? '审核通过确认' : '审核驳回确认'"
|
:visible.sync="reviewDialogVisible"
|
width="500px"
|
>
|
<el-form :model="reviewForm" ref="reviewFormRef" label-width="100px">
|
<el-form-item
|
v-if="reviewForm.reviewStatus === 2"
|
label="驳回原因"
|
prop="rejectReason"
|
:rules="[{ required: true, message: '请输入驳回原因', trigger: 'blur' }]"
|
>
|
<el-input
|
type="textarea"
|
:rows="3"
|
v-model="reviewForm.rejectReason"
|
placeholder="请输入驳回的具体原因，便于患者了解情况"
|
maxlength="200"
|
show-word-limit
|
/>
|
</el-form-item>
|
<el-form-item label="分配医生" prop="assignDoctor">
|
<el-select v-model="reviewForm.assignDoctor" placeholder="请选择负责医生" clearable>
|
<el-option
|
v-for="doctor in availableDoctors"
|
:key="doctor.id"
|
:label="doctor.name"
|
:value="doctor.id"
|
>
|
<span>{{ doctor.name }}</span>
|
<span style="float: right; color: #8492a6; font-size: 13px">
|
{{ doctor.department }}
|
</span>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="备注信息">
|
<el-input
|
type="textarea"
|
:rows="2"
|
v-model="reviewForm.remark"
|
placeholder="可填写额外的备注信息（可选）"
|
maxlength="100"
|
/>
|
</el-form-item>
|
</el-form>
|
<div slot="footer">
|
<el-button @click="reviewDialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="submitReview">确定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'ContractReview',
|
data() {
|
return {
|
loading: false,
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
patientName: undefined,
|
reviewStatus: undefined,
|
applyDate: undefined
|
},
|
total: 0,
|
reviewList: [],
|
reviewDialogVisible: false,
|
reviewForm: {
|
id: undefined,
|
reviewStatus: 1,
|
rejectReason: undefined,
|
assignDoctor: undefined,
|
remark: undefined
|
},
|
currentRow: null,
|
stats: {
|
pending: 0,
|
approved: 0,
|
rejected: 0
|
},
|
availableDoctors: [
|
{ id: '1', name: '王医生', department: '内科' },
|
{ id: '2', name: '李医生', department: '老年科' },
|
{ id: '3', name: '张医生', department: '妇产科' },
|
{ id: '4', name: '刘医生', department: '儿科' },
|
{ id: '5', name: '陈医生', department: '全科' }
|
],
|
servicePackages: {
|
'1': { name: '基础健康管理包', color: 'info' },
|
'2': { name: '慢性病管理包', color: 'success' },
|
'3': { name: '老年人健康包', color: 'warning' },
|
'4': { name: '孕产妇保健包', color: 'danger' },
|
'5': { name: '儿童保健包', color: 'primary' }
|
},
|
rules: {
|
rejectReason: [
|
{ required: true, message: '驳回原因不能为空', trigger: 'blur' }
|
],
|
assignDoctor: [
|
{ required: true, message: '请选择分配医生', trigger: 'change' }
|
]
|
}
|
}
|
},
|
created() {
|
this.getList()
|
this.calculateStats()
|
},
|
methods: {
|
//优化后的模拟数据生成方法
|
generateMockData() {
|
const mockData = []
|
|
// 使用您提供的真实姓名列表
|
const patientNames = [
|
'李肇芬', '卢木仲', '李成白', '方兆玉', '刘翊惠', '丁汉臻', '吴佳瑞', '舒绿珮',
|
'周白芷', '张姿妤', '张虹伦', '周琼玟', '倪怡芳', '郭贵妃', '杨佩芳', '黄文旺',
|
'黄盛玫', '郑丽青', '许智云', '张孟涵', '李小爱', '王恩龙', '朱政廷', '邓诗涵',
|
'陈政倩', '吴俊伯', '阮馨学', '翁惠珠', '吴思翰', '林佩玲'
|
]
|
|
const specialReqs = [
|
'希望医生能定期上门检查',
|
'需要周末时间段的服务',
|
'对药物有过敏史，需特别注意',
|
'行动不便，需要上门服务',
|
'无特殊要求',
|
'需要英语服务支持',
|
'有高血压病史，需重点关注',
|
'需要定期血糖监测服务',
|
'希望有固定的家庭医生',
|
'需要心理疏导服务'
|
]
|
|
const rejectReasons = [
|
'资料不完整，请补充健康档案',
|
'不符合当前签约条件',
|
'选择的医生档期已满',
|
'服务套餐与病情不匹配',
|
'年龄不符合套餐要求',
|
'请补充完整的病史资料'
|
]
|
|
// 生成约30条数据（与姓名数量匹配）
|
for (let i = 0; i < patientNames.length; i++) {
|
const packageId = (i % 5) + 1 + ''
|
const reviewStatus = i % 3 // 0:待审核, 1:通过, 2:驳回
|
const applyDate = this.generateRandomDate('2024-10-01', '2024-12-08')
|
|
// 生成更真实的电话号码
|
const phonePrefix = ['138', '139', '150', '151', '152', '186', '187', '188']
|
const phone = `${phonePrefix[i % phonePrefix.length]}${this.padNumber(1000 + i * 37, 4)}${this.padNumber(i % 100, 2)}`
|
|
// 生成合理的年龄（0-80岁）
|
const age = i % 80
|
const gender = i % 2 === 0 ? '男' : '女'
|
|
mockData.push({
|
id: `A${2024000 + i}`,
|
patientName: patientNames[i],
|
gender: gender,
|
age: age,
|
phone: phone,
|
servicePackageId: packageId,
|
servicePackage: this.servicePackages[packageId].name,
|
services: this.getServicesByPackage(packageId),
|
contractPeriod: [1, 2][i % 2],
|
applyTime: `${applyDate} ${this.padNumber(8 + (i % 10), 2)}:${this.padNumber(i % 60, 2)}:${this.padNumber(i % 60, 2)}`,
|
expectDoctor: ['王医生', '李医生', '张医生', '刘医生', '陈医生'][i % 5],
|
specialRequirements: specialReqs[i % specialReqs.length],
|
reviewStatus: reviewStatus,
|
reviewer: reviewStatus !== 0 ? ['管理员', '系统管理员', '审核专员'][i % 3] : '',
|
reviewTime: reviewStatus !== 0 ?
|
`${this.addDays(applyDate, 1 + (i % 3))} 14:${this.padNumber(i % 60, 2)}:00` : '',
|
rejectReason: reviewStatus === 2 ? rejectReasons[i % rejectReasons.length] : ''
|
})
|
}
|
|
return mockData
|
},
|
|
// 根据套餐获取服务列表
|
getServicesByPackage(packageId) {
|
const servicesMap = {
|
'1': ['年度健康评估', '在线健康咨询', '健康档案管理', '定期健康提醒'],
|
'2': ['专属医生服务', '用药指导管理', '定期随访监测', '个性化康复计划', '紧急医疗咨询'],
|
'3': ['跌倒风险评估', '康复训练指导', '用药安全管理', '定期上门访视', '紧急联系服务', '心理健康关怀'],
|
'4': ['孕期健康管理', '产后康复指导', '新生儿护理咨询', '营养膳食建议', '心理情绪支持'],
|
'5': ['生长发育监测', '疫苗接种管理', '常见病防治', '营养指导', '早期教育咨询']
|
}
|
return servicesMap[packageId] || []
|
},
|
|
// 辅助方法：生成随机日期
|
generateRandomDate(start, end) {
|
const startDate = new Date(start).getTime()
|
const endDate = new Date(end).getTime()
|
const randomTime = startDate + Math.random() * (endDate - startDate)
|
return new Date(randomTime).toISOString().split('T')[0]
|
},
|
|
// 辅助方法：添加天数
|
addDays(date, days) {
|
const result = new Date(date)
|
result.setDate(result.getDate() + days)
|
return result.toISOString().split('T')[0]
|
},
|
|
// 辅助方法：数字补零
|
padNumber(num, length) {
|
return num.toString().padStart(length, '0')
|
},
|
|
// 获取审核列表 [1](@ref)
|
async getList() {
|
this.loading = true
|
try {
|
await new Promise(resolve => setTimeout(resolve, 500))
|
|
const allData = this.generateMockData()
|
let filteredData = allData.filter(item => {
|
if (this.queryParams.patientName &&
|
!item.patientName.includes(this.queryParams.patientName)) {
|
return false
|
}
|
if (this.queryParams.reviewStatus !== undefined &&
|
item.reviewStatus !== parseInt(this.queryParams.reviewStatus)) {
|
return false
|
}
|
if (this.queryParams.applyDate && this.queryParams.applyDate.length === 2) {
|
const applyDate = item.applyTime.split(' ')[0]
|
if (applyDate < this.queryParams.applyDate[0] ||
|
applyDate > this.queryParams.applyDate[1]) {
|
return false
|
}
|
}
|
return true
|
})
|
|
const start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize
|
const end = start + this.queryParams.pageSize
|
this.reviewList = filteredData.slice(start, end)
|
this.total = filteredData.length
|
|
this.calculateStats()
|
} catch (error) {
|
console.error('获取审核列表失败:', error)
|
this.$message.error('数据加载失败')
|
} finally {
|
this.loading = false
|
}
|
},
|
|
// 计算统计信息
|
calculateStats() {
|
const allData = this.generateMockData()
|
this.stats.pending = allData.filter(item => item.reviewStatus === 0).length
|
this.stats.approved = allData.filter(item => item.reviewStatus === 1).length
|
this.stats.rejected = allData.filter(item => item.reviewStatus === 2).length
|
},
|
|
// 获取审核状态文本 [2](@ref)
|
getReviewStatusText(status) {
|
const statusMap = { 0: '待审核', 1: '审核通过', 2: '审核驳回' }
|
return statusMap[status] || '未知'
|
},
|
|
// 获取审核状态类型
|
getReviewStatusType(status) {
|
const typeMap = { 0: 'warning', 1: 'success', 2: 'danger' }
|
return typeMap[status] || 'info'
|
},
|
|
// 获取套餐类型
|
getPackageType(packageId) {
|
const typeMap = { '1': 'info', '2': 'success', '3': 'warning', '4': 'danger', '5': 'primary' }
|
return typeMap[packageId] || 'info'
|
},
|
|
// 搜索操作 [1](@ref)
|
handleQuery() {
|
this.queryParams.pageNum = 1
|
this.getList()
|
},
|
|
// 重置搜索
|
resetQuery() {
|
this.queryParams = {
|
pageNum: 1,
|
pageSize: 10,
|
patientName: undefined,
|
reviewStatus: undefined,
|
applyDate: undefined
|
}
|
this.handleQuery()
|
},
|
|
// 处理审核操作 [2](@ref)
|
handleReview(row, status) {
|
this.currentRow = row
|
this.reviewForm = {
|
id: row.id,
|
reviewStatus: status,
|
rejectReason: undefined,
|
assignDoctor: undefined,
|
remark: undefined
|
}
|
this.reviewDialogVisible = true
|
|
// 清除表单验证
|
this.$nextTick(() => {
|
if (this.$refs.reviewFormRef) {
|
this.$refs.reviewFormRef.clearValidate()
|
}
|
})
|
},
|
|
// 提交审核 [2,6](@ref)
|
async submitReview() {
|
try {
|
// 表单验证
|
if (this.reviewForm.reviewStatus === 2) {
|
if (!this.reviewForm.rejectReason) {
|
this.$message.error('请填写驳回原因')
|
return
|
}
|
}
|
|
if (!this.reviewForm.assignDoctor) {
|
this.$message.error('请选择分配医生')
|
return
|
}
|
|
// 模拟API调用
|
await new Promise(resolve => setTimeout(resolve, 1000))
|
|
// 更新当前行的状态
|
const currentIndex = this.reviewList.findIndex(item => item.id === this.currentRow.id)
|
if (currentIndex !== -1) {
|
this.reviewList[currentIndex].reviewStatus = this.reviewForm.reviewStatus
|
this.reviewList[currentIndex].reviewer = '当前用户'
|
this.reviewList[currentIndex].reviewTime = new Date().toLocaleString()
|
this.reviewList[currentIndex].rejectReason = this.reviewForm.rejectReason
|
|
// 如果审核通过，分配医生
|
if (this.reviewForm.reviewStatus === 1) {
|
const doctor = this.availableDoctors.find(d => d.id === this.reviewForm.assignDoctor)
|
this.reviewList[currentIndex].expectDoctor = doctor ? doctor.name : this.reviewList[currentIndex].expectDoctor
|
}
|
}
|
|
this.$message.success(this.reviewForm.reviewStatus === 1 ? '审核通过成功' : '审核驳回成功')
|
this.reviewDialogVisible = false
|
this.calculateStats() // 重新计算统计信息
|
} catch (error) {
|
console.error('审核操作失败:', error)
|
this.$message.error('审核操作失败')
|
}
|
},
|
|
// 查看详情
|
handleView(row) {
|
this.$message.info(`查看患者 ${row.patientName} 的申请详情`)
|
// 实际开发中跳转到详情页
|
// this.$router.push({ path: '/patient/contract/apply-detail', query: { id: row.id } })
|
},
|
|
// 批量审核通过
|
handleBatchApprove() {
|
const pendingItems = this.reviewList.filter(item => item.reviewStatus === 0)
|
if (pendingItems.length === 0) {
|
this.$message.warning('没有待审核的申请')
|
return
|
}
|
|
this.$confirm(`确定要批量通过 ${pendingItems.length} 个待审核申请吗？`, '批量审核', {
|
type: 'warning'
|
}).then(async () => {
|
try {
|
this.loading = true
|
// 模拟批量审核API调用
|
await new Promise(resolve => setTimeout(resolve, 2000))
|
|
// 更新所有待审核项的状态
|
pendingItems.forEach(item => {
|
item.reviewStatus = 1
|
item.reviewer = '当前用户'
|
item.reviewTime = new Date().toLocaleString()
|
})
|
|
this.$message.success(`批量审核通过成功，共处理 ${pendingItems.length} 个申请`)
|
this.calculateStats()
|
} catch (error) {
|
this.$message.error('批量审核失败')
|
} finally {
|
this.loading = false
|
}
|
})
|
},
|
|
// 导出审核数据
|
handleExport() {
|
const exportData = this.generateMockData()
|
// 实际开发中这里应该调用导出API
|
console.log('导出数据:', exportData)
|
this.$message.info('导出功能开发中，数据已打印到控制台')
|
}
|
},
|
watch: {
|
// 监听审核状态变化，动态设置验证规则 [6](@ref)
|
'reviewForm.reviewStatus': function(newVal) {
|
this.$nextTick(() => {
|
if (this.$refs.reviewFormRef) {
|
this.$refs.reviewFormRef.clearValidate()
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.contract-review-page {
|
padding: 20px;
|
background: #f5f7fa;
|
min-height: calc(100vh - 60px);
|
|
.search-card {
|
margin-bottom: 20px;
|
|
::v-deep .el-form-item {
|
margin-bottom: 0;
|
}
|
}
|
|
.stats-row {
|
margin-bottom: 20px;
|
|
.stat-item {
|
text-align: center;
|
padding: 20px;
|
|
.stat-number {
|
font-size: 32px;
|
font-weight: bold;
|
margin-bottom: 8px;
|
}
|
|
.stat-label {
|
font-size: 14px;
|
color: #666;
|
}
|
}
|
}
|
|
.patient-info {
|
.patient-name {
|
font-weight: 600;
|
margin-bottom: 4px;
|
color: #303133;
|
}
|
|
.patient-detail {
|
font-size: 12px;
|
color: #909399;
|
}
|
}
|
|
// 审核状态样式
|
.review-status {
|
padding: 4px 8px;
|
border-radius: 4px;
|
font-size: 12px;
|
font-weight: 500;
|
|
&.status-pending {
|
background: #fdf6ec;
|
color: #e6a23c;
|
}
|
|
&.status-approved {
|
background: #f0f9e8;
|
color: #67c23a;
|
}
|
|
&.status-rejected {
|
background: #fef0f0;
|
color: #f56c6c;
|
}
|
}
|
|
// 特殊要求文本样式
|
.special-requirements {
|
max-width: 200px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
|
&:hover {
|
white-space: normal;
|
overflow: visible;
|
background: white;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
padding: 8px;
|
border-radius: 4px;
|
position: absolute;
|
z-index: 1000;
|
max-width: 300px;
|
}
|
}
|
|
// 表格样式
|
::v-deep .el-table {
|
.el-table__header-wrapper {
|
th {
|
background-color: #f5f7fa;
|
color: #606266;
|
font-weight: 600;
|
}
|
}
|
|
.el-table__body {
|
tr {
|
transition: all 0.3s ease;
|
|
&:hover {
|
transform: translateY(-1px);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
}
|
|
&.pending-row {
|
background: #fdf6ec !important;
|
|
&:hover {
|
background: #faf2e6 !important;
|
}
|
}
|
}
|
}
|
}
|
|
// 审核对话框样式
|
.review-dialog {
|
::v-deep .el-dialog {
|
border-radius: 8px;
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
}
|
|
.dialog-footer {
|
text-align: right;
|
margin-top: 20px;
|
}
|
}
|
|
// 操作按钮样式
|
.action-buttons {
|
display: flex;
|
gap: 8px;
|
|
.el-button {
|
padding: 7px 12px;
|
border-radius: 4px;
|
font-size: 12px;
|
|
&.approve-btn {
|
background: #67c23a;
|
border-color: #67c23a;
|
color: white;
|
|
&:hover {
|
background: #5daf34;
|
border-color: #5daf34;
|
}
|
}
|
|
&.reject-btn {
|
background: #f56c6c;
|
border-color: #f56c6c;
|
color: white;
|
|
&:hover {
|
background: #e65c5c;
|
border-color: #e65c5c;
|
}
|
}
|
|
&.detail-btn {
|
color: #409eff;
|
border-color: #409eff;
|
|
&:hover {
|
background: #ecf5ff;
|
}
|
}
|
}
|
}
|
|
// 批量操作栏
|
.batch-actions {
|
background: #ecf5ff;
|
padding: 12px 20px;
|
margin-bottom: 16px;
|
border-radius: 4px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.batch-info {
|
color: #409eff;
|
font-size: 14px;
|
}
|
}
|
|
// 空状态样式
|
.empty-state {
|
text-align: center;
|
padding: 40px 20px;
|
color: #909399;
|
|
.empty-icon {
|
font-size: 48px;
|
margin-bottom: 16px;
|
opacity: 0.5;
|
}
|
|
.empty-text {
|
font-size: 14px;
|
}
|
}
|
|
// 响应式设计
|
@media (max-width: 768px) {
|
padding: 10px;
|
|
.stats-row {
|
.el-col {
|
margin-bottom: 10px;
|
}
|
}
|
|
.action-buttons {
|
flex-direction: column;
|
}
|
|
.batch-actions {
|
flex-direction: column;
|
gap: 10px;
|
align-items: stretch;
|
}
|
}
|
}
|
</style>
|
