<template>
|
<div class="main">
|
<div class="main_info">
|
<div
|
class="main_info_item"
|
v-for="item in volumeDoseData"
|
:key="item.id">
|
<span>{{item.materialName}}</span>
|
<span class="main_info_item--value">{{item.materialValue}}(t)</span>
|
</div>
|
</div>
|
<div class="main_header">
|
<div class="header_item">
|
<span class="header_label">配合比编号：</span>
|
<el-select v-model="search.spareType" :size="size" clearable placeholder="请选择配合比编号">
|
<el-option
|
v-for="item in sportpartTypeData"
|
:key="item.dictId"
|
:label="item.dictName"
|
:value="item.dictId">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="header_item">
|
<span class="header_label">制定日期：</span>
|
<el-date-picker
|
v-model="search.outTime"
|
type="date"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="请选择日期">
|
</el-date-picker>
|
</div>
|
<div class="header_item">
|
<span class="header_label">砼标记：</span>
|
<el-input v-model="search.model" :size="size" clearable placeholder="请输入砼标记"></el-input>
|
</div>
|
<div class="header_item">
|
<span class="header_label">混凝土类别：</span>
|
<el-select v-model="search.spareType" :size="size" clearable placeholder="请选择混凝土类别">
|
<el-option
|
v-for="item in sportpartTypeData"
|
:key="item.dictId"
|
:label="item.dictName"
|
:value="item.dictId">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="header_item">
|
<span class="header_label">强度等级：</span>
|
<el-select v-model="search.spareType" :size="size" clearable placeholder="请选择强度等级">
|
<el-option
|
v-for="item in sportpartTypeData"
|
:key="item.dictId"
|
:label="item.dictName"
|
:value="item.dictId">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="header_item">
|
<el-button v-if="showButton('search')" icon="el-icon-search" @click="searchStirstandList(true)">查询</el-button>
|
<el-button class="search_btn" v-if="showButton('insert')" icon="el-icon-plus" @click="propInsert()">新增</el-button>
|
<el-button v-if="showButton('export')" icon="el-icon-upload2" @click="exportExcel()">导出Excel</el-button>
|
</div>
|
</div>
|
<div class="main_content">
|
<el-table
|
v-loading="loading"
|
:data="stirstandList"
|
height="100%">
|
<el-table-column label="序号" width="60" align="center">
|
<template #default="scope">
|
<span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="outTime" width="200" label="出砼时间" align="center"></el-table-column>
|
<el-table-column prop="size" label="盘方量" align="center"></el-table-column>
|
<el-table-column
|
v-for="item in tableHeader"
|
:key="item.field"
|
:prop="item.field"
|
:label="item.title + '(t)'"
|
align="center">
|
</el-table-column>
|
<el-table-column label="操作" align="center" width="200">
|
<template #default="{ row }">
|
<el-button class="table_btn" size="mini" v-if="showButton('update')" @click="propDetails(row)">详情</el-button>
|
<el-button class="table_btn" size="mini" v-if="showButton('update')" @click="propUpdate(row)">修改</el-button>
|
<el-button class="delete_btn" size="mini" v-if="showButton('delete')" @click="deleteInfo(row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="main_footer">
|
<el-pagination
|
background
|
@current-change="changePageNum"
|
@size-change="changePageSize"
|
:current-page="pageNum"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
</div>
|
<!-- 新增搅拌站原料 修改搅拌站原料 -->
|
<el-dialog
|
class="prop_dialog"
|
:title="asyncTitle ===true? '新增搅拌站原料' :asyncTitle ===false? '修改搅拌站原料信息':'搅拌站信息'"
|
:visible.sync="asyncStirstand"
|
width="70%">
|
<div class="dialog_left">
|
<el-form ref="form" :model="formStirstand" :rules="rulesStirstand" label-width="auto" class="rule_form">
|
<!-- <el-form-item label="出砼时间：" prop="outTime">
|
<el-date-picker
|
v-model="formStirstand.outTime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="请选择出砼时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="盘方量：" prop="size">
|
<el-input-number
|
v-model="formStirstand.size"
|
clearable
|
placeholder="请输入盘方量"
|
:controls="false"
|
:precision="2">
|
</el-input-number>
|
</el-form-item>
|
<el-form-item
|
v-for="(item, index) in formStirstand.mixMaterialInfoList"
|
:key="item.materialName"
|
:label="item.materialNameCn + '：'"
|
:prop="`mixMaterialInfoList.${index}.materialValue`"
|
:rules="{
|
required: true,
|
message: `请输入${item.materialNameCn}量`,
|
trigger: 'blur'
|
}">
|
<el-input-number
|
v-model="item.materialValue"
|
clearable
|
:placeholder="`请输入${item.materialNameCn}量`"
|
:controls="false"
|
:precision="2">
|
</el-input-number>
|
<div class="unit">t</div>
|
</el-form-item> -->
|
<el-form-item label="配合比编号：" prop="spareType">
|
<el-select v-model="formStirstand.spareType" :size="size" clearable placeholder="请选择配合比编号" :disabled="disabled">
|
<el-option
|
v-for="item in sportpartTypeData"
|
:key="item.dictId"
|
:label="item.dictName"
|
:value="item.dictId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="制定日期：" prop="spareType">
|
<el-date-picker
|
v-model="formStirstand.outTime"
|
type="datetime"
|
:disabled="disabled"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="请选择制定日期">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="砼标记：" prop="model">
|
<el-input v-model="formStirstand.model" :size="size" clearable placeholder="请输入砼标记" :disabled="disabled"></el-input>
|
</el-form-item>
|
<el-form-item label="混凝土类别：" prop="spareType">
|
<el-select v-model="formStirstand.spareType" :size="size" clearable placeholder="请选择混凝土类别" :disabled="disabled">
|
<el-option
|
v-for="item in sportpartTypeData"
|
:key="item.dictId"
|
:label="item.dictName"
|
:value="item.dictId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="强度等级：" prop="spareType">
|
<el-select v-model="formStirstand.spareType" :size="size" clearable placeholder="请选择强度等级" :disabled="disabled">
|
<el-option
|
v-for="item in sportpartTypeData"
|
:key="item.dictId"
|
:label="item.dictName"
|
:value="item.dictId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="坍落度：" prop="spareType">
|
<el-select v-model="formStirstand.spareType" :size="size" clearable placeholder="请选择坍落度" :disabled="disabled">
|
<el-option
|
v-for="item in sportpartTypeData"
|
:key="item.dictId"
|
:label="item.dictName"
|
:value="item.dictId">
|
</el-option>
|
</el-select>
|
<div style="display:flex;background-color:#1C4F86;border-radius:4px;line-height:15px;min-width:60px;padding:0 5px;align-items:center;margin-left:5px">
|
<div style="width:20px;padding-left:5px;">
|
<div style="color:#ECF1F5">+</div>
|
<div style="color:#ECF1F5">-</div>
|
</div>
|
<div style="color:#ECF1F5">mm</div>
|
</div>
|
</el-form-item>
|
<el-form-item label="抗冻等级：" prop="spareType">
|
<el-select v-model="formStirstand.spareType" :size="size" clearable placeholder="请选择抗冻等级" :disabled="disabled">
|
<el-option
|
v-for="item in sportpartTypeData"
|
:key="item.dictId"
|
:label="item.dictName"
|
:value="item.dictId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="抗渗等级：" prop="spareType">
|
<el-select v-model="formStirstand.spareType" :size="size" clearable placeholder="请选择抗渗等级" :disabled="disabled">
|
<el-option
|
v-for="item in sportpartTypeData"
|
:key="item.dictId"
|
:label="item.dictName"
|
:value="item.dictId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="抗折等级：" prop="spareType">
|
<el-select v-model="formStirstand.spareType" :size="size" clearable placeholder="请选择抗折等级" :disabled="disabled">
|
<el-option
|
v-for="item in sportpartTypeData"
|
:key="item.dictId"
|
:label="item.dictName"
|
:value="item.dictId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="水泥品种：" prop="spareType">
|
<el-select v-model="formStirstand.spareType" :size="size" clearable placeholder="请选择水泥品种" :disabled="disabled">
|
<el-option
|
v-for="item in sportpartTypeData"
|
:key="item.dictId"
|
:label="item.dictName"
|
:value="item.dictId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="骨料粒径：" prop="spareType">
|
<el-select v-model="formStirstand.spareType" :size="size" clearable placeholder="请选择骨料粒径" :disabled="disabled">
|
<el-option
|
v-for="item in sportpartTypeData"
|
:key="item.dictId"
|
:label="item.dictName"
|
:value="item.dictId">
|
</el-option>
|
</el-select>
|
<div style="display:flex;background-color:#1C4F86;border-radius:4px;line-height:15px;min-width:60px;justify-content: center;align-items:center;margin-left:5px">
|
<div style="color:#ECF1F5">mm</div>
|
</div>
|
</el-form-item>
|
<el-form-item label="搅拌时间：" prop="spareType">
|
<el-date-picker
|
v-model="formStirstand.outTime"
|
type="datetime"
|
:disabled="disabled"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="请选择搅拌时间">
|
</el-date-picker>
|
<div style="display:flex;background-color:#1C4F86;border-radius:4px;line-height:15px;min-width:60px;justify-content: center;align-items:center;margin-left:5px">
|
<div style="color:#ECF1F5">s</div>
|
</div>
|
</el-form-item>
|
<el-form-item label="卸砼时间：" prop="spareType">
|
<el-date-picker
|
v-model="formStirstand.outTime"
|
type="datetime"
|
:disabled="disabled"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="请选择卸砼时间">
|
</el-date-picker>
|
<div style="display:flex;background-color:#1C4F86;border-radius:4px;line-height:15px;min-width:60px;justify-content: center;align-items:center;margin-left:5px">
|
<div style="color:#ECF1F5">s</div>
|
</div>
|
</el-form-item>
|
<el-form-item label="设计比例：" prop="spareType">
|
<el-input v-model="formStirstand.model" :size="size" clearable placeholder="请输入设计比例" :disabled="disabled"></el-input>
|
</el-form-item>
|
<el-form-item label="试验员：" prop="spareType">
|
<el-select v-model="formStirstand.spareType" :size="size" clearable placeholder="请选择试验员" :disabled="disabled">
|
<el-option
|
v-for="item in sportpartTypeData"
|
:key="item.dictId"
|
:label="item.dictName"
|
:value="item.dictId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="审核员：" prop="spareType">
|
<el-select v-model="formStirstand.spareType" :size="size" clearable placeholder="请选择审核员" :disabled="disabled">
|
<el-option
|
v-for="item in sportpartTypeData"
|
:key="item.dictId"
|
:label="item.dictName"
|
:value="item.dictId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="配合比状态：" prop="spareType">
|
<el-select v-model="formStirstand.spareType" :size="size" clearable placeholder="请选择配合比状态" :disabled="disabled">
|
<el-option
|
v-for="item in sportpartTypeData"
|
:key="item.dictId"
|
:label="item.dictName"
|
:value="item.dictId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="其他要求：" prop="spareType">
|
<el-input v-model="formStirstand.model" :size="size" clearable placeholder="请输入其他要求" type="textarea" :rows="5" :disabled="disabled"></el-input>
|
</el-form-item>
|
<el-form-item label="砂浆：" prop="spareType">
|
<el-checkbox v-model="formStirstand.checked" :disabled="disabled"></el-checkbox>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="dialog_right">
|
<el-table
|
v-loading="loadingForm"
|
:data="stirStandList"
|
height="100%"
|
:header-cell-style="() => 'background-color: #082F57; color: #39B5FE'">
|
<el-table-column align="center" label="序号" width="60">
|
<template #default="scope">
|
<span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="materialNameCn" label="原材料" align="center"></el-table-column>
|
<el-table-column prop="materialNameCn" label="规格型号" align="center"></el-table-column>
|
<el-table-column label="用量" align="center">
|
<template #default="{row}">
|
<el-input
|
v-model="row.materialValue"
|
:size="size"
|
type="number"
|
:disabled="disabled"
|
placeholder="请输入">
|
</el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="备注" align="center">
|
<template #default="{row}">
|
<el-input
|
v-model="row.materialValue"
|
:size="size"
|
:disabled="disabled"
|
type="text"
|
placeholder="请输入">
|
</el-input>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div slot="footer">
|
<el-button @click="asyncStirstand = false">取 消</el-button>
|
<el-button class="submit_btn" @click="asyncTitle ? submitInsertForm() : submitUpdateForm()">提 交</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { buttonPinia } from '../../pinia';
|
import { changeSize,downLoadFile, throttle } from '../../plugins/public';
|
export default {
|
data() {
|
return {
|
timeData: '', // 时间范围
|
pageNum: 1,
|
pageSize: 10,
|
size: changeSize(),
|
total: 0,
|
loading: false,
|
disabled:false,
|
search:{},//查询条件
|
volumeDoseData: [], // 总量信息
|
stirstandList: [], // 列表信息
|
tableHeader: [], // 动态表头信息
|
asyncTitle: true, // true 新增原料信息 false 修改原料信息
|
asyncStirstand: false, // 弹窗
|
formStirstand: {}, // 表单信息
|
stirStandList:[{}],//弹框中的table表数据
|
rulesStirstand: {
|
outTime: [{
|
required: true,
|
message: '请选择出砼时间',
|
trigger: ['blur', 'change']
|
}],
|
size: [{
|
required: true,
|
message: '请输入盘方量',
|
trigger: 'blur'
|
}]
|
}, // 表单校验规则
|
}
|
},
|
mounted() {
|
this.getAllmixMaterialData();
|
this.searchStirstandList(true);
|
},
|
methods: {
|
// 获取原料信息
|
async getRawMaterialData(id) {
|
const { data } = await this.$api.Materials.getRawMaterialData({
|
id: id
|
});
|
this.$set(this.formStirstand, 'mixMaterialInfoList', data);
|
},
|
// 获取原料总量信息
|
async getAllmixMaterialData() {
|
this.volumeDoseData = [];
|
const { data } = await this.$api.Materials.getAllmixMaterialData();
|
this.volumeDoseData = data;
|
},
|
// 查询搅拌站原料信息
|
searchStirstandList(bol) {
|
if(bol) {
|
this.pageNum = 1;
|
}
|
this.loading = true;
|
this.stirstandList = [];
|
this.$api.Materials.searchStirstandList({
|
pageNum: this.pageNum,
|
pageSize: this.pageSize,
|
startTime: this.timeData ? this.timeData[0] : '',
|
endTime: this.timeData ? this.timeData[1] : ''
|
}).then((res) => {
|
if(res.success) {
|
this.total = res.data.pageInfo.total;
|
this.tableHeader = res.data.tableHeader;
|
this.stirstandList = res.data.pageInfo.list;
|
}
|
this.loading = false;
|
}).catch(() => {
|
this.loading = false;
|
})
|
},
|
// 打开添加信息
|
propInsert() {
|
this.getRawMaterialData().then(() => {
|
this.asyncTitle = true;
|
this.asyncStirstand = true;
|
this.disabled = false
|
})
|
},
|
//详情按钮
|
propDetails(){
|
this.asyncTitle = 'detail';
|
this.asyncStirstand = true;
|
this.disabled = true
|
},
|
// 打开修改信息
|
propUpdate(row) {
|
this.getRawMaterialData(row.id).then(() => {
|
this.$set(this.formStirstand, 'id', row.id);
|
this.$set(this.formStirstand, 'outTime', row.outTime);
|
this.$set(this.formStirstand, 'size', row.size);
|
this.asyncTitle = false;
|
this.asyncStirstand = true;
|
this.disabled = false
|
})
|
},
|
// 删除原料信息
|
deleteInfo(row) {
|
this.$confirm("该操作将删除该原料信息，是否继续删除?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
this.$api.Materials.deleteStirstandInfo({id: row.id})
|
.then(res => {
|
if(res.success) {
|
this.getAllmixMaterialData();
|
this.searchStirstandList(true);
|
this.$message.success("删除成功！");
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
}).catch(() => {
|
this.$message.warning("您已取消");
|
})
|
},
|
// 导出Excel
|
exportExcel() {
|
this.$api.System.GETEXPORTTOKENDATA({
|
startTime: this.timeData ? this.timeData[0] : '',
|
endTime: this.timeData ? this.timeData[1] : ''
|
}).then((res) => {
|
if(res.success) {
|
downLoadFile(res.data, '/materials/mixMaterial/export');
|
}
|
})
|
},
|
// 提交添加信息
|
submitInsertForm: throttle(function() {
|
this.$refs.form.validate((valid) => {
|
if(valid) {
|
const params = Object.assign({}, this.formStirstand);
|
// params.mixMaterialInfoList = params.mixMaterialInfoList.map(item => {
|
// item.materialValue = item.materialValue.toString();
|
// return item;
|
// })
|
this.$api.Materials.insertStirstandInfo(params).then((res) => {
|
if(res.success) {
|
this.asyncStirstand = false;
|
this.getAllmixMaterialData();
|
this.searchStirstandList(true);
|
this.$message.success('添加成功！');
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
}
|
})
|
}, 3000),
|
// 提交修改信息
|
submitUpdateForm: throttle(function() {
|
this.$refs.form.validate((valid) => {
|
if(valid) {
|
const params = Object.assign({}, this.formStirstand);
|
// params.mixMaterialInfoList = params.mixMaterialInfoList.map(item => {
|
// item.materialValue = item.materialValue.toString();
|
// return item;
|
// })
|
this.$api.Materials.insertStirstandInfo(params).then((res) => {
|
if(res.success) {
|
this.asyncStirstand = false;
|
this.getAllmixMaterialData();
|
this.searchStirstandList(true);
|
this.$message.success('修改成功！');
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
}
|
})
|
}, 3000),
|
// 切换页数
|
changePageNum(page) {
|
this.pageNum = page;
|
this.searchStirstandList();
|
},
|
// 切换每页条数
|
changePageSize(size) {
|
this.pageSize = size;
|
this.searchStirstandList();
|
},
|
// 判断按钮权限信息
|
showButton(str) {
|
const pinia = buttonPinia();
|
return pinia.$state.buttonInfo.includes(str);
|
}
|
},
|
watch: {
|
asyncStirstand(bol) {
|
if(!bol) {
|
this.formStirstand = {};
|
this.$refs.form.resetFields();
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../../style/layout-main.scss';
|
|
.main_header {
|
margin-top: 0 !important;
|
}
|
|
::v-deep.prop_dialog .el-dialog__body{
|
display: flex;
|
.dialog_left{
|
width: 35%;
|
background-color: #102353;
|
padding: 15px;
|
}
|
.dialog_right{
|
width: 65%;
|
}
|
}
|
|
|
.main_info {
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
padding: 20px 10px 10px;
|
|
.main_info_item {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
width: 100%;
|
height: 80px;
|
color: #FFFFFF;
|
background: url('../../assets/stir_img.png')no-repeat;
|
background-size: 100% 100%;
|
|
&:first-child {
|
margin-left: 0 !important;
|
}
|
|
&:nth-child(odd) {
|
margin: 0 20px;
|
}
|
|
.main_info_item--value {
|
padding-top: 2px;
|
color: #18F6F8;
|
font-size: 18px;
|
}
|
}
|
}
|
|
.unit {
|
padding: 0 25px;
|
height: 32px;
|
color: #FFFFFF;
|
border: 1px solid #39B5FE;
|
border-left: none;
|
border-radius: 0 6px 6px 0;
|
background: #0A3754;
|
}
|
|
::v-deep .el-input-group__append {
|
padding: 0 30px !important;
|
}
|
</style>
|
