smartpark_durable_front/src/views/secondOrder/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 approvalList"
          :title="item.userName"
          :description="item.optTime || ''"
        ></el-step>
      </el-steps>
    </el-dialog>
  </div>
</template>
<script>
import { getDetails } from "@/api/secondOrder/outbound";
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    rowData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      inDialogVisible: false,
      inDialogTiltle: "审批流程",
      approvalList: [
        // {
        //   name: "张三",
        //   time: "2021-01-01 10:10:10",
        //   status: "通过",
        // },
        // {
        //   name: "张三1",
        //   time: "",
        //   status: "待审核",
        // },
        // {
        //   name: "张三3",
        //   time: "",
        //   status: "待审核",
        // },
      ],
    };
  },

  mounted() {
    this.inDialogVisible = this.showDialog;
    this.inInit();
  },
  methods: {
    inInit() {
      getDetails({ twoOutStorageId: this.rowData.id }).then((res) => {
        console.log(9999, res);
        this.approvalList = res.data.result.approveList;
      });
    },
    handleCloseDetail() {
      this.inDialogVisible = false;
      this.$emit("closeDialog");
    },
  },
};
</script>
<style lang="scss" scoped>
.form-title {
  font-size: 16px;
  font-weight: 600;
  padding: 18px 0;
}
.teps-con {
  margin: 0 auto 0;
  :deep(.el-step) {
    margin-bottom: 10px; 
    &:last-child {
      margin-bottom: 0;
    }
  }
}
// :deep(.el-dialog__body) {
//   height: 300px;
// }
</style>