bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
bonus-ui/src/views/EquipmentEntryApply/EquipmentDetailList.vue

561 lines
21 KiB
Vue
Raw Normal View History

代码提交
2025-10-13 09:27:53 +08:00
<template>
<div class="app-container">
表格样式优化
2025-10-29 13:31:49 +08:00
<el-form :model="queryParams" ref="queryFormRef" inline label-width="auto" size="small">
代码提交
2025-10-13 09:27:53 +08:00
<!-- 表单搜索 -->
表格样式优化
2025-10-29 13:31:49 +08:00
<el-card class="search-box">
<el-row>
<el-form-item prop="orderCreateUser" label="申请人：">
<el-input clearable style="width: 200px" placeholder="请输入内容" v-model.trim="queryParams.orderCreateUser" />
</el-form-item>
<el-form-item label="申请时间：" prop="orderCreateTime">
<el-date-picker type="daterange" style="width: 200px" unlink-panels range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
v-model="queryParams.orderCreateTime" />
</el-form-item>
<el-form-item label="审批状态" prop="entryStatus">
<el-select clearable style="width: 200px" placeholder="请选择审批状态" v-model="queryParams.entryStatus">
<el-option label="待审批" value="0" />
<el-option label="已通过" value="1" />
<el-option label="已驳回" value="2" />
</el-select>
</el-form-item>
<el-form-item prop="name" label="装备名称：">
<el-input clearable style="width: 200px" placeholder="请输入内容" v-model.trim="queryParams.name" />
</el-form-item>
<el-form-item prop="specificationModel" label="规格型号：">
<el-input clearable style="width: 200px" placeholder="请输入内容"
v-model.trim="queryParams.specificationModel" />
</el-form-item>
<el-form-item prop="originalCode" label="装备原始编码：">
<el-input clearable style="width: 200px" placeholder="请输入内容" v-model.trim="queryParams.originalCode" />
</el-form-item>
<el-form-item prop="manufacturerId" label="生产厂家：">
<el-select v-model="queryParams.manufacturerId" placeholder="请选择生产厂家" clearable style="width: 100%">
<el-option v-for="item in manufacturerList" :key="item.id" :label="item.label" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item prop="productionDate" label="出厂日期：">
<el-date-picker type="daterange" style="width: 200px" unlink-panels range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
v-model="queryParams.productionDate" />
</el-form-item>
<!-- <el-form-item prop="keyword" label="采购日期：">
代码提交
2025-10-13 09:27:53 +08:00
<el-date-picker
type="date"
style="width: 240px"
value-format="YYYY-MM-DD"
placeholder="请选择采购日期"
v-model="queryParams.applyTime"
/>
</el-form-item>-->
表格样式优化
2025-10-29 13:31:49 +08:00
<el-form-item prop="minOriginalValue" label="资产原值：">
<el-input clearable style="width: 90px" placeholder="请输入" v-model.trim="queryParams.minOriginalValue" />
代码提交
2025-10-13 09:27:53 +08:00
表格样式优化
2025-10-29 13:31:49 +08:00
</el-form-item>
<el-form-item prop="maxOriginalValue" label="-" style="margin-left: -6%;">
<el-input clearable style="width: 90px" placeholder="请输入" v-model.trim="queryParams.maxOriginalValue" />
</el-form-item>
代码提交
2025-10-13 09:27:53 +08:00
表格样式优化
2025-10-29 13:31:49 +08:00
</el-row>
<el-row>
<el-col :span="24" style="text-align: right;">
装备录入申请表格样式修改
2025-10-29 14:14:40 +08:00
装备管理样式修改
2025-10-29 17:56:05 +08:00
<el-button class="primary-lease" size="mini" icon="el-icon-search" type="primary" @click="getEquipmentApplyList">
表格样式优化
2025-10-29 13:31:49 +08:00
查询
代码提交
2025-10-13 09:27:53 +08:00
</el-button>
装备管理样式修改
2025-10-29 17:56:05 +08:00
<el-button class="primary-lease" size="mini" icon="el-icon-refresh" @click="resetForm">
装备录入表格样式修改
2025-10-29 13:42:42 +08:00
重置
</el-button>
表格样式优化
2025-10-29 13:31:49 +08:00
</el-col>
</el-row>
</el-card>
<el-card class="content-box">
<el-row>
<el-col>
装备管理样式修改
2025-10-29 17:56:05 +08:00
<el-button class="primary-lease" size="mini" type="primary" @click="showEquipmentInput()">
表格样式优化
2025-10-29 13:31:49 +08:00
装备录入
代码提交
2025-10-13 09:27:53 +08:00
</el-button>
装备管理样式修改
2025-10-29 17:56:05 +08:00
<el-button class="primary-lease" size="mini" type="primary" @click="showDetails('0')">
表格样式优化
2025-10-29 13:31:49 +08:00
展开明细
</el-button>
</el-col>
</el-row>
<!-- 表格 -->
表格修改
2025-10-29 15:01:10 +08:00
<div class="table-container">
表格样式优化
2025-10-29 13:31:49 +08:00
<el-table :data="tableData" border stripe :span-method="handleSpanMethod" height="100%">
<!-- <el-table :data="tableData" >-->
<el-table-column label="序号" align="center" width="55" type="index" fixed />
<el-table-column prop="orderNumber" label="录入单号" align="center" show-overflow-tooltip column-key="orderNumber"
fixed min-width="200" />
<el-table-column prop="major" label="专业" align="center" show-overflow-tooltip min-width="100" />
<el-table-column prop="orderNumber" label="工序" align="center" show-overflow-tooltip min-width="100">
<template slot-scope="scope">
{{ scope.row.mainProcess }}{{ scope.row.subProcess ? '>' + scope.row.subProcess : '' }}
</template>
</el-table-column>
<el-table-column prop="orderNumber" label="装备类目" show-overflow-tooltip align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.mainCategory ? scope.row.mainCategory + '>' : '' }}
{{ scope.row.branch ? scope.row.subCategory + '>' : scope.row.subCategory }}{{ scope.row.branch }}
</template>
</el-table-column>
<el-table-column prop="name" label="装备名称" show-overflow-tooltip align="center" min-width="100" />
<el-table-column prop="specificationModel" label="规格型号" show-overflow-tooltip align="center"
min-width="100" />
<el-table-column prop="originalCode" label="装备原始编码" show-overflow-tooltip align="center" min-width="100" />
<el-table-column prop="unit" label="计量单位" show-overflow-tooltip align="center" min-width="100" />
<el-table-column prop="manufacturer" label="生产厂家" show-overflow-tooltip align="center" min-width="100" />
<el-table-column prop="productionDate" label="出厂日期" show-overflow-tooltip align="center" min-width="100" />
<!-- <el-table-column prop="orderNumber" label="采购日期" align="center"/>-->
<el-table-column prop="originalValue" label="资产原值（元）" show-overflow-tooltip align="center" min-width="100" />
<!-- <el-table-column prop="orderNumber" label="最大使用年限（年）" align="center"/>-->
<!-- <el-table-column prop="orderNumber" label="下次维保日期" align="center"/>-->
<el-table-column prop="province" label="所属省份" show-overflow-tooltip align="center" min-width="100" />
<el-table-column prop="appearanceImages" label="装备外观" show-overflow-tooltip align="center" min-width="100">
<template v-slot="{ row }">
<span style="color: #00a288; cursor: pointer" @click="handleView(row, 1)">查看</span>
</template>
</el-table-column>
<el-table-column prop="certificates" label="合格证" show-overflow-tooltip align="center" min-width="100">
<template v-slot="{ row }">
<span style="color: #00a288; cursor: pointer" @click="handleView(row, 2)">查看</span>
</template>
</el-table-column>
<el-table-column prop="inspectionReports" label="定期检验报告" show-overflow-tooltip align="center" min-width="100">
<template v-slot="{ row }">
<span style="color: #00a288; cursor: pointer" @click="handleView(row, 3)">查看</span>
</template>
</el-table-column>
<el-table-column prop="purchaseInvoices" label="采购发票" show-overflow-tooltip align="center" min-width="100">
<template v-slot="{ row }">
<span style="color: #00a288; cursor: pointer" @click="handleView(row, 4)">查看</span>
</template>
</el-table-column>
<el-table-column v-for="(item, index) in columns" v-if="item.visible" :key="index" align="center"
show-overflow-tooltip :label="item.label" :prop="item.prop">
<template v-slot="{ row }" v-if="/^feature(Item|Value)\d+$/.test(item.prop)">
<span>
{{ getFeatureValue(row, item.prop) }}
</span>
</template>
</el-table-column>
<!-- <el-table-column prop="devCount" label="特征项1" align="center"/>-->
<!-- <el-table-column prop="devCount" label="特征值1" align="center"/>-->
<el-table-column prop="orderCreateUser" label="申请人" show-overflow-tooltip align="center" fixed="right"
min-width="100" />
<el-table-column prop="orderCreateTime" label="申请时间" show-overflow-tooltip align="center" fixed="right"
min-width="100" />
<el-table-column prop="entryStatus" align="center" show-overflow-tooltip label="审批状态" fixed="right"
min-width="100">
<template slot-scope="{ row }">
<el-tag v-if="row.entryStatus == 0" size="small" type="warning">待审批</el-tag>
<el-tag v-if="row.entryStatus == 1" size="small" type="success">已通过</el-tag>
<el-tag v-if="row.entryStatus == 2" size="small" type="success">已驳回</el-tag>
<el-tag v-if="row.entryStatus == 3" size="small" type="info">草稿</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" min-width="300" fixed="right">
<template slot-scope="{ row }">
<el-button type="text" @click="handleViewDetail(row)">
<i class="el-icon-view"></i> 查看
</el-button>
<el-button type="text" @click="showEquipmentInput(row.id, false)" v-if="row.orderStatus == '3'">
<i class="el-icon-edit"></i> 编辑
</el-button>
<el-button type="text" @click="deleteItem(row)" v-if="row.orderStatus == '3'">
<i class="el-icon-delete"></i> 删除
</el-button>
</template>
</el-table-column>
</el-table>
表格修改
2025-10-29 15:01:10 +08:00
</div>
表格样式优化
2025-10-29 13:31:49 +08:00
<div class="pagination-wrapper">
<!-- 分页 -->
<pagination :total="total" @pagination="handlePageChange" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" />
</div>
表格修改
2025-10-29 15:01:10 +08:00
表格样式优化
2025-10-29 13:31:49 +08:00
</el-card>
代码提交
2025-10-13 09:27:53 +08:00
</el-form>
优化
2025-10-13 19:20:43 +08:00
<!-- 弹框 -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
<el-table :data="dialogList" fit highlight-current-row style="width: 100%" :max-height="500">
<el-table-column type="index" width="55" label="序号" align="center" />
<el-table-column label="附件名称" prop="fileName" align="center">
<!-- 插槽 -->
<template v-slot="{ row }">
<span style="color: #00a288; cursor: pointer" @click="handleFile(row)">{{ row.fileName }}</span>
</template>
</el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">关 闭</el-button>
</span>
</el-dialog>
代码提交
2025-10-13 09:27:53 +08:00
</div>
</template>
<script>
优化
2025-10-13 19:20:43 +08:00
import { getDeviceListApi, equipmentDelApiNew } from '@/api/EquipmentEntryApply/index'
优化
2025-10-14 17:23:57 +08:00
import { getManufacturerSelectApi } from '@/api/EquipmentLedger/index.js'
代码提交
2025-10-13 09:27:53 +08:00
export default {
name: 'EquipmentDetailList',
data() {
return {
total: 0,
orderId: '',
isVisible: false,
isAddVisible: false,
queryParams: {
优化
2025-10-14 17:23:57 +08:00
orderCreateUser: '',
orderCreateTime: '',
代码提交
2025-10-13 09:27:53 +08:00
entryStatus: '',
优化
2025-10-13 19:20:43 +08:00
name: '',
specificationModel: '',
originalCode: '',
优化
2025-10-14 17:23:57 +08:00
manufacturerId: '',
代码提交
2025-10-13 09:27:53 +08:00
productionDate: '',
优化
2025-10-13 21:54:00 +08:00
minOriginalValue: '',
maxOriginalValue: '',
代码提交
2025-10-13 09:27:53 +08:00
pageNum: 1,
pageSize: 10
},
优化
2025-10-14 17:23:57 +08:00
manufacturerList: [],
优化
2025-10-13 19:20:43 +08:00
columns: [
{ key: 26, label: `特征项1`, prop: 'featureItem1', visible: true },
{ key: 27, label: `特征值1`, prop: 'featureValue1', visible: true },
{ key: 28, label: `特征项2`, prop: 'featureItem2', visible: true },
{ key: 29, label: `特征值2`, prop: 'featureValue2', visible: true },
{ key: 30, label: `特征项3`, prop: 'featureItem3', visible: true },
{ key: 31, label: `特征值3`, prop: 'featureValue3', visible: true },
{ key: 32, label: `特征项4`, prop: 'featureItem4', visible: true },
{ key: 33, label: `特征值4`, prop: 'featureValue4', visible: true },
{ key: 34, label: `特征项5`, prop: 'featureItem5', visible: true },
{ key: 35, label: `特征值5`, prop: 'featureValue5', visible: true },
{ key: 36, label: `特征项6`, prop: 'featureItem6', visible: true },
{ key: 37, label: `特征值6`, prop: 'featureValue6', visible: true },
{ key: 38, label: `特征项7`, prop: 'featureItem7', visible: true },
{ key: 39, label: `特征值7`, prop: 'featureValue7', visible: true },
{ key: 40, label: `特征项8`, prop: 'featureItem8', visible: true },
{ key: 41, label: `特征值8`, prop: 'featureValue8', visible: true },
{ key: 42, label: `特征项9`, prop: 'featureItem9', visible: true },
{ key: 43, label: `特征值9`, prop: 'featureValue9', visible: true },
],
tableData: [],
dialogVisible: false,
dialogTitle: '',
dialogList: [],
代码提交
2025-10-13 09:27:53 +08:00
}
},
mounted() {
this.getEquipmentApplyList()
优化
2025-10-14 17:23:57 +08:00
this.getManufacturerSelectList()
代码提交
2025-10-13 09:27:53 +08:00
},
methods: {
优化
2025-10-14 17:23:57 +08:00
// 获取厂家
getManufacturerSelectList() {
getManufacturerSelectApi().then((res) => {
console.log('🚀 ~ getManufacturerSelectList ~ res:', res)
if (res.code === 200) {
this.manufacturerList = res.data
}
})
},
代码提交
2025-10-13 09:27:53 +08:00
/**
* 获取装备申请列表
*/
getEquipmentApplyList() {
优化
2025-10-14 17:23:57 +08:00
this.queryParams.startOrderCreateTime = this.queryParams.orderCreateTime ? this.queryParams.orderCreateTime[0] : ''
this.queryParams.endOrderCreateTime = this.queryParams.orderCreateTime ? this.queryParams.orderCreateTime[1] : ''
this.queryParams.startProductionDate = this.queryParams.productionDate ? this.queryParams.productionDate[0] : ''
this.queryParams.endProductionDate = this.queryParams.productionDate ? this.queryParams.productionDate[1] : ''
const params = { ...this.queryParams }
delete params.orderCreateTime
delete params.productionDate
getDeviceListApi(params)
代码提交
2025-10-13 09:27:53 +08:00
.then(res => {
this.tableData = res.data.rows
this.total = res.data.total
// 按 orderNumber 排序，确保相同订单连续
this.tableData.sort((a, b) => a.orderNumber.localeCompare(b.orderNumber))
})
.catch(error => {
console.error('获取装备申请列表失败:', error)
})
},
/**
* 分页变化处理
*/
handlePageChange() {
this.getEquipmentApplyList()
},
/**
* 重置表单
*/
resetForm() {
this.$refs.queryFormRef.resetFields()
this.queryParams.pageNum = 1
this.getEquipmentApplyList()
},
// 点击事件处理函数 - 实现页面跳转
showEquipmentInput(orderId, isAddVisible) {
this.$router.push({
name: 'equipmentInput', // 完整路径
优化
2025-10-14 17:23:57 +08:00
query: { // 因为使用path，所以用query传递参数
代码提交
2025-10-13 09:27:53 +08:00
orderId: orderId,
isAddVisible: isAddVisible,
isApprovalVisible: false
}
})
},
优化
2025-10-13 21:54:00 +08:00
handleViewDetail(row) {
this.$router.push({ path: '/equipment/details', query: { id: row.maId } })
},
代码提交
2025-10-13 09:27:53 +08:00
/**
* 删除项目
*/
deleteItem(row) {
this.$confirm('是否确定删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => equipmentDelApiNew({ id: row.id }))
.then(res => {
if (res.code === 200) {
this.$message.success('删除成功')
this.getEquipmentApplyList()
} else {
this.$message.error('删除失败')
}
})
.catch(error => {
if (error !== 'cancel') { // 排除取消操作的错误
console.error('删除失败:', error)
this.$message.error('删除失败，请重试')
}
})
},
//展示明细
showDetails(num) {
this.$emit('switch-view', num)
},
handleSpanMethod({ row, column, rowIndex, columnIndex }) {
// 如果不是“录入单号”列，则不处理
if (columnIndex !== 1) { // 假设“录入单号”是第1列（index=1）
return {
rowspan: 1,
colspan: 1
}
}
const orderNumber = row.orderNumber
let count = 1
// 计算从当前行开始，连续有多少个相同的 orderNumber
for (let i = rowIndex + 1; i < this.tableData.length; i++) {
if (this.tableData[i].orderNumber === orderNumber) {
count++
} else {
break
}
}
// 判断当前行是否是该 orderNumber 的第一条记录
const isFirst = !this.tableData.some((item, idx) => idx < rowIndex && item.orderNumber === orderNumber)
if (isFirst) {
// 第一次出现，合并 count 行
return {
rowspan: count,
colspan: 1
}
} else {
// 不是第一次，隐藏该单元格
return {
rowspan: 0,
colspan: 0
}
}
优化
2025-10-13 19:20:43 +08:00
},
getFeatureValue(row, prop) {
const match = prop.match(/feature(Item|Value)(\d+)/)
if (!match) return '-'
const type = match[1] // 'Item' or 'Value'
const index = Number(match[2]) - 1
const list = row.propertyVoList || []
if (!list[index]) return '-'
return type === 'Item' ? list[index].propertyName : list[index].propertyValue
},
handleFile(row) {
// 打开文件预览
window.open(row.fileUrl, '_blank')
},
// 查看
handleView(row, type) {
if (type == 1) {
this.dialogTitle = '装备外观'
this.dialogList = row.appearanceImages || []
} else if (type == 2) {
this.dialogTitle = '合格证'
this.dialogList = row.certificates || []
} else if (type == 3) {
this.dialogTitle = '定期检验报告'
this.dialogList = row.inspectionReports || []
} else if (type == 4) {
this.dialogTitle = '采购发票'
this.dialogList = row.purchaseInvoices || []
}
this.dialogVisible = true
},
代码提交
2025-10-13 09:27:53 +08:00
}
}
</script>
<style scoped lang="scss">
.view-btn {
color: #409eff;
font-size: 14px;
font-weight: bold;
}
.edit-btn {
color: #67c23a;
font-size: 12px;
font-weight: bold;
}
.delete-btn {
color: #f56c6c;
font-size: 16px;
font-weight: bold;
}
.app-container {
表格样式优化
2025-10-29 13:31:49 +08:00
padding: 0;
代码提交
2025-10-13 09:27:53 +08:00
}
::v-deep .el-pagination {
margin-top: 15px;
text-align: right;
}
::v-deep .el-button {
margin-right: 8px;
}
表格样式优化
2025-10-29 13:31:49 +08:00
.search-box {
margin-bottom: 20px;
border-radius: 8px;
}
.content-box {
border-radius: 8px;
height: calc(100vh - 320px);
display: flex;
flex-direction: column;
overflow: hidden;
::v-deep .el-card__body {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
padding: 20px;
}
.el-row:first-child {
margin-bottom: 16px;
flex-shrink: 0;
.el-col {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
}
}
.table-container {
flex: 1;
overflow: hidden;
margin-bottom: 0;
min-height: 0;
display: flex;
flex-direction: column;
}
.pagination-wrapper {
flex-shrink: 0;
padding-top: 6px;
margin-top: auto;
::v-deep .pagination-container {
padding: 0px 20px !important;
}
}
::v-deep .el-table {
// 启用斑马纹
&.el-table--striped .el-table__body {
tr.el-table__row--striped td {
background-color: #F6FBFA !important;
}
}
.el-table__header {
background: #E9F0EE;
th {
background: #E9F0EE !important;
color: #606266;
font-weight: 600;
height: 50px;
}
}
// 确保表格体包装器可以横向和纵向滚动
.el-table__body-wrapper {
overflow-x: auto !important;
}
&.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
background-color: #CCF1E9 !important;
}
装备录入按钮大小修改
2025-10-29 18:05:53 +08:00
.el-table__body tr.hover-row > td.el-table__cell {
background-color: #ccf1e9 !important;
}
表格样式优化
2025-10-29 13:31:49 +08:00
}
}
代码提交
2025-10-13 09:27:53 +08:00
</style>