yudao-dev/src/views/group/base/schedulingRuleConfig/components/schedulingRuleConfigAdd.vue

<!--
 * @Author: zwq
 * @Date: 2024-07-11 09:30:21
 * @LastEditors: zwq
 * @LastEditTime: 2024-07-12 16:09:46
 * @Description:
-->
<template>
	<el-form ref="form" :rules="rules" label-width="110px" :model="form">
		<el-row>
			<el-col :span="12">
				<el-form-item label="排班开始日期" prop="startDay">
					<el-date-picker
						v-model="form.startDay"
						type="datetime"
						placeholder="选择日期时间"
						label-format="yyyy-MM-dd HH:mm:ss"
						value-format="timestamp"
						style="width: 100%"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="排班结束日期" prop="endDay">
					<el-date-picker
						v-model="form.endDay"
						type="datetime"
						placeholder="选择日期时间"
						label-format="yyyy-MM-dd HH:mm:ss"
						value-format="timestamp"
						style="width: 100%"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="排班计划" prop="planId">
					<el-select
						v-model="form.planId"
						filterable
						clearable
						@change="setTableArr"
						style="width: 100%"
						placeholder="请选择排班计划">
						<el-option
							v-for="item in planArr"
							: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="24">
				<div class="min-title">班组上班顺序</div>
				<base-table
					border
					:table-props="tableProps"
					:table-data="tableData"
					:page="1"
					:limit="100"
					:height="300"
					@emitButtonClick="addNew"
					@emitFun="inputChange"
					:add-button-show="addButtonShow">
					<method-btn
						slot="handleBtn"
						:width="60"
						label="操作"
						:method-list="tableBtn"
						@clickBtn="handleClick" />
				</base-table>
			</el-col>
		</el-row>
	</el-form>
</template>
<script>
import {
	getGroupRule,
	updateGroupRule,
	createGroupRule,
} from '@/api/base/groupSchedulingRule';
import {
	groupPlanList,
	groupPlanTeamList,
	groupPlanClassesList,
} from '@/api/base/groupSchedulingPlan';
import tableSelect from './tableSelect';

const tableBtn = [
	{
		type: 'delete',
		btnName: '删除',
	},
];
const tableProps = [
	{
		prop: 'classesId',
		label: '班次',
		classesArr: [],
		subcomponent: tableSelect,
	},
	{
		prop: 'teamId',
		label: '班组',
		teamArr: [],
		subcomponent: tableSelect,
	},
];
export default {
	name: 'schedulingRuleConfigAdd',
	data() {
		return {
			form: {
				id: '',
				startDay: '',
				endDay: '',
				planId: '',
				remark: '',
			},
			tableBtn,
			tableProps,
			tableData: [],
			addButtonShow: '',
			planArr: [], //排班计划数组
			rules: {
				name: [{ required: true, message: '请输入班组名称', trigger: 'blur' }],
				startDay: [
					{ required: true, message: '请选择排班开始时间', trigger: 'change' },
				],
				endDay: [
					{ required: true, message: '请选择排班结束时间', trigger: 'change' },
				],
			},
		};
	},
	methods: {
		init(id) {
			this.form = {
				id: id || undefined,
				startDay: '',
				endDay: '',
				planId: '',
				remark: '',
			};
			this.getArr();
			this.tableData = [];
			this.$nextTick(() => {
				this.$refs['form'].resetFields();
				if (this.form.id) {
					getGroupRule(id).then((response) => {
						this.form = response.data;
						this.getTableArr(response.data.planId);
						this.tableData = [];
					});
				}
			});
		},
		getArr() {
			groupPlanList().then((res) => {
				this.planArr = res.data || [];
			});
		},
		setTableArr() {
			if (this.form.planId) {
				this.tableData = [];
				this.getTableArr(this.form.planId);
			} else {
				this.tableData = [];
				this.addButtonShow = '';
			}
		},
		async getTableArr(id) {
			//获取表格下拉框
			this.addButtonShow = '新增';
			const res0 = await groupPlanClassesList(id);
			this.tableProps[0].classesArr = res0.data || [];
			const res1 = await groupPlanTeamList(id);
			this.tableProps[1].teamArr = res1.data || [];
			if (this.form.id) {
				//编辑时获取班组上班顺序
				this.form.sequenceList.forEach((item) => {
					this.tableData.push(item);
				});
			}
		},
		inputChange(data) {
			this.tableData[data._pageIndex - 1][data.prop] = data[data.prop];
		},
		handleClick(raw) {
			if (raw.type === 'delete') {
				this.$confirm(
					`确定对${
						raw.data.name
							? '[名称=' + raw.data.name + ']'
							: '[序号=' + raw.data._pageIndex + ']'
					}进行删除操作?`,
					'提示',
					{
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					}
				)
					.then(() => {
						this.tableData.splice(raw.data._pageIndex - 1, 1);
						this.tableData.forEach((item, index) => {
							item.sequence = index;
						});
						console.log(this.tableData);
					})
					.catch(() => {});
			}
		},
		// 新增
		addNew() {
			this.tableData.push({ sequence: this.tableData.length });
		},
		submitForm() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					if (this.form.id) {
						//编辑
						let list = [];
						this.tableData.forEach((item) => {
							const obj = {
								classesId: item.classesId,
								sequence: item.sequence,
								teamId: item.teamId,
							};
							list.push(obj);
						});
						this.form.list = list;
						updateGroupRule({ ...this.form }).then((res) => {
							this.$modal.msgSuccess('操作成功');
							this.$emit('successSubmit');
						});
					} else {
						let list = [];
						this.tableData.forEach((item) => {
							const obj = {
								classesId: item.classesId,
								sequence: item.sequence,
								teamId: item.teamId,
							};
							list.push(obj);
						});
						this.form.list = list;
						createGroupRule({ ...this.form }).then((res) => {
							this.$modal.msgSuccess('操作成功');
							this.$emit('successSubmit');
						});
					}
				} else {
					return false;
				}
			});
		},
		formClear() {
			this.$refs.form.resetFields();
		},
	},
};
</script>
<style scoped>
.min-title {
	margin-bottom: 5px;
}
.min-title::before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	margin: auto 5px;
	background-color: #0b58ff;
}
</style>