FE-V2-PC/src/views/emergencyManagement/distribution/index.vue

<template>
  <div class="app-container">
    <el-table v-loading="loading" border :data="distributionList">
      <el-table-column label="实验室" align="center" prop="subName" />
      <el-table-column label="学院" align="center" prop="groupDeptName" />
      <el-table-column label="实验室负责人" align="center" prop="adminName" />
      <el-table-column label="关联时间" align="center" prop="createTime" />
      <el-table-column label="关联结果" align="center" prop="distrName">
        <template scope="scope">
          <span v-if="scope.row.distrName=='关联成功'" class="succeed_color">关联成功</span>
          <span v-if="scope.row.distrName=='关联失败'" class="fail_color">关联失败</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" />
    </el-table>
    <pagination :page-sizes="[20, 30, 40, 50]"
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="listDistribution"
    />
  </div>
</template>

<script>
import { listDistribution,} from "@/api/laboratory/distribution";

export default {
  props:{
    pageData3:{},
  },
  name: "Distribution",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 分配记录日志表格数据
      distributionList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize:20,
        riskPlanId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.listDistribution();
  },
  methods: {
    /** 查询分配记录日志列表 */
    listDistribution() {
      this.loading = true;
      this.queryParams.riskPlanId=this.pageData3.id
      listDistribution(this.queryParams).then( response => {
        this.distributionList =  response.rows;
        this.total =  response.total;
        this.loading = false;
      });
    },

    //切换页面
    backPage(){
      this.$parent.handleClick('','','back');
    },
  }
};
</script>
<style scoped lang="scss">
#app .app-container{
  background: #fff;
  border-radius: 0px;
  overflow: hidden;
  padding: 10px;
  margin: 0;
  box-shadow:none;

}
.go_back{
  width: 100%;
  text-align: right;
  margin: 20px 0;
}
.reset-button-one{
  display: inline-block;
  /* position: absolute;
   top:20px;
   right:0;*/
}
.succeed_color{
  color: #29B24D;
}
.fail_color{
  color: #FF5151;
}
</style>