feat(executor/people): 查看改为新页面 (只读, 无账号/状态字段)
- 新建 executor/PersonDetail.vue, 结构与 NewPerson.vue 一致 (page-card + breadcrumb + el-card form-card + 两列 el-row), 但只读 + 不显示用户名/初始密码/状态 (6 字段: 姓名/手机号/所属公司/部门/职务/角色) - router 加 /executor/people/detail/:id → PersonDetail.vue - People.vue: onView 改为 router.push, 删 view dialog 块 + view/viewOpen refs Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -106,6 +106,7 @@ const routes = [
|
|||||||
{ path: 'people', name: 'executor-people', component: () => import('@/views/executor/People.vue'), meta: { title: '人员管理' } },
|
{ path: 'people', name: 'executor-people', component: () => import('@/views/executor/People.vue'), meta: { title: '人员管理' } },
|
||||||
{ path: 'people/new', name: 'executor-people-new', component: () => import('@/views/executor/NewPerson.vue'), meta: { title: '新建人员' } },
|
{ path: 'people/new', name: 'executor-people-new', component: () => import('@/views/executor/NewPerson.vue'), meta: { title: '新建人员' } },
|
||||||
{ path: 'people/edit/:id', name: 'executor-people-edit', component: () => import('@/views/executor/NewPerson.vue'), meta: { title: '编辑人员' } },
|
{ path: 'people/edit/:id', name: 'executor-people-edit', component: () => import('@/views/executor/NewPerson.vue'), meta: { title: '编辑人员' } },
|
||||||
|
{ path: 'people/detail/:id', name: 'executor-people-detail', component: () => import('@/views/executor/PersonDetail.vue'), meta: { title: '人员详情' } },
|
||||||
{ path: 'account', name: 'executor-account', component: () => import('@/views/executor/Account.vue'), meta: { title: '账号信息' } },
|
{ path: 'account', name: 'executor-account', component: () => import('@/views/executor/Account.vue'), meta: { title: '账号信息' } },
|
||||||
{ path: 'labor', name: 'executor-labor', component: () => import('@/views/executor/Labor.vue'), meta: { title: '劳务凭证' } }
|
{ path: 'labor', name: 'executor-labor', component: () => import('@/views/executor/Labor.vue'), meta: { title: '劳务凭证' } }
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -101,20 +101,6 @@
|
|||||||
<el-button type="primary" @click="resultVisible = false">关闭</el-button>
|
<el-button type="primary" @click="resultVisible = false">关闭</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
<!-- ========== Dialog: 查看 ========== -->
|
|
||||||
<el-dialog v-model="viewOpen" title="人员详情" width="520px">
|
|
||||||
<el-descriptions :column="2" border>
|
|
||||||
<el-descriptions-item label="姓名">{{ view.name }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="手机号">{{ view.phone }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="所属公司" :span="2">{{ view.orgName }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="部门">{{ view.department }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="职务">{{ view.position }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="角色">{{ translatePersonRole(view.role) }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="状态">{{ view.status || '正常' }}</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
<template #footer><el-button @click="viewOpen = false">关闭</el-button></template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -137,8 +123,6 @@ const q = reactive({ name: '', phone: '', orgName: '', department: '', position:
|
|||||||
const page = reactive({ pageNum: 1, pageSize: 10, total: 0 })
|
const page = reactive({ pageNum: 1, pageSize: 10, total: 0 })
|
||||||
|
|
||||||
const importOpen = ref(false)
|
const importOpen = ref(false)
|
||||||
const view = ref({})
|
|
||||||
const viewOpen = ref(false)
|
|
||||||
|
|
||||||
const uploadRef = ref()
|
const uploadRef = ref()
|
||||||
const importFile = ref(null) // el-upload 选中的原始 File 对象 (file.raw)
|
const importFile = ref(null) // el-upload 选中的原始 File 对象 (file.raw)
|
||||||
@@ -165,7 +149,7 @@ function reset() { Object.assign(q, { name:'',phone:'',orgName:'',department:'',
|
|||||||
function goNew() { router.push('/executor/people/new') }
|
function goNew() { router.push('/executor/people/new') }
|
||||||
function goEdit(row) { router.push(`/executor/people/edit/${row.personId}`) }
|
function goEdit(row) { router.push(`/executor/people/edit/${row.personId}`) }
|
||||||
|
|
||||||
function onView(row) { view.value = row; viewOpen.value = true }
|
function onView(row) { router.push(`/executor/people/detail/${row.personId}`) }
|
||||||
|
|
||||||
async function onToggleStatus(row, action) {
|
async function onToggleStatus(row, action) {
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -0,0 +1,139 @@
|
|||||||
|
<template>
|
||||||
|
<!--
|
||||||
|
结构与 executor/NewPerson.vue 一致, 但只读, 不显示用户名/初始密码/状态
|
||||||
|
字段精简: 姓名 / 手机号 / 所属公司 / 部门 / 职务 / 角色
|
||||||
|
-->
|
||||||
|
<div class="page-card person-detail">
|
||||||
|
<!-- 面包屑 -->
|
||||||
|
<div class="breadcrumb">
|
||||||
|
<a @click="goBack">人员管理</a> > 人员详情
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 详情卡片 -->
|
||||||
|
<el-card v-loading="loadingDetail" shadow="never" class="form-card nested">
|
||||||
|
<el-form :model="form" label-width="120px" class="readonly-form">
|
||||||
|
|
||||||
|
<el-row :gutter="12">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="姓名">
|
||||||
|
<el-input v-model="form.name" readonly />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="手机号">
|
||||||
|
<el-input v-model="form.phone" readonly />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row :gutter="12">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="所属公司">
|
||||||
|
<el-input v-model="form.orgName" readonly />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="部门">
|
||||||
|
<el-input v-model="form.department" readonly />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row :gutter="12">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="职务">
|
||||||
|
<el-input v-model="form.position" readonly />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="角色">
|
||||||
|
<!-- 与 sponsor/PersonDetail 一致: el-tag 展示 -->
|
||||||
|
<el-tag :type="form.role === 'admin' ? 'warning' : 'primary'" disable-transitions>
|
||||||
|
{{ translatePersonRole(form.role) }}
|
||||||
|
</el-tag>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<div class="form-actions">
|
||||||
|
<el-button @click="goBack">返回</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref, onMounted } from 'vue'
|
||||||
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { bizGet } from '@/api/public'
|
||||||
|
import { translatePersonRole } from '@/utils/roleMap'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
const loadingDetail = ref(false)
|
||||||
|
const personId = route.params.id
|
||||||
|
|
||||||
|
const form = reactive({
|
||||||
|
name: '',
|
||||||
|
phone: '',
|
||||||
|
orgName: '',
|
||||||
|
department: '',
|
||||||
|
position: '',
|
||||||
|
role: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
async function loadDetail() {
|
||||||
|
loadingDetail.value = true
|
||||||
|
try {
|
||||||
|
const res = await bizGet('person', personId)
|
||||||
|
if (res?.code === 200 && res.data) {
|
||||||
|
const d = res.data
|
||||||
|
Object.assign(form, {
|
||||||
|
name: d.name || '',
|
||||||
|
phone: d.phone || '',
|
||||||
|
orgName: d.orgName || '',
|
||||||
|
department: d.department || '',
|
||||||
|
position: d.position || '',
|
||||||
|
role: d.role || '',
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res?.msg || '加载失败')
|
||||||
|
goBack()
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
ElMessage.error(e?.msg || '加载失败')
|
||||||
|
goBack()
|
||||||
|
} finally {
|
||||||
|
loadingDetail.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function goBack() {
|
||||||
|
router.push({ path: '/executor/people', query: { _t: Date.now() } })
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(loadDetail)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 结构对齐 executor/NewPerson.vue (page-card / form-card nested / form-actions 风格) */
|
||||||
|
.person-detail { max-width: 1200px; }
|
||||||
|
.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-input__wrapper), :deep(.el-textarea__inner) { border-radius: 4px; }
|
||||||
|
/* readonly 输入框视觉降级 (灰色背景) */
|
||||||
|
:deep(.el-input.is-readonly .el-input__wrapper) { background-color: #fafafa; box-shadow: none; }
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user