archive_details4.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. <template>
  2. <view class=" uni-container">
  3. <view class="example container" :style="'height: ' + (screenHeight - wheight - 75) + 'px'">
  4. <!-- 自定义表单校验 1-->
  5. <u--form :model="formData" labelPosition="top" labelWidth="300" labelAlign="left">
  6. <view class=" flex flex-direction width100">
  7. <u-form-item label="地点" prop="dd" :required="true">
  8. <u-input v-model="formData.dd" placeholder="地点" disabled />
  9. </u-form-item>
  10. <u-form-item label="起火时间" prop="qhsj" :required="true">
  11. <uni-datetime-picker v-model="formData.qhsj" mode="date" closeOnClickOverlay
  12. disabled></uni-datetime-picker>
  13. </u-form-item>
  14. <u-form-item label="事故原因" prop="sgyy" :required="true">
  15. <u-input v-model="formData.sgyy" disabled placeholder="事故原因" />
  16. </u-form-item>
  17. <u-form-item label="财产损失金额" :required="true">
  18. <u-input v-model="formData.ccssje" disabled placeholder="财产损失金额" />
  19. </u-form-item>
  20. <u-form-item label="调查单位 "><u-input disabled v-model="formData.dcdw" placeholder="调查单位" /></u-form-item>
  21. <u-form-item label="人员伤亡情况 ">
  22. <u-input v-model="formData.ryswqk" disabled placeholder="人员伤亡情况" />
  23. </u-form-item>
  24. <u-form-item label="过火面积"><u-input disabled v-model="formData.ghmj" placeholder="是否过火面积" /></u-form-item>
  25. <u-form-item label="受灾户数"><u-input disabled v-model="formData.szhs" placeholder="受灾户数" /></u-form-item>
  26. <u-form-item label="备注">
  27. <u-textarea auto-height maxlength="-1" disabled v-model="formData.remark"
  28. placeholder="备注"></u-textarea>
  29. </u-form-item>
  30. </view>
  31. </u--form>
  32. </view>
  33. <uni-row class="heigthButton">
  34. <u-button
  35. @click="gotoEditArchive(formData)"
  36. shape="circle"
  37. size="large"
  38. color="#4cb2b6"
  39. text="修改信息"
  40. style="width: 60%;"
  41. ></u-button>
  42. </uni-row>
  43. </view>
  44. </template>
  45. <script>
  46. var that = null;
  47. export default {
  48. data() {
  49. return {
  50. formData: {
  51. orgName: ''
  52. },
  53. screenHeight: this.$screenHeight,
  54. wheight: '',
  55. };
  56. },
  57. mounted() {
  58. uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
  59. this.wheight = data.height
  60. }).exec()
  61. },
  62. onLoad: function(option) {
  63. that = this;
  64. var data = option.id;
  65. // 接收来自上个页面传递的参数
  66. const eventChannel = this.getOpenerEventChannel();
  67. eventChannel.on('acceptDataFromOpenerPage', function(val) {
  68. that.formData = val;
  69. console.log('val+++++++++++++++++++', that.formData);
  70. });
  71. this.formData.orgName = option.orgName;
  72. console.log('option: ', that.formData);
  73. },
  74. methods: {
  75. // 传递当前页面数据到 ‘修改信息’
  76. gotoEditArchive(val) {
  77. uni.navigateTo({
  78. url: '/pagesA/fire/archive/edit_archive/edit_archive4',
  79. events: {
  80. // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
  81. acceptDataFromOpenedPage: function(val) {
  82. this.formData = val;
  83. }
  84. },
  85. success: function(res) {
  86. // 通过eventChannel向被打开页面传送数据
  87. res.eventChannel.emit('acceptDataFromOpenerPage', val);
  88. }
  89. });
  90. }
  91. }
  92. };
  93. </script>
  94. <style lang="scss" scoped>
  95. page{
  96. background-color: #F5F7F9;
  97. }
  98. .container {
  99. position: relative;
  100. // height: 220vh;
  101. background-color: rgb(245, 247, 249);
  102. overflow: auto;
  103. .buju {
  104. margin: 40rpx 0;
  105. }
  106. }
  107. .cont {
  108. }
  109. .weiwan {
  110. color: #d51a52;
  111. background: rgba(213, 26, 82, 0.2);
  112. padding: 5rpx 20rpx;
  113. border-radius: 2px;
  114. border: 1px solid #d51a52;
  115. }
  116. .yiwan {
  117. color: #4cb2b6;
  118. background: rgba(76, 178, 182, 0.2);
  119. padding: 5rpx 20rpx;
  120. border-radius: 2px;
  121. border: 1px solid #4cb2b6;
  122. }
  123. .miaoshu {
  124. margin-right: 20rpx;
  125. color: #274647;
  126. font-weight: 600;
  127. }
  128. </style>