ConfigForms.vue

<template>
  <div
    id="publicContent"
    :class="activeName == 'index0' && formClass ? formClass : ''"
  >
    <div v-if="formTabs && formTabs.length > 0">
      <el-button
        v-if="!disabled"
        class="draftButton"
        @click="onSubmit(formType)"
        :loading="loading"
        >{{ formType == 1 ? "临时保存" : "返回" }}</el-button
      >
      <el-tabs
        v-model="activeName"
        type="card"
        :style="{ width: formType == 1 ? '100%' : 'calc(100% - 200px)' }"
        class="publicTab"
        v-loading="fromLoading"
        @tab-click="handleTabClick"
      >
        <el-tab-pane
          :label="form.label"
          :name="'index' + index"
          v-for="(form, index) in formTabs"
          :key="form.id"
        >
          <transition mode="out-in" name="fade-transform">
            <div v-show="activeName === 'index' + index">
              <template v-if="form.formId">
                <form-tab
                  :patient-id="patientId"
                  :patient-standby-id="patientStandbyId"
                  :form="form"
                  :disabled="disabled"
                  contrast
                  @setFormJson="setFormJson"
                  @handleConfirm="handleConfirm"
                  @onPrev="onPrev"
                  :formInitial="formInitial"
                  :survivalFlag="survivalFlag"
                ></form-tab>
              </template>
            </div>
          </transition>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-empty v-else description="暂无数据"></el-empty>
    <public-dialog
      ref="showDialog"
      @onSubmit="dialogSubmit"
      @onCancel="dialogCancel"
    >
      <!-- 保存草稿 -->
      <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"
            @click="view"
            class="textBtn"
            >查看</el-button
          >
          <el-button 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"

export default {
  components: { publicDialog },
  name: "ConfigForms",
  mixins: [mixin],
  props: {
    disabled: Boolean,
    formType: String,
    patientId: String,
    formClass: String,
    prods: String,
  },
  data() {
    return {
      // showIndex:false,
      // survivalFlag:false
      dialogType: "",
      loading: false,
      formInitial: {}, // 第四步的数据
    }
  },
  methods: {
    view() {},
    handleConfirm(data, done, cb) {
      this.addPatient(data, done, cb)
    },
    onPrev(done) {
      this.prevTab(done)
    },
    onSubmit(type) {
      this.loading = true
      if (type == 1) {
        // 临时保存草稿
        this.dialogType = "draft"
        this.$refs.showDialog.dialogVisible = true

        this.loading = false
      } else {
        // 返回
        this.$router.back()
      }
    },
    dialogSubmit() {},
    dialogCancel() {},
    continueSubmit() {},
  },
  created() {
    // 字典formType 1 筛查表单
    // console.log('回显2',this.formEdit)
    this.getCurrentFormByType(this.formType)
  },
  watch: {
    activeName(val) {
      if (val == "index3") {
        // 第四步风险评估
        this.$nextTick(() => {
          //!
          // this.formInitial = {
          //   risk_rank: "中危",
          //   risk_score: "5分",
          //   screening_advise: "立刻住院",
          // }
        })
      } else {
        this.formInitial = false
      }
    },
  },
  computed: {
    survivalFlag() {
      if (this.activeName == "index0" && this.formClass) {
        return true
      } else {
        return false
      }
    },
    showIndex() {
      if (this.activeName == "index0" && this.formClass) {
        return false
      } else {
        return true
      }
    },
  },
  provide() {
    return {
      configForms: this,
    }
  },
}
</script>

<style lang="scss" scoped>
#publicContent {
  padding: 32px 24px;
  position: relative;
  .draftButton {
    position: absolute;
    top: 46px;
    right: 40px;
    z-index: 999;
    border-radius: 4px;
    border: 1px solid #4e68ff;
    color: #4e68ff;
  }
  .content {
    img {
      width: 248px;
      height: 180px;
    }
  }
}
::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-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 {
        .el-form-item__label {
          text-align: left;
          background: #fafafa;
          font-size: 14px;
          color: #333333;
          border-right: 1px solid #cccccc;
          // width: 100px !important;
          white-space: nowrap;
          padding: 18px 10px;
          margin-right: 20px;
          text-align: center;
        }
      }
      .el-form-item {
        padding: 0px;
      }
    }
  }
}
.textBtn {
  width: 100px;
  height: 32px;
  background: #ffffff;
  border: 1px solid #4e68ff;
  color: #4e68ff;
}
</style>