|
|
@@ -0,0 +1,401 @@
|
|
|
+<!-- OA 审批详情 · 实例讨论评论（≠ 审批意见） -->
|
|
|
+<template>
|
|
|
+ <section class="oa-comment-panel">
|
|
|
+ <h3 class="oa-comment-panel__title">
|
|
|
+ <el-icon class="oa-comment-panel__title-icon"><ChatDotRound /></el-icon>
|
|
|
+ 评论
|
|
|
+ </h3>
|
|
|
+
|
|
|
+ <div v-if="!comments.length" class="oa-comment-panel__empty">暂无评论</div>
|
|
|
+ <ul v-else class="oa-comment-panel__list">
|
|
|
+ <li v-for="c in comments" :key="c.id" class="oa-comment-panel__item">
|
|
|
+ <template v-if="c.status === 'revoked'">
|
|
|
+ <span class="oa-comment-panel__revoked">
|
|
|
+ {{ c.createByName || c.createBy }} 撤回了一条评论
|
|
|
+ <span v-if="c.revokedTime" class="oa-comment-panel__time">{{ c.revokedTime }}</span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="oa-comment-panel__meta">
|
|
|
+ <strong>{{ c.createByName || c.createBy }}</strong>
|
|
|
+ <span class="oa-comment-panel__time">{{ c.createTime }}</span>
|
|
|
+ <el-button
|
|
|
+ v-if="c.canRevoke"
|
|
|
+ link
|
|
|
+ type="danger"
|
|
|
+ :loading="revokingId === c.id"
|
|
|
+ @click="onRevoke(c)"
|
|
|
+ >
|
|
|
+ <el-icon><RefreshLeft /></el-icon>
|
|
|
+ 撤回
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="oa-comment-panel__content">{{ c.content }}</div>
|
|
|
+ <div v-if="c.attachmentRefs?.length" class="oa-comment-panel__refs">
|
|
|
+ <el-tag
|
|
|
+ v-for="(f, idx) in c.attachmentRefs"
|
|
|
+ :key="`${c.id}-${idx}-${f.url}`"
|
|
|
+ class="oa-comment-panel__ref"
|
|
|
+ size="small"
|
|
|
+ effect="plain"
|
|
|
+ @click="openUrl(f.url)"
|
|
|
+ >
|
|
|
+ {{ f.fileName || f.url }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <div v-if="instanceStatus === 'running'" class="oa-comment-panel__composer">
|
|
|
+ <el-input
|
|
|
+ v-model="draft"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ maxlength="1024"
|
|
|
+ show-word-limit
|
|
|
+ placeholder="填写评论"
|
|
|
+ />
|
|
|
+ <div v-if="picked.length" class="oa-comment-panel__picked">
|
|
|
+ <el-tag
|
|
|
+ v-for="(f, idx) in picked"
|
|
|
+ :key="`${f.url}-${idx}`"
|
|
|
+ closable
|
|
|
+ size="small"
|
|
|
+ effect="plain"
|
|
|
+ @close="picked.splice(idx, 1)"
|
|
|
+ >
|
|
|
+ {{ f.fileName || f.url }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ <div class="oa-comment-panel__actions">
|
|
|
+ <el-button class="btn-ghost" @click="openAttach">
|
|
|
+ <el-icon><Paperclip /></el-icon>
|
|
|
+ 引用附件
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" class="btn-main" :loading="sending" @click="onSend">
|
|
|
+ <el-icon><Promotion /></el-icon>
|
|
|
+ 发送
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ v-model="attachVisible"
|
|
|
+ title="引用表单附件"
|
|
|
+ width="560px"
|
|
|
+ class="dialog-form-layout"
|
|
|
+ align-center
|
|
|
+ append-to-body
|
|
|
+ modal-class="protocol-dialog-mask"
|
|
|
+ destroy-on-close
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <div v-loading="attachLoading" class="oa-comment-attach">
|
|
|
+ <div v-if="!attachLoading && !attachGroups.length" class="oa-comment-attach__empty">
|
|
|
+ 暂无可引用附件
|
|
|
+ </div>
|
|
|
+ <el-checkbox-group v-else v-model="selectedUrls" class="oa-comment-attach__groups">
|
|
|
+ <div v-for="g in attachGroups" :key="g.fieldKey" class="oa-comment-attach__group">
|
|
|
+ <div class="oa-comment-attach__label">{{ g.fieldLabel || g.fieldKey }}</div>
|
|
|
+ <div class="oa-comment-attach__files">
|
|
|
+ <el-checkbox
|
|
|
+ v-for="f in g.files"
|
|
|
+ :key="f.url"
|
|
|
+ :value="f.url"
|
|
|
+ class="oa-comment-attach__file"
|
|
|
+ >
|
|
|
+ {{ f.fileName || f.url }}
|
|
|
+ </el-checkbox>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <el-button class="btn-ghost" @click="attachVisible = false">
|
|
|
+ <el-icon><Close /></el-icon>
|
|
|
+ 取消
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ class="btn-main"
|
|
|
+ :disabled="!attachGroups.length"
|
|
|
+ @click="confirmAttach"
|
|
|
+ >
|
|
|
+ <el-icon><Check /></el-icon>
|
|
|
+ 确定
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </section>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+ import {
|
|
|
+ ChatDotRound,
|
|
|
+ Check,
|
|
|
+ Close,
|
|
|
+ Paperclip,
|
|
|
+ Promotion,
|
|
|
+ RefreshLeft
|
|
|
+ } from '@element-plus/icons-vue'
|
|
|
+ import {
|
|
|
+ fetchCreateOaComment,
|
|
|
+ fetchOaFormAttachments,
|
|
|
+ fetchRevokeOaComment,
|
|
|
+ type OaCommentAttachmentRef,
|
|
|
+ type OaInstanceComment
|
|
|
+ } from '@/api/oaApproval'
|
|
|
+ import { attachmentFullUrl } from '@/composables/useAttachmentActions'
|
|
|
+
|
|
|
+ defineOptions({ name: 'OaCommentPanel' })
|
|
|
+
|
|
|
+ const props = withDefaults(
|
|
|
+ defineProps<{
|
|
|
+ instanceId: string
|
|
|
+ instanceStatus: string
|
|
|
+ comments?: OaInstanceComment[]
|
|
|
+ }>(),
|
|
|
+ {
|
|
|
+ comments: () => []
|
|
|
+ }
|
|
|
+ )
|
|
|
+
|
|
|
+ const emit = defineEmits<{ refresh: [] }>()
|
|
|
+
|
|
|
+ const draft = ref('')
|
|
|
+ const picked = ref<OaCommentAttachmentRef[]>([])
|
|
|
+ const sending = ref(false)
|
|
|
+ const revokingId = ref('')
|
|
|
+
|
|
|
+ const attachVisible = ref(false)
|
|
|
+ const attachLoading = ref(false)
|
|
|
+ const attachGroups = ref<
|
|
|
+ Array<{ fieldKey: string; fieldLabel: string; files: OaCommentAttachmentRef[] }>
|
|
|
+ >([])
|
|
|
+ const selectedUrls = ref<string[]>([])
|
|
|
+
|
|
|
+ function openUrl(url: string) {
|
|
|
+ const full = attachmentFullUrl(url) || url
|
|
|
+ if (full) window.open(full, '_blank')
|
|
|
+ }
|
|
|
+
|
|
|
+ async function openAttach() {
|
|
|
+ attachVisible.value = true
|
|
|
+ attachLoading.value = true
|
|
|
+ selectedUrls.value = picked.value.map((f) => f.url)
|
|
|
+ try {
|
|
|
+ const res = await fetchOaFormAttachments(props.instanceId)
|
|
|
+ const items = res?.items || []
|
|
|
+ attachGroups.value = items
|
|
|
+ if (!items.length) {
|
|
|
+ ElMessage.info('暂无可引用附件')
|
|
|
+ }
|
|
|
+ } catch (e: any) {
|
|
|
+ attachGroups.value = []
|
|
|
+ ElMessage.error(e?.message || '加载附件失败')
|
|
|
+ } finally {
|
|
|
+ attachLoading.value = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function confirmAttach() {
|
|
|
+ const map = new Map<string, OaCommentAttachmentRef>()
|
|
|
+ for (const g of attachGroups.value) {
|
|
|
+ for (const f of g.files || []) {
|
|
|
+ if (f?.url) map.set(f.url, f)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const next: OaCommentAttachmentRef[] = []
|
|
|
+ for (const url of selectedUrls.value) {
|
|
|
+ const found = map.get(url) || picked.value.find((p) => p.url === url)
|
|
|
+ if (found) next.push({ ...found })
|
|
|
+ }
|
|
|
+ picked.value = next
|
|
|
+ attachVisible.value = false
|
|
|
+ }
|
|
|
+
|
|
|
+ async function onSend() {
|
|
|
+ const content = draft.value.trim()
|
|
|
+ if (!content) {
|
|
|
+ ElMessage.warning('请填写评论')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ sending.value = true
|
|
|
+ try {
|
|
|
+ await fetchCreateOaComment(props.instanceId, {
|
|
|
+ content,
|
|
|
+ attachmentRefs: picked.value.length ? [...picked.value] : undefined
|
|
|
+ })
|
|
|
+ draft.value = ''
|
|
|
+ picked.value = []
|
|
|
+ ElMessage.success('已发送')
|
|
|
+ emit('refresh')
|
|
|
+ } catch (e: any) {
|
|
|
+ ElMessage.error(e?.message || '发送失败')
|
|
|
+ } finally {
|
|
|
+ sending.value = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ async function onRevoke(c: OaInstanceComment) {
|
|
|
+ try {
|
|
|
+ await ElMessageBox.confirm('确定撤回该评论吗？', '提示', { type: 'warning' })
|
|
|
+ } catch {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ revokingId.value = c.id
|
|
|
+ try {
|
|
|
+ await fetchRevokeOaComment(props.instanceId, c.id)
|
|
|
+ ElMessage.success('已撤回')
|
|
|
+ emit('refresh')
|
|
|
+ } catch (e: any) {
|
|
|
+ ElMessage.error(e?.message || '撤回失败')
|
|
|
+ } finally {
|
|
|
+ revokingId.value = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .oa-comment-panel {
|
|
|
+ max-width: 960px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-comment-panel__title {
|
|
|
+ display: flex;
|
|
|
+ gap: 6px;
|
|
|
+ align-items: center;
|
|
|
+ margin: 16px 0 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--mint-text, #0f172a);
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-comment-panel__title-icon {
|
|
|
+ color: var(--primary, #10b981);
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-comment-panel__empty {
|
|
|
+ padding: 8px 0 12px;
|
|
|
+ color: var(--mint-text-muted, #94a3b8);
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-comment-panel__list {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ list-style: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-comment-panel__item {
|
|
|
+ padding: 10px 0;
|
|
|
+ border-bottom: 1px solid var(--mint-border, #e2e8f0);
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-comment-panel__revoked {
|
|
|
+ color: var(--mint-text-muted, #94a3b8);
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-comment-panel__meta {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 6px;
|
|
|
+
|
|
|
+ strong {
|
|
|
+ color: var(--mint-text-strong, #0f172a);
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-comment-panel__time {
|
|
|
+ margin-left: 4px;
|
|
|
+ color: var(--mint-text-muted, #94a3b8);
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-comment-panel__content {
|
|
|
+ color: var(--mint-text, #334155);
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 1.55;
|
|
|
+ white-space: pre-wrap;
|
|
|
+ word-break: break-word;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-comment-panel__refs,
|
|
|
+ .oa-comment-panel__picked {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 6px;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-comment-panel__ref {
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: var(--primary-dark, #059669);
|
|
|
+ border-color: #a7f3d0;
|
|
|
+ background: var(--primary-bg, #ecfdf5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-comment-panel__composer {
|
|
|
+ margin-top: 12px;
|
|
|
+ padding-top: 12px;
|
|
|
+ border-top: 1px solid var(--mint-border, #e2e8f0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-comment-panel__actions {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-comment-attach {
|
|
|
+ min-height: 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-comment-attach__empty {
|
|
|
+ padding: 16px 0;
|
|
|
+ color: var(--mint-text-muted, #94a3b8);
|
|
|
+ font-size: 13px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-comment-attach__groups {
|
|
|
+ display: grid;
|
|
|
+ gap: 14px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-comment-attach__label {
|
|
|
+ margin-bottom: 6px;
|
|
|
+ color: var(--mint-text-strong, #0f172a);
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-comment-attach__files {
|
|
|
+ display: grid;
|
|
|
+ gap: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-comment-attach__file {
|
|
|
+ margin-right: 0;
|
|
|
+ height: auto;
|
|
|
+ white-space: normal;
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+</style>
|
