|
|
|
@ -1,109 +1,285 @@ |
|
|
|
<template> |
|
|
|
<div class="mod-config"> |
|
|
|
<!-- 条件查询 --> |
|
|
|
<el-form :inline="true" label-position="top" :model="searchData"> |
|
|
|
<el-form-item :label="'BU'"> |
|
|
|
<el-select v-model="searchData.buNo" placeholder="请选择" clearable style="width: 75px"> |
|
|
|
<el-option |
|
|
|
v-for = "i in buList" |
|
|
|
:key = "i.buNo" |
|
|
|
:label = "i.buDesc" |
|
|
|
:value = "i.buNo"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="'检验单号'"> |
|
|
|
<el-input v-model="searchData.inspectionNo" clearable style="width: 140px"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="'单据号'"> |
|
|
|
<el-input v-model="searchData.poOrderNo" clearable style="width: 150px"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="'单据行号'"> |
|
|
|
<el-input v-model="searchData.poItemNo" clearable style="width: 75px"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="'物料编码'"> |
|
|
|
<el-input v-model="searchData.partNo" clearable style="width: 120px"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="'物料名称'"> |
|
|
|
<el-input v-model="searchData.partDesc" clearable style="width: 200px"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="'SKU'"> |
|
|
|
<el-input v-model="searchData.sku" clearable style="width: 120px"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="'PN'"> |
|
|
|
<el-input v-model="searchData.cinvSourceCode" clearable style="width: 120px"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="'物料类别'"> |
|
|
|
<el-input v-model="searchData.invdefinetype" clearable style="width: 120px"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<el-form :inline="true" label-position="top" :model="searchData"> |
|
|
|
<el-form-item :label="'供应商'"> |
|
|
|
<el-input v-model="searchData.supplierDesc" clearable style="width: 200px"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="'质检员'"> |
|
|
|
<el-input v-model="searchData.inspectorName" clearable style="width: 120px"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="'状态'"> |
|
|
|
<el-select v-model="searchData.states" multiple style="width: 340px"> |
|
|
|
<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.inspectionResult" clearable style="width: 80px"> |
|
|
|
<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.disposalMeasures" clearable style="width: 90px"> |
|
|
|
<el-option |
|
|
|
v-for = "i in disposalMeasuresOptions" |
|
|
|
:key = "i.id" |
|
|
|
:label = "i.disposalMeasures" |
|
|
|
:value = "i.disposalMeasures"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="'采购类型'"> |
|
|
|
<el-select v-model="searchData.orderType" clearable style="width: 90px"> |
|
|
|
<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.submissionType" clearable style="width: 90px"> |
|
|
|
<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> |
|
|
|
<el-form :inline="true" label-position="top" :model="searchData"> |
|
|
|
<el-form-item :label="'送检日期'"> |
|
|
|
<el-date-picker style="width: 160px" v-model="searchData.startDate2" type="datetime" value-format='yyyy-MM-dd HH:mm' format='yyyy-MM-dd HH:mm' placeholder="开始日期"></el-date-picker> |
|
|
|
- |
|
|
|
<el-date-picker style="width: 160px" v-model="searchData.endDate2" type="datetime" value-format='yyyy-MM-dd HH:mm' format='yyyy-MM-dd HH:mm' placeholder="结束日期"></el-date-picker> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="'检验时间'"> |
|
|
|
<el-date-picker style="width: 160px" v-model="searchData.startDate" type="datetime" value-format='yyyy-MM-dd HH:mm' format='yyyy-MM-dd HH:mm' placeholder="开始日期"></el-date-picker> |
|
|
|
- |
|
|
|
<el-date-picker style="width: 160px" v-model="searchData.endDate" type="datetime" value-format='yyyy-MM-dd HH:mm' format='yyyy-MM-dd HH:mm' 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="!authCheck" type="primary" @click="submitResult">审核</el-button> |
|
|
|
<el-button v-if="!authCancelCheck" type="primary" @click="cancelApproval">取消审核</el-button> |
|
|
|
<el-button v-if="!authDelete" type="primary" @click="deleteModal">删除</el-button> |
|
|
|
<el-button v-if="!authOverLoad" type="primary" @click="overLoadModal">任务重载</el-button> |
|
|
|
<el-button type="primary" @click="printList">打印</el-button> |
|
|
|
<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">Search</span> |
|
|
|
</div> |
|
|
|
<div class="header-right"> |
|
|
|
<el-button |
|
|
|
type="text" |
|
|
|
size="small" |
|
|
|
@click="toggleSearchExpand" |
|
|
|
class="collapse-btn"> |
|
|
|
<span>{{ searchExpanded ? '收起' : '展开' }}</span> |
|
|
|
<i :class="searchExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i> |
|
|
|
</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="6"> |
|
|
|
<el-form-item label="BU"> |
|
|
|
<el-select v-model="searchData.buNo" placeholder="请选择" clearable> |
|
|
|
<el-option |
|
|
|
v-for="i in buList" |
|
|
|
:key="i.buNo" |
|
|
|
:label="i.buDesc" |
|
|
|
:value="i.buNo"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
|
|
<el-form-item label="检验单号"> |
|
|
|
<el-input v-model="searchData.inspectionNo" placeholder="请输入检验单号" clearable> |
|
|
|
<i slot="prefix" class="el-input__icon el-icon-document"></i> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
|
|
<el-form-item label="单据号"> |
|
|
|
<el-input v-model="searchData.poOrderNo" placeholder="请输入单据号" clearable> |
|
|
|
<i slot="prefix" class="el-input__icon el-icon-document"></i> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
|
|
<el-form-item label="单据行号"> |
|
|
|
<el-input v-model="searchData.poItemNo" placeholder="请输入单据行号" clearable></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<!-- 第二行 --> |
|
|
|
<el-row :gutter="16"> |
|
|
|
<el-col :span="6"> |
|
|
|
<el-form-item label="物料编码"> |
|
|
|
<el-input v-model="searchData.partNo" placeholder="请输入物料编码" clearable> |
|
|
|
<i slot="prefix" class="el-input__icon el-icon-goods"></i> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
|
|
<el-form-item label="物料名称"> |
|
|
|
<el-input v-model="searchData.partDesc" placeholder="请输入物料名称" clearable> |
|
|
|
<i slot="prefix" class="el-input__icon el-icon-goods"></i> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
|
|
<el-form-item label="SKU"> |
|
|
|
<el-input v-model="searchData.sku" placeholder="请输入SKU" clearable></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
|
|
<el-form-item label="PN"> |
|
|
|
<el-input v-model="searchData.cinvSourceCode" placeholder="请输入PN" clearable></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<!-- 第三行 --> |
|
|
|
<el-row :gutter="16"> |
|
|
|
<el-col :span="6"> |
|
|
|
<el-form-item label="物料类别"> |
|
|
|
<el-input v-model="searchData.invdefinetype" placeholder="请输入物料类别" clearable></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
|
|
<el-form-item label="供应商"> |
|
|
|
<el-input v-model="searchData.supplierDesc" placeholder="请输入供应商" clearable></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
|
|
<el-form-item label="质检员"> |
|
|
|
<el-input v-model="searchData.inspectorName" placeholder="请输入质检员姓名" clearable> |
|
|
|
<i slot="prefix" class="el-input__icon el-icon-user"></i> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
|
|
<el-form-item label="状态"> |
|
|
|
<el-select v-model="searchData.states" multiple collapse-tags placeholder="请选择状态"> |
|
|
|
<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="6"> |
|
|
|
<el-form-item label="检验结论"> |
|
|
|
<el-select v-model="searchData.inspectionResult" clearable placeholder="请选择检验结论"> |
|
|
|
<el-option label="合格" value="合格"> |
|
|
|
<i class="el-icon-success" style="color: #67C23A;"></i> 合格 |
|
|
|
</el-option> |
|
|
|
<el-option label="不合格" value="不合格"> |
|
|
|
<i class="el-icon-error" style="color: #F56C6C;"></i> 不合格 |
|
|
|
</el-option> |
|
|
|
<el-option label="免检" value="免检"> |
|
|
|
<i class="el-icon-circle-check" style="color: #409EFF;"></i> 免检 |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
|
|
<el-form-item label="处置措施"> |
|
|
|
<el-select v-model="searchData.disposalMeasures" clearable placeholder="请选择处置措施"> |
|
|
|
<el-option |
|
|
|
v-for="i in disposalMeasuresOptions" |
|
|
|
:key="i.id" |
|
|
|
:label="i.disposalMeasures" |
|
|
|
:value="i.disposalMeasures"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
|
|
<el-form-item label="采购类型"> |
|
|
|
<el-select v-model="searchData.orderType" clearable placeholder="请选择采购类型"> |
|
|
|
<el-option label="采购订单" value="采购订单"></el-option> |
|
|
|
<el-option label="委外订单" value="委外订单"></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
|
|
<el-form-item label="送检类型"> |
|
|
|
<el-select v-model="searchData.submissionType" clearable placeholder="请选择送检类型"> |
|
|
|
<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="20"> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="送检日期"> |
|
|
|
<el-date-picker |
|
|
|
v-model="searchData.startDate2" |
|
|
|
type="datetime" |
|
|
|
value-format='yyyy-MM-dd HH:mm' |
|
|
|
format='yyyy-MM-dd HH:mm' |
|
|
|
placeholder="开始日期" |
|
|
|
style="width: 44%"> |
|
|
|
</el-date-picker> |
|
|
|
<span style="margin: 0 4px; color: #DCDFE6;">~</span> |
|
|
|
<el-date-picker |
|
|
|
v-model="searchData.endDate2" |
|
|
|
type="datetime" |
|
|
|
value-format='yyyy-MM-dd HH:mm' |
|
|
|
format='yyyy-MM-dd HH:mm' |
|
|
|
placeholder="结束日期" |
|
|
|
style="width: 44%"> |
|
|
|
</el-date-picker> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="检验时间"> |
|
|
|
<el-date-picker |
|
|
|
v-model="searchData.startDate" |
|
|
|
type="datetime" |
|
|
|
value-format='yyyy-MM-dd HH:mm' |
|
|
|
format='yyyy-MM-dd HH:mm' |
|
|
|
placeholder="开始日期" |
|
|
|
style="width: 44%"> |
|
|
|
</el-date-picker> |
|
|
|
<span style="margin: 0 4px; color: #DCDFE6;">~</span> |
|
|
|
<el-date-picker |
|
|
|
v-model="searchData.endDate" |
|
|
|
type="datetime" |
|
|
|
value-format='yyyy-MM-dd HH:mm' |
|
|
|
format='yyyy-MM-dd HH:mm' |
|
|
|
placeholder="结束日期" |
|
|
|
style="width: 44%"> |
|
|
|
</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> |
|
|
|
</div> |
|
|
|
<div class="action-right"> |
|
|
|
<el-button |
|
|
|
v-if="!authCheck" |
|
|
|
type="success" |
|
|
|
icon="el-icon-check" |
|
|
|
@click="submitResult"> |
|
|
|
审核 |
|
|
|
</el-button> |
|
|
|
<el-button |
|
|
|
v-if="!authCancelCheck" |
|
|
|
type="warning" |
|
|
|
icon="el-icon-close" |
|
|
|
@click="cancelApproval"> |
|
|
|
取消审核 |
|
|
|
</el-button> |
|
|
|
<el-button |
|
|
|
v-if="!authDelete" |
|
|
|
type="danger" |
|
|
|
icon="el-icon-delete" |
|
|
|
@click="deleteModal"> |
|
|
|
删除 |
|
|
|
</el-button> |
|
|
|
<el-button |
|
|
|
v-if="!authOverLoad" |
|
|
|
icon="el-icon-refresh" |
|
|
|
@click="overLoadModal"> |
|
|
|
任务重载 |
|
|
|
</el-button> |
|
|
|
<el-button |
|
|
|
icon="el-icon-printer" |
|
|
|
@click="printList"> |
|
|
|
打印 |
|
|
|
</el-button> |
|
|
|
<el-button |
|
|
|
icon="el-icon-download" |
|
|
|
@click="exportExcel()"> |
|
|
|
导出 |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-form> |
|
|
|
</el-card> |
|
|
|
|
|
|
|
<!-- 检验记录展示列表 --> |
|
|
|
<el-table |
|
|
|
@ -705,6 +881,7 @@ |
|
|
|
}, |
|
|
|
data () { |
|
|
|
return { |
|
|
|
searchExpanded: false, |
|
|
|
loadFlag: false, |
|
|
|
transferLoadFlag: false, |
|
|
|
// 是否收藏 |
|
|
|
@ -1810,6 +1987,43 @@ |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
// 切换搜索框展开/收起 |
|
|
|
toggleSearchExpand() { |
|
|
|
this.searchExpanded = !this.searchExpanded |
|
|
|
}, |
|
|
|
|
|
|
|
// 重置搜索条件 |
|
|
|
resetSearch() { |
|
|
|
this.searchData = { |
|
|
|
site: '', |
|
|
|
userName: this.$store.state.user.name, |
|
|
|
inspectionNo: '', |
|
|
|
inspectionTypeNo:'105', |
|
|
|
isQualified: '', |
|
|
|
buNo: '', |
|
|
|
startDate: '', |
|
|
|
endDate: '', |
|
|
|
startDate2: '', |
|
|
|
endDate2: '', |
|
|
|
partNo:'', |
|
|
|
partDesc:'', |
|
|
|
cinvSourceCode:'', |
|
|
|
sku:'', |
|
|
|
state: '', |
|
|
|
inspectionResult: '', |
|
|
|
supplierDesc: '', |
|
|
|
disposalMeasures: '', |
|
|
|
inspectorName: '', |
|
|
|
page: 1, |
|
|
|
limit: 10, |
|
|
|
poOrderNo: '', |
|
|
|
poItemNo: '', |
|
|
|
orderType: '', |
|
|
|
states: ['未开始','待检验'], |
|
|
|
submissionType: '', |
|
|
|
invdefinetype: '' |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 获取用户的bu |
|
|
|
getSiteAndBuByUserName2 () { |
|
|
|
@ -2975,6 +3189,208 @@ |
|
|
|
</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-form /deep/ .el-date-editor.el-input { |
|
|
|
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, |
|
|
|
.action-right { |
|
|
|
display: flex; |
|
|
|
gap: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
.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; |
|
|
|
} |
|
|
|
|
|
|
|
/* 响应式设计 */ |
|
|
|
@media (max-width: 1200px) { |
|
|
|
.search-actions { |
|
|
|
flex-direction: column; |
|
|
|
gap: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.action-left, |
|
|
|
.action-right { |
|
|
|
width: 100%; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .redElSelect .el-input--suffix .el-input__inner{ |
|
|
|
color: red; |
|
|
|
font-weight: bold; |
|
|
|
|
fengyuan_yang
2 months ago