project-manager-ui/src/views/bst/task/components/TaskProcessPanel.vue

<template>
  <div class="task-process-panel">
    <el-row :gutter="10">
      <el-col :span="24" v-for="member in memberList" :key="member.id">
        <div class="process-item">
          <div class="user-info">
            <avatar :size="24" :src="member.userAvatar" :name="member.userName" :id="member.userId" :char-index="-1" />
            <span class="user-name">{{ member.userName }}</span>
            <div class="status-tag">
              <dict-tag :value="member.status" :options="dict.type.task_member_status" size="mini" />
            </div>
          </div>
          <div class="process-info">
            <div class="info-item">
              <span class="label">接收时间</span>
              <span class="value">{{member.receiveTime | dv}}</span>
            </div>
            <div class="info-item">
              <span class="label">提交时间</span>
              <span class="value">{{member.submitTime | dv}}</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Avatar from '@/components/Avatar'

export default {
  name: 'TaskProcessPanel',
  dicts: ['task_member_status'],
  components: {
    Avatar
  },
  props: {
    detail: {
      type: Object,
      required: true
    }
  },
  computed: {
    memberList() {
      return this.detail.memberList || []
    },
  },
}
</script>

<style lang="scss" scoped>
.task-process-panel {
  .process-item {
    padding: 8px 12px;
    margin-bottom: 4px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    transition: all 0.3s;

    &:hover {
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
    }

    .user-info {
      display: flex;
      align-items: center;
      margin-bottom: 6px;

      .user-name {
        margin-left: 6px;
        font-size: 13px;
        font-weight: bold;
        flex: 1;
      }

      .status-tag {
        margin-left: auto;
      }
    }

    .process-info {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;

      .info-item {
        font-size: 12px;
        flex: 1;
        min-width: 120px;

        .label {
          color: #909399;
        }

        .value {
          color: #303133;
          margin-left: 4px;
        }
      }
    }
  }
}
</style>