ruoyi-vue-pro 增加详情页面

默认情况下，没有详情页，这时候需要自己动手加一个，这里基于 Descriptions 组件。

零、/yudao-ui/yudao-ui-admin-vue3/src/components/UploadFile/src/UploadFile.vue 调整

<el-button link type="danger" @click="handleRemove(row.file)"> 删除</el-button>

改为，即当禁用时，不允许删除

<el-button v-if="!disabled" link type="danger" @click="handleRemove(row.file)"> 删除</el-button>

一、复制 EmployeeDimissionDetail.vue 、EmployeeDimissionDetail.ts 到指定要增加详情的目录。

EmployeeHealthCheckDetail.zip

二、列表页调整：

<!-- 详情操作按钮 -->
<el-button link type="primary" @click="openDetail(scope.row)"> 详情 </el-button>


<!-- 引入弹窗组件-->
<!-- 详情弹窗 -->
<EmployeeDimissionDetail ref="detailRef" />

/**  引入弹窗表单 */
import EmployeeDimissionDetail from './EmployeeDimissionDetail.vue'


/** 详情操作 */
const detailRef = ref()
const openDetail = (row: EmployeeDimissionRepVO) => {
    detailRef.value.open(row)
}

三、EmployeeTrainingEventDetail.vue 页修改地方：

1、import { allSchemas } from ‘./EmployeeTrainingEventDetail.ts’
2、defineOptions({ name: ‘EmployeeTrainingEventDetail’ })
3、await EmployeeManagementChangesRepApi.getEmployeeManagementChangesRep(info.id)

四、EmployeeTrainingEventDetail.ts 文件根据 EmployeeTrainingEventRepForm.vue 文件配置参数

五、EmployeeTrainingEventRepForm.vue 根据 EmployeeTrainingEventDetail.ts 对需要转换的字段处理（如，人员名称等）

六、其他

1、预览附件功能：

<!-- 单图或单附件 -->
        <Descriptions :data="data" :schema="allSchemas.detailSchema">
            <template #attachments="{ row }">
                <div v-if="row.attachments">
                    <el-image
                        v-if="row.attachments.includes('jpeg')"
                        class="h-80px w-80px"
                        lazy
                        :src="row.attachments"
                        :preview-src-list="[row.attachments]"
                        preview-teleported
                        fit="cover"
                    />
                    <el-link
                        v-else-if="row.attachments.includes('pdf')"
                        type="primary"
                        :href="row.attachments"
                        :underline="false"
                        target="_blank"
                        >预览</el-link
                    >
                    <el-link
                        v-else
                        type="primary"
                        download
                        :href="row.attachments"
                        :underline="false"
                        target="_blank"
                        >下载</el-link
                    >
                </div>
            </template>
        </Descriptions>

<!-- 多附件 -->
        <Descriptions :data="data" :schema="allSchemas.detailSchema">
            <template #file="{ row }">
                <UploadFile
                    disabled
                    v-model="row.file"
                />
            </template>
        </Descriptions>

<!-- 多字段多附件 -->
        <Descriptions :data="data" :schema="allSchemas.detailSchema">
            <template #level1File="{ row }">
                <UploadFile disabled v-model="row.level1File" />
            </template>
            <template #level2File="{ row }">
                <UploadFile disabled v-model="row.level2File" />
            </template>
            <template #level3File="{ row }">
                <UploadFile disabled v-model="row.level3File" />
            </template>
        </Descriptions>

2、自定义属性：

{
    label: '签订方式',
    field: 'signatureType',
    dictType: DICT_TYPE.SIGNATURE_TYPE,
    table: {
        width: 120
    },
    isSearch: false
},

    {
    label: '面试时间',
    field: 'interviewTime',
    formatter: dateFormatter,
    detail: {
        dateFormat: 'YYYY-MM-DD HH:mm:ss'
    },
    table: {
        width: 120
    }
},

相关：
CRUD 组件、useCrudSchemas

相关文章：