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 v-if="item.type === 10">报价单总金额</span>
              <span v-if="item.type === 20">合同总金额</span>
              <span>{{ moneyFormat(item.amount, 2) }}</span>
              <span
                v-if="item.type === 10 && item.code"
                :class="{ 'code-class': isHave }"
                @click="isHaveOne ? handlePushRoute(item) : () => {}"
                >（{{ item.code }}）</span
              >
              <span
                v-if="item.type === 20 && item.contractCode"
                :class="{ 'code-class': isHaveOne }"
                @click="isHave ? handlePushRoute(item) : () => {}"
                >（{{ item.contractCode }}）</span
              >
            </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>
import useUserStore from "@/store/modules/user";

const props = defineProps({
  customerId: {
    type: String,
  },
});
const { proxy } = getCurrentInstance();
const loading = ref(false);
const progressList = ref([]);
// 判断当前用户有无销售合同页面权限
const isHave = ref(false);
if (
  useUserStore().permissions &&
  useUserStore().permissions.includes("contract")
) {
  isHave.value = true;
}
// 判断当前用户有无报价单页面权限
const isHaveOne = ref(false);
if (
  useUserStore().permissions &&
  useUserStore().permissions.includes("priceSheet")
) {
  isHaveOne.value = true;
}

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];
};

const handlePushRoute = (row) => {
  if (row.type === 10) {
    proxy.$router.push({
      name: "PriceSheet",
      query: {
        code: row.code,
      },
    });
  } else if (row.type === 20) {
    proxy.$router.push({
      name: "Contract",
      query: {
        code: row.contractCode,
      },
    });
  }
};
</script>

<style lang="scss" scoped>
.code-class {
  cursor: pointer;
  color: #409eff;
}
: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>