byte-sailing-new/src/views/customer/portrait/com/LatestProgress.vue

<template>
  <div v-loading="loading" class="progress">
    <el-timeline reverse>
      <el-timeline-item v-for="(item, index) in progressList" :key="index" color="#0084FF" placement="top" hide-timestamp>
        <div class="details" :style="getColor(item.type)">
          <div class="t">{{ getTitle(item.type) }}</div>
          <div class="content11" v-if="item.type != 30">
            <span class="gray">跟进摘要： </span>
            <span class="val"> {{ getContent(item) }} </span>
          </div>
          <div class="content11" v-else>
            <span class="gray">跟进记录： </span>
            <span class="val"> {{ item.remark }} </span>
          </div>
          <div style="margin: 8px 0; display: flex" v-if="item.fileList && item.fileList.length > 0">
            <div style="width: 36px; color: #999999">附件:</div>
            <div style="width: calc(100% - 36px)">
              <div v-for="(file, index) in item.fileList" :key="index">
                <a style="color: #409eff; cursor: pointer" @click="openFile(file.fileUrl)">{{ file.fileName }}</a>
              </div>
            </div>
          </div>
          <div class="gray">{{ item.createTime }}</div>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup>
const props = defineProps({
  customerId: {
    type: String,
  },
});
const { proxy } = getCurrentInstance();
const loading = ref(false);
const progressList = ref([]);
const getData = () => {
  loading.value = true;
  proxy.post("/saleQuotation/latestFollowUp", { id: props.customerId }).then((res) => {
    progressList.value = res.rows;
    if (res.rows && res.rows.length > 0 && res.rows.map((rows) => rows.id).length > 0) {
      proxy.post("/fileInfo/getList", { businessIdList: res.rows.map((rows) => rows.id) }).then((fileObj) => {
        for (let i = 0; i < res.rows.length; i++) {
          progressList.value[i].fileList = fileObj[progressList.value[i].id] || [];
        }
      });
    }
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
onMounted(() => {
  if (props.customerId) {
    getData();
  }
});

const getTitle = (type) => {
  switch (type) {
    case 10:
      return "报价单";
    case 20:
      return "合同";
    case 30:
      return "手动跟进";
    default:
      return "";
  }
};
const getContent = (item) => {
  if (item.type === 10) {
    return "报价单总金额 " + proxy.moneyFormat(item.amount, 2);
  } else if (item.type === 20) {
    return "合同总金额 " + proxy.moneyFormat(item.amount, 2) + ` (${item.contractCode}) `;
  }
};
const openFile = (path) => {
  window.open(path, "_blank");
};
const getColor = (type) => {
  const obj = {
    0: "#EAE8FB",
    10: "#FCF1E4",
    20: "#E2FBE8",
    30: "#D9EDFF",
    40: "#E4F9F9",
  };
  return "background-color: " + obj[type];
};
</script>

<style lang="scss" scoped>
:deep(.el-timeline-item) {
  padding-bottom: 10px;
}
:deep(.el-timeline-item__wrapper) {
  top: 5px;
}
.progress {
  padding: 10px;
}
.details {
  padding: 10px;
  // background-color: #d9edff;
  border-radius: 5px;
  font-size: 12px;
  .t {
    color: #333333;
    font-weight: bold;
  }
  .content11 {
    margin: 4px 0;
    display: flex;
    .val {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .gray {
    color: #999999;
  }
}
</style>
<style>
ul {
  margin: 0px;
  padding: 0px;
}
</style>