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

<!--
@ 作者: 秦东
@ 时间: 2023-06-18 15:48:51
@ 备注: 编辑双职工
-->
<script lang='ts' setup>
import { doubleWorkCont } from '@/api/hr/people/type'
import { editDoubleWorkCont } from '@/api/hr/people/index'
import { yesOrno } from '@/api/hr/people/datacont';
const props = defineProps({
	editisshow: {
		type: Boolean,
		default: false
	},
	keyval: {
		type: String,
		default: ""
	},
	datacont: {
		type: Object,
		default() {
			return {}
		}
	}
});
const editLoading = ref(false)
const emits = defineEmits(["update:editisshow", "restdata"]);		//操作父级数据
const editSzgFormRef = ref(ElForm);	//编辑表单
const szgFormData = reactive<doubleWorkCont>({ id: "" });
/**
 * 弹窗显示控制
 */
 const editshow = computed({
	get: () => props.editisshow,
	set: (val) => {
		emits("update:editisshow", val);
	},
});
/**
 * 表单验证规则
 */
 const editszgRules = reactive({
	workcouple: [{ required: true, message: "请输入是或否", trigger: "blur" }],	
	name: [{ required: true, message: "请输入配偶姓名", trigger: "blur" }],	
	company: [{ required: true, message: "请输入所在公司", trigger: "blur" }],
	department: [{ required: true, message: "请输入所在部门", trigger: "blur" }],
section: [{ required: true, message: "请输入工段", trigger: "blur" }],
	job: [{ required: true, message: "请输入职位", trigger: "blur" }],
	level: [{ required: true, message: "请输入职等", trigger: "blur" }],
	time: [{ required: true, message: "请输入入职时间", trigger: "blur" }],
	mobilephone: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
});
/**
 * 关闭弹窗
 */
function clostEditBoxSzg() {
	emits("update:editisshow", false);
	initJjlxrData()
}
/**
 * 初始化数据
 */
 function initJjlxrData() {
	editSzgFormRef.value.resetFields();
	editLoading.value = false;
}
/**
 * 提交数据
 */
 function submitEditSzg() {
	// console.log("提交数据",szgFormData)
	// editLoading.value = true;
	editSzgFormRef.value.validate((isValid: boolean) => {
		if (isValid) {
			editDoubleWorkCont(szgFormData)
				.then(() => {
					ElMessage.success("编辑成功");
					clostEditBoxSzg();
					emits('restdata');
				})
				.finally(() => { editLoading.value = false; })
		}
	});
}
/**
 * 监听数据
 */
 watch(() => props.editisshow, () => {
	// console.log("watch--------->",props.editisshow,props.datacont)
	if (props.editisshow) {
		szgFormData.id = props.datacont.id.toString();
		szgFormData.name = props.datacont.name;
		szgFormData.mobilephone = props.datacont.tel;
		szgFormData.company = props.datacont.company;
		szgFormData.department = props.datacont.department;
		szgFormData.position = props.datacont.position;
	}
	
})
</script>
<template>
	<el-dialog v-model="editshow" width="500" title="编辑双职工" append-to-body :before-close="clostEditBoxSzg">
		<el-form ref="editSzgFormRef" :model="szgFormData" :rules="editszgRules" label-width="140px">
			<el-form-item  label="是否双职工">
				<el-select v-model="szgFormData.workcouple" placeholder="请选择是否双职工" >
					<el-option
						v-for="item in yesOrno"
						:key="item.id"
						:label="item.name"
						:value="item.id"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="配偶姓名" prop="name">
				<el-input v-model="szgFormData.name" placeholder="请输入配偶姓名" />
			</el-form-item>
			<el-form-item label="公司" prop="company">
				<el-input v-model="szgFormData.company" placeholder="请输入公司" />
			</el-form-item>
			<el-form-item label="所在部门" prop="department">
				<el-input v-model="szgFormData.department" placeholder="请输入所在部门" />
			</el-form-item>
			<el-form-item label="工段" prop="section">
				<el-input v-model="szgFormData.section" placeholder="请输入工段" />
			</el-form-item>
			<el-form-item label="职位" prop="job">
				<el-input v-model="szgFormData.job" placeholder="请输入职位" />
			</el-form-item>
			<el-form-item label="职等" prop="level">
				<el-input v-model="szgFormData.level" placeholder="请输入职等" />
			</el-form-item>
			<el-form-item label="入职时间" prop="time">
				<el-date-picker v-model="szgFormData.time" type="date" placeholder="请选择入职时间" format="YYYY-MM-DD"
					value-format="YYYY-MM-DD" style="width: 100%;" size="default" />
			</el-form-item>
			<el-form-item label="联系方式" prop="mobilephone">
				<el-input v-model="szgFormData.mobilephone" placeholder="请输入联系方式" />
			</el-form-item>
			
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" :loading="editLoading" @click="submitEditSzg">确 定</el-button>
				<el-button @click="clostEditBoxSzg">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<style  lang='scss' scoped></style>