hir_web/src/views/trials/trials-inspection/components/research-trials-list.vue

<template>
  <el-dialog
    :visible.sync="visible"
    :close-on-click-modal="false"
    :fullscreen="true"
    custom-class="upload-dialog"
    :before-close="beforeCloseStudyDig"
  >
    <div class="top">
      <p>
        <span
          >{{ $t("trials:uploadDicomList:table:patientInfo") }}（{{
            Patient.PatientIdStr
          }}，{{ Patient.PatientName }}）</span
        >|<span>
          {{
            $t("trials:inspection:research-trials-list:table:joinTrialsNumber")
          }}（{{ total }}）</span
        >
      </p>
      <!-- <el-button type="primary" @click="addTrials">
        {{ $t("trials:inspection:button:addTrials") }}
      </el-button> -->
    </div>
    <!--参与项目列表-->
    <el-table
      ref="researchTrialsList"
      v-loading="loading"
      v-adaptive="{ bottomOffset: 60 }"
      :data="list"
      stripe
      height="100"
    >
      <el-table-column type="index" width="40" />
      <!--研究方案号-->
      <el-table-column
        prop="ResearchProgramNo"
        :label="$t('trials:trials-list:table:researchNumber')"
        show-overflow-tooltip
        min-width="140"
      ></el-table-column>
      <!--试验名称-->
      <el-table-column
        prop="ExperimentName"
        :label="$t('trials:trials-list:table:experimentName')"
        show-overflow-tooltip
        min-width="140"
      ></el-table-column>
      <!--受试者编号-->
      <el-table-column
        prop="Code"
        :label="$t('trials:uploadMonitor:table:subjectId')"
        show-overflow-tooltip
        min-width="140"
      ></el-table-column>
      <!--姓名-->
      <el-table-column
        prop="ShortName"
        :label="$t('trials:researchStaff:table:Name')"
        show-overflow-tooltip
        min-width="140"
      ></el-table-column>
      <!--年龄-->
      <el-table-column
        prop="Age"
        :label="$t('trials:subject:table:age')"
        show-overflow-tooltip
        min-width="140"
      ></el-table-column>
      <!--性别-->
      <el-table-column
        prop="Sex"
        :label="$t('trials:subject:table:gender')"
        show-overflow-tooltip
        min-width="140"
      >
        <template slot-scope="scope">
          <span>{{ $fd("sex", Number(scope.row.Sex)) }}</span>
        </template>
      </el-table-column>
      <!--申办方-->
      <el-table-column
        prop="Sponsor"
        :label="$t('trials:trials-list:table:sponsor')"
        show-overflow-tooltip
        min-width="140"
      ></el-table-column>
      <!--状态-->
      <el-table-column
        prop="TrialStatusStr"
        :label="$t('trials:trials-list:table:status')"
        show-overflow-tooltip
        min-width="140"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.TrialStatusStr === 'Initializing'"
            type="info"
            >{{ $fd("TrialStatusEnum", scope.row.TrialStatusStr) }}</el-tag
          >
          <el-tag
            v-if="scope.row.TrialStatusStr === 'Ongoing'"
            type="primary"
            >{{ $fd("TrialStatusEnum", scope.row.TrialStatusStr) }}</el-tag
          >
          <el-tag
            v-if="scope.row.TrialStatusStr === 'Completed'"
            type="warning"
            >{{ $fd("TrialStatusEnum", scope.row.TrialStatusStr) }}</el-tag
          >
          <el-tag v-if="scope.row.TrialStatusStr === 'Stopped'" type="danger">{{
            $fd("TrialStatusEnum", scope.row.TrialStatusStr)
          }}</el-tag>
        </template></el-table-column
      >
      <!--创建日期-->
      <el-table-column
        prop="CreateTime"
        :label="$t('trials:trials-list:table:createDate')"
        show-overflow-tooltip
        min-width="140"
      ></el-table-column>
      <!--操作-->
      <el-table-column :label="$t('common:action:action')" width="250">
        <template slot-scope="scope">
          <!-- 详情 -->
          <el-button type="text" @click.stop="detail(scope.row)">{{
            $t("trials:trials-list:action:panel")
          }}</el-button>
          <!-- 移除项目 -->
          <el-button type="text" @click.stop="remove(scope.row)">{{
            $t("common:button:remove")
          }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <!-- <pagination
      class="page"
      :total="total"
      :page.sync="searchData.PageIndex"
      :limit.sync="searchData.PageSize"
      @pagination="getList"
    /> -->
  </el-dialog>
</template>
<script>
import Pagination from "@/components/Pagination";
import {
  getPatientJoinedTrialList,
  deleteSubjectPatientBinding,
} from "@/api/inspection.js";
export default {
  name: "researchTrialsList",
  components: { Pagination },
  props: {
    visible: {
      required: true,
      default: false,
    },
    Patient: {
      required: true,
      default: () => {
        return {};
      },
    },
  },
  created() {
    this.getList();
  },
  data() {
    return {
      // 参与项目列表
      total: 0,
      loading: false,
      list: [],
    };
  },
  methods: {
    // 关闭弹框
    beforeCloseStudyDig() {
      this.$emit("update:visible", false);
    },
    // 加入项目
    addTrials() {
      this.$emit("update:visible", false);
      this.$emit("handleOpenDialog", this.Patient, "add");
    },
    // 获取列表
    async getList() {
      let data = {
        PatientId: this.Patient.PatientId,
      };
      try {
        this.loading = true;
        let res = await getPatientJoinedTrialList(data);
        this.loading = false;
        if (res.IsSuccess) {
          this.list = res.Result;
          this.total = this.list.length;
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 详情
    detail(item) {
      this.$emit("update:visible", false);
      let query = {
        trialId: item.TrialId,
        trialCode: item.Code,
        researchProgramNo: item.ResearchProgramNo,
      };
      this.$router.push({
        path: "/trials/trials-panel/subject/subject-list",
        query,
      });
    },
    // 移除项目
    async remove(item) {
      try {
        let confirm = await this.$confirm(
          this.$t("trials:sitesList:message:removeSite"),
          {
            type: "warning",
            distinguishCancelAndClose: true,
            confirmButtonText: this.$t("common:button:confirm"),
            cancelButtonText: this.$t("recompose:button:cancel"),
          }
        );
        if (confirm !== "confirm") return;
        let params = {
          PatientId: this.Patient.PatientId,
          SubjectId: item.SubjectId,
        };
        this.loading = true;
        let res = await deleteSubjectPatientBinding(params);
        this.loading = false;
        if (res.IsSuccess) {
          this.getList();
          this.$message.success(this.$t("common:message:removedSuccessfully"));
          this.$emit("getList");
        }
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.top {
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>