hir_web/src/views/trials/trials-panel/study/components/edit-visit.vue

<template>
  <el-dialog
    :visible.sync="visible"
    :close-on-click-modal="false"
    :title="`${$t('trials:study:button:editVisit')} (${data.SubjectCode} | ${
      data.SubjectShortName
    })`"
    width="500px"
    custom-class="base-dialog-wrapper"
    append-to-body
    :before-close="handleCancel"
  >
    <el-form
      ref="editVisitForm"
      :model="form"
      :rules="rules"
      size="small"
      label-width="100px"
    >
      <div class="base-dialog-body">
        <!--患者姓名-->
        <el-form-item
          :label="$t('trials:uploadDicomList:table:patientName')"
          prop="reason"
        >
          <el-input v-model="data.SubjectShortName" disabled />
        </el-form-item>
        <!--序列数量-->
        <el-form-item
          :label="$t('trials:audit:table:seriesCount')"
          prop="reason"
        >
          <el-input v-model="data.SeriesCount" disabled />
        </el-form-item>
        <!--图像数量-->
        <el-form-item
          :label="$t('trials:audit:table:instanceCount')"
          prop="reason"
        >
          <el-input v-model="data.InstanceCount" disabled />
        </el-form-item>
        <!--检查描述-->
        <el-form-item
          :label="$t('trials:inspection:table:studyDescription')"
          prop="reason"
        >
          <el-input v-model="data.Description" disabled />
        </el-form-item>
        <!--检查日期-->
        <el-form-item :label="$t('trials:audit:table:studyDate')" prop="reason">
          <el-input v-model="data.StudyTime" disabled />
        </el-form-item>
        <!--访视-->
        <el-form-item
          :label="$t('trials:auditRecord:table:visit')"
          prop="SubjectVisitId"
        >
          <!--切换访视-->
          <visitSelect
            :modelData.sync="form.SubjectVisitId"
            :loading="addLoading"
            :studyData="data"
            :list="visitList"
            @add="addVisit"
            @selectChange="selectChange"
          />
          <!-- <el-select v-model="form.SubjectVisitId" clearable>
            <el-option
              v-for="item of visitList"
              :key="item.SubjectVisitId"
              :label="item.VisitName"
              :value="item.SubjectVisitId"
            >
            </el-option>
          </el-select> -->
        </el-form-item>
      </div>
      <div
        class="base-dialog-footer"
        style="text-align: right; margin-top: 10px"
      >
        <el-form-item style="text-align: right">
          <el-button
            size="small"
            type="primary"
            :disabled="btnLoading"
            @click="handleCancel"
          >
            {{ $t("common:button:cancel") }}
          </el-button>
          <el-button
            size="small"
            type="primary"
            :loading="btnLoading"
            @click="handleSave"
          >
            {{ $t("common:button:save") }}
          </el-button>
        </el-form-item>
      </div>
    </el-form>
  </el-dialog>
</template>
<script>
import {
  getSubjectVisitSelectList,
  addOrUpdateSubjectVisit,
} from "@/api/inspection.js";
import { updateSubjectVisitStudyBinding } from "@/api/trials/visit.js";
import visitSelect from "@/components/visitSelect";
export default {
  name: "editVisitDialog",
  components: { visitSelect },
  props: {
    visible: {
      required: true,
      default: false,
    },
    data: {
      required: true,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      form: {
        SubjectVisitId: null,
      },
      rules: {
        SubjectVisitId: [
          {
            required: true,
            message: this.$t("trials:study:formRlue:selectVisit"),
            trigger: "blur",
          },
        ],
      },
      btnLoading: false,
      visitList: [],
      visitRule: {},
      addLoading: false,
    };
  },
  mounted() {
    this.getSubjectVisitSelectList();
    // this.form.SubjectVisitId = this.data.SubjectVisitId;
  },
  methods: {
    // 取消
    handleCancel() {
      this.$emit("update:visible", false);
    },
    // 保存
    async handleSave() {
      try {
        let validate = await this.$refs.editVisitForm.validate();
        if (!validate) return;
        this.confirm();
      } catch (err) {
        console.log(err);
      }
    },
    // 确认
    async confirm() {
      let obj = {
        TrialId: this.data.TrialId,
        SubjectId: this.data.SubjectId,
        SubjectVisitId: this.form.SubjectVisitId,
        ScpStudyId: this.data.StudyId || this.data.SCPStudyId,
        IsAdd: true,
      };
      try {
        this.btnLoading = true;
        let res = await updateSubjectVisitStudyBinding(obj);
        this.btnLoading = false;
        if (res.IsSuccess) {
          this.$message.success(this.$t("common:message:savedSuccessfully"));
          this.$emit("update:visible", false);
          this.$emit("getList");
        }
      } catch (err) {
        this.btnLoading = false;
        console.log(err);
      }
    },
    // 下拉框出现刷新访视
    selectChange(flag, StudyId) {
      if (flag) {
        this.getSubjectVisitSelectList(StudyId);
      }
    },
    // 新增访视
    async addVisit() {
      let data = {
        TrialId: this.data.TrialId,
        SubjectId: this.data.SubjectId,
      };
      data.VisitNum = this.visitList.length;
      data.VisitName =
        this.visitRule.BlindFollowUpPrefix + " " + this.visitList.length;
      try {
        this.addLoading = true;
        let res = await addOrUpdateSubjectVisit(data);
        this.addLoading = false;
        if (res.IsSuccess) {
          this.getSubjectVisitSelectList();
        }
      } catch (err) {
        this.addLoading = false;
        console.log(err);
      }
    },
    // 获取已存在的访视
    async getSubjectVisitSelectList(StudyId = null) {
      let data = {
        TrialId: this.data.TrialId,
        SubjectId: this.data.SubjectId,
      };
      if (StudyId) data.ScpStudyId = StudyId;
      try {
        let res = await getSubjectVisitSelectList(data);
        if (res.IsSuccess) {
          this.visitRule = res.OtherInfo;
          this.visitList = res.Result.map((item) => {
            item.SubjectVisitId = item.Id;
            item.id = item.Id;
            item.label = item.VisitName;
            item.value = item.Id;
            return item;
          });
          this.visitList.sort(
            (a, b) => parseFloat(a.VisitNum) - parseFloat(b.VisitNum)
          );
          this.form.SubjectVisitId = this.data.SubjectVisitId;
        }
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-select {
  width: 100%;
}
</style>