mix-admin/src/app/fire/view/dispatch/leaveMsgList.vue

<template>
  <!-- power="message:add" -->
  <div class="body-layer" style="padding: 0">
    <el-table
      ref="multipleTable"
      :data="state.table.rows"
      tooltip-effect="dark"
      style="width: 100%; max-height: 540px"
    >
      <el-table-column label="留言内容" prop="content" v-slot:default="{ row }">
        <el-tooltip
          class="item"
          effect="dark"
          :content="row.content"
          placement="bottom-start"
          v-if="row.content && row.content.length > 30"
        >
          <a class="msg-content"> {{ row.content.substr(0, 30) }}... </a>
        </el-tooltip>
        <a class="msg-content" v-else>
          {{ row.content }}
        </a>
      </el-table-column>
      <el-table-column label="创建人" prop="userName" width="150"></el-table-column>
      <el-table-column
        label="创建日期"
        prop="createTime"
        v-slot:default="{ row }"
        width="180"
      >
        {{ format(row.createTime) }}
      </el-table-column>
    </el-table>

    <com-pagination
      @size-change="changPageSize"
      @current-change="changPageCurrent"
      :current-page="state.pag.currentPage"
      :page-size="state.pag.size"
      :total="state.pag.total"
    />
  </div>
</template>

<script setup lang="ts">
import { usePagging } from "@/hook/pagging";
import comPagination from "@/components/pagination/index.vue";
import { FireLeaveMsg, getFireLeaveMsgPagging } from "@/app/fire/store/fire";
import { dateFormat } from "@/util";
import { QuiskExpose } from "@/helper/mount";

const props = defineProps<{
  projectId: string;
  onAddLeaveMsg: (projectId: string) => boolean | Promise<boolean>;
}>();

const { state, refresh, changPageSize, changPageCurrent } = usePagging({
  get: getFireLeaveMsgPagging,
  paramsTemlate: { projectId: props.projectId },
});

const format = (date: number) => dateFormat(new Date(date), "yyyy-MM-dd hh:mm");

defineExpose<QuiskExpose>({
  async submit() {
    if (await props.onAddLeaveMsg(props.projectId)) {
      refresh();
    }
    throw "不退出";
  },
});
</script>

<style lang="scss" scoped>
.table-ctrl-right {
  .search-scene {
    margin: 0 20px 0 26px;
  }
  i {
    margin-left: 20px;
    font-size: 1.7rem;
    vertical-align: middle;
    cursor: pointer;

    &.active {
      color: var(--primaryColor);
    }
  }
}

.leave-from {
  // width: 520px;
  margin: 0 auto;
}

.title {
  font-weight: bold;
  color: #26559b;
  line-height: 19px;
  font-size: 14px;
}

.msg-content {
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; //溢出不换行
  position: relative;
  cursor: pointer;
}
</style>