<template>
|
<!-- 生产计划管理 ==> 原料实际放量-->
|
<div class="main">
|
<!-- header-->
|
<div class="main_header">
|
<div class="header_item">
|
<span class="header_label">日期：</span>
|
<el-date-picker v-model="datePicker" type="daterange" range-separator="至" start-placeholder="开始日期"
|
end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="dateChange">
|
</el-date-picker>
|
</div>
|
<div class="header_item">
|
<el-button icon="el-icon-search" v-if="showButton('search')" @click="queryReset">查询</el-button>
|
<el-button class="search_btn" icon="el-icon-plus" v-if="showButton('insert')" @click="addRow">新增</el-button>
|
<el-button icon="el-icon-upload2" v-if="showButton('export')" @click="exportExcel">导出Excel</el-button>
|
</div>
|
</div>
|
<!-- content-->
|
<div class="main_content">
|
<el-table v-loading="loading" :data="dataLists" border height="100%">
|
<!-- -->
|
<el-table-column align="center" label="序号" width="48">
|
<template #default="scope">
|
<span>{{ (queryInfo.pageNum - 1) * queryInfo.pageSize + scope.$index + 1 }}</span>
|
</template>
|
</el-table-column>
|
<!-- -->
|
<el-table-column align="center" label="操作" width="76">
|
<template #default="{ row }">
|
<el-button class="copyBtn" size="mini" @click="copyRow(row)">复制</el-button>
|
</template>
|
</el-table-column>
|
<!-- -->
|
<el-table-column prop="materialReleaseTime" align="center" label="记录时间" width="136">
|
</el-table-column>
|
<!-- -->
|
<el-table-column prop="dataTime" align="center" label="数据日期" width="86">
|
</el-table-column>
|
<!-- -->
|
<el-table-column prop="quantity" align="center" label="方量">
|
</el-table-column>
|
<!-- -->
|
<el-table-column label="理论配比(kg/m³)" align="center">
|
<el-table-column v-for="item in materialNames" :label="item.dictName" :key="item.dictId" align="center">
|
<template #default="{ row }">
|
{{ row.treleaseTheoryKeys[item.dictId].releaseData | toFloat }}
|
</template>
|
</el-table-column>
|
</el-table-column>
|
<!-- -->
|
<el-table-column label="实际消耗(kg/m³)" align="center">
|
<el-table-column v-for="item in materialNames" :label="item.dictName" :key="item.dictId" align="center">
|
<template #default="{ row }">
|
{{ row.treleaseRealKeys[item.dictId].releaseData | toFloat }}
|
</template>
|
</el-table-column>
|
</el-table-column>
|
<!-- -->
|
<el-table-column label="操作" align="center" width="140">
|
<template #default="{ row }">
|
<el-button class="table_btn" size="mini" v-if="showButton('update')" @click="updateRow(row)">修改</el-button>
|
<el-button class="delete_btn" size="mini" v-if="showButton('delete')" @click="deleteRow(row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<!-- footer-->
|
<div class="main_footer">
|
<el-pagination background @current-change="changePageNum" @size-change="changePageSize"
|
:current-page="queryInfo.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="queryInfo.pageSize"
|
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
</el-pagination>
|
</div>
|
<!-- dialog-->
|
<el-dialog class="prop_dialog" v-if="isRender" :title="dialogTitle" :visible.sync="asyncVisible" width="700px"
|
@close="closeForm">
|
<el-form :inline="true" size="mini" :model="form" :rules="rules" ref="ruleForm" label-width="auto"
|
class="rule_form">
|
<!-- 理论 -->
|
<div class="labelText">理论配比(kg/m³)</div>
|
<!-- 理论配比 -->
|
<el-form-item style="width:282px" v-for="item in form.materialTheory" :key="`${item.dictId}${item.releaseType}`"
|
:label="item.dictName">
|
<el-input placeholder="请输入" type="number" v-model="item.releaseData" @input="doCompute($event, item.dictId)"
|
clearable></el-input>
|
</el-form-item>
|
<!-- 方量 -->
|
<el-form-item class="labelText2" type="number" label="方量(m³)" style="width:574px">
|
<el-input placeholder="请输入" v-model="form.quantity" @input="doComputeMulti($event)"></el-input>
|
</el-form-item>
|
<!-- 日期 -->
|
<el-form-item class="labelText2" type="number" label="数据日期" prop="dataTime" style="width:574px">
|
<el-date-picker v-model="form.dataTime" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
|
</el-form-item>
|
<!-- 实际配比 -->
|
<el-form-item style="width:282px" v-for="item in form.materialReal" :key="`${item.dictId}${item.releaseType}`"
|
:label="item.dictName">
|
<el-input type="number" v-model="item.releaseData" :disabled="true" clearable></el-input>
|
</el-form-item>
|
</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>
|
import {buttonPinia} from '../../pinia/index'
|
import {throttle, downFiles} from '../../plugins/public'
|
export default {
|
data() {
|
return {
|
isRender: false,
|
loading: false,
|
asyncVisible: false, // 添加 修改对话框
|
rowId: '', // 修改id
|
total: 0,
|
submitMode: '', // add update copy
|
dataLists: [],
|
datePicker: '',
|
queryInfo: {
|
pageNum: 1,
|
pageSize: 10,
|
strTime: '',
|
endTime: ''
|
},
|
rules: {
|
dataTime: [{required: true, message: '请选择日期', trigger: 'change'}]
|
},
|
form: null, // 表单数据 {}
|
materialNames: [], // 原料名称
|
materialNameKeys: {}, // {id: name}
|
}
|
},
|
computed: {
|
dialogTitle() {
|
return this.submitMode === 'update' ? '修改' : '新增'
|
},
|
isUpdate() {
|
return this.submitMode === 'update'
|
},
|
},
|
filters: {
|
toFloat(value) {
|
return value.toFixed(4)
|
}
|
},
|
async created() {
|
this.setFormProps()
|
this.getLists()
|
await this.getMaterialNames()
|
this.setFormProps()
|
},
|
methods: {
|
getLists() {
|
let params = this.queryInfo
|
this.loading = true
|
this.$api.Ducts.practicalRaw.getLists(params).then(res => {
|
this.loading = false
|
if (res.statusMsg === 'ok') {
|
let lists = res.data.list
|
// 接口返回是混一起的数据,,需要清洗.
|
lists.forEach(item => {
|
item.treleaseTheoryData = []
|
item.treleaseRealData = []
|
item.treleaseTheoryKeys = {}
|
item.treleaseRealKeys = {}
|
if (item.treleaseData.length) {
|
item.treleaseData.forEach(val => {
|
let newVal = {...val}
|
if (val.releaseType === 1) {
|
item.treleaseTheoryData.push(newVal)
|
item.treleaseTheoryKeys[val.dictId] = newVal
|
item.treleaseTheoryKeys[val.dictId].dictName = this.getMaterialNameById(val.dictId)
|
} else if (val.releaseType === 2) {
|
item.treleaseRealData.push(newVal)
|
item.treleaseRealKeys[val.dictId] = newVal
|
item.treleaseRealKeys[val.dictId].dictName = this.getMaterialNameById(val.dictId)
|
}
|
})
|
}
|
})
|
this.total = res.data.total
|
this.dataLists = lists
|
} else {
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
},
|
//获取原料名称
|
getMaterialNames() {
|
return new Promise(resolve => {
|
this.$api.Ducts.practicalRaw.getMaterialNames({}).then(res => {
|
if (res.statusMsg === 'ok') {
|
this.materialNames.push(...res.data)
|
this.materialNames.forEach(item => {
|
this.materialNameKeys[item.dictId] = item.dictName
|
})
|
resolve()
|
} else {
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
})
|
|
},
|
getMaterialNameById(id) {
|
return this.materialNameKeys[id] || ''
|
},
|
setFormProps(options = {}) {
|
const {quantity = 1, dataTime = null, materialTheory = [], materialReal = []} = options
|
let _form = {
|
quantity, // 方量
|
dataTime, // 数据时间
|
materialTheory, // 原料理论信息
|
materialReal // 原料实际信息信息
|
}
|
if (Object.keys(options).length) {
|
this.form = _form
|
return
|
}
|
this.materialNames.forEach(item => {
|
_form.materialTheory.push({
|
dictName: item.dictName, // 原料id
|
dictId: item.dictId, // 原料id
|
releaseData: '', // 数值
|
releaseType: 1 // 1理论耗量 2实际消耗
|
})
|
_form.materialReal.push({
|
dictName: item.dictName,
|
dictId: item.dictId,
|
releaseData: '',
|
releaseType: 2
|
})
|
})
|
this.form = _form
|
},
|
doCompute(value, dictId) {
|
let {quantity, materialReal} = this.form
|
for (let i = 0; i < materialReal.length; i++) {
|
let item = materialReal[i]
|
if (item.dictId === dictId) {
|
item.releaseData = quantity * value
|
break
|
}
|
}
|
},
|
doComputeMulti() {
|
let {quantity, materialReal, materialTheory} = this.form
|
let _materialTheory = {}
|
materialTheory.forEach(item => {
|
if (item.releaseData) {
|
_materialTheory[item.dictId] = item.releaseData
|
}
|
})
|
materialReal.forEach(item => {
|
if (_materialTheory[item.dictId]) {
|
item.releaseData = _materialTheory[item.dictId] * quantity
|
} else {
|
item.releaseData = ''
|
}
|
})
|
},
|
showForm() {
|
!this.isRender && (this.isRender = true)
|
this.asyncVisible = true
|
},
|
closeForm() {
|
this.asyncVisible = false
|
this.resetForm('ruleForm')
|
this.setFormProps()
|
},
|
resetForm(formName) {
|
this.$refs[formName].resetFields()
|
},
|
dateChange(dates) {
|
dates = dates || []
|
// if (dates.length) {
|
// dates[1] = dates[1].slice(0, -8) + '23:59:59'
|
// }
|
this.queryInfo.strTime = dates[0] || ''
|
this.queryInfo.endTime = dates[1] || ''
|
},
|
// 查询按钮列表信息
|
queryReset() {
|
this.queryInfo.pageNum = 1
|
this.queryInfo.pageSize = 10
|
this.getLists()
|
},
|
addRow() {
|
this.submitMode = 'add'
|
this.showForm()
|
},
|
// 根据 materialNameKeys 的顺序来进行数据排序.
|
getSortRow(row) {
|
const {quantity, dataTime, treleaseTheoryData, treleaseRealData} = row
|
const sorts = Object.keys(this.materialNameKeys)
|
treleaseTheoryData.sort(function (a, b) {
|
return (sorts.indexOf(a.dictId) - sorts.indexOf(b.dictId))
|
})
|
treleaseRealData.sort(function (a, b) {
|
return (sorts.indexOf(a.dictId) - sorts.indexOf(b.dictId))
|
})
|
return {
|
quantity,
|
dataTime,
|
materialTheory: treleaseTheoryData,
|
materialReal: treleaseRealData,
|
}
|
},
|
copyRow(row) {
|
this.submitMode = 'copy'
|
this.rowId = row.materialReleaseId
|
this.setFormProps(this.getSortRow(row))
|
this.showForm()
|
},
|
updateRow(row) {
|
this.submitMode = 'update'
|
this.rowId = row.materialReleaseId
|
this.setFormProps(this.getSortRow(row))
|
this.showForm()
|
},
|
deleteRow(row) {
|
this.$confirm("该操作将删除该信息，是否继续删除?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(() => {
|
this.$api.Ducts.practicalRaw.delete({materialReleaseId: row.materialReleaseId})
|
.then(res => {
|
if (res.statusMsg === 'ok') {
|
this.queryReset()
|
this.$message.success("删除成功！")
|
} else {
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
}).catch(() => {
|
this.$message.warning("您已取消");
|
})
|
},
|
onSubmit: throttle(function (formName) {
|
this.$refs[formName].validate((valid) => {
|
if (!valid) return false
|
const {quantity, dataTime, materialTheory, materialReal} = this.form
|
let releaseData = [...materialTheory, ...materialReal]
|
// releaseData是空数据需要重置为0,否则接口报错
|
releaseData.forEach(item => {
|
if (!item.releaseData) {
|
item.releaseData = 0
|
}
|
})
|
let params = {quantity, dataTime, releaseData}
|
if (this.isUpdate) {
|
// 更新
|
params.materialReleaseId = this.rowId
|
this.$api.Ducts.practicalRaw.update(params).then(res => {
|
if (res.statusMsg === 'ok') {
|
this.closeForm()
|
this.getLists()
|
this.$message.success('修改成功！')
|
} else {
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
} else {
|
// 添加 | 复制
|
this.$api.Ducts.practicalRaw.insert(params).then(res => {
|
if (res.statusMsg === 'ok') {
|
this.closeForm()
|
this.getLists()
|
this.$message.success('添加成功！')
|
} else {
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
}
|
})
|
}, 1000),
|
exportExcel() {
|
let params = this.queryInfo
|
this.$api.Ducts.practicalRaw.exportXls(params).then(res => {
|
if (res && res.size) {
|
downFiles(res, '原料实际放量', 'xlsx')
|
} else {
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
},
|
// 判断按钮权限信息
|
showButton(str) {
|
const pinia = buttonPinia();
|
return pinia.$state.buttonInfo.includes(str);
|
},
|
// 切换页数
|
changePageNum(num) {
|
this.queryInfo.pageNum = num
|
this.getLists()
|
},
|
// 切换每页条数
|
changePageSize(num) {
|
this.queryInfo.pageSize = num
|
this.getLists()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../../style/layout-main.scss';
|
|
/deep/ {
|
&::-webkit-scrollbar {
|
width: 8px;
|
height: 8px;
|
}
|
|
&::-webkit-scrollbar-corner {
|
background-color: transparent;
|
}
|
|
&::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
box-shadow: inset 0 0 5px transparent;
|
background: #39B5FE;
|
}
|
|
&::-webkit-scrollbar-track {
|
box-shadow: inset 0 0 5px transparent;
|
border-radius: 10px;
|
background: rgba(76, 188, 254, .3);
|
}
|
}
|
|
.labelText {
|
display: block;
|
font-weight: bold;
|
color: #39B5FE;
|
padding-bottom: 18px;
|
border-bottom: 1px solid #39B5FE;
|
|
&:first-child {
|
position: relative;
|
margin-bottom: 18px;
|
text-indent: 14px;
|
|
&::after {
|
content: '';
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 2px;
|
height: 16px;
|
border-left: 3px solid #39B5FE;
|
}
|
}
|
}
|
|
::v-deep .labelText2 .el-form-item__label-wrap .el-form-item__label {
|
font-weight: bold;
|
color: #39B5FE;
|
}
|
|
.el-table ::v-deep {
|
border: 1px solid #39B5FE;
|
|
.copyBtn {
|
background-position: unset;
|
}
|
|
th.el-table__cell {
|
border-bottom: 1px solid #39B5FE;
|
border-right: 1px solid #39B5FE;
|
background: rgba(76, 188, 254, .16) !important;
|
}
|
|
tr {
|
background: none !important;
|
}
|
|
th.el-table__cell.is-leaf,
|
td.el-table__cell {
|
border-bottom: 1px solid #39B5FE;
|
border-right: 1px solid #39B5FE;
|
}
|
}
|
</style>
|
