aegon-dangerious 1.0.0

package/build-report/components/ReportSourceFileSummary.vue

@@ -0,0 +1,544 @@
+<template>
+  <ReportCollapsibleSection ref="sectionRef" v-model:open="panelOpen" title="编辑者"
+    @before-collapse="handleBeforeCollapse">
+    <template #actions>
+      <button v-if="canManageReportEditors" ref="addBtnRef" type="button" class="report-icon-btn" aria-label="添加"
+        @click.stop="toggleAddOpen">
+        <el-icon>
+          <Plus />
+        </el-icon>
+      </button>
+      <button v-if="canManageReportEditors" ref="shareBtnRef" type="button" class="report-icon-btn" aria-label="轉移發起人"
+        @click.stop="toggleShareOpen">
+        <el-icon>
+          <Share />
+        </el-icon>
+      </button>
+    </template>
+
+    <div class="report-editor-panel">
+      <ul class="report-editor-list">
+        <li v-for="editor in editors" :key="editor.id" class="report-editor-list__row">
+          <span class="report-editor-list__name" :title="`${editor.name}(${editor.employeeId})`">
+            {{ editor.name }}({{ editor.employeeId }})
+          </span>
+          <span class="report-editor-list__dept">{{ editor.department }}</span>
+          <span class="report-editor-list__role">{{ editorRoleLabel(editor.role) }}</span>
+          <span class="report-editor-list__action">
+            <button v-if="canManageReportEditors && editor.role !== 'initiator'" type="button" class="report-icon-btn"
+              :aria-label="`移除${editor.name}`" @click="requestRemoveEditor(editor, $event)">
+              <el-icon>
+                <Close />
+              </el-icon>
+            </button>
+          </span>
+        </li>
+      </ul>
+    </div>
+  </ReportCollapsibleSection>
+
+  <el-popover :visible="addOpen" :virtual-ref="shareToggleRef" placement="bottom-start" :width="popoverWidth"
+    :popper-options="popperOptions" :popper-style="addPopperStyle" popper-class="report-config-popover"
+    :transition="popoverInstant ? 'report-config-popover-instant' : 'report-config-popover-fade'"
+    :gpu-acceleration="false" :teleported="true">
+    <div class="report-source-transfer">
+      <h4 class="report-source-transfer__title">添加编辑者</h4>
+      <label class="report-source-transfer__field">
+        <span class="report-source-transfer__label">用戶</span>
+        <el-select v-model="addSelectedUser" class="report-source-transfer__select" filterable clearable
+          placeholder="請選擇用戶">
+          <el-option v-for="user in addEditorOptions" :key="user.id"
+            :label="`${user.name}(${user.employeeId})`" :value="user.id" />
+        </el-select>
+      </label>
+      <div class="report-source-transfer__actions">
+        <button type="button" class="report-source-transfer__btn" @click="addOpen = false">取消</button>
+        <button type="button" class="report-source-transfer__btn report-source-transfer__btn--primary"
+          @click="confirmAdd">
+          確認
+        </button>
+      </div>
+    </div>
+  </el-popover>
+
+  <el-popover :visible="shareOpen" :virtual-ref="shareToggleRef" placement="bottom-start" :width="popoverWidth"
+    :popper-options="popperOptions" :popper-style="sharePopperStyle" popper-class="report-config-popover"
+    :transition="popoverInstant ? 'report-config-popover-instant' : 'report-config-popover-fade'"
+    :gpu-acceleration="false" :teleported="true">
+    <div class="report-source-transfer">
+      <h4 class="report-source-transfer__title">轉移報告發起人權限</h4>
+      <label class="report-source-transfer__field">
+        <span class="report-source-transfer__label">用戶</span>
+        <el-select v-model="transferSelectedUser" class="report-source-transfer__select" filterable clearable
+          placeholder="請選擇用戶">
+          <el-option v-for="user in transferUserOptions" :key="user.id"
+            :label="`${user.name}(${user.employeeId})`" :value="user.id" />
+        </el-select>
+      </label>
+      <div class="report-source-transfer__actions">
+        <button type="button" class="report-source-transfer__btn" @click="shareOpen = false">取消</button>
+        <button type="button" class="report-source-transfer__btn report-source-transfer__btn--primary"
+          @click="confirmTransfer">
+          確認
+        </button>
+      </div>
+    </div>
+  </el-popover>
+
+  <ReportSectionConfirmPopover :visible="deleteConfirmOpen" :virtual-ref="deleteConfirmVirtualRef"
+    :boundary-el="sectionBoundaryEl" :trigger-btn="deleteConfirmTriggerBtn" :message="deleteConfirmMessage"
+    :instant="popoverInstant" @confirm="confirmRemoveEditor" @cancel="closeDeleteConfirm" />
+</template>
+
+<script setup lang="ts">
+import { Close, Plus, Share } from '@element-plus/icons-vue'
+import { ElIcon, ElMessage, ElOption, ElPopover, ElSelect } from 'element-plus'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import {
+  MOCK_UMS_EDITOR_USERS,
+  type ReportEditor,
+  type ReportEditorRole,
+} from '../useReportWorkflow'
+import { useReportWorkflow } from '../useReportWorkflow'
+import ReportCollapsibleSection from './ReportCollapsibleSection.vue'
+import ReportSectionConfirmPopover from './ReportSectionConfirmPopover.vue'
+
+const workflow = useReportWorkflow()
+const { reportEditors, canManageReportEditors } = workflow
+
+const editors = reportEditors
+const addOpen = ref(false)
+const shareOpen = ref(false)
+const popoverInstant = ref(false)
+const addSelectedUser = ref('')
+const transferSelectedUser = ref('')
+
+const addBtnRef = ref<HTMLElement | null>(null)
+const shareBtnRef = ref<HTMLElement | null>(null)
+const sectionRef = ref<InstanceType<typeof ReportCollapsibleSection> | null>(null)
+
+const shareToggleRef = computed(() => sectionRef.value?.toggleRef ?? null)
+
+const popoverWidthPx = ref(240)
+const arrowAlignKey = ref(0)
+const popoverWidth = computed(() => popoverWidthPx.value)
+
+const addEditorOptions = computed(() => {
+  const existingIds = new Set(editors.value.map((editor) => editor.employeeId))
+  return MOCK_UMS_EDITOR_USERS.filter((user) => !existingIds.has(user.employeeId))
+})
+
+const transferUserOptions = computed(() => {
+  const currentInitiator = editors.value.find((editor) => editor.role === 'initiator')
+  const candidates = new Map<string, (typeof MOCK_UMS_EDITOR_USERS)[number]>()
+
+  for (const user of MOCK_UMS_EDITOR_USERS) {
+    if (user.id !== currentInitiator?.id) {
+      candidates.set(user.id, user)
+    }
+  }
+  for (const editor of editors.value) {
+    if (editor.id !== currentInitiator?.id) {
+      candidates.set(editor.id, {
+        id: editor.id,
+        name: editor.name,
+        employeeId: editor.employeeId,
+        department: editor.department,
+      })
+    }
+  }
+
+  return Array.from(candidates.values())
+})
+
+const panelOpen = ref(true)
+
+const deleteConfirmOpen = ref(false)
+const deleteConfirmMessage = ref('')
+const deleteConfirmVirtualRef = ref<HTMLElement | null>(null)
+const deleteConfirmTriggerBtn = ref<HTMLElement | null>(null)
+const deleteTargetId = ref<string | null>(null)
+
+const sectionBoundaryEl = computed(() => sectionRef.value?.rootRef ?? null)
+
+function editorRoleLabel(role: ReportEditorRole) {
+  return role === 'initiator' ? '發起人' : '編輯者'
+}
+
+function requestRemoveEditor(editor: ReportEditor, event: MouseEvent) {
+  if (!canManageReportEditors.value) return
+  const btn = event.currentTarget as HTMLElement
+  deleteConfirmVirtualRef.value = btn.closest('.report-editor-list__row') as HTMLElement ?? btn
+  deleteConfirmTriggerBtn.value = btn
+  deleteTargetId.value = editor.id
+  deleteConfirmMessage.value = `確定刪除「${editor.name}(${editor.employeeId})」？`
+  deleteConfirmOpen.value = true
+}
+
+function confirmRemoveEditor() {
+  if (deleteTargetId.value) {
+    editors.value = editors.value.filter((item) => item.id !== deleteTargetId.value)
+  }
+  closeDeleteConfirm()
+}
+
+function closeDeleteConfirm() {
+  deleteConfirmOpen.value = false
+  deleteTargetId.value = null
+}
+
+function hasOpenOverlays() {
+  return addOpen.value || shareOpen.value || deleteConfirmOpen.value
+}
+
+function closeAllOverlays() {
+  addOpen.value = false
+  shareOpen.value = false
+  deleteConfirmOpen.value = false
+  deleteTargetId.value = null
+}
+
+function handleBeforeCollapse(done: (hadOpenOverlays: boolean) => void) {
+  const hadOpen = hasOpenOverlays()
+  if (hadOpen) {
+    popoverInstant.value = true
+    closeAllOverlays()
+    window.setTimeout(() => {
+      popoverInstant.value = false
+    }, 320)
+  }
+  done(hadOpen)
+}
+
+function getSectionContentWidth() {
+  const sectionEl = sectionRef.value?.rootRef
+  if (!sectionEl) return 240
+  const styles = getComputedStyle(sectionEl)
+  const paddingX = parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight)
+  return Math.round(sectionEl.clientWidth - paddingX)
+}
+
+function getArrowPopperStyle(triggerBtn: HTMLElement | null): Record<string, string> {
+  void arrowAlignKey.value
+  void panelOpen.value
+  const sectionEl = sectionRef.value?.rootRef
+  if (!triggerBtn || !sectionEl) return {}
+  const sectionRect = sectionEl.getBoundingClientRect()
+  const paddingLeft = parseFloat(getComputedStyle(sectionEl).paddingLeft)
+  const btnRect = triggerBtn.getBoundingClientRect()
+  const left = btnRect.left + btnRect.width / 2 - sectionRect.left - paddingLeft - 8
+  return { '--report-config-arrow-left': `${left}px` }
+}
+
+const addPopperStyle = computed(() => getArrowPopperStyle(addBtnRef.value))
+
+const sharePopperStyle = computed(() => getArrowPopperStyle(shareBtnRef.value))
+
+const popperOptions = computed(() => {
+  const boundary = sectionRef.value?.rootRef
+  return {
+    modifiers: [
+      {
+        name: 'preventOverflow',
+        options: {
+          boundary: boundary ?? 'viewport',
+          padding: 0,
+          altAxis: true,
+        },
+      },
+      {
+        name: 'flip',
+        enabled: false,
+      },
+    ],
+  }
+})
+
+function syncPopoverWidth() {
+  popoverWidthPx.value = getSectionContentWidth()
+  arrowAlignKey.value += 1
+}
+
+function toggleAddOpen() {
+  if (!canManageReportEditors.value) return
+  syncPopoverWidth()
+  shareOpen.value = false
+  addOpen.value = !addOpen.value
+  if (addOpen.value) {
+    void nextTick(() => {
+      arrowAlignKey.value += 1
+    })
+  }
+}
+
+function toggleShareOpen() {
+  if (!canManageReportEditors.value) return
+  syncPopoverWidth()
+  addOpen.value = false
+  shareOpen.value = !shareOpen.value
+  if (shareOpen.value) {
+    void nextTick(() => {
+      arrowAlignKey.value += 1
+    })
+  }
+}
+
+function confirmAdd() {
+  if (!canManageReportEditors.value) {
+    addOpen.value = false
+    return
+  }
+
+  const candidate = MOCK_UMS_EDITOR_USERS.find((user) => user.id === addSelectedUser.value)
+  if (!candidate) {
+    addOpen.value = false
+    return
+  }
+
+  const alreadyExists = editors.value.some((editor) => editor.employeeId === candidate.employeeId)
+  if (alreadyExists) {
+    ElMessage.warning('該用戶已是報告編輯者')
+    addOpen.value = false
+    addSelectedUser.value = ''
+    return
+  }
+
+  editors.value.push({
+    id: candidate.id,
+    name: candidate.name,
+    employeeId: candidate.employeeId,
+    department: candidate.department,
+    role: 'editor',
+  })
+  addSelectedUser.value = ''
+  addOpen.value = false
+  ElMessage.success('已添加編輯者')
+}
+
+function confirmTransfer() {
+  if (!canManageReportEditors.value) {
+    shareOpen.value = false
+    return
+  }
+
+  const targetId = transferSelectedUser.value
+  if (!targetId) {
+    shareOpen.value = false
+    return
+  }
+
+  const currentInitiator = editors.value.find((editor) => editor.role === 'initiator')
+  let target = editors.value.find((editor) => editor.id === targetId)
+
+  if (!target) {
+    const umsUser = MOCK_UMS_EDITOR_USERS.find((user) => user.id === targetId)
+    if (!umsUser) {
+      shareOpen.value = false
+      return
+    }
+    target = {
+      id: umsUser.id,
+      name: umsUser.name,
+      employeeId: umsUser.employeeId,
+      department: umsUser.department,
+      role: 'editor',
+    }
+    editors.value.push(target)
+  }
+
+  if (currentInitiator) {
+    currentInitiator.role = 'editor'
+  }
+  target.role = 'initiator'
+
+  transferSelectedUser.value = ''
+  shareOpen.value = false
+  ElMessage.success('已轉移報告發起人權限')
+}
+
+watch(panelOpen, (open) => {
+  if (!open) closeAllOverlays()
+})
+
+let sectionResizeObserver: ResizeObserver | null = null
+
+onMounted(() => {
+  void nextTick(() => {
+    syncPopoverWidth()
+    const sectionEl = sectionRef.value?.rootRef
+    if (sectionEl) {
+      sectionResizeObserver = new ResizeObserver(() => syncPopoverWidth())
+      sectionResizeObserver.observe(sectionEl)
+    }
+  })
+  window.addEventListener('resize', syncPopoverWidth)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', syncPopoverWidth)
+  sectionResizeObserver?.disconnect()
+})
+</script>
+
+<style scoped>
+.report-editor-panel {
+  box-sizing: border-box;
+}
+
+.report-editor-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.report-editor-list__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto 24px;
+  align-items: center;
+  gap: 10px;
+  height: 36px;
+  padding: 0 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #303133;
+  background: #fff;
+  box-sizing: border-box;
+  transition: background-color 0.2s ease;
+}
+
+.report-editor-list__row:hover {
+  background-color: #f5f7fa;
+}
+
+.report-editor-list__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.report-editor-list__dept,
+.report-editor-list__role {
+  white-space: nowrap;
+  color: #303133;
+}
+
+.report-editor-list__action {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.report-source-transfer__title {
+  margin: 0 0 12px;
+  font-size: 14px;
+  font-weight: 700;
+  color: #303133;
+}
+
+.report-source-transfer__field {
+  display: grid;
+  gap: 6px;
+}
+
+.report-source-transfer__label {
+  font-size: 13px;
+  color: #909399;
+}
+
+.report-source-transfer__select {
+  width: 100%;
+}
+
+.report-source-transfer__select :deep(.el-select__wrapper) {
+  min-height: 32px;
+}
+
+.report-source-transfer__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.report-source-transfer__btn {
+  min-width: 72px;
+  padding: 6px 10px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #fff;
+  font-size: 12px;
+  color: #606266;
+  cursor: pointer;
+}
+
+.report-source-transfer__btn--primary {
+  border-color: #c53355;
+  background: #c53355;
+  color: #fff;
+}
+
+.report-source-transfer__btn--primary:hover {
+  background: #fff;
+  color: #c53355;
+}
+</style>
+
+<style>
+.report-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: #4e5969;
+  cursor: pointer;
+  border-radius: 4px;
+  vertical-align: middle;
+}
+
+.report-icon-btn:hover {
+  color: #c53355;
+  background: #fff5f6;
+}
+
+.report-config-popover.el-popover.el-popper {
+  max-width: 100%;
+  padding: 12px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.report-config-popover.el-popper[data-popper-placement^='bottom'] .el-popper__arrow {
+  left: var(--report-config-arrow-left) !important;
+  right: auto !important;
+  top: -6px !important;
+  transform: translateX(-50%) !important;
+}
+
+.report-config-popover.el-popper[data-popper-placement^='bottom'] .el-popper__arrow::before {
+  bottom: -1px;
+}
+
+.report-config-popover-fade-enter-active,
+.report-config-popover-fade-leave-active {
+  transition: opacity 0.12s ease;
+}
+
+.report-config-popover-fade-enter-from,
+.report-config-popover-fade-leave-to {
+  opacity: 0;
+}
+
+.report-config-popover-instant-enter-active,
+.report-config-popover-instant-leave-active {
+  transition: none !important;
+}
+
+.report-config-popover-instant-enter-from,
+.report-config-popover-instant-leave-to {
+  opacity: 0;
+}
+</style>