221 lines
7.7 KiB
Vue
221 lines
7.7 KiB
Vue
<template>
|
|
<!--
|
|
共享执行单位下人员 新建/编辑独立页 (admin/manager 共用, 通过 route.path 区分角色)
|
|
结构对齐 expert/ExpertNew.vue
|
|
unitType 硬编码 'executor'
|
|
-->
|
|
<div class="page-card executor-person-new">
|
|
<div class="breadcrumb">
|
|
<a @click="goBack">执行单位下人员</a> > {{ 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="email">
|
|
<el-input v-model="form.email" placeholder="邮箱" maxlength="100" />
|
|
</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="部门" 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>
|
|
</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()
|
|
|
|
// 角色感知: 回跳路径按 route 区分 (admin/manager 复用同一组件)
|
|
const isAdmin = computed(() => route.path.startsWith('/admin/'))
|
|
const listBasePath = computed(() => isAdmin.value ? '/admin/executor-people' : '/manager/executor-people')
|
|
|
|
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: '',
|
|
email: '',
|
|
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' }
|
|
],
|
|
email: [
|
|
{ required: true, message: '请输入邮箱', trigger: 'blur' },
|
|
{ pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: '邮箱格式错误', trigger: 'blur' }
|
|
],
|
|
orgName: [{ required: true, message: '请输入所属公司', trigger: 'blur' }],
|
|
department: [{ required: true, message: '请输入部门', trigger: 'blur' }],
|
|
position: [{ required: true, message: '请输入职务', trigger: 'blur' }]
|
|
}
|
|
|
|
function goBack() {
|
|
router.push(listBasePath.value)
|
|
}
|
|
|
|
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.account || '',
|
|
name: d.name || '',
|
|
phone: d.phone || '',
|
|
email: d.email || '',
|
|
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: 'executor' }
|
|
// 从 org 页面跳来时 route.query 带 orgId, 直接作为 FK
|
|
if (!isEdit && orgId.value) payload.orgId = orgId.value
|
|
if (isEdit) {
|
|
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>
|
|
.executor-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); }
|
|
|
|
.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); border-color: var(--brand-primary-deep); }
|
|
:deep(.el-button) { border-radius: 4px; }
|
|
:deep(.el-input__wrapper) { border-radius: 4px; }
|
|
|
|
|
|
/* ========================================
|
|
移动端适配 (≤768px)
|
|
======================================== */
|
|
@media (max-width: 768px) {
|
|
/* 卡片 padding */
|
|
.page-card { padding: 12px !important; border-radius: 4px !important; }
|
|
.breadcrumb { font-size: 12px !important; margin-bottom: 8px !important; }
|
|
|
|
/* form-card 内部 padding 收窄 */
|
|
:deep(.form-card .el-card__body) { padding: 12px !important; }
|
|
|
|
/* form-item: 横向 label + content, flex-start 让 error message 占独立行
|
|
不动 __label — Element Plus 自带 label-width=100px 自然对齐 */
|
|
:deep(.el-form-item) {
|
|
display: flex !important;
|
|
align-items: flex-start !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
:deep(.el-form-item__content) {
|
|
flex: 1 !important;
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
/* 底部按钮: 等宽并排 */
|
|
.form-actions {
|
|
flex-wrap: wrap !important;
|
|
gap: 8px !important;
|
|
margin-top: 12px !important;
|
|
}
|
|
.form-actions :deep(.el-button) {
|
|
flex: 1 1 0 !important;
|
|
width: 0 !important;
|
|
}
|
|
}
|
|
</style>
|