You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1230 lines
36 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="98px"
>
<el-form-item label="备品备件号" prop="materialCode">
<el-input
v-model="queryParams.materialCode"
placeholder="请输入备品备件号"
clearable
@keyup.enter.native="handleQuery"
style="width: 150px"
/>
</el-form-item>
<el-form-item label="备品备件名称" prop="materialDesc">
<el-input
v-model="queryParams.materialDesc"
placeholder="请输入备品备件名称"
clearable
@keyup.enter.native="handleQuery"
style="width: 150px"
/>
</el-form-item>
<el-form-item label="设备厂家" prop="spareSupplier">
<el-input
v-model="queryParams.spareSupplier"
placeholder="请输入设备厂家"
clearable
@keyup.enter.native="handleQuery"
style="width: 150px"
/>
</el-form-item>
<el-form-item label="所属设备名称" prop="ownEquipmentName">
<el-input
v-model="queryParams.ownEquipmentName"
placeholder="请输入所属设备名称"
clearable
@keyup.enter.native="handleQuery"
style="width: 150px"
/>
</el-form-item>
<el-form-item label="出入库日期">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item label="低于安全库存" prop="isLow">
<el-select v-model="queryParams.isLow" placeholder="数据状态" clearable>
<el-option
v-for="dict in dict.type.safety_stock"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<!-- <el-form-item label="备件类型" prop="spareType">
<el-select
v-model="queryParams.spareType"
placeholder="请选择备件类型"
@keyup.enter.native="handleQuery"
@change="$forceUpdate()"
clearable
style="width: 150px"
>
<el-option
v-for="item in options"
:key="item.spareType"
:label="item.label"
:value="item.spareType"
></el-option>
</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" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['device:sparePartsLedger:add']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['device:sparePartsLedger:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['device:sparePartsLedger:remove']"
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['device:sparePartsLedger:export']"
>导出</el-button
>
</el-col>
<el-col :span="1.5">
<div>
<el-button
type="warning"
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
v-hasPermi="['device:sparePartsLedger:import']"
>导入</el-button
>
</div>
</el-col>
<el-col :span="1.5">
<div>
<el-button
type="primary"
plain
size="mini"
:disabled="single"
@click="showPrint"
v-hasPermi="['device:sparePartsLedger:print']"
>
<svg-icon icon-class="print" />
打印
</el-button>
</div>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="sparePartsLedgerList"
:cell-style="rowStyle"
@selection-change="handleSelectionChange"
>
<!-- 序号 -->
<el-table-column type="selection" width="55" align="center" />
<!-- 序号 -->
<el-table-column
type="index"
width="90"
align="center"
:index="indexMethod"
label="序号"
/>
<!-- 缺了所属设备编码、设备数量、所在产线 -->
<el-table-column
label="备品备件号"
align="center"
prop="materialCode"
width="150"
/>
<el-table-column
label="备品备件名称"
align="center"
prop="materialDesc"
width="120"
/>
<el-table-column
label="库位编码"
align="center"
prop="wlCode"
width="120"
/>
<el-table-column
label="所属设备名称"
align="center"
prop="ownEquipmentName"
width="120"
/>
<!-- 供应商字段里 设备厂家 -->
<el-table-column
label="设备厂家"
align="center"
prop="spareSupplier"
width="250"
/>
<el-table-column
label="规格型号"
align="center"
prop="spareMode"
width="200"
/>
<el-table-column
width="120"
label="备件类型"
align="center"
prop="spareType"
>
<template slot-scope="scope">
<dict-tag
:options="dict.type.spare_part_type"
:value="scope.row.spareType"
/>
</template>
</el-table-column>
<el-table-column
width="120"
label="备件品类"
align="center"
prop="spareCategory"
>
<template slot-scope="scope">
<dict-tag
:options="categoryList"
:value="scope.row.spareCategory"
/>
</template>
</el-table-column>
<el-table-column
label="单机装配数量"
align="center"
prop="unitQuantity"
width="100"
/>
<el-table-column
label="单价"
align="center"
prop="unitPrice"
width="80"
/>
<el-table-column
label="单位"
align="center"
prop="userDefined1"
width="80"
/>
<el-table-column
label="代用件"
align="center"
prop="substituteParts"
width="80"
/>
<el-table-column
label="安全库存"
align="center"
prop="safeStock"
width="80"
/>
<el-table-column
label="现有库存"
align="center"
prop="amount"
width="80"
/>
<el-table-column
label="采购方式"
align="center"
prop="procurementMethod"
width="150"
/>
<!-- 生产厂商暂时没有用 -->
<!-- <el-table-column label="生产厂商" align="center" prop="spareManufacturer" width="200"/> -->
<el-table-column
label="更换周期(月)"
align="center"
prop="spareReplacementCycle"
width="120"
/>
<el-table-column
label="采购周期(天)"
align="center"
prop="procurementCycle"
width="120"
/>
<el-table-column label="期初结存" align="center" prop="openingBalance" />
<el-table-column label="入库记录" align="center" prop="inputRecords" />
<el-table-column label="出库记录" align="center" prop="outputRecords" />
<el-table-column label="期末盘点" align="center" prop="endInventory" />
<el-table-column label="期末金额" align="center" prop="endMoney" />
<!-- <el-table-column
label="备品备件类型"
align="center"
prop="spareType"
width="120"
/>
<el-table-column
label="计量单位"
align="center"
prop="spareMeasurementUnit"
/>
<el-table-column
label="换算单位"
align="center"
prop="spareConversionUnit"
/>
<el-table-column
label="换算比例"
align="center"
prop="spareConversionRatio"
/>
<el-table-column
label="库存上限"
align="center"
prop="spareInventoryFloor"
/>
<el-table-column
label="库存下限"
align="center"
prop="spareInventoryUpper"
/> -->
<!-- <el-table-column
v-if="false"
label="工厂号"
align="center"
prop="factoryCode"
/> -->
<el-table-column label="创建人" align="center" prop="createBy" />
<el-table-column
label="创建时间"
align="center"
prop="gmtCreate"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.gmtCreate, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column
label="最后更新人"
align="center"
prop="lastModifiedBy"
width="100"
/>
<el-table-column
label="最后更新时间"
align="center"
prop="gmtModified"
width="200"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.gmtModified, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['device:sparePartsLedger:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['device:sparePartsLedger:remove']"
>删除</el-button>
</template>
</el-table-column> -->
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<el-dialog :title="printTitle" :visible.sync="printOpen" width="500px" append-to-body>
<div class="center-content" id="printFrom">
<canvas ref="qrCanvas"></canvas>
<ul class="no-bullets">
<li class="material-info">{{printData.materialCode}}</li>
<li class="material-info">{{printData.materialDesc}}</li>
</ul>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handlePrint(printData)">确 定</el-button>
</div>
</el-dialog>
<!-- 添加或修改备品备件台账管理对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row :gutter="10" class="mb8">
<el-col :span="12">
<el-form-item label="备件编码" prop="materialCode">
<el-input
v-model="form.materialCode"
placeholder="请输入备件编码"
style="width: 250px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备件名称" prop="materialDesc">
<el-input
v-model="form.materialDesc"
placeholder="请输入备件名称"
style="width: 250px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备件类型" prop="spareType">
<el-select v-model="form.spareType" placeholder="备件类型" clearable @change="changeType">
<el-option
v-for="dict in dict.type.spare_part_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备件品类" prop="spareCategory">
<el-select v-model="form.spareCategory" placeholder="备件品类" clearable>
<el-option
v-for="dict in categoryList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="库位编码" prop="wlCode">
<el-input
v-model="form.wlCode"
placeholder="请输入库位编码"
style="width: 250px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属设备编码" prop="ownEquipmentCode">
<el-input
v-model="form.ownEquipmentCode"
placeholder="请输入所属设备编码"
style="width: 250px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属设备名称" prop="ownEquipmentName">
<el-input
v-model="form.ownEquipmentName"
placeholder="请输入所属设备名称"
style="width: 250px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<!-- 原来的供应商 现在的设备厂商-->
<el-form-item label="设备厂商" prop="spareSupplier">
<el-input
v-model="form.spareSupplier"
placeholder="请输入设备厂商"
style="width: 250px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="规格型号" prop="spareMode">
<el-input
v-model="form.spareMode"
placeholder="请输入规格型号"
style="width: 250px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<!-- <el-form-item label="备件名称" prop="spareName">
<el-input v-model="form.spareName" placeholder="请输入备件名称" />
</el-form-item> -->
<!-- <el-form-item label="生产厂商" prop="spareManufacturer">
<el-input v-model="form.spareManufacturer" placeholder="请输入生产厂商" />
</el-form-item> -->
<!-- <el-form-item label="供应商" prop="spareSupplier">
<el-input v-model="form.spareSupplier" placeholder="请输入供应商" />
</el-form-item> -->
<el-form-item label="单机装配数量" prop="unitQuantity">
<el-input
v-model="form.unitQuantity"
placeholder="请输入单机装配数量"
style="width: 250px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单价" prop="unitPrice">
<el-input-number
:min="0"
:step="1"
v-model="form.unitPrice"
placeholder="请输入单价"
style="width: 250px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单位" prop="userDefined1">
<el-input
v-model="form.userDefined1"
placeholder="请输入单位"
style="width: 250px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="代用件" prop="substituteParts">
<el-input
v-model="form.substituteParts"
placeholder="请输入代用件"
style="width: 250px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="现有库存" prop="amount">
<el-input-number
:min="0"
:step="1"
v-model="form.amount"
placeholder="请输入现有库存"
style="width: 250px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="安全库存" prop="safeStock">
<el-input
v-model="form.safeStock"
placeholder="请输入安全库存"
style="width: 250px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="采购方式" prop="procurementMethod">
<el-input
v-model="form.procurementMethod"
placeholder="请输入采购方式"
style="width: 250px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="更换周期(月)" prop="spareReplacementCycle">
<el-input
v-model="form.spareReplacementCycle"
placeholder="请输入更换周期"
style="width: 250px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="采购周期(天)" prop="procurementCycle">
<el-input
v-model="form.procurementCycle"
placeholder="请输入采购周期"
style="width: 250px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="期初结存" prop="openingBalance">
<el-input
v-model="form.openingBalance"
placeholder="请输入期初结存"
style="width: 250px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="入库记录" prop="inputRecords">
<el-input
v-model="form.inputRecords"
placeholder="请输入入库记录"
style="width: 250px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出库记录" prop="outputRecords">
<el-input
v-model="form.outputRecords"
placeholder="请输入出库记录"
style="width: 250px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="期末盘点" prop="endInventory">
<el-input
v-model="form.endInventory"
placeholder="请输入期末盘点"
style="width: 250px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="期末金额" prop="endMoney">
<el-input-number
:min="0"
:step="1"
v-model="form.endMoney"
placeholder="请输入期末金额"
style="width: 250px"
/>
</el-form-item>
</el-col>
</el-row>
<!-- <el-form-item label="使用寿命" prop="spareUseLife">
<el-input v-model="form.spareUseLife" placeholder="请输入使用寿命" />
</el-form-item>
<el-form-item label="循环周期" prop="spareReplacementCycle">
<el-input v-model="form.spareReplacementCycle" placeholder="请输入循环周期" />
</el-form-item> -->
<!--
<el-form-item label="计量单位" prop="spareMeasurementUnit">
<el-input v-model="form.spareMeasurementUnit" placeholder="请输入计量单位" />
</el-form-item>
<el-form-item label="换算单位" prop="spareConversionUnit">
<el-input v-model="form.spareConversionUnit" placeholder="请输入换算单位" />
</el-form-item>
<el-form-item label="换算比例" prop="spareConversionRatio">
<el-input v-model="form.spareConversionRatio" placeholder="请输入换算比例" />
</el-form-item>
<el-form-item label="库存上限" prop="spareInventoryFloor">
<el-input v-model="form.spareInventoryFloor" placeholder="请输入库存上限" />
</el-form-item>
<el-form-item label="库存下限" prop="spareInventoryUpper">
<el-input v-model="form.spareInventoryUpper" placeholder="请输入库存下限" />
</el-form-item> -->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 用户导入对话框 -->
<el-dialog
:title="upload.title"
:visible.sync="upload.open"
width="400px"
append-to-body
>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
: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 text-center" slot="tip">
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link
type="primary"
:underline="false"
style="font-size: 12px; vertical-align: baseline"
@click="importTemplate"
>下载模板
</el-link>
</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>
</div>
</template>
<script>
import {
listSparePartsLedger,
getSparePartsLedger,
delSparePartsLedger,
addSparePartsLedger,
updateSparePartsLedger,
} from "@/api/device/sparePartsLedger";
import { getToken } from "@/utils/auth";
import QRCode from 'qrcode';
import dict from "@/utils/dict";
export default {
name: "SparePartsLedger",
dicts: ['safety_stock', 'spare_part_type', 'fastening_sealing_parts','general_pipeline_parts','process_consumables','electric_control','pneumatic_components','hydraulic_components','power_transmission_parts', 'spare_part_type_other'],
data() {
return {
// 导入数据
upload: {
// 是否显示弹出层(用户导入)
open: false,
// 弹出层标题(用户导入)
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: {
poolName: localStorage.getItem("USER_POOL_NAME_CURRENT"),
Authorization: "Bearer " + getToken(),
},
// 上传的地址
url:
process.env.VUE_APP_BASE_API + "/device/sparePartsLedger/importFile",
},
selectedRow: null,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 备品备件台账管理表格数据
sparePartsLedgerList: [],
// 弹出层标题
title: "",
//打印弹出层标题
printTitle:"",
// 是否显示弹出层
open: false,
//是否显示打印弹出层
printOpen: false,
// 打印
printData: {
printable: 'printFrom',
ignore: ['no-print'],
workCenter: "暂无数据",
SAPNo: null,
manufacture: null,
auditor: null,
printDate: null,
factory: null,
productDate: null,
workTable: [],
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
storageId: null,
whCode: null,
regionCode: null,
waCode: null,
storageType: null,
wlCode: null,
materialCode: null,
materialDesc: null,
amount: null,
storageAmount: null,
occupyAmount: null,
lpn: null,
productBatch: null,
receiveDate: null,
productDate: null,
userDefined1: null,
userDefined2: null,
userDefined3: null,
userDefined4: null,
userDefined5: null,
userDefined6: null,
userDefined7: null,
userDefined8: null,
userDefined9: null,
userDefined10: null,
gmtCreate: null,
lastModifiedBy: null,
gmtModified: null,
activeFlag: null,
factoryCode: null,
sapFactoryCode: null,
wlName: null,
spareUseLife: null,
spareName: null,
spareMode: null,
spareManufacturer: null,
spareSupplier: null,
spareReplacementCycle: null,
spareMeasurementUnit: null,
spareConversionUnit: null,
spareConversionRatio: null,
spareInventoryFloor: null,
spareInventoryUpper: null,
ownEquipmentName: null,
ownEquipmentCode: null,
unitPrice: null,
procurementMethod: null,
isLow: null,
},
// 日期范围
dateRange: [],
options: [
{
spareType: "专用",
label: "专用",
},
{
spareType: "通用",
label: "通用",
},
],
// 表单参数
form: {},
// 表单校验
rules: {
materialCode: [
{ required: true, message: "备品备件编码不能为空", trigger: "blur" },
],
materialDesc: [
{ required: true, message: "备品备件名称不能为空", trigger: "blur" },
],
amount: [
{ required: true, message: "库存数量不能为空", trigger: "blur" },
],
procurementMethod: [
{ required: true, message: "采购方式不能为空", trigger: "blur" },
],
spareType: [
{ required: true, message: "备件类型不能为空", trigger: "blur" },
],
spareCategory: [
{ required: true, message: "备件品类不能为空", trigger: "blur" },
],
wlCode: [
{ required: true, message: "库位不能为空", trigger: "blur" },
{ validator: this.validateWlCodeBlur, trigger: ["blur"] }
],
},
categoryList:[]
};
},
created() {
this.getList();
},
mounted(){
this.$nextTick(() => {
this.initCategoryList();
});
},
methods: {
dict,
validateWlCodeBlur(rule, value, callback){
if (typeof value !== 'string') {
callback(new Error('请输入正确的库位编码'));
}else {
const reg = /^[a-zA-Z0-9]+$/;
if (reg.test(value)){
callback();
}else {
callback(new Error('请输入正确的库位编码'));
}
}
},
// 生成表头序号
indexMethod(index) {
return index + 1;
},
rowStyle({ row }) {
if (row.amount < row.safeStock) {
return {
backgroundColor: 'rgba(255, 0, 0, 0.1)',
color: '#ff0000'
}
}
},
/** 查询备品备件台账管理列表 */
getList() {
this.loading = true;
listSparePartsLedger(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
this.sparePartsLedgerList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
storageId: null,
whCode: null,
regionCode: null,
waCode: null,
storageType: null,
wlCode: null,
materialCode: null,
materialDesc: null,
amount: null,
storageAmount: null,
occupyAmount: null,
lpn: null,
productBatch: null,
receiveDate: null,
productDate: null,
userDefined1: null,
userDefined2: null,
userDefined3: null,
userDefined4: null,
userDefined5: null,
userDefined6: null,
userDefined7: null,
userDefined8: null,
userDefined9: null,
userDefined10: null,
createBy: null,
gmtCreate: null,
lastModifiedBy: null,
gmtModified: null,
activeFlag: null,
factoryCode: null,
sapFactoryCode: null,
wlName: null,
delFlag: null,
spareUseLife: null,
spareName: null,
spareMode: null,
spareManufacturer: null,
spareSupplier: null,
spareReplacementCycle: null,
spareMeasurementUnit: null,
spareConversionUnit: null,
spareConversionRatio: null,
spareInventoryFloor: null,
spareInventoryUpper: null,
unitPrice: null,
procurementMethod: null,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.storageId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加备品备件台账管理";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const storageId = row.storageId || this.ids;
getSparePartsLedger(storageId).then((response) => {
this.form = response.data;
this.open = true;
this.title = "修改备品备件台账管理";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
this.form.spareName = this.form.materialDesc;
if (this.form.storageId != null) {
updateSparePartsLedger(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addSparePartsLedger(this.form).then((response) => {
if(response.code == 500){
this.$modal.msg(response.msg);
}else{
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const storageIds = row.storageId || this.ids;
this.$modal
.confirm(
'是否确认删除备品备件台账管理编号为"' + storageIds + '"的数据项?'
)
.then(function () {
return delSparePartsLedger(storageIds);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"device/sparePartsLedger/export",
{
...this.queryParams,
},
`sparePartsLedger_${new Date().getTime()}.xlsx`
);
},
showPrint(row) {
const storageId = row.storageId || this.ids;
getSparePartsLedger(storageId).then((response) => {
this.reset();
this.printData = response.data;
this.printOpen = true;
// 使用 Vue 的 nextTick 来确保 DOM 已经更新
this.$nextTick(() => {
const canvas = this.$refs.qrCanvas;
const options = {
width: 200, // 设定二维码的宽度
height: 200 // 设定二维码的高度
};
QRCode.toCanvas(canvas,response.data.materialCode, options, error => {
if (error) console.error(error);
});
});
});
},
// 打印
handlePrint(params) {
console.log(params)
printJS({
printable: params.printable || 'printFrom', // 标签元素id
type: params.type || 'html',
maxWidth: 1500, // 最大宽度
font_size: "",// 设置字体大小
header: params.header, // '表单',
targetStyles: ['*'],
style: '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾
ignoreElements: params.ignore || [], // ['no-print']
properties: params.properties || null
})
},
// 导入-导入窗口打开
handleImport() {
this.upload.title = "设备信息导入";
this.upload.open = true;
},
// 导入-文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 导入-文件上传成功处理
handleFileSuccess(response, file, fileList) {
debugger;
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert(
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
response.msg +
"</div>",
"导入结果",
{ dangerouslyUseHTMLString: true }
);
this.getList();
},
// 导入-提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
// 导入-下载模板
importTemplate() {
this.download(
"/device/sparePartsLedger/importTemplate",
{},
`sparePartsLedger_template_${new Date().getTime()}.xlsx`
);
},
initCategoryList(){
// 同时监听两个字典,任意一个变化都会触发回调
this.$watch(
() => [
this.dict.type.power_transmission_parts,
this.dict.type.hydraulic_components,
this.dict.type.pneumatic_components,
this.dict.type.electric_control,
this.dict.type.process_consumables,
this.dict.type.general_pipeline_parts,
this.dict.type.fastening_sealing_parts,
this.dict.type.spare_part_type_other
],
([val1, val2, val3, val4, val5, val6, val7, val8]) => {
// 确保两个字典都已加载完成非undefined
if (val1 && val2 && val3 && val4 && val5 && val6 && val7 && val8) {
this.categoryList = [
...val1,
...val2,
...val3,
...val4,
...val5,
...val6,
...val7,
...val8
]
}
},
{ immediate: true, deep: true }
);
},
changeType(res){
if (!res){
this.initCategoryList()
this.form.spareCategory = ''
}else {
this.categoryList = this.dict.type[res]
}
},
},
};
</script>
<style scoped>
.center-content {
display: flex;
flex-direction: column;
align-items: center;
}
.material-info {
font-size: 25px;
font-weight: bold;
line-height: 1.2;
padding: 2px 0;
}
.no-bullets {
list-style: none;
padding: 0;
text-align: center; /* 使 ul 中的所有 li 居中 */
}
@media print {
#printFrom{
font-family: "SimSun", "宋体" !important;
color: #000 !important;
font-size: 14pt !important; /* 调整字体大小 */
}
}
</style>