yudao-dev/src/views/group/groupSetting/add-or-updata.vue

<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: zwq
 * @LastEditTime: 2025-10-31 15:47:16
 * @Description:
-->
<template>
	<el-form
		:model="dataForm"
		:rules="dataRule"
		ref="dataForm"
		@keyup.enter.native="dataFormSubmit()"
		label-position="top"
		label-width="80px">
		<el-row :gutter="20">
			<el-col :span="8">
				<el-form-item label="班组编号" prop="code">
					<el-input
						v-model="dataForm.code"
						clearable
						placeholder="请输入班组编号" />
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="班组名称" prop="name">
					<el-input
						v-model="dataForm.name"
						clearable
						placeholder="请输入班组名称" />
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="部门" prop="deptId">
					<dept-select
						style="width: 100%"
						ref="deptSelect"
						v-model="dataForm.deptId"
						@DeptId="setDeptId"></dept-select>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="组长" prop="leaderId">
					<el-select
						style="width: 100%"
						v-model="dataForm.leaderId"
						@change="setLeaderName"
						filterable
						placeholder="请选择组长">
						<el-option
							v-for="item in leaderArr"
							:key="item.id"
							:label="item.nickname"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="组长电话" prop="leaderPhone">
					<el-input
						v-model="dataForm.leaderPhone"
						clearable
						maxlength="11"
						placeholder="请输入组长电话" />
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="班组人数" prop="num">
					<el-input-number
						style="width: 100%"
						v-model="dataForm.num"
						:step="1"
						:min="0"
						step-strictly />
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="生产班组" prop="isProduction">
					<el-select
						style="width: 100%"
						v-model="dataForm.isProduction"
						placeholder="请选择是否为生产班组">
						<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="备注" prop="remark">
					<el-input
						v-model="dataForm.remark"
						clearable
						placeholder="请输入备注" />
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>

<script>
import basicAdd from '@/mixins/basic-add';
import deptSelect from './../deptSelect.vue';
import { listSimpleUsers } from '@/api/system/user';
import {
	createGroup,
	updateGroup,
	getGroup,
	getCode,
} from '@/api/group/groupSetting';

export default {
	mixins: [basicAdd],
	components: {
		deptSelect,
	},
	data() {
		return {
			urlOptions: {
				isGetCode: true,
				codeURL: getCode,
				createURL: createGroup,
				updateURL: updateGroup,
				infoURL: getGroup,
				optionArrUrl: [listSimpleUsers], //需要获取下拉框的方法数组
			},
			dataForm: {
				id: undefined,
				code: undefined,
				name: undefined,
				leaderId: undefined,
				leaderName: undefined,
				leaderPhone: undefined,
				deptId: undefined,
				isProduction: undefined,
				num: undefined,
				remark: undefined,
			},
			setData: true,
			leaderArr: [],
			options: [
				{
					value: true,
					label: '是',
				},
				{
					value: false,
					label: '否',
				},
			],
			dataRule: {
				code: [
					{ required: true, message: '班组编码不能为空', trigger: 'blur' },
				],
				name: [
					{ required: true, message: '班组名称不能为空', trigger: 'blur' },
				],
				deptId: [
					{ required: true, message: '部门不能为空', trigger: 'blur' },
				],
				leaderId: [
					{ required: true, message: '组长不能为空', trigger: 'change' },
				],
				isProduction: [
					{ required: true, message: '生产班组不能为空', trigger: 'change' },
				],
				leaderPhone: [
					{
						pattern:
							/^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
						message: '请输入正确的手机号码',
						trigger: 'blur',
					},
				],
			},
		};
	},
	methods: {
		setDeptId(val) {
			this.dataForm.deptId = val;
		},
		/** 获取下拉框数组 */
		getArr() {
			this.urlOptions.optionArrUrl[0]()
				.then(({ data: res }) => {
					this.leaderArr = res;
				})
				.catch(() => {});
		},
		setDataForm() {
			this.$refs.deptSelect.setID(this.dataForm.deptId);
		},
		setLeaderName(val) {
			this.leaderArr.map((item) => {
				if (val === item.id) {
					this.dataForm.leaderName = item.nickname;
				}
			});
		},
		// 表单提交
		dataFormSubmit() {
			this.$refs['dataForm'].validate((valid) => {
				if (!valid) {
					return false;
				}
				if (!this.dataForm.deptId) {
					this.$message('部门不能为空');
					return;
				}
				// 修改的提交
				if (this.dataForm.id) {
					this.urlOptions.updateURL(this.dataForm).then((response) => {
						this.$modal.msgSuccess('修改成功');
						this.visible = false;
						this.$emit('refreshDataList');
					});
					return;
				}
				// 添加的提交
				this.urlOptions.createURL(this.dataForm).then((response) => {
					this.$modal.msgSuccess('新增成功');
					this.visible = false;
					this.$emit('refreshDataList');
				});
			});
		},
	},
};
</script>