fengyuan_yang
/
boying-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

2026-02-06 

收货入库任务通知
拣货出库任务通知增加查询条件
master
fengyuan_yang 3 weeks ago
parent
fdec629ab0
commit
0d8a6ef1d9
2 changed files with 806 additions and 125 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 471
      src/views/modules/qc/inboundNotification.vue
  2. 460
      src/views/modules/qc/outboundNotification.vue

471
src/views/modules/qc/inboundNotification.vue
View File

@ -1,70 +1,154 @@
<template>
<div class="mod-config">
<!-- 条件查询 -->
<el-form :inline="true" label-position="top" :model="searchData">
<el-form-item :label="'单据号'">
<el-input v-model="searchData.orderNo" clearable style="width: 120px"></el-input>
</el-form-item>
<el-form-item :label="'单据类型'">
<el-select v-model="searchData.orderType" clearable style="width: 100px">
<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-form-item :label="'单据状态'">
<el-select multiple collapse-tags v-model="searchData.orderStatusList" clearable style="width: 160px">
<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-option label="已完成" value="已完成"></el-option>
<el-option label="已关闭" value="已关闭"></el-option>
<el-option label="已归档" value="已归档"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="'部门'">
<el-select v-model="searchData.departmentNo" clearable placeholder="请选择" style="width: 140px">
<el-option
v-for="item in departmentList"
:key="item.departmentNo"
:label="item.departmentDesc"
:value="item.departmentNo">
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="'要求入库日期'">
<el-date-picker
style="width: 120px"
v-model="searchData.startDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item style="margin-top: 23px;">
<laber style="margin-left: -9px;font-size: 19px">&#10142</laber>
</el-form-item>
<el-form-item :label="' '">
<el-date-picker
style="width: 120px"
v-model="searchData.endDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item :label="' '">
<el-button v-if="!authSearch" type="primary" :loading="searchLoading" @click="getDataList()">查询</el-button>
<el-button v-if="!authSave" type="primary" @click="saveModal()">新增</el-button>
<el-button v-if="!authDelete" type="primary" @click="deleteModal()">删除</el-button>
<el-button v-if="!authArchive" type="primary" @click="archiveModal()">归档</el-button>
</el-form-item>
<el-form-item :label="' '">
<el-button @click="exportExcel()" type="primary" style="margin-left: 2px">{{'导出'}}</el-button>
</el-form-item>
</el-form>
<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="getDataList">
<!-- 所有查询条件 - 可展开/收起 -->
<template v-if="searchExpanded">
<!-- 第一行 -->
<el-row :gutter="16">
<el-col :span="4">
<el-form-item label="单据号">
<el-input v-model="searchData.orderNo" placeholder="请输入单据号" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="单据类型">
<el-select v-model="searchData.orderType" 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-col :span="4">
<el-form-item label="单据状态">
<el-select multiple collapse-tags v-model="searchData.orderStatusList" 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-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.departmentNo" placeholder="请选择" clearable style="width: 100%">
<el-option
v-for="item in departmentList"
:key="item.departmentNo"
:label="item.departmentDesc"
:value="item.departmentNo">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="要求入库日期(起)">
<el-date-picker
style="width: 91%"
v-model="searchData.startDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="开始日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="要求入库日期(止)">
<el-date-picker
style="width: 91%"
v-model="searchData.endDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="结束日期">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<!-- 第二行 -->
<el-row :gutter="16">
<el-col :span="4">
<el-form-item label="创建日期(起)">
<el-date-picker
style="width: 91%"
v-model="searchData.createdStartDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="开始日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="创建日期(止)">
<el-date-picker
style="width: 91%"
v-model="searchData.createdEndDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="结束日期">
</el-date-picker>
</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
v-if="!authSearch"
type="primary"
icon="el-icon-search"
:loading="searchLoading"
@click="getDataList()">
查询
</el-button>
<el-button
icon="el-icon-refresh-left"
@click="resetSearch">
重置
</el-button>
<el-button v-if="!authSave" type="success" icon="el-icon-plus" @click="saveModal()">新增</el-button>
<el-button v-if="!authDelete" type="danger" icon="el-icon-delete" @click="deleteModal()">删除</el-button>
<el-button v-if="!authArchive" type="warning" icon="el-icon-folder" @click="archiveModal()">归档</el-button>
<el-button type="primary" icon="el-icon-download" @click="exportExcel()">导出</el-button>
</div>
</div>
</el-col>
</el-row>
</el-form>
</el-card>
<!-- 展示列表 -->
<el-table
@ -750,6 +834,7 @@
},
data () {
return {
searchExpanded: true, // 搜索条件展开状态
columnsProp:['createBy', 'updateBy'],
// 是否收藏
favorite: false,
@ -772,6 +857,8 @@
departmentNo: '', // 部门查询条件
startDate: '',
endDate: '',
createdStartDate: '', // 创建时间开始
createdEndDate: '', // 创建时间结束
page: 1,
limit: 10,
},
@ -1289,12 +1376,17 @@
mounted () {
this.$nextTick(() => {
this.height = window.innerHeight / 2 - 100
/*第二个表格高度的动态调整*/
this.secondHeight = window.innerHeight - this.height - 170
this.calculateTableHeight()
// 监听窗口大小变化
window.addEventListener('resize', this.calculateTableHeight)
})
},
beforeDestroy() {
// 移除窗口大小变化监听
window.removeEventListener('resize', this.calculateTableHeight)
},
created () {
// 按钮控制
this.getButtonAuthData()
@ -1314,6 +1406,43 @@
},
methods: {
// 切换搜索条件展开/收起
toggleSearchExpand() {
this.searchExpanded = !this.searchExpanded
this.$nextTick(() => {
this.calculateTableHeight()
})
},
// 计算表格高度
calculateTableHeight() {
// 展开时搜索区域高度约180px，收起时约80px
const windowHeight = window.innerHeight;
const headerHeight = this.searchExpanded ? 244 : 124;
this.height = (windowHeight - headerHeight - 85) / 2 - 30;
this.secondHeight = windowHeight - this.height - headerHeight - 120;
},
// 重置搜索条件
resetSearch() {
this.searchData = {
site: '',
userName: this.$store.state.user.name,
orderNo: '',
orderType: '',
orderStatus: '',
orderStatusList: ['草稿'],
departmentNo: '',
startDate: '',
endDate: '',
createdStartDate: '',
createdEndDate: '',
page: 1,
limit: 10,
}
this.pageIndex = 1
},
// 获取用户的bu
getSiteAndBuByUserName () {
let tempData = {
@ -2139,4 +2268,212 @@
height: auto;
line-height: 1.5;
}
/* 搜索卡片样式 */
.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;
}
/* 表格样式 */
/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>

460
src/views/modules/qc/outboundNotification.vue
View File

@ -1,61 +1,143 @@
<template>
<div class="mod-config">
<!-- 条件查询 -->
<el-form :inline="true" label-position="top" :model="searchData">
<el-form-item :label="'单据号'">
<el-input v-model="searchData.orderNo" clearable style="width: 120px"></el-input>
</el-form-item>
<el-form-item :label="'单据类型'">
<el-select v-model="searchData.orderType" clearable style="width: 100px">
<el-option label="采购退货" value="采购退货"></el-option>
<el-option label="销售出库" value="销售出库"></el-option>
<el-option label="其他出库" value="其他出库"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="'单据状态'">
<el-select multiple collapse-tags v-model="searchData.orderStatusList" clearable style="width: 160px">
<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-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-form-item :label="'要求出库日期'">
<el-date-picker
style="width: 120px"
v-model="searchData.startDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item style="margin-top: 23px;">
<laber style="margin-left: -9px;font-size: 19px">&#10142</laber>
</el-form-item>
<el-form-item :label="' '">
<el-date-picker
style="width: 120px"
v-model="searchData.endDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item :label="' '">
<el-button v-if="!authSearch" type="primary" :loading="searchLoading" @click="getDataList()">查询</el-button>
<el-button v-if="!authSave" type="primary" @click="saveModal()">新增</el-button>
<el-button v-if="!authDelete" type="primary" @click="deleteModal()">删除</el-button>
<el-button v-if="!authArchive" type="primary" @click="archiveModal()">归档</el-button>
</el-form-item>
<el-form-item :label="' '">
<el-button @click="exportExcel()" type="primary" style="margin-left: 2px">{{'导出'}}</el-button>
<el-button @click="packingModal()" type="primary" style="margin-left: 2px">重新包装</el-button>
</el-form-item>
</el-form>
<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="getDataList">
<!-- 所有查询条件 - 可展开/收起 -->
<template v-if="searchExpanded">
<!-- 第一行 -->
<el-row :gutter="16">
<el-col :span="4">
<el-form-item label="单据号">
<el-input v-model="searchData.orderNo" placeholder="请输入单据号" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="单据类型">
<el-select v-model="searchData.orderType" 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 multiple collapse-tags v-model="searchData.orderStatusList" 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-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-col :span="4">
<el-form-item label="要求出库日期(起)">
<el-date-picker
style="width: 91%"
v-model="searchData.startDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="开始日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="要求出库日期(止)">
<el-date-picker
style="width: 91%"
v-model="searchData.endDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="结束日期">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<!-- 第二行 -->
<el-row :gutter="16">
<el-col :span="4">
<el-form-item label="创建日期(起)">
<el-date-picker
style="width: 91%"
v-model="searchData.createdStartDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="开始日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="创建日期(止)">
<el-date-picker
style="width: 91%"
v-model="searchData.createdEndDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="结束日期">
</el-date-picker>
</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
v-if="!authSearch"
type="primary"
icon="el-icon-search"
:loading="searchLoading"
@click="getDataList()">
查询
</el-button>
<el-button
icon="el-icon-refresh-left"
@click="resetSearch">
重置
</el-button>
<el-button v-if="!authSave" type="success" icon="el-icon-plus" @click="saveModal()">新增</el-button>
<el-button v-if="!authDelete" type="danger" icon="el-icon-delete" @click="deleteModal()">删除</el-button>
<el-button v-if="!authArchive" type="warning" icon="el-icon-folder" @click="archiveModal()">归档</el-button>
<el-button type="primary" icon="el-icon-download" @click="exportExcel()">导出</el-button>
<el-button type="info" icon="el-icon-box" @click="packingModal()">重新包装</el-button>
</div>
</div>
</el-col>
</el-row>
</el-form>
</el-card>
<!-- 展示列表 -->
<el-table
@ -734,6 +816,7 @@
},
data () {
return {
searchExpanded: true, // 搜索条件展开状态
columnsProp:['createBy', 'updateBy'],
// 是否收藏
favorite: false,
@ -755,6 +838,8 @@
orderStatusList: ['草稿'],
startDate: '',
endDate: '',
createdStartDate: '', // 创建时间开始
createdEndDate: '', // 创建时间结束
page: 1,
limit: 10,
},
@ -1242,12 +1327,17 @@
mounted () {
this.$nextTick(() => {
this.height = window.innerHeight / 2 - 100
/*第二个表格高度的动态调整*/
this.secondHeight = window.innerHeight - this.height - 170
this.calculateTableHeight()
// 监听窗口大小变化
window.addEventListener('resize', this.calculateTableHeight)
})
},
beforeDestroy() {
// 移除窗口大小变化监听
window.removeEventListener('resize', this.calculateTableHeight)
},
created () {
// 按钮控制
this.getButtonAuthData()
@ -1265,6 +1355,42 @@
},
methods: {
// 切换搜索条件展开/收起
toggleSearchExpand() {
this.searchExpanded = !this.searchExpanded
this.$nextTick(() => {
this.calculateTableHeight()
})
},
// 计算表格高度
calculateTableHeight() {
// 展开时搜索区域高度约180px，收起时约80px
const windowHeight = window.innerHeight;
const headerHeight = this.searchExpanded ? 244 : 124;
this.height = (windowHeight - headerHeight - 85) / 2 - 30;
this.secondHeight = windowHeight - this.height - headerHeight - 120;
},
// 重置搜索条件
resetSearch() {
this.searchData = {
site: '',
userName: this.$store.state.user.name,
orderNo: '',
orderType: '',
orderStatus: '',
orderStatusList: ['草稿'],
startDate: '',
endDate: '',
createdStartDate: '',
createdEndDate: '',
page: 1,
limit: 10,
}
this.pageIndex = 1
},
// 获取用户的bu
getSiteAndBuByUserName () {
let tempData = {
@ -2155,4 +2281,222 @@
height: auto;
line-height: 1.5;
}
/* 搜索卡片样式 */
.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;
}
.search-actions .el-button--info {
background: #909399;
border-color: #909399;
}
.search-actions .el-button--info:hover {
background: #a6a9ad;
border-color: #a6a9ad;
}
/* 表格样式 */
/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