523 lines
14 KiB
Vue
523 lines
14 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
|
|
<div class="bor-bai" v-for="(item,index) in gunList" :key="index">
|
|
<div class="box-top">
|
|
<div class="title_">{{item.oilType}} {{item.oilName}}</div>
|
|
<div>
|
|
<el-button
|
|
type="primary"
|
|
style="background: linear-gradient( 229deg, #FF8646 0%, #FFA360 100%);"
|
|
icon="el-icon-plus"
|
|
@click="gunAdd(item.numberId)"
|
|
v-hasPermi="['oilConfig:oilGun:list:add']"
|
|
|
|
>新增油枪</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="conten-bottom">
|
|
<div class="cardbox" :class="{ 'act-cardbox': item.status == '启用' ,'boxborder': item.status == '启用' }" v-for="(item,index) in item.oilGunList" :key="index">
|
|
<div class="cardbox-top" :class="{ 'actcolor':item.status == '启用' }">
|
|
<div>{{item.tankName}}</div>
|
|
<div style="cursor: pointer" ><i class="el-icon-edit-outline"
|
|
v-hasPermi="['oilConfig:oilGun:list:update']"
|
|
@click="gunEdit(item)"></i>
|
|
<i class="el-icon-delete"
|
|
v-hasPermi="['oilConfig:oilGun:list:del']"
|
|
@click="delGun(item.id)"></i></div>
|
|
</div>
|
|
|
|
<img v-if="item.status == '启用'" class="cardbox-rd" src="./imgs/r-img.png" alt="">
|
|
|
|
<div class="cardbox-title">
|
|
<div class="cardbox-gunName">{{item.gunName}}</div>
|
|
</div>
|
|
<div class="cardbox-bottom" :class="{ 'actcolor':item.status == '启用' }">
|
|
<!-- <div>ID:{{ item.id }}</div>-->
|
|
</div>
|
|
<template v-if="item.status == '启用'">
|
|
<div class="cardboxb" v-if="item.oilMachineGunNumber != null ">
|
|
<div >{{item.oilMachineGunNumber}}</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <el-card class="box-card">-->
|
|
<!-- <div slot="header" class="clearfix">-->
|
|
<!-- <span>油枪管理</span>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- <div class="conten-box" v-for="(item,index) in gunList" :key="index">-->
|
|
<!-- <div class="conten-top" style="display: flex; justify-content: space-between;">-->
|
|
<!-- <div>{{item.oilType}} {{item.oilName}}</div>-->
|
|
<!-- <div>-->
|
|
<!-- <el-button-->
|
|
<!-- type="primary"-->
|
|
<!-- icon="el-icon-plus"-->
|
|
<!-- @click="gunAdd(item.numberId)"-->
|
|
<!-- >新增油枪</el-button>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="conten-bottom">-->
|
|
<!-- <div class="cardbox" :class="{ 'act-cardbox': item.status == '启用' }" v-for="(item,index) in item.oilGunList" :key="index">-->
|
|
<!-- <div class="cardbox-top" :class="{ 'actcolor':item.status == '启用' }">-->
|
|
<!-- <div>{{item.tankName}}</div>-->
|
|
<!-- <div style="cursor: pointer" ><i class="el-icon-edit" @click="gunEdit(item)"></i> <i class="el-icon-delete" @click="delGun(item.id)"></i></div>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- <img class="cardbox-rd" src="./imgs/r-img.png" alt="">-->
|
|
|
|
<!-- <div class="cardbox-title">-->
|
|
<!-- <div>{{item.gunName}}</div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="cardbox-bottom" :class="{ 'actcolor':item.status == '启用' }">-->
|
|
<!--<!– <div>ID:{{ item.id }}</div>–>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="cardboxb" v-if="item.oilMachineGunNumber != null ">-->
|
|
<!-- <div>{{item.oilMachineGunNumber}}</div>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </el-card>-->
|
|
<el-dialog
|
|
:title="title"
|
|
:visible.sync="dialogVisible"
|
|
width="30%"
|
|
:before-close="handleClose"
|
|
:close-on-click-modal="false">
|
|
<el-form :model="gunForm" :rules="rules" ref="gunForm" label-width="100px" class="demo-ruleForm">
|
|
<el-form-item label="油枪名称" prop="gunName">
|
|
|
|
<el-input placeholder="请输入内容" v-model="gunForm.gunName" class="input-with-select">
|
|
<el-select v-model="gunForm.select" slot="append" placeholder="选择油枪" @change="chooseName">
|
|
<el-option
|
|
v-for="option in 50"
|
|
:key="option"
|
|
:label="option + '号枪'"
|
|
:value="option + '号枪'"
|
|
></el-option>
|
|
</el-select>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="油机编号" prop="name">
|
|
<el-input v-model="gunForm.oilMachineGunNumber"></el-input>
|
|
<div style="font-size: 12px;color: #999999">油机连接模式下 绑定油机系统中的枪号信息与当前枪号绑定</div>
|
|
</el-form-item>
|
|
<el-form-item label="所属油罐" prop="tankId">
|
|
<el-select v-model="gunForm.tankId" placeholder="请选择所属油罐">
|
|
<el-option
|
|
v-for="option in tankList"
|
|
:key="option.id"
|
|
:label="option.tankName"
|
|
:value="option.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="状态" prop="status">
|
|
<el-radio-group v-model="gunForm.status">
|
|
<el-radio
|
|
v-for="dict in dict.type.zhzt"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.value"
|
|
@change="handleIsopenSelect"
|
|
/>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<!--/* <el-button v-if="judgement" type="danger" @click="delGun()" style="float: left;">删除</el-button>*/-->
|
|
<el-button @click="dialogVisible = false,getList()">取 消</el-button>
|
|
<el-button type="primary" @click="submitForm()">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getGunApi, insertGunApi, updateGunApi,selectTankByNumberApi,delGunApi} from "@/api/oilConfig/oilGuns";
|
|
import {cleanTankApi} from "@/api/oilConfig/oilTank";
|
|
|
|
export default {
|
|
name: 'oilqiang',
|
|
dicts: ['zhzt'],
|
|
|
|
data(){
|
|
return{
|
|
title:"",
|
|
dialogVisible: false,
|
|
list:[
|
|
{type:1,xb:'you'},
|
|
{type:1,xb:'meiyou'},
|
|
{type:1,xb:'you'},
|
|
{type:1,xb:'you'},
|
|
{type:2,xb:'you'},
|
|
{type:1,xb:'you'},
|
|
{type:1,xb:'you'},
|
|
{type:1,xb:'you'},
|
|
],
|
|
// 判断当前窗口是新增还是修改该
|
|
judgement:false,
|
|
tankList: [],
|
|
gunList: [],
|
|
c:'',
|
|
gunForm: {
|
|
id: '',
|
|
gunName: '',
|
|
tankId: '',
|
|
status: '',
|
|
storeId: '',
|
|
createTime: '',
|
|
updateTime: '',
|
|
createBy: '',
|
|
updateBy: '',
|
|
numberId: '',
|
|
oilMachineGunNumber: '',
|
|
select: ''
|
|
},
|
|
statusOut:'',
|
|
ruleForm: {
|
|
name: '',
|
|
region: '',
|
|
date1: '',
|
|
date2: '',
|
|
delivery: false,
|
|
type: [],
|
|
select:'请选择',
|
|
resource: '',
|
|
desc: ''
|
|
},
|
|
rules: {
|
|
gunName: [
|
|
{ required: true, message: '请输入油枪名称', trigger: 'blur' },
|
|
],
|
|
|
|
tankId: [
|
|
{ required: true, message: '请选择所属油罐', trigger: 'change' }
|
|
],
|
|
}
|
|
}
|
|
},
|
|
|
|
async created() {
|
|
let this_ = this
|
|
await this_.getList()
|
|
},
|
|
watch: {
|
|
dialogVisible: function (newValue, oldValue) {
|
|
if (oldValue) {
|
|
this.$refs["gunForm"].resetFields();
|
|
}
|
|
}
|
|
},
|
|
methods:{
|
|
handleIsopenSelect() {
|
|
this.$forceUpdate()
|
|
},
|
|
getList() {
|
|
this.gunList = []
|
|
getGunApi().then(response => {
|
|
this.gunList = response.data;
|
|
})
|
|
},
|
|
// 添加油枪
|
|
gunAdd(numberId){
|
|
// this.$refs["gunForm"].validate
|
|
// 假设 formRules 是你的验证规则对象
|
|
// this.$refs.gunForm.clearValidate(); // 清空验证状态
|
|
// this.$set(this, 'formRules', {}); // 设置为空对象
|
|
|
|
let this_ = this;
|
|
this_.dialogVisible = true;
|
|
this_.judgement = false;
|
|
this_.gunForm = {} // 清空数据
|
|
this_.gunForm.status = '启用'
|
|
this_.title = '添加油枪'
|
|
this_.selectTankByNumber(numberId)
|
|
},
|
|
gunEdit(data) {
|
|
let this_ = this;
|
|
this_.dialogVisible = true;
|
|
this_.judgement = true;
|
|
this_.gunForm = data;
|
|
this_.statusOut = data.status;
|
|
this_.title = '修改油枪'
|
|
|
|
this_.selectTankByNumber(data.numberId)
|
|
},
|
|
delGun(id) {
|
|
this.$confirm('此操作将删除油枪信息,请谨慎操作!是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
let fil = {
|
|
id: id
|
|
}
|
|
delGunApi(fil).then(response => {
|
|
this.dialogVisible = false;
|
|
this.$message({
|
|
type: 'success',
|
|
message: '删除成功!'
|
|
});
|
|
this.getList();
|
|
})
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消'
|
|
});
|
|
});
|
|
},
|
|
submitForm() {
|
|
this.$refs["gunForm"].validate((valid) => {
|
|
if (valid) {
|
|
// 查询numberId
|
|
for (let tankListKey in this.tankList) {
|
|
if (parseInt(this.gunForm.tankId) === parseInt(this.tankList[tankListKey].id)) {
|
|
this.gunForm.numberId = parseInt(this.tankList[tankListKey].numberId);
|
|
}
|
|
}
|
|
if (!this.gunForm.id) {
|
|
insertGunApi(this.gunForm).then(response => {
|
|
console.log("response",response)
|
|
if (response.code == 200) {
|
|
this.$modal.msgSuccess("新增成功");
|
|
this.dialogVisible = false;
|
|
this.getList();
|
|
|
|
}else {
|
|
|
|
}
|
|
}).catch(reason => {
|
|
});
|
|
} else {
|
|
updateGunApi(this.gunForm).then(response => {
|
|
if (response.code == 200) {
|
|
this.$modal.msgSuccess("修改成功");
|
|
this.dialogVisible = false;
|
|
this.getList();
|
|
this.dialogVisible = false
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
// this.getList();
|
|
},
|
|
chooseName() {
|
|
var this_ = this
|
|
this_.gunForm.gunName = this_.gunForm.select
|
|
},
|
|
handleClose(){
|
|
this.dialogVisible = false;
|
|
},
|
|
|
|
// 查询油罐信息
|
|
selectTankByNumber(data) {
|
|
let numberId = data
|
|
selectTankByNumberApi(numberId).then(response => {
|
|
this.tankList = response.data;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.app-container{
|
|
height: 100%;
|
|
}
|
|
.bor-bai{
|
|
width: 100%;
|
|
border-radius: 10px ;
|
|
box-sizing: border-box;
|
|
padding: 20px;
|
|
background: #fff;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
|
margin-bottom: 20px;
|
|
|
|
|
|
}
|
|
.title_{
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
color: #333333;
|
|
}
|
|
.wrap-box{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.oil-box{
|
|
|
|
}
|
|
|
|
.clearfix:before,
|
|
.clearfix:after {
|
|
display: table;
|
|
content: "";
|
|
}
|
|
.clearfix:after {
|
|
clear: both
|
|
}
|
|
|
|
.box-card {
|
|
width: 100%;
|
|
}
|
|
.conten-box{
|
|
width: 100%;
|
|
border: 1px solid #ebeef5;
|
|
margin: 20px 0px;
|
|
}
|
|
.conten-top{
|
|
border-bottom: 1px solid #ebeef5;
|
|
box-sizing: border-box;
|
|
padding: 18px 20px;
|
|
}
|
|
.conten-bottom{
|
|
box-sizing: border-box;
|
|
padding: 20px 20px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.cardbox{
|
|
height: 87px;
|
|
width: 278px;
|
|
margin-right: 35px;
|
|
margin-bottom: 35px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
//width: 19%;
|
|
|
|
background-size:40% 70%;
|
|
background-color: #f9f9f9;
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
.boxborder {
|
|
border-color: #FF9655;
|
|
border:1px solid;
|
|
}
|
|
.cardbox-rd{
|
|
position: absolute;
|
|
right: 5px;
|
|
bottom: 0px;
|
|
width:50px;
|
|
height: 50px;
|
|
|
|
}
|
|
.act-cardbox{
|
|
margin-right: 35px;
|
|
height: 87px;
|
|
width: 278px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
//margin-right: 10px;
|
|
margin-bottom: 35px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
//width: 19%;
|
|
//background: url(../../../assets/images/jybjj.png) center no-repeat;
|
|
background-size:40% 70%;
|
|
background-color: #fff9f5;
|
|
color: #FF9655 !important;
|
|
}
|
|
|
|
|
|
|
|
.cardboxb{
|
|
position: absolute;
|
|
/*width: 50px;*/
|
|
width: auto;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 12px;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
padding: 5px 10px;
|
|
background: linear-gradient( 312deg, #FF8646 0%, #FFA360 100%);
|
|
border-radius: 0px 10px 0px 10px;
|
|
}
|
|
|
|
.actcolor{
|
|
color: #FF9655 !important;
|
|
}
|
|
.cardbox-top{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
color: #5b5e62;
|
|
font-size: 12px;
|
|
|
|
font-family: Source Han Sans CN;
|
|
//font-weight: 400;
|
|
}
|
|
.cardbox-title{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 28px;
|
|
//margin: 15px 0px;
|
|
|
|
|
|
}
|
|
.cardbox-gunName{
|
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
|
|
font-weight: 400;
|
|
font-size: 28px;
|
|
//color: #FF9655;
|
|
//line-height: 0px;
|
|
//text-align: center;
|
|
//font-style: normal;
|
|
//text-transform: none;
|
|
}
|
|
.cardbox-bottom{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
width: 100%;
|
|
color: #5b5e62;
|
|
font-size: 14px;
|
|
}
|
|
.input-box{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.box-top{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
</style>
|