443 lines
14 KiB
Vue
443 lines
14 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<!-- 搜索框-->
|
|
<el-card >
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
|
<el-form-item label="油罐名称" prop="tankName">
|
|
<el-input
|
|
v-model="queryParams.tankName"
|
|
placeholder="请输入姓名"
|
|
clearable
|
|
style="width: 240px;"
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
|
<!-- <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>-->
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
|
|
<!-- 列表-->
|
|
<el-card style="margin-top: 20px" >
|
|
<el-row :gutter="10" class="mb8">
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-plus"
|
|
@click="tankAdd"
|
|
>新增油罐</el-button>
|
|
</el-col>
|
|
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
|
|
</el-row>
|
|
|
|
<el-table ref="tables"
|
|
v-loading="loading"
|
|
:data="tankList"
|
|
:default-sort="defaultSort">
|
|
<el-table-column label="油罐名称" align="center" prop="tankName"/>
|
|
<el-table-column label="油品名称" align="center" prop="oilNumber" />
|
|
<el-table-column label="当前数据" align="center">
|
|
<el-table-column label="油罐容量" align="center" prop="tankVolume"/>
|
|
<el-table-column label="下限预警" align="center" prop="lowerWarning"/>
|
|
<el-table-column label="油品密度" align="center" prop="oilDensity"/>
|
|
</el-table-column>
|
|
<el-table-column label="存油数量" align="center" prop="storedQuantity"/>
|
|
<el-table-column label="存油总价 " align="center" prop="totalPrice"/>
|
|
<el-table-column label="折后单价" align="center" prop="discountedPrice"/>
|
|
|
|
<el-table-column label="更新时间" align="center" prop="updateTime" width="200">
|
|
<template slot-scope="scope">
|
|
<span>{{ parseTime(scope.row.updateTime) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-edit"
|
|
@click="handleUpdate(scope.row)"
|
|
>修改</el-button>
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-copy-document"
|
|
@click="handleClean(scope.row)"
|
|
>初始化</el-button>
|
|
<!-- v-hasPermi="['']"-->
|
|
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<pagination
|
|
v-show="total>0"
|
|
:total="total"
|
|
:page.sync="queryParams.page"
|
|
:limit.sync="queryParams.pageSize"
|
|
@pagination="getList"
|
|
/>
|
|
</el-card>
|
|
|
|
<!-- 新增/修改-->
|
|
<el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
|
|
<el-form ref="form" :model="tankForm" :rules="rules" label-width="120px">
|
|
<el-row :gutter="24">
|
|
<el-col :span="16">
|
|
<el-form-item label="油罐名称" prop="tankName">
|
|
<el-input v-model="tankForm.tankName" placeholder="请输入油罐名称" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="油品号" prop="oilNumber">
|
|
<el-select v-model="tankForm.numberId" placeholder="请选择油品号" style="width:100%" @change="chooseOilNumber()">
|
|
<el-option
|
|
v-for="option in selectOilTypeByPrice"
|
|
:key="option.numberId"
|
|
:label="option.oilType +' '+option.oilName"
|
|
:value="option.numberId"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<el-col :span="8">
|
|
<el-form-item label="油罐体积" prop="tankVolume">
|
|
<el-input v-model="tankForm.tankVolume" placeholder="请输入油罐体积" maxlength="30">
|
|
<template slot="append">{{tankForm.unit}}</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="下限预警" prop="lowerWarning">
|
|
<el-input v-model="tankForm.lowerWarning" placeholder="小于预警值将进行提示" maxlength="30">
|
|
<template slot="append">{{tankForm.unit}}</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="油品密度" prop="password">
|
|
<el-input v-model="tankForm.oilDensity" placeholder="请输入油品密度" maxlength="30">
|
|
<template slot="append">g/ml</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<el-col :span="8">
|
|
<el-form-item label="存油数量" prop="storedQuantity">
|
|
<el-input v-model.number="tankForm.storedQuantity" placeholder="请输入存油数量" maxlength="30" @input="changePrice() " :disabled="disableInput">
|
|
<template slot="append">{{tankForm.unit}}</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="存油总价" prop="totalPrice" >
|
|
<el-input v-model.number="tankForm.totalPrice" placeholder="请输入存油总价" maxlength="30" @input="changePrice()" :disabled="disableInput">
|
|
<template slot="append">元</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="折合单价" prop="discountedPrice">
|
|
<el-input v-model.number="tankForm.discountedPrice" placeholder="请输入折合单价" maxlength="30" :disabled="disableInput">
|
|
<template slot="append">元</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<el-col :span="8">
|
|
<el-form-item label="油罐状态" prop="status">
|
|
<el-radio-group v-model="tankForm.status">
|
|
<el-radio
|
|
v-for="dict in dict.type.zhzt"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.value"
|
|
/>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="库存统计" prop="inventoryStatistics">
|
|
<el-radio-group v-model="tankForm.inventoryStatistics">
|
|
<el-radio
|
|
v-for="dict in dict.type.zhzt"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.value"
|
|
/>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<el-col :span="24">
|
|
<el-form-item label="备注信息">
|
|
<el-input type="textarea" v-model="tankForm.remarks"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</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>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {cleanTankApi, getTankApi, insertTankApi, updateTankApi} from "@/api/oilConfig/oilTank";
|
|
import {getName,parseTime} from "../../../utils/fuint";
|
|
import {addStaff, updateStaff} from "@/api/staff/staff";
|
|
import {getOilNameListApi} from "@/api/oilPrice";
|
|
import { BigNumber } from 'bignumber.js';
|
|
|
|
|
|
|
|
export default {
|
|
dicts: ['zhzt'],
|
|
|
|
data() {
|
|
return {
|
|
// form :{},
|
|
// 表单名称
|
|
title:'',
|
|
tankList: [], // 油罐列表
|
|
tankForm: {
|
|
id: null,
|
|
tankName: '',
|
|
oilNumber: '',
|
|
tankVolume: null,
|
|
lowerWarning: null,
|
|
oilDensity: null,
|
|
storedQuantity: null,
|
|
totalPrice: null,
|
|
discountedPrice: null,
|
|
// status: '',
|
|
// inventoryStatistics: '',
|
|
status: '',
|
|
inventoryStatistics: '',
|
|
remarks: '',
|
|
storeId: null,
|
|
numberId: null,
|
|
createTime: null,
|
|
updateTime: null,
|
|
createBy: '',
|
|
updateBy: '',
|
|
unit:''
|
|
},
|
|
disableInput: false, // 默认不禁用
|
|
// 是否显示弹出层
|
|
open: false,
|
|
// 总条数
|
|
total: 0,
|
|
// 查询参数
|
|
queryParams: {
|
|
tankName: '',
|
|
page:null,
|
|
pageSize:null
|
|
},
|
|
unit: 'L',
|
|
// 查询全部油品
|
|
selectOilTypeByPrice: [],
|
|
// 显示搜索条件
|
|
showSearch: true,
|
|
// 遮罩层
|
|
loading: false,
|
|
// 默认排序
|
|
defaultSort: {prop: 'createTime', order: 'descending'},
|
|
// 表单校验
|
|
rules: {
|
|
tankName: [
|
|
{ required: true, message: "油罐名称不能为空", trigger: "blur" },
|
|
],
|
|
oilNumber: [
|
|
{ required: true, message: '请选择油品类型', trigger: 'change' }
|
|
],
|
|
tankVolume: [
|
|
{ required: true, message: "油罐体积不能为空", trigger: "blur" },
|
|
],
|
|
lowerWarning: [
|
|
{ required: true, message: "下线预警不能为空", trigger: "blur" },
|
|
],
|
|
oilDensity: [
|
|
{ required: true, message: "油品密度不能为空", trigger: "blur" },
|
|
],
|
|
storedQuantity: [
|
|
{ required: true, message: "存油数量不能为空", trigger: "blur" },
|
|
],
|
|
totalPrice: [
|
|
{ required: true, message: "存油总价不能为空", trigger: "blur" },
|
|
],
|
|
discountedPrice: [
|
|
{ required: true, message: "折合单价不能为空", trigger: "blur" },
|
|
],
|
|
status: [
|
|
{ required: true, message: "请选择", trigger: "blur" }
|
|
],
|
|
inventoryStatistics: [
|
|
{ required: true, message: "请选择", trigger: "blur" }
|
|
]
|
|
}
|
|
}
|
|
},
|
|
async created() {
|
|
let this_ = this
|
|
await this_.getList()
|
|
},
|
|
methods: {
|
|
|
|
getList() {
|
|
this.loading = true;
|
|
getTankApi(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
|
|
this.tankList = response.data.records;
|
|
console.log("this.tankList",this.tankList)
|
|
this.total = response.data.total;
|
|
// response.data.records.forEach(item=>{
|
|
// this.categoryOptions.push(item.category)
|
|
})
|
|
this.loading = false;
|
|
},
|
|
|
|
// 提交按钮
|
|
submitForm: function() {
|
|
this.$refs["form"].validate(valid => {
|
|
|
|
if (valid) {
|
|
|
|
if (!this.tankForm.id) {
|
|
console.log("this.tankFormthis.tankForm33333",this.tankForm)
|
|
|
|
insertTankApi(this.tankForm).then(response => {
|
|
this.$modal.msgSuccess("新增成功");
|
|
this.open = false;
|
|
this.getList();
|
|
});
|
|
} else {
|
|
updateTankApi(this.tankForm).then(response => {
|
|
this.$modal.msgSuccess("修改成功");
|
|
this.open = false;
|
|
this.getList();
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
// 修改操作
|
|
handleUpdate(data) {
|
|
console.log("datadata",data)
|
|
this.disableInput = true
|
|
let this_ = this
|
|
this_.tankForm = data
|
|
this_.open = true;
|
|
this_.title = "修改油罐";
|
|
this.getOilNameList() // 查询全部油品
|
|
|
|
},
|
|
// 初始化油罐信息
|
|
handleClean(data) {
|
|
this.$confirm('此操作将初始化油罐库存信息,请谨慎操作!是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
cleanTankApi(data).then(response => {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '初始化成功!'
|
|
});
|
|
this.getList();
|
|
});
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消'
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
},
|
|
// 取消按钮
|
|
cancel() {
|
|
this.open = false;
|
|
this.reset();
|
|
},
|
|
// 搜索按钮操作
|
|
handleQuery() {
|
|
this.queryParams.page = 1;
|
|
this.getList();
|
|
},
|
|
// 新增油罐
|
|
tankAdd() {
|
|
// 表单重置
|
|
let this_ = this
|
|
this_.tankForm = {}
|
|
this.tankForm.status= "启用",
|
|
this.tankForm.inventoryStatistics= "启用",
|
|
this_.disableInput = false
|
|
|
|
this_.open = true;
|
|
this_.title = "新增油罐";
|
|
this.getOilNameList() // 查询全部油品
|
|
},
|
|
// 选择油品号之后
|
|
chooseOilNumber() {
|
|
let this_ = this;
|
|
this_.selectOilTypeByPrice.forEach(oilType=>{
|
|
if (oilType.numberId == this_.tankForm.numberId) {
|
|
this.tankForm.oilDensity = oilType.oilDensity
|
|
this.tankForm.oilNumber = oilType.oilType +" "+oilType.oilName
|
|
console.log("oilTypeoilType",oilType)
|
|
this.tankForm.unit = oilType.unit
|
|
}
|
|
})
|
|
},
|
|
|
|
changePrice() {
|
|
var this_=this
|
|
console.log("nonono",this_.tankForm)
|
|
|
|
if (this_.tankForm.totalPrice != null && this_.tankForm.storedQuantity != null) {
|
|
console.log("进入")
|
|
// this_.tankForm.discountedPrice =
|
|
var totalPrice = BigNumber(this_.tankForm.totalPrice);
|
|
var storedQuantity = BigNumber(this_.tankForm.storedQuantity);
|
|
this_.tankForm.discountedPrice = totalPrice.dividedBy(storedQuantity).toNumber();
|
|
}
|
|
},
|
|
|
|
getOilNameList() {
|
|
var this_=this
|
|
getOilNameListApi().then( response => {
|
|
var list = response.data
|
|
this_.selectOilTypeByPrice = list
|
|
});
|
|
},
|
|
|
|
},
|
|
};
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.app-container{
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: #f6f8f9;
|
|
}
|
|
</style>
|