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.

596 lines
26 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="100px">
<el-form-item label="入库时间" prop="warehouseDate">
<el-input
v-model="queryParams.warehouseDate"
placeholder="请输入入库时间"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="采购方式" prop="purchaseMethod">
<el-input
v-model="queryParams.purchaseMethod"
placeholder="请输入采购方式"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="库存位置" prop="storageLocation">
<el-input
v-model="queryParams.storageLocation"
placeholder="请输入库存位置"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="物品名称" prop="itemName">
<el-input
v-model="queryParams.itemName"
placeholder="请输入物品名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="原厂编号" prop="originalPartNumber">
<el-input
v-model="queryParams.originalPartNumber"
placeholder="请输入原厂编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="型号" prop="model">
<el-input
v-model="queryParams.model"
placeholder="请输入型号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="入库数量" prop="warehouseQuantity">
<el-input
v-model="queryParams.warehouseQuantity"
placeholder="请输入入库数量"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="剩余数量" prop="remainingQuantity">
<el-input
v-model="queryParams.remainingQuantity"
placeholder="请输入剩余数量"
clearable
@keyup.enter.native="handleQuery"
/>
</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="['ems/info:sparePartsInventory: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="['ems/info:sparePartsInventory: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="['ems/info:sparePartsInventory: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="['ems/info:sparePartsInventory:export']"
>导出</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
v-hasPermi="['ems/info:sparePartsInventory:add']"
>导入</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="sparePartsInventoryList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键" align="center" prop="objid" v-if="columns[0].visible"/>
<el-table-column label="入库时间" align="center" prop="warehouseDate" v-if="columns[1].visible"/>
<el-table-column label="采购方式" align="center" prop="purchaseMethod" v-if="columns[2].visible"/>
<el-table-column label="库存位置" align="center" prop="storageLocation" v-if="columns[3].visible"/>
<el-table-column label="物品名称" align="center" prop="itemName" v-if="columns[4].visible"/>
<el-table-column label="原厂编号" align="center" prop="originalPartNumber" v-if="columns[5].visible"/>
<el-table-column label="型号" align="center" prop="model" v-if="columns[6].visible"/>
<el-table-column label="入库数量" align="center" prop="warehouseQuantity" v-if="columns[7].visible"/>
<el-table-column label="剩余数量" align="center" prop="remainingQuantity" v-if="columns[8].visible"/>
<el-table-column label="备注" align="center" prop="remarks" v-if="columns[9].visible"/>
<!-- 动态盘点列 -->
<el-table-column
v-for="(checkColumn, index) in dynamicColumns"
:key="'check_' + index"
:label="checkColumn"
align="center"
width="120">
<template slot-scope="scope">
<span>{{ getCheckValue(scope.row, checkColumn) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['ems/info:sparePartsInventory:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['ems/info:sparePartsInventory: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="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="入库时间" prop="warehouseDate">
<el-date-picker
v-model="form.warehouseDate"
type="date"
placeholder="请选择入库时间"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="采购方式" prop="purchaseMethod">
<el-input v-model="form.purchaseMethod" placeholder="请输入采购方式" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="库存位置" prop="storageLocation">
<el-input v-model="form.storageLocation" placeholder="请输入库存位置" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="物品名称" prop="itemName">
<el-input v-model="form.itemName" placeholder="请输入物品名称" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="原厂编号" prop="originalPartNumber">
<el-input v-model="form.originalPartNumber" placeholder="请输入原厂编号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="型号" prop="model">
<el-input v-model="form.model" placeholder="请输入型号" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="入库数量" prop="warehouseQuantity">
<el-input v-model="form.warehouseQuantity" placeholder="请输入入库数量" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="剩余数量" prop="remainingQuantity">
<el-input v-model="form.remainingQuantity" placeholder="请输入剩余数量" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="备注" prop="remarks">
<el-input v-model="form.remarks" type="textarea" placeholder="请输入内容" />
</el-form-item>
<!-- 盘点记录部分 -->
<el-divider content-position="left">盘点记录</el-divider>
<div style="margin-bottom: 10px;">
<el-button
type="primary"
size="small"
icon="el-icon-plus"
@click="addCheckRecord"
>添加盘点记录</el-button>
</div>
<el-table
:data="form.checkData"
border
style="width: 100%; margin-bottom: 20px;"
max-height="300"
>
<el-table-column label="盘点名称" width="200">
<template slot-scope="scope">
<el-input
v-model="scope.row.checkName"
placeholder="如: 2023.3盘点"
size="small"
/>
</template>
</el-table-column>
<el-table-column label="盘点数量" width="150">
<template slot-scope="scope">
<el-input-number
v-model="scope.row.checkQuantity"
:min="0"
size="small"
style="width: 100%"
/>
</template>
</el-table-column>
<el-table-column label="操作" width="80">
<template slot-scope="scope">
<el-button
type="danger"
size="mini"
icon="el-icon-delete"
@click="removeCheckRecord(scope.$index)"
></el-button>
</template>
</el-table-column>
</el-table>
</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>
</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 {
listSparePartsInventoryWithDynamicColumns,
getSparePartsInventoryWithDynamicColumns,
delSparePartsInventory,
addSparePartsInventoryWithDynamicColumns,
updateSparePartsInventoryWithDynamicColumns,
getDynamicColumns
} from "@/api/ems/info/sparePartsInventory";
export default {
name: "SparePartsInventory",
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 备件库记录主表格数据
sparePartsInventoryList: [],
// 动态列
dynamicColumns: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
warehouseDate: null,
purchaseMethod: null,
storageLocation: null,
itemName: null,
originalPartNumber: null,
model: null,
warehouseQuantity: null,
remainingQuantity: null,
remarks: null
},
// 表单参数
form: {},
// 表单校验
rules: {
warehouseDate: [
{ required: true, message: "入库时间不能为空", trigger: "blur" }
],
},
columns: [
{ key: 0, label: `主键`, visible: false },
{ key: 1, label: `入库时间`, visible: true },
{ key: 2, label: `采购方式`, visible: true },
{ key: 3, label: `库存位置`, visible: true },
{ key: 4, label: `物品名称`, visible: true },
{ key: 5, label: `原厂编号`, visible: true },
{ key: 6, label: `型号`, visible: true },
{ key: 7, label: `入库数量`, visible: true },
{ key: 8, label: `剩余数量`, visible: true },
{ key: 9, label: `备注`, visible: true },
],
upload: {
title: "导入备件库记录",
open: false,
url: "",
updateSupport: false,
isUploading: false,
headers: {}
}
};
},
created() {
this.getList();
this.getDynamicColumnsList();
this.upload.url = process.env.VUE_APP_BASE_API + "/ems/info/sparePartsInventory/importData";
this.upload.headers = { Authorization: "Bearer " + this.$store.getters.token };
},
methods: {
/** 查询备件库记录主列表 */
getList() {
this.loading = true;
listSparePartsInventoryWithDynamicColumns(this.queryParams).then(response => {
this.sparePartsInventoryList = response.rows;
this.total = response.total;
this.loading = false;
});
},
/** 获取动态列列表 */
getDynamicColumnsList() {
getDynamicColumns().then(response => {
this.dynamicColumns = response.data || [];
});
},
/** 获取盘点值 */
getCheckValue(row, checkName) {
if (row.checkData && row.checkData[checkName] !== undefined && row.checkData[checkName] !== null) {
return row.checkData[checkName];
}
return '';
},
/** 添加盘点记录 */
addCheckRecord() {
if (!this.form.checkData) {
this.form.checkData = [];
}
this.form.checkData.push({
checkName: '',
checkQuantity: 0
});
},
/** 删除盘点记录 */
removeCheckRecord(index) {
this.form.checkData.splice(index, 1);
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
objid: null,
warehouseDate: null,
purchaseMethod: null,
storageLocation: null,
itemName: null,
originalPartNumber: null,
model: null,
warehouseQuantity: null,
remainingQuantity: null,
remarks: null,
checkData: []
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.objid)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加备件库记录主";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const objid = row.objid || this.ids
getSparePartsInventoryWithDynamicColumns(objid).then(response => {
this.form = response.data;
// 处理盘点数据
if (this.form.checkData && typeof this.form.checkData === 'object') {
// 将对象转换为数组
this.form.checkData = Object.keys(this.form.checkData).map(key => ({
checkName: key,
checkQuantity: this.form.checkData[key]
}));
} else {
this.form.checkData = [];
}
this.open = true;
this.title = "修改备件库记录主";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
// 转换盘点数据格式
const submitData = { ...this.form };
if (submitData.checkData && Array.isArray(submitData.checkData)) {
const checkDataObj = {};
submitData.checkData.forEach(item => {
if (item.checkName && item.checkName.trim() !== '') {
// 确保数量为Long类型JavaScript中所有数字都是Number类型
checkDataObj[item.checkName] = item.checkQuantity || 0;
}
});
submitData.checkData = checkDataObj;
}
if (this.form.objid != null) {
updateSparePartsInventoryWithDynamicColumns(submitData).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
this.getDynamicColumnsList();
});
} else {
addSparePartsInventoryWithDynamicColumns(submitData).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
this.getDynamicColumnsList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const objids = row.objid || this.ids;
this.$modal.confirm('是否确认删除备件库记录主编号为"' + objids + '"的数据项?').then(function() {
return delSparePartsInventory(objids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('ems/info/sparePartsInventory/export', {
...this.queryParams
}, `sparePartsInventory_${new Date().getTime()}.xlsx`)
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = "导入备件库记录";
this.upload.open = true;
},
/** 下载模板操作 */
importTemplate() {
this.download('ems/info/sparePartsInventory/importTemplate', {
}, `备件库记录数据模板_${new Date().getTime()}.xlsx`)
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
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();
this.getDynamicColumnsList();
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
}
}
};
</script>