style: 展开图标添加反馈信息tooltip,详情链接阻止行展开
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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([]);
|
||||||
|
|||||||
Reference in New Issue
Block a user