提交 山西正德新型建材有限公司 提交配置文件

yyb

115 分钟以前 e5e79769db31b3f64eb7df5eec9543a5241b31f9

 src/views/officeProcessAutomation/ApproveManage/approve-shared/components/ApprovalInstanceDetailDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,123 @@
<!-- ä¸Žå®¡æ‰¹åˆ—表详情弹窗一致 -->
<template>
  <el-dialog
    v-model="visible"
    :title="title"
    width="920px"
    append-to-body
    destroy-on-close
    class="approve-detail-dialog"
    @closed="emit('closed')"
  >
    <div class="approve-detail-body">
      <ApproveDetailPanel :row="row" />
      <div class="detail-block">
        <div class="detail-block-title">
          å®¡æ‰¹æµç¨‹ï¼ˆ{{ row?.tasks?.length || row?.flowNodes?.length || 0 }} é¡¹ï¼‰
        </div>
        <InstanceFlowDisplay :tasks="row?.tasks" :nodes="row?.flowNodes" />
      </div>
      <div class="detail-block">
        <div class="detail-block-title">审批记录</div>
        <el-timeline v-if="row?.approvalRecords?.length" class="approve-record-timeline">
          <el-timeline-item
            v-for="(rec, i) in row.approvalRecords"
            :key="rec.id ?? i"
            :type="rec.result === 'approved' ? 'success' : rec.result === 'rejected' ? 'danger' : 'primary'"
            :timestamp="formatRecordTime(rec.time)"
            placement="top"
          >
            <div class="record-item">
              <span class="record-operator">{{ rec.operatorName || "—" }}</span>
              <el-tag
                size="small"
                :type="rec.result === 'approved' ? 'success' : rec.result === 'rejected' ? 'danger' : 'info'"
                effect="plain"
              >
                {{ approvalActionLabel(rec.result) }}
              </el-tag>
              <p class="record-opinion">{{ rec.opinion || "无意见" }}</p>
            </div>
          </el-timeline-item>
        </el-timeline>
        <el-empty v-else description="暂无审批记录" :image-size="48" />
      </div>
    </div>
    <template #footer>
      <el-button v-if="canEditRow(row)" @click="emit('edit', row)">ä¿® æ”¹</el-button>
      <el-button @click="visible = false">关 é—­</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from "vue";
import { canEditBusinessInstanceRow } from "../../approve-list/approveListConstants.js";
import { formatDisplayTime } from "../../approve-template/approveTemplateConstants.js";
import ApproveDetailPanel from "../../approve-list/components/ApproveDetailPanel.vue";
import InstanceFlowDisplay from "../../approve-list/components/InstanceFlowDisplay.vue";

function canEditRow(row) {
  return canEditBusinessInstanceRow(row);
}

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  row: { type: Object, default: () => ({}) },
  title: { type: String, default: "审批详情" },
});

const emit = defineEmits(["update:modelValue", "edit", "closed"]);

const visible = computed({
  get: () => props.modelValue,
  set: (v) => emit("update:modelValue", v),
});

function approvalActionLabel(result) {
  if (result === "approved") return "通过";
  if (result === "rejected") return "驳回";
  return "待处理";
}

function formatRecordTime(time) {
  return formatDisplayTime(time) || "—";
}
</script>

<style scoped>
.approve-detail-dialog :deep(.el-dialog__body) {
  padding-top: 16px;
  max-height: 70vh;
  overflow-y: auto;
}
.approve-detail-body .detail-block {
  margin-top: 20px;
}
.detail-block-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin: 0 0 12px;
  padding-left: 10px;
  border-left: 3px solid var(--el-color-primary);
  line-height: 1.4;
}
.approve-record-timeline {
  padding-left: 4px;
}
.record-item {
  padding: 4px 0 2px;
}
.record-operator {
  font-weight: 600;
  margin-right: 8px;
  color: var(--el-text-color-primary);
}
.record-opinion {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--el-text-color-regular);
  line-height: 1.5;
}
</style>