acf9bab15d5e495a69a3902cf7f3daa1b2060962.svn-base 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <!-- -->
  2. <template>
  3. <div id="popupContainer" class=''>
  4. <el-dialog :title="currentObjectName" @close="closeDialog" width="50%" :visible.sync="dialogFormVisible">
  5. <el-tabs v-model="currentViewId" type="card">
  6. <el-tab-pane
  7. :label="option.label"
  8. :name="option.label"
  9. v-for="option in options"
  10. :key="option.value">
  11. <component
  12. :is="option.value"
  13. :currentObjectRgstrId="currentObjectRgstrId"
  14. :currentObjectName="currentObjectName"
  15. :currentJysglAdCode="currentJysglAdCode"
  16. :currentObjectId="currentObjectId">
  17. </component>
  18. </el-tab-pane>
  19. </el-tabs>
  20. </el-dialog>
  21. </div>
  22. </template>
  23. <script>
  24. export default {
  25. components: {
  26. jichuxinxi:resolve => {require(['./jichuxinxi.vue'], resolve)},//基础信息
  27. dengjixinxi:resolve => {require(['./dengjixinxi.vue'], resolve)},//登记信息
  28. guanliqingkuang:resolve => {require(['./guanliqingkuang.vue'], resolve)},//节约用水管理情况检查表
  29. jieshuipingjia:resolve => {require(['./jieshuipingjia.vue'], resolve)},//节水评价情况检查表
  30. problemList:resolve => {require(['./problemList.vue'], resolve)},//问题清单
  31. },
  32. props: ["currentDuchaTpe","currentObjectRgstrId","currentJysglAdCode","currentObjectId","currentObjectName"],
  33. data() {
  34. return {
  35. currentViewId:'基础信息',
  36. dialogFormVisible:true,
  37. options:[],
  38. options_ducha: [
  39. {
  40. value: "jichuxinxi",
  41. label: "基础信息"
  42. },{
  43. value: "dengjixinxi",
  44. label: "登记信息"
  45. },{
  46. value: "guanliqingkuang",
  47. label: "节约用水管理情况检查表"
  48. },{
  49. value: "jieshuipingjia",
  50. label: "节水评价情况检查表"
  51. },{
  52. value: "problemList",
  53. label: "问题清单"
  54. }
  55. ],
  56. options_base: [
  57. {
  58. value: "jichuxinxi",
  59. label: "基础信息"
  60. }
  61. ],
  62. };
  63. },
  64. computed: {},
  65. watch: {
  66. currentDuchaTpe(n,o){
  67. if(n){
  68. this.options = this.options_ducha;
  69. }else{
  70. this.options = this.options_base;
  71. }
  72. }
  73. },
  74. //生命周期 - 创建完成(可以访问当前this实例)
  75. created() {
  76. },
  77. //生命周期 - 挂载完成(可以访问DOM元素)
  78. mounted() {
  79. if(this.currentDuchaTpe){
  80. this.options = this.options_ducha;
  81. }else{
  82. this.options = this.options_base;
  83. }
  84. },
  85. beforeCreate() {}, //生命周期 - 创建之前
  86. beforeMount() {}, //生命周期 - 挂载之前
  87. beforeUpdate() {}, //生命周期 - 更新之前
  88. updated() {}, //生命周期 - 更新之后
  89. beforeDestroy() {}, //生命周期 - 销毁之前
  90. destroyed() {}, //生命周期 - 销毁完成
  91. activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
  92. methods: {
  93. closeDialog() {
  94. this.$emit("cancelHandler");
  95. },
  96. showDialog() {
  97. this.dialogFormVisible = true;
  98. },
  99. },
  100. }
  101. </script>
  102. <style scoped>
  103. /*@import url(); 引入公共css类*/
  104. .el-dialog__header{
  105. text-align: center !important;
  106. border-bottom: 1px dashed #C5C6C8 !important;
  107. }
  108. .el-dialog{
  109. border-radius: 4px !important;
  110. }
  111. </style>