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

<template>
  <div>
    <el-button
      type="primary"
      :disabled="isViewMode"
      @click="$emit('handleAddMaterial')"
    >
      补充材料
    </el-button>
    <el-table
      style="margin-top: 20px"
      border
      :data="dataRequirements"
      size="mini"
      :show-header="true"
      :row-class-name="getRowClassName"
    >
      <el-table-column prop="seq" label="序号" width="80" align="center">
        <template slot-scope="scope">
          <span v-if="!scope.row.isCategoryHeader">
            {{ scope.row.seq || scope.row.index }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="informationName" label="报送资料" min-width="280">
        <template slot-scope="scope">
          <div v-if="scope.row.isCategoryHeader" class="category-header-cell">
            {{ scope.row.categoryName }}
          </div>
          <span v-else>{{ scope.row.informationName || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="formatRequired"
        label="资料类型"
        width="130"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="!scope.row.isCategoryHeader">
            <span
              v-if="
                scope.row.formatRequired !== null &&
                scope.row.formatRequired !== undefined
              "
            >
              {{
                getDictName('formatAsk', String(scope.row.formatRequired)) ||
                scope.row.formatRequired
              }}
            </span>
            <span v-else>-</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="isRequired"
        label="是否必填"
        width="110"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="!scope.row.isCategoryHeader">
            {{ scope.row.isRequired === '1' ? '是' : '否' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="isUploaded"
        label="是否上传"
        width="110"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="!scope.row.isCategoryHeader">
            <span v-if="scope.row.isUploaded === true">已上传</span>
            <span v-else class="text-danger">未上传</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="isRequired"
        label="审核状态"
        width="110"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="!scope.row.isCategoryHeader">
            <span
              v-if="
                scope.row.auditedStatus !== null &&
                scope.row.auditedStatus !== undefined
              "
            >
              {{
                getDictName('clshzt', String(scope.row.auditedStatus)) ||
                scope.row.auditedStatus
              }}
            </span>
            <span v-else>-</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="operation" label="操作" width="220" align="center">
        <template slot-scope="scope">
          <template v-if="!scope.row.isCategoryHeader">
            <template v-if="scope.row.formatRequired !== '3'">
              <el-button
                v-if="scope.row.isUploaded === true"
                type="text"
                size="small"
                @click="$emit('handleFileView', scope.row)"
              >
                查看
              </el-button>
              <el-button
                v-if="scope.row.isUploaded === true"
                type="text"
                size="small"
                @click="$emit('handleFileDownload', scope.row)"
              >
                下载
              </el-button>
              <el-button
                v-if="scope.row.isUploaded === false"
                type="text"
                size="small"
                :disabled="isViewMode"
                @click="$emit('handleFileUpload', scope.row)"
              >
                上传
              </el-button>
            </template>
            <template v-if="scope.row.formatRequired == '3'">
              <el-button
                v-if="scope.row.isUploaded === true"
                type="text"
                size="small"
                @click="$emit('handleTemplateDownload', scope.row)"
              >
                模版下载
              </el-button>
              <el-button
                v-if="scope.row.isUploaded === false"
                type="text"
                size="small"
                :disabled="isViewMode"
                @click="$emit('handleDataUpload', scope.row)"
              >
                数据上传
              </el-button>
            </template>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'DataRequirementsTab',
    props: {
      dataRequirements: {
        type: Array,
        default: () => [],
      },
      isViewMode: {
        type: Boolean,
        default: false,
      },
      dictData: {
        type: Object,
        default: () => ({}),
      },
    },
    methods: {
      getRowClassName(data) {
        if (data.row.isCategoryHeader) {
          return 'category-header-row'
        }
        return ''
      },
      getDictName(dictType, dictKey) {
        const list = (this.dictData && this.dictData[dictType]) || []
        if (!Array.isArray(list) || dictKey === undefined || dictKey === null) {
          return ''
        }
        const item = list.find(
          (it) =>
            String(it.key) === String(dictKey) ||
            String(it.value) === String(dictKey)
        )
        return item ? item.name : ''
      },
    },
  }
</script>

<style scoped>
  .text-danger {
    color: #d9001b;
  }

  /* 类别头行样式 */
  .category-header-row {
    background-color: #f5f7fa !important;
  }
  .category-header-row td {
    background-color: #f5f7fa !important;
    padding: 12px 16px !important;
  }
  .category-header-cell {
    font-weight: 700;
    color: #303133;
    padding-left: 16px;
  }
</style>