<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 >--> <div class="label"> <!-- 仅显示重要字段 : --> </div> <div class="value"> <!-- <el-switch v-model="isShowImprotant" @change="imFieldChange"> </el-switch>--> </div> </el-row> <div class="my-form" ref="my-form" :class="externalScroll ? 'no-scroll' : ''" > <read-form ref="form" :options="survivalForm" v-if="survivalFlag" ></read-form> <custom-form ref="form" @scrollTop="scrollTop" :options="widgetFormPreview" @handleConfirm="handleConfirm" @onPrev="onPrev" :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 ReadForm from "@/components/FormComponents/ReadForm/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, // 获取页面所有数据 survivalFlag: Boolean, //存活的显示 }, components: { CustomForm, TagsScrollBar, ReadForm }, provide() { return { formId: this.form.formId, getPatientId: () => { return this.patientId || this.patientStandbyId }, } }, data() { return { btnType: "", isShowImprotant: false, asideShow: false, widgetFormPreview: {}, formData: { formEdit: { risk_rank: "中危", risk_score: "5分", screening_advise: "立刻住院", }, 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: [ { label: "个人信息", prop: "1669858228269_22763", arrow: true, collapse: true, display: true, labelWidth: 8, column: [ { type: "input", display: true, importantField: true, styles: {}, autoRequired: 0, personalRequired: 0, prop: "name", label: "姓名", fieldType: "varchar", fieldLength: "50", tableName: "存活情况", tableCode: "gas_survival_situation", tableId: "1598137567272861697", notFilter: false, cType: "", subfield: false, }, { type: "input", display: true, importantField: true, styles: {}, autoRequired: 0, personalRequired: 0, prop: "contact_phone", label: "手机号", fieldType: "varchar", fieldLength: "20", tableName: "存活情况", tableCode: "gas_survival_situation", tableId: "1598137567272861697", notFilter: false, cType: "", subfield: false, }, { type: "input", display: true, importantField: true, styles: {}, autoRequired: 0, personalRequired: 0, prop: "telephone", label: "联系电话", fieldType: "varchar", fieldLength: "20", tableName: "存活情况", tableCode: "gas_survival_situation", tableId: "1598137567272861697", notFilter: false, cType: "", subfield: false, }, { type: "input", display: true, importantField: true, styles: {}, autoRequired: 0, personalRequired: 0, prop: "sex", label: "性别", fieldType: "tinyint", fieldLength: "2", tableName: "存活情况", tableCode: "gas_survival_situation", tableId: "1598137567272861697", notFilter: false, cType: "", subfield: false, }, { type: "input", display: true, importantField: true, styles: {}, autoRequired: 0, personalRequired: 0, prop: "birthday", label: "出生日期", fieldType: "date", fieldLength: "", tableName: "存活情况", tableCode: "gas_survival_situation", tableId: "1598137567272861697", notFilter: false, cType: "", subfield: false, }, { type: "input", display: true, importantField: true, styles: {}, autoRequired: 0, personalRequired: 0, prop: "age", label: "年龄", fieldType: "int", fieldLength: "4", tableName: "存活情况", tableCode: "gas_survival_situation", tableId: "1598137567272861697", notFilter: false, cType: "", subfield: false, }, ], }, { label: "第一次随访计划", prop: "1669858313508_15760", arrow: true, collapse: true, display: true, labelWidth: 8, column: [ { type: "radio", display: true, importantField: true, styles: {}, prop: "is_continue_follow", label: "是否随访", dicData: [ { label: "是", value: "1", id: "1595347527757000705", parentId: "", }, { label: "否", value: "0", id: "1595347502595371010", parentId: "", }, ], dynamicshSet: [], dicType: "d-sf", props: { label: "label", value: "value", }, fieldType: "tinyint", fieldLength: "2", tableName: "随访计划", tableCode: "gas_follow", tableId: "1597491580053323777", notFilter: false, cType: "", subfield: false, value: "1", span: 24, autoRequired: 0, personalRequired: 0, }, { type: "date", display: true, importantField: true, styles: {}, prop: "first_follow_time", label: "随访时间", format: "yyyy-MM-dd", valueFormat: "yyyy-MM-dd", dicType: "", fieldType: "date", tableName: "随访计划", tableCode: "gas_follow", tableId: "1597491580053323777", notFilter: false, cType: "", subfield: false, span: 12, autoRequired: 0, personalRequired: 0, width: 12, }, { type: "input", display: true, importantField: true, styles: {}, prop: "follow_contents", label: "随访内容", fieldType: "text", tableName: "随访计划", tableCode: "gas_follow", tableId: "1597491580053323777", notFilter: false, cType: "", subfield: false, autoRequired: 0, personalRequired: 0, span: 12, width: 12, }, ], }, ], }, } }, // 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 } else if (res.data.name == "风险评估") { 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) } ) }, onPrev(done) { this.$emit("onPrev", done) }, 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 { height: 20px; // 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>