caseEditor/src/app/fire/view/dispatch/list.vue

<template>
  <div class="body-layer">
    <div class="body-head">
      <h3 style="visibility: hidden">项目列表</h3>
      <div class="table-ctrl-right">
        <slot name="tableCtrl" />
      </div>
    </div>

    <el-table
      :data="pagging.state.table.rows"
      id="multipleTable"
      style="width: 100%"
      class="table"
      size="large"
      @selection-change="pagging.changeSelectRows"
    >
      <el-table-column
        type="selection"
        width="50"
        :selectable="() => !!operateIsPermissionByPath(checkPerm)"
      />
      <el-table-column label="序号" width="70" v-slot:default="{ $index }">
        <div style="text-align: center">
          {{ pagging.state.pag.size * (pagging.state.pag.currentPage - 1) + $index + 1 }}
        </div>
      </el-table-column>
      <el-table-column label="项目编号" prop="projectSn"></el-table-column>
      <el-table-column label="起火对象" prop="projectName" v-slot:default="{ row }">
        <el-tooltip
          class="item"
          effect="dark"
          :content="row.projectName"
          placement="bottom-start"
          v-if="row.projectName && row.projectName.length > 15"
        >
          <p class="tip oper-user">{{ row.projectName }}</p>
        </el-tooltip>
        <p class="tip" v-else>{{ row.projectName }}</p>
      </el-table-column>
      <el-table-column label="起火地址" prop="projectAddress" v-slot:default="{ row }">
        <el-tooltip
          class="item"
          effect="dark"
          :content="row.projectAddress"
          placement="bottom-start"
          v-if="row.projectAddress && row.projectAddress.length > 15"
        >
          <p class="tip oper-user">{{ row.projectAddress }}</p>
        </el-tooltip>
        <p class="tip" v-else>{{ row.projectAddress }}</p>
      </el-table-column>
      <el-table-column label="起火场所" prop="projectSite" v-slot:default="{ row }">
        <el-tooltip
          class="item"
          effect="dark"
          :content="row.projectSite"
          placement="bottom-start"
          v-if="row.projectSite && row.projectSite.length > 10"
        >
          <p class="tip oper-user">{{ row.projectSite }}</p>
        </el-tooltip>
        <p class="tip" v-else>{{ row.projectSite }}</p>
      </el-table-column>
      <el-table-column label="承办单位" prop="organizerDeptName"></el-table-column>
      <el-table-column label="事故日期" prop="accidentDate"></el-table-column>
      <el-table-column label="火灾原因" prop="fireReason" v-slot:default="{ row }">
        <el-tooltip
          class="item"
          effect="dark"
          :content="row.fireReason"
          placement="bottom-start"
          v-if="row.fireReason && row.fireReason.length > 15"
        >
          <p class="tip oper-user">{{ row.fireReason }}</p>
        </el-tooltip>
        <p class="tip" v-else>{{ row.fireReason }}</p>
      </el-table-column>
      <el-table-column label="项目状态" v-slot:default="{ row }">
        {{ fireStatusDesc[row.status as FireStatus] }}
      </el-table-column>
      <el-table-column label="操作" v-slot:default="{ row }" :width="180">
        <slot name="rowCtrl" :row="row" />
      </el-table-column>
    </el-table>

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

<script lang="ts" setup>
import comPagination from "@/components/pagination/index.vue";
import { fireStatusDesc } from "@/app/fire/constant/fire";
import { FireStatus } from "@/app/fire/store/fire";
import { operateIsPermissionByPath } from "@/directive/permission";
import { FirePagging } from "./pagging";

defineProps<{ pagging: FirePagging; checkPerm: string }>();
</script>