fengyuan_yang
6 days ago
2 changed files with 697 additions and 0 deletions
@ -0,0 +1,15 @@ |
|||||
|
import { createAPI } from "@/utils/httpRequest.js"; |
||||
|
|
||||
|
// -------------物料未维护模版清单--------------
|
||||
|
|
||||
|
/** |
||||
|
* 查询物料模版状态数据（分页） |
||||
|
* @param {Object} data 查询条件 |
||||
|
*/ |
||||
|
export const searchPartTemplateStatus = data => createAPI(`/report/partTemplateStatus/list`, 'post', data); |
||||
|
|
||||
|
/** |
||||
|
* 获取用户可访问的site列表 |
||||
|
*/ |
||||
|
export const getSiteList = () => createAPI(`/report/partTemplateStatus/getSiteList`, 'get'); |
||||
|
|
||||
@ -0,0 +1,682 @@ |
|||||
|
<template> |
||||
|
<div class="mod-config"> |
||||
|
<!-- 条件查询 --> |
||||
|
<el-card :class="['search-card', { 'collapsed': !searchExpanded }]" shadow="hover"> |
||||
|
<div slot="header" class="search-header"> |
||||
|
<div class="header-left"> |
||||
|
<i class="el-icon-search"></i> |
||||
|
<span class="header-title">物料未维护模版清单</span> |
||||
|
</div> |
||||
|
<div class="header-right"> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
size="small" |
||||
|
@click="toggleSearchExpand" |
||||
|
class="collapse-btn"> |
||||
|
<i :class="searchExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i> |
||||
|
{{ searchExpanded ? '收起' : '展开' }} |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<el-form |
||||
|
:inline="true" |
||||
|
label-position="top" |
||||
|
:model="searchData" |
||||
|
class="search-form" |
||||
|
@keyup.enter.native="getData"> |
||||
|
|
||||
|
<!-- 所有查询条件 - 可展开/收起 --> |
||||
|
<template v-if="searchExpanded"> |
||||
|
<!-- 第一行 --> |
||||
|
<el-row :gutter="16"> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="工厂编码"> |
||||
|
<el-select v-model="searchData.site" placeholder="请选择工厂" clearable filterable style="width: 100%"> |
||||
|
<el-option |
||||
|
v-for="item in siteList" |
||||
|
:key="item" |
||||
|
:label="item" |
||||
|
:value="item"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="物料编码"> |
||||
|
<el-input v-model="searchData.partNo" placeholder="请输入物料编码" clearable></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="物料名称"> |
||||
|
<el-input v-model="searchData.partDesc" placeholder="请输入物料名称" clearable></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="规格型号"> |
||||
|
<el-input v-model="searchData.spec" placeholder="请输入规格型号" clearable></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="部门"> |
||||
|
<el-select v-model="searchData.department" placeholder="请选择部门" clearable style="width: 100%"> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="质量" value="质量"></el-option> |
||||
|
<el-option label="工艺" value="工艺"></el-option> |
||||
|
<el-option label="生产" value="生产"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<!-- 第二行 --> |
||||
|
<el-row :gutter="16"> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="IQC检验标识"> |
||||
|
<el-select v-model="searchData.iqcExempt" placeholder="请选择" clearable style="width: 100%"> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="是" value="是"></el-option> |
||||
|
<el-option label="否" value="否"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="IQC检验模版"> |
||||
|
<el-select v-model="searchData.iqcHas" placeholder="请选择" clearable style="width: 100%"> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="是" value="是"></el-option> |
||||
|
<el-option label="否" value="否"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="IPQC检验标识"> |
||||
|
<el-select v-model="searchData.ipqcExempt" placeholder="请选择" clearable style="width: 100%"> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="是" value="是"></el-option> |
||||
|
<el-option label="否" value="否"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="IPQC检验模版"> |
||||
|
<el-select v-model="searchData.ipqcHas" placeholder="请选择" clearable style="width: 100%"> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="是" value="是"></el-option> |
||||
|
<el-option label="否" value="否"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="FQC检验标识"> |
||||
|
<el-select v-model="searchData.fqcExempt" placeholder="请选择" clearable style="width: 100%"> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="是" value="是"></el-option> |
||||
|
<el-option label="否" value="否"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="FQC检验模版"> |
||||
|
<el-select v-model="searchData.fqcHas" placeholder="请选择" clearable style="width: 100%"> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="是" value="是"></el-option> |
||||
|
<el-option label="否" value="否"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<!-- 第三行 --> |
||||
|
<el-row :gutter="16"> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="OQC检验标识"> |
||||
|
<el-select v-model="searchData.oqcExempt" placeholder="请选择" clearable style="width: 100%"> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="是" value="是"></el-option> |
||||
|
<el-option label="否" value="否"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="OQC检验模版"> |
||||
|
<el-select v-model="searchData.oqcHas" placeholder="请选择" clearable style="width: 100%"> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="是" value="是"></el-option> |
||||
|
<el-option label="否" value="否"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="SOP维护标识"> |
||||
|
<el-select v-model="searchData.hasSop" placeholder="请选择" clearable style="width: 100%"> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="是" value="是"></el-option> |
||||
|
<el-option label="否" value="否"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="打印维护标识"> |
||||
|
<el-select v-model="searchData.hasLabelTemplate" placeholder="请选择" clearable style="width: 100%"> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="是" value="是"></el-option> |
||||
|
<el-option label="否" value="否"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</template> |
||||
|
|
||||
|
<!-- 操作按钮区域 --> |
||||
|
<el-row :gutter="16"> |
||||
|
<el-col :span="24"> |
||||
|
<div class="search-actions"> |
||||
|
<div class="action-left"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
icon="el-icon-search" |
||||
|
:loading="searchLoading" |
||||
|
@click="getData"> |
||||
|
查询 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
icon="el-icon-refresh-left" |
||||
|
@click="resetSearch"> |
||||
|
重置 |
||||
|
</el-button> |
||||
|
<download-excel |
||||
|
:fields="exportFields" |
||||
|
:data="dataList" |
||||
|
type="xls" |
||||
|
name="物料未维护模版清单" |
||||
|
worksheet="数据" |
||||
|
class="el-button el-button--success el-button--medium"> |
||||
|
<i class="el-icon-download"></i> 导出 |
||||
|
</download-excel> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
</el-card> |
||||
|
|
||||
|
<!-- 数据列表 --> |
||||
|
<div class="section-title-bar"> |
||||
|
<i class="el-icon-document"></i> |
||||
|
<span>物料模版状态列表</span> |
||||
|
<span class="total-count">（共 {{ totalPage }} 条）</span> |
||||
|
</div> |
||||
|
<el-table |
||||
|
ref="dataTable" |
||||
|
:height="tableHeight" |
||||
|
:data="dataList" |
||||
|
border |
||||
|
v-loading="dataListLoading" |
||||
|
style="width: 100%;"> |
||||
|
<el-table-column |
||||
|
type="index" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
width="60" |
||||
|
label="序号"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
v-for="(item, index) in columnList" |
||||
|
:key="index" |
||||
|
:sortable="item.columnSortable" |
||||
|
:prop="item.columnProp" |
||||
|
:header-align="item.headerAlign" |
||||
|
:show-overflow-tooltip="true" |
||||
|
:align="item.align" |
||||
|
:min-width="item.columnWidth" |
||||
|
:label="item.columnLabel"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span |
||||
|
:class="{ |
||||
|
'status-yes': scope.row[item.columnProp] === '是', |
||||
|
'status-no': scope.row[item.columnProp] === '否' |
||||
|
}"> |
||||
|
{{ scope.row[item.columnProp] }} |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<el-pagination |
||||
|
style="margin-top: 0px" |
||||
|
@size-change="sizeChangeHandle" |
||||
|
@current-change="currentChangeHandle" |
||||
|
:current-page="pageIndex" |
||||
|
:page-sizes="[20, 50, 100, 200, 500]" |
||||
|
:page-size="pageSize" |
||||
|
:total="totalPage" |
||||
|
layout="total, sizes, prev, pager, next, jumper"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { searchPartTemplateStatus, getSiteList } from "@/api/report/partTemplateStatus.js"; |
||||
|
|
||||
|
export default { |
||||
|
name: "partTemplateStatus", |
||||
|
data() { |
||||
|
return { |
||||
|
// 搜索条件 |
||||
|
searchData: { |
||||
|
site: '', |
||||
|
partNo: '', |
||||
|
partDesc: '', |
||||
|
spec: '', |
||||
|
iqcExempt: '', |
||||
|
iqcHas: '', |
||||
|
ipqcExempt: '', |
||||
|
ipqcHas: '', |
||||
|
fqcExempt: '', |
||||
|
fqcHas: '', |
||||
|
oqcExempt: '', |
||||
|
oqcHas: '', |
||||
|
hasSop: '', |
||||
|
hasLabelTemplate: '', |
||||
|
department: '' |
||||
|
}, |
||||
|
// Site列表 |
||||
|
siteList: [], |
||||
|
// 搜索展开状态 |
||||
|
searchExpanded: true, |
||||
|
// 加载状态 |
||||
|
searchLoading: false, |
||||
|
dataListLoading: false, |
||||
|
// 数据列表 |
||||
|
dataList: [], |
||||
|
// 分页 |
||||
|
pageIndex: 1, |
||||
|
pageSize: 50, |
||||
|
totalPage: 0, |
||||
|
// 表格高度 |
||||
|
tableHeight: 400, |
||||
|
// 列定义 |
||||
|
columnList: [ |
||||
|
{ columnProp: 'partNo', columnLabel: '物料编码', columnWidth: '150', headerAlign: 'center', align: 'left' }, |
||||
|
{ columnProp: 'partDesc', columnLabel: '物料名称', columnWidth: '200', headerAlign: 'center', align: 'left' }, |
||||
|
{ columnProp: 'spec', columnLabel: '规格型号', columnWidth: '150', headerAlign: 'center', align: 'left' }, |
||||
|
{ columnProp: 'iqcExempt', columnLabel: 'IQC检验标识', columnWidth: '110', headerAlign: 'center', align: 'center' }, |
||||
|
{ columnProp: 'iqcHas', columnLabel: 'IQC检验模版', columnWidth: '110', headerAlign: 'center', align: 'center' }, |
||||
|
{ columnProp: 'ipqcExempt', columnLabel: 'IPQC检验标识', columnWidth: '120', headerAlign: 'center', align: 'center' }, |
||||
|
{ columnProp: 'ipqcHas', columnLabel: 'IPQC检验模版', columnWidth: '120', headerAlign: 'center', align: 'center' }, |
||||
|
{ columnProp: 'fqcExempt', columnLabel: 'FQC检验标识', columnWidth: '110', headerAlign: 'center', align: 'center' }, |
||||
|
{ columnProp: 'fqcHas', columnLabel: 'FQC检验模版', columnWidth: '110', headerAlign: 'center', align: 'center' }, |
||||
|
{ columnProp: 'oqcExempt', columnLabel: 'OQC检验标识', columnWidth: '110', headerAlign: 'center', align: 'center' }, |
||||
|
{ columnProp: 'oqcHas', columnLabel: 'OQC检验模版', columnWidth: '110', headerAlign: 'center', align: 'center' }, |
||||
|
{ columnProp: 'hasSop', columnLabel: 'SOP维护标识', columnWidth: '110', headerAlign: 'center', align: 'center' }, |
||||
|
{ columnProp: 'hasLabelTemplate', columnLabel: '打印维护标识', columnWidth: '120', headerAlign: 'center', align: 'center' }, |
||||
|
{ columnProp: 'department', columnLabel: '部门', columnWidth: '100', headerAlign: 'center', align: 'center' } |
||||
|
], |
||||
|
// 导出字段 |
||||
|
exportFields: { |
||||
|
'工厂编码': 'site', |
||||
|
'物料编码': 'partNo', |
||||
|
'物料名称': 'partDesc', |
||||
|
'规格型号': 'spec', |
||||
|
'IQC检验标识': 'iqcExempt', |
||||
|
'IQC检验模版': 'iqcHas', |
||||
|
'IPQC检验标识': 'ipqcExempt', |
||||
|
'IPQC检验模版': 'ipqcHas', |
||||
|
'FQC检验标识': 'fqcExempt', |
||||
|
'FQC检验模版': 'fqcHas', |
||||
|
'OQC检验标识': 'oqcExempt', |
||||
|
'OQC检验模版': 'oqcHas', |
||||
|
'SOP维护标识': 'hasSop', |
||||
|
'打印维护标识': 'hasLabelTemplate', |
||||
|
'部门': 'department' |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.getSiteList(); |
||||
|
this.calculateTableHeight(); |
||||
|
window.addEventListener('resize', this.calculateTableHeight); |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
window.removeEventListener('resize', this.calculateTableHeight); |
||||
|
}, |
||||
|
methods: { |
||||
|
// 计算表格高度 |
||||
|
calculateTableHeight() { |
||||
|
this.$nextTick(() => { |
||||
|
const windowHeight = window.innerHeight; |
||||
|
// 根据搜索条件展开状态动态计算 |
||||
|
const headerHeight = this.searchExpanded ? 360 : 186; |
||||
|
this.tableHeight = windowHeight - headerHeight - 105; |
||||
|
}); |
||||
|
}, |
||||
|
// 切换搜索展开/收起 |
||||
|
toggleSearchExpand() { |
||||
|
this.searchExpanded = !this.searchExpanded; |
||||
|
this.calculateTableHeight(); |
||||
|
}, |
||||
|
// 获取Site列表 |
||||
|
getSiteList() { |
||||
|
getSiteList().then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.siteList = data.siteList || []; |
||||
|
// 如果有权限的site，默认选择第一个 |
||||
|
if (this.siteList.length > 0) { |
||||
|
this.searchData.site = this.siteList[0]; |
||||
|
} |
||||
|
} |
||||
|
}).catch(err => { |
||||
|
console.error('获取Site列表失败:', err); |
||||
|
}); |
||||
|
}, |
||||
|
// 查询数据 |
||||
|
getData() { |
||||
|
this.searchLoading = true; |
||||
|
this.dataListLoading = true; |
||||
|
|
||||
|
const params = { |
||||
|
...this.searchData, |
||||
|
page: this.pageIndex, |
||||
|
limit: this.pageSize |
||||
|
}; |
||||
|
|
||||
|
searchPartTemplateStatus(params).then(({ data }) => { |
||||
|
this.searchLoading = false; |
||||
|
this.dataListLoading = false; |
||||
|
if (data && data.code === 0) { |
||||
|
this.dataList = data.page.list || []; |
||||
|
this.totalPage = data.page.totalCount || 0; |
||||
|
} else { |
||||
|
this.dataList = []; |
||||
|
this.totalPage = 0; |
||||
|
this.$message.error(data.msg || '查询失败'); |
||||
|
} |
||||
|
}).catch(err => { |
||||
|
console.error(err); |
||||
|
this.searchLoading = false; |
||||
|
this.dataListLoading = false; |
||||
|
this.$message.error('查询异常：' + err.message); |
||||
|
}); |
||||
|
}, |
||||
|
// 重置搜索条件 |
||||
|
resetSearch() { |
||||
|
this.searchData = { |
||||
|
site: this.siteList.length > 0 ? this.siteList[0] : '', |
||||
|
partNo: '', |
||||
|
partDesc: '', |
||||
|
spec: '', |
||||
|
iqcExempt: '', |
||||
|
iqcHas: '', |
||||
|
ipqcExempt: '', |
||||
|
ipqcHas: '', |
||||
|
fqcExempt: '', |
||||
|
fqcHas: '', |
||||
|
oqcExempt: '', |
||||
|
oqcHas: '', |
||||
|
hasSop: '', |
||||
|
hasLabelTemplate: '', |
||||
|
department: '' |
||||
|
}; |
||||
|
this.pageIndex = 1; |
||||
|
}, |
||||
|
// 分页处理 |
||||
|
sizeChangeHandle(val) { |
||||
|
this.pageSize = val; |
||||
|
this.pageIndex = 1; |
||||
|
this.getData(); |
||||
|
}, |
||||
|
currentChangeHandle(val) { |
||||
|
this.pageIndex = val; |
||||
|
this.getData(); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 搜索卡片样式 */ |
||||
|
.search-card { |
||||
|
margin-bottom: 16px; |
||||
|
border-radius: 8px; |
||||
|
overflow: hidden; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.search-card:hover { |
||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); |
||||
|
} |
||||
|
|
||||
|
.search-card /deep/ .el-card__header { |
||||
|
padding: 5px 20px; |
||||
|
background: linear-gradient(135deg, #9ac3d0 20%, #b6c7dd 80%); |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.search-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.header-left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.header-left i { |
||||
|
font-size: 16px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.header-title { |
||||
|
font-size: 14px; |
||||
|
font-weight: 600; |
||||
|
letter-spacing: 0.5px; |
||||
|
} |
||||
|
|
||||
|
.header-right { |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.collapse-btn { |
||||
|
color: #fff; |
||||
|
font-weight: 500; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.collapse-btn:hover { |
||||
|
color: #f0f0f0; |
||||
|
transform: translateY(-1px); |
||||
|
} |
||||
|
|
||||
|
.collapse-btn i { |
||||
|
transition: transform 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
/* 搜索表单样式 */ |
||||
|
.search-form { |
||||
|
padding: 6px 0; |
||||
|
min-height: 0; |
||||
|
} |
||||
|
|
||||
|
/* 卡片主体样式 */ |
||||
|
.search-card /deep/ .el-card__body { |
||||
|
padding: 10px; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
/* 收起时的样式 */ |
||||
|
.search-card.collapsed /deep/ .el-card__body { |
||||
|
padding: 10px 20px; |
||||
|
} |
||||
|
|
||||
|
.search-form /deep/ .el-form-item { |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
|
||||
|
.search-form /deep/ .el-form-item__label { |
||||
|
font-weight: 500; |
||||
|
color: #606266; |
||||
|
padding-bottom: 4px; |
||||
|
} |
||||
|
|
||||
|
.search-form /deep/ .el-input__inner, |
||||
|
.search-form /deep/ .el-textarea__inner { |
||||
|
border-radius: 6px; |
||||
|
border: 1px solid #DCDFE6; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.search-form /deep/ .el-input__inner:focus, |
||||
|
.search-form /deep/ .el-textarea__inner:focus { |
||||
|
border-color: #9ac3d0; |
||||
|
box-shadow: 0 0 0 2px rgba(154, 195, 208, 0.1); |
||||
|
} |
||||
|
|
||||
|
.search-form /deep/ .el-select { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
/* 操作按钮区域 */ |
||||
|
.search-actions { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 8px 0 2px 0; |
||||
|
} |
||||
|
|
||||
|
/* 展开时显示上边框 */ |
||||
|
.search-card:not(.collapsed) .search-actions { |
||||
|
border-top: 1px solid #f0f0f0; |
||||
|
margin-top: 6px; |
||||
|
} |
||||
|
|
||||
|
/* 收起时不显示上边框和上边距 */ |
||||
|
.search-card.collapsed .search-actions { |
||||
|
border-top: none; |
||||
|
margin-top: 0; |
||||
|
padding-top: 0; |
||||
|
} |
||||
|
|
||||
|
.action-left { |
||||
|
display: flex; |
||||
|
gap: 8px; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.search-actions .el-button { |
||||
|
border-radius: 4px; |
||||
|
padding: 5px 10px; |
||||
|
font-size: 12px; |
||||
|
font-weight: 500; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.search-actions .el-button:hover { |
||||
|
transform: translateY(-2px); |
||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
||||
|
} |
||||
|
|
||||
|
.search-actions .el-button--primary { |
||||
|
background: #60aeff; |
||||
|
border-color: #60aeff; |
||||
|
} |
||||
|
|
||||
|
.search-actions .el-button--primary:hover { |
||||
|
background: #7dbdff; |
||||
|
border-color: #7dbdff; |
||||
|
} |
||||
|
|
||||
|
.search-actions .el-button--success { |
||||
|
background: #67C23A; |
||||
|
border-color: #67C23A; |
||||
|
} |
||||
|
|
||||
|
.search-actions .el-button--success:hover { |
||||
|
background: #85ce61; |
||||
|
border-color: #85ce61; |
||||
|
} |
||||
|
|
||||
|
.search-actions .el-button--danger { |
||||
|
background: #F56C6C; |
||||
|
border-color: #F56C6C; |
||||
|
} |
||||
|
|
||||
|
.search-actions .el-button--danger:hover { |
||||
|
background: #f78989; |
||||
|
border-color: #f78989; |
||||
|
} |
||||
|
|
||||
|
.search-actions .el-button--warning { |
||||
|
background: #E6A23C; |
||||
|
border-color: #E6A23C; |
||||
|
} |
||||
|
|
||||
|
.search-actions .el-button--warning:hover { |
||||
|
background: #ebb563; |
||||
|
border-color: #ebb563; |
||||
|
} |
||||
|
|
||||
|
/* 区域标题栏样式 */ |
||||
|
.section-title-bar { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 8px 12px; |
||||
|
background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%); |
||||
|
border-radius: 4px; |
||||
|
margin-bottom: 8px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 600; |
||||
|
color: #303133; |
||||
|
} |
||||
|
|
||||
|
.section-title-bar i { |
||||
|
font-size: 16px; |
||||
|
margin-right: 8px; |
||||
|
color: #409eff; |
||||
|
} |
||||
|
|
||||
|
.section-title-bar .total-count { |
||||
|
margin-left: 10px; |
||||
|
font-size: 12px; |
||||
|
font-weight: normal; |
||||
|
color: #909399; |
||||
|
} |
||||
|
|
||||
|
/* 状态样式 */ |
||||
|
.status-yes { |
||||
|
color: #67C23A; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.status-no { |
||||
|
color: #F56C6C; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
/* 表格样式 */ |
||||
|
/deep/ .el-table th { |
||||
|
background-color: #f5f7fa; |
||||
|
color: #303133; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-table tr:hover > td { |
||||
|
background-color: #f5f7fa !important; |
||||
|
} |
||||
|
|
||||
|
/* 响应式设计 */ |
||||
|
@media (max-width: 1200px) { |
||||
|
.search-actions { |
||||
|
flex-direction: column; |
||||
|
gap: 10px; |
||||
|
} |
||||
|
|
||||
|
.action-left { |
||||
|
width: 100%; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue