FormTab.vue

<template>
  <el-container>
    <el-main v-loading="pageLoading" class="transition-box">
      <i
        v-if="contrast"
        :class="asideShow ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
        :title="asideShow ? '收起' : '展开'"
        class="arrow"
        @click="asideShow = !asideShow"
      ></i>
      <el-empty v-if="isEmpty" description="暂无数据"></el-empty>
      <template v-if="!isEmpty">
        <!-- 多次记录 -->
        <el-row v-if="form.fillType === 1">
          <tags-scroll-bar
            v-if="repeatedlyList.length > 0"
            :tags-list="repeatedlyList"
            :props="{ label: 'time' }"
            ref="tags"
            @change="changeRepeate"
            :disabled="disabled"
            @add="handleAdd"
          ></tags-scroll-bar>
        </el-row>
        <el-row class="header">
          <template v-if="formData.percent.autoPercent">
            <span class="label">自动采集完整度：</span>
            <span class="value">{{ formData.percent.autoPercent }}%</span>
          </template>
          <template v-if="formData.percent.personalPercent">
            <span class="label">人工补录完整度：</span>
            <span class="value"
              >{{ formData.percent.personalPercent }}%</span
            ></template
          >

          <span class="label"> 仅显示重要字段 ：</span>
          <span class="value">
            <el-switch v-model="isShowImprotant" @change="imFieldChange">
            </el-switch>
          </span>
        </el-row>
        <div
          class="my-form"
          ref="my-form"
          :class="externalScroll ? 'no-scroll' : ''"
        >
          <custom-form
            ref="form"
            @scrollTop="scrollTop"
            :options="widgetFormPreview"
            @handleConfirm="handleConfirm"
            :form-edit="formData.formEdit"
          ></custom-form>
        </div>
      </template>
    </el-main>
    <el-aside
      :width="sideWidth"
      class="transition-box"
      :class="{ hidden: !asideShow }"
      v-if="contrast"
    >
      <div class="side-content"></div>
    </el-aside>
  </el-container>
