<template>
|
<div class="main">
|
<div class="main_header">
|
<div class="header_item">
|
<span class="header_label">项目名称：</span>
|
<el-select v-model="projectId" :size="size" clearable placeholder="请选择项目名称">
|
<el-option
|
v-for="item in projectData"
|
:key="item.proId"
|
:label="item.proName"
|
:value="item.proId">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="header_item">
|
<span class="header_label">年份：</span>
|
<el-date-picker
|
v-model="yearDate"
|
type="year"
|
:size="size"
|
clearable
|
value-format="yyyy"
|
placeholder="请选择年份">
|
</el-date-picker>
|
</div>
|
<div class="header_item">
|
<el-button icon="el-icon-search" v-if="showButton('search')" @click="searchRebardemandList(true)">查询</el-button>
|
<el-button class="search_btn" icon="el-icon-plus" v-if="showButton('insert')" @click="propInsert()">新增</el-button>
|
</div>
|
</div>
|
<div class="main_content manin_rebar_content" v-loading="loading">
|
<span v-if="rebardemandList.length <= 0" class="none_text">暂无数据</span>
|
<div class="rebar_table" v-for="item in rebardemandList" :key="item.steelNeedId">
|
<div class="rebar_table_header">
|
<div>
|
<span>{{item.proName}}</span>
|
<span>{{item.years + '年'}}</span>
|
<span>{{item.dictName}}</span>
|
</div>
|
<div>
|
<el-button class="table_btn" size="mini" v-if="showButton('update')" @click="propUpdate(item)">修改</el-button>
|
<el-button class="delete_btn" size="mini" v-if="showButton('delete')" @click="deleteInfo(item)">删除</el-button>
|
</div>
|
</div>
|
<div class="rebar_table_content">
|
<div class="table_content_number">
|
<div class="number_item number_items number_item_index">序号</div>
|
<div
|
v-for="(element, index) in item.needNums"
|
:key="index"
|
class="number_item number_items">
|
{{index + 1}}
|
</div>
|
</div>
|
<div class="table_content_number">
|
<div class="number_item number_item_index">管片配筋</div>
|
<div
|
v-for="(element, ids) in item.needNums"
|
:key="ids"
|
class="number_item"
|
:style="{
|
'background': element.colors || 'none'
|
}">{{element.reinforcementName}}</div>
|
</div>
|
<div class="table_content_number">
|
<div class="number_item number_item_index">需求数量（环）</div>
|
<div
|
v-for="(element, ids) in item.needNums"
|
:key="ids"
|
class="number_item">
|
{{element.needNum || ''}}
|
</div>
|
</div>
|
<div class="table_content_number">
|
<div class="number_item number_item_index">已生产数量</div>
|
<div
|
v-for="(element, ids) in item.needNums"
|
:key="ids"
|
@click="showDetails(item,element)"
|
style="cursor: pointer;"
|
class="number_item"
|
:class="{
|
'item_f': element.needNums > element.okNum
|
}">
|
{{element.okNum || ''}}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="main_footer">
|
<el-pagination
|
background
|
@current-change="changePageNum"
|
:current-page="pageNum"
|
:page-size="pageSize"
|
layout="total, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
</div>
|
<!-- 钢筋笼明细弹框 -->
|
<el-dialog
|
class="prop_dialog"
|
title="钢筋笼明细"
|
:visible.sync="asyncBeardetails"
|
width="65%">
|
<div class="bears_content">
|
<el-table
|
v-loading="loadingDetails"
|
:data="bearDetails"
|
height="100%">
|
<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="produceNumber" label="钢筋笼编号" align="center" width="160"></el-table-column>
|
<el-table-column prop="proName" label="项目名称" align="center" width="250" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="sizeName" label="尺寸" align="center" ></el-table-column>
|
<el-table-column prop="reinforcementName" label="配筋" align="center"></el-table-column>
|
<el-table-column prop="blockName" label="块号" align="center" ></el-table-column>
|
<el-table-column prop="groupName" label="生产班组" align="center" ></el-table-column>
|
<el-table-column prop="quality_time" label="质检时间" align="center" width="160"></el-table-column>
|
<el-table-column prop="createUser" label="制作人" align="center" ></el-table-column>
|
<el-table-column prop="checkName" label="质检人" align="center" ></el-table-column>
|
<el-table-column prop="isQualified" label="质量标注" align="center" ></el-table-column>
|
<el-table-column prop="isModel" label="是否入模" align="center" ></el-table-column>
|
</el-table>
|
</div>
|
<div class="bear_footer">
|
<el-pagination
|
background
|
@current-change="changeDetailsPageNum"
|
@size-change="changeDetailsPageSize"
|
:current-page="pageNumDetails"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="pageSizeDetails"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="totalDetails">
|
</el-pagination>
|
</div>
|
</el-dialog>
|
<!-- 新增计划信息 修改计划信息 -->
|
<el-dialog
|
class="prop_dialog"
|
:title="asyncTitle ? '新增需求计划' : '修改需求计划信息'"
|
:visible.sync="asyncRebardemand"
|
width="35%">
|
<el-form ref="form" :model="formcRebardemand" :rules="rulescRebardemand" label-width="auto" class="rule_form">
|
<el-form-item label="项目名称：" prop="proId">
|
<el-select v-model="formcRebardemand.proId" clearable placeholder="请选择项目名称" @change="changeProject">
|
<el-option
|
v-for="item in projectData"
|
:key="item.proId"
|
:label="item.proName"
|
:value="item.proId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="年份：" prop="years">
|
<el-date-picker
|
v-model="formcRebardemand.years"
|
type="year"
|
:size="size"
|
clearable
|
value-format="yyyy"
|
placeholder="请选择年份">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="尺寸：" prop="sizeId">
|
<el-select v-model="formcRebardemand.sizeId" :size="size" clearable placeholder="请选择尺寸">
|
<el-option
|
v-for="item in sizeData"
|
:key="item.sizes"
|
:label="item.dictName"
|
:value="item.sizes">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div style="height: 300px">
|
<el-table
|
:data="rebarInfoList"
|
height="100%" >
|
<el-table-column label="序号" width="100" align="center">
|
<template #default="scope">
|
<span>{{scope.$index + 1}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="管片配筋" align="center">
|
<template #default="{ row }">
|
<el-select v-model="row.reinforcementId" :size="size" clearable placeholder="请选择配筋">
|
<el-option
|
v-for="item in reinforcingbarsData"
|
:key="item.hasSteel"
|
:label="item.dictName"
|
:value="item.hasSteel">
|
</el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column label="数量（环）" align="center">
|
<template #default="{ row }">
|
<el-input-number
|
v-model="row.needNum"
|
:size="size"
|
:controls="false"
|
placeholder="请输入环数">
|
</el-input-number>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center">
|
<template #default="scope">
|
<el-button size="mini" icon="el-icon-delete" class="delete_icon" @click="deleteInfoData(scope.$index)"></el-button>
|
<template v-if="scope.$index === rebarInfoList.length - 1">
|
<el-button size="mini" icon="el-icon-circle-plus-outline" class="insert_icon" @click="addInfoData()"></el-button>
|
</template>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div slot="footer">
|
<el-button @click="asyncRebardemand = 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, throttle } from '../../../plugins/public'
|
export default {
|
data() {
|
return {
|
size: changeSize(),
|
projectId: '',
|
projectData: [],
|
yearDate: '',
|
pageNum: 1,
|
pageSize: 6,
|
total: 0,
|
loading: true,
|
bearDetails:[],//钢筋笼明细
|
pageNumDetails:1,
|
pageSizeDetails:10,
|
totalDetails:0,
|
loadingDetails:true,
|
proId:null,
|
sizeId:null,
|
reinforcementId:null,
|
years:null,
|
rebardemandList: [],
|
asyncTitle: true, // true 新增计划信息 false 修改计划信息
|
asyncRebardemand: false, // 弹窗
|
asyncBeardetails:false,
|
formcRebardemand: {}, // 表单信息
|
rulescRebardemand: {
|
proId: [{
|
required: true,
|
message: '请选择项目名称',
|
trigger: ['change', 'blur']
|
}],
|
years: [{
|
required: true,
|
message: '请选择年份',
|
trigger: ['change', 'blur']
|
}],
|
sizeId: [{
|
required: true,
|
message: '请选择尺寸',
|
trigger: ['change', 'blur']
|
}]
|
}, // 表单校验信息
|
sizeData: [],
|
reinforcingbarsData: [], // 配筋信息
|
rebarInfoList: [],
|
params: {
|
pageNum: 1,
|
pageSize: 1000000
|
}
|
}
|
},
|
mounted() {
|
const that = this;
|
// 根据窗口大小动态修改组件尺寸
|
window.onresize = () => {
|
that.size = changeSize();
|
}
|
that.getAllProjectInfo();
|
that.searchRebardemandList(true);
|
},
|
methods: {
|
// 获取项目下尺寸 配筋信息
|
async getProjectInfoData(proId) {
|
const { data } = await this.$api.Basics.getProjectSystemInfoData({
|
proId: proId
|
})
|
return data;
|
},
|
// 获取查询信息
|
async getAllProjectInfo() {
|
// 获取全部项目信息
|
const { data } = await this.$api.Engineer.searchProjects(this.params);
|
this.projectData = data.list;
|
},
|
// 查询钢筋需求计划列表信息
|
searchRebardemandList(bol) {
|
if(bol) {
|
this.pageNum = 1;
|
}
|
this.loading = true;
|
this.rebardemandList = [];
|
this.$api.Production.searchRebardemandList({
|
proId: this.projectId,
|
years: this.yearDate,
|
pageNum: this.pageNum,
|
pageSize: this.pageSize
|
}).then((res) => {
|
if(res.success) {
|
this.total = res.data.total;
|
this.rebardemandList = res.data.list;
|
}
|
this.loading = false;
|
}).catch(() => {
|
this.loading = false
|
});
|
},
|
//展示钢筋笼明细弹框
|
showDetails(val,num){
|
this.asyncBeardetails = true
|
this.proId = val.proId
|
this.sizeId = val.sizeId
|
this.reinforcementId = val.reinforcementId
|
this.years = val.years
|
this.searchBearDetails(val.proId,val.sizeId,num.reinforcementId,val.years)
|
},
|
//查询钢筋笼明细
|
searchBearDetails(proId,sizeId,reinforcementId,years){
|
this.loadingDetails = true;
|
this.bearDetails = [];
|
this.$api.Production.detailsBearProducts({
|
proId: proId,
|
sizeId:sizeId,
|
reinforcementId:reinforcementId,
|
years:years,
|
pageNum: this.pageNumDetails,
|
pageSize: this.pageSizeDetails
|
}).then((res) => {
|
if(res.statusMsg === 'ok') {
|
this.totalDetails = res.data.total;
|
this.bearDetails = res.data.list;
|
}else{
|
this.$message.warning(res.statusMsg)
|
}
|
this.loadingDetails = false;
|
}).catch(() => {
|
this.loadingDetails = false
|
});
|
},
|
// 切换钢筋笼明细页数
|
changeDetailsPageNum(page) {
|
this.pageNumDetails = page;
|
this.searchBearDetails(this.proId,this.sizeId,this.reinforcementId,this.years);
|
},
|
// 切换钢筋笼明细每页条数
|
changeDetailsPageSize(size) {
|
this.pageSizeDetails = size;
|
this.searchBearDetails(this.proId,this.sizeId,this.reinforcementId,this.years);
|
},
|
// 打开添加信息
|
propInsert() {
|
this.asyncTitle = true;
|
this.asyncRebardemand = true;
|
},
|
// 打开修改信息
|
propUpdate(row) {
|
this.asyncTitle = false;
|
this.asyncRebardemand = true;
|
this.getProjectInfoData(row.proId).then((data) => {
|
this.sizeData = data.proSizes;
|
this.reinforcingbarsData = data.proHas;
|
});
|
this.$api.Production.getRebardemandInfo({
|
steelNeedId: row.steelNeedId
|
}).then((res) => {
|
this.$set(this.formcRebardemand, 'steelNeedId', res.data.steelNeedId);
|
this.$set(this.formcRebardemand, 'proId', res.data.proId);
|
this.$set(this.formcRebardemand, 'years', res.data.years);
|
this.$set(this.formcRebardemand, 'sizeId', res.data.sizeId);
|
if(res.data.needNums.length > 0) {
|
this.rebarInfoList = res.data.needNums.map(item => {
|
return {
|
consumptionId: '',
|
needNum: item.needNum,
|
steelId: item.steelNeedId,
|
reinforcementId: item.reinforcementId
|
}
|
})
|
}
|
})
|
},
|
// 删除需求计划信息
|
deleteInfo(row) {
|
this.$confirm("该操作将删除该需求计划，是否继续删除?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
this.$api.Production.deleteRebardemandInfo({steelNeedId: row.steelNeedId})
|
.then(res => {
|
if(res.success) {
|
this.searchRebardemandList(true);
|
this.$message.success("删除成功！");
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
})
|
.catch(() => {
|
this.$message.warning("您已取消");
|
})
|
},
|
// 增加数据
|
addInfoData() {
|
this.rebarInfoList.push({
|
consumptionId: '',
|
steelId: '',
|
reinforcementId: '',
|
needNum: 0
|
});
|
},
|
// 删除数据
|
deleteInfoData(index) {
|
if(this.rebarInfoList.length === 1) {
|
this.$message.warning('超出删除上限！');
|
return false
|
}
|
this.$nextTick(() => {
|
this.rebarInfoList.splice(index, 1);
|
})
|
},
|
// 提交添加信息
|
submitInsertForm: throttle(function() {
|
this.$refs.form.validate((valid) => {
|
if(valid) {
|
const params = Object.assign({}, this.formcRebardemand);
|
this.rebarInfoList.forEach((item, index) => item.sorts = (index + 1));
|
params.sizeList = this.rebarInfoList
|
this.$api.Production.insertRebardemandInfo(params).then((res) => {
|
if(res.success) {
|
this.asyncRebardemand = false;
|
this.$message.success("添加成功！");
|
this.searchRebardemandList(true);
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
}
|
})
|
}, 3000),
|
// 提交修改信息
|
submitUpdateForm: throttle(function() {
|
this.$refs.form.validate((valid) => {
|
if(valid) {
|
const params = Object.assign({}, this.formcRebardemand);
|
this.rebarInfoList.forEach((item, index) => item.sorts = (index + 1));
|
params.sizeList = this.rebarInfoList
|
this.$api.Production.updateRebardemandInfo(params).then((res) => {
|
if(res.success) {
|
this.asyncRebardemand = false;
|
this.$message.success("修改成功！");
|
this.searchRebardemandList(true);
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
}
|
})
|
}, 3000),
|
// 根据项目获取 配筋 尺寸信息
|
changeProject(value) {
|
if(this.formcRebardemand.sizeId) {
|
this.$set(this.formcRebardemand, 'sizeId', '');
|
}
|
this.rebarInfoList.forEach((item, index) => {
|
this.$set(this.rebarInfoList[index], 'reinforcementId', '');
|
})
|
if(value) {
|
this.getProjectInfoData(value).then((data) => {
|
this.sizeData = data.proSizes;
|
this.reinforcingbarsData = data.proHas;
|
});
|
} else {
|
this.sizeData = [];
|
this.reinforcingbarsData = [];
|
}
|
},
|
// 切换页码
|
changePageNum(page) {
|
this.pageNum = page;
|
this.searchRebardemandList();
|
},
|
// 判断按钮权限信息
|
showButton(str) {
|
const pinia = buttonPinia();
|
return pinia.$state.buttonInfo.includes(str);
|
}
|
},
|
watch: {
|
asyncRebardemand(bol) {
|
if(!bol) {
|
this.rebarInfoList = [];
|
this.sizeData = [];
|
this.reinforcingbarsData = [];
|
this.formcRebardemand = {};
|
this.$refs.form.resetFields();
|
} else {
|
this.getAllProjectInfo();
|
this.$set(this.rebarInfoList, 0, {
|
consumptionId: '',
|
steelId: '',
|
reinforcementId: '',
|
needNum: ''
|
});
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../../../style/layout-main.scss';
|
|
.bears_content{
|
height: 500px;
|
/deep/ .el-table th.el-table__cell{
|
background:#082F57!important;
|
color: #18F6F8;
|
border-right: 1px solid #18F6F8!important;
|
border-bottom: 1px solid #18F6F8!important;
|
border-top: 1px solid #18F6F8!important;
|
&:last-child{
|
border-right-color:transparent!important;
|
}
|
}
|
/deep/.el-table .el-table__cell{
|
border-left: 1px solid #18F6F8!important;
|
border-right: 1px solid #18F6F8!important;
|
border-bottom: 1px solid #18F6F8!important;
|
}
|
/deep/.el-table tr:nth-of-type(even){
|
background: transparent;
|
}
|
}
|
.bear_footer{
|
text-align: right;
|
line-height: 20px;
|
margin: 15px 0 15px;
|
}
|
.manin_rebar_content {
|
position: relative;
|
display: flex;
|
flex-wrap: wrap;
|
align-content: flex-start;
|
width: calc(100% - 20px);
|
// height: 100%;
|
overflow-y: auto !important;
|
|
.none_text {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translateX(-50%) translateY(-50%);
|
color: #b4adad;
|
}
|
|
.rebar_table {
|
margin: 10px;
|
width: calc(50% - 20px);
|
color: #19FFFF;
|
background: #031A46;
|
border-radius: 4px;
|
|
.rebar_table_header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 5px 15px;
|
height: 40px;
|
background: #085172;
|
border-radius: 4px 4px 0 0;
|
|
span {
|
padding: 0 10px;
|
|
&:first-child {
|
position: relative;
|
padding-left: 20px;
|
|
&::before {
|
content: "";
|
position: absolute;
|
top: 50%;
|
left: 0;
|
transform: translateY(-50%);
|
width: 4px;
|
height: 18px;
|
background: #19FFFF;
|
}
|
}
|
}
|
}
|
|
.rebar_table_content {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
padding: 10px;
|
width: 100%;
|
height: calc(100% - 40px);
|
overflow-x: auto;
|
|
&::-webkit-scrollbar {
|
height: 4px;
|
}
|
|
&::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
box-shadow: inset 0 0 5px transparent;
|
background: rgba(8, 81, 114, .8);
|
}
|
|
&::-webkit-scrollbar-track {
|
box-shadow: inset 0 0 5px transparent;
|
border-radius: 10px;
|
background: rgba(8, 81, 114, .4) 5%,;
|
}
|
|
.table_content_number {
|
display: flex;
|
justify-content: flex-start;
|
border: 1px solid #085172;
|
|
&:first-child {
|
margin-bottom: 12px;
|
border: none;
|
}
|
|
&:nth-of-type(3) {
|
border: none;
|
border-right: 1px solid #085172;
|
border-left: 1px solid #085172;
|
}
|
|
.number_item_index {
|
text-align: center;
|
}
|
|
.number_item {
|
width: 50px;
|
padding: 10px;
|
color: #fff;
|
font-weight: 600;
|
text-align: center;
|
border-right: 1px solid #085172;
|
|
&:first-child {
|
width: 150px;
|
color: #19FFFF;
|
font-weight: 500;
|
background: #052C55;
|
}
|
|
&:last-child {
|
border: none;
|
}
|
}
|
|
.number_items {
|
font-weight: 500;
|
background: #052C55;
|
border-color: #052C55;
|
|
&:first-child {
|
color: #19FFFF;
|
border: 1px solid #085172;
|
}
|
}
|
}
|
|
.item_a {
|
background: #095E7D;
|
}
|
|
.item_b {
|
background: #0E8CA2;
|
}
|
|
.item_c {
|
background: #12B9C6;
|
}
|
|
.item_d {
|
background: #16E7EB;
|
}
|
|
.item_e {
|
background: #00D6F2;
|
}
|
|
.item_f {
|
background: #F28C29;
|
}
|
}
|
}
|
}
|
|
.delete_icon {
|
color: #FD494B;
|
background: #0A2356;
|
border: none;
|
|
&:hover {
|
opacity: .9;
|
}
|
|
&:active {
|
opacity: .8;
|
}
|
}
|
|
.insert_icon {
|
color: #00D6F2;
|
background: #0A2356;
|
border: none;
|
|
&:hover {
|
opacity: .9;
|
}
|
|
&:active {
|
opacity: .8;
|
}
|
}
|
|
::v-deep .el-input-number .el-input__inner {
|
text-align: left;
|
}
|
</style>
|
