123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 |
- <template>
- <el-row :gutter="20" class="data-form">
- <el-form label-position="top" label-width="80px">
- <!-- template v-for-->
- <template>
- <p class="title">基础信息</p>
- <el-row :gutter="20">
- <template v-for="(item,index) in header.basicInfos.data">
- <el-col :span="8" :key="index">
- <el-form-item
- :key="index"
- :label="item.name">
- <el-input v-model="form[item.path]"/>
- </el-form-item>
- </el-col>
- </template>
- </el-row>
- </template>
- <div class="content">
- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
- <el-tab-pane v-for="(item,index) in paneMsg" :key="index" :label="item" :name="index.toString()"/>
- </el-tabs>
- <div class="table">
- <el-row :gutter="20">
- <template v-for="(item,index) in header.dictStages.data">
- <el-col span="8" :key="index">
- <el-form-item
- :key="index"
- :label="item.name">
- <el-input v-model="form[item.path]"/>
- </el-form-item>
- </el-col>
- </template>
- </el-row>
- </div>
- </div>
- </el-form>
- </el-row>
- </template>
- <script lang="ts">
- import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
- @Component({
- name: "dataForm",
- })
- export default class extends Vue {
- @Prop({ default: Object }) dataFormList?: {};
- // tabs数据
- paneMsg = ['设计阶段维护', '施工阶段维护', '运维阶段维护']
- activeName = this.paneMsg[0]
- header = {}
- form = {}
- @Watch('deviceHeaders', { immediate: true, deep: true })
- async deviceHeaders() {
- await this.test()
- }
- // test() {
- // let header = []
- // console.log(this.dataFormList)
- // if (Object.keys(this.dataFormList.length > 0)) {
- // this.dataFormList.dictStages.forEach(item => {
- // console.log(this.activeName)
- // if (this.activeName == item.name) {
- // console.log(this.activeName)
- // item.infos && item.infos.forEach(val => header.push(val))
- // }
- // })
- // }
- // this.header = {
- // basicInfos: {
- // name: '基础信息台账',
- // data: this.dataFormList.basicInfos
- // },
- // dictStages: {
- // name: this.activeName,
- // data: header
- // }
- // }
- // }
- handleClick(val) {
- this.activeName = val.label
- this.deviceHeaders()
- }
- }
- </script>
- <style scoped lang="scss">
- $border: 1px solid #E1E7EA;
- .data-form {
- .title {
- border-left: 7px solid;
- text-indent: 10px;
- color: #646C73;
- margin-bottom: 10px;
- }
- .content {
- .table {
- border-left: $border;
- border-right: $border;
- border-bottom: $border;
- height: calc(100% - 41px);
- padding: 12px;
- }
- }
- }
- </style>
|