a

src/views/professional/teacherbase/relation-dialog.vue

@@ -0,0 +1,113 @@
+<template>
+  <el-dialog v-model="visible" title="社会关系" width="600px" @close="handleClose">
+    <el-form :model="form" label-width="120px" ref="formRef">
+      <el-form-item label="称谓" 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="姓名" required>
+        <el-input v-model="form.realName" placeholder="请输入姓名" />
+      </el-form-item>
+      <el-form-item label="出生年月" 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="政治面貌">
+        <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="工作单位及职务">
+        <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 = () => {
+  emit('submit', { ...form.value })
+}
+</script>
+
+<style scoped>
+</style>
+