opms_frontend/src/views/contract/components/DetailsRecords.vue

<!--
 * @Author: liuzl 461480418@qq.com
 * @Date: 2023-01-09 17:42:13
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-01-09 17:55:42
 * @Description: file content
 * @FilePath: \订单全流程管理系统\src\views\contract\components\DetailsRecords.vue
-->
<template>
  <ul class="records">
    <li v-for="(value, key) in dynamicsList" :key="key">
      <div class="date">
        {{ key }}
        <h2>{{ key.split('-')[2] }}</h2>
        <h3>{{ key.split('-').splice(0, 2).join('.') }}</h3>
      </div>
      <ul class="content">
        <li v-for="(item, index) in dynamicsList[key]" :key="index">
          <!-- <el-avatar class="user-avatar"
                           :src="avatar" /> -->
          <vab-icon class="user-avatar" icon="account-circle-fill" />
          <div class="text">
            <p class="action">{{ item.opnPeople }} {{ item.opnType }}</p>
            <p>{{ item.opnDate }}</p>
            <p v-if="item.opnContent.custName">
              客户名称：
              <span>{{ item.opnContent.custName }}</span>
            </p>
            <template v-else-if="item.opnContent.cuctName">
              <p>
                联系人名称：
                <span>{{ item.opnContent.cuctName }}</span>
              </p>
              <p>职务：{{ item.opnContent.postion }}</p>
              <p>手机：{{ item.opnContent.telephone }}</p>
            </template>
          </div>
        </li>
      </ul>
    </li>
  </ul>
</template>

<script>
  export default {
    name: 'Records',
    props: {
      dynamicsList: {
        // eslint-disable-next-line vue/require-prop-type-constructor
        type: Array | Object,
        default: () => [],
      },
    },
    data() {
      return {}
    },

    mounted() {
      console.log(this.dynamicsList)
    },

    methods: {},
  }
</script>

<style lang="scss" scoped>
  .records {
    margin: 0;
    padding: 10px 20px;
    list-style: none;
    height: 100%;
    overflow-y: auto;

    > li {
      display: flex;

      & + li {
        margin-top: 10px;
      }
    }

    .date {
      width: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;

      h2,
      h3 {
        margin: 0;
      }

      h2 {
        font-size: 26px;
        line-height: 32px;
      }
    }

    .content {
      flex: 1;
      list-style: none;

      li {
        display: flex;

        & + li {
          margin-top: 10px;
        }
      }

      .user-avatar {
        font-size: 40px;
      }

      .text {
        flex: 1;
        padding-left: 20px;

        p {
          font-weight: 500;
          margin: 0;
          line-height: 20px;

          span {
            color: #1d66dc;
          }
        }

        p:nth-child(2) {
          margin-bottom: 10px;
        }

        .action {
          font-weight: bold;
          color: #333;
        }
      }
    }
  }
</style>