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

<template>
  <div>
    <div :title="getAllName(item[areaName])">{{ spliceNameFun(item[areaName], 8) }}</div>
    <div 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 item[peopleName].split(',')" :key="i" @click="gotoPersonnel(item.resiId[k])" :title="getAllName(i)">{{ spliceNameFun(i, 12) }}{{ k === getItemNameArr(item[peopleName]).length - 1 ? "" : "," }}</span>
      <popTips :item="item" />
    </div>
  </div>
</template>

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

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

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