archive_details5.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  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="jcdwscmc" :required="true">
  8. <u-input v-model="formData.jcdwscmc" disabled placeholder="必填。检查单位场所名称" />
  9. </u-form-item>
  10. <!-- <u-form-item label="所属乡镇街道" prop="streetName" :required="true">
  11. <u-input
  12. v-model="formData.streetName"
  13. placeholder="请选择所属乡镇街道"
  14. ></u-input>
  15. </u-form-item> -->
  16. <u-form-item label="检查记录编号(示例:编号:[2022]第00xx号) "><u-input disabled v-model="formData.jcjlbh"
  17. placeholder="检查记录编号" /></u-form-item>
  18. <u-form-item label="检查人员 (示例:王xx、李xx) ">
  19. <u-input disabled v-model="formData.jcry" placeholder="检查人员" />
  20. </u-form-item>
  21. <u-form-item label="检查时间">
  22. <uni-datetime-picker disabled v-model="formData.jcsj" mode="date" closeOnClickOverlay
  23. ></uni-datetime-picker>
  24. </u-form-item>
  25. <u-form-item label="检查形式(示例:安全检查)">
  26. <u-input disabled v-model="formData.jcxs" placeholder="检查形式" />
  27. </u-form-item>
  28. <u-form-item>
  29. <template #label>
  30. <span class="my-label">是/否责令限期整改及整改时限<view class="">
  31. (示例:是 2022年x月x日)
  32. </view></span></template>
  33. <u-input v-model="formData.sfxqzg" disabled placeholder="是/否责令限期整改及整改时限" />
  34. </u-form-item>
  35. <u-form-item label="是/否移交消防机构或公安派出所处理 " prop="xfaqzrr">
  36. <u-input v-model="formData.sfyjxfjg" disabled placeholder="是/否移交消防机构或公安派出所处理" />
  37. </u-form-item>
  38. <u-form-item label="是/否存在严重威胁公共安全的火灾隐患并报告">
  39. <u-input v-model="formData.sfyzwx" disabled placeholder="是/否存在严重威胁公共安全的火灾隐患并报告" />
  40. </u-form-item>
  41. <u-form-item label="备注">
  42. <u-input v-model="formData.remark" disabled placeholder="备注" />
  43. </u-form-item>
  44. </view>
  45. </u--form>
  46. </view>
  47. <uni-row class="heigthButton">
  48. <u-button
  49. @click="gotoEditArchive(formData)"
  50. shape="circle"
  51. size="large"
  52. color="#4cb2b6"
  53. text="修改信息"
  54. style="width: 60%;"
  55. ></u-button>
  56. </uni-row>
  57. </view>
  58. </template>
  59. <script>
  60. var that = null;
  61. export default {
  62. data() {
  63. return {
  64. formData: {
  65. orgName: ''
  66. },
  67. screenHeight: this.$screenHeight,
  68. wheight: '',
  69. };
  70. },
  71. mounted() {
  72. uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
  73. this.wheight = data.height
  74. }).exec()
  75. },
  76. onLoad: function(option) {
  77. that = this;
  78. var data = option.id;
  79. // 接收来自上个页面传递的参数
  80. const eventChannel = this.getOpenerEventChannel();
  81. eventChannel.on('acceptDataFromOpenerPage', function(val) {
  82. that.formData = val;
  83. console.log('val+++++++++++++++++++', that.formData);
  84. });
  85. this.formData.orgName = option.orgName;
  86. console.log('option: ', that.formData);
  87. },
  88. methods: {
  89. // 传递当前页面数据到 ‘修改信息’
  90. gotoEditArchive(val) {
  91. uni.navigateTo({
  92. url: '/pagesA/fire/archive/edit_archive/edit_archive5',
  93. events: {
  94. // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
  95. acceptDataFromOpenedPage: function(val) {
  96. this.formData = val;
  97. }
  98. },
  99. success: function(res) {
  100. // 通过eventChannel向被打开页面传送数据
  101. res.eventChannel.emit('acceptDataFromOpenerPage', val);
  102. }
  103. });
  104. }
  105. }
  106. };
  107. </script>
  108. <style lang="scss" scoped>
  109. page{
  110. background-color: #F5F7F9;
  111. }
  112. .container {
  113. position: relative;
  114. // height: 220vh;
  115. background-color: rgb(245, 247, 249);
  116. overflow: auto;
  117. .buju {
  118. margin: 40rpx 0;
  119. }
  120. }
  121. .cont {
  122. }
  123. .weiwan {
  124. color: #d51a52;
  125. background: rgba(213, 26, 82, 0.2);
  126. padding: 5rpx 20rpx;
  127. border-radius: 2px;
  128. border: 1px solid #d51a52;
  129. }
  130. .yiwan {
  131. color: #4cb2b6;
  132. background: rgba(76, 178, 182, 0.2);
  133. padding: 5rpx 20rpx;
  134. border-radius: 2px;
  135. border: 1px solid #4cb2b6;
  136. }
  137. .miaoshu {
  138. margin-right: 20rpx;
  139. color: #274647;
  140. font-weight: 600;
  141. }
  142. </style>