irc_web/src/components/uploadImage/index.vue

<template>
  <el-dialog
    :visible.sync="visible"
    :fullscreen="true"
    :close-on-click-modal="false"
    custom-class="upload-dialog"
    :before-close="beforeClose"
  >
    <span slot="title">{{ title }}</span>
    <el-divider content-position="left">{{
      $t("trials:uploadImage:button:uploadTableTitle1")
    }}</el-divider>
    <!--已上传影像检查-->
    <el-table
      :data="list"
      style="width: 100%"
      height="300"
      v-adaptive="{ bottomOffset: 50, notAdaptive: isUpload }"
      :loading="loading"
    >
      <!--受试者-->
      <el-table-column
        prop="SubjectCode"
        :label="$t('trials:uploadImage:table:subjectCode')"
      />
      <!--任务名称-->
      <el-table-column
        prop="TaskBlindName"
        :label="$t('trials:uploadImage:table:taskBlindName')"
      />
      <!--原始检查数-->
      <el-table-column
        prop="OrginalStudyList"
        :label="$t('trials:uploadImage:table:orginalStudyListNum')"
      >
        <template slot-scope="scope">
          <el-button
            v-if="
              scope.row.OrginalStudyList &&
              scope.row.OrginalStudyList.length >= 1
            "
            type="text"
            @click="handleOpenDialog(scope.row, 'OrginalStudyList')"
          >
            <span>{{ scope.row.OrginalStudyList.length }}</span>
          </el-button>
          <span v-else>0</span>
        </template>
      </el-table-column>
      <!--后处理检查数-->
      <el-table-column
        prop="UploadStudyList"
        :label="$t('trials:uploadImage:table:uploadStudyListNum')"
      >
        <template slot-scope="scope">{{
          scope.row.UploadStudyList && Array.isArray(scope.row.UploadStudyList)
            ? scope.row.UploadStudyList.length
            : 0
        }}</template>
      </el-table-column>
      <el-table-column
        :label="$t('common:action:action')"
        fixed="right"
        width="140"
      >
        <template slot-scope="scope">
          <!--下载--->
          <el-button
            v-if="!isUpload && Criterion.ImageDownloadEnum > 0"
            circle
            icon="el-icon-download"
            :title="$t('trials:uploadImage:button:download')"
            @click.stop="downloadImage(scope.row)"
          />
          <!--删除--->
          <el-button
            v-if="isUpload"
            circle
            icon="el-icon-delete"
            :title="$t('trials:uploadImage:button:delete')"
            @click.stop="remove(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <upload-list
      v-if="Criterion.ImageUploadEnum > 0 && isUpload"
      :StudyInstanceUidList="StudyInstanceUidList"
      :SopInstanceUidList="SopInstanceUidList"
      :UploadStudyList="UploadStudyList"
      @getList="getList"
    />
    <study-view
      v-if="model_cfg.visible"
      :model_cfg="model_cfg"
      :modelList="modelList"
    />
  </el-dialog>
</template>
<script>
import uploadList from "./components/upload-list.vue";
import studyView from "./components/study-view.vue";
import { getSubjectImageUploadList, deleteTaskStudy } from "@/api/load.js";
import { downloadImage } from "@/utils/uploadZip.js";
export default {
  name: "uploadImage",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    SubjectId: {
      type: String,
      default: "",
    },
    Criterion: {
      type: Object,
      default: () => {
        return {};
      },
    },
    status: {
      type: String,
      default: "upload",
    },
  },
  components: {
    "upload-list": uploadList,
    "study-view": studyView,
  },
  data() {
    return {
      list: [],
      StudyInstanceUidList: [],
      SopInstanceUidList: [],
      UploadStudyList: [],

      // 检查数弹框
      model_cfg: {
        visible: false,
        showClose: true,
        width: "1000px",
        title: "",
        appendToBody: true,
      },
      modelList: [],
    };
  },
  computed: {
    title() {
      let str = this.$t("trials:uploadImage:title:uploadImages");
      if (this.status === "download") {
        str = this.$t("trials:uploadImage:title:uploadImagesDownLoad");
      }
      return str;
    },
    isUpload() {
      return this.status === "upload";
    },
  },
  created() {
    this.getList();
  },
  methods: {
    beforeClose() {
      this.$emit("update:visible", false);
    },
    notUp() {
      this.$confirm(this.$t("trials:uploadImage:confirmMessage:notUp"), {
        type: "warning",
        distinguishCancelAndClose: true,
        confirmButtonText: this.$t("common:button:confirm"),
        cancelButtonText: this.$t("common:button:cancel"),
      });
    },
    // 获取列表
    async getList() {
      try {
        let params = {
          SubjectId: this.SubjectId,
        };
        this.loading = true;
        let res = await getSubjectImageUploadList(params);
        this.loading = false;
        if (res.IsSuccess) {
          this.StudyInstanceUidList = [];
          this.SopInstanceUidList = [];
          this.UploadStudyList = [];
          this.list = res.Result;
          res.Result.forEach((item) => {
            if (item.OrginalStudyList && Array.isArray(item.OrginalStudyList)) {
              item.OrginalStudyList.forEach((data) => {
                data.SubjectId = item.SubejctId;
                data.VisitTaskId = item.VisitTaskId;
                data.SourceSubjectVisitId = item.SourceSubjectVisitId;
                this.StudyInstanceUidList.push(data);
              });
            }
            if (item.UploadStudyList && Array.isArray(item.UploadStudyList)) {
              item.UploadStudyList.forEach((data) => {
                data.SopInstanceUidList &&
                  this.SopInstanceUidList.push(...data.SopInstanceUidList);
                this.UploadStudyList.push(data);
              });
            }
          });
        }
      } catch (err) {
        console.log(err);
        this.loading = false;
      }
    },
    // 删除
    async remove(item) {
      try {
        let confirm = await this.$confirm(
          this.$t("trials:uploadImage:confirm:delMessage"),
          {
            type: "warning",
            distinguishCancelAndClose: true,
            confirmButtonText: this.$t("common:button:confirm"),
            cancelButtonText: this.$t("common:button:cancel"),
          }
        );
        if (confirm !== "confirm") return;
        let params = {
          VisitTaskId: item.VisitTaskId,
        };
        let res = await deleteTaskStudy(params);
        if (res.IsSuccess) {
          this.getList();
          this.$message.success(
            this.$t("trials:uploadImage:message:delSuccess")
          );
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 打开弹窗
    handleOpenDialog(item, list) {
      this.model_cfg.title = `${item.SubejctCode || ""}>${item.TaskBlindName}`;
      this.modelList = item[list];
      this.model_cfg.visible = true;
    },
    // 打包下载
    async downloadImage(item) {
      try {
        await downloadImage(
          this.$route.query.trialId,
          item.SourceSubjectVisitId
        );
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
  .el-dialog__header {
    padding-top: 15px;
  }
}
</style>