mec-cloud_-intelligent-manufacturing_crm/ruoyi-ui/src/views/bussiness/components/TaskItem.vue

<template>
  <div
    :class="{
      'task-item-wrap': true,
      'done-bg': cardData.isDone,
      'now-border': cardData.isNow,
    }"
  >
    <div class="task-title">
      <span class="mr5">{{ number }}.</span>
      <span>{{ cardData.nodeInfo.name }}</span>
    </div>
    <div class="msg-list">
      <div class="msg-item">
        <i class="el-icon-user-solid icon"></i>
        <span>{{ cardData.nodeInfo.name || "暂无执行人" }}</span>
      </div>
      <div class="msg-item">
        <i class="el-icon-s-help icon"></i>
        <span>{{ cardData.nodeInfo.localName || "未知类型" }}</span>
      </div>
      <div class="msg-item">
        <i class="el-icon-success icon"></i>
        <!-- <span>admin</span> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TaskItem",
  props: ["itemData", "index"],
  components: {},
  data() {
    return {
      cardData: {},
      number: "",
    };
  },
  watch: {
    myItemData: {
      handler(nval) {
        this.cardData = nval;
      },
      deep: true,
      immediate: true,
    },
    myIndex: {
      handler(nval) {
        this.number = nval;
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    myItemData() {
      return this.itemData;
    },
    myIndex() {
      return this.index;
    },
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.task-item-wrap {
  padding: 12px 16px;
  flex: 1;
  box-sizing: border-box;
  background-color: #ebe6e6;
  // margin-right: 15px;
  .task-title {
    font-size: 14px;
    font-weight: 600;
    color: #454545;
  }
  .msg-list {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    color: #666;
    .msg-item {
      .icon {
        margin-right: 5px;
      }
    }
  }
}
.done-bg {
  background-color: #cdf1e5 !important;
}
.now-border {
  border: 5px solid rgb(167, 238, 171) !important;
}
</style>