followReview.vue

<template>
  <!-- 随访审核详情 -->
  <div class="follow-form">
    <el-container v-loading="fromLoading">
      <el-aside width="auto">
        <div class="follow-tab">
          <p class="tab-title">筛查病例数据</p>
          <el-tabs
            v-model="activeTab"
            tab-position="right"
            style="height: 200px"
          >
            <el-tab-pane
              v-for="(item, index) in formDataList"
              :key="index"
              :label="'第' + Number(index + 1) + '次随访数据'"
              :name="String(index)"
            ></el-tab-pane>
          </el-tabs>
        </div>
      </el-aside>
      <el-main class="transition-box">
        <el-empty v-if="!isEmpty && noData" description="暂无数据"></el-empty>
        <template v-if="isEmpty && !noData">
          <div ref="my-form" class="my-form">
            <template v-for="(item, index) in jsonList">
              <custom-form
                :key="index"
                ref="customForm"
                class="mb-20"
                :options="item"
                :form-edit="formList"
              ></custom-form
            ></template>
          </div>
        </template>
      </el-main>
      <el-aside width="auto" class="transition-box">
        <div class="follow-list">
          <ul class="list">
            <li v-for="(item, index) in screenList" :key="index">
              <div class="time">{{ item.time }}</div>
              <div class="time">{{ item.code }}</div>
              <div class="time">{{ item.name }}</div>
            </li>
          </ul>
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
// import ConfigForms from "@/views/screening/components/ConfigForms.vue"
import { mapGetters } from "vuex"
import CustomForm from "@/components/FormComponents/CustomForm/index"
// import ReadForm from "@/components/FormComponents/ReadForm/index"
import { getCurrentFormByType } from "@/api/coop-group.js"
import { getFormDetail } from "@/api/field"
export default {
  name: "FollowReview",
  components: {
    // ConfigForms,
    CustomForm,
    // ReadForm,
  },
  provide() {
    return {
      showIndex: true,
    }
  },
  props: {
    tabActive: {
      type: String,
    },
    formDataList: Array,
    noData: Boolean,
  },
  data() {
    return {
      fromLoading: false,
      formTabs: [],
      formTabsList: [],
      jsonList: [],
      formList: {},
      // formEdit:{
      // },
      activeTab: "0",
      screenList: [
        {
          time: "2020-12-12 11:11:11",
          code: "UK102",
          name: "修改第一次随访计划",
        },
      ],
    }
  },
  computed: {
    ...mapGetters({
      group: ["user/group"],
    }),
    isEmpty() {
      return this.jsonList.length
    },
    //当前随访数据
    formEdit: {
      get() {
        return this.formDataList[this.activeTab]
      },
      set() {},
    },
  },
  watch: {
    tabActive(val) {
      this.activeTab = val
    },
  },
  created() {
    this.getCurrentFormByType()
  },
  mounted() {
    this.formEdit = this.formDataList[this.activeTab]
  },
  methods: {
    getCurrentFormByType(type = 2) {
      this.fromLoading = true
      getCurrentFormByType({
        type,
        groupId: this.group.groupId,
      })
        .then((res) => {
          if (res.code === 1) {
            const formTabs = []
            this.formTabsList = res.data.map((item, index) => {
              if (index === 0) {
                // formTabs.push({
                //   silent: false,
                //   ...item,
                //   label: item.tabName,
                // })
              } else {
                formTabs.push({
                  id: item.id,
                  formId: item.formId,
                  silent: true,
                  label: item.tabName,
                })
              }
              return {
                ...item,
                silent: false,
                label: item.tabName,
              }
            })
            this.formTabs = formTabs
          }
        })
        .finally(() => {
          this.jsonList = []
          let i = 0
          this.initForm(i)
        })
    },
    initForm(i) {
      let formId = this.formTabs[i].formId
      this.formloading = true
      getFormDetail(formId)
        .then((res) => {
          if (res.code === 1 && res.data) {
            const formJson = res.data.formJson
            const obj = eval("(" + formJson + ")")
            obj.disabled = true
            obj.closeBtn = true
            obj.detail = true
            this.jsonList.push(obj)
            if (i == this.formTabs.length - 1) {
              // console.log(this.jsonList)
              this.fromLoading = false
            }
          }
        })
        .finally(() => {
          // console.log(this.formTabs)
          if (i < this.formTabs.length - 1) {
            i++
            this.initForm(i)
          }
          // console.log(this.jsonList)
          if (this.jsonList.length == this.formTabs.length) {
            this.$nextTick(() => {
              // this.getPatientDetail()
            })
          }
        })
    },
  },
}
</script>

<style lang="scss" scoped>
::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;
  }
  .el-main {
    padding: 0px 20px;
  }
  .el-aside {
    padding-bottom: 20px;
  }
}
.follow-tab {
  ::v-deep {
    border-radius: 4px;
    border: 1px solid #cccccc;
    height: 100%;
    .el-tabs__header {
      margin-left: 0px;
    }
    .el-tabs__nav-wrap.is-right::after {
      width: 0px;
    }
    .el-tabs__active-bar.is-right {
      width: 3px;
      height: 52px !important;
    }
    .el-tabs--right {
      height: auto !important;
    }
    .tab-title {
      padding: 16px;
      background: #fafafa;
      color: #333333;
      border-bottom: 1px solid #cccccc;
    }
    .el-tabs__item {
      padding: 16px;
      width: 180px;
      background: #fafafa;
      height: auto;
      line-height: inherit;
      border-bottom: 1px solid #cccccc;
      transition: all 1s;
    }
    .el-tabs__item.is-active {
      background: transparent;
    }
  }
}
.follow-list {
  border-radius: 4px;
  border: 1px solid #cccccc;
  height: 100%;
  background: #fafafa;
  li {
    padding: 16px;
    border-bottom: 1px solid #ccc;
    // cursor: pointer;
    .time {
      font-size: 14px;
      margin-bottom: 8px;
      font-family: AlibabaPuHuiTiR;
      text-align: left;
      &:first-child {
        color: #4e68ff;
      }
    }
  }
}
</style>