137 lines
3.6 KiB
Vue
137 lines
3.6 KiB
Vue
<template>
|
|
<el-dialog v-model="visible" title="社会关系" width="600px" @close="handleClose">
|
|
<el-form :model="form" :rules="rules" label-width="130px" ref="formRef">
|
|
<el-form-item label="称谓" prop="title" required>
|
|
<el-select v-model="form.title" placeholder="请选择称谓" style="width: 100%">
|
|
<el-option
|
|
v-for="item in titleOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="姓名" prop="realName" required>
|
|
<el-input v-model="form.realName" placeholder="请输入姓名" />
|
|
</el-form-item>
|
|
<el-form-item label="出生年月" prop="birthday" required>
|
|
<el-date-picker
|
|
v-model="form.birthday"
|
|
type="date"
|
|
placeholder="选择日期"
|
|
format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="政治面貌" prop="politicsStatusId" required>
|
|
<el-select v-model="form.politicsStatusId" placeholder="请选择政治面貌" style="width: 100%">
|
|
<el-option
|
|
v-for="item in politicsStatusList"
|
|
:key="item.id"
|
|
:label="item.politicsStatus"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="工作单位及职务" prop="workStation" required>
|
|
<el-input
|
|
v-model="form.workStation"
|
|
type="textarea"
|
|
:rows="2"
|
|
placeholder="请输入工作单位及职务"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="handleClose">取消</el-button>
|
|
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
|
|
interface Props {
|
|
modelValue: boolean
|
|
formData?: any
|
|
politicsStatusList?: any[]
|
|
}
|
|
|
|
interface Emits {
|
|
(e: 'update:modelValue', value: boolean): void
|
|
(e: 'submit', data: any): void
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
formData: () => ({}),
|
|
politicsStatusList: () => []
|
|
})
|
|
|
|
const emit = defineEmits<Emits>()
|
|
|
|
const visible = ref(false)
|
|
const formRef = ref()
|
|
const form = ref<any>({})
|
|
|
|
// 称谓选项
|
|
const titleOptions = [
|
|
{ label: '父亲', value: '父亲' },
|
|
{ label: '母亲', value: '母亲' },
|
|
{ label: '配偶', value: '配偶' },
|
|
{ label: '子女', value: '子女' },
|
|
{ label: '兄弟姐妹', value: '兄弟姐妹' },
|
|
{ label: '其他', value: '其他' }
|
|
]
|
|
|
|
watch(() => props.modelValue, (val) => {
|
|
visible.value = val
|
|
if (val && props.formData) {
|
|
form.value = { ...props.formData }
|
|
} else {
|
|
form.value = {}
|
|
}
|
|
})
|
|
|
|
watch(visible, (val) => {
|
|
emit('update:modelValue', val)
|
|
})
|
|
|
|
const handleClose = () => {
|
|
visible.value = false
|
|
form.value = {}
|
|
}
|
|
|
|
const handleSubmit = () => {
|
|
formRef.value?.validate((valid: boolean) => {
|
|
if (valid) {
|
|
emit('submit', { ...form.value })
|
|
}
|
|
})
|
|
}
|
|
|
|
// 表单验证规则
|
|
const rules = {
|
|
title: [
|
|
{ required: true, message: '请选择称谓', trigger: 'change' }
|
|
],
|
|
realName: [
|
|
{ required: true, message: '请输入姓名', trigger: 'blur' }
|
|
],
|
|
birthday: [
|
|
{ required: true, message: '请选择出生年月', trigger: 'change' }
|
|
],
|
|
politicsStatusId: [
|
|
{ required: true, message: '请选择政治面貌', trigger: 'change' }
|
|
],
|
|
workStation: [
|
|
{ required: true, message: '请输入工作单位及职务', trigger: 'blur' }
|
|
]
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|
|
|