851 lines
30 KiB
Vue
851 lines
30 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<span>资产清单</span>
|
||
<el-button-group style="float: right;">
|
||
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增资产</el-button>
|
||
<el-button type="primary" icon="el-icon-upload2" size="mini" @click="handleImport">批量导入</el-button>
|
||
<el-button type="primary" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
|
||
<el-button type="primary" icon="el-icon-printer" size="mini" @click="handlePrint" :disabled="multiple">打印标签</el-button>
|
||
</el-button-group>
|
||
</div>
|
||
|
||
<!-- 搜索条件 -->
|
||
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
|
||
<el-form-item label="资产状态" prop="assetStatus">
|
||
<el-select size="small" v-model="queryParams.assetStatus" placeholder="请选择资产状态" clearable style="width: 180px">
|
||
<el-option v-for="dict in statusOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="资产分类" prop="classificationId">
|
||
<el-cascader
|
||
size="small"
|
||
v-model="queryParams.classificationId"
|
||
:options="classificationOptions"
|
||
:props="{ checkStrictly: true, value: 'id', label: 'name', emitPath: false }"
|
||
clearable
|
||
style="width: 180px"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="资产名称" prop="assetName">
|
||
<el-input size="small" v-model="queryParams.assetName" placeholder="请输入资产名称" clearable style="width: 180px" />
|
||
</el-form-item>
|
||
<el-form-item label="所在位置">
|
||
<el-cascader
|
||
v-model="queryParams.locationId"
|
||
:options="locationOptions"
|
||
size="small"
|
||
:props="{
|
||
checkStrictly: true,
|
||
emitPath: false,
|
||
expandTrigger: 'hover',
|
||
value: 'id',
|
||
label: 'name'
|
||
}"
|
||
clearable
|
||
filterable
|
||
placeholder="请选择所在位置"
|
||
style="width: 180px"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="资产编码" prop="assetCode">
|
||
<el-input size="small" v-model="queryParams.assetCode" placeholder="请输入资产编码" clearable style="width: 180px" />
|
||
</el-form-item>
|
||
<el-form-item label="设备序列号" prop="serialNumber">
|
||
<el-input size="small" v-model="queryParams.serialNumber" placeholder="请输入设备序列号" clearable style="width: 180px" />
|
||
</el-form-item>
|
||
<el-form-item label="管理员" prop="adminUserId">
|
||
<el-select
|
||
v-model="queryParams.adminUserId"
|
||
placeholder="请选择管理员"
|
||
clearable
|
||
size="small"
|
||
filterable
|
||
remote
|
||
:remote-method="remoteSearchAdmin"
|
||
:loading="adminLoading"
|
||
style="width: 180px"
|
||
multiple
|
||
>
|
||
<el-option
|
||
v-for="item in adminOptions"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="保养到期" prop="maintenanceExpired">
|
||
<el-select v-model="queryParams.maintenanceExpired" size="small" placeholder="请选择" clearable style="width: 180px">
|
||
<el-option label="全部" value="" />
|
||
<el-option label="是" value="1" />
|
||
<el-option label="否" value="0" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||
<el-button icon="el-icon-refresh" style="margin-right: 10px;" size="mini" @click="resetQuery">重置</el-button>
|
||
<el-popover
|
||
placement="bottom"
|
||
width="200"
|
||
trigger="click"
|
||
v-model="columnFilterVisible">
|
||
<el-checkbox-group v-model="selectedColumns">
|
||
<el-checkbox label="all" @change="handleCheckAllChange">全部</el-checkbox>
|
||
<el-divider></el-divider>
|
||
<el-checkbox v-for="(item, index) in columns" :key="index" :label="item.prop" :disabled="item.disabled">{{ item.label }}</el-checkbox>
|
||
</el-checkbox-group>
|
||
<el-button slot="reference" type="primary" size="mini" icon="el-icon-s-operation">列显示</el-button>
|
||
</el-popover>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!-- 列表展示区域 -->
|
||
<el-table
|
||
v-loading="loading"
|
||
:data="assetList"
|
||
border
|
||
@selection-change="handleSelectionChange"
|
||
style="width: 100%; margin-top: 15px;"
|
||
>
|
||
<el-table-column type="selection" width="55" align="center" />
|
||
<el-table-column label="资产编码" prop="assetCode" width="120" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope">
|
||
<el-link type="primary" @click="handleDetail(scope.row)">{{ scope.row.assetCode }}</el-link>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="资产分类" width="120" v-if="isColumnVisible('classification')" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope">
|
||
{{ getClassificationName(scope.row.classificationId) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="资产名称" prop="assetName" width="120" v-if="isColumnVisible('assetName')" :show-overflow-tooltip="true" />
|
||
<el-table-column label="资产状态" prop="assetStatus" width="100" v-if="isColumnVisible('assetStatus')">
|
||
<template slot-scope="scope">
|
||
<el-tag :type="getStatusType(scope.row.assetStatus)">{{ scope.row.assetStatus }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="品牌" prop="brand" width="100" v-if="isColumnVisible('brand')" :show-overflow-tooltip="true" />
|
||
<el-table-column label="型号" prop="model" width="100" v-if="isColumnVisible('model')" :show-overflow-tooltip="true" />
|
||
<el-table-column label="设备序列号" prop="serialNumber" width="140" v-if="isColumnVisible('serialNumber')" :show-overflow-tooltip="true" />
|
||
<el-table-column label="管理员" prop="administratorName" width="100" v-if="isColumnVisible('administratorName')" :show-overflow-tooltip="true" />
|
||
<el-table-column label="所属公司" prop="companyName" width="140" v-if="isColumnVisible('companyName')" :show-overflow-tooltip="true" />
|
||
<el-table-column label="所在位置" width="140" v-if="isColumnVisible('location')" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope">
|
||
{{ getLocationName(scope.row.locationId) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="购置时间" prop="purchaseDate" width="120" v-if="isColumnVisible('purchaseDate')" />
|
||
<el-table-column label="购置方式" prop="purchaseType" width="100" v-if="isColumnVisible('purchaseType')">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.purchaseType === '1' ? '采购' : '租赁' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="购置金额(含税)" prop="purchaseAmount" width="130" v-if="isColumnVisible('purchaseAmount')" />
|
||
<el-table-column label="入库时间" prop="storageDate" width="120" v-if="isColumnVisible('storageDate')" />
|
||
<el-table-column label="预计使用期限(月)" prop="expectedDepreciationPeriod" width="150" v-if="isColumnVisible('expectedUsePeriod')" />
|
||
<el-table-column label="备注" prop="remark" width="150" v-if="isColumnVisible('remark')" :show-overflow-tooltip="true" />
|
||
<el-table-column label="资产照片" width="100" v-if="isColumnVisible('image')" align="center">
|
||
<template slot-scope="scope">
|
||
<el-image
|
||
v-if="scope.row.imageUrl"
|
||
:src="scope.row.imageUrl"
|
||
style="width: 50px; height: 50px"
|
||
:preview-src-list="[scope.row.imageUrl]">
|
||
</el-image>
|
||
<span v-else>无</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="保养到期时间" prop="maintenanceDueDate" width="130" v-if="isColumnVisible('maintenanceDueDate')" />
|
||
<el-table-column label="保养说明" prop="maintenanceDescription" width="150" v-if="isColumnVisible('maintenanceDescription')" :show-overflow-tooltip="true" />
|
||
<el-table-column label="预计折旧期限(月)" prop="expectedDepreciationPeriod" width="150" v-if="isColumnVisible('expectedDepreciationPeriod')" />
|
||
<el-table-column label="操作" width="150" align="center" fixed="right">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
|
||
<el-button type="text" size="mini" @click="handleDelete(scope.row)" v-if="scope.row.assetStatus === '0'" style="color: #F56C6C;">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 分页 -->
|
||
<el-pagination
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="queryParams.pageNum"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
:page-size="queryParams.pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="total"
|
||
style="margin-top: 15px; text-align: right;">
|
||
</el-pagination>
|
||
</el-card>
|
||
|
||
<!-- 导入对话框 -->
|
||
<el-dialog :title="importTitle" :visible.sync="upload.open" width="400px" append-to-body>
|
||
<el-upload
|
||
ref="upload"
|
||
:limit="1"
|
||
accept=".xlsx, .xls"
|
||
:headers="upload.headers"
|
||
:action="upload.url"
|
||
:disabled="upload.isUploading"
|
||
:on-progress="handleFileUploadProgress"
|
||
:on-success="handleFileSuccess"
|
||
:auto-upload="false"
|
||
drag>
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||
<div class="el-upload__tip" slot="tip">
|
||
<el-button type="text" @click="downloadImportTemplate">下载模板</el-button>
|
||
<div>只允许导入xls、xlsx格式文件。</div>
|
||
</div>
|
||
</el-upload>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="submitFileForm">确 定</el-button>
|
||
<el-button @click="upload.open = false">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 查看详情对话框 -->
|
||
<el-dialog :title="detailTitle" :visible.sync="detailOpen" width="900px" append-to-body>
|
||
<asset-detail v-if="detailOpen" :asset-id="currentAssetId" />
|
||
</el-dialog>
|
||
|
||
<!-- 添加/修改资产对话框 -->
|
||
<el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
|
||
<asset-form
|
||
v-if="open"
|
||
:asset-id="currentAssetId"
|
||
:is-edit="isEdit"
|
||
@refresh="getList"
|
||
@close="open = false"
|
||
/>
|
||
</el-dialog>
|
||
|
||
<!-- 打印标签对话框 -->
|
||
<el-dialog title="打印资产标签" :visible.sync="printOpen" width="800px" append-to-body>
|
||
<asset-label-print
|
||
v-if="printOpen"
|
||
:ids="ids"
|
||
:selected-assets="assetsToPrint"
|
||
@close="printOpen = false"
|
||
/>
|
||
</el-dialog>
|
||
|
||
<!-- 隐藏的打印组件，用于生成打印内容 -->
|
||
<asset-label-print
|
||
ref="assetLabelPrint"
|
||
:ids="ids"
|
||
:selected-assets="assetsToPrint"
|
||
style="display: none;"
|
||
/>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { listAssets, deleteAsset, deleteAssets, listCompanies, listUsers, exportAsset, downloadTemplate, printAssetLabels, getLabelConfig } from '@/api/asset/inventory'
|
||
import { getClassificationTree } from '@/api/asset/classification'
|
||
import { getLocationTree } from '@/api/asset/location'
|
||
import AssetDetail from './components/AssetDetail'
|
||
import AssetForm from './components/AssetForm'
|
||
import AssetLabelPrint from './components/AssetLabelPrint'
|
||
import { API_SUCCESS_CODE } from '@/utils/constants'
|
||
|
||
export default {
|
||
name: 'AssetInventory',
|
||
components: {
|
||
AssetDetail,
|
||
AssetForm,
|
||
AssetLabelPrint
|
||
},
|
||
data() {
|
||
return {
|
||
printOpen: false,
|
||
// 遮罩层
|
||
loading: false,
|
||
// 资产清单列表
|
||
assetList: [],
|
||
// 选中数组
|
||
ids: [],
|
||
// 非单个禁用
|
||
single: true,
|
||
// 非多个禁用
|
||
multiple: true,
|
||
// 总条数
|
||
total: 0,
|
||
// 要打印的资产数据
|
||
assetsToPrint: [],
|
||
// 弹出层标题
|
||
title: '',
|
||
// 是否显示弹出层
|
||
open: false,
|
||
// 是否显示详情弹出层
|
||
detailOpen: false,
|
||
// 是否显示导入弹出层
|
||
importOpen: false,
|
||
// 导入标题
|
||
importTitle: '导入资产数据',
|
||
// 详情标题
|
||
detailTitle: '资产详情',
|
||
// 当前处理的资产ID
|
||
currentAssetId: null,
|
||
// 是否编辑模式
|
||
isEdit: false,
|
||
// 资产状态选项
|
||
statusOptions: [],
|
||
// 管理员选项
|
||
adminOptions: [],
|
||
// 管理员搜索加载中
|
||
adminLoading: false,
|
||
// 资产分类选项
|
||
classificationOptions: [],
|
||
// 资产位置选项
|
||
locationOptions: [],
|
||
// 公司选项
|
||
companyOptions: [],
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
assetStatus: '',
|
||
classificationId: undefined,
|
||
assetName: '',
|
||
locationId: undefined,
|
||
assetCode: '',
|
||
serialNumber: '',
|
||
adminUserId: undefined,
|
||
maintenanceExpired: ''
|
||
},
|
||
// 上传参数
|
||
upload: {
|
||
// 是否显示弹出层
|
||
open: false,
|
||
// 是否禁用上传
|
||
isUploading: false,
|
||
// 设置上传的请求头部
|
||
headers: {},
|
||
// 上传的地址
|
||
url: process.env.VUE_APP_BASE_API + '/asset/import'
|
||
},
|
||
// 列显示设置
|
||
columns: [
|
||
{ prop: 'assetCode', label: '资产编码', visible: true, disabled: true },
|
||
{ prop: 'tagLink', label: '标签链接', visible: true, disabled: false },
|
||
{ prop: 'classification', label: '资产分类', visible: true, disabled: false },
|
||
{ prop: 'assetName', label: '资产名称', visible: true, disabled: false },
|
||
{ prop: 'assetStatus', label: '资产状态', visible: true, disabled: false },
|
||
{ prop: 'brand', label: '品牌', visible: true, disabled: false },
|
||
{ prop: 'model', label: '型号', visible: true, disabled: false },
|
||
{ prop: 'serialNumber', label: '设备序列号', visible: true, disabled: false },
|
||
{ prop: 'administratorName', label: '管理员', visible: true, disabled: false },
|
||
{ prop: 'companyName', label: '所属公司', visible: true, disabled: false },
|
||
{ prop: 'location', label: '所在位置', visible: true, disabled: false },
|
||
{ prop: 'purchaseDate', label: '购置时间', visible: true, disabled: false },
|
||
{ prop: 'purchaseType', label: '购置方式', visible: true, disabled: false },
|
||
{ prop: 'purchaseAmount', label: '购置金额(含税)', visible: true, disabled: false },
|
||
{ prop: 'storageDate', label: '入库时间', visible: true, disabled: false },
|
||
{ prop: 'expectedUsePeriod', label: '预计使用期限(月)', visible: true, disabled: false },
|
||
{ prop: 'remark', label: '备注', visible: true, disabled: false },
|
||
{ prop: 'image', label: '资产照片', visible: true, disabled: false },
|
||
{ prop: 'maintenanceDueDate', label: '保养到期时间', visible: true, disabled: false },
|
||
{ prop: 'maintenanceDescription', label: '保养说明', visible: true, disabled: false },
|
||
{ prop: 'expectedDepreciationPeriod', label: '预计折旧期限(月)', visible: true, disabled: false }
|
||
],
|
||
columnFilterVisible: false,
|
||
selectedColumns: []
|
||
}
|
||
},
|
||
created() {
|
||
this.getList()
|
||
this.getStatusOptions()
|
||
this.getClassificationOptions()
|
||
this.getLocationOptions()
|
||
// this.getCompanyOptions()
|
||
|
||
// 初始化选中的列
|
||
this.selectedColumns = this.columns
|
||
.filter(col => col.visible)
|
||
.map(col => col.prop)
|
||
|
||
// 检查是否所有列都被选中，如果是，添加 'all' 选项
|
||
const allSelected = this.columns
|
||
.filter(col => !col.disabled)
|
||
.every(col => this.selectedColumns.includes(col.prop))
|
||
|
||
if (allSelected) {
|
||
this.selectedColumns.push('all')
|
||
}
|
||
},
|
||
computed: {
|
||
// 判断列是否可见
|
||
isColumnVisible() {
|
||
return (prop) => this.selectedColumns.includes(prop)
|
||
},
|
||
// 判断是否所有可选列都被选中
|
||
isAllSelected() {
|
||
const selectableColumns = this.columns
|
||
.filter(col => !col.disabled)
|
||
.map(col => col.prop)
|
||
|
||
return selectableColumns.every(prop => this.selectedColumns.includes(prop))
|
||
}
|
||
},
|
||
watch: {
|
||
selectedColumns: {
|
||
handler(newVal) {
|
||
// 确保必选列始终存在
|
||
if (!newVal.includes('assetCode')) {
|
||
this.selectedColumns.push('assetCode')
|
||
}
|
||
|
||
// 获取所有可选列（除了必选列）
|
||
const selectableColumns = this.columns
|
||
.filter(col => !col.disabled)
|
||
.map(col => col.prop)
|
||
|
||
// 检查所有可选列是否都被选中
|
||
const allSelected = selectableColumns.every(prop => newVal.includes(prop))
|
||
|
||
// 更新"全部"选项的状态
|
||
if (allSelected && !newVal.includes('all')) {
|
||
this.selectedColumns.push('all')
|
||
} else if (!allSelected && newVal.includes('all')) {
|
||
// 从选择中移除"全部"选项
|
||
const index = this.selectedColumns.indexOf('all')
|
||
if (index > -1) {
|
||
this.selectedColumns.splice(index, 1)
|
||
}
|
||
}
|
||
|
||
// 更新 columns 中的 visible 属性
|
||
this.columns.forEach(col => {
|
||
col.visible = this.selectedColumns.includes(col.prop)
|
||
})
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
/** 查询资产清单列表 */
|
||
getList() {
|
||
this.loading = true
|
||
listAssets(this.queryParams).then(response => {
|
||
if (response.code === API_SUCCESS_CODE) {
|
||
this.assetList = response.data.data || []
|
||
this.total = response.data.total
|
||
}
|
||
this.loading = false
|
||
})
|
||
},
|
||
|
||
/** 获取资产状态选项 */
|
||
getStatusOptions() {
|
||
this.statusOptions = [
|
||
{ value: '空闲', label: '空闲' },
|
||
{ value: '在用', label: '在用' },
|
||
{ value: '借用', label: '借用' },
|
||
{ value: '维修中', label: '维修中' },
|
||
{ value: '报废', label: '报废' }
|
||
]
|
||
},
|
||
|
||
/** 获取资产分类树形选项 */
|
||
getClassificationOptions() {
|
||
getClassificationTree({ status: '1' }).then(response => {
|
||
if (response.code === API_SUCCESS_CODE) {
|
||
this.classificationOptions = this.processClassificationTree(response.data || [])
|
||
}
|
||
})
|
||
},
|
||
|
||
/** 获取资产位置树形选项 */
|
||
getLocationOptions() {
|
||
getLocationTree().then(response => {
|
||
if (response.code === API_SUCCESS_CODE) {
|
||
this.locationOptions = this.processLocationTree(response.data || [])
|
||
}
|
||
})
|
||
},
|
||
|
||
processLocationTree(data) {
|
||
if (!data || !Array.isArray(data)) return []
|
||
|
||
const processNode = (node) => {
|
||
const processedNode = {
|
||
id: node.id,
|
||
name: `${node.code || ''}-${node.locationName || node.label || ''}`,
|
||
children: []
|
||
}
|
||
|
||
if (node.children && Array.isArray(node.children) && node.children.length > 0) {
|
||
processedNode.children = node.children.map(child => processNode(child))
|
||
}
|
||
|
||
return processedNode
|
||
}
|
||
|
||
return data.map(item => processNode(item))
|
||
},
|
||
|
||
processClassificationTree(data) {
|
||
if (!data || !Array.isArray(data)) return []
|
||
|
||
const processNode = (node) => {
|
||
const processedNode = {
|
||
id: node.id,
|
||
name: `${node.classificationCode || node.code || ''}-${node.classificationName || node.label || ''}`,
|
||
children: []
|
||
}
|
||
|
||
if (node.children && Array.isArray(node.children) && node.children.length > 0) {
|
||
processedNode.children = node.children.map(child => processNode(child))
|
||
}
|
||
|
||
return processedNode
|
||
}
|
||
|
||
return data.map(item => processNode(item))
|
||
},
|
||
|
||
/** 获取公司选项 */
|
||
getCompanyOptions() {
|
||
listCompanies().then(response => {
|
||
if (response.code === API_SUCCESS_CODE) {
|
||
this.companyOptions = response.data || []
|
||
}
|
||
})
|
||
},
|
||
|
||
/** 远程搜索管理员 */
|
||
remoteSearchAdmin(query) {
|
||
if (query) {
|
||
this.adminLoading = true
|
||
listUsers({ name: query }).then(response => {
|
||
this.adminLoading = false
|
||
if (response.code === API_SUCCESS_CODE) {
|
||
this.adminOptions = response.data || []
|
||
}
|
||
}).catch(() => {
|
||
this.adminLoading = false
|
||
})
|
||
}
|
||
},
|
||
|
||
/** 获取资产状态显示文本 */
|
||
getStatusText(assetStatus) {
|
||
const statusMap = {
|
||
'0': '空闲',
|
||
'1': '在用',
|
||
'2': '借用',
|
||
'3': '维修中',
|
||
'4': '报废'
|
||
}
|
||
return statusMap[assetStatus] || '未知'
|
||
},
|
||
|
||
/** 获取资产状态显示类型 */
|
||
getStatusType(assetStatus) {
|
||
const typeMap = {
|
||
'空闲': 'success',
|
||
'在用': 'primary',
|
||
'借用': 'info',
|
||
'维修中': 'warning',
|
||
'报废': 'warning',
|
||
'5': 'warning',
|
||
'6': 'warning',
|
||
'7': 'danger'
|
||
}
|
||
return typeMap[assetStatus] || 'info'
|
||
},
|
||
|
||
/** 搜索按钮操作 */
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1
|
||
this.getList()
|
||
},
|
||
|
||
/** 重置按钮操作 */
|
||
resetQuery() {
|
||
// 使用Element UI表单的resetFields方法重置表单
|
||
if (this.$refs.queryForm) {
|
||
this.$refs.queryForm.resetFields()
|
||
}
|
||
|
||
this.queryParams = {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
assetStatus: '',
|
||
classificationId: undefined,
|
||
assetName: '',
|
||
locationId: undefined,
|
||
assetCode: '',
|
||
serialNumber: '',
|
||
adminUserId: undefined,
|
||
maintenanceExpired: ''
|
||
}
|
||
this.handleQuery()
|
||
},
|
||
|
||
/** 全选/取消全选处理 */
|
||
handleCheckAllChange(checked) {
|
||
// 获取所有可选列的 prop 值（除了必选列）
|
||
const selectableColumns = this.columns
|
||
.filter(col => !col.disabled)
|
||
.map(col => col.prop)
|
||
|
||
if (checked) {
|
||
// 如果选中"全部"，则选择所有列
|
||
this.selectedColumns = ['all', 'assetCode', ...selectableColumns]
|
||
} else {
|
||
// 如果取消选中"全部"，则只保留必选列
|
||
this.selectedColumns = ['assetCode']
|
||
}
|
||
},
|
||
|
||
/** 多选框选中数据 */
|
||
handleSelectionChange(selection) {
|
||
this.ids = selection.map(item => item.id)
|
||
this.multiple = !selection.length
|
||
},
|
||
|
||
/** 新增按钮操作 */
|
||
handleAdd() {
|
||
this.open = true
|
||
this.title = '新增资产'
|
||
this.isEdit = false
|
||
this.currentAssetId = null
|
||
},
|
||
|
||
/** 修改按钮操作 */
|
||
handleUpdate(row) {
|
||
this.open = true
|
||
this.title = '修改资产'
|
||
this.isEdit = true
|
||
this.currentAssetId = row.assetCode
|
||
},
|
||
|
||
/** 详情按钮操作 */
|
||
handleDetail(row) {
|
||
this.detailOpen = true
|
||
this.detailTitle = '资产详情'
|
||
this.currentAssetId = row.assetCode
|
||
},
|
||
|
||
/** 删除按钮操作 */
|
||
handleDelete(row) {
|
||
this.$confirm('是否确认删除资产编码为"' + row.assetCode + '"的数据项?', '警告', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
return deleteAsset(row.assetCode)
|
||
}).then(response => {
|
||
if (response.code === API_SUCCESS_CODE) {
|
||
this.$message.success('删除成功')
|
||
this.getList()
|
||
}
|
||
}).catch(() => {})
|
||
},
|
||
|
||
/** 批量删除按钮操作 */
|
||
handleBatchDelete() {
|
||
const assetCodes = this.selectedRows.map(item => item.assetCode)
|
||
if (assetCodes.length === 0) {
|
||
this.$message.warning('请至少选择一条记录')
|
||
return
|
||
}
|
||
|
||
this.$confirm('是否确认批量删除选中的' + assetCodes.length + '条数据?', '警告', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
return deleteAssets(assetCodes)
|
||
}).then(response => {
|
||
if (response.code === API_SUCCESS_CODE) {
|
||
this.$message.success('批量删除成功')
|
||
this.getList()
|
||
}
|
||
}).catch(() => {})
|
||
},
|
||
|
||
/** 导出按钮操作 */
|
||
handleExport() {
|
||
const queryParams = { ...this.queryParams }
|
||
queryParams.pageNum = undefined
|
||
queryParams.pageSize = undefined
|
||
|
||
this.$confirm('是否确认导出所有资产数据项?', '警告', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.exportLoading = true
|
||
return exportAsset(queryParams)
|
||
}).then(response => {
|
||
this.download(response, '资产数据.xlsx')
|
||
this.exportLoading = false
|
||
}).catch(() => {
|
||
this.exportLoading = false
|
||
})
|
||
},
|
||
|
||
/** 下载模板操作 */
|
||
downloadImportTemplate() {
|
||
downloadTemplate().then(response => {
|
||
this.download(response, '资产导入模板.xlsx')
|
||
})
|
||
},
|
||
|
||
/** 导入按钮操作 */
|
||
handleImport() {
|
||
this.upload.open = true
|
||
this.importTitle = '导入资产数据'
|
||
},
|
||
|
||
/** 处理文件上传中 */
|
||
handleFileUploadProgress() {
|
||
this.upload.isUploading = true
|
||
},
|
||
|
||
/** 文件上传成功处理 */
|
||
handleFileSuccess(response) {
|
||
this.upload.isUploading = false
|
||
this.$refs.upload.clearFiles()
|
||
this.upload.open = false
|
||
if (response.code === API_SUCCESS_CODE) {
|
||
this.$alert(`成功导入${response.data && response.data.successCount ? response.data.successCount : 0}条数据`, { type: 'success' })
|
||
this.getList()
|
||
} else {
|
||
// 如果是文件流，则下载错误文件
|
||
this.$alert(response.msg || '导入失败，正在下载错误文件', '导入结果', { type: 'error' })
|
||
this.download(response, `资产导入错误文件_${new Date().getTime()}.xlsx`)
|
||
}
|
||
},
|
||
|
||
/** 提交上传文件 */
|
||
submitFileForm() {
|
||
this.$refs.upload.submit()
|
||
},
|
||
|
||
/** 打印标签 */
|
||
handlePrint() {
|
||
if (this.ids.length === 0) {
|
||
this.$message.warning('请选择要打印的资产')
|
||
return
|
||
}
|
||
|
||
// 从选中的列表项中获取相关数据
|
||
this.assetsToPrint = this.assetList.filter(item => this.ids.includes(item.id || item.assetId))
|
||
|
||
// 直接调用浏览器打印功能
|
||
this.$nextTick(() => {
|
||
// const printWindow = window.open('', '_blank')
|
||
// if (!printWindow) {
|
||
// this.$message.error('打印窗口被阻止，请允许弹出窗口')
|
||
// return
|
||
// }
|
||
|
||
// 获取打印内容
|
||
const printContent = this.$refs.assetLabelPrint.getPrintContent(this.assetsToPrint)
|
||
|
||
// 写入打印窗口
|
||
printWindow.document.open()
|
||
printWindow.document.write(printContent)
|
||
printWindow.document.close()
|
||
|
||
// 等待资源加载完成后打印
|
||
printWindow.onload = function() {
|
||
printWindow.print()
|
||
// 打印完成后关闭窗口
|
||
printWindow.close()
|
||
}
|
||
})
|
||
},
|
||
|
||
/** 打印单个资产标签 */
|
||
handlePrintSingle(row) {
|
||
this.ids = [row.id || row.assetId]
|
||
this.assetsToPrint = [row]
|
||
this.handlePrint()
|
||
},
|
||
|
||
/** 分页大小改变 */
|
||
handleSizeChange(val) {
|
||
this.queryParams.pageSize = val
|
||
this.getList()
|
||
},
|
||
|
||
/** 分页页码改变 */
|
||
handleCurrentChange(val) {
|
||
this.queryParams.pageNum = val
|
||
this.getList()
|
||
},
|
||
|
||
/** 获取分类名称 */
|
||
getClassificationName(classificationId) {
|
||
if (!classificationId) return '未知分类'
|
||
|
||
// 递归查找分类
|
||
const findClassification = (items) => {
|
||
for (const item of items) {
|
||
if (item.id === classificationId) {
|
||
return item.name
|
||
}
|
||
if (item.children && item.children.length > 0) {
|
||
const found = findClassification(item.children)
|
||
if (found) return found
|
||
}
|
||
}
|
||
return null
|
||
}
|
||
|
||
const name = findClassification(this.classificationOptions)
|
||
return name || '未知分类'
|
||
},
|
||
|
||
/** 获取位置名称 */
|
||
getLocationName(locationId) {
|
||
if (!locationId) return '未知位置'
|
||
|
||
// 递归查找位置
|
||
const findLocation = (items) => {
|
||
for (const item of items) {
|
||
if (item.id === locationId) {
|
||
return item.name
|
||
}
|
||
if (item.children && item.children.length > 0) {
|
||
const found = findLocation(item.children)
|
||
if (found) return found
|
||
}
|
||
}
|
||
return null
|
||
}
|
||
|
||
const name = findLocation(this.locationOptions)
|
||
return name || '未知位置'
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.app-container {
|
||
.el-table {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.el-form {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.el-checkbox + .el-checkbox {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
</style> |