epmet-work-pc/src/components/NameSplit/index.vue

<template>
  <div class="node-com">
    <div v-if="!flag" class="nodeTitle" :title="getAllName(item[areaName])">{{ spliceNameFun(item[areaName], 4) }}</div>
    <div class="name_more peoName" v-if="item[peopleName] && !item[peopleName].includes(',')" @click="gotoPersonnel(item.resiId)" :title="getAllName(item[peopleName])">{{ spliceNameFun(item[peopleName], 12) }}</div>
    <div class="name_more" v-if="item[peopleName] && item[peopleName].includes(',')">
      <span v-for="(i, k) in getItemNameArr(item[peopleName])" :key="i" @click="gotoPersonnel(item.resiId.split(',')[k])" :title="getAllName(i)">{{ spliceNameFun(i, 12) }}{{ k === getItemNameArr(item[peopleName]).length - 1 ? "" : "," }}</span>
      <popTips :item="item" :pageName="pageName" />
    </div>
  </div>
</template>

<script>
export default {
  name: "NameSplit",
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    areaName: {
      type: String,
      default: "partyOrgName",
    },
    peopleName: {
      type: String,
      default: "principalName",
    },
    flag: {
      type: Boolean,
      default: false,
    },
    pageName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    getAllName(item) {
      return item;
    },

    getItemNameArr(str) {
      return str.split(",").slice(0, 2);
    },

    spliceNameFun(row, num) {
      return row;
    },
    gotoPersonnel(id) {
      if (id) {
        this.$router.push({ path: `/organizational/orgPersonnel/${this.pageName}`, query: { user_id: id } });
      } else {
        this.$message.error("无法跳转！");
      }
    },
  },
};
</script>

<style scope lang="scss">
.node-com {
  padding: 0 12px;
  .nodeTitle {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }
  .peoName {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    opacity: 0.8;
  }
  .name_more {
    cursor: pointer;
    span {
      &:hover {
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
}
</style>