<template>
|
<el-dialog
|
:visible.sync="editConfig.visible"
|
:before-close="handleClose"
|
>
|
<!-- 头 -->
|
<div slot="title" class="dialog-header">
|
<span>{{editConfig.title}}车间管理</span>
|
</div>
|
<div class="dialog-view">
|
<el-form
|
ref="workshopForm"
|
:model="editConfig.infomitton"
|
:rules="rules"
|
label-position="right"
|
label-width="100px"
|
size="mini"
|
>
|
<div>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item prop="workshop" label="车间:" style="width: 100%;">
|
<el-select
|
:disabled="editConfig.OperationType===3"
|
v-model="editConfig.infomitton.workshop"
|
value-key="workshopName" placeholder="请选择车间"
|
@change="selWorkshop"
|
>
|
<el-option
|
v-for="item in workshopList"
|
:key="item.ID"
|
:label="item.name"
|
:value="{workshopNumber:item.number,workshopName:item.name}">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="组别:" style="width: 100%;"
|
prop="groupNumber" >
|
<el-input
|
type="number"
|
:disabled="editConfig.OperationType===3"
|
v-model.number="editConfig.infomitton.groupNumber"
|
:rows="4"
|
style="resize: none !important;"
|
placeholder="请输入组别"
|
@change="changeGroupNumber"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="开始车号:" style="width: 100%;" prop="startCarNumber" >
|
<el-input
|
type="number"
|
:disabled="editConfig.OperationType===3"
|
v-model.number="editConfig.infomitton.startCarNumber"
|
:rows="4"
|
style="resize: none !important;"
|
placeholder="请输入开始车号"
|
@change="changeStartCarNumber"
|
>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="结束车号:" style="width: 100%;" prop="endCarNumber" >
|
<el-input
|
type="number"
|
:disabled="editConfig.OperationType===3"
|
v-model.number="editConfig.infomitton.endCarNumber"
|
:rows="4"
|
style="resize: none !important;"
|
placeholder="请输入结束车号"
|
>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="标志类型:" style="width: 100%;" >
|
<el-select
|
@change="changeCarFlag"
|
:disabled="editConfig.OperationType===3" v-model.number="editConfig.infomitton.carFlag" placeholder="请选择标志类型">
|
<el-option
|
v-for="item in carFlagList"
|
:key="item.value"
|
:label="item.name"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="备注:" style="width: 100%;" >
|
<el-input
|
:disabled="this.editConfig.OperationType===3"
|
v-model="editConfig.infomitton.notes"
|
type="textarea"
|
:rows="4"
|
style="resize: none !important;"
|
placeholder=""
|
>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
</el-form>
|
</div>
|
<div class="dialog-footer">
|
<div class="bottom-tabs">
|
<div class="tab-pane" style="background:#2a78fb;color: #fff">
|
组别明细列表
|
</div>
|
</div>
|
<div class="list-view">
|
<TableCommonView :table-list="tableList"
|
@selTableCol="selTableCol">
|
<template slot="tableButton">
|
<el-table-column label="开始车号" width="120" align="center">
|
<template slot-scope="scope">
|
{{scope.row.startCarNumber?scope.row.startCarNumber:'--'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="开始标记" width="120" align="center" v-if="editConfig.infomitton.carFlag===1">
|
<template slot-scope="scope">
|
{{scope.row.startCarHalf===1?'左半车':'右半车'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="结束车号" width="120" align="center">
|
<template slot-scope="scope">
|
<el-input type="number" :disabled="scope.row.noEdit" placeholder="请输入" v-model.number="scope.row.endCarNumber" size="small" v-if="editConfig.OperationType!==3"></el-input>
|
<span v-else>{{scope.row.endCarNumber}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="结束标记" v-if="editConfig.infomitton.carFlag===1" width="120" align="center">
|
<template slot-scope="scope">
|
<el-select size="small" :disabled="scope.row.noEdit" v-model="scope.row.endCarHalf" v-if="editConfig.OperationType!==3">
|
<el-option label="左半车" :value="1">左半车</el-option>
|
<el-option label="右半车" :value="2">右半车</el-option>
|
</el-select>
|
<span v-else>{{scope.row.endCarNumber}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="备注" width="100" align="center">
|
<template slot-scope="scope">
|
<el-input placeholder="请输入" v-model="scope.row.notes" size="small" v-if="editConfig.OperationType!==3"></el-input>
|
<span v-else>{{scope.row.notes}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="操作"
|
width="60"
|
align="center"
|
v-if="editConfig.OperationType!==3"
|
>
|
<template slot-scope="scope">
|
<el-button
|
type="text"
|
size="small"
|
@click.stop="handleDelClick(scope, '操作')">删除</el-button>
|
</template>
|
</el-table-column>
|
</template>
|
</TableCommonView>
|
</div>
|
<div style="line-height: 50px" v-if="editConfig.OperationType!==3">
|
<el-button type="primary" size="small" @click="addItem">新增</el-button>
|
<el-button type="primary" size="small" @click="clearItem">清空</el-button>
|
</div>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button
|
type="primary"
|
size="small"
|
@click="saveClick"
|
:disabled="editConfig.OperationType===3">保存</el-button>
|
<el-button size="small" @click="handleClose">取消</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import {getDict,saveWorkshopManage} from "@/api/systemSetting/workshopManage";
|
export default {
|
name: "workshopDialog",
|
props:{
|
editConfig:{
|
type:Object,
|
default:()=>({
|
visible: false,//弹框是否可见
|
title: "新建",
|
OperationType:1,//1 新建 2 修改 3 查看
|
infomitton: {
|
details:[]//列表数据
|
},//表单数据 + 明细列表数据
|
})
|
}
|
},
|
data(){
|
return {
|
tableList:{},
|
showCol: ["开始标记","车间", "组别", "开始车号","开始标记", "结束车号", "结束标记","标志类型", "备注"],
|
tableColumn: [
|
{ label: "车间", prop: "workshopName" },
|
{ label: "组别", prop: "groupNumber" },
|
{ label: "标志类型", prop: "carFlag" ,isCallMethod:true,getCallMethod:(value)=>{return value===0?'全车':'半车'}},
|
/*{ label: "开始车号", prop: "startCarNumber" },*/
|
/*{ label: "结束车号", prop: "endCarNumber" },*/
|
/*{ label: "备注", prop: "notes", },*/
|
],
|
workshopList:[],
|
carFlagList:[
|
{
|
name:'全车',
|
value:0
|
},
|
{
|
name:'半车',
|
value:1
|
}
|
],// 标志类型列表
|
rules:{
|
workshop: [
|
{ required: true, message: '请选择车间', trigger: 'change' }
|
],
|
groupNumber: [
|
{ required: true, message: '请填写组别', trigger: 'blur' }
|
],
|
startCarNumber: [
|
{ required: true, message: '请填写', trigger: 'blur' }
|
],
|
endCarNumber: [
|
{ required: true, message: '请填写', trigger: 'blur' }
|
],
|
},
|
itemModel:{//新增模板
|
startCarHalf:1,
|
endCarHalf:2,
|
workshopName:'',
|
groupNumber:'',
|
startCarNumber:'',
|
endCarNumber:'',
|
carFlag:1,
|
notes:''
|
}
|
}
|
},
|
created(){
|
this.initData();
|
},
|
methods:{
|
initBottomTableList(list){
|
this.tableList.tableInfomation=JSON.parse(JSON.stringify(list));
|
},
|
clearData(){
|
this.tableList.tableInfomation=[{...this.itemModel}];
|
this.$refs['workshopForm'].resetFields();
|
this.editConfig.visible=false;
|
},
|
doChangeData(val,fieldName){
|
this.tableList.tableInfomation.forEach((item,index)=>{
|
if(fieldName==='workshop'){
|
item.workshopName=val.workshopName;
|
item.workshopNumber=val.workshopNumber;
|
}else if(fieldName==='startCarNumber'){
|
if(index===0){
|
item.startCarNumber=val;
|
}
|
}else{
|
item[fieldName]=val;
|
}
|
});
|
},
|
//选择车间
|
selWorkshop(val){
|
this.doChangeData(val,'workshop');
|
},
|
//改变组别
|
changeGroupNumber(val){
|
this.doChangeData(val,'groupNumber');
|
},
|
changeStartCarNumber(val){
|
this.doChangeData(val,'startCarNumber');
|
},
|
changeCarFlag(val){
|
this.doChangeData(val,'carFlag');
|
},
|
//关闭模态框
|
handleClose(){
|
this.clearData();
|
},
|
//保存
|
saveClick(){
|
this.$refs['workshopForm'].validate(async (vail)=>{
|
if(vail){
|
const lastObj=this.tableList.tableInfomation[this.tableList.tableInfomation.length-1];
|
if(!lastObj.endCarNumber){
|
this.$message.error('明细结束车号不能为空');
|
return ;
|
}else if(lastObj.endCarNumber<lastObj.startCarNumber){
|
this.$message.error(`明细结束车号${lastObj.endCarNumber},不能小于明细起始车号${lastObj.startCarNumber}`);
|
return;
|
}else if(lastObj.endCarNumber>this.editConfig.infomitton.endCarNumber){
|
this.$message.error(`明细结束车号${lastObj.endCarNumber},不能大于车间总的结束车号${this.editConfig.infomitton.endCarNumber}`);
|
return;
|
}
|
//执行保存操作
|
const params={
|
...this.editConfig.infomitton,
|
...this.editConfig.infomitton.workshop,
|
details:[...this.tableList.tableInfomation].map(item=>{
|
item.startCarNumber=parseInt(item.startCarNumber);
|
item.groupNumber=parseInt(item.groupNumber);
|
return item;
|
})
|
};
|
delete params.workshop;
|
const {code}=await saveWorkshopManage(params);
|
if(code===200){
|
this.$message.success(`${this.editConfig.OperationType===1?'添加':'修改'}成功`);
|
window.setTimeout(()=>{
|
this.clearData();
|
this.$emit('refresh');
|
},500);
|
}else{
|
this.$message.error(`${this.editConfig.OperationType===1?'添加':'修改'}失败`);
|
}
|
}else{
|
this.$message.error('请先将表单填写完整');
|
}
|
});
|
},
|
//新增明细
|
addItem(){
|
this.$refs['workshopForm'].validate((vail)=>{
|
if(vail){
|
const obj={...this.itemModel};
|
if(this.editConfig.infomitton.workshop){
|
obj.workshopName=this.editConfig.infomitton.workshop.workshopName;
|
obj.workshopNumber=this.editConfig.infomitton.workshop.workshopNumber;
|
}
|
if(this.editConfig.infomitton.groupNumber){
|
obj.groupNumber=this.editConfig.infomitton.groupNumber;
|
}
|
//判断上一个元素的结束车号
|
const lastObj=this.tableList.tableInfomation[this.tableList.tableInfomation.length-1];
|
if(!lastObj.endCarNumber){
|
this.$message.error('明细结束车号不能为空');
|
return ;
|
}else if(lastObj.endCarNumber<lastObj.startCarNumber){
|
this.$message.error(`明细结束车号${lastObj.endCarNumber},不能小于明细起始车号${lastObj.startCarNumber}`);
|
return;
|
}else if(lastObj.endCarNumber>this.editConfig.infomitton.endCarNumber){
|
this.$message.error(`明细结束车号${lastObj.endCarNumber},不能大于车间总的结束车号${this.editConfig.infomitton.endCarNumber}`);
|
return;
|
}
|
if(lastObj.endCarHalf===1){//左半车
|
obj.startCarNumber=lastObj.endCarNumber
|
obj.startCarHalf=2;//右半车
|
}else{
|
obj.startCarNumber=lastObj.endCarNumber+1;
|
obj.startCarHalf=1;//左半车
|
}
|
lastObj.noEdit=true;
|
this.$set(this.tableList.tableInfomation,this.tableList.tableInfomation.length-1,{...lastObj});
|
obj.carFlag=this.editConfig.infomitton.carFlag;
|
this.tableList.tableInfomation.push(obj);
|
}else{
|
this.$message.error('请先将表单填写完整');
|
}
|
});
|
|
},
|
setTable() {
|
this.tableList = {
|
maxHeight:320,
|
selectIndex: true,
|
tableInfomation: [{...this.itemModel}],
|
allcol: [],
|
showcol: this.showCol,
|
tableColumn: this.setColumnVisible(this.showCol, this.tableColumn)
|
}
|
this.setTableList(this.tableList)
|
},
|
selTableCol(val){
|
this.showcol = val;
|
this.tableList.tableColumn = this.setColumnVisible(val, this.tableColumn)
|
},
|
setTableList(tableList) {
|
tableList.allcol = tableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label)
|
},
|
setColumnVisible(showCol, tableColumn) {
|
return tableColumn.map((ele) => {
|
return {
|
...ele,
|
isShowColumn: showCol.includes(ele.label)
|
}
|
})
|
},
|
initData(){
|
this.setTable();
|
this.getDictData();
|
},
|
async getDictData(){
|
await getDict({dictType:1}).then((res)=>{
|
if(res&&res.code===200){
|
this.workshopList=res.data
|
}
|
})
|
},
|
// 删除明细
|
handleDelClick(scope){
|
if(this.tableList.tableInfomation.length>1){
|
let index=scope.$index;
|
this.tableList.tableInfomation.splice(index,1);
|
const lastObj=this.tableList.tableInfomation[index-1];
|
lastObj.noEdit=false;
|
this.$set(this.tableList.tableInfomation,index-1,{...lastObj})
|
}else{
|
this.$message.error('组别至少有一条明细');
|
}
|
},
|
// 清空明细，但是保留第一条明细
|
clearItem(){
|
if(this.tableList.tableInfomation.length>1){
|
this.tableList.tableInfomation.splice(1,this.tableList.tableInfomation.length-1);
|
const lastObj=this.tableList.tableInfomation[0];
|
lastObj.noEdit=false;
|
this.$set(this.tableList.tableInfomation,scope.$index-1,{...lastObj})
|
}else{
|
this.$message.error('组别至少有一条明细');
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.dialog-view{
|
width: 96%;
|
}
|
.dialog-footer{
|
.bottom-tabs {
|
height: 40px;
|
line-height: 40px;
|
background: white;
|
display: flex;
|
.tab-pane {
|
width: 100px;
|
margin-right: 20px;
|
font-size: 12px !important;
|
text-align: center;
|
cursor: pointer;
|
background: #2a78fb;
|
border-top-left-radius: 20px;
|
border-top-right-radius: 20px;
|
}
|
}
|
}
|
</style>
|
