RuoYi-flowable-master/ruoyi-ui/src/layout/components/Sidebar/Item.vue

<script>
import store from "@/store";
export default {
  name: "MenuItem",
  functional: true,
  props: {
    icon: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
  },
  render(h, context) {
    const { icon, title } = context.props;
    const vnodes = [];

    if (icon) {
      vnodes.push(<svg-icon icon-class={icon} />);
    }

    if (title) {
      if (title.length > 5) {
        vnodes.push(
          <span slot="title" title={title}>
            {title}
          </span>
        );
      } else {
        let inspectNum = store.getters.inspectNum; //评估考察
        let projectLXNum = store.getters.projectLXNum; //项目立项
        let dueNum = store.getters.dueNum; //尽职背调
        let projectTJNum = store.getters.projectTJNum; //项目投决
        vnodes.push(
          <span slot="title">
            {title}
            {title === "评估考察" && inspectNum ? (
              <span class="hint">{inspectNum}</span>
            ) : (
              ""
            )}
            {title === "项目立项" && projectLXNum ? (
              <span class="hint">{projectLXNum}</span>
            ) : (
              ""
            )}
            {title === "尽职背调" && dueNum ? (
              <span class="hint">{dueNum}</span>
            ) : (
              ""
            )}
            {title === "项目投决" && projectTJNum ? (
              <span class="hint">{projectTJNum}</span>
            ) : (
              ""
            )}
          </span>
        );
      }
    }
    return vnodes;
  },
};
</script>
<style lang="scss" scoped>
.hint {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f8ac59;
  color: #fff;
  display: inline-block;
  line-height: 16px;
  text-align: center;
  margin-left: 5px;
  font-size: 12px;
  font-weight: bold;
  margin-top: -1px;
}
</style>