opms_frontend/src/views/proj/business/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">
        <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 !== '-1' ? item.opnPeople : '' }} {{ opnTypeFormat(item.opnType) }}</p>
            <p>{{ item.opnDate }}</p>
            <div v-if="item.opnContent">
              <p v-if="item.opnType === '30'">
                销售工程师：
                <span>{{ item.opnContent.saleName }}</span>
              </p>
              <p v-if="item.opnType === '40' || item.opnType === '50'">
                项目类别：
                <span>
                  {{
                    selectDictLabel(nboTypeOptions, item.opnContent.origNboType) +
                    ' => ' +
                    selectDictLabel(nboTypeOptions, item.opnContent.nboType)
                  }}
                </span>
              </p>
              <p v-if="['41', '51', '61', '81'].includes(item.opnType)">
                审批结果：
                <span>{{ selectDictLabel(approStatusOptions, item.opnContent.approStatus) }}</span>
              </p>
              <p v-if="item.opnContent.custName">
                客户名称：
                <span>{{ item.opnContent.custName }}</span>
              </p>
              <template v-else-if="item.opnContent.contactName">
                <p>
                  联系人名称：
                  <span>{{ item.opnContent.contactName }}</span>
                </p>
                <p>职务：{{ item.opnContent.contactPostion }}</p>
                <p>手机：{{ item.opnContent.contactTelephone }}</p>
              </template>
            </div>
          </div>
        </li>
      </ul>
    </li>
  </ul>
</template>

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

    mounted() {
      // console.log(this.dynamicsList)
      this.getDicts('proj_nbo_type').then((response) => {
        this.nboTypeOptions = response.data.values || []
      })
      this.getDicts('proj_appro_status').then((response) => {
        this.approStatusOptions = response.data.values || []
      })
    },

    methods: {
      opnTypeFormat(opnType) {
        if (opnType === '10') {
          return '创建了项目'
        } else if (opnType === '11') {
          return '创建项目审批'
        } else if (opnType === '20') {
          return '更新了项目'
        } else if (opnType === '30') {
          return '更新项目状态'
        } else if (opnType === '40') {
          return '项目升级'
        } else if (opnType === '41') {
          return '项目升级审批'
        } else if (opnType === '50') {
          return '项目降级'
        } else if (opnType === '51') {
          return '项目降级审批'
        } else if (opnType === '60') {
          return '项目转移'
        } else if (opnType === '61') {
          return '项目转移审批'
        } else if (opnType === '70') {
          return '关联了联系人'
        } else if (opnType === '71') {
          return '解除关联了联系人'
        } else if (opnType === '72') {
          return '设置首要联系人'
        } else if (opnType === '80') {
          return '项目转为储备项目'
        } else if (opnType === '81') {
          return '项目转为储备审批'
        } else {
          return ''
        }
      },
    },
  }
</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>