edit_archive4.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394
  1. <template>
  2. <view class=" uni-container">
  3. <view class="example container" :style="'height: ' + (screenHeight - wheight - 75) + 'px'">
  4. <!-- 自定义表单校验 1-->
  5. <u--form ref="customForm" :model="formData" labelPosition="left" 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="必填。请输入地点" />
  9. </u-form-item>
  10. <u-form-item label="起火时间" prop="qhsj" :required="true">
  11. <uni-datetime-picker :show="unitTime" v-model="formData.qhsj" mode="date" closeOnClickOverlay
  12. @confirm="ActiveUnitTime" @cancel="unitTime = false"
  13. @close="unitTime = false"></uni-datetime-picker>
  14. </u-form-item>
  15. <u-form-item label="事故原因" prop="sgyy" :required="true">
  16. <u-input v-model="formData.sgyy" placeholder="事故原因" />
  17. </u-form-item>
  18. <u-form-item label="财产损失金额" :required="true">
  19. <u-input v-model="formData.ccssje" placeholder="请输入财产损失金额" />
  20. </u-form-item>
  21. <u-form-item label="调查单位 "><u-input v-model="formData.dcdw" placeholder="请输入调查单位" /></u-form-item>
  22. <u-form-item label="人员伤亡情况 ">
  23. <u-input v-model="formData.ryswqk" placeholder="请输入人员伤亡情况" />
  24. </u-form-item>
  25. <u-form-item label="过火面积"><u-input v-model="formData.ghmj" placeholder="是否过火面积" /></u-form-item>
  26. <!-- <u-form-item label="*所属乡镇街道" @click="hideKeyboard()" prop="streetName">
  27. <u--input
  28. v-model="formData.streetName"
  29. disabled
  30. disabledColor="#ffffff"
  31. placeholder="请选择所属乡镇街道"
  32. ></u--input>
  33. </u-form-item> -->
  34. <u-form-item label="受灾户数"><u-input v-model="formData.szhs" placeholder="受灾户数" /></u-form-item>
  35. <u-form-item label="备注">
  36. <u-textarea auto-height maxlength="-1" v-model="formData.remark"
  37. placeholder="请输入备注"></u-textarea>
  38. </u-form-item>
  39. </view>
  40. </u--form>
  41. </view>
  42. <uni-row class="heigthButton">
  43. <u-button @click="submit('customForm')" type="primary" shape="circle" size="large" color="#4CB2B6"
  44. text="确认修改"></u-button>
  45. </uni-row>
  46. </view>
  47. </template>
  48. <script>
  49. import {
  50. updateArchive, // 更新
  51. getDepartment //获取登陆人的部门信息
  52. } from '@/api/archive/index4.js';
  53. var that = null;
  54. export default {
  55. data() {
  56. return {
  57. screenHeight: this.$screenHeight,
  58. wheight: '',
  59. // 每页数据量
  60. pageSize: 5,
  61. // 当前页
  62. pageNo: 1,
  63. // 数据总量
  64. total: 0,
  65. unitTime: false,
  66. loading: false,
  67. title: '生成隐患',
  68. content: '确认将此检查项目生成为隐患',
  69. // 自定义表单数据
  70. formData: {
  71. status: '0'
  72. },
  73. // 自定义表单校验规则
  74. customRules: {
  75. dd: {
  76. type: 'string',
  77. required: true,
  78. message: '地点不能为空',
  79. trigger: ['blur', 'change']
  80. },
  81. sgyy: {
  82. type: 'string',
  83. required: true,
  84. message: '事故原因不能为空',
  85. trigger: ['blur', 'change']
  86. },
  87. qhsj: {
  88. type: 'string',
  89. required: true,
  90. message: '起火时间不能为空',
  91. trigger: ['blur', 'change']
  92. }
  93. }
  94. };
  95. },
  96. computed: {},
  97. mounted() {
  98. uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
  99. this.wheight = data.height
  100. }).exec()
  101. },
  102. onLoad: function(option) {
  103. that = this
  104. var data = option.id;
  105. // 接收来自上个页面传递的参数
  106. const eventChannel = this.getOpenerEventChannel();
  107. eventChannel.on('acceptDataFromOpenerPage', function(val) {
  108. that.formData = val;
  109. });
  110. // 以下内容都是为了 选择街道
  111. const deptValue = uni.getStorageSync('getDepartment_key'); //所有街道
  112. const deptId = uni.getStorageSync('getUserInfo_key')?.streetInfo?.id //登录用户的街道id
  113. var newArrar = {}; //新对象
  114. // 如果存在街道id,就直接取出对应的名称
  115. if (deptId) {
  116. newArrar = deptValue.find((item) => {
  117. if (item.id === deptId) {
  118. this.formData.streetId = item.id;
  119. this.formData.streetName = item.name;
  120. }
  121. })
  122. }
  123. },
  124. onReady() {
  125. this.$refs.customForm.setRules(this.customRules);
  126. },
  127. methods: {
  128. submit(ref) {
  129. this.$refs[ref]
  130. .validate()
  131. .then(res => {
  132. this.formData['status'] = 0;
  133. var jsdata = JSON.stringify(this.formData);
  134. updateArchive(jsdata).then(response => {
  135. uni.showLoading({
  136. title: response.data.msg
  137. });
  138. uni.hideLoading();
  139. uni.navigateBack({
  140. delta: 2
  141. });
  142. });
  143. })
  144. .catch(err => {
  145. uni.showToast({
  146. icon: 'none',
  147. title: '错误!' + err[0].message
  148. })
  149. });
  150. },
  151. // 隐藏键盘
  152. hideKeyboard() {
  153. uni.hideKeyboard();
  154. },
  155. // 单位成立时间
  156. ActiveUnitTime(e) {
  157. this.unitTime = false;
  158. let value = new Date(e.value);
  159. this.formData.qhsj = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
  160. },
  161. changetime(e) {
  162. },
  163. // 生成隐患弹出层 //暂存为草稿箱弹出层
  164. cancel() {
  165. this.show = false;
  166. },
  167. confirm() {
  168. setTimeout(() => {
  169. // 0.5秒后自动关闭
  170. this.show = false;
  171. }, 500);
  172. },
  173. // 触底的事件
  174. scrolltolower() {
  175. // 判断是否还有下一页数据
  176. if (this.pageNo * this.pageSize >= this.total)
  177. return uni.showToast({
  178. title: `数据加载完毕`
  179. });
  180. // 判断是否正在请求其它数据,如果是,则不发起额外的请求
  181. if (this.loading) return;
  182. this.pageNo += 1;
  183. this.showCheckboxShow(this.pageNo);
  184. }
  185. }
  186. };
  187. </script>
  188. <style lang="scss" scoped>
  189. page {
  190. height: 100%;
  191. background-color: #f5f7f9;
  192. position: relative;
  193. }
  194. body {
  195. background-color: #f5f7f9;
  196. }
  197. .buttomBorder {
  198. height: 0px;
  199. border: 1px dashed #cbd5e1;
  200. }
  201. /deep/ .uni-section .uni-section-header {
  202. padding: 0px;
  203. }
  204. /deep/ .u-form-item__body {
  205. font-weight: 500;
  206. flex-direction: column !important;
  207. }
  208. /deep/ .u-form-item__body__left__content__label {
  209. margin-bottom: 16rpx;
  210. font-size: 30rpx !important;
  211. color: #274647 !important;
  212. }
  213. .arrow-icon {
  214. //主动检查箭头
  215. position: absolute;
  216. right: 14px;
  217. top: 49px;
  218. transform: rotate(90deg);
  219. }
  220. /deep/ .u-input[data-v-fdbb9fe6],
  221. /deep/ .u-input.data-v-fdbb9fe6,
  222. /deep/ .u-input {
  223. background-color: #fff;
  224. }
  225. /deep/.u-button[data-v-3bf2dba7],
  226. /deep/.u-button.data-v-3bf2dba7,
  227. /deep/.u-button {
  228. width: 60% !important;
  229. }
  230. //弹框样式
  231. .btnList {
  232. // width: 40%;
  233. display: flex;
  234. // display:flex;
  235. .u-button[data-v-3bf2dba7],
  236. .u-button {
  237. width: 30%;
  238. }
  239. }
  240. /deep/ .u-popup__content {
  241. //弹出的宽高
  242. height: 100%;
  243. }
  244. /deep/ .u-form-item__body__right__message {
  245. //校验的文字的位置
  246. margin-left: 10rpx !important;
  247. }
  248. /deep/ .uicon-close {
  249. //关闭按钮背景色
  250. background-color: rgba(199, 203, 210, 0.9);
  251. border-radius: 10%;
  252. }
  253. .checkbox {
  254. .checkbox-item {
  255. box-sizing: border-box;
  256. padding-top: 40px;
  257. }
  258. }
  259. //侧边联动
  260. .page-body {
  261. display: flex;
  262. background: #fff;
  263. overflow: hidden;
  264. }
  265. .nav {
  266. display: flex;
  267. width: 100%;
  268. }
  269. .nav-left {
  270. width: 25%;
  271. background: #fafafa;
  272. }
  273. .nav-left-item {
  274. height: 100upx;
  275. border-right: solid 1px #f1f1f1;
  276. border-bottom: solid 1px #f1f1f1;
  277. font-size: 30upx;
  278. display: flex;
  279. align-items: center;
  280. justify-content: center;
  281. }
  282. /deep/.nav-right-item[data-v-73caef23],
  283. /deep/.nav-right-item {
  284. display: flex;
  285. flex-wrap: wrap;
  286. }
  287. .nav-left-item:last-child {
  288. border-bottom: none;
  289. }
  290. .nav-right {
  291. width: 75%;
  292. }
  293. .box {
  294. display: block;
  295. overflow: hidden;
  296. border-bottom: 20upx solid #f3f3f3;
  297. /* min-height: 100vh; */
  298. /*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
  299. }
  300. .box:last-child {
  301. border: none;
  302. // min-height: 100vh;
  303. }
  304. .nav-right-item {
  305. margin-top: 20px;
  306. // width: 28%;
  307. // min-height: 200upx;
  308. float: left;
  309. text-align: center;
  310. padding: 11upx;
  311. font-size: 28upx;
  312. background: #fff;
  313. /deep/.u-checkbox__icon-wrap[data-v-532d01c7],
  314. /deep/.u-checkbox__icon-wrap {
  315. //复选框的样式
  316. margin: 0 20rpx;
  317. }
  318. /deep/ uni-view[data-v-3d1b15f2] {
  319. //复选框上线的间距
  320. margin: 20rpx 0 !important;
  321. }
  322. // /deep/ .u-checkbox__icon-wrap--square{
  323. // margin: 20rpx;
  324. // }
  325. .u-checkbox-label--right[data-v-532d01c7],
  326. .u-checkbox-label--right {
  327. margin-right: 40rpx;
  328. }
  329. }
  330. .nav-right-item image {
  331. width: 150upx;
  332. height: 150upx;
  333. }
  334. .active {
  335. font-weight: 700;
  336. color: #274647;
  337. background: #fff;
  338. border-right: 0;
  339. }
  340. ::-webkit-scrollbar {
  341. /*取消小程序的默认导航条样式*/
  342. width: 0;
  343. height: 0;
  344. color: transparent;
  345. }
  346. .selectBtn {
  347. width: 200rpx;
  348. margin-left: 0;
  349. font-size: 30rpx;
  350. background-color: #4cb2b6;
  351. }
  352. .example {
  353. overflow-y: auto;
  354. }
  355. </style>