Merge remote-tracking branch 'origin/developer' into developer

This commit is contained in:
吴红兵
2026-02-28 11:25:53 +08:00
3 changed files with 501 additions and 476 deletions

View File

@@ -80,7 +80,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 10px;
} }
.header-right { .header-right {

View File

@@ -13,16 +13,21 @@
<el-form-item class="role-form-item"> <el-form-item class="role-form-item">
<el-radio-group v-model="radio" class="role-radio-group" @change="handleChangeRole"> <el-radio-group v-model="radio" class="role-radio-group" @change="handleChangeRole">
<template v-for="(roles, groupName) in allRoleGroups" :key="groupName"> <template v-for="(roles, groupName) in allRoleGroups" :key="groupName">
<el-card class="role-group-card" shadow="hover">
<template #header>
<span class="group-name">{{ groupName }}</span>
</template>
<div class="role-group"> <div class="role-group">
<el-divider>{{ groupName }}</el-divider>
<el-radio-button <el-radio-button
v-for="item in roles" v-for="item in roles"
:key="item.roleCode" :key="item.roleCode"
:label="item.roleCode" :label="item.roleCode"
size="small"
> >
{{ item.roleName }} {{ item.roleName }}
</el-radio-button> </el-radio-button>
</div> </div>
</el-card>
</template> </template>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
@@ -121,31 +126,12 @@ defineExpose({
flex-wrap: wrap; flex-wrap: wrap;
} }
} }
.role-group {
width: 100%;
flex: 0 0 100%;
margin-bottom: 12px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
&:last-child {
margin-bottom: 0;
}
}
.group-name {
font-size: 13px;
color: var(--el-text-color-secondary);
margin-bottom: 6px;
}
.role-radio-group { .role-radio-group {
display: flex; display: flex;
flex-wrap: wrap; flex-direction: column;
gap: 8px; gap: 6px;
align-items: flex-start; width: 100%;
/* 每个分组内按钮可换行,分组之间不重叠 */
:deep(.el-radio-button) { :deep(.el-radio-button) {
margin: 0; margin: 0;
} }
@@ -153,9 +139,35 @@ defineExpose({
border-radius: 6px !important; border-radius: 6px !important;
border: 1px solid var(--el-border-color) !important; border: 1px solid var(--el-border-color) !important;
margin-left: 0 !important; margin-left: 0 !important;
line-height: 1.3;
} }
:deep(.el-radio-button.is-active .el-radio-button__inner) { :deep(.el-radio-button.is-active .el-radio-button__inner) {
border-color: var(--el-color-primary) !important; border-color: var(--el-color-primary) !important;
} }
} }
.role-group-card {
width: 100%;
flex: 0 0 auto;
:deep(.el-card__header) {
padding: 6px 12px;
font-size: 14px;
font-weight: 600;
color: var(--el-text-color-primary);
}
:deep(.el-card__body) {
padding: 6px 12px 8px;
}
}
.role-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
}
.group-name {
font-size: 14px;
font-weight: 600;
color: var(--el-text-color-primary);
}
</style> </style>

View File

@@ -1,32 +1,77 @@
<template> <template>
<div class="titlerelation-page"> <div class="page-cards">
<div class="page-wrapper"> <div class="page-wrapper">
<!-- 内容区最上搜索其次标题+按钮再下方表格 --> <!-- 筛选卡片 -->
<div class="content-block"> <el-card v-show="showSearch" class="search-card" shadow="never">
<!-- 最上搜索区 --> <search-form
<div v-show="showSearch" class="content-block__filter"> :model="search"
<search-form :model="search" ref="searchFormRef" @keyup-enter="handleFilter"> ref="searchFormRef"
:show-filter-title="false"
@keyup-enter="handleFilter"
>
<template #default="{ visible }"> <template #default="{ visible }">
<template v-if="visible"> <template v-if="visible">
<el-form-item label="姓名" prop="realName"> <el-form-item label="姓名" prop="realName">
<el-input v-model="search.realName" clearable placeholder="请输入姓名" class="filter-input" /> <el-input
v-model="search.realName"
clearable
placeholder="请输入姓名"
class="filter-input"
/>
</el-form-item> </el-form-item>
<el-form-item label="工号" prop="teacherNo"> <el-form-item label="工号" prop="teacherNo">
<el-input v-model="search.teacherNo" clearable placeholder="请输入工号" class="filter-input" /> <el-input
v-model="search.teacherNo"
clearable
placeholder="请输入工号"
class="filter-input"
/>
</el-form-item> </el-form-item>
<el-form-item label="审核状态" prop="state"> <el-form-item label="审核状态" prop="state">
<el-select v-model="search.state" clearable placeholder="请选择审核状态" class="filter-select"> <el-select
<el-option v-for="item in professionalState" :key="item.value" :label="item.label" :value="item.value" /> v-model="search.state"
clearable
placeholder="请选择审核状态"
class="filter-select"
>
<el-option
v-for="item in professionalState"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="职称" prop="professionalTitleConfigId"> <el-form-item label="职称" prop="professionalTitleConfigId">
<el-select v-model="search.professionalTitleConfigId" clearable filterable placeholder="请选择职称" class="filter-select"> <el-select
<el-option v-for="item in professionalTitleList" :key="item.id" :label="item.professionalTitle" :value="item.id" /> v-model="search.professionalTitleConfigId"
clearable
filterable
placeholder="请选择职称"
class="filter-select"
>
<el-option
v-for="item in professionalTitleList"
:key="item.id"
:label="item.professionalTitle"
:value="item.id"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="专业技术职务" prop="majorStation"> <el-form-item label="专业技术职务" prop="majorStation">
<el-select v-model="search.majorStation" clearable filterable placeholder="请选择专业技术职务" class="filter-select"> <el-select
<el-option v-for="item in majorStationList" :key="item.id" :label="item.majorStationName" :value="item.id" /> v-model="search.majorStation"
clearable
filterable
placeholder="请选择专业技术职务"
class="filter-select"
>
<el-option
v-for="item in majorStationList"
:key="item.id"
:label="item.majorStationName"
:value="item.id"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</template> </template>
@@ -38,15 +83,24 @@
</el-form-item> </el-form-item>
</template> </template>
</search-form> </search-form>
</div> </el-card>
<!-- 其次左侧按钮右侧 RightToolbar --> <!-- 列表内容卡片 -->
<div class="content-block__header"> <el-card class="content-card" shadow="never">
<template #header>
<div class="card-header">
<span class="card-title">
<el-icon class="title-icon"><Medal /></el-icon>
职称关系
</span>
<div class="header-actions"> <div class="header-actions">
<div class="action-group"> <div class="action-group">
<el-button v-if="hasAuth('professional_professionaltitlerelation_add')" type="primary" icon="FolderAdd" @click="handleAdd" <el-button
>新增</el-button v-if="hasAuth('professional_professionaltitlerelation_add')"
> type="primary"
icon="FolderAdd"
@click="handleAdd"
>新增</el-button>
<el-button <el-button
v-if="hasAuth('professional_teacherbase_export')" v-if="hasAuth('professional_teacherbase_export')"
type="warning" type="warning"
@@ -54,25 +108,19 @@
icon="Download" icon="Download"
@click="handleDownLoadWord" @click="handleDownLoadWord"
:loading="exportLoading" :loading="exportLoading"
>导出信息</el-button >导出信息</el-button>
>
<el-button
v-auth="'professional_teacherinfo_import'"
type="primary"
plain
icon="UploadFilled"
:loading="exportLoading"
@click="handleImportDialog"
>导入信息
</el-button>
</div> </div>
<div class="header-right"> <div class="header-right">
<RightToolbar v-model:showSearch="showSearch" @queryTable="getDataList" /> <RightToolbar
v-model:showSearch="showSearch"
@queryTable="getDataList"
/>
</div> </div>
</div> </div>
</div> </div>
</template>
<!-- 再下方表格 --> <!-- 表格 -->
<el-table <el-table
ref="tableRef" ref="tableRef"
:data="state.dataList" :data="state.dataList"
@@ -117,8 +165,7 @@
type="primary" type="primary"
link link
icon="Document" icon="Document"
@click="handlePreview(scope.row.srcList)" @click="handlePreview(scope.row.srcList)">查看
>查看
</el-button> </el-button>
<span v-else class="empty-text">-</span> <span v-else class="empty-text">-</span>
</template> </template>
@@ -134,43 +181,42 @@
type="primary" type="primary"
link link
icon="edit-pen" icon="edit-pen"
@click="handleEdit(scope.row)" @click="handleEdit(scope.row)">修改
>修改
</el-button> </el-button>
<el-button <el-button
v-if="hasAuth('professional_professionaltitlerelation_exam') && scope.row.canExam" v-if="hasAuth('professional_professionaltitlerelation_exam') && scope.row.canExam"
type="success" type="success"
link link
icon="CircleCheck" icon="CircleCheck"
@click="changeState(scope.row, 1)" @click="changeState(scope.row, 1)">通过
>通过
</el-button> </el-button>
<el-button <el-button
v-if="hasAuth('professional_professionaltitlerelation_exam') && scope.row.canDeptExam" v-if="hasAuth('professional_professionaltitlerelation_exam') && scope.row.canDeptExam"
type="success" type="success"
link link
icon="CircleCheck" icon="CircleCheck"
@click="changeState(scope.row, 1)" @click="changeState(scope.row, 1)">部门通过
>部门通过
</el-button> </el-button>
<el-button <el-button
v-if="hasAuth('professional_professionaltitlerelation_exam') && scope.row.canBack" v-if="hasAuth('professional_professionaltitlerelation_exam') && scope.row.canBack"
type="danger" type="danger"
link link
icon="CircleClose" icon="CircleClose"
@click="changeState(scope.row, -2)" @click="changeState(scope.row, -2)">驳回
>驳回
</el-button> </el-button>
<el-button <el-button
v-if="hasAuth('professional_professionaltitlerelation_exam') && scope.row.canDeptBack" v-if="hasAuth('professional_professionaltitlerelation_exam') && scope.row.canDeptBack"
type="danger" type="danger"
link link
icon="CircleClose" icon="CircleClose"
@click="changeState(scope.row, -2)" @click="changeState(scope.row, -2)">部门驳回
>部门驳回
</el-button> </el-button>
<el-button v-if="hasAuth('professional_professionaltitlerelation_del')" type="danger" link icon="delete" @click="handleDel(scope.row)" <el-button
>删除 v-if="hasAuth('professional_professionaltitlerelation_del')"
type="danger"
link
icon="delete"
@click="handleDel(scope.row)">删除
</el-button> </el-button>
</div> </div>
</template> </template>
@@ -178,61 +224,72 @@
</el-table> </el-table>
<!-- 分页 --> <!-- 分页 -->
<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle" /> <pagination
</div> v-bind="state.pagination"
@current-change="currentChangeHandle"
@size-change="sizeChangeHandle"
/>
</el-card>
</div> </div>
<!-- 材料预览图片直接显示PDF 在组件内部 dialog 中显示 --> <!-- 材料预览图片直接显示PDF 在组件内部 dialog 中显示 -->
<preview-file v-for="src in imgUrl" :key="src.title" :authSrc="src.url" dialog-title="职称材料" /> <preview-file
v-for="src in imgUrl"
:key="src.title"
:authSrc="src.url"
dialog-title="职称材料"
/>
<!-- 子组件 --> <!-- 子组件 -->
<MultiDialog ref="multiDialogRef" @getList="getDataList" :page="state.pagination" :nowRow="null" /> <MultiDialog ref="multiDialogRef" @getList="getDataList" :page="state.pagination" :nowRow="null" />
<DataForm ref="dataFormRef" @refreshData="handleFilter" /> <DataForm ref="dataFormRef" @refreshData="handleFilter" />
<ProfessionalBackResaon ref="backReasonRef" @refreshData="handleFilter" /> <ProfessionalBackResaon ref="backReasonRef" @refreshData="handleFilter" />
<import-teacher-other-info ref="importTeacherOtherInfoRef" @refreshData="handleFilter"></import-teacher-other-info>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'; import { ref, reactive, onMounted, nextTick } from 'vue'
import { BasicTableProps, useTable } from '/@/hooks/table'; import { BasicTableProps, useTable } from '/@/hooks/table'
import { useAuth } from '/@/hooks/auth'; import { useAuth } from '/@/hooks/auth'
import { useMessage } from '/@/hooks/message'; import { useMessage } from '/@/hooks/message'
import { useMessageBox } from '/@/hooks/message'; import { useMessageBox } from '/@/hooks/message'
import { useDict } from '/@/hooks/dict'; import { useDict } from '/@/hooks/dict'
// 接口 // 接口
import { fetchList, examObj, delObj } from '/@/api/professional/professionaluser/professionaltitlerelation'; import {
import { getProfessionalTitleList } from '/@/api/professional/rsbase/professionaltitlelevelconfig'; fetchList,
import { getMajorStationList } from '/@/api/professional/rsbase/professionalmajorstation'; examObj,
delObj
} from '/@/api/professional/professionaluser/professionaltitlerelation'
import { getProfessionalTitleList } from '/@/api/professional/rsbase/professionaltitlelevelconfig'
import { getMajorStationList } from '/@/api/professional/rsbase/professionalmajorstation'
import { defineAsyncComponent } from 'vue'
import { Medal } from '@element-plus/icons-vue'
import { makeExportTeacherInfoByTypeTask } from '/@/api/professional/professionalfile'; import { makeExportTeacherInfoByTypeTask } from '/@/api/professional/professionalfile';
import { defineAsyncComponent } from 'vue';
// 子组件 // 子组件
const TeacherNameNo = defineAsyncComponent(() => import('/@/components/TeacherNameNo/index.vue')); const TeacherNameNo = defineAsyncComponent(() => import('/@/components/TeacherNameNo/index.vue'))
const AuditState = defineAsyncComponent(() => import('/@/components/AuditState/index.vue')); const AuditState = defineAsyncComponent(() => import('/@/components/AuditState/index.vue'))
const MultiDialog = defineAsyncComponent(() => import('/@/views/professional/teacherbase/multiDialog.vue')); const MultiDialog = defineAsyncComponent(() => import('/@/views/professional/teacherbase/multiDialog.vue'))
const DataForm = defineAsyncComponent(() => import('./form.vue')); const DataForm = defineAsyncComponent(() => import('./form.vue'))
const ProfessionalBackResaon = defineAsyncComponent(() => import('/@/views/professional/common/professional-back-resaon.vue')); const ProfessionalBackResaon = defineAsyncComponent(() => import('/@/views/professional/common/professional-back-resaon.vue'))
const previewFile = defineAsyncComponent(() => import('/@/components/tools/preview-file.vue')); const previewFile = defineAsyncComponent(() => import('/@/components/tools/preview-file.vue'))
const ImportTeacherOtherInfo = defineAsyncComponent(() => import('/@/views/professional/common/import-teacher-other-info.vue'));
// 无权限即无节点:使用 useAuth + v-if // 无权限即无节点:使用 useAuth + v-if
const { hasAuth } = useAuth(); const { hasAuth } = useAuth()
// 消息提示 hooks // 消息提示 hooks
const message = useMessage(); const message = useMessage()
const messageBox = useMessageBox(); const messageBox = useMessageBox()
// 字典数据 // 字典数据
const { professional_state: professionalState } = useDict('professional_state'); const { professional_state: professionalState } = useDict('professional_state')
// 表格引用 // 表格引用
const tableRef = ref(); const tableRef = ref()
const searchFormRef = ref(); const searchFormRef = ref()
const multiDialogRef = ref(); const multiDialogRef = ref()
const dataFormRef = ref(); const dataFormRef = ref()
const backReasonRef = ref(); const backReasonRef = ref()
const showSearch = ref(true); // 方案 F默认收起筛选首屏仅一张大卡片 const showSearch = ref(true) // 方案 F默认收起筛选首屏仅一张大卡片
// 搜索表单数据 // 搜索表单数据
const search = reactive({ const search = reactive({
@@ -240,85 +297,82 @@ const search = reactive({
teacherNo: '', teacherNo: '',
realName: '', realName: '',
professionalTitleConfigId: '', professionalTitleConfigId: '',
majorStation: '', majorStation: ''
}); })
// 材料预览 // 材料预览
const imgUrl = ref<Array<{ title: string; url: string }>>([]); const imgUrl = ref<Array<{ title: string; url: string }>>([])
// 导出加载状态 // 导出加载状态
const exportLoading = ref(false); const exportLoading = ref(false)
// 职称和专业技术职务列表 // 职称和专业技术职务列表
const professionalTitleList = ref<any[]>([]); const professionalTitleList = ref<any[]>([])
const majorStationList = ref<any[]>([]); const majorStationList = ref<any[]>([])
// 配置 useTable // 配置 useTable
const state: BasicTableProps = reactive<BasicTableProps>({ const state: BasicTableProps = reactive<BasicTableProps>({
pageList: async (params: any) => { pageList: async (params: any) => {
const response = await fetchList(params); const response = await fetchList(params)
const records = response.data.records || []; const records = response.data.records || []
// 处理证明材料列表 // 处理证明材料列表
records.forEach((v: any) => { records.forEach((v: any) => {
if (v.evidence != null) { if (v.evidence != null) {
v.srcList = [v.evidence]; v.srcList = [v.evidence]
} else { } else {
v.srcList = []; v.srcList = []
} }
}); })
return { return {
data: { data: {
records, records,
total: response.data.total || 0, total: response.data.total || 0
}
}
}, },
}; queryForm: search
}, })
queryForm: search,
});
const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state); const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state)
// 预览材料 // 预览材料
const handlePreview = (list: string[]) => { const handlePreview = (list: string[]) => {
imgUrl.value = []; imgUrl.value = []
nextTick(() => { nextTick(() => {
list.forEach((v) => { list.forEach(v => {
imgUrl.value.push({ imgUrl.value.push({
title: '', title: '',
url: v, url: v
}); })
}); })
}); })
}; }
// 审核状态变更 // 审核状态变更
const changeState = (row: any, val: number) => { const changeState = (row: any, val: number) => {
if (val === 1) { if (val === 1) {
const str = '通过'; const str = '通过'
messageBox messageBox.confirm(`是否确认${str}${row.realName}的申请`).then(async () => {
.confirm(`是否确认${str}${row.realName}的申请`)
.then(async () => {
try { try {
await examObj({ await examObj({
id: row.id, id: row.id,
state: val, state: val
}); })
message.success('操作成功'); message.success('操作成功')
getDataList(); getDataList()
} catch (error: any) { } catch (error: any) {
// 处理业务错误 // 处理业务错误
} }
}) }).catch(() => {})
.catch(() => {});
} else if (val === -2) { } else if (val === -2) {
backReasonRef.value?.init(row, 'title'); backReasonRef.value?.init(row, 'title')
} }
}; }
// 查询 // 查询
const handleFilter = () => { const handleFilter = () => {
getDataList(); getDataList()
}; }
// 重置查询 // 重置查询
const resetQuery = () => { const resetQuery = () => {
@@ -327,41 +381,38 @@ const resetQuery = () => {
teacherNo: '', teacherNo: '',
realName: '', realName: '',
professionalTitleConfigId: '', professionalTitleConfigId: '',
majorStation: '', majorStation: ''
}); })
getDataList(); getDataList()
}; }
// 打开新增窗口 // 打开新增窗口
const handleAdd = () => { const handleAdd = () => {
dataFormRef.value?.openDialog(); dataFormRef.value?.openDialog()
}; }
// 打开编辑窗口 // 打开编辑窗口
const handleEdit = (row: any) => { const handleEdit = (row: any) => {
dataFormRef.value?.openDialog(row); dataFormRef.value?.openDialog(row)
}; }
// 删除 // 删除
const handleDel = (row: any) => { const handleDel = (row: any) => {
messageBox messageBox.confirm('是否确认删除该条记录').then(async () => {
.confirm('是否确认删除该条记录')
.then(async () => {
try { try {
await delObj(row.id); await delObj(row.id)
message.success('删除成功'); message.success('删除成功')
// 如果当前页只剩一条数据,且不是第一页,则跳转到上一页 // 如果当前页只剩一条数据,且不是第一页,则跳转到上一页
if (state.pagination && state.dataList && state.dataList.length === 1 && state.pagination.current && state.pagination.current > 1) { if (state.pagination && state.dataList && state.dataList.length === 1 && state.pagination.current && state.pagination.current > 1) {
state.pagination.current = state.pagination.current - 1; state.pagination.current = state.pagination.current - 1
} }
getDataList(); getDataList()
} catch (error: any) { } catch (error: any) {
// 处理业务错误 // 处理业务错误
message.error(error.msg); message.error(error.msg)
} }
}) }).catch(() => {})
.catch(() => {}); }
};
// 导出 // 导出
const handleDownLoadWord = async () => { const handleDownLoadWord = async () => {
@@ -373,62 +424,47 @@ const handleDownLoadWord = async () => {
setTimeout(() => { setTimeout(() => {
exportLoading.value = false; exportLoading.value = false;
}, 3000); // 5分钟后自动关闭 }, 3000); // 5分钟后自动关闭
}; }
// 获取职称名称 // 获取职称名称
const getProfessionalTitleName = (id: string | number) => { const getProfessionalTitleName = (id: string | number) => {
const item = professionalTitleList.value.find((item: any) => item.id === id); const item = professionalTitleList.value.find((item: any) => item.id === id)
return item ? item.professionalTitle : '-'; return item ? item.professionalTitle : '-'
}; }
// 获取专业技术职务名称 // 获取专业技术职务名称
const getMajorStationName = (id: string | number) => { const getMajorStationName = (id: string | number) => {
const item = majorStationList.value.find((item: any) => item.id === id); const item = majorStationList.value.find((item: any) => item.id === id)
return item ? item.majorStationName : '-'; return item ? item.majorStationName : '-'
}; }
// 加载字典数据 // 加载字典数据
const loadDictData = async () => { const loadDictData = async () => {
try { try {
// 加载职称列表 // 加载职称列表
const titleRes = await getProfessionalTitleList(); const titleRes = await getProfessionalTitleList()
if (titleRes && titleRes.data) { if (titleRes && titleRes.data) {
professionalTitleList.value = titleRes.data; professionalTitleList.value = titleRes.data
} }
// 加载专业技术职务列表 // 加载专业技术职务列表
const majorRes = await getMajorStationList(); const majorRes = await getMajorStationList()
if (majorRes && majorRes.data) { if (majorRes && majorRes.data) {
majorStationList.value = majorRes.data; majorStationList.value = majorRes.data
} }
} catch (error) { } catch (error) {
// Failed to load dict data // Failed to load dict data
} }
}; }
const importTeacherOtherInfoRef = ref();
const handleImportDialog = () => {
importTeacherOtherInfoRef.value?.init('titleRelation');
};
// 初始化:仅加载下拉字典,表格数据由 useTable 在 createdIsNeed: true 时自动请求 // 初始化:仅加载下拉字典,表格数据由 useTable 在 createdIsNeed: true 时自动请求
onMounted(async () => { onMounted(async () => {
await loadDictData(); await loadDictData()
}); })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.titlerelation-page { @import '/@/assets/styles/page-cards.scss';
padding: 12px;
min-height: 100%;
background: var(--el-bg-color-page, #f5f6f8);
}
.page-wrapper {
display: flex;
flex-direction: column;
gap: 0;
}
/* 筛选:内容区最上方,无上外边距;与下方标题栏间距用 margin-bottom */ /* 筛选:内容区最上方,无上外边距;与下方标题栏间距用 margin-bottom */
.content-block__filter { .content-block__filter {
@@ -476,29 +512,7 @@ onMounted(async () => {
} }
} }
.header-actions { /* header-actions / action-group / header-right 的基础布局来自 page-cards.scss */
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
width: 100%;
}
/* 按钮间距按规范 10px与 RightToolbar 区隔 */
.action-group {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.header-right {
display: flex;
align-items: center;
gap: 8px;
padding-left: 12px;
// border-left: 1px solid var(--el-border-color-lighter);
}
/* 表格 */ /* 表格 */
.titlerelation-table { .titlerelation-table {