ConfigForms.vue

<template>
  <div
    id="publicContent"
    :class="[
      activeName == 'index0' && formClass ? formClass : '',
      $route.path === '/screening/draft'
        ? 'p_padding'
        : $route.path === '/screening/add'
        ? 'add_padding'
        : '',
    ]"
  >
    <div
      v-if="formTabs && formTabs.length > 0"
      style="position: relative; display: flex"
    >
      <el-button
        v-if="isDialogEdit"
        class="draftButton"
        @click="$emit('changeShow')"
      >
        关闭</el-button
      >
      <el-button
        v-else-if="formType == 1 ? (!disabled ? true : false) : true"
        class="draftButton"
        :loading="loading"
        :disabled="formType == 1 ? !infoCompelete : false"
        @click="onSubmit(formType)"
        >{{ formType == 1 ? "临时保存" : "返回" }}</el-button
      >
      <el-tabs
        v-model="activeName"
        v-loading="fromLoading"
        type="card"
        :style="{
          width: formType == 1 || !contrast ? '100%' : 'calc(100% - 200px)',
        }"
        class="publicTab"
        @tab-click="handleTabClick"
      >
        <el-tab-pane
          v-for="(form, index) in formTabs"
          :key="form.id"
          :label="form.label"
          :name="'index' + index"
          :disabled="tabDisabled"
        >
          <!-- disabled -->
          <transition mode="out-in" name="fade-transform">
            <div v-show="activeName === 'index' + index">
              <template v-if="form.formId">
                <form-tab
                  ref="formTabs"
                  :patient-id="patientId"
                  :patient-standby-id="patientStandbyId"
                  :newform-record-id="newformRecordId"
                  :form="form"
                  :form-type="formType"
                  :get-data="getData"
                  :disabled="disabled"
                  :operation="operation"
                  :is-draft="isDraft"
                  :active-name="activeName"
                  :contrast="contrast"
                  :form-initial="formInitial"
                  :survival-flag="survivalFlag"
                  :follow-id="followId"
                  @setFormJson="setFormJson"
                  @handleConfirm="handleConfirm"
                  @onPrev="onPrev"
                  @temporaryConfirm="temporaryConfirm"
                ></form-tab>
              </template>
            </div>
          </transition>
        </el-tab-pane>
      </el-tabs>
      <!-- <div
        class="bottom_line"
        :style="{ width: contrast ? 'calc(100% - 200px)' : '100%' }"
      ></div> -->
      <el-aside v-if="contrast" :width="'220px'">
        <div class="side-content">
          <ul class="list">
            <li v-for="(item, index) in screenList" :key="index">
              <div class="time">{{ item.create_time }}</div>
              <div class="time">{{ item.create_user_name }}</div>
              <div class="time">{{ item.title }}</div>
            </li>
          </ul>
        </div>
      </el-aside>
    </div>
    <el-empty v-else description="暂无数据"></el-empty>
    <!-- 筛查提交弹窗 -->
    <public-dialog ref="showDialog" :show-close="true">
      <!-- 保存草稿 -->
      <template v-if="dialogType == 'draft'" slot="content">
        <div class="title center">已保存至草稿箱！</div>
        <div class="content center">
          <div class="img">
            <img src="~@/assets/img/DataCenter/draft.png" alt />
          </div>
          <div class="showTips">您可以在【草稿箱】页面找到该数据</div>
        </div>
        <div class="btn">
          <el-button type="primary" :loading="loading" @click="continueSubmit"
            >继续添加</el-button
          >
        </div>
      </template>
      <!-- 保存提交 -->
      <template v-if="dialogType == 'submit'" slot="content">
        <div class="title center">提交成功！</div>
        <div class="content center">
          <div class="img">
            <img src="~@/assets/img/DataCenter/submit.png" alt />
          </div>
          <div class="showTips">您可以在【筛查查询】页面查询到该数据</div>
        </div>
        <div class="btn">
          <el-button
            type="primary"
            :loading="loading"
            class="textBtn"
            @click="viewJump"
            >查看</el-button
          >
          <el-button type="primary" :loading="loading" @click="continueSubmit"
            >继续添加</el-button
          >
        </div>
      </template>
    </public-dialog>
    <!-- 随访提交弹窗 -->
    <public-dialog ref="followDialog" :show-close="true">
      <!-- 保存提交 -->
      <template slot="content">
        <div class="title center">提交成功！</div>
        <div class="content center">
          <div class="img">
            <img src="~@/assets/img/DataCenter/submit.png" alt />
          </div>
          <div class="showTips">您可以在【随访查询】页面查询到该数据</div>
        </div>
        <div class="btn">
          <el-button
            type="primary"
            :loading="loading"
            class="textBtn"
            @click="viewJumpFollow"
            >查看</el-button
          >
          <el-button
            v-if="formType != 2"
            type="primary"
            :loading="loading"
            @click="continueSubmit"
            >继续添加</el-button
          >
        </div>
      </template>
    </public-dialog>
  </div>
