add_drill.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525
  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" :rules='customRules' :model="formData" labelPosition="left" labelWidth="150"
  6. labelAlign="left">
  7. <view class=" flex flex-direction width100">
  8. <u-form-item label="培训演练标题" prop="drillTitle" :required="true">
  9. <u-input v-model="formData.drillTitle" placeholder="请输入培训演练标题" />
  10. </u-form-item>
  11. <u-form-item label="所属单位" @click="
  12. showSex5 = true;
  13. hideKeyboard();
  14. " prop="orgName" :required="true">
  15. <u--input v-model="formData.orgName" disabled disabledColor="#ffffff"
  16. placeholder="请选择所属单位"></u--input>
  17. </u-form-item>
  18. <u-form-item label="记录类型" prop="drillType" @click="
  19. showSex = true;
  20. hideKeyboard();
  21. " :required="true">
  22. <u--input v-model="formData.drillTypeName" disabled disabledColor="#ffffff"
  23. placeholder="请选择记录类型"></u--input>
  24. </u-form-item>
  25. <u-form-item label="培训演练内容">
  26. <u-textarea auto-height maxlength=-1 v-model="formData.drillContent"
  27. placeholder="请输入培训演练内容"></u-textarea>
  28. </u-form-item>
  29. <u-form-item label="培训演练时间" prop="drillDate">
  30. <uni-datetime-picker :show="unitTime" v-model="formData.drillDate" type="datetime"
  31. closeOnClickOverlay @confirm="ActiveUnitTime" @cancel="unitTime = false"
  32. @change="changetime" @close="unitTime = false"></uni-datetime-picker>
  33. </u-form-item>
  34. <u-form-item label="培训演练地点" prop="drillPlace">
  35. <u-input v-model="formData.drillPlace" placeholder="请输入培训演练地点" />
  36. </u-form-item>
  37. <u-form-item label="培训演练讲师">
  38. <u-input v-model="formData.drillLecturer" placeholder="请输入培训演练讲师" />
  39. </u-form-item>
  40. <u-form-item label="参与人员数量">
  41. <u-input v-model="formData.participant" placeholder="请输入参与人员数量" />
  42. </u-form-item>
  43. <u-form-item label="附件">
  44. <!-- 选择文件上传 -->
  45. <uni-file-picker v-model="formData.File" del-icon limit="1" auto-upload file-mediatype="all"
  46. @select="select" @delete="deleteFile">
  47. <button type="primary" class="selectBtn"
  48. style="background-color: rgba(76, 178, 182, 0.5);">选择附件</button>
  49. <!-- 加载中 -->
  50. <isLodingModel v-if="loading"></isLodingModel>
  51. </uni-file-picker>
  52. </u-form-item>
  53. </view>
  54. </u-form>
  55. <u-action-sheet :show="showSex" :actions="actions2" title="*记录类型" @close="showSex = false"
  56. @select="sexSelect2"></u-action-sheet>
  57. <u-action-sheet :show="showSex5" :actions="actions5" title="请选择单位" @close="showSex5 = false"
  58. @select="sexSelect5"></u-action-sheet>
  59. </view>
  60. <uni-row class="heigthButton">
  61. <u-button @click="submit('customForm')" type="primary" shape="circle" size="large" color="#4CB2B6"
  62. text="确认新增"></u-button>
  63. </uni-row>
  64. </view>
  65. </template>
  66. <script>
  67. import {
  68. createDrill, // 更新
  69. getOrgId,
  70. upload, //上传文件
  71. } from '@/api/drill';
  72. import {
  73. DICT_TYPE,
  74. getDictDatas
  75. } from '@/utils/dict';
  76. import {
  77. getAccessToken
  78. } from '@/utils/auth';
  79. import config from '@/config';
  80. import store from '@/store';
  81. import {
  82. uploadAvatar
  83. } from '@/api/system/user';
  84. const baseUrl = config.baseUrl;
  85. var that = null;
  86. export default {
  87. data() {
  88. return {
  89. screenHeight: this.$screenHeight,
  90. wheight: '',
  91. showSex: false, //有无避难层
  92. showSex5: false, //所属单位
  93. actions: [],
  94. actions2: getDictDatas(DICT_TYPE.TRAIN_DRILL),
  95. actions5: [],
  96. // 每页数据量
  97. pageSize: 5,
  98. // 当前页
  99. pageNo: 1,
  100. // 数据总量
  101. total: 0,
  102. unitTime: false,
  103. loading: false,
  104. title: '生成隐患',
  105. content: '确认将此检查项目生成为隐患',
  106. // 自定义表单数据
  107. formData: {
  108. status: '0',
  109. File: [],
  110. drillDate: ''
  111. },
  112. // 自定义表单校验规则
  113. customRules: {
  114. drillTitle: {
  115. type: 'string',
  116. required: true,
  117. message: '培训演练标题不能为空',
  118. trigger: ['blur', 'change']
  119. },
  120. drillType: {
  121. type: 'string',
  122. message: '记录类型不能为空',
  123. trigger: ['blur', 'change']
  124. },
  125. orgName: {
  126. type: 'string',
  127. message: '请选择所属单位',
  128. trigger: ['blur', 'change']
  129. }
  130. }
  131. };
  132. },
  133. watch: {
  134. loading: {
  135. handler(newLength, oldLength) {
  136. this.$modal.isLoadingModel(this.loading)
  137. },
  138. immediate: true
  139. }
  140. },
  141. computed: {},
  142. mounted() {
  143. uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
  144. this.wheight = data.height
  145. }).exec()
  146. },
  147. // 在 vue页面,向起始页通过事件传递数据
  148. // 在 vue页面,向起始页通过事件传递数据
  149. onLoad: function(option) {
  150. this.formData.orgName = option.orgName ? option.orgName : ''
  151. this.formData.orgId = option.orgId ? option.orgId : ''
  152. this.actions2.map(i => {
  153. i.name = i.label;
  154. i.id = i.value;
  155. });
  156. // 获取单位id
  157. getOrgId({
  158. pageNo: this.pageNo,
  159. pageSize: this.pageSize,
  160. userId: this.$store.state.user.id
  161. }).then(response => {
  162. // 取到用户对应的单位名称与id
  163. response.data.map(v => {
  164. this.actions5.push({
  165. id: v.dwid,
  166. name: v.orgName
  167. });
  168. });
  169. });
  170. },
  171. onReady() {
  172. this.$refs.customForm.setRules(this.customRules);
  173. },
  174. methods: {
  175. submit(ref) {
  176. if (!this.formData.orgName) {
  177. return this.$modal.msgError('请选择所属单位')
  178. } else if (!this.formData.drillType) {
  179. return this.$modal.msgError('请选择记录类型')
  180. }
  181. if (this.formData.drillDate && this.formData.drillDate.indexOf(":") === -1) {
  182. this.formData.drillDate = this.formData.drillDate + ' 00:00:00'
  183. }
  184. this.$refs[ref]
  185. .validate()
  186. .then(res => {
  187. this.formData['status'] = 0;
  188. if (this.formData.File.length > 0) {
  189. this.formData.attId = this.formData.File[0].url.toString();
  190. } else {
  191. this.formData.attId = ''
  192. }
  193. var jsdata = JSON.stringify(this.formData);
  194. createDrill(jsdata).then(response => {
  195. uni.showLoading({
  196. title: response.data.msg
  197. });
  198. setTimeout(() => {
  199. uni.hideLoading();
  200. uni.navigateBack({
  201. delta: 1
  202. })
  203. }, 0);
  204. }).catch(err => {});
  205. })
  206. .catch(err => {
  207. // uni.showToast({
  208. // icon:'none',
  209. // title:'错误!'+ err[0].message
  210. // })
  211. });
  212. },
  213. // 上传图片 获取上传状态
  214. // 选择上传触发函数
  215. select(e) {
  216. // 根据所选图片的个数,多次调用上传函数
  217. let promises = [];
  218. for (let i = 0; i < e.tempFilePaths.length; i++) {
  219. const promise = this.uploadFiles(e.tempFilePaths, i);
  220. promises.push(promise);
  221. }
  222. Promise.all(promises).then(result => {});
  223. },
  224. // 上传函数
  225. async uploadFiles(tempFilePaths, i) {
  226. const that = this;
  227. this.loading = true
  228. await uni.uploadFile({
  229. url: baseUrl + '/admin-api/infra/file/upload', //后端用于处理图片并返回图片地址的接口
  230. filePath: tempFilePaths[i],
  231. name: 'file',
  232. header: {
  233. Authorization: 'Bearer ' + getAccessToken()
  234. }, //请求token
  235. success: res => {
  236. let data = JSON.parse(res.data);
  237. // 返回的url
  238. var fileLink = data.data;
  239. const code = data.code;
  240. // 如果成功,将返回的data数据给 formdata
  241. if (code == 0) {
  242. that.formData.File.push({
  243. url: fileLink,
  244. name: fileLink
  245. });
  246. uni.showToast({
  247. title: '文件上传成功!'
  248. });
  249. that.loading = false
  250. // that.formData.attId = fileLink
  251. }
  252. // this.formData.attId = this.formData.attId.toString();
  253. },
  254. fail: () => {
  255. uni.showToast({
  256. icon: 'error',
  257. title: '文件上传失败!'
  258. });
  259. }
  260. });
  261. },
  262. // 移出图片函数
  263. async deleteFile(e) {
  264. this.formData.attId = [];
  265. },
  266. // 隐藏键盘
  267. hideKeyboard() {
  268. uni.hideKeyboard();
  269. },
  270. // 记录类型
  271. sexSelect2(e) {
  272. this.formData.drillType = e.value;
  273. this.formData.drillTypeName = e.label;
  274. },
  275. // 单位成立时间
  276. ActiveUnitTime(e) {
  277. // this.unitTime = false;
  278. // let value = new Date(e.value);
  279. // // this.formData.drillDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM');
  280. },
  281. changetime(e) {
  282. },
  283. // 所属单位
  284. sexSelect5(e) {
  285. this.formData.orgId = e.id;
  286. this.formData.orgName = e.name;
  287. },
  288. // 生成隐患弹出层 //暂存为草稿箱弹出层
  289. cancel() {
  290. this.show = false;
  291. },
  292. confirm() {
  293. setTimeout(() => {
  294. // 0.5秒后自动关闭
  295. this.show = false;
  296. }, 500);
  297. },
  298. // 触底的事件
  299. scrolltolower() {
  300. // 判断是否还有下一页数据
  301. if (this.pageNo * this.pageSize >= this.total)
  302. return uni.showToast({
  303. title: `数据加载完毕`
  304. });
  305. // 判断是否正在请求其它数据,如果是,则不发起额外的请求
  306. if (this.loading) return;
  307. this.pageNo += 1;
  308. this.showCheckboxShow(this.pageNo);
  309. }
  310. }
  311. };
  312. </script>
  313. <style lang="scss" scoped>
  314. page {
  315. height: 100%;
  316. background-color: #f5f7f9;
  317. position: relative;
  318. }
  319. .buttomBorder {
  320. height: 0px;
  321. border: 1px dashed #cbd5e1;
  322. }
  323. /deep/ .uni-section .uni-section-header {
  324. padding: 0px;
  325. }
  326. /deep/ .u-form-item__body {
  327. font-weight: 500;
  328. flex-direction: column !important;
  329. }
  330. /deep/ .u-form-item__body__left__content__label {
  331. margin-bottom: 16rpx;
  332. font-size: 30rpx !important;
  333. color: #274647 !important;
  334. }
  335. .arrow-icon {
  336. //主动检查箭头
  337. position: absolute;
  338. right: 14px;
  339. top: 49px;
  340. transform: rotate(90deg);
  341. }
  342. /deep/ .u-input[data-v-fdbb9fe6],
  343. /deep/ .u-input.data-v-fdbb9fe6,
  344. /deep/ .u-input {
  345. background-color: #fff;
  346. }
  347. /deep/.u-button[data-v-3bf2dba7],
  348. /deep/.u-button.data-v-3bf2dba7,
  349. /deep/.u-button {
  350. width: 60% !important;
  351. }
  352. //弹框样式
  353. .btnList {
  354. // width: 40%;
  355. display: flex;
  356. // display:flex;
  357. .u-button[data-v-3bf2dba7] {
  358. width: 30%;
  359. }
  360. }
  361. /deep/ .u-popup__content {
  362. //弹出的宽高
  363. height: 100%;
  364. }
  365. /deep/ .u-form-item__body__right__message {
  366. //校验的文字的位置
  367. margin-left: 10rpx !important;
  368. }
  369. /deep/ .uicon-close {
  370. //关闭按钮背景色
  371. background-color: rgba(199, 203, 210, 0.9);
  372. border-radius: 10%;
  373. }
  374. .checkbox {
  375. .checkbox-item {
  376. box-sizing: border-box;
  377. padding-top: 40px;
  378. }
  379. }
  380. //侧边联动
  381. .page-body {
  382. display: flex;
  383. background: #fff;
  384. overflow: hidden;
  385. }
  386. .nav {
  387. display: flex;
  388. width: 100%;
  389. }
  390. .nav-left {
  391. width: 25%;
  392. background: #fafafa;
  393. }
  394. .nav-left-item {
  395. height: 100upx;
  396. border-right: solid 1px #f1f1f1;
  397. border-bottom: solid 1px #f1f1f1;
  398. font-size: 30upx;
  399. display: flex;
  400. align-items: center;
  401. justify-content: center;
  402. }
  403. /deep/.nav-right-item[data-v-73caef23],
  404. /deep/.nav-right-item {
  405. display: flex;
  406. flex-wrap: wrap;
  407. }
  408. .nav-left-item:last-child {
  409. border-bottom: none;
  410. }
  411. .nav-right {
  412. width: 75%;
  413. }
  414. .box {
  415. display: block;
  416. overflow: hidden;
  417. border-bottom: 20upx solid #f3f3f3;
  418. /* min-height: 100vh; */
  419. /*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
  420. }
  421. .box:last-child {
  422. border: none;
  423. // min-height: 100vh;
  424. }
  425. .nav-right-item {
  426. margin-top: 20px;
  427. // width: 28%;
  428. // min-height: 200upx;
  429. float: left;
  430. text-align: center;
  431. padding: 11upx;
  432. font-size: 28upx;
  433. background: #fff;
  434. /deep/.u-checkbox__icon-wrap[data-v-532d01c7],
  435. /deep/.u-checkbox__icon-wrap {
  436. //复选框的样式
  437. margin: 0 20rpx;
  438. }
  439. /deep/ uni-view[data-v-3d1b15f2] {
  440. //复选框上线的间距
  441. margin: 20rpx 0 !important;
  442. }
  443. // /deep/ .u-checkbox__icon-wrap--square{
  444. // margin: 20rpx;
  445. // }
  446. .u-checkbox-label--right[data-v-532d01c7],
  447. .u-checkbox-label--right {
  448. margin-right: 40rpx;
  449. }
  450. }
  451. .nav-right-item image {
  452. width: 150upx;
  453. height: 150upx;
  454. }
  455. .active {
  456. font-weight: 700;
  457. color: #274647;
  458. background: #fff;
  459. border-right: 0;
  460. }
  461. ::-webkit-scrollbar {
  462. /*取消小程序的默认导航条样式*/
  463. width: 0;
  464. height: 0;
  465. color: transparent;
  466. }
  467. .selectBtn {
  468. width: 200rpx;
  469. margin-left: 0;
  470. font-size: 30rpx;
  471. background-color: #4cb2b6;
  472. }
  473. /deep/.u-action-sheet {
  474. overflow-y: auto;
  475. height: 1000rpx;
  476. background-color: #fff;
  477. }
  478. .example {
  479. overflow-y: auto;
  480. }
  481. </style>