sl-sfy-safety/src/views/datamanager/alertformdata/components/common/AlertTable.vue

<template>
  <div class="alert-table-box">
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" height="100%" stripe
      :cell-style="colorOfState" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="问题来源" prop="source" width="150">
        <template #default="{ row }">
          {{ getNameBySource(row.source) }}
        </template>
      </el-table-column>
      <el-table-column label="类型" prop="issueType" width="150">
        <template #default="{ row }">
          {{ getNameByType(row.source, row.issueType, [aiOptions, manualOptions]) }}
        </template>
      </el-table-column>
      <el-table-column label="问题描述" prop="description" width="500" show-overflow-tooltip>
        <template #default="{ row }">
          <span>{{ getSplicedDes(row.description) }}</span>
          <span class="detail-text" @click="handleDetailClick(row)"> 详情</span>
        </template>
      </el-table-column>
      <el-table-column label="地点" prop="workspaceId" width="300">
        <template #default="{ row }">
          {{ getNameByWorkid(row.workshopId, row.workspaceId, locationOptions) }}
        </template>
      </el-table-column>
      <el-table-column label="时间" prop="createdAt" width="250"></el-table-column>
      <el-table-column label="负责人" prop="personNameInCharge" width="100"></el-table-column>
      <el-table-column label="处理状态" prop="issueState">
        <template #default="{ row }">
          {{ getNameByState(row.issueState) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="130" fixed="right">
        <template #default="{ row }">
          <img src="/src/assets/images/alert/urgent.png" alt="" title="点击标记为加急问题" v-if="!isShowTab && !row.priority"
            @click="handleUrgent(row)">
          <img src="/src/assets/images/alert/urgent-active.png" alt="" title="点击取消问题加急"
            v-if="!isShowTab && row.priority" @click="handleUrgent(row)">
          <img src="/src/assets/images/alert/edit.png" alt="" v-if="isShowTab" @click="handleEdit(row)">
          <img src="/src/assets/images/alert/show-on.png" alt="" title="点击隐藏问题展示" v-if="!row.isHide"
            @click="handleShow(row)">
          <img src="/src/assets/images/alert/show-off.png" alt="" title="点击恢复问题展示" v-if="row.isHide"
            @click="handleShow(row)">
          <img src="/src/assets/images/alert/delete.png" alt="" title="点击删除问题数据" @click="handleDelete(row)">
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ElTable } from 'element-plus';
import { onBeforeMount, ref } from 'vue';
import { getNameBySource, getNameByState } from './constant.question';
import { useIssueType } from '../../hooks/useIssueType';
import { useWorkLocation } from '../../hooks/useWorkLocation';

const { aiOptions, manualOptions, getAIOptions, getManualOptions, getNameByType } = useIssueType();
const { locationOptions, getLocationOptions, getNameByWorkid } = useWorkLocation();

const multipleTableRef = ref<InstanceType<typeof ElTable>>();

interface DataSourceItem {
  source: Number,         // 问题单来源：1-AI检测、2-人工上报
  issueType: Number,      // 问题单类型
  description: String,    // 问题描述
  workspaceId: Number[],  // 工位id（地点=车间＋工位？）
  createdAt: String,
  personNameInCharge: String,
  issueState: Number,     // 问题单状态：1-待审核、2-待处理、3-待复核、4-已退回、5-已处理
};

interface Props {
  tableData: Array<DataSourceItem>;
  isShowTab: boolean;    // true展示数据，false默认数据
  onDetail: (row: DataSourceItem) => unknown; // 详情事件
  onUrgent?: (row: DataSourceItem) => unknown; // isShowTab=false时，加急按钮事件
  onEdit?: (row: DataSourceItem) => unknown;   // isShowTab=true时，编辑按钮事件
  onShow: (row: DataSourceItem) => unknown;   // 显示/隐藏按钮事件
  onDelete: (row: DataSourceItem) => unknown; // 删除按钮事件
};

const props = defineProps<Props>();

const emits = defineEmits(['update:selection'])
const handleSelectionChange = (selection: any[]) => {
  emits("update:selection", selection);
};

const handleDetailClick = (row) => {
  props.onDetail(row);
};
const handleUrgent = (row) => {
  props.onUrgent?.(row);
};
const handleEdit = (row) => {
  props.onEdit?.(row);
};
const handleShow = (row) => {
  props.onShow(row);
};
const handleDelete = (row) => {
  props.onDelete(row);
};

const getSplicedDes = (val) => {
  if (val.length < 40) return val;
  else {
    const temp = val.substring(0, 40);
    return temp + '…';
  }
};

const colorOfState = ({ row, columnIndex }) => {
  if (columnIndex === 7) {
    if (row.issueState === 4) return { color: "#FF4D4F" };
    else if (row.issueState === 5) return { color: "#52C41A " };
    else return { color: "#1890FF " };
  };
  if (row.isHide) {
    return { color: "#A8ABB2" };
  }
};

const clearAll = () => {
  multipleTableRef.value!.clearSelection();
};

defineExpose({ clearAll })

onBeforeMount(() => {
  getAIOptions();
  getManualOptions();
  getLocationOptions();
});
</script>

<style scoped lang="scss">
.alert-table-box {
  display: flex;
  flex-direction: column;
}

.detail-text {
  color: #1890FF;
  font-weight: 500;
  cursor: pointer;
}

:deep(.el-table-fixed-column--right) {
  .cell {
    display: flex;
  }

  img {
    margin-right: 20px;
    cursor: pointer;
  }
}
</style>