From 1b004047f00cc846924209051ee654619c56a249 Mon Sep 17 00:00:00 2001 From: 叶松 <2217086471@qq.com> Date: 星期三, 06 十二月 2023 16:17:42 +0800 Subject: [PATCH] Merge branch 'master' of http://111.30.93.211:10101/r/supipe --- web/src/views/GoodManage/MixRatioScreen.vue | 568 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 564 insertions(+), 4 deletions(-) diff --git a/web/src/views/GoodManage/MixRatioScreen.vue b/web/src/views/GoodManage/MixRatioScreen.vue index 74753ca..74f6fb2 100644 --- a/web/src/views/GoodManage/MixRatioScreen.vue +++ b/web/src/views/GoodManage/MixRatioScreen.vue @@ -1,11 +1,571 @@ +<!-- 物资管理 ==> 配合比屏管理--> <template> - <div>222222222222222</div> + <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="name">{{ sub.name }}</div> + <div class="column"> + <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-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: 'dictName', 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: 'dictName', 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 + this.ruleForm.constructionUnit = item.constructionUnit + } + } +} </script> -<style lang="sass" scoped> -@import '../../style/layout-main.scss'; +<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%; + 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; + height: 100%; + 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; + margin: -1px -1px -1px 0; + border: 1px solid #01B3EF; + } + } + } + + .row.aline { + display: flex; + + > div { + flex: 1; + } + } + } +} + + +.rule_form { + overflow-x: hidden; + + ::v-deep .el-form-item__label { + min-width: 130px; + } +} </style> \ No newline at end of file -- Gitblit v1.9.3