cbjsxt-front-master/src/views/EntDeclaration/auditTaskManagement/components/CostSurveyTab.vue

<template>
  <div>
    <el-table
      style="width: 100%; margin-top: 20px"
      :data="paginatedData"
      border
      size="medium"
    >
      <!-- 序号列 -->
      <el-table-column
        prop="index"
        label="序号"
        width="60"
        align="center"
      ></el-table-column>
      <el-table-column label="成本调查表" min-width="220">
        <template slot-scope="scope">
          <span
            :style="{
              color: scope.row.isDisabled ? '#909399' : '#409EFF',
              cursor: scope.row.isDisabled ? 'default' : 'pointer',
            }"
            @click="
              !scope.row.isDisabled && $emit('handle-survey-click', scope.row)
            "
          >
            {{ scope.row.name }}
          </span>
        </template>
      </el-table-column>

      <!-- 资料类型列 -->
      <el-table-column
        prop="dataType"
        label="资料类型"
        width="120"
        align="center"
      ></el-table-column>

      <!-- 表格类型列 -->
      <el-table-column
        prop="tableType"
        label="表格类型"
        width="120"
        align="center"
      ></el-table-column>

      <!-- 是否必填列 -->
      <el-table-column
        prop="isRequired"
        label="是否必填"
        width="100"
        align="center"
      ></el-table-column>

      <!-- 是否上传列（红色“未上传”、绿色“已上传”） -->
      <el-table-column label="是否上传" width="100" align="center">
        <template slot-scope="scope">
          <span
            :style="{
              color: scope.row.isUploaded === true ? '#67c23a' : '#f56c6c',
            }"
          >
            {{ scope.row.isUploaded === true ? '已上传' : '未上传' }}
          </span>
        </template>
      </el-table-column>

      <!-- 操作列（根据“是否上传”“表格类型”显示不同按钮） -->
      <el-table-column label="操作" width="280" align="center">
        <template slot-scope="scope">
          <template v-if="scope.row.isUploaded">
            <el-button
              type="text"
              size="small"
              :disabled="isViewMode"
              @click="$emit('handle-modify', scope.row)"
            >
              修改
            </el-button>
            <el-button
              type="text"
              size="small"
              :disabled="isViewMode"
              @click="$emit('handle-data-download', scope.row)"
            >
              数据下载
            </el-button>
            <el-button
              type="text"
              size="small"
              :disabled="isViewMode"
              @click="$emit('handle-data-upload', scope.row)"
            >
              数据上传
            </el-button>
          </template>
          <template v-else>
            <el-button
              type="text"
              size="small"
              :disabled="isViewMode"
              @click="$emit('handle-online-fill', scope.row)"
            >
              在线填报
            </el-button>
            <el-button
              v-if="scope.row.tableType === '动态表'"
              type="text"
              size="small"
              :disabled="isViewMode"
              @click="$emit('handle-template-download', scope.row)"
            >
              模版下载
            </el-button>
            <el-button
              type="text"
              size="small"
              :disabled="isViewMode"
              @click="$emit('handle-data-upload', scope.row)"
            >
              数据上传
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next"
      :current-page="pagination.currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      style="margin-top: 20px; text-align: right"
      @current-change="$emit('handle-page-change', $event)"
      @size-change="$emit('handle-size-change', $event)"
    />
  </div>
</template>

<script>
  export default {
    name: 'CostSurveyTab',
    props: {
      paginatedData: {
        type: Array,
        default: () => [],
      },
      pagination: {
        type: Object,
        default: () => ({ currentPage: 1, pageSize: 10, total: 0 }),
      },
      isViewMode: {
        type: Boolean,
        default: false,
      },
    },
  }
</script>