smartpark_durable_front/src/views/firstOrder/components/approvalProcessDialog.vue

<template>
  <div>
    <el-dialog :close-on-click-modal="false" :title="inDialogTiltle" :visible.sync="inDialogVisible"
      :append-to-body="true" width="20%" @close="handleCloseDetail">
      <el-steps class="teps-con" direction="vertical" :active="1">
        <el-step v-for="(item, index) in processedApproveList" 
          :key="item.id"
          :title="item.userName"
          :description="`状态:${item.statusText}\n${item.formattedTime}`"
          ></el-step>
      </el-steps>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    approveList: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    showDialog(val) {
      this.inDialogVisible = val;
    },
  },
  computed: {
    // 处理审批列表数据
    processedApproveList() {
      return this.approveList.map(item => {
        // 1. 处理时间格式化
        let formattedTime = ''
        if (item.optTime) {
          const date = new Date(item.optTime);
          const pad = (num) => num.toString().padStart(2, '0');
          formattedTime = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
        }
        let statusText = '待审核'
        if (item.status !== '' && item.status !== undefined) {
          const statusMap = {
            0: '审批中',
            1: '已完成',
            2: '已驳回',
          };
          statusText = statusMap[item.status] || '';
        }
        return {
          ...item,
          formattedTime,
          statusText,
        };
      });
    },
    activeStep() {
      return this.processedApproveList.findIndex((item, index, array) => {
        return index === array.length - 1 && item.statusText !== '审批中';
      }) || 0;
    }
  },
  methods: {
    handleCloseDetail() {
      this.inDialogVisible = false;
      this.$emit("closeDialog");
    }
  },
  data() {
    return {
      inDialogVisible: false,
      inDialogTiltle: "审批流程"
    };
  },
  mounted() {
    this.inDialogVisible = this.showDialog;
  }
};
</script>

<style lang="scss" scoped>
.form-title {
  font-size: 16px;
  font-weight: 600;
  padding: 18px 0;
}

.teps-con {
  margin: 0 auto 0
}

// :deep(.el-dialog__body) {
//   height: 300px;
// }
</style>