dataForm.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <template>
  2. <el-row :gutter="20" class="data-form">
  3. <el-form label-position="top" label-width="80px">
  4. <!-- template v-for-->
  5. <template>
  6. <p class="title">基础信息</p>
  7. <el-row :gutter="20">
  8. <template v-for="(item,index) in header.basicInfos.data">
  9. <el-col :span="8" :key="index">
  10. <el-form-item
  11. :key="index"
  12. :label="item.name">
  13. <el-input v-model="form[item.path]"/>
  14. </el-form-item>
  15. </el-col>
  16. </template>
  17. </el-row>
  18. </template>
  19. <div class="content">
  20. <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
  21. <el-tab-pane v-for="(item,index) in paneMsg" :key="index" :label="item" :name="index.toString()"/>
  22. </el-tabs>
  23. <div class="table">
  24. <el-row :gutter="20">
  25. <template v-for="(item,index) in header.dictStages.data">
  26. <el-col span="8" :key="index">
  27. <el-form-item
  28. :key="index"
  29. :label="item.name">
  30. <el-input v-model="form[item.path]"/>
  31. </el-form-item>
  32. </el-col>
  33. </template>
  34. </el-row>
  35. </div>
  36. </div>
  37. </el-form>
  38. </el-row>
  39. </template>
  40. <script lang="ts">
  41. import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
  42. @Component({
  43. name: "dataForm",
  44. })
  45. export default class extends Vue {
  46. @Prop({ default: Object }) dataFormList?: {};
  47. // tabs数据
  48. paneMsg = ['设计阶段维护', '施工阶段维护', '运维阶段维护']
  49. activeName = this.paneMsg[0]
  50. header = {}
  51. form = {}
  52. @Watch('deviceHeaders', { immediate: true, deep: true })
  53. async deviceHeaders() {
  54. await this.test()
  55. }
  56. // test() {
  57. // let header = []
  58. // console.log(this.dataFormList)
  59. // if (Object.keys(this.dataFormList.length > 0)) {
  60. // this.dataFormList.dictStages.forEach(item => {
  61. // console.log(this.activeName)
  62. // if (this.activeName == item.name) {
  63. // console.log(this.activeName)
  64. // item.infos && item.infos.forEach(val => header.push(val))
  65. // }
  66. // })
  67. // }
  68. // this.header = {
  69. // basicInfos: {
  70. // name: '基础信息台账',
  71. // data: this.dataFormList.basicInfos
  72. // },
  73. // dictStages: {
  74. // name: this.activeName,
  75. // data: header
  76. // }
  77. // }
  78. // }
  79. handleClick(val) {
  80. this.activeName = val.label
  81. this.deviceHeaders()
  82. }
  83. }
  84. </script>
  85. <style scoped lang="scss">
  86. $border: 1px solid #E1E7EA;
  87. .data-form {
  88. .title {
  89. border-left: 7px solid;
  90. text-indent: 10px;
  91. color: #646C73;
  92. margin-bottom: 10px;
  93. }
  94. .content {
  95. .table {
  96. border-left: $border;
  97. border-right: $border;
  98. border-bottom: $border;
  99. height: calc(100% - 41px);
  100. padding: 12px;
  101. }
  102. }
  103. }
  104. </style>