<!-- 物资管理 ==> 配合比屏管理-->
|
<template>
|
<div class="main">
|
<div class="main_header">
|
<div class="header_item">
|
<span class="header_label">配和比屏：</span>
|
<el-select size="mini" v-model="queryInfo.mixingSignboardId" placeholder="请选择配和比屏" clearable>
|
<el-option v-for="item in selects.screenNames" :key="item.value" :label="item.label"
|
:value="item.value"></el-option>
|
</el-select>
|
</div>
|
<!-- <div class="header_item">
|
<span class="header_label">录入方式：</span>
|
<el-select size="mini" v-model="queryInfo.stata" placeholder="请选择录入方式">
|
<el-option v-for="item in selects.stata" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
</el-select>
|
</div> -->
|
<div class="header_item">
|
<span class="header_label">创建时间：</span>
|
<el-date-picker type="daterange" v-model="times" value-format="yyyy-MM-dd" start-placeholder="起始时间"
|
end-placeholder="结束时间" @change="changeTime" clear></el-date-picker>
|
</div>
|
<div class="header_item">
|
<el-button icon="el-icon-search" v-permission="'search'" @click="queryReset">查询</el-button>
|
<el-button icon="el-icon-plus" v-permission="'insert'" @click="addRow">新增</el-button>
|
</div>
|
</div>
|
|
<div class="main_content">
|
<div class="main_content_wrap">
|
<div class="table" v-for="(item, index) in tableData" :key="index">
|
|
<div class="row table_head">
|
<div class="table_head_item">
|
<span class="text title">{{ item.signboardName }}</span>
|
<span class="text">创建时间: {{ item.createTime }}</span>
|
<!-- <span class="text">录入方式: {{ item.inType }}</span> -->
|
</div>
|
<div class="table_head_item">
|
<el-button v-permission="'update'" @click="updateRow(index)">修改</el-button>
|
<el-button v-permission="'delete'" @click="deleteRow(index)">删除</el-button>
|
</div>
|
</div>
|
|
<div class="row">
|
<div class="name">工程名称</div>
|
<div class="value">{{ item.proName }}</div>
|
</div>
|
|
<div class="row">
|
<div class="name">施工单位</div>
|
<div class="value">{{ item.constructionUnit }}</div>
|
</div>
|
|
<div class="row aline">
|
<div>
|
<div class="name">施工日期</div>
|
<div class="value">{{ item.saveStamp }}</div>
|
</div>
|
<div>
|
<div class="name">施工部位</div>
|
<div class="value">{{ item.construction }}</div>
|
</div>
|
</div>
|
|
<div class="row" v-for="sub in item.dataLists" :key="sub.name">
|
<div class="column">
|
<div class="name">{{ sub.name }}</div>
|
<div class="column-item" v-for="(sub, index) in sub.value" :key="index">{{ sub }}</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
|
<!-- dialog -->
|
<el-dialog class="prop_dialog" width="80%" v-if="isRenderDialog" :title="dialogTitle" :visible.sync="asyncVisible"
|
@close="closeDialog">
|
<el-form ref="ruleForm" class="rule_form" :model="ruleForm" :rules="rules">
|
<el-form-item label="拌和站屏:" prop="mixingSignboardId">
|
<el-select size="mini" v-model="ruleForm.mixingSignboardId" :disabled="isUpdate" placeholder="请选择拌和站屏"
|
@change="changeSelectForm($event)">
|
<el-option v-for="item in selects.screenNames" :key="item.value" :label="item.label"
|
:value="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="工程名称:" prop="proName">
|
<el-input v-model="ruleForm.proName" size="mini" placeholder="请输入工程名称" clearable disabled></el-input>
|
</el-form-item>
|
<el-form-item label="施工单位:" prop="constructionUnit">
|
<el-input v-model="ruleForm.constructionUnit" size="mini" placeholder="请输入施工单位" clearable></el-input>
|
</el-form-item>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="施工日期:" prop="saveStamp">
|
<el-date-picker v-model="ruleForm.saveStamp" size="mini" value-format="yyyy-MM-dd" placeholder="请输入施工日期"
|
clearable></el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="施工部位:" prop="construction">
|
<el-input v-model="ruleForm.construction" size="mini" placeholder="请输入施工部位" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-button style="margin: 0 0 20px 130px;" @click="addFormCol">添加材料</el-button>
|
|
<div style="display: flex;">
|
<div style="margin-right: 10px;" v-for="(item, index) in ruleForm.infos " :key="index">
|
<el-form-item :label="index === 0 ? '材料名称' : ''" :prop="`infos.${index}.dictId`">
|
<!-- <el-select v-model="item.dictId" size="mini" placeholder="请选择材料名称">
|
<el-option v-for="item in selects.materials" :key="item.value" :label="item.label"
|
:value="item.value"></el-option>
|
</el-select> -->
|
<el-input v-model="item.dictId" size="mini" placeholder="请输入" clearable></el-input>
|
</el-form-item>
|
<el-form-item :label="index === 0 ? '规格型号' : ''" :prop="`infos.${index}.spec`">
|
<el-input v-model="item.spec" size="mini" placeholder="请输入" clearable></el-input>
|
</el-form-item>
|
<el-form-item :label="index === 0 ? '生产厂家' : ''" :prop="`infos.${index}.manufacturer`">
|
<el-input v-model="item.manufacturer" size="mini" placeholder="请输入" clearable></el-input>
|
</el-form-item>
|
<el-form-item :label="index === 0 ? '材料含水率(%)' : ''" :prop="`infos.${index}.watFull`">
|
<el-input v-model="item.watFull" size="mini" placeholder="请输入" clearable></el-input>
|
</el-form-item>
|
<el-form-item :label="index === 0 ? '理论用量(kg/m³)' : ''" :prop="`infos.${index}.planAmnt`">
|
<el-input v-model="item.planAmnt" size="mini" placeholder="请输入" clearable></el-input>
|
</el-form-item>
|
<el-form-item :label="index === 0 ? '实际用量(kg/m³)' : ''" :prop="`infos.${index}.factAmnt`">
|
<el-input v-model="item.factAmnt" size="mini" placeholder="请输入" clearable></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
|
</el-form>
|
<div slot="footer">
|
<el-button @click="asyncVisible = false">取 消</el-button>
|
<el-button class="submit_btn" @click="onSubmit('ruleForm')">提 交</el-button>
|
</div>
|
</el-dialog>
|
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
loading: false,
|
isRenderDialog: false,
|
asyncVisible: false,
|
submitMode: '', // add update
|
times: [], // 时间范围
|
selects: {
|
screenNames: [], // 配合比屏
|
// materials: [] // 材料名称[先改成输入,,字典表材料不匹配]
|
}, // 下拉框状态选择汇总
|
tableData: [{
|
inType: '', // 录入方式
|
mixingSignboardId: '', // 屏id
|
createTime: '', // 创建时间
|
signboardName: '', // 标识排
|
proName: '', // 工程名称
|
constructionUnit: '', // 施工单位
|
saveStamp: '', // 施工日期
|
construction: '', // 施工部位
|
mixingConsumeId: '', // 每个材料id
|
dataLists: [
|
{name: '材料名称', type: 'dictId', value: []}, // 材料名称
|
{name: '规格型号', type: 'spec', value: []}, // 规格型号
|
{name: '生产厂家', type: 'manufacturer', value: []}, // 生产厂家
|
{name: '材料含水率(%)', type: 'watFull', value: []}, // 含水率
|
{name: '理论用量(kg/m³)', type: 'planAmnt', value: []}, // 理论用量
|
{name: '实际用量(kg/m³)', type: 'factAmnt', value: []}, // 实际用量
|
],
|
dataListFlat: [] // 修改时赋值使用
|
}],
|
ruleForm: {
|
mixingSignboardId: '', // 屏名称id
|
proName: '', // 工程名称 [拌和站屏下拉框联动]
|
constructionUnit: '', // 施工单位
|
saveStamp: '', // 施工日期
|
construction: '', // 施工部位
|
infos: [{
|
dictId: '',
|
spec: '',
|
manufacturer: '',
|
watFull: '',
|
planAmnt: '',
|
factAmnt: '',
|
}]
|
},
|
queryInfo: {
|
pageNum: 1,
|
pageSize: 9999,
|
// stata: '', // 录入方式
|
mixingSignboardId: '', // 拌和站屏名称
|
strTime: '',
|
endTime: '',
|
},
|
}
|
},
|
computed: {
|
dialogTitle() {
|
return this.submitMode === 'update' ? '修改' : '添加'
|
},
|
isUpdate() {
|
return this.submitMode === 'update'
|
},
|
},
|
created() {
|
this.$http = this.$api.Materials.mixRatioSrcreen
|
this.rawRuleFormInfos = {...this.ruleForm.infos[0]} // 原始的infos.添加材料使用
|
this.selects.stata = [ // 录入方式
|
{value: 1, label: '自动'},
|
{value: 2, label: '手动'},
|
]
|
this.selects.stataMap = {
|
1: '自动',
|
2: '手动',
|
}
|
this.rules = {
|
mixingSignboardId: [{required: true, message: '请选择拌和站屏', trigger: 'change'}],
|
proName: [{required: true, message: '请输入工程名称', trigger: 'change'}],
|
constructionUnit: [{required: true, message: '请输入工程名称', trigger: 'blur'}],
|
saveStamp: [{required: true, message: '请输入施工日期', trigger: 'blur'}],
|
construction: [{required: true, message: '请输入施工部位', trigger: 'blur'}],
|
infos: [{
|
dictId: [{required: true, message: '请输入', trigger: 'blur'}],
|
spec: [{required: true, message: '请输入', trigger: 'blur'}],
|
manufacturer: [{required: true, message: '请输入', trigger: 'blur'}],
|
watFull: [{required: true, message: '请输入', trigger: 'blur'}],
|
planAmnt: [{required: true, message: '请输入', trigger: 'blur'}],
|
factAmnt: [{required: true, message: '请输入', trigger: 'blur'}],
|
}]
|
}
|
this.getLists()
|
this.getScreenNames()
|
},
|
methods: {
|
// 获取table列表数据
|
getLists() {
|
this.$http.getLists(this.queryInfo).then(res => {
|
this.tableData = [{
|
inType: '', // 录入方式
|
mixingSignboardId: '', // 屏id
|
createTime: '', // 创建时间
|
signboardName: '', // 标识排
|
proName: '', // 工程名称
|
constructionUnit: '', // 施工单位
|
saveStamp: '', // 施工日期
|
construction: '', // 施工部位
|
mixingConsumeId: '', // 每个材料id
|
dataLists: [
|
{name: '材料名称', type: 'dictId', value: []}, // 材料名称
|
{name: '规格型号', type: 'spec', value: []}, // 规格型号
|
{name: '生产厂家', type: 'manufacturer', value: []}, // 生产厂家
|
{name: '材料含水率(%)', type: 'watFull', value: []}, // 含水率
|
{name: '理论用量(kg/m³)', type: 'planAmnt', value: []}, // 理论用量
|
{name: '实际用量(kg/m³)', type: 'factAmnt', value: []}, // 实际用量
|
],
|
dataListFlat: [] // 修改时赋值使用
|
}]
|
if (res.statusMsg === 'ok' && res.data) {
|
const {list} = res.data
|
if (list && list.length) {
|
let temps = JSON.parse(JSON.stringify(this.tableData[0]))
|
list.forEach((item, index) => {
|
if (!this.tableData[index]) {
|
this.tableData.push(JSON.parse(JSON.stringify(temps)))
|
}
|
|
let {tmixingConsumes, signboardName, proName} = item
|
let curTableData = this.tableData[index]
|
curTableData.signboardName = signboardName
|
curTableData.proName = proName
|
|
if (tmixingConsumes && tmixingConsumes.length) {
|
if (!curTableData.mixingSignboardId) {
|
curTableData.constructionUnit = tmixingConsumes[0].constructionUnit
|
curTableData.createTime = tmixingConsumes[0].createTime
|
curTableData.mixingSignboardId = tmixingConsumes[0].mixingSignboardId
|
curTableData.saveStamp = tmixingConsumes[0].saveStamp
|
curTableData.construction = tmixingConsumes[0].construction
|
}
|
|
tmixingConsumes.forEach(item => {
|
curTableData.dataLists.forEach(val => {
|
item[val.type] && val.value.push(item[val.type])
|
})
|
curTableData.dataListFlat.push({
|
constructionUnit: item.constructionUnit,
|
mixingConsumeId: item.mixingConsumeId,
|
dictId: item.dictId,
|
spec: item.spec,
|
manufacturer: item.manufacturer,
|
watFull: item.watFull,
|
planAmnt: item.planAmnt,
|
factAmnt: item.factAmnt,
|
star: item.star
|
})
|
})
|
}
|
})
|
}
|
}
|
})
|
},
|
//获取字典表材料名称
|
// async getDicFilteredData() {
|
// let params = {pageNum: 1, pageSize: 100000000}
|
// let {data} = await this.$api.Dictionary.searchDictionary(params)
|
// data.list.forEach(item => {
|
// if (item.dictType === 'pipe_materials') {
|
// this.selects.materials.push({
|
// label: item.dictName,
|
// value: item.dictId,
|
// })
|
// }
|
// })
|
// },
|
// 获取配比屏名称
|
async getScreenNames() {
|
const params = {pageNum: 1, pageSize: 9999}
|
let {data} = await this.$http.getScreenNames(params)
|
let temps = []
|
data.forEach(item => {
|
temps.push({
|
label: item.signboardName,
|
value: item.mixingSignboardId,
|
proName: item.proName,
|
})
|
})
|
this.selects.screenNames.push(...temps)
|
},
|
// 查询按钮列表信息
|
queryReset() {
|
this.getLists()
|
},
|
resetForm(formName) {
|
this.$refs[formName].resetFields()
|
|
let ruleFormItem = this.ruleForm.infos[0]
|
let rulesItem = this.rules.infos[0]
|
this.ruleForm.infos = [{...ruleFormItem}]
|
this.rules.infos = [{...rulesItem}]
|
},
|
showDialog() {
|
// eslint-disable-next-line no-async-promise-executor
|
return new Promise(async resolve => {
|
if (!this.isRenderDialog) {
|
this.isRenderDialog = true
|
}
|
// if (!this.selects.materials.length) {
|
// await this.getDicFilteredData()
|
// }
|
this.asyncVisible = true
|
this.$nextTick(() => {
|
resolve()
|
})
|
})
|
},
|
closeDialog() {
|
this.asyncVisible = false
|
this.resetForm('ruleForm')
|
},
|
addRow() {
|
this.submitMode = 'add'
|
this.showDialog()
|
},
|
updateRow(i) {
|
this.submitMode = 'update'
|
this.showDialog().then(() => {
|
const {mixingSignboardId, proName, constructionUnit, saveStamp, construction, dataListFlat} = this.tableData[i]
|
this.ruleForm = Object.assign(this.ruleForm, {
|
mixingSignboardId,
|
proName,
|
constructionUnit,
|
saveStamp,
|
construction,
|
infos: JSON.parse(JSON.stringify(dataListFlat))
|
})
|
this.changeSelectForm(mixingSignboardId)
|
})
|
},
|
deleteRow(i) {
|
this.$confirm("该操作将删除该信息，是否继续删除?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(() => {
|
let star = ''
|
let mixingConsumeIds = []
|
this.tableData[i].dataListFlat.forEach((item, index) => {
|
if (index === 0) {
|
star = item.star + ''
|
}
|
mixingConsumeIds.push(item.mixingConsumeId)
|
})
|
this.$http.delete({star, mixingConsumeIds}).then(res => {
|
if (res.statusMsg === 'ok') {
|
this.getLists()
|
this.$message.success("删除成功！")
|
} else {
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
})
|
},
|
addFormCol() {
|
let ruleFormItem = this.rawRuleFormInfos
|
let rulesItem = this.rules.infos[0]
|
|
this.ruleForm.infos.push({...ruleFormItem})
|
this.rules.infos.push({...rulesItem})
|
},
|
onSubmit(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (!valid) return false
|
const {mixingSignboardId, proName, constructionUnit, saveStamp, construction, infos} = this.ruleForm
|
|
let newInfos = JSON.parse(JSON.stringify(infos))
|
newInfos.forEach(item => {
|
item.saveStamp = saveStamp
|
item.construction = construction
|
item.constructionUnit = constructionUnit
|
})
|
const params = {
|
mixingSignboardId,
|
proName,
|
mixingConsume: newInfos
|
}
|
if (this.isUpdate) {
|
// 更新
|
this.$http.update(params).then((res) => {
|
if (res.statusMsg === 'ok') {
|
this.closeDialog()
|
this.getLists()
|
this.$message.success('更新成功！')
|
} else {
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
} else {
|
// 添加
|
this.$http.insert(params).then((res) => {
|
if (res.statusMsg === 'ok') {
|
this.closeDialog()
|
this.getLists()
|
this.$message.success('添加成功！')
|
} else {
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
}
|
})
|
},
|
changeTime(times) {
|
times = times || ['', '']
|
this.queryInfo.strTime = times[0]
|
this.queryInfo.endTime = times[1]
|
},
|
changeSelectForm(val) {
|
let item = this.selects.screenNames.find(obj => obj.value === val)
|
this.ruleForm.proName = item.proName
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/style/layout-main.scss';
|
|
.main_content_wrap {
|
height: 100%;
|
overflow: auto;
|
|
.table {
|
display: flex;
|
flex-direction: column;
|
font-size: 16px;
|
margin-bottom: 26px;
|
color: #fff;
|
|
.row.table_head {
|
display: flex;
|
justify-content: space-between;
|
text-align: left;
|
color: #BEE2F0;
|
background: rgba(1, 142, 196, .35);
|
|
.table_head_item {
|
margin: 0 20px;
|
|
.title {
|
color: #39B5FE;
|
font-weight: bold;
|
}
|
|
.text {
|
margin-right: 40px;
|
}
|
}
|
}
|
|
.row {
|
flex: 1;
|
width: 100%;
|
min-height: 40px;
|
margin: 0 -1px -1px 0;
|
text-align: center;
|
line-height: 40px;
|
border: 1px solid #01B3EF;
|
|
.name {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
float: left;
|
width: 160px;
|
margin: -1px -1px -1px 0;
|
color: #BEE2F0;
|
border: 1px solid #01B3EF;
|
background: rgba(1, 142, 196, .75);
|
box-sizing: unset;
|
}
|
|
.value {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 100%;
|
overflow: hidden;
|
}
|
|
.column {
|
display: flex;
|
height: 100%;
|
|
.column-item {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex: 1;
|
padding: 0 4px;
|
line-height: 24px;
|
margin: -1px -1px -1px 0;
|
border: 1px solid #01B3EF;
|
word-break: break-all;
|
}
|
}
|
}
|
|
.row.aline {
|
display: flex;
|
|
> div {
|
flex: 1;
|
}
|
}
|
}
|
}
|
|
|
.rule_form {
|
overflow-x: hidden;
|
|
::v-deep .el-form-item__label {
|
min-width: 130px;
|
}
|
}
|
</style>
|
