ReleaseModal.vue
4.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<template>
<a-modal
:visible="visible"
title="已通过版本记录"
width="80%"
:footer="null"
@cancel="handleCancel"
@update:visible="(val) => emit('update:visible', val)"
>
<div v-if="loading" class="loading-container">
<a-spin />
</div>
<div v-else>
<div v-if="tableData.length === 0" class="empty-data">
<a-empty description="没有找到已通过版本的记录" />
</div>
<BasicTable
v-else
:dataSource="tableData"
:columns="columns"
:pagination="false"
bordered
showIndexColumn
:canResize="false"
:loading="loading"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'ant-design:eye-outlined',
tooltip: '查看',
onClick: handleView.bind(null, record),
}
]"
/>
</template>
</template>
</BasicTable>
</div>
</a-modal>
<!-- 查看详情抽屉 -->
<QuestDrawer @register="registerDrawer" />
</template>
<script lang="ts" setup name="ReleaseModal">
import { ref, watch } from 'vue';
import { getQuestReleaseData } from '/@/api/project/quest';
import { BasicTable, TableAction } from '/@/components/Table';
import { useMessage } from '/@/hooks/web/useMessage';
import { useDrawer } from '/@/components/Drawer';
import QuestDrawer from './QuestDrawer.vue';
const props = defineProps({
visible: {
type: Boolean,
default: false,
},
recordId: {
type: Number,
default: undefined,
},
});
const emit = defineEmits(['update:visible', 'cancel']);
const { createMessage } = useMessage();
const loading = ref(false);
const tableData = ref<any[]>([]);
// 注册抽屉
const [registerDrawer, { openDrawer }] = useDrawer();
// 表格列定义
const columns = [
{
title: '标题',
dataIndex: 'title',
key: 'title',
width: 400,
customHeaderCell: () => ({ style: { color: 'red', fontSize: '16px' } }),
},
{
title: '内容',
dataIndex: 'contentText',
key: 'contentText',
width: 500,
customRender: ({ text }) => {
if (!text) return '';
const div = document.createElement('div');
div.innerHTML = text;
const plainText = div.textContent || div.innerText || '';
return plainText.length > 30 ? plainText.substring(0, 30) + '...' : plainText;
},
customHeaderCell: () => ({ style: { color: 'red', fontSize: '16px' } }),
},
{
title: '操作',
dataIndex: 'action',
width: 100,
key: 'action',
fixed: 'right',
},
];
// 监听visible变化，加载数据
watch(() => props.visible, async (newVisible) => {
if (newVisible && props.recordId) {
await loadReleaseData(props.recordId);
}
});
// 加载已通过版本数据
async function loadReleaseData(id: number) {
loading.value = true;
tableData.value = [];
try {
const response = await getQuestReleaseData(id);
// 简化数据处理逻辑
if (Array.isArray(response)) {
// 如果返回的是数组，直接使用
tableData.value = response;
} else if (response && Array.isArray(response.items)) {
// 如果返回的是包含items属性的对象
tableData.value = response.items;
} else if (response && Array.isArray(response.records)) {
// 如果返回的是包含records属性的对象
tableData.value = response.records;
} else if (response && typeof response === 'object' && !Array.isArray(response)) {
// 如果返回的是单个对象
tableData.value = [response];
}
// 显示空数据提示
if (tableData.value.length === 0) {
createMessage.info('没有找到已通过版本的记录');
}
} catch (error) {
createMessage.error('获取已通过版本数据失败: ' + error.message);
} finally {
loading.value = false;
}
}
// 取消
function handleCancel() {
emit('update:visible', false);
emit('cancel');
}
// 查看详情
function handleView(record) {
openDrawer(true, {
record,
isUpdate: true,
isView: true, // 标记为查看模式
});
}
</script>
<style lang="less" scoped>
.loading-container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.empty-data {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: #fafafa;
border-radius: 4px;
}
</style>
<script lang="ts">
export default {
name: 'ReleaseModal',
};
</script>