<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>