267 lines
6.8 KiB
Vue
267 lines
6.8 KiB
Vue
<!--
|
||
* @Author: zwq
|
||
* @Date: 2024-07-10 13:43:41
|
||
* @LastEditors: zwq
|
||
* @LastEditTime: 2024-07-15 16:00:36
|
||
* @Description:
|
||
-->
|
||
<template>
|
||
<el-form ref="form" :rules="rules" label-width="110px" :model="form">
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="部门名称" prop="deptId">
|
||
<el-select
|
||
v-model="form.deptId"
|
||
filterable
|
||
clearable
|
||
style="width: 100%"
|
||
placeholder="请选择部门">
|
||
<el-option
|
||
v-for="item in deptArr"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="计划名称" prop="name">
|
||
<el-input v-model="form.name" clearable />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="相关班组" prop="teamIdList">
|
||
<el-select
|
||
v-model="form.teamIdList"
|
||
filterable
|
||
clearable
|
||
multiple
|
||
style="width: 100%"
|
||
placeholder="请选择班组">
|
||
<el-option
|
||
v-for="item in teamList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="相关班次" prop="classesIdList">
|
||
<el-select
|
||
v-model="form.classesIdList"
|
||
filterable
|
||
clearable
|
||
multiple
|
||
style="width: 100%"
|
||
placeholder="请选择班次">
|
||
<el-option
|
||
v-for="item in classList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="备注" prop="remark">
|
||
<el-input v-model="form.remark"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="是否生产班组" prop="isProduction">
|
||
<el-radio-group v-model="form.isProduction">
|
||
<el-radio :label="true">是</el-radio>
|
||
<el-radio :label="false">否</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24" v-show="form.isProduction">
|
||
<tree-transfer
|
||
:title="title"
|
||
:from_data="fromData"
|
||
:to_data="toData"
|
||
@add-btn="add"
|
||
@remove-btn="remove"
|
||
pid="productionLineId"
|
||
:defaultProps="{ label: 'name' }"
|
||
height="450px"
|
||
:mode="mode"
|
||
filter
|
||
openAll></tree-transfer>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</template>
|
||
<script>
|
||
import {
|
||
getGroupPlan,
|
||
updateGroupPlan,
|
||
createGroupPlan,
|
||
getGroupPlanTree,
|
||
createGroupPlanLine,
|
||
updateGroupPlanLine,
|
||
getGroupPlanLine,
|
||
getLoginUserDeptId,
|
||
} from '@/api/base/groupSchedulingPlan';
|
||
|
||
import { listDept } from '@/api/system/dept';
|
||
import { listEnabled } from '@/api/base/groupTeam';
|
||
import { listClassesEnabled } from '@/api/base/groupClasses';
|
||
import treeTransfer from 'el-tree-transfer';
|
||
|
||
export default {
|
||
components: { treeTransfer },
|
||
name: '',
|
||
data() {
|
||
return {
|
||
form: {
|
||
id: '',
|
||
name: '',
|
||
deptId: '',
|
||
teamIdList: [],
|
||
classesIdList: [],
|
||
remark: '',
|
||
isProduction: false,
|
||
},
|
||
deptArr: [], //部门
|
||
teamList: [], //班组
|
||
classList: [], //班次
|
||
rules: {
|
||
name: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
|
||
deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
|
||
teamIdList: [
|
||
{ required: true, message: '请选择相关班组', trigger: 'change' },
|
||
],
|
||
classesIdList: [
|
||
{ required: true, message: '请选择相关班次', trigger: 'change' },
|
||
],
|
||
},
|
||
title: ['待选', '已选'], //标题 类型：Array 必填：false 默认：["源列表", "目标列表"]
|
||
mode: 'transfer',
|
||
fromData: [], //左边内容
|
||
toData: [], //右边已选内容
|
||
};
|
||
},
|
||
methods: {
|
||
init(id) {
|
||
this.form.id = id || undefined;
|
||
this.fromData = [];
|
||
this.toData = [];
|
||
this.getArr();
|
||
this.$nextTick(() => {
|
||
this.$refs['form'].resetFields();
|
||
if (this.form.id) {
|
||
getGroupPlan(id).then((response) => {
|
||
this.form = response.data;
|
||
if (this.form.isProduction) {
|
||
getGroupPlanLine(id).then((res) => {
|
||
this.toData = res.data ? res.data.datas : [];
|
||
this.getFilterLeftData(this.fromData, this.toData); //编辑时组件有bug，左边相同数据不消失
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
getLoginUserDeptId().then((res) => {
|
||
this.form.deptId = res.data;
|
||
});
|
||
}
|
||
});
|
||
},
|
||
getArr() {
|
||
listDept().then((response) => {
|
||
this.deptArr = response.data;
|
||
});
|
||
listEnabled().then((res) => {
|
||
this.teamList = res.data || [];
|
||
});
|
||
listClassesEnabled().then((res) => {
|
||
this.classList = res.data || [];
|
||
});
|
||
getGroupPlanTree().then((res) => {
|
||
this.fromData = res.data;
|
||
this.fromData.forEach((item) => {
|
||
item.productionLineId = 0;
|
||
});
|
||
});
|
||
},
|
||
// 监听穿梭框组件添加
|
||
add(fromData, toData, obj) {
|
||
console.log('fromData:', fromData);
|
||
console.log('toData:', toData);
|
||
},
|
||
// 监听穿梭框组件移除
|
||
remove(fromData, toData, obj) {
|
||
console.log('fromData:', fromData);
|
||
console.log('toData:', toData);
|
||
},
|
||
submitForm() {
|
||
this.$refs['form'].validate((valid) => {
|
||
if (valid) {
|
||
if (this.form.id) {
|
||
//编辑
|
||
updateGroupPlan({ ...this.form }).then((res) => {
|
||
if (res.code === 0) {
|
||
if (this.form.isProduction) {
|
||
const params = {
|
||
planId: this.form.id,
|
||
list: this.toData,
|
||
};
|
||
updateGroupPlanLine(params).then((res) => {
|
||
this.$modal.msgSuccess('操作成功');
|
||
this.$emit('successSubmit');
|
||
});
|
||
}else{
|
||
this.$modal.msgSuccess('操作成功');
|
||
this.$emit('successSubmit');
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
createGroupPlan({ ...this.form }).then((res) => {
|
||
if (res.code === 0) {
|
||
if (this.form.isProduction) {
|
||
const params = {
|
||
planId: res.data,
|
||
list: this.toData,
|
||
};
|
||
createGroupPlanLine(params).then((res) => {
|
||
this.$modal.msgSuccess('操作成功');
|
||
this.$emit('successSubmit');
|
||
});
|
||
}else{
|
||
this.$modal.msgSuccess('操作成功');
|
||
this.$emit('successSubmit');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
formClear() {
|
||
this.$refs.form.resetFields();
|
||
},
|
||
|
||
/** 消除组件左边与右边选中数据相同项 */
|
||
// 处理过滤数据
|
||
getFilterLeftData(data, selData) {
|
||
for (let i = data.length - 1; i >= 0; i--) {
|
||
for (let j = selData.length - 1; j >= 0; j--) {
|
||
if (data[i] && data[i].id === selData[j].id) {
|
||
// 当id相等可以删除的情况 即：没有子级可以删除；
|
||
if (!data[i].children) {
|
||
data.splice(i, 1);
|
||
} else {
|
||
this.getFilterLeftData(data[i].children, selData[j].children);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|