</template>
<script>
import { getPatientDetail, getRecordList } from "@/api/patient.js"
import { getFormDetail } from "@/api/field"
import CustomForm from "@/components/FormComponents/CustomForm/index"
import TagsScrollBar from "@/components/TagsScrollBar/index"
export default {
  name: "FormTab",
  props: {
    externalScroll: Boolean, //外部滚动
    disabled: Boolean,
    contrast: Boolean, //同屏对照
    form: Object,
    patientId: String,
    patientStandbyId: String,
    getAll: Boolean, // 获取页面所有数据
  },
  components: { CustomForm, TagsScrollBar },
  provide() {
    return {
      formId: this.form.formId,
      getPatientId: () => {
        return this.patientId || this.patientStandbyId
      },
    }
  },
  data() {
    return {
      btnType: "",
      isShowImprotant: false,
      asideShow: true,
      widgetFormPreview: {},
      formData: {
        formEdit: {},
        percent: {},
        formRecordId: null,
      },
      loading: false,
      formloading: false,
      repeatedlyList: [],
      formCacheList: [],
    }
  },
  // mixins: [resizeMixin],
  computed: {
    isEmpty() {
      return !(Object.keys(this.widgetFormPreview) || this.widgetFormPreview)
        .length
    },
    sideWidth() {
      return this.asideShow ? "200px" : "0px"
    },
    pageLoading() {
      return this.loading || this.formloading
    },
  },
  methods: {
    initData() {
      this.formData.formRecordId = null
      this.formCacheList = []
      this.getPatientDetail()
      if (this.form.fillType === 1) {
        this.$nextTick(() => {
          this.$refs.form && this.$refs.form.resetForm()
        })
        this.getRecordList()
      }
    },
    scrollTop() {
      this.$refs["my-form"].scrollTop = 0
    },

    handleAdd() {
      this.$refs.form && this.$refs.form.resetForm()
      this.formData = {
        formEdit: {},
        percent: {},
        formRecordId: null,
      }
    },
    // 切换时间
    changeRepeate(index) {
      const item = this.repeatedlyList[index]
      if (item.id === this.formData.formRecordId) return
      const data = this.formCacheList.find((_) => _.formRecordId === item.id)
      if (data) {
        this.$refs.form && this.$refs.form.resetForm()
        this.formData = data
        return
      }
      this.formData.formRecordId = item.id
      this.getPatientDetail()
    },

    imFieldChange(val) {
      this.$refs.form.imFieldChange(val)
    },
    initForm() {
      this.formloading = true
      if (this.form.formJson) {
        const obj = eval("(" + this.form.formJson + ")")
        if (this.disabled) {
          obj.menuBtn = false
          obj.disabled = true
          obj.detail = true
        }
        setTimeout(() => {
          this.widgetFormPreview = obj
          this.formloading = false
        }, 100)
        return
      }
      getFormDetail(this.form.formId)
        .then((res) => {
          if (res.code === 1 && res.data) {
            const formJson = res.data.formJson
            this.$emit("setFormJson", formJson)
            const obj = eval("(" + formJson + ")")
            if (this.disabled) {
              obj.menuBtn = false
              obj.disabled = true
              obj.detail = true
            }
            this.widgetFormPreview = obj
          }
        })
        .finally(() => {
          this.formloading = false
        })
    },

    handleConfirm(data, done) {
      this.$emit(
        "handleConfirm",
        {
          data,
          formId: this.form.formId,
          patientId: this.patientId || this.patientStandbyId,
          formRecordId: this.formData.formRecordId,
        },
        done,
        (res) => {
          // 多次填写的表单新增时，获取最新数据
          if (this.form.fillType === 1 && !this.formData.formRecordId) {
            this.getRecordList(res.data.formRecordId)
          }
          this.formatData(res, this.form.fillType !== 1)
        }
      )
    },

    getPatientDetail() {
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.resetForm()
      })
      if (!this.patientId || this.form.silent) return
      this.loading = true
      getPatientDetail({
        patientId: this.patientId,
        formId: this.form.formId,
        formRecordId: this.formData.formRecordId,
      })
        .then((res) => {
          this.formatData(res)
        })
        .finally(() => {
          this.loading = false
        })
    },
    formatData(res, cache) {
      const d = res.data || {}
      const form = d.data || {}
      if (form["YZZKJC"] && typeof form["YZZKJC"] === "string") {
        form["YZZKJC"] = JSON.parse(form["YZZKJC"])
      }
      if (!cache) {
        this.formData.formEdit = form
      }
      this.formData.formRecordId = d.formRecordId
      this.formData.percent = d.percent || {}
      const index = this.formCacheList.findIndex(
        (_) => _.formRecordId === d.formRecordId
      )
      if (index > -1) {
        this.formCacheList.splice(index, 1, this.deepClone(this.formData))
      } else {
        this.formCacheList.push(this.deepClone(this.formData))
      }
    },
    getRecordList(formRecordId) {
      if (!this.patientId) return
      getRecordList({
        patientId: this.patientId,
        formId: this.form.formId,
      }).then((res) => {
        this.repeatedlyList = res.data.map((_, index) => {
          return {
            ..._,
            time: _.createTime,
          }
        })
        this.$nextTick(() => {
          const el = this.$refs.tags
          if (el) {
            el.tabActive =
              formRecordId ||
              (this.repeatedlyList[0] && this.repeatedlyList[0].id)
          }
        })
      })
    },
  },
  created() {
    this.initForm()
    if (this.getAll) {
      // 监听patientId 获取页面所有数据
      this.$watch(
        "patientId",
        () => {
          this.initData()
        },
        { immediate: true }
      )
    } else {
      // 监听form.silent 获取当前tab页数据
      this.$watch(
        "form.silent",
        () => {
          this.initData()
        },
        { immediate: true }
      )
    }
  },
}
</script>
<style scoped lang="scss">
.el-main {
  position: relative;
  padding: 0;
  .arrow {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    font-size: 22px;
    z-index: 9;
  }
  .header {
    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
    padding-right: 20px;
    position: relative;
    font-size: 15px;
  }
}
.el-aside {
  padding-left: 10px;
  border-left: 1px solid #ccc;
  .side-content {
    // height: calc(100vh - #{"272px"});
    // overflow: auto;
  }
}
.my-form {
  height: calc(100vh - #{"270px"});
  overflow-y: auto;
  padding-top: 20px;
  position: relative;
  &::-webkit-scrollbar-thumb {
    background-color: #fff;
  }
  &:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
  }
  &.no-scroll {
    height: auto;
  }
}
.label {
  font-size: 14px;
  color: #8492a6;
  line-height: 38px;
  float: left;
  margin-right: 20px;
}
.value {
  font-size: 14px;
  line-height: 38px;
  float: left;
  font-weight: 600;
  margin-right: 50px;
}
.el-slider {
  float: left;
  width: 150px;
}

.transition-box {
  transition: all 0.2s;
  &.hidden {
    opacity: 0;
    height: 0px;
  }
}
</style>