add_archive2.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496
  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="jwhmc" :required="true">
  8. <u-input v-model="formData.jwhmc" placeholder="必填。请输入居(村)民委员会名称" />
  9. </u-form-item>
  10. <u-form-item label="联系电话" prop="lxdh" :required="true">
  11. <u-input v-model="formData.lxdh" placeholder="必填。请输入联系电话" />
  12. </u-form-item>
  13. <!-- <u-form-item label="所属乡镇街道" prop="streetId" :required="true">
  14. <u-input v-model="formData.streetId" placeholder="请选择所属乡镇街道"></u-input>
  15. </u-form-item> -->
  16. <u-form-item label="消防安全管理人" :required="true" prop="xfaqglr">
  17. <u-input v-model="formData.xfaqglr" placeholder="必填。请输入消防安全管理人" />
  18. </u-form-item>
  19. <u-form-item label="办公地址">
  20. <u-input v-model="formData.bgdz" placeholder="请输入办公地址" />
  21. </u-form-item>
  22. <u-form-item label="是否建立微型消防站或志愿消防队 " @click="
  23. showSfjlwxxfz = true;
  24. hideKeyboard();
  25. ">
  26. <u-input v-model="formData.sfjlwxxfz" placeholder="是否建立微型消防站或志愿消防队" />
  27. </u-form-item>
  28. <u-form-item label="是否组织制定防火安全公约" @click="
  29. showSfzdfhgy = true;
  30. hideKeyboard();
  31. ">
  32. <u-input v-model="formData.sfzdfhgy" placeholder="是否组织制定防火安全公约" />
  33. </u-form-item>
  34. <u-form-item label="所辖单位(场所)数量">
  35. <u-input v-model="formData.sxdwsl" placeholder="请输入所辖单位(场所)数量" />
  36. </u-form-item>
  37. <u-form-item label="所辖居(村)民人数" prop="sxjmrs">
  38. <u-input v-model="formData.sxjmrs" placeholder="请输入所辖居(村)民人数" />
  39. </u-form-item>
  40. <u-form-item label="备注">
  41. <u-textarea auto-height maxlength="-1" v-model="formData.remark" placeholder="请输入备注">
  42. </u-textarea>
  43. </u-form-item>
  44. </view>
  45. </u--form>
  46. <u-popup :show="show" mode="center" :round="15" :closeOnClickOverlay="true" @close="close">
  47. <view style="height: 390px;width: 350px;">
  48. <swiper :indicator-dots="true" class="swiper">
  49. <swiper-item v-for="(i, index) in actionsMaplist" :key="index">
  50. <u-grid :border="true">
  51. <u-grid-item :customStyle="{ width: 210 + 'rpx', height: 220 + 'rpx' }"
  52. v-for="(item, index1) in i" :index="index1" :key="index1"
  53. @click="info(item), (show = false)">
  54. <text class="grid-text">{{ item.name }}</text>
  55. </u-grid-item>
  56. </u-grid>
  57. </swiper-item>
  58. </swiper>
  59. </view>
  60. </u-popup>
  61. </view>
  62. <u-action-sheet :show="showSfjlwxxfz" :actions="actionSfjlwxxfz" title="是否建立微型消防站或志愿消防队"
  63. @close="showSfjlwxxfz = false" @select="sexSelect"></u-action-sheet>
  64. <u-action-sheet :show="showSfzdfhgy" :actions="actionSfzdfhgy" title="是否组织制定防火安全公约"
  65. @close="showSfzdfhgy = false" @select="sexSelect2"></u-action-sheet>
  66. <uni-row class="heigthButton">
  67. <u-button @click="submit('customForm')" type="primary" shape="circle" size="large" color="#4CB2B6"
  68. text="确认新增"></u-button>
  69. </uni-row>
  70. </view>
  71. </template>
  72. <script>
  73. import {
  74. createArchive, // 创建
  75. getDepartment //获取登陆人的部门信息
  76. } from '@/api/archive/index2.js';
  77. var that = null;
  78. export default {
  79. data() {
  80. return {
  81. screenHeight: this.$screenHeight,
  82. wheight: '',
  83. showSfjlwxxfz: false,
  84. showSfzdfhgy: false,
  85. actionSfjlwxxfz: [{
  86. id: 1,
  87. name: '是'
  88. },
  89. {
  90. id: 2,
  91. name: '否'
  92. }
  93. ],
  94. actionSfzdfhgy: [{
  95. id: 1,
  96. name: '是'
  97. },
  98. {
  99. id: 2,
  100. name: '否'
  101. }
  102. ],
  103. show: false, //所属乡镇街道
  104. show1: '', // 是否显示弹窗 0不显示
  105. actionsMaplist: [],
  106. actions: [],
  107. // 每页数据量
  108. pageSize: 5,
  109. // 当前页
  110. pageNo: 1,
  111. // 数据总量
  112. total: 0,
  113. unitTime: false,
  114. loading: false,
  115. title: '生成隐患',
  116. content: '确认将此检查项目生成为隐患',
  117. // 自定义表单数据
  118. formData: {
  119. status: '0'
  120. },
  121. // 自定义表单校验规则
  122. customRules: {
  123. jwhmc: {
  124. type: 'string',
  125. required: true,
  126. message: '居(村)民委员会名称不能为空',
  127. trigger: ['blur', 'change']
  128. },
  129. lxdh: {
  130. pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
  131. required: true,
  132. message: '联系电话输入不正确',
  133. trigger: ['blur', 'change']
  134. },
  135. xfaqglr: {
  136. type: 'string',
  137. required: true,
  138. message: '消防安全管理人不能为空',
  139. trigger: ['blur', 'change']
  140. },
  141. sxjmrs: {
  142. type: 'number',
  143. message: '所辖居(村)民人数为数字',
  144. trigger: ['blur', 'change']
  145. },
  146. streetName: {
  147. type: 'string',
  148. required: true,
  149. message: '所属乡镇街道不能为空',
  150. trigger: ['blur', 'change']
  151. },
  152. }
  153. };
  154. },
  155. computed: {},
  156. mounted() {
  157. uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
  158. this.wheight = data.height
  159. }).exec()
  160. },
  161. onLoad: function(option) {
  162. // 以下内容都是为了 选择街道
  163. const deptValue = uni.getStorageSync('getDepartment_key'); //所有街道
  164. const deptId = uni.getStorageSync('getUserInfo_key').streetInfo.id; //登录用户的街道id
  165. var newArrar = {}; //新对象
  166. // 如果存在街道id,就直接取出对应的名称
  167. if (deptId) {
  168. newArrar = deptValue.find((item) => {
  169. if (item.id === deptId) {
  170. this.formData.streetId = item.id;
  171. this.formData.streetName = item.name;
  172. }
  173. })
  174. // show1 ='0' 点击将不再显示弹窗
  175. this.show1 = '0'
  176. // 如果没有街道id,就获取所有街道id,选择一个街道提交
  177. } else {
  178. // 获取所有街道
  179. // storage存储的街道值不为空就执行
  180. if (deptValue.length > 0) {
  181. deptValue.map(v => {
  182. this.actions.push({
  183. id: v.id,
  184. name: v.name
  185. });
  186. });
  187. // 如果本地storage为空就执行网络请求,获取所有部门
  188. } else {
  189. getDepartment({}).then(res => {
  190. if (res.data.length > 0) {
  191. deptValue.map(v => {
  192. this.actions.push({
  193. id: v.id,
  194. name: v.name
  195. });
  196. });
  197. }
  198. })
  199. }
  200. this.actionsMaplist = this.splitArray(this.actions, 9);
  201. }
  202. },
  203. onReady() {
  204. this.$refs.customForm.setRules(this.customRules);
  205. },
  206. methods: {
  207. sexSelect(e) {
  208. this.formData.sfjlwxxfz = e.name;
  209. },
  210. sexSelect2(e) {
  211. this.formData.sfzdfhgy = e.name;
  212. },
  213. // size每组数组多少个,如:10
  214. // array需要拆分的数组
  215. splitArray(array, size) {
  216. let data = [];
  217. for (let i = 0; i < array.length; i += size) {
  218. data.push(array.slice(i, i + size));
  219. }
  220. return data;
  221. },
  222. submit(ref) {
  223. this.$refs[ref]
  224. .validate()
  225. .then(res => {
  226. this.formData['status'] = 0;
  227. var jsdata = JSON.stringify(this.formData);
  228. console.log(jsdata, 'jsdatajsdatajsdata');
  229. createArchive(jsdata).then(response => {
  230. console.log('response.data.msg,', response.data);
  231. uni.showLoading({
  232. title: response.data.msg
  233. });
  234. uni.hideLoading();
  235. uni.navigateBack({
  236. delta: 1
  237. });
  238. });
  239. })
  240. .catch(err => {
  241. uni.showToast({
  242. icon: 'none',
  243. title: '错误!' + err[0].message
  244. })
  245. console.log('err错误信息为:', err);
  246. });
  247. },
  248. // 隐藏键盘
  249. hideKeyboard() {
  250. uni.hideKeyboard();
  251. },
  252. close() {
  253. this.show = false;
  254. // console.log('close');
  255. },
  256. confirm(e) {
  257. this.show = false;
  258. },
  259. cancel() {
  260. this.show = false;
  261. },
  262. change(e) {
  263. console.log('change', e);
  264. },
  265. info(e) {
  266. this.formData.streetId = e.id;
  267. this.formData.streetName = e.name;
  268. console.log(e.id, e.name);
  269. },
  270. // 触底的事件
  271. scrolltolower() {
  272. // 判断是否还有下一页数据
  273. if (this.pageNo * this.pageSize >= this.total)
  274. return uni.showToast({
  275. title: `数据加载完毕`
  276. });
  277. // 判断是否正在请求其它数据,如果是,则不发起额外的请求
  278. if (this.loading) return;
  279. this.pageNo += 1;
  280. this.showCheckboxShow(this.pageNo);
  281. }
  282. }
  283. };
  284. </script>
  285. <style lang="scss" scoped>
  286. page {
  287. height: 100%;
  288. background-color: #f5f7f9;
  289. position: relative;
  290. }
  291. body {
  292. background-color: #f5f7f9;
  293. }
  294. .buttomBorder {
  295. height: 0px;
  296. border: 1px dashed #cbd5e1;
  297. }
  298. /deep/ .uni-section .uni-section-header {
  299. padding: 0px;
  300. }
  301. /deep/ .u-form-item__body {
  302. font-weight: 500;
  303. flex-direction: column !important;
  304. }
  305. /deep/ .u-form-item__body__left__content__label {
  306. margin-bottom: 16rpx;
  307. font-size: 30rpx !important;
  308. color: #274647 !important;
  309. }
  310. /deep/ .u-input[data-v-fdbb9fe6],
  311. /deep/ .u-input.data-v-fdbb9fe6,
  312. /deep/ .u-input {
  313. background-color: #fff;
  314. }
  315. /deep/.u-button[data-v-3bf2dba7],
  316. /deep/.u-button.data-v-3bf2dba7,
  317. /deep/.u-button {
  318. width: 60% !important;
  319. }
  320. //弹框样式
  321. .btnList {
  322. // width: 40%;
  323. display: flex;
  324. // display:flex;
  325. .u-button[data-v-3bf2dba7],
  326. .u-button {
  327. width: 30%;
  328. }
  329. }
  330. /deep/ .u-popup__content {
  331. //弹出的宽高
  332. // height: 100%;
  333. }
  334. /deep/ .u-form-item__body__right__message {
  335. //校验的文字的位置
  336. margin-left: 10rpx !important;
  337. }
  338. /deep/ .uicon-close {
  339. //关闭按钮背景色
  340. background-color: rgba(199, 203, 210, 0.9);
  341. border-radius: 10%;
  342. }
  343. .checkbox {
  344. .checkbox-item {
  345. box-sizing: border-box;
  346. padding-top: 40px;
  347. }
  348. }
  349. //侧边联动
  350. .page-body {
  351. display: flex;
  352. background: #fff;
  353. overflow: hidden;
  354. }
  355. .nav {
  356. display: flex;
  357. width: 100%;
  358. }
  359. .nav-left {
  360. width: 25%;
  361. background: #fafafa;
  362. }
  363. .nav-left-item {
  364. height: 100upx;
  365. border-right: solid 1px #f1f1f1;
  366. border-bottom: solid 1px #f1f1f1;
  367. font-size: 30upx;
  368. display: flex;
  369. align-items: center;
  370. justify-content: center;
  371. }
  372. /deep/.nav-right-item[data-v-73caef23],
  373. /deep/.nav-right-item {
  374. display: flex;
  375. flex-wrap: wrap;
  376. }
  377. .nav-left-item:last-child {
  378. border-bottom: none;
  379. }
  380. .nav-right {
  381. width: 75%;
  382. }
  383. .box {
  384. display: block;
  385. overflow: hidden;
  386. border-bottom: 20upx solid #f3f3f3;
  387. /* min-height: 100vh; */
  388. /*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
  389. }
  390. .box:last-child {
  391. border: none;
  392. // min-height: 100vh;
  393. }
  394. .nav-right-item {
  395. margin-top: 20px;
  396. // width: 28%;
  397. // min-height: 200upx;
  398. float: left;
  399. text-align: center;
  400. padding: 11upx;
  401. font-size: 28upx;
  402. background: #fff;
  403. /deep/.u-checkbox__icon-wrap[data-v-532d01c7],
  404. /deep/.u-checkbox__icon-wrap {
  405. //复选框的样式
  406. margin: 0 20rpx;
  407. }
  408. /deep/ uni-view[data-v-3d1b15f2] {
  409. //复选框上线的间距
  410. margin: 20rpx 0 !important;
  411. }
  412. // /deep/ .u-checkbox__icon-wrap--square{
  413. // margin: 20rpx;
  414. // }
  415. .u-checkbox-label--right[data-v-532d01c7],
  416. .u-checkbox-label--right {
  417. margin-right: 40rpx;
  418. }
  419. }
  420. .nav-right-item image {
  421. width: 150upx;
  422. height: 150upx;
  423. }
  424. .active {
  425. font-weight: 700;
  426. color: #274647;
  427. background: #fff;
  428. border-right: 0;
  429. }
  430. ::-webkit-scrollbar {
  431. /*取消小程序的默认导航条样式*/
  432. width: 0;
  433. height: 0;
  434. color: transparent;
  435. }
  436. .selectBtn {
  437. width: 200rpx;
  438. margin-left: 0;
  439. font-size: 30rpx;
  440. background-color: #4cb2b6;
  441. }
  442. .swiper {
  443. height: 370px;
  444. }
  445. .grid-text {
  446. padding-left: 15rpx;
  447. font-weight: 600;
  448. font-size: 16px;
  449. color: #636363;
  450. /* #ifndef APP-PLUS */
  451. box-sizing: border-box;
  452. /* #endif */
  453. }
  454. .example {
  455. overflow-y: auto;
  456. }
  457. </style>