pms-iot-vue/src/views/pms/iotrydailyreport/UnfilledReportDialog.vue

<template>
  <el-dialog
    v-model="dialogVisible"
    title="未填报详情"
    width="80%"
    top="5vh"
    :close-on-click-modal="false"
    @closed="handleClosed"
  >
    <!-- 搜索条件区域 -->
    <ContentWrap class="mb-15px">
      <el-form :model="searchParams" ref="searchFormRef" :inline="true" label-width="100px">
        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker
            v-model="searchParams.createTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-320px"
            @change="handleSearch"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleSearch">
            <Icon icon="ep:search" class="mr-5px" /> 搜索
          </el-button>
          <el-button @click="resetSearch">
            <Icon icon="ep:refresh" class="mr-5px" /> 重置
          </el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>

    <!-- 列表区域 -->
    <ContentWrap>
      <div class="table-container">
        <el-table
          v-loading="loading"
          :data="list"
          :stripe="true"
          style="width: 100%"
          :cell-style="cellStyle"
          empty-text="暂无未填报数据"
          table-layout="fixed"
        >
          <el-table-column label="日期" align="center" prop="reportDate" width="120">
            <template #default="scope">
              <span class="date-content">{{ scope.row.reportDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="部门名称" prop="deptNames" min-width="300">
            <template #default="scope">
              <div class="dept-names-content">
                {{ scope.row.deptNames || '-' }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页
      <Pagination
        :total="total"
        v-model:page="searchParams.pageNo"
        v-model:limit="searchParams.pageSize"
        @pagination="getList"
      /> -->
    </ContentWrap>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch, nextTick } from 'vue'
import { IotRyDailyReportApi } from '@/api/pms/iotrydailyreport'

const { t } = useI18n()
const message = useMessage()

// 弹窗显示控制
const dialogVisible = ref(false)

// 搜索参数
const searchParams = reactive({
  pageNo: 1,
  pageSize: 10,
  createTime: []
})

// 列表数据
const list = ref<any[]>([])
const total = ref(0)
const loading = ref(false)

// 接收父组件传递的查询参数
const props = defineProps<{
  queryParams: any
}>()

// 搜索表单引用
const searchFormRef = ref()

// 打开弹窗
const open = () => {
  // 复制父组件的查询参数
  if (props.queryParams.createTime && props.queryParams.createTime.length > 0) {
    searchParams.createTime = [...props.queryParams.createTime]
  }

  dialogVisible.value = true
  // 获取数据
  nextTick(() => {
    getList()
  })
}

// 获取列表数据
const getList = async () => {
  // 检查时间范围
  if (!searchParams.createTime || searchParams.createTime.length === 0) {
    list.value = []
    total.value = 0
    return
  }

  loading.value = true
  try {
    const res = await IotRyDailyReportApi.ryUnReportDetails({
      createTime: searchParams.createTime,
      projectClassification: props.queryParams.projectClassification
    })

    // 处理返回数据
    if (res && Array.isArray(res)) {
      list.value = res
      total.value = res.length
    } else {
      list.value = []
      total.value = 0
    }
  } catch (error) {
    console.error('获取未填报数据失败', error)
    message.error('获取未填报数据失败')
    list.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  searchParams.pageNo = 1
  getList()
}

// 重置搜索
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  handleSearch()
}

// 单元格样式
const cellStyle = ({ row, column, rowIndex, columnIndex }: any) => {
  // 为所有列设置基本样式
  const baseStyle = {
    padding: '8px 4px'
  }

  if (column.property === 'deptNames') {
    return {
      ...baseStyle,
      whiteSpace: 'normal',
      wordBreak: 'break-all',
      lineHeight: '1.5'
    }
  }

  return baseStyle
}

// 弹窗关闭处理
const handleClosed = () => {
  list.value = []
  total.value = 0
  searchParams.pageNo = 1
}

// 暴露方法给父组件
defineExpose({
  open
})

// 监听父组件查询参数变化
watch(
  () => props.queryParams.createTime,
  (newVal) => {
    if (newVal && newVal.length > 0) {
      searchParams.createTime = [...newVal]
    }
  },
  { deep: true }
)
</script>

<style scoped>
/* 表格容器确保正确布局 */
.table-container {
  width: 100%;
  overflow-x: auto;
}

.date-content {
  white-space: nowrap;
}

.dept-names-content {
  white-space: normal;
  word-break: break-all;
  line-height: 1.5;
  padding: 8px 4px;
}

/* 深度样式修改确保表格正确显示 */
:deep(.el-table) {
  table-layout: fixed;
}

:deep(.el-table .el-table__cell) {
  box-sizing: border-box;
}

:deep(.el-table .cell) {
  white-space: normal;
  word-break: break-all;
  line-height: 1.5;
  padding: 8px 4px;
}

:deep(.el-table td.el-table__cell) {
  padding: 8px 4px;
  border-bottom: 1px solid var(--el-table-border-color);
}

:deep(.el-table th.el-table__cell) {
  padding: 8px 4px;
  background-color: var(--el-table-header-bg-color);
}

/* 确保列宽正确分配 */
:deep(.el-table__body colgroup col:nth-child(1)) {
  width: 120px;
}

:deep(.el-table__body colgroup col:nth-child(2)) {
  width: auto;
}
</style>