754 lines
24 KiB
Vue
754 lines
24 KiB
Vue
<template>
|
||
<!-- 修复标题模板字符串语法错误，规范属性顺序 -->
|
||
<!-- 弹窗内容区域 -->
|
||
<div class="app-container" style="height: calc(100vh - 84px);">
|
||
<div class="page-header">
|
||
<div>
|
||
<i class="el-icon-arrow-left goBack-btn" @click="goBack"
|
||
style="border-color: transparent;color: #00a288;background: transparent;padding-left: 0;padding-right: 0;"
|
||
>返回</i>
|
||
<span class="page-title">{{ pageTitle }}</span>
|
||
</div>
|
||
<div class="dialog-footer" style="float: right">
|
||
<el-button size="small" type="primary" @click="handleSubmit" v-if="!isAddVisible"
|
||
:disabled="tableData.length===0"
|
||
>{{ submitButtonText }}
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<!-- 查询条件 -->
|
||
<el-form
|
||
:model="queryParams"
|
||
ref="queryFormRef"
|
||
:inline="true"
|
||
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="status">
|
||
<el-select
|
||
clearable
|
||
style="width: 200px"
|
||
placeholder="请选择审批状态"
|
||
v-model="queryParams.status"
|
||
>
|
||
<el-option label="待审批" value="0"/>
|
||
<el-option label="已审批" value="1"/>
|
||
<el-option label="草稿" value="3"/>
|
||
</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="minBuyPrice" label="资产原值：">
|
||
<el-input
|
||
clearable
|
||
style="width: 90px"
|
||
placeholder="请输入"
|
||
v-model.trim="queryParams.minBuyPrice"
|
||
/>
|
||
|
||
</el-form-item>
|
||
<el-form-item prop="maxBuyPrice" label="-" style="margin-left: -6%;">
|
||
<el-input
|
||
clearable
|
||
style="width: 90px"
|
||
placeholder="请输入"
|
||
v-model.trim="queryParams.maxBuyPrice"
|
||
/>
|
||
</el-form-item>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="24" style="text-align: right;">
|
||
<el-button icon="el-icon-search" type="primary" @click="queryTableList" size="mini">
|
||
查询
|
||
</el-button>
|
||
<el-button icon="el-icon-refresh"
|
||
@click="resetTableList" size="mini"
|
||
>
|
||
重置
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
</el-form>
|
||
|
||
<el-card class="content-box">
|
||
<el-row>
|
||
<el-col :span="24" style="text-align: right;">
|
||
<el-button
|
||
type="primary"
|
||
size="mini"
|
||
@click="equipmentDeployment"
|
||
v-show="!isAddVisible"
|
||
>
|
||
新增装备
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- 表格 -->
|
||
<el-table
|
||
:data="tableData"
|
||
style="width: auto"
|
||
show-overflow-tooltip
|
||
:span-method="handleSpanMethod"
|
||
border
|
||
stripe
|
||
height="100%"
|
||
>
|
||
<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="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="editRowInfo(row)"
|
||
v-if="row.orderStatus == '3' && !isAddVisible"
|
||
>
|
||
<i class="el-icon-edit"></i> 编辑
|
||
</el-button>
|
||
<el-button
|
||
type="text"
|
||
@click="deleteRowInfo(row)"
|
||
v-if="row.orderStatus == '3' && !isAddVisible"
|
||
>
|
||
<i class="el-icon-delete"></i> 删除
|
||
</el-button>
|
||
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="pagination-wrapper">
|
||
<pagination
|
||
:total="total"
|
||
@pagination="getList"
|
||
:page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
<EquipmentEntryEditDialog
|
||
:is-visible.sync="isEditVisible"
|
||
:order-id="orderId"
|
||
:is-view="isViewMode"
|
||
@getOrderId="getOrderId"
|
||
/>
|
||
<!-- 弹框 -->
|
||
<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 EquipmentEntryEditDialog from '@/views/EquipmentEntryApply/equipmentInput/edit.vue'
|
||
|
||
// 使用defineComponent规范组件定义
|
||
import {
|
||
getDeviceByOrderIdApi,
|
||
equipmentPassAndRejectApiNew,
|
||
equipmentSubmitApiNew,
|
||
removeDeviceApi
|
||
} from '@/api/EquipmentEntryApply'
|
||
import { getManufacturerSelectApi } from '@/api/EquipmentLedger/index.js'
|
||
|
||
export default {
|
||
name: 'EquipmentInput',
|
||
components: { EquipmentEntryEditDialog },
|
||
emits: ['update:isVisible', 'submit'], // 声明事件
|
||
created() {
|
||
console.log(this.$route)
|
||
this.orderId = this.$route.query && this.$route.query.orderId
|
||
this.isAddVisible = this.$route.query && this.$route.query.isAddVisible == 'true'
|
||
this.isApprovalVisible = this.$route.query && this.$route.query.isApprovalVisible
|
||
if (!this.orderId) {
|
||
this.pageTitle = '新增设备录入'
|
||
this.submitButtonText = '提交申请'
|
||
} else if (this.isAddVisible) {
|
||
this.pageTitle = '查看装备'
|
||
this.submitButtonText = ''
|
||
this.getList()
|
||
} else {
|
||
this.pageTitle = '编辑装备'
|
||
this.submitButtonText = '提交申请'
|
||
this.getList()
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
isSubmit: false,
|
||
isAddVisible: false,
|
||
isApprovalVisible: false,
|
||
isEditVisible: false,
|
||
orderId: '',
|
||
// 表格数据
|
||
tableData: [],
|
||
total: 0,
|
||
queryParams: {
|
||
orderCreateUser: '',
|
||
orderCreateTime: '',
|
||
status: '',
|
||
name: '',
|
||
specificationModel: '',
|
||
originalCode: '',
|
||
manufacturerId: '',
|
||
productionDate: '',
|
||
minBuyPrice: '',
|
||
maxBuyPrice: '',
|
||
|
||
pageNum: 1,
|
||
pageSize: 10
|
||
},
|
||
manufacturerList: [],
|
||
// 可添加表单数据
|
||
formData: {
|
||
// 示例字段，可根据实际需求修改
|
||
equipmentName: '',
|
||
model: '',
|
||
quantity: 1
|
||
},
|
||
isViewMode: false, // 添加查看模式标识
|
||
pageTitle:'',
|
||
submitButtonText: '',
|
||
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 },
|
||
],
|
||
dialogVisible: false,
|
||
dialogTitle: '',
|
||
dialogList: [],
|
||
}
|
||
},
|
||
watch: {
|
||
isVisible(val) {
|
||
if (val) {
|
||
this.getList()
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getManufacturerSelectList()
|
||
},
|
||
methods: {
|
||
// 获取厂家
|
||
getManufacturerSelectList() {
|
||
getManufacturerSelectApi().then((res) => {
|
||
console.log('🚀 ~ getManufacturerSelectList ~ res:', res)
|
||
if (res.code === 200) {
|
||
this.manufacturerList = res.data
|
||
}
|
||
})
|
||
},
|
||
// 返回上一页
|
||
goBack() {
|
||
// this.$router.go(-1)
|
||
this.$router.push({ path: '/equipment/equipmentEntry/equipment-entry-apply' })
|
||
},
|
||
async approval(row, status) {
|
||
equipmentPassAndRejectApiNew({ devIds: row.maId, status: status, id: this.orderId }).then(res => {
|
||
if (res.code === 200) {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '操作成功'
|
||
})
|
||
this.getList()
|
||
}
|
||
})
|
||
},
|
||
// 获取列表数据
|
||
async getList() {
|
||
try {
|
||
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] : ''
|
||
this.queryParams.orderId = this.orderId
|
||
const params = { ...this.queryParams }
|
||
delete params.orderCreateTime
|
||
delete params.productionDate
|
||
const res = await getDeviceByOrderIdApi(params)
|
||
this.tableData = res.data.rows
|
||
this.total = res.data.total
|
||
} catch (error) {
|
||
console.error('获取列表失败:', error)
|
||
}
|
||
},
|
||
|
||
getOrderId(data) {
|
||
this.orderId = data.orderId
|
||
this.queryTableList()
|
||
},
|
||
|
||
// 查询表格数据
|
||
queryTableList() {
|
||
this.queryParams.pageNum = 1
|
||
this.getList()
|
||
},
|
||
equipmentDeployment() {
|
||
this.$router.push({
|
||
name: 'equipmentInputAdd', // 完整路径
|
||
params: { // 因为使用path，所以用query传递参数
|
||
orderId: this.orderId
|
||
}
|
||
})
|
||
},
|
||
|
||
// 删除按钮
|
||
async deleteRowInfo(row) {
|
||
this.$confirm('是否确定删除？', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
})
|
||
.then(() => {
|
||
return removeDeviceApi([row.maId])
|
||
})
|
||
.then(res => {
|
||
if (res.code === 200) {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功'
|
||
})
|
||
this.getList()
|
||
}
|
||
})
|
||
.catch(() => {
|
||
})
|
||
},
|
||
// 重置表格查询
|
||
resetTableList() {
|
||
this.$refs.queryFormRef.resetFields()
|
||
this.queryParams.pageNum = 1
|
||
this.getList()
|
||
},
|
||
|
||
/**
|
||
* 处理表单提交
|
||
*/
|
||
handleSubmit() {
|
||
if(this.isSubmit) return
|
||
this.isSubmit = true
|
||
const loading = this.$loading()
|
||
equipmentSubmitApiNew({ id: this.orderId, status: 0 }).then(res => {
|
||
if (res.code === 200) {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '提交成功'
|
||
})
|
||
// this.goBack()
|
||
this.$router.push({ path: '/equipment/equipmentEntry/equipment-entry-apply' })
|
||
}
|
||
}).finally(() => {
|
||
this.isSubmit = false
|
||
loading.close()
|
||
})
|
||
|
||
},
|
||
|
||
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
|
||
}
|
||
}
|
||
},
|
||
|
||
//编辑
|
||
editRowInfo(row) {
|
||
// this.orderId = orderId.toString()
|
||
// this.isViewMode = false // 编辑模式
|
||
// this.isEditVisible = true
|
||
this.$router.push({
|
||
path: '/equipment/equipment-input/add',
|
||
query: {
|
||
maId: row.maId,
|
||
orderId: this.orderId
|
||
}
|
||
})
|
||
},
|
||
|
||
// 修改查看方法
|
||
showEquipmentInput(orderId, isView) {
|
||
this.orderId = orderId.toString()
|
||
this.isViewMode = isView || false // 设置查看模式
|
||
this.isEditVisible = true
|
||
},
|
||
handleViewDetail(row) {
|
||
this.$router.push({ path: '/equipment/details', query: { id: row.maId } })
|
||
},
|
||
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 lang="scss" scoped>
|
||
.page-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 15px;
|
||
font-size: 18px;
|
||
border-bottom: 1px solid #e6e6e6;
|
||
justify-content: space-between;
|
||
|
||
.page-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-left: 15px;
|
||
color: #303133;
|
||
}
|
||
}
|
||
|
||
.dialog-content {
|
||
padding: 10px 0;
|
||
min-height: 200px; // 确保有足够高度
|
||
}
|
||
|
||
.dialog-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 10px; // 按钮间距
|
||
}
|
||
|
||
.search-box {
|
||
margin-bottom: 20px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.content-box {
|
||
border-radius: 8px;
|
||
height: calc(100vh - 380px);
|
||
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;
|
||
margin-bottom: 30px;
|
||
}
|
||
}
|
||
|
||
::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--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
|
||
background-color: #CCF1E9 !important;
|
||
}
|
||
.el-table__body tr.hover-row > td.el-table__cell {
|
||
background-color: #ccf1e9 !important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|