</template>

<script>
import mixin from "./mixin"
import CustomForm from "@/components/FormComponents/CustomForm/index"
import publicDialog from "../../audit-detail/components/publicDialog.vue"
import { getPatientDetail, getFollowDetail } from "@/api/patient.js"
import { getMedicalunionList } from "@/api/medicalunion-management"

export default {
  name: "ConfigForms",
  components: { publicDialog },
  mixins: [mixin],
  props: {
    isDialogEdit: Boolean,
    disabled: Boolean,
    screenList: Array,
    tabDisabled: { type: Boolean, default: true },
    formType: String,
    patientId: String,
    formClass: String,
    operation: String,
    isDraft: String,
    getData: { type: Boolean, default: true },
    contrast: { type: Boolean, default: false },
  },
  inject: {
    tabFollowId: {
      type: String,
      default: () => {},
    },
  },
  data() {
    return {
      // showIndex:false,
      // survivalFlag:false
      dialogType: "",
      loading: false,
      infoCompelete: false,
      formInitial: {}, // 第四步的数据
    }
  },
  computed: {
    getTabFollowId() {
      if (this.tabFollowId) {
        return this.tabFollowId()
      } else {
        return ""
      }
    },
    survivalFlag() {
      if (this.activeName == "index0" && this.formClass) {
        return true
      } else {
        return false
      }
    },
    showIndex() {
      if (this.activeName == "index0" && this.formClass) {
        return false
      } else {
        return true
      }
    },
  },
  watch: {
    activeName(val) {
      if (!this.disabled) {
        if (this.$route.path != "/followupentry") {
          if (!["index0", "index1"].includes(val)) {
            this.infoCompelete = true
          } else {
            this.infoCompelete = false
          }
        }
      }
      if (val == "index1") {
        // 第二步问卷调查
        this.$nextTick(() => {
          let index1Data = sessionStorage.getItem("index1Data")
          if (index1Data) {
            let { birthday, sex, survey_time } = JSON.parse(index1Data)
            let date = new Date(String(birthday).replace(/-/g, "/"))
            let d = new Date(survey_time.replace(/-/g, "/"))
            let age =
              d.getFullYear() -
              date.getFullYear() -
              (d.getMonth() < date.getMonth() ||
              (d.getMonth() == date.getMonth() && d.getDate() < date.getDate())
                ? 1
                : 0)
            //!
            this.formInitial = {
              birthday,
              age,
              sex,
              survey_time,
            }
          }
        })
      } else {
        this.formInitial = false
      }

      if (val == "index3") {
        // 第四步风险评估
        this.$nextTick(() => {
          if (this.formType == 2) {
            // 随访回显
            getFollowDetail({
              formId: this.formId, // 每个大表单的id
              followId: this.followId || this.getTabFollowId,
              // formRecordId: this.newformRecordId,
            })
              .then((res) => {
                const data = res.data.data
                this.formInitial = data
              })
              .finally(() => {
                this.loading = false
              })
          } else {
            // 筛查回显
            getPatientDetail({
              formId: this.formId, // 每个大表单的id
              patientId: this.patientId || this.patientStandbyId,
              // formRecordId: this.newformRecordId,
            })
              .then((res) => {
                const data = res.data.data
                this.formInitial = data
              })
              .finally(() => {
                this.loading = false
              })
          }
        })
      }
    },
  },
  created() {
    // 字典formType 1 筛查表单 2随访表单
    // console.log('回显2',this.formEdit)
    this.getMedicalunionList()
    this.getCurrentFormByType(this.formType)
    this.infoCompelete = this.$route.path == "/followupentry" ? true : false
  },
  methods: {
    // 获取医联体列表
    getMedicalunionList() {
      getMedicalunionList().then((res) => {
        if (res.code == 1) {
          let unionList = [...res.data]
          sessionStorage.setItem("unionList", JSON.stringify(unionList))
        } else {
          sessionStorage.removeItem("unionList")
        }
      })
    },
    handleConfirm(data, done, cb) {
      if (this.formType == "2") {
        this.addFollowPatient(data, done, cb)
      } else {
        this.addPatient(data, done, cb)
        this.$emit("addMethods", {
          activeName: this.activeName,
          form: data.data,
        })
      }
    },
    temporaryConfirm(data, done, cb) {
      this.addPatient(data, done, cb, () => {
        this.$refs.showDialog.dialogVisible = true
        this.loading = false
        sessionStorage.removeItem("birthday")
        sessionStorage.removeItem("addSex")
        sessionStorage.removeItem("survey_time")
        this.$store.commit("table/setAge", "")
      })
    },
    onPrev(done) {
      this.prevTab(done)
    },
    onSubmit(type) {
      // this.loading = true
      if (type == 1) {
        // 临时保存草稿
        this.dialogType = "draft"
        // 保存逻辑处理
        // !获取当前tab的formTab
        let formTab = this.$refs.formTabs.filter(
          (e) => e.form.formId == this.formId
        )[0]
        formTab.temporarySave()
        // console.log(formTab)
      } else if (type == 3) {
        // 筛查提交
        this.dialogType = "submit"
        if (this.isDialogEdit || this.$route.query.model === "edit") {
          // 审核质控弹窗修改提交关闭/随访修改
          this.$emit("changeShow", true)
        } else if (this.formType == 2) {
          this.$refs.followDialog.dialogVisible = true
        } else {
          this.$refs.showDialog.dialogVisible = true
        }

        this.loading = false
      } else {
        // 返回
        // this.$router.back()
        this.$emit("changeShow", this.isUpdated)
      }
    },
    continueSubmit() {
      sessionStorage.removeItem("index1Data")
      sessionStorage.removeItem("birthday")
      sessionStorage.removeItem("addSex")
      sessionStorage.removeItem("survey_time")
      this.$store.commit("table/setAge", "")
      this.activeName = "index0"
      // 清空表单
      // for (let i = 0; i < this.$refs.formTabs.length; i++) {
      //   this.$refs.formTabs[i].resetForm()
      //   this.$refs.formTabs[i].initForm()
      // }
      this.formTabsList = []
      this.formTabs = []
      this.patientStandbyId = ""
      this.getCurrentFormByType(this.formType)
      // 清空红字：不符合筛查条件
      this.$refs.showDialog.dialogVisible = false
      if (this.$route.path != "/screening/add") {
        this.$router.push("/screening/add")
      }
    },
    // 去查看跳转
    viewJump() {
      if (this.$route.path == "/screening/index") {
        this.$store.commit("table/setRefreshFlag", 1)
      } else {
        this.$router.push({
          path: "/screening/index",
          query: {
            patientId: this.patientId || this.patientStandbyId,
          },
        })
      }
      this.$refs.showDialog.dialogVisible = false
      // alert("跳转")
    },
    viewJumpFollow() {
      // this.activeName = "index0"
      this.$router.push({
        path: "/followupquery",
        query: {
          patientId: this.patientId,
          followId: this.followId || this.getTabFollowId,
          followBatch: 1,
        },
      })
      this.$refs.followDialog.dialogVisible = false
      // this.$emit(
      //   "refreshData",
      //   JSON.stringify({
      //     patientId: this.patientId,
      //     followId: this.followId || this.tabFollowId,
      //     model: "view",
      //     getData: 1,
      //   })
      // )
    },
  },
  provide() {
    return {
      configForms: this,
    }
  },
}
</script>

