hir_web/src/views/trials/trials-list/components/activate-page.vue

<template>
  <el-form
    ref="activateProjectForm"
    :model="form"
    size="small"
    label-width="120px"
    style="width: 500px; padding: 30px 0 0 30px"
  >
    <div class="base-dialog-body">
      <p>授权申请信息</p>
      <!-- 购买时长 -->
      <el-form-item label="项目码">
        <el-input v-model="data.AuthorizationCode" />
        <input
          type="file"
          id="uploadFile"
          ref="uploadFile"
          @change="fileChange"
          style="display: none"
        />
        <label for="uploadFile" class="copy">上传</label>
      </el-form-item>
      <!-- 单位名称 -->
      <el-form-item :label="$t('trials:trials-list:activate:organizationName')">
        <span>{{ data.HospitalName }}</span>
      </el-form-item>
      <!-- 项目编号 -->
      <el-form-item :label="$t('trials:trials-list:table:trialId')">
        <span>{{ data.TrialCode }}</span>
      </el-form-item>
      <!-- 评估标准 -->
      <el-form-item
        :label="$t('trials:trials-list:activate:evaluationCriteria')"
      >
        <span
          >{{
            data.CriterionTypeList.map((item) =>
              $fd("CriterionType", Number(item))
            ).join(",")
          }}
        </span>
      </el-form-item>
      <!-- 购买时长 -->
      <el-form-item :label="$t('trials:trials-list:activate:purchaseDuration')">
        <span>{{ data.PurchaseDuration }}</span>
      </el-form-item>
      <p>生成激活码信息</p>
      <!-- 单位名称 -->
      <el-form-item :label="$t('trials:trials-list:activate:organizationName')">
        <span>{{ data.HospitalName }}</span>
      </el-form-item>
      <!-- 项目编号 -->
      <el-form-item :label="$t('trials:trials-list:table:trialId')">
        <span>{{ data.TrialCode }}</span>
      </el-form-item>
      <!-- 评估标准 -->
      <el-form-item
        :label="$t('trials:trials-list:activate:evaluationCriteria')"
      >
        <span
          >{{
            data.CriterionTypeList.map((item) =>
              $fd("CriterionType", Number(item))
            ).join(",")
          }}
        </span>
      </el-form-item>
      <!-- 授权时长 -->
      <el-form-item label="授权时长" prop="Activate">
        <el-input-number
          v-model="form.PurchaseDuration"
          :min="0"
          :max="100"
        ></el-input-number>
      </el-form-item>
      <!-- 激活码 -->
      <el-form-item label="激活码">
        <span>{{ form.code }}</span>
      </el-form-item>
    </div>
    <div class="base-dialog-footer" style="text-align: right; margin-top: 10px">
      <el-form-item>
        <!-- 取消 -->
        <el-button
          size="small"
          type="primary"
          @click.stop="getTrialActivationCode"
        >
          生成
        </el-button>
        <!-- 保存 -->
        <el-button size="small" type="primary" @click.stop="copy">
          复制
        </el-button>
        <el-button size="small" type="primary" @click.stop="downloadXmlFile">
          下载
        </el-button>
      </el-form-item>
    </div>
  </el-form>
</template>
<script>
import { fileDownload } from "@/utils/uploadZip.js";
import {
  getAuthorizationCodeInfo,
  getTrialActivationCode,
} from "@/api/trials.js";
export default {
  name: "activatePage",
  data() {
    return {
      form: {
        code: null,
        PurchaseDuration: 0,
      },
      data: {
        AuthorizationCode: null,
        AuthorizationDeadLineDate: null,
        CreateUserId: null,
        CriterionTypeList: [],
        HospitalName: null,
        PurchaseDuration: null,
        TrialCode: null,
        TrialId: null,
      },
    };
  },
  watch: {
    "data.AuthorizationCode": {
      handler() {
        if (!this.data.AuthorizationCode) return;
        this.getAuthorizationCodeInfo();
      },
    },
  },
  methods: {
    // 复制
    copy() {
      this.$copyText(this.form.code)
        .then((res) => {
          // 复制成功
          this.$message.success(
            this.$t("trials:researchRecord:message:copySuccessfully")
          );
        })
        .catch(() => {
          // 复制失败
          this.$alert(this.$t("trials:researchRecord:message:copyFailed"));
        });
    },
    // 生成激活码
    async getTrialActivationCode() {
      try {
        let params = {
          TrialId: this.data.TrialId,
          TrialCode: this.data.TrialCode,
          PurchaseDuration: this.form.PurchaseDuration,
          HospitalName: this.data.HospitalName,
          CriterionTypeList: this.data.CriterionTypeList,
          CreateUserId: this.data.CreateUserId,
          AuthorizationDeadLineDate: null,
        };
        let res = await getTrialActivationCode(params);
        if (res.IsSuccess) {
          this.form.code = res.Result;
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 获取项目码信息
    async getAuthorizationCodeInfo() {
      try {
        let params = {
          AuthorizationCode: this.data.AuthorizationCode,
        };
        let res = await getAuthorizationCodeInfo(params);
        if (res.IsSuccess) {
          Object.keys(res.Result).forEach((key) => {
            this.data[key] = res.Result[key];
          });
          this.form.PurchaseDuration = this.data.PurchaseDuration;
        }
      } catch (err) {
        console.log(err);
      }
    },
    fileChange(data) {
      let input = data.target;
      const reader = new FileReader();
      reader.readAsText(input.files[0], "utf8"); // input.files[0]为第一个文件
      reader.onload = () => {
        this.data.AuthorizationCode = reader.result; // reader.result为获取结果
        input.value = null;
      };
    },
    funDownload(content, filename) {
      const eleLink = document.createElement("a");
      eleLink.download = filename;
      eleLink.style.display = "none";
      const blob = new Blob([content]);
      eleLink.href = URL.createObjectURL(blob);
      document.body.appendChild(eleLink);
      eleLink.click();
      document.body.removeChild(eleLink);
    },
    downloadXmlFile() {
      fileDownload(this.form.code, "激活码");
    },
  },
};
</script>
<style lang="scss" scoped>
.copy {
  cursor: pointer;
  color: #409eff;
  margin-left: 20px;
}
.el-form-item__content {
  .el-input {
    width: 60%;
  }
}
</style>