guoju0808/ry-vue3/src/views/executor/NewPerson.vue

<template>
  <!--
    角色: 🟨 执行方 新建/编辑人员 (executor/people/new, executor/people/edit/:id)
    结构 1:1 对齐 proto new-person.html (但用 page-card 整页包裹, 不用 main.content):
      page-card (整页面板)
        page-header (标题区: h1 + 副标题)
          h1.page-title
          p.page-sub
        el-form.card
          7 字段 form-row
          form-actions (保存/取消)
  -->
  <div class="page-card new-person">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <a href="javascript:void(0)" @click="goHome">首页</a>
      <span class="sep">/</span>
      <a href="javascript:void(0)" @click="goBack">人员管理</a>
      <span class="sep">/</span>
      <span>{{ isEdit ? '编辑人员' : '新建人员' }}</span>
    </div>

    <!-- 表单 (1 个 page-card 内, 无大标题) -->
    <el-form ref="formRef" :model="form" :rules="rules" class="person-form" label-width="100px">
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="form.userName" placeholder="请输入登录用户名" maxlength="50" />
      </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" :readonly="!!myOrg" placeholder="请输入所属公司" maxlength="200">
          <template #append v-if="myOrg">
            <el-tooltip content="主账号公司, 注册时已自动关联" placement="top">
              <el-icon><Lock /></el-icon>
            </el-tooltip>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="部门" prop="department">
        <el-input v-model="form.department" placeholder="请输入部门" maxlength="50" />
      </el-form-item>

      <el-form-item label="职务" prop="position">
        <el-input v-model="form.position" placeholder="请输入职务" maxlength="50" />
      </el-form-item>

      <el-form-item label="角色" prop="role">
        <el-select v-model="form.role" placeholder="请选择角色" style="width:100%">
          <el-option label="会议执行" value="meetingExecutor" />
        </el-select>
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-select v-model="form.status" placeholder="请选择" style="width:100%">
          <el-option label="正常" value="1" />
          <el-option label="禁用" value="0" />
        </el-select>
      </el-form-item>

      <!-- 按钮区 (在表单内底部) -->
      <div class="form-actions">
        <el-button type="primary" :loading="saving" @click="onSave">保存</el-button>
        <el-button @click="goBack">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { bizGet, bizAdd, bizUpdate } from '@/api/public'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'
import { useUserStore } from '@/store/user'
import { Lock } from '@element-plus/icons-vue'

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

const isEdit = computed(() => !!route.params.id)
const personId = computed(() => route.params.id || null)

const formRef = ref()
const saving = ref(false)
// 主账号关联的公司 (注册时建, 按 user_id 反查)
const myOrg = ref(null)
const form = reactive({
  userName: '',
  name: '',
  phone: '',
  orgName: '',
  department: '',
  position: '',
  role: 'meetingExecutor',
  status: '1',
  unitType: 'executor'
})

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' }],
  department: [{ required: true, message: '请输入部门',     trigger: 'blur' }],
  position:   [{ required: true, message: '请输入职务',     trigger: 'blur' }],
  role:       [{ required: true, message: '请选择角色',     trigger: 'change' }],
  status:     [{ required: true, message: '请选择状态',     trigger: 'change' }]
}

async function loadDetail() {
  if (!isEdit.value) return
  try {
    const r = await bizGet('person', personId.value)
    Object.assign(form, r.data || {})
    form.status = String(form.status)
  } catch (e) {
    ElMessage.error('加载人员详情失败')
    goBack()
  }
}

async function onSave() {
  try { await formRef.value.validate() } catch { return }
  saving.value = true
  try {
    const payload = { ...form, unitType: 'executor' }
    if (isEdit.value) {
      await bizUpdate('person', { personId: personId.value, ...payload })
      ElMessage.success('修改成功')
    } else {
      await bizAdd('person', payload)
      ElMessage.success('新建成功')
    }
    goBack()
  } catch (e) {
    ElMessage.error(e?.msg || '保存失败')
  } finally {
    saving.value = false
  }
}

function goBack() { router.push('/executor/people') }

function goHome() {
  try { if (window.parent && window.parent.goHome) window.parent.goHome() } catch (e) {}
  router.push('/executor/overview')
}

// 加载主账号关联的公司 (注册时建, 按 user_id + orgType 反查, 一用户一类型一公司)
async function loadMyOrg() {
  const uid = userStore.user?.userId
  if (!uid) return
  try {
    const res = await request({
      url: '/business/org/list',
      method: 'get',
      params: { userId: uid, orgType: 'executor', pageNum: 1, pageSize: 1 }
    })
    const rows = (res?.data?.rows) || res?.rows || []
    if (rows.length) {
      myOrg.value = rows[0]
      // 默认带出, 提交时也直接发这个 orgId (不再依赖 orgName 字符串匹配)
      form.orgName = rows[0].orgName || ''
    }
  } catch (e) {
    console.warn('loadMyOrg:', e?.msg)
  }
}

onMounted(() => {
  if (isEdit.value) loadDetail()
  else loadMyOrg()  // 新建时默认带出主账号公司
})
</script>

<style scoped>
/* 整页面板 (与 People.vue 风格一致) */
.executor-new-person { padding: 16px; }
.breadcrumb { font-size: 13px; color: #8c8c8c; margin-bottom: 20px; }
.breadcrumb a { color: var(--brand-primary); text-decoration: none; cursor: pointer; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { margin: 0 6px; color: #bfbfbf; }

/* 表单 */
.person-form { max-width: 720px; }
.person-form :deep(.el-form-item) { margin-bottom: 18px; }
.person-form :deep(.el-form-item__label) { font-size: 14px; color: #595959; }

/* 按钮区 */
.form-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}
</style>