Scope.vue

<template>
    <div>
      <h3>检查范围</h3>
      <el-table v-loading="loading" :data="inforList">
        <el-table-column label="任务名称" align="center" prop="fName" :show-overflow-tooltip="true"/>
        <el-table-column label="对象分类" align="center" prop="fObjectType" :formatter="fObjectTypeFormat" :show-overflow-tooltip="true"/>
        <el-table-column label="抽查要求" align="center" prop="fSpotCheckType">
          <template slot-scope="scope">
            <span v-if="scope.row.fSpotCheckType">{{ fSpotCheckTypeFormat(scope.row) }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="城区标识" align="center" prop="fSpecialFlag" :formatter="fSpecialFlagFormat">
          <template slot-scope="scope">
            <span v-if="scope.row.fSpecialFlag">{{ fSpecialFlagFormat(scope.row) }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="此对象应检数据" align="center" prop="fLotCount">
          <template slot-scope="scope">
            <span v-if="scope.row.fLotCount">{{ scope.row.fLotCount }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="fCreateTime" :show-overflow-tooltip="true"/>
        <el-table-column label="创建人" align="center" prop="fCreateBy" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-document"
              @click="handleDetail(scope.row)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        :pageSizes="[5,10, 20, 30, 50]"
        @pagination="getList"
      />

      <!-- 详情 -->
      <DetailInfo ref="detail"/>
    </div>
</template>

<script>
  import { listInfor } from "@/api/supervision/scope";
  import DetailInfo from "../../scope/components/DetailInfo";
  export default {
    name: "scope",
    props:{
      fHazardCheckTaskId:{
        type:Number
      }
    },
    components:{
      DetailInfo
    },
    data(){
      return{
        loading: false,
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 5,
        },
        inforList: [],
        // 对象分类
        fObjectTypeOptions: [],
        // 抽查要求 1：抽查;0-全覆盖字典
        fSpotCheckTypeOptions: [],
        // T-主城区(默认)，F-三市字典
        fSpecialFlagOptions: [],
        // 删除标记，0-可用，1-已删除字典
        fDeleteFlagOptions: [],
      }
    },
    created() {
      this.queryParams.fHazardCheckTaskId = this.fHazardCheckTaskId;
      this.getList();
      this.getDicts("t_object_type").then(response => {
          this.fObjectTypeOptions = response.data;
      });
      this.getDicts("t_spot_check_type").then(response => {
          this.fSpotCheckTypeOptions = response.data;
      });
      this.getDicts("t_special_flag").then(response => {
          this.fSpecialFlagOptions = response.data;
      });
      this.getDicts("t_delete_flag").then(response => {
          this.fDeleteFlagOptions = response.data;
      });
    },
    methods:{
      getList() {
        this.loading = true;
        listInfor(this.queryParams).then(response => {
          this.inforList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 对象分类
      fObjectTypeFormat(row, column) {
        return this.selectDictLabel(this.fObjectTypeOptions, row.fObjectType);
      },
      // 抽查要求 1：抽查;0-全覆盖字典翻译
      fSpotCheckTypeFormat(row, column) {
        return this.selectDictLabel(this.fSpotCheckTypeOptions, row.fSpotCheckType);
      },
      // T-主城区(默认)，F-三市字典翻译
      fSpecialFlagFormat(row, column) {
        return this.selectDictLabel(this.fSpecialFlagOptions, row.fSpecialFlag);
      },
      // 删除标记，0-可用，1-已删除字典翻译
      fDeleteFlagFormat(row, column) {
        return this.selectDictLabel(this.fDeleteFlagOptions, row.fDeleteFlag);
      },
      //详情
      handleDetail(row){
        this.$refs.detail.getDetailInfo(row.fScopeInforId);
      },
    }
  }
</script>

<style scoped>

</style>