supervision-test-frontend-repo/src/views/bg/xispeak/components/BgXiSpeakFeedbackViewModal.vue

<template>
  <j-modal
    :title="title"
    :width="1300"
    :visible="visible"
    :okButtonProps="{ class: { 'jee-hidden': true } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <BasicTable
      size="small"
      rowKey="id"
      :canResize="false"
      :showIndexColumn="false"
      :showActionColumn="false"
      :showTableSetting="false"
      :clickToRowSelect="false"
      :columns="columns"
      :dataSource="feedbackTableData"
      :loading="loading"
      :pagination="false"
      :bordered="false"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'attachments'">
          <SUploadFile
            v-if="record.id"
            class="feedback-view-attachment-list"
            :bussiness-id="record.id"
            :disabled="true"
            :multiple="true"
          />
          <span v-else>-</span>
        </template>
      </template>
    </BasicTable>
  </j-modal>
</template>

<script lang="ts" setup>
  import { ref, computed, defineExpose } from 'vue';
  import { BasicTable } from '/@/components/Table';
  import type { BasicColumn } from '/@/components/Table';
  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
  import SUploadFile from '/@/components/semri/fileComponent/SUploadFile.vue';
  import { bgXiSpeakFeedbackList } from '../BgXiSpeak.api';

  const visible = ref(false);
  const loading = ref(false);
  const feedbackTableData = ref<Recordable[]>([]);
  const currentRecord = ref<Recordable>({});

  const columns: BasicColumn[] = [
    {
      title: '反馈人',
      dataIndex: 'responPersonname',
      align: 'center',
      width: 100,
    },
    {
      title: '反馈部门',
      dataIndex: 'responDeptname',
      align: 'center',
      width: 140,
    },
    {
      title: '反馈措施',
      dataIndex: 'method',
      align: 'left',
      ellipsis: true,
    },
    {
      title: '完成状态',
      dataIndex: 'completionStatus_dictText',
      align: 'center',
      width: 100,
    },
    {
      title: '成果形式',
      dataIndex: 'outcomeForm',
      align: 'center',
      width: 120,
    },
    {
      title: '检查情况(纪检)',
      dataIndex: 'checkStatus',
      align: 'left',
      ellipsis: true,
      width: 140,
    },
    {
      title: '监督意见(纪检)',
      dataIndex: 'inspectionAdvice',
      align: 'left',
      ellipsis: true,
      width: 140,
    },
    {
      title: '措施数量(纪检)',
      dataIndex: 'measureNum',
      align: 'center',
      width: 100,
    },
    {
      title: '附件',
      dataIndex: 'id',
      key: 'attachments',
      align: 'left',
      width: 280,
    },
  ];

  const title = computed(() => {
    const count = loading.value ? '加载中' : `${feedbackTableData.value.length} 条`;
    return `反馈信息（${count}）`;
  });

  async function open(record: Recordable) {
    currentRecord.value = record;
    visible.value = true;
    loading.value = true;
    try {
      const res = await bgXiSpeakFeedbackList({
        mainId: record.id,
        pageNo: 1,
        pageSize: 9999,
        column: 'createTime',
        order: 'desc',
      });
      feedbackTableData.value = Array.isArray(res) ? res : res?.records || [];
    } finally {
      loading.value = false;
    }
  }

  function handleCancel() {
    visible.value = false;
  }

  defineExpose({ open });
</script>

<style lang="less" scoped>
  .feedback-view-attachment-list {
    min-width: 240px;

    :deep(.file-list-wrapper) {
      min-height: 40px;
      max-height: 120px;
      padding: 4px 8px;
    }

    :deep(.file-list-header) {
      margin-bottom: 6px;
      padding-bottom: 6px;
    }

    :deep(.file-list .file-item) {
      padding: 8px;
      margin-bottom: 6px;
    }

    :deep(.ant-empty) {
      margin: 0;
      padding: 4px 0;

      .ant-empty-image {
        display: none;
      }

      .ant-empty-description {
        font-size: 12px;
        color: #999;
        padding: 0;
        margin: 0;
      }
    }
  }
</style>