5 changed files with 1449 additions and 2 deletions
-
19src/api/erf/erf.js
-
750src/views/modules/erf/approvalCycleReport.vue
-
2src/views/modules/erf/components/expApplyForm.vue
-
2src/views/modules/erf/expApplyList.vue
-
678src/views/modules/erf/sampleCycleReport.vue
@ -0,0 +1,750 @@ |
|||||
|
<template> |
||||
|
<div class="mod-config approval-cycle-report-page"> |
||||
|
<!-- 查询条件表单 --> |
||||
|
<el-form :inline="true" label-position="top" class="query-form"> |
||||
|
<el-form-item label="申请单号"> |
||||
|
<el-input |
||||
|
v-model="queryHeaderData.applyNo" |
||||
|
placeholder="请输入申请单号" |
||||
|
clearable |
||||
|
style="width: 150px"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="事业部"> |
||||
|
<el-select |
||||
|
v-model="queryHeaderData.buNo" |
||||
|
placeholder="请选择" |
||||
|
clearable |
||||
|
style="width: 120px"> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="RFID" value="RFID"></el-option> |
||||
|
<el-option label="RF" value="RF"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="试验类型"> |
||||
|
<el-select |
||||
|
v-model="queryHeaderData.experimentType" |
||||
|
placeholder="请选择" |
||||
|
clearable |
||||
|
style="width: 120px"> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="High Risk" value="High Risk"></el-option> |
||||
|
<el-option label="Low Risk" value="Low Risk"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="申请人"> |
||||
|
<el-input |
||||
|
v-model="queryHeaderData.creatorName" |
||||
|
placeholder="请输入申请人姓名" |
||||
|
clearable |
||||
|
style="width: 120px"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="发起日"> |
||||
|
<el-date-picker |
||||
|
v-model="queryHeaderData.submitStartDate" |
||||
|
type="date" |
||||
|
format="yyyy-MM-dd" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
placeholder="开始日期" |
||||
|
style="width: 140px"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="至"> |
||||
|
<el-date-picker |
||||
|
v-model="queryHeaderData.submitEndDate" |
||||
|
type="date" |
||||
|
format="yyyy-MM-dd" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
placeholder="结束日期" |
||||
|
style="width: 140px"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="审批完成日"> |
||||
|
<el-date-picker |
||||
|
v-model="queryHeaderData.allApproveStartDate" |
||||
|
type="date" |
||||
|
format="yyyy-MM-dd" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
placeholder="开始日期" |
||||
|
style="width: 140px"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="至"> |
||||
|
<el-date-picker |
||||
|
v-model="queryHeaderData.allApproveEndDate" |
||||
|
type="date" |
||||
|
format="yyyy-MM-dd" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
placeholder="结束日期" |
||||
|
style="width: 140px"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="审批周期（天）"> |
||||
|
<el-input |
||||
|
v-model="queryHeaderData.cycleDaysMin" |
||||
|
placeholder="最小值" |
||||
|
style="width: 90px"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="至"> |
||||
|
<el-input |
||||
|
v-model="queryHeaderData.cycleDaysMax" |
||||
|
placeholder="最大值" |
||||
|
style="width: 90px"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label=" " style="margin-top: -11px"> |
||||
|
<el-button @click="getDataList('Y')" type="primary" class="search-btn" plain>查询</el-button> |
||||
|
<el-button @click="resetQuery()" plain class="reset-btn">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<!-- 统计摘要 --> |
||||
|
<div class="summary-bar" v-if="dataList.length > 0"> |
||||
|
<span>共 <b>{{ totalPage }}</b> 条记录，</span> |
||||
|
<span>已全部审批完成 <b>{{ allApprovedCount }}</b> 条，</span> |
||||
|
<span>审批中 <b>{{ totalPage - allApprovedCount }}</b> 条</span> |
||||
|
<span v-if="avgCycleDays !== null">，已完成平均审批周期 <b>{{ avgCycleDays }}</b> 天</span> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 数据表格 --> |
||||
|
<el-table |
||||
|
ref="dataTable" |
||||
|
@row-click="handleRowClick" |
||||
|
highlight-current-row |
||||
|
:data="dataList" |
||||
|
v-loading="dataListLoading" |
||||
|
border |
||||
|
class="data-table" |
||||
|
style="width: 100%;" |
||||
|
:height="tableHeight"> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="applyNo" |
||||
|
label="申请单号" |
||||
|
width="100" |
||||
|
align="center" |
||||
|
header-align="center" |
||||
|
show-overflow-tooltip> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="title" |
||||
|
label="试验名称" |
||||
|
min-width="150" |
||||
|
align="left" |
||||
|
header-align="center" |
||||
|
show-overflow-tooltip> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="buName" |
||||
|
label="事业部" |
||||
|
width="60" |
||||
|
align="center" |
||||
|
header-align="center"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="experimentType" |
||||
|
label="试验类型" |
||||
|
width="80" |
||||
|
align="center" |
||||
|
header-align="center"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="creatorName" |
||||
|
label="申请人" |
||||
|
width="70" |
||||
|
align="center" |
||||
|
header-align="center"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="submitTime" |
||||
|
label="发起日" |
||||
|
width="100" |
||||
|
align="center" |
||||
|
header-align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ formatDate(scope.row.submitTime) }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<!-- 技术经理审批 --> |
||||
|
<el-table-column |
||||
|
label="技术经理审批" |
||||
|
header-align="center" |
||||
|
align="center"> |
||||
|
<el-table-column |
||||
|
prop="techManagerName" |
||||
|
label="审批人" |
||||
|
width="70" |
||||
|
align="center" |
||||
|
header-align="center" |
||||
|
show-overflow-tooltip> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.techManagerName || '-' }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="techApproveTime" |
||||
|
label="审批时间" |
||||
|
width="150" |
||||
|
align="center" |
||||
|
header-align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span :class="scope.row.techApproveTime ? '' : 'pending-text'"> |
||||
|
{{ scope.row.techApproveTime || '待审批' }} |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<!-- 生产经理审批 --> |
||||
|
<el-table-column |
||||
|
label="生产经理审批" |
||||
|
header-align="center" |
||||
|
align="center"> |
||||
|
<el-table-column |
||||
|
prop="prodManagerName" |
||||
|
label="审批人" |
||||
|
width="70" |
||||
|
align="center" |
||||
|
header-align="center" |
||||
|
show-overflow-tooltip> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.prodManagerName || '-' }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="prodApproveTime" |
||||
|
label="审批时间" |
||||
|
width="150" |
||||
|
align="center" |
||||
|
header-align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span :class="scope.row.prodApproveTime ? '' : 'pending-text'"> |
||||
|
{{ scope.row.prodApproveTime || '待审批' }} |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<!-- 质量经理审批 --> |
||||
|
<el-table-column |
||||
|
label="质量经理审批" |
||||
|
header-align="center" |
||||
|
align="center"> |
||||
|
<el-table-column |
||||
|
prop="qualManagerName" |
||||
|
label="审批人" |
||||
|
width="70" |
||||
|
align="center" |
||||
|
header-align="center" |
||||
|
show-overflow-tooltip> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.qualManagerName || '-' }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="qualApproveTime" |
||||
|
label="审批时间" |
||||
|
width="150" |
||||
|
align="center" |
||||
|
header-align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span :class="scope.row.qualApproveTime ? '' : 'pending-text'"> |
||||
|
{{ scope.row.qualApproveTime || '待审批' }} |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="allApproveTime" |
||||
|
label="审批完成时间" |
||||
|
width="150" |
||||
|
align="center" |
||||
|
header-align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.allApproveTime"> |
||||
|
{{ scope.row.allApproveTime }} |
||||
|
</span> |
||||
|
<span v-else class="pending-text">审批中</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="approvalCycleDays" |
||||
|
label="审批周期（天）" |
||||
|
width="130" |
||||
|
align="center" |
||||
|
header-align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-tag |
||||
|
v-if="scope.row.approvalCycleDays !== null && scope.row.approvalCycleDays !== undefined" |
||||
|
:type="getCycleDaysTagType(scope.row.approvalCycleDays)" |
||||
|
size="small"> |
||||
|
{{ scope.row.approvalCycleDays }} 天 |
||||
|
</el-tag> |
||||
|
<span v-else class="pending-text">-</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="isAllApproved" |
||||
|
label="审批状态" |
||||
|
width="100" |
||||
|
align="center" |
||||
|
header-align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-tag |
||||
|
:type="scope.row.isAllApproved ? 'success' : 'warning'" |
||||
|
size="small"> |
||||
|
{{ scope.row.isAllApproved ? '已全部审批' : '审批中' }} |
||||
|
</el-tag> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<!-- 分页组件 --> |
||||
|
<el-pagination |
||||
|
@size-change="sizeChangeHandle" |
||||
|
@current-change="currentChangeHandle" |
||||
|
:current-page="pageIndex" |
||||
|
:page-sizes="[10, 20, 50, 100]" |
||||
|
:page-size="pageSize" |
||||
|
:total="totalPage" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
style="margin-top: 20px; text-align: right;"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getApprovalCycleReportList } from '@/api/erf/erf' |
||||
|
|
||||
|
export default { |
||||
|
name: 'ApprovalCycleReport', |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
// 查询条件 |
||||
|
queryHeaderData: { |
||||
|
applyNo: '', |
||||
|
buNo: '', |
||||
|
experimentType: '', |
||||
|
creatorName: '', |
||||
|
submitStartDate: '', |
||||
|
submitEndDate: '', |
||||
|
allApproveStartDate: '', |
||||
|
allApproveEndDate: '', |
||||
|
cycleDaysMin: null, |
||||
|
cycleDaysMax: null, |
||||
|
status: '', |
||||
|
page: 1, |
||||
|
limit: 20 |
||||
|
}, |
||||
|
|
||||
|
// 数据列表 |
||||
|
dataList: [], |
||||
|
|
||||
|
// 分页参数 |
||||
|
pageIndex: 1, |
||||
|
pageSize: 20, |
||||
|
totalPage: 0, |
||||
|
dataListLoading: false, |
||||
|
|
||||
|
// 表格高度 |
||||
|
tableHeight: 500 |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
/** |
||||
|
* 已全部审批完成的记录数 |
||||
|
*/ |
||||
|
allApprovedCount() { |
||||
|
return this.dataList.filter(item => item.isAllApproved).length |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 已完成记录的平均审批周期（天） |
||||
|
*/ |
||||
|
avgCycleDays() { |
||||
|
const completedList = this.dataList.filter( |
||||
|
item => item.isAllApproved && item.approvalCycleDays !== null |
||||
|
) |
||||
|
if (completedList.length === 0) { |
||||
|
return null |
||||
|
} |
||||
|
const total = completedList.reduce((sum, item) => sum + item.approvalCycleDays, 0) |
||||
|
return Math.round(total / completedList.length) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
activated() { |
||||
|
this.getDataList() |
||||
|
this.calculateTableHeight() |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
this.calculateTableHeight() |
||||
|
window.addEventListener('resize', this.calculateTableHeight) |
||||
|
}, |
||||
|
|
||||
|
beforeDestroy() { |
||||
|
window.removeEventListener('resize', this.calculateTableHeight) |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
/** |
||||
|
* 获取审批周期报表列表 |
||||
|
* |
||||
|
* @param {string} flag - 'Y'表示重置到第一页 |
||||
|
*/ |
||||
|
getDataList(flag) { |
||||
|
if (flag === 'Y') { |
||||
|
this.pageIndex = 1 |
||||
|
} |
||||
|
|
||||
|
this.queryHeaderData.page = this.pageIndex |
||||
|
this.queryHeaderData.limit = this.pageSize |
||||
|
|
||||
|
this.dataListLoading = true |
||||
|
|
||||
|
getApprovalCycleReportList(this.queryHeaderData).then(({data}) => { |
||||
|
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(error => { |
||||
|
this.dataListLoading = false |
||||
|
this.$message.error('查询异常') |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 重置查询条件 |
||||
|
*/ |
||||
|
resetQuery() { |
||||
|
this.queryHeaderData = { |
||||
|
applyNo: '', |
||||
|
buNo: '', |
||||
|
experimentType: '', |
||||
|
creatorName: '', |
||||
|
submitStartDate: '', |
||||
|
submitEndDate: '', |
||||
|
allApproveStartDate: '', |
||||
|
allApproveEndDate: '', |
||||
|
cycleDaysMin: null, |
||||
|
cycleDaysMax: null, |
||||
|
status: '', |
||||
|
page: 1, |
||||
|
limit: 20 |
||||
|
} |
||||
|
this.getDataList('Y') |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 行点击事件 |
||||
|
*/ |
||||
|
handleRowClick(row) { |
||||
|
this.$refs.dataTable.setCurrentRow(row) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 分页大小改变 |
||||
|
*/ |
||||
|
sizeChangeHandle(val) { |
||||
|
this.pageSize = val |
||||
|
this.pageIndex = 1 |
||||
|
this.getDataList() |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 当前页改变 |
||||
|
*/ |
||||
|
currentChangeHandle(val) { |
||||
|
this.pageIndex = val |
||||
|
this.getDataList() |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 计算表格高度 |
||||
|
*/ |
||||
|
calculateTableHeight() { |
||||
|
this.$nextTick(() => { |
||||
|
const windowHeight = window.innerHeight |
||||
|
const queryFormHeight = 160 |
||||
|
const paginationHeight = 60 |
||||
|
const summaryBarHeight = 40 |
||||
|
const otherHeight = 100 |
||||
|
this.tableHeight = windowHeight - queryFormHeight - paginationHeight - summaryBarHeight - otherHeight |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 格式化日期显示（只显示日期部分，不显示时间） |
||||
|
* |
||||
|
* @param {string|Date} dateTime - 日期时间字符串或Date对象 |
||||
|
* @returns {string} 格式化后的日期字符串 |
||||
|
*/ |
||||
|
formatDate(dateTime) { |
||||
|
if (!dateTime) { |
||||
|
return '' |
||||
|
} |
||||
|
const str = String(dateTime) |
||||
|
// 截取日期部分（yyyy-MM-dd） |
||||
|
return str.substring(0, 10) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 根据审批周期天数获取标签颜色 |
||||
|
* 1天以内：绿色（高效） |
||||
|
* 0-2天：蓝色（正常） |
||||
|
* 3-7天：橙色（偏慢） |
||||
|
* 7天以上：红色（过慢） |
||||
|
* |
||||
|
* @param {number} days - 审批周期天数 |
||||
|
* @returns {string} Element UI tag类型 |
||||
|
*/ |
||||
|
getCycleDaysTagType(days) { |
||||
|
if (days <= 1) { |
||||
|
return 'success' |
||||
|
} else if (days <= 2) { |
||||
|
return 'primary' |
||||
|
} else if (days <= 7) { |
||||
|
return 'warning' |
||||
|
} else { |
||||
|
return 'danger' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.approval-cycle-report-page { |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.query-form { |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.summary-bar { |
||||
|
margin-bottom: 10px; |
||||
|
padding: 8px 12px; |
||||
|
background-color: #f0f9ff; |
||||
|
border: 1px solid #b3d8ff; |
||||
|
border-radius: 4px; |
||||
|
font-size: 13px; |
||||
|
color: #606266; |
||||
|
} |
||||
|
|
||||
|
.summary-bar b { |
||||
|
color: #409EFF; |
||||
|
font-size: 15px; |
||||
|
} |
||||
|
|
||||
|
.pending-text { |
||||
|
color: #C0C4CC; |
||||
|
font-style: italic; |
||||
|
} |
||||
|
|
||||
|
.data-table { |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
/* 数据表格样式 */ |
||||
|
.data-table { |
||||
|
background-color: #FFFFFF; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.data-table >>> .el-table__header-wrapper th { |
||||
|
background-color: #F5F7FA !important; |
||||
|
color: #333333; |
||||
|
font-weight: 600; |
||||
|
font-size: 16px; |
||||
|
border-color: #EBEEF5; |
||||
|
padding: 10px 0; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
/* 固定列表头也使用相同背景色 */ |
||||
|
.data-table >>> .el-table__fixed-header-wrapper th { |
||||
|
background-color: #F5F7FA !important; |
||||
|
color: #333333; |
||||
|
font-weight: 600; |
||||
|
font-size: 16px; |
||||
|
border-color: #EBEEF5; |
||||
|
padding: 8px 0; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.data-table >>> .el-table__header-wrapper .cell { |
||||
|
text-align: center; |
||||
|
padding: 0 10px; |
||||
|
//line-height: 2; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
font-size: 13px !important; |
||||
|
} |
||||
|
|
||||
|
.data-table >>> .el-table__fixed-header-wrapper .cell { |
||||
|
text-align: center; |
||||
|
padding: 0 10px; |
||||
|
//line-height: 2; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.data-table >>> .el-table__body-wrapper td { |
||||
|
border-color: #EBEEF5; |
||||
|
padding: 8px 0; |
||||
|
font-size: 16px; |
||||
|
color: #606266; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
/* 固定列数据行也使用相同样式 */ |
||||
|
.data-table >>> .el-table__fixed-body-wrapper td { |
||||
|
border-color: #EBEEF5; |
||||
|
padding: 8px 0; |
||||
|
font-size: 16px; |
||||
|
color: #606266; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.data-table >>> .el-table__body-wrapper .cell { |
||||
|
padding: 0 10px; |
||||
|
//line-height: 2; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
font-size: 13px !important; |
||||
|
line-height: 18px; |
||||
|
height: 18px; |
||||
|
} |
||||
|
|
||||
|
.data-table >>> .el-table__fixed-body-wrapper .cell { |
||||
|
padding: 0 10px; |
||||
|
//line-height: 2; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
/* 操作列链接样式 - 统一蓝色样式 */ |
||||
|
.data-table >>> .el-table__body-wrapper a { |
||||
|
text-decoration: none; |
||||
|
cursor: pointer; |
||||
|
font-size: 13px; |
||||
|
color: #409EFF !important; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.data-table >>> .el-table__body-wrapper a:hover { |
||||
|
color: #66B1FF !important; |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
|
||||
|
.data-table >>> .el-table__body tr:hover > td { |
||||
|
background-color: #F5F7FA !important; |
||||
|
} |
||||
|
|
||||
|
.data-table >>> .el-table__body tr.current-row > td { |
||||
|
background-color: #ECF5FF !important; |
||||
|
} |
||||
|
.data-table >>> .el-tag--small { |
||||
|
height: 18px; |
||||
|
line-height: 16px; |
||||
|
} |
||||
|
/* 查询表单样式 */ |
||||
|
.query-form { |
||||
|
background-color: #FFFFFF; |
||||
|
padding: 15px 15px 5px 15px; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.query-form >>> .el-form-item__label { |
||||
|
color: #333333; |
||||
|
font-size: 13px; |
||||
|
padding-bottom: 5px; |
||||
|
} |
||||
|
|
||||
|
.query-form >>> .el-input__inner { |
||||
|
height: 32px; |
||||
|
line-height: 32px; |
||||
|
border-radius: 4px; |
||||
|
border: 1px solid #DCDFE6; |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
.query-form >>> .el-input__inner::placeholder { |
||||
|
color: #C0C4CC; |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
.query-form >>> .el-select .el-input__inner { |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.query-form >>> .el-date-editor .el-input__inner { |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
/* 按钮样式 - 扁平化风格 */ |
||||
|
.query-form >>> .el-button { |
||||
|
height: 32px; |
||||
|
padding: 0 15px; |
||||
|
font-size: 13px; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
/* 查询按钮 - 蓝色扁平 */ |
||||
|
.search-btn { |
||||
|
background-color: #ECF5FF; |
||||
|
border-color: #B3D8FF; |
||||
|
color: #409EFF; |
||||
|
} |
||||
|
|
||||
|
.search-btn:hover { |
||||
|
background-color: #409EFF; |
||||
|
border-color: #409EFF; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
/* 重置按钮 - 灰色扁平 */ |
||||
|
.reset-btn { |
||||
|
background-color: #F5F7FA; |
||||
|
border-color: #D3D4D6; |
||||
|
color: #606266; |
||||
|
} |
||||
|
|
||||
|
.reset-btn:hover { |
||||
|
background-color: #909399; |
||||
|
border-color: #909399; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,678 @@ |
|||||
|
<template> |
||||
|
<div class="mod-config sample-cycle-report-page"> |
||||
|
<!-- 查询条件表单 --> |
||||
|
<el-form :inline="true" label-position="top" class="query-form"> |
||||
|
<el-form-item label="申请单号"> |
||||
|
<el-input |
||||
|
v-model="queryHeaderData.applyNo" |
||||
|
placeholder="请输入申请单号" |
||||
|
clearable |
||||
|
style="width: 150px"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="事业部"> |
||||
|
<el-select |
||||
|
v-model="queryHeaderData.buNo" |
||||
|
placeholder="请选择" |
||||
|
clearable |
||||
|
style="width: 120px"> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="RFID" value="RFID"></el-option> |
||||
|
<el-option label="RF" value="RF"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="试验类型"> |
||||
|
<el-select |
||||
|
v-model="queryHeaderData.experimentType" |
||||
|
placeholder="请选择" |
||||
|
clearable |
||||
|
style="width: 120px"> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="High Risk" value="High Risk"></el-option> |
||||
|
<el-option label="Low Risk" value="Low Risk"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="申请人"> |
||||
|
<el-input |
||||
|
v-model="queryHeaderData.creatorName" |
||||
|
placeholder="请输入申请人姓名" |
||||
|
clearable |
||||
|
style="width: 120px"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="创建时间"> |
||||
|
<el-date-picker |
||||
|
v-model="queryHeaderData.createStartDate" |
||||
|
type="date" |
||||
|
format="yyyy-MM-dd" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
placeholder="开始日期" |
||||
|
style="width: 140px"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="至"> |
||||
|
<el-date-picker |
||||
|
v-model="queryHeaderData.createEndDate" |
||||
|
type="date" |
||||
|
format="yyyy-MM-dd" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
placeholder="结束日期" |
||||
|
style="width: 140px"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="期望完成时间"> |
||||
|
<el-date-picker |
||||
|
v-model="queryHeaderData.expectedFinishStartDate" |
||||
|
type="date" |
||||
|
format="yyyy-MM-dd" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
placeholder="开始日期" |
||||
|
style="width: 140px"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="至"> |
||||
|
<el-date-picker |
||||
|
v-model="queryHeaderData.expectedFinishEndDate" |
||||
|
type="date" |
||||
|
format="yyyy-MM-dd" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
placeholder="结束日期" |
||||
|
style="width: 140px"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="实际完成时间"> |
||||
|
<el-date-picker |
||||
|
v-model="queryHeaderData.actualFinishStartDate" |
||||
|
type="date" |
||||
|
format="yyyy-MM-dd" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
placeholder="开始日期" |
||||
|
style="width: 140px"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="至"> |
||||
|
<el-date-picker |
||||
|
v-model="queryHeaderData.actualFinishEndDate" |
||||
|
type="date" |
||||
|
format="yyyy-MM-dd" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
placeholder="结束日期" |
||||
|
style="width: 140px"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="周期差异（天）"> |
||||
|
<el-input |
||||
|
v-model="queryHeaderData.cycleDifferenceMin" |
||||
|
placeholder="最小值" |
||||
|
:controls="false" |
||||
|
style="width: 100px"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="至"> |
||||
|
<el-input |
||||
|
v-model="queryHeaderData.cycleDifferenceMax" |
||||
|
placeholder="最大值" |
||||
|
:controls="false" |
||||
|
style="width: 100px"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label=" " style="margin-top: -11px"> |
||||
|
<el-button @click="getDataList('Y')" type="primary" class="search-btn" plain>查询</el-button> |
||||
|
<el-button @click="resetQuery()" plain class="reset-btn">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<!-- 数据表格 --> |
||||
|
<el-table |
||||
|
ref="dataTable" |
||||
|
@row-click="handleRowClick" |
||||
|
highlight-current-row |
||||
|
:data="dataList" |
||||
|
v-loading="dataListLoading" |
||||
|
border |
||||
|
class="data-table" |
||||
|
style="width: 100%;" |
||||
|
:height="tableHeight"> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="applyNo" |
||||
|
label="申请单号" |
||||
|
width="100" |
||||
|
align="center" |
||||
|
header-align="center" |
||||
|
show-overflow-tooltip> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="title" |
||||
|
label="试验名称" |
||||
|
min-width="150" |
||||
|
align="left" |
||||
|
header-align="center" |
||||
|
show-overflow-tooltip> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="buName" |
||||
|
label="事业部" |
||||
|
width="80" |
||||
|
align="center" |
||||
|
header-align="center"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="experimentType" |
||||
|
label="试验类型" |
||||
|
width="100" |
||||
|
align="center" |
||||
|
header-align="center"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="creatorName" |
||||
|
label="申请人" |
||||
|
width="100" |
||||
|
align="center" |
||||
|
header-align="center"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="expectedFinishDate" |
||||
|
label="期望完成日期" |
||||
|
width="120" |
||||
|
align="center" |
||||
|
header-align="center"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="actualFinishDate" |
||||
|
label="实际完成日期" |
||||
|
width="120" |
||||
|
align="center" |
||||
|
header-align="center"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="cycleDifference" |
||||
|
label="周期差异（天）" |
||||
|
width="140" |
||||
|
align="center" |
||||
|
header-align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-tag |
||||
|
:type="getCycleDifferenceTagType(scope.row.cycleDifference)" |
||||
|
size="small"> |
||||
|
{{ formatCycleDifference(scope.row.cycleDifference) }} |
||||
|
</el-tag> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="finalStatusDesc" |
||||
|
label="样品状态" |
||||
|
width="100" |
||||
|
align="center" |
||||
|
header-align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-tag |
||||
|
:type="getFinalStatusTagType(scope.row.finalStatus)" |
||||
|
size="small"> |
||||
|
{{ scope.row.finalStatus }} |
||||
|
</el-tag> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="finalQuantity" |
||||
|
label="入库数量" |
||||
|
width="100" |
||||
|
align="center" |
||||
|
header-align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.finalQuantity || '-' }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="createTime" |
||||
|
label="创建时间" |
||||
|
width="160" |
||||
|
align="center" |
||||
|
header-align="center"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="status" |
||||
|
label="状态" |
||||
|
width="80" |
||||
|
align="center" |
||||
|
header-align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-tag :type="getStatusTagType(scope.row.status)" size="small"> |
||||
|
{{ scope.row.status }} |
||||
|
</el-tag> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<!-- 分页组件 --> |
||||
|
<el-pagination |
||||
|
@size-change="sizeChangeHandle" |
||||
|
@current-change="currentChangeHandle" |
||||
|
:current-page="pageIndex" |
||||
|
:page-sizes="[10, 20, 50, 100]" |
||||
|
:page-size="pageSize" |
||||
|
:total="totalPage" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
style="margin-top: 20px; text-align: right;"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getSampleCycleReportList } from '@/api/erf/erf' |
||||
|
|
||||
|
export default { |
||||
|
name: 'SampleCycleReport', |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
// 查询条件 |
||||
|
queryHeaderData: { |
||||
|
applyNo: '', |
||||
|
buNo: '', |
||||
|
experimentType: '', |
||||
|
creatorName: '', |
||||
|
createStartDate: '', |
||||
|
createEndDate: '', |
||||
|
expectedFinishStartDate: '', |
||||
|
expectedFinishEndDate: '', |
||||
|
actualFinishStartDate: '', |
||||
|
actualFinishEndDate: '', |
||||
|
cycleDifferenceMin: null, |
||||
|
cycleDifferenceMax: null, |
||||
|
status: '已完成', // 默认查询已完成的申请单 |
||||
|
page: 1, |
||||
|
limit: 20 |
||||
|
}, |
||||
|
|
||||
|
// 数据列表 |
||||
|
dataList: [], |
||||
|
|
||||
|
// 分页参数 |
||||
|
pageIndex: 1, |
||||
|
pageSize: 20, |
||||
|
totalPage: 0, |
||||
|
dataListLoading: false, |
||||
|
|
||||
|
// 表格高度 |
||||
|
tableHeight: 500 |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
activated() { |
||||
|
this.getDataList() |
||||
|
this.calculateTableHeight() |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
this.calculateTableHeight() |
||||
|
window.addEventListener('resize', this.calculateTableHeight) |
||||
|
}, |
||||
|
|
||||
|
beforeDestroy() { |
||||
|
window.removeEventListener('resize', this.calculateTableHeight) |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
/** |
||||
|
* 获取样品完成周期报表列表 |
||||
|
* |
||||
|
* @param {string} flag - 'Y'表示重置到第一页 |
||||
|
*/ |
||||
|
getDataList(flag) { |
||||
|
if (flag === 'Y') { |
||||
|
this.pageIndex = 1 |
||||
|
} |
||||
|
|
||||
|
this.queryHeaderData.page = this.pageIndex |
||||
|
this.queryHeaderData.limit = this.pageSize |
||||
|
|
||||
|
this.dataListLoading = true |
||||
|
|
||||
|
getSampleCycleReportList(this.queryHeaderData).then(({data}) => { |
||||
|
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(error => { |
||||
|
this.dataListLoading = false |
||||
|
this.$message.error('查询异常') |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 重置查询条件 |
||||
|
*/ |
||||
|
resetQuery() { |
||||
|
this.queryHeaderData = { |
||||
|
applyNo: '', |
||||
|
buNo: '', |
||||
|
experimentType: '', |
||||
|
creatorName: '', |
||||
|
createStartDate: '', |
||||
|
createEndDate: '', |
||||
|
expectedFinishStartDate: '', |
||||
|
expectedFinishEndDate: '', |
||||
|
actualFinishStartDate: '', |
||||
|
actualFinishEndDate: '', |
||||
|
cycleDifferenceMin: null, |
||||
|
cycleDifferenceMax: null, |
||||
|
status: '已完成', |
||||
|
page: 1, |
||||
|
limit: 20 |
||||
|
} |
||||
|
this.getDataList('Y') |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 行点击事件 |
||||
|
*/ |
||||
|
handleRowClick(row) { |
||||
|
this.$refs.dataTable.setCurrentRow(row) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 分页大小改变 |
||||
|
*/ |
||||
|
sizeChangeHandle(val) { |
||||
|
this.pageSize = val |
||||
|
this.pageIndex = 1 |
||||
|
this.getDataList() |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 当前页改变 |
||||
|
*/ |
||||
|
currentChangeHandle(val) { |
||||
|
this.pageIndex = val |
||||
|
this.getDataList() |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 计算表格高度 |
||||
|
*/ |
||||
|
calculateTableHeight() { |
||||
|
this.$nextTick(() => { |
||||
|
const windowHeight = window.innerHeight |
||||
|
const queryFormHeight = 150 |
||||
|
const paginationHeight = 60 |
||||
|
const otherHeight = 100 |
||||
|
this.tableHeight = windowHeight - queryFormHeight - paginationHeight - otherHeight |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 格式化周期差异显示 |
||||
|
*/ |
||||
|
formatCycleDifference(days) { |
||||
|
if (days === null || days === undefined) { |
||||
|
return '-' |
||||
|
} |
||||
|
if (days === 0) { |
||||
|
return '准时' |
||||
|
} else if (days > 0) { |
||||
|
return `延期 ${days} 天` |
||||
|
} else { |
||||
|
return `提前 ${Math.abs(days)} 天` |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 获取周期差异标签颜色 |
||||
|
*/ |
||||
|
getCycleDifferenceTagType(days) { |
||||
|
if (days === null || days === undefined) { |
||||
|
return 'info' |
||||
|
} |
||||
|
if (days === 0) { |
||||
|
return 'success' |
||||
|
} else if (days > 0) { |
||||
|
return 'danger' // 延期显示红色 |
||||
|
} else { |
||||
|
return 'success' // 提前显示绿色 |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 获取样品状态标签颜色 |
||||
|
*/ |
||||
|
getFinalStatusTagType(status) { |
||||
|
const typeMap = { |
||||
|
'正常入库': 'success', |
||||
|
'报废': 'danger' |
||||
|
} |
||||
|
return typeMap[status] || 'info' |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 获取状态标签颜色 |
||||
|
*/ |
||||
|
getStatusTagType(status) { |
||||
|
const typeMap = { |
||||
|
'草稿': 'info', |
||||
|
'已下达': 'primary', |
||||
|
'已批准': 'success', |
||||
|
'生产中': 'warning', |
||||
|
'样品确认': 'warning', |
||||
|
'已完成': 'success', |
||||
|
'已取消': 'danger', |
||||
|
'已驳回': 'danger' |
||||
|
} |
||||
|
return typeMap[status] || 'info' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.data-table { |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
.data-table { |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
/* 数据表格样式 */ |
||||
|
.data-table { |
||||
|
background-color: #FFFFFF; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.data-table >>> .el-table__header-wrapper th { |
||||
|
background-color: #F5F7FA !important; |
||||
|
color: #333333; |
||||
|
font-weight: 600; |
||||
|
font-size: 16px; |
||||
|
border-color: #EBEEF5; |
||||
|
padding: 10px 0; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
/* 固定列表头也使用相同背景色 */ |
||||
|
.data-table >>> .el-table__fixed-header-wrapper th { |
||||
|
background-color: #F5F7FA !important; |
||||
|
color: #333333; |
||||
|
font-weight: 600; |
||||
|
font-size: 16px; |
||||
|
border-color: #EBEEF5; |
||||
|
padding: 8px 0; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.data-table >>> .el-table__header-wrapper .cell { |
||||
|
text-align: center; |
||||
|
padding: 0 10px; |
||||
|
//line-height: 2; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
font-size: 13px !important; |
||||
|
} |
||||
|
|
||||
|
.data-table >>> .el-table__fixed-header-wrapper .cell { |
||||
|
text-align: center; |
||||
|
padding: 0 10px; |
||||
|
//line-height: 2; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.data-table >>> .el-table__body-wrapper td { |
||||
|
border-color: #EBEEF5; |
||||
|
padding: 8px 0; |
||||
|
font-size: 16px; |
||||
|
color: #606266; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
/* 固定列数据行也使用相同样式 */ |
||||
|
.data-table >>> .el-table__fixed-body-wrapper td { |
||||
|
border-color: #EBEEF5; |
||||
|
padding: 8px 0; |
||||
|
font-size: 16px; |
||||
|
color: #606266; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.data-table >>> .el-table__body-wrapper .cell { |
||||
|
padding: 0 10px; |
||||
|
//line-height: 2; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
font-size: 13px !important; |
||||
|
line-height: 18px; |
||||
|
height: 18px; |
||||
|
} |
||||
|
|
||||
|
.data-table >>> .el-table__fixed-body-wrapper .cell { |
||||
|
padding: 0 10px; |
||||
|
//line-height: 2; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
/* 操作列链接样式 - 统一蓝色样式 */ |
||||
|
.data-table >>> .el-table__body-wrapper a { |
||||
|
text-decoration: none; |
||||
|
cursor: pointer; |
||||
|
font-size: 13px; |
||||
|
color: #409EFF !important; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.data-table >>> .el-table__body-wrapper a:hover { |
||||
|
color: #66B1FF !important; |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
|
||||
|
.data-table >>> .el-table__body tr:hover > td { |
||||
|
background-color: #F5F7FA !important; |
||||
|
} |
||||
|
|
||||
|
.data-table >>> .el-table__body tr.current-row > td { |
||||
|
background-color: #ECF5FF !important; |
||||
|
} |
||||
|
|
||||
|
.data-table >>> .el-tag--small { |
||||
|
height: 18px; |
||||
|
line-height: 16px; |
||||
|
} |
||||
|
|
||||
|
/* 查询表单样式 */ |
||||
|
.query-form { |
||||
|
background-color: #FFFFFF; |
||||
|
padding: 15px 15px 5px 15px; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.query-form >>> .el-form-item__label { |
||||
|
color: #333333; |
||||
|
font-size: 13px; |
||||
|
padding-bottom: 5px; |
||||
|
} |
||||
|
|
||||
|
.query-form >>> .el-input__inner { |
||||
|
height: 32px; |
||||
|
line-height: 32px; |
||||
|
border-radius: 4px; |
||||
|
border: 1px solid #DCDFE6; |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
.query-form >>> .el-input__inner::placeholder { |
||||
|
color: #C0C4CC; |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
.query-form >>> .el-select .el-input__inner { |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.query-form >>> .el-date-editor .el-input__inner { |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
/* 按钮样式 - 扁平化风格 */ |
||||
|
.query-form >>> .el-button { |
||||
|
height: 32px; |
||||
|
padding: 0 15px; |
||||
|
font-size: 13px; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
/* 查询按钮 - 蓝色扁平 */ |
||||
|
.search-btn { |
||||
|
background-color: #ECF5FF; |
||||
|
border-color: #B3D8FF; |
||||
|
color: #409EFF; |
||||
|
} |
||||
|
|
||||
|
.search-btn:hover { |
||||
|
background-color: #409EFF; |
||||
|
border-color: #409EFF; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
/* 重置按钮 - 灰色扁平 */ |
||||
|
.reset-btn { |
||||
|
background-color: #F5F7FA; |
||||
|
border-color: #D3D4D6; |
||||
|
color: #606266; |
||||
|
} |
||||
|
|
||||
|
.reset-btn:hover { |
||||
|
background-color: #909399; |
||||
|
border-color: #909399; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue