style: 展开图标添加反馈信息tooltip,详情链接阻止行展开

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
wsm
2026-07-23 15:56:49 +08:00
co-authored by Claude Opus 4.7
parent 077617948d
commit ab6cd2fccf
2 changed files with 45 additions and 5 deletions
@@ -46,7 +46,7 @@
</div> </div>
<div class="content"> <div class="content">
<!--引用表格--> <!--引用表格-->
<BasicTable @register="registerTable" :rowSelection="rowSelection" :expandedRowKeys="expandedRowKeys" @expand="handleExpand" :rowClassName="(r) => r.bpmStatus ? 'status-row-' + r.bpmStatus : ''"> <BasicTable @register="registerTable" :rowSelection="rowSelection" :expandedRowKeys="expandedRowKeys" @expand="handleExpand" :expandIcon="expandIcon" :rowClassName="(r) => r.bpmStatus ? 'status-row-' + r.bpmStatus : ''">
<!--插槽:table标题--> <!--插槽:table标题-->
<template #tableTitle> <template #tableTitle>
<a-button type="primary" v-auth="actionAuth.add" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button> <a-button type="primary" v-auth="actionAuth.add" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
@@ -90,7 +90,7 @@
<template v-slot:bodyCell="{ column, record, index, text }"> <template v-slot:bodyCell="{ column, record, index, text }">
<template v-if="column.dataIndex === 'title'"> <template v-if="column.dataIndex === 'title'">
<a-tooltip title="点击查看详情"> <a-tooltip title="点击查看详情">
<a style="font-weight: 500" @click="handleDetail(record)">{{ text }}</a> <a style="font-weight: 500" @mousedown.stop @click.stop="handleDetail(record)">{{ text }}</a>
</a-tooltip> </a-tooltip>
</template> </template>
</template> </template>
@@ -156,7 +156,7 @@
</template> </template>
<script lang="ts" name="bgpartymatter-bgPartymatter" setup> <script lang="ts" name="bgpartymatter-bgPartymatter" setup>
import { reactive, ref, onMounted } from 'vue'; import { reactive, ref, h, onMounted } from 'vue';
import { BasicTable, TableAction } from '/@/components/Table'; import { BasicTable, TableAction } from '/@/components/Table';
import type { BasicColumn } from '/@/components/Table'; import type { BasicColumn } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage'; import { useListPage } from '/@/hooks/system/useListPage';
@@ -167,6 +167,7 @@
import JInput from '/@/components/Form/src/jeecg/components/JInput.vue'; import JInput from '/@/components/Form/src/jeecg/components/JInput.vue';
import DeptRoleUserSelectDropDown from '/@/components/semri/userComponent/DeptRoleUserSelectDropDown.vue'; import DeptRoleUserSelectDropDown from '/@/components/semri/userComponent/DeptRoleUserSelectDropDown.vue';
import { PARTY_COMMITTEE_DEPT_ID, CHARGE_LEADER_ROLE_ID } from '/@/constant/supervision'; import { PARTY_COMMITTEE_DEPT_ID, CHARGE_LEADER_ROLE_ID } from '/@/constant/supervision';
import { Tooltip } from 'ant-design-vue';
import Icon from '/@/components/Icon/index'; import Icon from '/@/components/Icon/index';
import BgPartymatterModal from './components/BgPartymatterModal.vue'; import BgPartymatterModal from './components/BgPartymatterModal.vue';
import BusinessProcessListModal from '/src/components/semri/process/BusinessProcessListModal.vue'; import BusinessProcessListModal from '/src/components/semri/process/BusinessProcessListModal.vue';
@@ -197,6 +198,25 @@
const FLOW_CODE = 'dev_task_task_001'; const FLOW_CODE = 'dev_task_task_001';
const BUSINESS_TABLE_NAME = 'bg_partymatter'; const BUSINESS_TABLE_NAME = 'bg_partymatter';
const FORM_URL = 'bg/bgpartymatter/components/BgPartymatterBPMForm'; const FORM_URL = 'bg/bgpartymatter/components/BgPartymatterBPMForm';
function expandIcon({ expanded, onExpand, record }: { expanded: boolean; onExpand: Function; record: Recordable }) {
const iconCls = expanded
? 'ant-table-row-expand-icon ant-table-row-expand-icon-expanded'
: 'ant-table-row-expand-icon ant-table-row-expand-icon-collapsed';
return h(
Tooltip,
{ title: '查看当前事项办理情况' },
{
default: () =>
h('button', {
type: 'button',
class: iconCls,
onClick: (e: Event) => onExpand(record, e),
}),
},
);
}
const actionAuth = { const actionAuth = {
add: `${props.permissionPrefix}:add`, add: `${props.permissionPrefix}:add`,
edit: `${props.permissionPrefix}:edit`, edit: `${props.permissionPrefix}:edit`,
@@ -442,6 +462,7 @@
* 详情事件 * 详情事件
*/ */
function handleDetail(record: Recordable) { function handleDetail(record: Recordable) {
expandedRowKeys.value = [];
registerModal.value.disableSubmit = true; registerModal.value.disableSubmit = true;
registerModal.value.edit(record); registerModal.value.edit(record);
} }
+21 -2
View File
@@ -34,7 +34,7 @@
</a-form> </a-form>
</div> </div>
<!--引用表格--> <!--引用表格-->
<BasicTable @register="registerTable" :rowSelection="rowSelection" :expandedRowKeys="expandedRowKeys" @expand="handleExpand" :rowClassName="(r) => r.bpmStatus ? 'status-row-' + r.bpmStatus : ''"> <BasicTable @register="registerTable" :rowSelection="rowSelection" :expandedRowKeys="expandedRowKeys" @expand="handleExpand" :expandIcon="expandIcon" :rowClassName="(r) => r.bpmStatus ? 'status-row-' + r.bpmStatus : ''">
<!--插槽:table标题--> <!--插槽:table标题-->
<template #tableTitle> <template #tableTitle>
<a-button type="primary" v-auth="'bqtakepulse:bg_takepulse:add'" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button> <a-button type="primary" v-auth="'bqtakepulse:bg_takepulse:add'" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
@@ -136,7 +136,7 @@
</template> </template>
<script lang="ts" name="bqtakepulse-bgTakepulse" setup> <script lang="ts" name="bqtakepulse-bgTakepulse" setup>
import {ref, reactive, onMounted} from 'vue'; import {ref, reactive, h, onMounted} from 'vue';
import {BasicTable, TableAction} from '/@/components/Table'; import {BasicTable, TableAction} from '/@/components/Table';
import type { BasicColumn } from '/@/components/Table'; import type { BasicColumn } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage' import { useListPage } from '/@/hooks/system/useListPage'
@@ -151,6 +151,7 @@
import SzSelectDept from '/@/components/Form/src/jeecg/components/SzSelectDept.vue'; import SzSelectDept from '/@/components/Form/src/jeecg/components/SzSelectDept.vue';
import JInput from '/@/components/Form/src/jeecg/components/JInput.vue'; import JInput from '/@/components/Form/src/jeecg/components/JInput.vue';
import DeptRoleUserSelectDropDown from '/@/components/semri/userComponent/DeptRoleUserSelectDropDown.vue'; import DeptRoleUserSelectDropDown from '/@/components/semri/userComponent/DeptRoleUserSelectDropDown.vue';
import { Tooltip } from 'ant-design-vue';
import { PARTY_COMMITTEE_DEPT_ID, CHARGE_LEADER_ROLE_ID } from '/@/constant/supervision'; import { PARTY_COMMITTEE_DEPT_ID, CHARGE_LEADER_ROLE_ID } from '/@/constant/supervision';
import Icon from '/@/components/Icon/index'; import Icon from '/@/components/Icon/index';
import { startProcessSchedules } from '/@/api/common/api'; import { startProcessSchedules } from '/@/api/common/api';
@@ -166,6 +167,24 @@
const FORM_URL = 'bg/bqtakepulse/components/BgTakepulseBPMForm'; const FORM_URL = 'bg/bqtakepulse/components/BgTakepulseBPMForm';
const FLOW_NAME = '我为四所把把脉'; const FLOW_NAME = '我为四所把把脉';
function expandIcon({ expanded, onExpand, record }: { expanded: boolean; onExpand: Function; record: Recordable }) {
const iconCls = expanded
? 'ant-table-row-expand-icon ant-table-row-expand-icon-expanded'
: 'ant-table-row-expand-icon ant-table-row-expand-icon-collapsed';
return h(
Tooltip,
{ title: '查看当前事项办理情况' },
{
default: () =>
h('button', {
type: 'button',
class: iconCls,
onClick: (e: Event) => onExpand(record, e),
}),
},
);
}
const formRef = ref(); const formRef = ref();
const queryParam = reactive<any>({}); const queryParam = reactive<any>({});
const selectedResponDept = ref([]); const selectedResponDept = ref([]);