guoju0808/ry-vue3/src/views/manager/SponsorPersonNew.vue

<template>
  <!--
    角色: 🟨 合规 支持单位下人员 新建/编辑 (manager/sponsor-people/new, manager/sponsor-people/edit/:id)
    结构对齐 admin/ExpertNew.vue
    unitType 硬编码 'sponsor'
  -->
  <div class="page-card manager-sponsor-person-new">
    <div class="breadcrumb">
      <a @click="goBack">支持单位下人员</a> &gt; {{ isEdit ? '编辑人员' : '新建人员' }}{{ orgName ? ' (' + orgName + ')' : '' }}
    </div>

    <el-card v-loading="loadingDetail" shadow="never" class="form-card nested">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="form.userName" placeholder="登录用户名" maxlength="50" :disabled="isEdit" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="姓名" maxlength="20" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" placeholder="手机号" maxlength="11" />
        </el-form-item>
        <el-form-item label="所属公司" prop="orgName">
          <el-input v-model="form.orgName" placeholder="所属公司" maxlength="200" :disabled="!!orgId" />
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="form.department" placeholder="部门" maxlength="50" />
        </el-form-item>
        <el-form-item label="职务">
          <el-input v-model="form.position" placeholder="职务" maxlength="50" />
        </el-form-item>
        <el-form-item label="角色">
          <span style="color:#303133">监察员 <span style="color:#909399;font-size:12px">(支持方人员固定)</span></span>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="form-actions">
      <el-button type="primary" :loading="saving" @click="onSave">保存</el-button>
      <el-button @click="confirmCancel">取消</el-button>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { bizAdd, bizUpdate, bizGet } from '@/api/public'

const router = useRouter()
const route = useRoute()

const formRef = ref(null)
const saving = ref(false)
const loadingDetail = ref(false)
const isEdit = !!route.params.id
const personId = route.params.id || null

const orgName = computed(() => route.query.orgName || '')
const orgId = computed(() => route.query.orgId ? Number(route.query.orgId) : null)

const form = reactive({
  personId: null,
  userName: '',
  name: '',
  phone: '',
  orgName: '',
  department: '',
  position: ''
})

const rules = {
  userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  name:     [{ required: true, message: '请输入姓名',   trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1\d{10}$/, message: '手机号格式错误', trigger: 'blur' }
  ],
  orgName:  [{ required: true, message: '请输入所属公司', trigger: 'blur' }]
}

function goBack() {
  router.push('/manager/sponsor-people')
}

async function loadDetail() {
  if (!personId) return
  loadingDetail.value = true
  try {
    const res = await bizGet('person', personId)
    if (res?.code === 200 && res.data) {
      const d = res.data
      Object.assign(form, {
        personId: d.personId,
        userName: d.userName || '',
        name: d.name || '',
        phone: d.phone || '',
        orgName: d.orgName || '',
        department: d.department || '',
        position: d.position || ''
      })
    } else {
      ElMessage.error(res?.msg || '加载失败')
      goBack()
    }
  } catch (e) {
    ElMessage.error(e?.msg || e?.message || '加载失败')
    goBack()
  } finally {
    loadingDetail.value = false
  }
}

function confirmCancel() {
  const hasContent = form.name || form.phone || form.userName || form.orgName
  if (!isEdit && !hasContent) { goBack(); return }
  ElMessageBox.confirm('确定取消?未保存的内容将丢失', '提示', { type: 'warning' })
    .then(() => goBack())
    .catch(() => {})
}

async function onSave() {
  try { await formRef.value.validate() } catch { return }
  saving.value = true
  try {
    const payload = { ...form, unitType: 'sponsor', role: 'supervisor' }
    if (!isEdit && orgId.value) payload.orgId = orgId.value
    if (isEdit) {
      delete payload.personId
      await bizUpdate('person', payload)
      ElMessage.success('修改成功')
    } else {
      payload.status = '0'
      payload.password = '123456'   // @JsonProperty("password") → loginPassword
      await bizAdd('person', payload)
      ElMessage.success('新建成功,默认密码 123456')
    }
    goBack()
  } catch (e) {
    ElMessage.error(e?.msg || e?.message || '保存失败')
  } finally {
    saving.value = false
  }
}

onMounted(() => {
  // 预填 orgName (从 org 页面跳来时)
  if (!isEdit && orgName.value && !form.orgName) {
    form.orgName = orgName.value
  }
  if (isEdit) loadDetail()
})
</script>

<style scoped>
.manager-sponsor-person-new { max-width: 1000px; }
.page-card { background: #fff; padding: 16px 20px; border-radius: 6px; border: 1px solid #f0f0f0; }
.breadcrumb { font-size: 13px; color: #8c8c8c; margin-bottom: 16px; }
.breadcrumb a { color: var(--brand-primary); cursor: pointer; text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-primary-deep, var(--brand-primary)); }

.form-card.nested { background: transparent; border: none; box-shadow: none; }
:deep(.form-card .el-card__body) { padding: 24px 28px; }

.form-actions { margin-top: 16px; display: flex; gap: 8px; }

:deep(.el-button--primary) { background: var(--brand-primary); border-color: var(--brand-primary); border-radius: 4px; }
:deep(.el-button--primary:hover) { background: var(--brand-primary-deep, var(--brand-primary)); border-color: var(--brand-primary-deep, var(--brand-primary)); }
:deep(.el-button) { border-radius: 4px; }
:deep(.el-input__wrapper) { border-radius: 4px; }
</style>