<style lang="scss" scoped>
.el-aside {
  padding: 88px 0 10px;
  border-left: 0px;
  .side-content {
    width: 100%;
    height: calc(100vh - 300px);
    overflow: overlay;
    border-left: 1px solid #ccc;
    border-right: 0;
    border-radius: 4px;
    .list {
      width: 93%;
      border-right: 1px solid #ccc;
      border-top: 1px solid #ccc;
      li {
        padding: 20px 30px;
        border-bottom: 1px solid #ccc;
        cursor: pointer;
        .time {
          font-size: 14px;
          margin-bottom: 8px;
          font-family: AlibabaPuHuiTiR;
          text-align: left;
          &:first-child {
            color: #4e68ff;
          }
        }
      }
    }
  }
}
#publicContent {
  position: relative;
  padding: 10px 24px 0px;
  .draftButton {
    position: absolute;
    top: 12px;
    right: 40px;
    z-index: 999;
    border-radius: 4px;
    border: 1px solid #4e68ff;
    color: #4e68ff;
  }
  .content {
    img {
      width: 248px;
      height: 180px;
    }
  }
}
#publicContent.p_padding {
  padding: 10px 24px 0px;
}
#publicContent.add_padding {
  padding: 20px 24px 0px;
}
::v-deep .el-dialog__body {
  .title {
    font-size: 22px;
    font-family: AlibabaPuHuiTiM;
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 20px;
  }
  .showTips {
    font-size: 16px;
    font-family: AlibabaPuHuiTiR;
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 20px;
  }
  .btn {
    .el-button {
      width: 100px;
      height: 32px;
    }
  }
}
.publicTab {
  // width: calc(100%);
  margin-top: 10px;
}
::v-deep {
  .el-button.is-disabled {
    color: #c0c4cc !important;
    cursor: not-allowed;
    background-image: none;
    background-color: #fff;
    border-color: #ebeef5 !important;
  }
  .el-tabs__item.is-disabled {
    color: #252c49;
  }
  .el-tabs--card > .el-tabs__header {
    width: calc(100% - 100px);
    border-bottom: none;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: none;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item {
    min-width: 116px;
    text-align: center;
    background: #f0f1fa;
    font-size: 14px;
    border: none;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    background: #4e68ff;
    color: #fff;
  }
}
.my-form {
  overflow-x: scroll;
}
.follow-form {
  .publicTab {
    margin-bottom: 10px;
    ::v-deep {
      .el-collapse-item__header {
        border-width: 1px 0px 0px;
      }
      .row24 {
        border-top: 1px solid #cccccc;
      }
      .custom-form-item {
        border-width: 1px 0px 0px;
      }
      .el-collapse-item {
        margin-bottom: 20px;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid #cccccc;
      }
      .el-collapse-item__wrap {
        border: none;
        .el-collapse {
          margin: 10px 10px 20px;
        }
      }
      // .row24.el-col-lg-12:nth-child(2n) {
      //   border-width: 0px 0px 0px 1px;
      // }
      .el-form-item {
        height: 100%;
        padding: 0px;
        .el-form-item__label {
          min-width: 120px;
          height: 100%;
          text-align: left;
          background: #fafafa;
          font-size: 14px;
          color: #333333;
          border-right: 1px solid #cccccc;
          // width: 100px !important;
          white-space: wrap;
          padding: 18px 10px;
          margin-right: 20px;
          // text-align: center;
          display: flex;
          align-items: center;
          // justify-content: center;
        }
      }
    }
  }
  //只读表单
  ::v-deep {
    .read-input,
    .read-time {
      .el-input__inner {
        border: none;
        padding: 0px 30px 0px 15px;
        cursor: text;
      }
      .el-input.is-disabled .el-input__icon,
      .el-input__prefix {
        display: none;
      }
      .el-input__icon {
      }
    }
    .read-radio {
      cursor: text;
      .is-checked {
        display: none;
      }
      .el-radio__input.is-checked + .el-radio__label {
        color: #606266;
      }
      .el-radio__label {
        padding-left: 15px;
      }
    }
  }
}
.textBtn {
  width: 100px;
  height: 32px;
  background: #ffffff;
  border: 1px solid #4e68ff;
  color: #4e68ff;
}
// .bottom_line {
//   // width: 100%;
//   position: absolute;
//   bottom: 0px;
//   height: 3px;
//   box-shadow: 0px 3px 4px rgb(0 21 41 / 8%);
// }
</style>