<template>
|
<flex-layout>
|
<div class="table-layout filter-box-table" slot="header">
|
<div class="table-row">
|
<div class="table-cell text-right">入库时间:</div>
|
<div class="table-cell">
|
<el-date-picker
|
v-model="time_start"
|
size="small"
|
class="time_box"
|
:picker-options="pickerOptions0"
|
type="date"
|
placeholder="选择日期"
|
value-format="yyyy-MM-dd"
|
></el-date-picker>
|
-
|
<el-date-picker
|
v-model="time_end"
|
size="small"
|
class="time_box"
|
:picker-options="pickerOptions1"
|
type="date"
|
placeholder="选择日期"
|
value-format="yyyy-MM-dd"
|
></el-date-picker>
|
</div>
|
<div class="table-cell text-right">品牌:</div>
|
<div class="table-cell">
|
<el-select
|
v-model="batt_Producer"
|
:filterable="true"
|
size="small"
|
>
|
<el-option label="全部" value=""></el-option>
|
<el-option
|
v-for="item in battProducerList"
|
:key="item"
|
:label="item"
|
:value="item"
|
></el-option>
|
</el-select>
|
</div>
|
<div class="table-cell text-right">型号:</div>
|
<div class="table-cell">
|
<el-input
|
v-model="BattModel"
|
size="small"
|
placeholder="请输入型号"
|
></el-input>
|
</div>
|
<div class="table-cell text-right">库存:</div>
|
<div class="table-cell">
|
<el-select
|
v-model="mon_count"
|
:filterable="true"
|
size="small"
|
>
|
<!-- <el-option label="全部" value=""></el-option> -->
|
<el-option
|
v-for="(item, idx) in inventoryTypeList"
|
:key="'inventory_' + idx"
|
:label="item.label"
|
:value="item.id"
|
></el-option>
|
</el-select>
|
</div>
|
<div class="table-cell text-right">包机组:</div>
|
<div class="table-cell">
|
<el-select
|
v-model="batt_baoji"
|
:filterable="true"
|
size="small"
|
>
|
<el-option label="全部" value=""></el-option>
|
<el-option
|
v-for="(item, idx) in baoji_group_list"
|
:key="'filter_baoji_' + idx"
|
:label="item.baoji_group_name"
|
:value="item.baoji_group_id"
|
></el-option>
|
</el-select>
|
</div>
|
</div>
|
</div>
|
<div class="flex-page-content">
|
<el-table
|
stripe
|
size="mini"
|
header-row-class-name="header-primary"
|
height="100%"
|
:data="table.data"
|
>
|
<el-table-column
|
v-for="header in table.header"
|
:key="header.prop"
|
:prop="header.prop"
|
:label="header.label"
|
:min-width="header.minWidth"
|
:resizable="false"
|
align="center"
|
>
|
</el-table-column>
|
<el-table-column fixed="right" label="操作" width="320" align="center">
|
<template slot-scope="scope">
|
<el-button
|
icon="el-icon-folder-add"
|
@click="putIn(scope.row)"
|
type="danger"
|
size="mini"
|
>入库</el-button
|
>
|
<el-button
|
icon="el-icon-folder-remove"
|
type="primary"
|
size="mini"
|
@click="putOut(scope.row)"
|
:disabled="scope.row.MonCount == 0"
|
>出库</el-button
|
>
|
<el-button
|
icon="el-icon-tickets"
|
type="danger"
|
size="mini"
|
@click="storageHistory(scope.row)"
|
>出入库纪录</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="flex-page-footer" slot="footer">
|
<div class="el-pagination-btns">
|
<el-button
|
type="primary"
|
@click="searchData"
|
round
|
size="mini"
|
icon="el-icon-search"
|
>查询</el-button
|
>
|
<el-button
|
type="primary"
|
round
|
size="mini"
|
icon="el-icon-wallet"
|
@click="exportFile"
|
>导出</el-button
|
>
|
</div>
|
<el-pagination
|
size="mini"
|
:current-page="page.pageCurr"
|
:page-sizes="[10, 20, 30, 50, 100]"
|
:page-size="page.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="page.pageAll"
|
@current-change="currentChange"
|
@size-change="sizeChange"
|
></el-pagination>
|
<div class="el-pagination-btns">
|
<el-button
|
type="primary"
|
@click="addDialog = true"
|
round
|
size="mini"
|
icon="el-icon-plus"
|
>新增</el-button
|
>
|
</div>
|
</div>
|
<!-- 添加备件 -->
|
<el-dialog
|
title="添加备件"
|
width="800px"
|
:visible.sync="addDialog"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center bg-white"
|
:modal-append-to-body="false"
|
>
|
<div class="dialog_content">
|
<el-form
|
size="mini"
|
ref="addForm"
|
:model="params"
|
:rules="rules"
|
label-position="top"
|
class="params-dialog"
|
>
|
<el-row :gutter="layout.gutter">
|
<el-col :span="layout.span">
|
<el-form-item label="电池品牌" prop="BattProducer">
|
<el-select
|
v-model="params.BattProducer"
|
placeholder="请选择"
|
@change="battProducerChange"
|
:filterable="true"
|
>
|
<el-option
|
v-for="item in linkage.battProducers"
|
:key="item"
|
:label="item"
|
:value="item"
|
>
|
</el-option>
|
<el-option label="其他" value="其他"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="电池型号" prop="model">
|
<el-input v-model="params.model"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="入库日期" prop="date">
|
<el-date-picker
|
v-model="params.date"
|
type="date"
|
placeholder="选择日期"
|
value-format="yyyy-MM-dd"
|
></el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="单体数量" prop="count">
|
<el-input v-model="params.count"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="包机组" prop="baoji_group_id">
|
<el-select
|
v-model="params.baoji_group_id"
|
placeholder="请选择"
|
@change="battProducerChange"
|
>
|
<el-option
|
v-for="(item, idx) in baoji_group_list"
|
:key="'baoji_' + idx"
|
:label="item.baoji_group_name"
|
:value="item.baoji_group_id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
<div class="" slot="footer">
|
<el-button type="primary" @click="add" size="mini">添加</el-button>
|
<el-button type="warning" @click="addDialog = false" size="mini"
|
>取消</el-button
|
>
|
</div>
|
</el-dialog>
|
<!-- 电池品牌 -->
|
<el-dialog
|
top="0"
|
class="dialog-center"
|
title="请输入电池品牌"
|
:visible.sync="battProducer.dialogVisible"
|
width="280px"
|
append-to-body
|
>
|
<el-form size="small">
|
<el-form-item label="电池品牌">
|
<el-input v-model="battProducer.value"></el-input>
|
</el-form-item>
|
</el-form>
|
<div style="text-align: right">
|
<el-button type="primary" size="mini" @click="battProducerOk"
|
>确定</el-button
|
>
|
<el-button size="mini" @click="battProducer.dialogVisible = false"
|
>取消</el-button
|
>
|
</div>
|
</el-dialog>
|
<!-- 入库 -->
|
<el-dialog
|
top="0"
|
class="dialog-center"
|
title="请输入入库数量"
|
:visible.sync="putInStorage.show"
|
width="280px"
|
append-to-body
|
>
|
<el-form size="small" ref="putIn" :model="putInStorage" :rules="rules_storage">
|
<el-form-item label="单体数量" prop="putIn">
|
<el-input v-model="putInStorage.putIn"></el-input>
|
</el-form-item>
|
</el-form>
|
<div style="text-align: right">
|
<el-button type="primary" size="mini" @click="putInStorageOk"
|
>确定</el-button
|
>
|
<el-button size="mini" @click="putInStorage.show = false"
|
>取消</el-button
|
>
|
</div>
|
</el-dialog>
|
<!-- 出库 -->
|
<el-dialog
|
top="0"
|
class="dialog-center"
|
title="请输入出库数量"
|
:visible.sync="putOutStorage.show"
|
width="280px"
|
append-to-body
|
>
|
<el-form size="small" ref="putOut" :model="putOutStorage" :rules="rules_storage">
|
<el-form-item :label="'单体数量 (当前库存:' + cur_obj.MonCount + ')'" prop="putOut">
|
<el-input v-model.number="putOutStorage.putOut"></el-input>
|
</el-form-item>
|
</el-form>
|
<div style="text-align: right">
|
<el-button type="primary" size="mini" @click="putOutStorageOk"
|
>确定</el-button
|
>
|
<el-button size="mini" @click="putOutStorage.show = false"
|
>取消</el-button
|
>
|
</div>
|
</el-dialog>
|
<!-- 出入库纪录 -->
|
<el-dialog
|
title="备件出入库纪录"
|
width="800px"
|
:visible.sync="storageHis.show"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center bg-white storage_his"
|
:modal-append-to-body="false"
|
>
|
<div class="dialog_content">
|
<el-timeline>
|
<el-timeline-item
|
v-for="(item, idx) in storageRecord"
|
:key="'record_' + idx"
|
:timestamp="item.operationTime"
|
placement="top">
|
<el-card>
|
<el-tag effect="dark" :type="item.operationType != -1 ? '' : 'warning'">{{item.operationType != -1 ? '入库' : '出库'}}</el-tag>
|
<em>{{item.eventInfo}}</em>
|
</el-card>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
<div class="" slot="footer">
|
<el-button type="warning" @click="storageHis.show = false" size="mini"
|
>关闭</el-button
|
>
|
</div>
|
</el-dialog>
|
</flex-layout>
|
</template>
|
|
<script>
|
import { testVal } from "@/assets/js/tools";
|
// 引入导出表格
|
import { export_json_to_excel } from "../../assets/js/excel/Export2Excel.js";
|
|
import Timeout from "@/assets/js/tools/Timeout";
|
let rules = {
|
// 单体节数
|
MonCount: {
|
pattern: /^[0-9]{1,3}$/,
|
regVal: true,
|
min: 1,
|
max: 240,
|
msg: "取值范围1~240",
|
},
|
};
|
// TODO
|
const inventoryTypeList = [
|
{
|
label: '库存为0',
|
id: 0
|
},
|
{
|
label: '库存大于0',
|
id: 1
|
}
|
];
|
export default {
|
name: "repairBattery",
|
data() {
|
let self = this;
|
return {
|
time_start: "2000-01-01",
|
time_end: new Date(Date.now()).format("yyyy-MM-dd"),
|
BattModel: "",
|
batt_baoji: '',
|
mon_count: 1,
|
batt_Producer: "",
|
timer: new Timeout(),
|
addDialog: false,
|
table: {
|
header: [
|
{
|
prop: "battProducer",
|
label: "电池品牌",
|
minWidth: 200,
|
},
|
{
|
prop: "BattModel",
|
label: "电池型号",
|
minWidth: 200,
|
},
|
{
|
prop: "battspare_date",
|
label: "入库时间",
|
minWidth: 200,
|
},
|
{
|
prop: "MonCount",
|
label: "单体数量",
|
minWidth: 200,
|
},
|
],
|
data: [],
|
},
|
page: {
|
pageCurr: 1,
|
pageSize: 10,
|
pageAll: 0,
|
},
|
pickerOptions0: {
|
disabledDate: (time) => {
|
if (this.time_end) {
|
return new Date(time.getTime()) > new Date(this.time_end);
|
}
|
},
|
},
|
pickerOptions1: {
|
disabledDate: (time) => {
|
return (
|
new Date(time.getTime() + 24 * 60 * 60 * 1000) <
|
new Date(this.time_start)
|
);
|
},
|
},
|
params: {
|
BattProducer: "",
|
model: "",
|
date: "",
|
count: 0,
|
baoji_group_id: ''
|
},
|
rules: {
|
BattProducer: [
|
{ required: true, message: "电池品牌不能为空", trigger: "blur" },
|
],
|
model: [
|
{ required: true, message: "电池型号不能为空", trigger: "blur" },
|
],
|
date: [{ required: true, message: "请选择入库日期", trigger: "blur" }],
|
count: [
|
{ required: true, message: "请输入单体数量", trigger: "blur" },
|
{
|
validator(rule, value, callback) {
|
testVal(rule, value, callback, rules.MonCount);
|
},
|
trigger: ["change", "blur"],
|
},
|
],
|
baoji_group_id: [
|
{ required: true, message: "包机组不能为空", trigger: "blur" },
|
]
|
},
|
rules_storage: {
|
putIn: [
|
{ required: true, message: "入库单体数量不能为空", trigger: "blur" },
|
{
|
validator(rule, value, callback) {
|
testVal(rule, value, callback, rules.MonCount);
|
},
|
trigger: ["change", "blur"],
|
},
|
],
|
putOut: [
|
{ required: true, message: "出库单体数量不能为空", trigger: "blur" },
|
{
|
validator(rule, value, callback) {
|
if (value < 1) {
|
callback(new Error('出库单体数量须大于0'));
|
} else if (value > self.cur_obj.MonCount) {
|
callback(new Error('出库单体数量应小于' + self.cur_obj.MonCount));
|
} else {
|
callback();
|
}
|
},
|
trigger: ["change", "blur"],
|
},
|
]
|
},
|
layout: {
|
gutter: 16,
|
span: 12,
|
},
|
battProducerList: [],
|
linkage: {
|
battProducer: "",
|
battProducers: [],
|
},
|
battProducer: {
|
dialogVisible: false,
|
value: "",
|
},
|
putInStorage: {
|
show: false,
|
putIn: ''
|
},
|
putOutStorage: {
|
show: false,
|
putOut: ''
|
},
|
storageHis: {
|
show: false
|
},
|
baoji_group_list: [],
|
inventoryTypeList: inventoryTypeList,
|
// 当前操作的对象 出库 入库 查纪录
|
cur_obj: {
|
MonCount: 0
|
},
|
storageRecord: []
|
};
|
},
|
methods: {
|
currentChange(value) {
|
this.page.pageCurr = value;
|
this.searchData();
|
},
|
sizeChange(value) {
|
this.page.pageCurr = 1;
|
this.page.pageSize = value;
|
this.searchData();
|
},
|
// 导出表格
|
exportFile() {
|
let tHeader = [];
|
let filterVal = [];
|
let list = this.table.data;
|
this.table.header.map((item) => {
|
tHeader.push(item.label);
|
filterVal.push(item.prop);
|
});
|
let excelData = this.formatJson(filterVal, list);
|
export_json_to_excel(tHeader, excelData, "备件电池信息管理数据");
|
},
|
formatJson(filterVal, jsonData) {
|
return jsonData.map((v) => filterVal.map((j) => v[j]));
|
},
|
searchData() {
|
let param = {
|
battspare_time: this.time_start,
|
battspare_time1: this.time_end,
|
battProducer: this.batt_Producer,
|
BattModel: this.BattModel,
|
MonCount: this.mon_count,
|
page: {
|
pageCurr: this.page.pageCurr,
|
pageSize: this.page.pageSize,
|
},
|
};
|
// baojiGroupId 所属包机组 选全部则不传此参数
|
if (this.batt_baoji) {
|
param['baojiGroupId'] = this.batt_baoji;
|
}
|
this.$apis.dataMager.repairBatts
|
.getList(param)
|
.then((res) => {
|
res = JSON.parse(res.data.result);
|
// console.log('list', res);
|
let list = [];
|
if (res.code) {
|
list = res.data;
|
this.page.pageAll = list[list.length - 1].page.pageAll;
|
}
|
list.forEach((v) => {
|
v["battspare_date"] = new Date(v.battspare_time).format(
|
"yyyy-MM-dd"
|
);
|
});
|
this.table.data = list;
|
})
|
.catch((err) => {
|
console.error(err);
|
});
|
},
|
add() {
|
this.$refs.addForm.validate((valid) => {
|
if (valid) {
|
let params = {
|
battProducer: this.params.BattProducer,
|
BattModel: this.params.model,
|
battspare_time: this.params.date,
|
MonCount: this.params.count,
|
};
|
this.$apis.dataMager.repairBatts
|
.add(params)
|
.then((res) => {
|
res = JSON.parse(res.data.result);
|
// console.log(res);
|
if (res.code) {
|
this.addDialog = false;
|
}
|
this.$layer.msg(res.msg);
|
})
|
.catch((err) => {
|
console.error(err);
|
});
|
} else {
|
this.$layer.msg("存在校验未通过的数据！");
|
}
|
});
|
},
|
searchBattProducer() {
|
// 查询后台
|
this.$apis.dataMager.battGroupMager
|
.searchBattProducer()
|
.then((res) => {
|
let rs = JSON.parse(res.data.result);
|
let data = [];
|
if (rs.code == 1) {
|
data = rs.data.map((item) => {
|
return item.BattProducer;
|
});
|
}
|
this.linkage.battProducers = data;
|
this.battProducerList = data;
|
})
|
.catch((error) => {
|
console.log(error);
|
});
|
},
|
battProducerChange(value) {
|
// 点击其他
|
if (value == "其他") {
|
// 恢复上一次选择的内容
|
this.params.BattProducer = this.linkage.battProducer;
|
this.battProducer.dialogVisible = true;
|
this.battProducer.value = "";
|
} else {
|
this.linkage.battProducer = value;
|
}
|
},
|
battProducerOk() {
|
var value = this.battProducer.value;
|
// 获取选择的值
|
this.params.BattProducer = value;
|
// 记录选择的内容
|
this.linkage.battProducer = value;
|
if (this.linkage.battProducers.indexOf(value) == -1) {
|
this.linkage.battProducers.push(value);
|
}
|
// 修改面板显示状态为关闭
|
this.battProducer.dialogVisible = false;
|
},
|
// 查询当前用户所有包机组列表
|
getGroupInfo () {
|
this.$apis.userMager.baojiGroup.getGroupInfo().then((res) => {
|
res = JSON.parse(res.data.result);
|
let data = [];
|
if (res.code) {
|
// console.log(res);
|
// baoji_group_id: 100011
|
// baoji_group_name: "默认包机组"
|
data = res.data;
|
}
|
this.baoji_group_list = data;
|
}).catch((err) => {
|
console.error(err);
|
});
|
}
|
// 入库
|
,putIn (obj) {
|
this.cur_obj = obj;
|
this.putInStorage.show = true;
|
this.$nextTick(() => {
|
this.$refs.putIn.resetFields();
|
});
|
}
|
,putOut (obj) {
|
this.cur_obj = obj;
|
this.putOutStorage.show = true;
|
this.$nextTick(() => {
|
this.$refs.putOut.resetFields();
|
});
|
}
|
,storageHistory (obj) {
|
// this.cur_obj = obj;
|
this.storageHis.show = true;
|
this.$apis.dataMager.repairBatts.getSparetRecord({spareId: obj.num}).then((res) => {
|
res = JSON.parse(res.data.result);
|
let data = [];
|
if (res.code) {
|
// console.log(res);
|
data = res.data;
|
// eventInfo: "执行了备件出库操作,出库数量为:5,备件库存数为:42"
|
// operationTime: "2021-10-21 16:32:31"
|
// operationType: -1
|
}
|
this.storageRecord = data;
|
}).catch((err) => {
|
console.error(err);
|
});
|
}
|
,putInOrOut (param) {
|
this.$apis.dataMager.repairBatts.putInOrOut(param).then((res) => {
|
res = JSON.parse(res.data.result);
|
if (res.code) {
|
// console.log(res, 'res');
|
if (param.operationType == 1) {
|
this.putInStorage.show = false;
|
} else {
|
this.putOutStorage.show = false;
|
}
|
} else {
|
this.$message({
|
type: 'warning',
|
message: res.msg
|
});
|
}
|
}).catch((err) => {
|
console.error(err);
|
});
|
}
|
,putInStorageOk () {
|
let param = {
|
spareId: this.cur_obj.num,
|
operationNum: this.putInStorage.putIn,
|
operationType: 1
|
};
|
this.putInOrOut(param);
|
}
|
,putOutStorageOk () {
|
// console.log('出库');
|
let param = {
|
spareId: this.cur_obj.num,
|
operationNum: this.putOutStorage.putOut,
|
operationType: -1
|
};
|
this.putInOrOut(param);
|
}
|
},
|
mounted() {
|
this.timer.start(() => {
|
this.searchData();
|
this.timer.open();
|
}, 1000);
|
// 查询已存在的电池品牌
|
this.searchBattProducer();
|
this.getGroupInfo();
|
},
|
beforeDestroy() {
|
this.timer.stop();
|
},
|
|
};
|
</script>
|
|
<style scoped>
|
.time_box {
|
width: 48.6%;
|
}
|
.dialog_content {
|
padding: 4px 10px;
|
}
|
.bg-white >>> .el-dialog {
|
background: #fff;
|
}
|
.storage_his >>> .dialog_content {
|
height: 400px;
|
overflow-y: auto;
|
}
|
.storage_his >>> .dialog_content .el-tag {
|
margin-right: 1em;
|
}
|
</style>
|
