zjugis_OA/client/src/views/OaSystem/home/components/CardItemSeven.vue

<template>
  <div class="SevenDetailBox">
    <ul v-if="!loading && listData.length > 0">
      <li v-for="(item, i) in listData" :key="i">
        <div class="content">
          <span>{{ item?.messageContent }}</span>
        </div>
        <span>{{ item?.createTime }}</span>
      </li>
    </ul>
    <p v-else style="text-align: center; padding: 20px 0px">
      <span>暂无回款记录</span>
    </p>
  </div>
</template>

<script setup lang="ts">
import request from '@/config/axios'
import { useUserStore } from '@/store/modules/user'

const loading = ref<boolean>(false)
const listData = ref([])
const userStore = useUserStore()
const year = 2023
const queryContractMessageByPage = async (): Promise<void> => {
  loading.value = true
  const urlApi = `/contract-message/page`
  const sendData = {
    deptId: userStore.getUser.deptId,
    year: year,
    messageType: 2
    // managerId: userStore.getUser.id
  }
  const result = await request.get({ url: urlApi, params: sendData }, '/business')
  loading.value = false
  if (result.records && result.records.length > 0) {
    listData.value = result.records
  }
}
queryContractMessageByPage()
</script>

<style lang="scss" scoped>
.SevenDetailBox {
  display: flex;
  height: calc(100% - 30px);
  padding-bottom: 15px;
  margin-bottom: 0;
  flex-direction: column;

  > ul {
    height: 0;
    flex-grow: 1;
    overflow-y: scroll;

    > li {
      display: flex;
      padding: 10px;
      font-size: 15px;
      border-bottom: 1px solid #e3e3e3;

      > div {
        flex: 1;
        color: #000000;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 0px;
        margin-right: 20px;
      }

      > span {
        color: #8a94a4;
      }
    }
  }
}
</style>