新增选项组件，修改组合式函数fetchData

riku

2023-05-19 c9571c465c756deedbfe424b5eab2d7591119f77

 src/components/ProblemCard.vue

@@ -1,20 +1,24 @@
<template>
  <el-card class="layout" shadow="hover">
    <!-- <el-steps :active="active" finish-status="success" style="">
      <el-step title="Step 1" style=""/>
      <el-step title="Step 2" />
      <el-step title="Step 3" />
    </el-steps> -->
    <el-descriptions :column="3" size="small" >
    <el-steps :active="active" finish-status="success" style="" simple>
      <el-step v-for="(s, i) in getSteps" :key="i" :title="s" />
    </el-steps>

    <el-descriptions :column="3" size="small">
      <template #title>
        <span class="d-index">{{ index + 1 }}</span>
        <span class="d-title">{{ title }}</span>
      </template>
      <template #extra>
        <!-- <span class="d-extra">{{ status }}</span> -->
        <el-tag style="font-size: 16px;line-height: 16px;padding: 14px;" :type="status.type" effect="plain" size="large" round>{{
          status.name
        }}</el-tag>
        <el-tag
          style="font-size: 16px; line-height: 16px; padding: 14px"
          :type="status.type"
          effect="plain"
          size="large"
          round
          >{{ status.name }}</el-tag
        >
      </template>
      <el-descriptions-item
        label-class-name="descriptions-label-1"
@@ -86,8 +90,8 @@
      type: Object,
      default: () => {
        return {
          name: "",
          type: "",
          name: '',
          type: '',
        };
      },
    },
@@ -95,8 +99,8 @@
      type: Array,
      default: () => [
        {
          name: "",
          value: "",
          name: '',
          value: '',
        },
      ],
    },
@@ -104,7 +108,7 @@
      type: Array,
      default: () => [
        {
          title: "",
          title: '',
          path: [],
        },
      ],
@@ -113,23 +117,52 @@
      type: Array,
      default: () => [
        {
          name: "primary",
          color: "primary",
          name: 'primary',
          color: 'primary',
        },
      ],
    },
    // active: {
    //   type: Number,
    //   default: 3,
    // },
  },
  emits: ['buttonClick'],
  data() {
    return {
      active: 1
    }
      active: 3,
      steps: [
        {
          bef: '问题待审核',
          aft: '问题已审核',
        },
        {
          bef: '问题待整改',
          aft: '问题已整改',
        },
        {
          bef: '整改待审核',
          aft: '整改已审核',
        },
      ],
    };
  },
  computed: {
    getSteps() {
      return this.steps.map((v, i) => {
        if (i >= this.active) {
          return v.bef;
        } else {
          return v.aft;
        }
      });
    },
  },
  methods: {
    onButtonClick(i) {
      this.$emit('buttonClick', this.index, i)
    }
  }
      this.$emit('buttonClick', this.index, i);
    },
  },
};
</script>
<style scoped>