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"
            ref="tags"
            :tags-list="repeatedlyList"
            :props="{ label: 'time' }"
            :disabled="disabled"
            @change="changeRepeate"
            @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
          >-->

          <div class="label">
            <!-- 仅显示重要字段 ： -->
          </div>
          <div class="value">
            <!-- <el-switch v-model="isShowImprotant" @change="imFieldChange">
            </el-switch>-->
          </div>
        </el-row>
        <div
          ref="my-form"
          class="my-form"
          :style="{
            height:
              $route.path == '/screening/index'
                ? 'calc(100vh - 245px)'
                : $route.path == '/screening/draft'
                ? 'calc(100vh - 249px)'
                : 'calc(100vh - 203px)',
          }"
          :class="externalScroll ? 'no-scroll' : ''"
        >
          <!-- <read-form
            ref="form"
            :options="survivalForm"
            v-if="survivalFlag"
          ></read-form>-->
          <custom-form
            ref="form"
            :options="widgetFormPreview"
            :form-edit="formData.formEdit"
            @scrollTop="scrollTop"
            @handleConfirm="handleConfirm"
            @onPrev="onPrev"
            @temporaryConfirm="temporaryConfirm"
          ></custom-form>
        </div>
      </template>
    </el-main>
  </el-container>
</template>
<script>
import {
  getPatientDetail,
  getRecordList,
  getFollowDetail,
} from "@/api/patient.js"
import { getFormDetail } from "@/api/field"
import CustomForm from "@/components/FormComponents/CustomForm/index"
import ReadForm from "@/components/FormComponents/ReadForm/index"
import TagsScrollBar from "@/components/TagsScrollBar/index"
export default {
  name: "FormTab",
  components: { CustomForm, TagsScrollBar, ReadForm },
  props: {
    activeName: String,
    externalScroll: Boolean, //外部滚动
    disabled: Boolean,
    getData: Boolean,
    // contrast: Boolean, //同屏对照
    form: Object,
    formType: String,
    patientId: String,
    patientStandbyId: String,
    newformRecordId: String,
    getAll: Boolean, // 获取页面所有数据
    survivalFlag: Boolean, //存活的显示
    formEdit: {},
    formInitial: {},
    operation: String, // !默认新增，传入为edit为编辑需要传formRecordId
    isDraft: {
      type: String,
      default: "",
    },
    followId: String,
  },
  provide() {
    return {
      formId: this.form.formId,
      getPatientId: () => {
        return this.patientId || this.patientStandbyId
      },
    }
  },
  inject: {
    tabFollowId: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      btnType: "",
      isShowImprotant: false,
      asideShow: false,
      widgetFormPreview: {},
      formData: {
        formEdit: {},
        percent: {},
        formRecordId: null,
      },
      loading: false,
      formloading: false,
      repeatedlyList: [],
      formCacheList: [],
      survivalForm: {
        column: [],
        labelPosition: "right",
        labelSuffix: "：",
        labelWidth: 100,
        gutter: 0,
        menuBtn: true,
        submitBtn: true,
        submitText: "提交",
        emptyBtn: true,
        emptyText: "清空",
        nextTabBtn: true,
        nextTabText: "下一页",
        menuPosition: "center",
        group: [],
      },
    }
  },
  // mixins: [resizeMixin],
  computed: {
    isEmpty() {
      return !(Object.keys(this.widgetFormPreview) || this.widgetFormPreview)
        .length
    },
    getTabFollowId() {
      return this.tabFollowId()
    },
    // sideWidth() {
    //   return this.asideShow ? "200px" : "0px"
    // },
    pageLoading() {
      return this.loading || this.formloading
    },
  },
  watch: {
    formEdit(val) {
      console.log("回显3", val)
    },
    formInitial: {
      handler(v) {
        if (v) {
          this.$set(this.formData, "formEdit", { ...v })
          console.log(this.formData.formEdit)
        }
      },
      deep: true,
    },
  },
  created() {
    if (
      this.formType == "2" &&
      sessionStorage.getItem("formEdit") &&
      this.activeName == "index0"
    ) {
      let data = JSON.parse(sessionStorage.getItem("formEdit"))
      for (const key in data) {
        if (typeof data[key] == "number") {
          data[key] = data[key] + ""
        }
      }
      // data.follow_contents = JSON.parse(
      //   data.follow_contents.replace(/"\"/g, "")
      // )
      this.formData.formEdit = data
    }
    this.initForm() //! 随防筛查通用的设置form
    if (this.getAll) {
      // 监听patientId 获取页面所有数据
      this.$watch(
        "patientId",
        () => {
          this.initData()
        },
        { immediate: true }
      )
    } else {
      console.log(206, this.getData)
      // 监听form.silent 获取当前tab页数据
      if (this.getData) {
        this.$watch(
          "form.silent",
          () => {
            this.initData()
          },
          { immediate: true }
        )
      } else {
        this.$nextTick(() => {
          this.$refs.form && this.$refs.form.resetForm()
        })
      }
    }
  },
  mounted() {
    //! 设置新增判断
    if (this.$route.path == "/screening/add") {
      // this.handleAdd()
      if (!this.formData.formRecordId) {
        this.handleAdd()
      }
    }
  },
  methods: {
    resetForm() {
      this.$refs.form.resetForm(false)
      this.$refs.form.showError(false)
      // 清理年龄的回显
      this.$refs.form.clearAge()
    },
    initData() {
      console.log("初始化", this.formData)
      this.formData.formRecordId = null
      this.formCacheList = []
      this.getPatientDetail()
      if (this.form.fillType === 1) {
        this.$nextTick(() => {
          this.$refs.form && this.$refs.form.resetForm()
        })
        this.getRecordList()
      }
    },
    // 临时保存
    temporarySave() {
      this.$refs.form.temporarySave()
    },
    // 临时保存确定
    temporaryConfirm(data, done) {
      let params = {
        data,
        formId: this.form.formId, // 每个大表单的id
        patientId: this.patientId || this.patientStandbyId,
        // formRecordId: this.formData.formRecordId || this.newformRecordId, // 是否为编辑的表单id
        statusMap: {
          patient_from: this.$store.getters["table/selectedIndex"],
          is_draft: 1, //是否为草稿
          check_status: 1, // 审核状态
        },
      }
      if (this.operation && this.operation == "edit") {
        params.formRecordId = this.formData.formRecordId || this.newformRecordId // 是否为编辑的表单id
      }
      this.$emit("temporaryConfirm", params, done, (res) => {
        // 多次填写的表单新增时，获取最新数据
        if (this.form.fillType === 1 && !this.formData.formRecordId) {
          this.getRecordList(res.data.formRecordId)
        }
        this.formatData(res, this.form.fillType !== 1)
      })
    },
    handleConfirm(data, done) {
      let params = {
        data,
        formId: this.form.formId, // 每个大表单的id
        patientId: this.patientId || this.patientStandbyId,
        // formRecordId: this.formData.formRecordId || this.newformRecordId, // 是否为编辑的表单id
        statusMap: {
          patient_from: this.$store.getters["table/selectedIndex"],
          is_draft: this.activeName == "index5" ? 0 : 1, //是否为草稿
          check_status: 1, // 审核状态
        },
      }
      if (this.operation && this.operation == "edit") {
        params.formRecordId = this.formData.formRecordId || this.newformRecordId // 是否为编辑的表单id
      }
      if (this.isDraft) {
        params.statusMap.is_draft = this.isDraft
      }
      // 处理followId 针对随访查询的列表数据的查询和修改操作
      if (this.$route.path == "/followupentry" && this.activeName != "index0") {
        params.followId = this.followId || this.getTabFollowId
      }
      this.$emit("handleConfirm", params, done, (res) => {
        // 多次填写的表单新增时，获取最新数据
        if (this.form.fillType === 1 && !this.formData.formRecordId) {
          this.getRecordList(res.data.formRecordId)
        }
        this.formatData(res, this.form.fillType !== 1)
      })
    },
    onPrev(done) {
      this.$emit("onPrev", done)
    },
    scrollTop() {
      this.$refs["my-form"].scrollTop = 0
    },

    handleAdd() {
      console.log("触发新增", this.form)
      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
            } else if (res.data.name == "风险评估") {
              obj.detail = true
            }
            this.widgetFormPreview = obj
          }
        })
        .finally(() => {
          this.formloading = false
        })
    },

    getPatientDetail() {
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.resetForm()
      })
      if (!this.patientId || this.form.silent) return
      this.loading = true
      if (this.formType == 2) {
        getFollowDetail({
          followId: this.followId || this.getTabFollowId,
          formId: this.form.formId,
          formRecordId: this.formData.formRecordId,
        })
          .then((res) => {
            this.formatData(res)
          })
          .finally(() => {
            this.loading = false
          })
      } else {
        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 || {}
      for (const key in form) {
        Object.prototype.toString.call(form[key]) == "[object Number]"
          ? (form[key] = String(form[key]))
          : ""
      }
      if (form["YZZKJC"] && typeof form["YZZKJC"] === "string") {
        form["YZZKJC"] = JSON.parse(form["YZZKJC"])
      }
      console.log("form形成", form, this.formData)
      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))
      }
    },
    // 表单数据转化
    formatString(form) {
      for (const key in form) {
        Object.prototype.toString.call(form[key]) == "[object Number]"
          ? (form[key] = String(form[key]))
          : ""
      }
      this.formData.formEdit = form
    },
    getRecordList(formRecordId) {
      console.log("获取表单id", 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)
          }
        })
      })
    },
  },
}
</script>
<style scoped lang="scss">
.el-main {
  position: relative;
  padding: 0;
  // box-shadow: 0px 5px 4px red;

  .arrow {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    font-size: 22px;
    z-index: 9;
  }
  .header {
    height: 5px;
    box-shadow: 0px 3px 4px rgb(0 21 41 / 8%);
    padding-right: 20px;
    position: relative;
    font-size: 15px;
    z-index: 999;
  }
}
.el-aside {
  padding-left: 10px;
  border-left: 1px solid #ccc;
  .side-content {
    height: calc(100vh - #{"272px"});
    // overflow: auto;
  }
}
.my-form {
  // height: calc(100vh - #{"310px"});
  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;
}
</style>