557 lines
20 KiB
Vue
557 lines
20 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-form :model="queryParams" ref="queryFormRef" inline label-width="auto" size="small">
|
||
<!-- 表单搜索 -->
|
||
<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="采购日期：">
|
||
<el-date-picker
|
||
type="date"
|
||
style="width: 240px"
|
||
value-format="YYYY-MM-DD"
|
||
placeholder="请选择采购日期"
|
||
v-model="queryParams.applyTime"
|
||
/>
|
||
</el-form-item>-->
|
||
|
||
<el-form-item prop="minOriginalValue" label="资产原值：">
|
||
<el-input clearable style="width: 90px" placeholder="请输入" v-model.trim="queryParams.minOriginalValue" />
|
||
|
||
</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>
|
||
|
||
|
||
|
||
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="24" style="text-align: right;">
|
||
|
||
<el-button class="primary-lease" icon="el-icon-search" type="primary" @click="getEquipmentApplyList">
|
||
查询
|
||
</el-button>
|
||
<el-button class="primary-lease" icon="el-icon-refresh" @click="resetForm">
|
||
重置
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
<el-card class="content-box">
|
||
<el-row>
|
||
<el-col>
|
||
<el-button class="primary-lease" type="primary" @click="showEquipmentInput()">
|
||
装备录入
|
||
</el-button>
|
||
|
||
<el-button class="primary-lease" type="primary" @click="showDetails('0')">
|
||
展开明细
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- 表格 -->
|
||
<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>
|
||
|
||
<div class="pagination-wrapper">
|
||
<!-- 分页 -->
|
||
<pagination :total="total" @pagination="handlePageChange" :page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize" />
|
||
</div>
|
||
|
||
</el-card>
|
||
</el-form>
|
||
|
||
<!-- 弹框 -->
|
||
<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>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getDeviceListApi, equipmentDelApiNew } from '@/api/EquipmentEntryApply/index'
|
||
import { getManufacturerSelectApi } from '@/api/EquipmentLedger/index.js'
|
||
|
||
export default {
|
||
name: 'EquipmentDetailList',
|
||
data() {
|
||
return {
|
||
total: 0,
|
||
orderId: '',
|
||
isVisible: false,
|
||
isAddVisible: false,
|
||
queryParams: {
|
||
orderCreateUser: '',
|
||
orderCreateTime: '',
|
||
entryStatus: '',
|
||
name: '',
|
||
specificationModel: '',
|
||
originalCode: '',
|
||
manufacturerId: '',
|
||
productionDate: '',
|
||
minOriginalValue: '',
|
||
maxOriginalValue: '',
|
||
|
||
pageNum: 1,
|
||
pageSize: 10
|
||
},
|
||
manufacturerList: [],
|
||
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: [],
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getEquipmentApplyList()
|
||
this.getManufacturerSelectList()
|
||
},
|
||
methods: {
|
||
// 获取厂家
|
||
getManufacturerSelectList() {
|
||
getManufacturerSelectApi().then((res) => {
|
||
console.log('🚀 ~ getManufacturerSelectList ~ res:', res)
|
||
if (res.code === 200) {
|
||
this.manufacturerList = res.data
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 获取装备申请列表
|
||
*/
|
||
getEquipmentApplyList() {
|
||
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)
|
||
.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', // 完整路径
|
||
query: { // 因为使用path，所以用query传递参数
|
||
orderId: orderId,
|
||
isAddVisible: isAddVisible,
|
||
isApprovalVisible: false
|
||
}
|
||
})
|
||
},
|
||
handleViewDetail(row) {
|
||
this.$router.push({ path: '/equipment/details', query: { id: row.maId } })
|
||
},
|
||
/**
|
||
* 删除项目
|
||
*/
|
||
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
|
||
}
|
||
}
|
||
},
|
||
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
|
||
},
|
||
|
||
}
|
||
}
|
||
</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 {
|
||
padding: 0;
|
||
}
|
||
|
||
::v-deep .el-pagination {
|
||
margin-top: 15px;
|
||
text-align: right;
|
||
}
|
||
|
||
::v-deep .el-button {
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
}
|
||
}
|
||
</style>
|