hxgksystemapp/src/views/hr/archives/basicinformation/emergencycontactadd.vue

<!--
@ 作者: 秦东
@ 时间: 2023-06-18 14:51:23
@ 备注: 新增紧急联系人
-->
<script lang='ts' setup>
import { emergencyContactInfo, emergencyContactAdd } from '@/api/hr/people/type'
import { addEmergencyContactInfo } from '@/api/hr/people/index'
import { userPoliticaloutloo } from '@/api/hr/people/datacont'

const props = defineProps({
	addisshow: {
		type: Boolean,
		default: false
	},
	keyval: {
		type: String,
		default: ""
	}
});
const addLoading = ref(false)
const emits = defineEmits(["update:addisshow", "restdata"]);		//操作父级数据
const addJjlxrFormRef = ref(ElForm);	//编辑表单
const jjlxrFormData = reactive<emergencyContactInfo>({ id: "" });
/**
 * 弹窗显示控制
 */
const addshow = computed({
	get: () => props.addisshow,
	set: (val) => {
		emits("update:addisshow", val);
	},
});
/**
 * 表单验证规则
 */
const addJjlxrRules = reactive({
	name: [{ required: true, message: "请输入紧急联系人姓名", trigger: "blur" }],
	relationship: [{ required: true, message: "请输入与紧急联系人关系", trigger: "blur" }],
	mobilephone: [{ required: true, message: "请输入紧急联系人联系方式", trigger: "blur" }],
	company: [{ required: false, message: "请输入紧急联系人工作单位", trigger: "blur" }],
	political: [{ required: false, message: "请选择紧急联系人政治面貌", trigger: "blur" }],
});
/**
 * 关闭弹窗
 */
function clostAddBoxJjlxr() {
	emits("update:addisshow", false);
	initJjlxrData()
}
/**
 * 初始化数据
 */
function initJjlxrData() {
	addJjlxrFormRef.value.resetFields();
	addLoading.value = false;
}
/**
 * 提交数据
 */
function submitAddJjlxr() {
	// console.log("提交数据",jjlxrFormData)
	// addLoading.value = true;
	addJjlxrFormRef.value.validate((isValid: boolean) => {
		if (isValid) {
			let listAry = new Array
			listAry.push(jjlxrFormData)
			addEmergencyContactInfo({ id: props.keyval, list: listAry })
				.then(() => {
					ElMessage.success("新增成功");
					clostAddBoxJjlxr();
					emits('restdata');
				})
				.finally(() => { addLoading.value = false; })
		}
	});
}
</script>
<template>
	<el-dialog v-model="addshow" width="500" title="添加紧急联系人" append-to-body :before-close="clostAddBoxJjlxr">
		<el-form ref="addJjlxrFormRef" :model="jjlxrFormData" :rules="addJjlxrRules" label-width="140px">
			<el-form-item label="姓名" prop="name">
				<el-input v-model="jjlxrFormData.name" placeholder="请输入紧急联系人姓名" />
			</el-form-item>
			<el-form-item label="联系方式" prop="mobilephone">
				<el-input v-model="jjlxrFormData.mobilephone" placeholder="请输入紧急联系人联系方式" />
			</el-form-item>
			<el-form-item label="与紧急联系人关系" prop="relationship">
				<el-input v-model="jjlxrFormData.relationship" placeholder="请输入与紧急联系人关系" />
			</el-form-item>
			<el-form-item label="工作单位" prop="company">
				<el-input v-model="jjlxrFormData.company" placeholder="请输入紧急联系人工作单位" />
			</el-form-item>
			<el-form-item label="政治面貌" prop="political">
				<el-select v-model="jjlxrFormData.political" placeholder="请选择紧急联系人政治面貌">
					<el-option 
					v-for="item in userPoliticaloutloo" 
					:key="item.id" 
					:label="item.name"
					:value="item.id" />
				</el-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" :loading="addLoading" @click="submitAddJjlxr">确 定</el-button>
				<el-button @click="clostAddBoxJjlxr">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<style lang='scss' scoped></style>