add_drill.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539
  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. console.log(response, 'response');
  163. // 取到用户对应的单位名称与id
  164. response.data.map(v => {
  165. this.actions5.push({
  166. id: v.dwid,
  167. name: v.orgName
  168. });
  169. });
  170. });
  171. },
  172. onReady() {
  173. this.$refs.customForm.setRules(this.customRules);
  174. },
  175. methods: {
  176. submit(ref) {
  177. console.log(this.formData, 'alertalertalert');
  178. if (!this.formData.orgName) {
  179. return this.$modal.msgError('请选择所属单位')
  180. } else if (!this.formData.drillType) {
  181. return this.$modal.msgError('请选择记录类型')
  182. }
  183. if (this.formData.drillDate && this.formData.drillDate.indexOf(":") === -1) {
  184. this.formData.drillDate = this.formData.drillDate + ' 00:00:00'
  185. }
  186. this.$refs[ref]
  187. .validate()
  188. .then(res => {
  189. this.formData['status'] = 0;
  190. console.log(this.formData);
  191. if (this.formData.File.length > 0) {
  192. this.formData.attId = this.formData.File[0].url.toString();
  193. } else {
  194. this.formData.attId = ''
  195. }
  196. var jsdata = JSON.stringify(this.formData);
  197. console.log(jsdata, 'jsdatajsdatajsdata');
  198. createDrill(jsdata).then(response => {
  199. console.log('response.data.msg,', response.data);
  200. uni.showLoading({
  201. title: response.data.msg
  202. });
  203. setTimeout(() => {
  204. console.log('新增成功!');
  205. uni.hideLoading();
  206. uni.navigateBack({
  207. delta: 1
  208. })
  209. }, 0);
  210. }).catch(err => {});
  211. })
  212. .catch(err => {
  213. // console.log(err,'eeeeeeeeee');
  214. // uni.showToast({
  215. // icon:'none',
  216. // title:'错误!'+ err[0].message
  217. // })
  218. });
  219. },
  220. // 上传图片 获取上传状态
  221. // 选择上传触发函数
  222. select(e) {
  223. // 根据所选图片的个数,多次调用上传函数
  224. let promises = [];
  225. for (let i = 0; i < e.tempFilePaths.length; i++) {
  226. const promise = this.uploadFiles(e.tempFilePaths, i);
  227. promises.push(promise);
  228. }
  229. Promise.all(promises).then(result => {});
  230. },
  231. // 上传函数
  232. async uploadFiles(tempFilePaths, i) {
  233. const that = this;
  234. this.loading = true
  235. await uni.uploadFile({
  236. url: baseUrl + '/admin-api/infra/file/upload', //后端用于处理图片并返回图片地址的接口
  237. filePath: tempFilePaths[i],
  238. name: 'file',
  239. header: {
  240. Authorization: 'Bearer ' + getAccessToken()
  241. }, //请求token
  242. success: res => {
  243. console.log('res', res);
  244. let data = JSON.parse(res.data);
  245. // 返回的url
  246. var fileLink = data.data;
  247. const code = data.code;
  248. // 如果成功,将返回的data数据给 formdata
  249. if (code == 0) {
  250. that.formData.File.push({
  251. url: fileLink,
  252. name: fileLink
  253. });
  254. uni.showToast({
  255. title: '文件上传成功!'
  256. });
  257. that.loading = false
  258. // that.formData.attId = fileLink
  259. }
  260. // this.formData.attId = this.formData.attId.toString();
  261. },
  262. fail: () => {
  263. console.log('err');
  264. uni.showToast({
  265. icon: 'error',
  266. title: '文件上传失败!'
  267. });
  268. }
  269. });
  270. },
  271. // 移出图片函数
  272. async deleteFile(e) {
  273. console.log(e);
  274. this.formData.attId = [];
  275. console.log('移除了:', this.formData.attId);
  276. },
  277. // 隐藏键盘
  278. hideKeyboard() {
  279. uni.hideKeyboard();
  280. },
  281. // 记录类型
  282. sexSelect2(e) {
  283. this.formData.drillType = e.value;
  284. this.formData.drillTypeName = e.label;
  285. console.log(this.formData.drillType);
  286. },
  287. // 单位成立时间
  288. ActiveUnitTime(e) {
  289. // this.unitTime = false;
  290. // console.log(e.value, e.mode);
  291. // let value = new Date(e.value);
  292. // // this.formData.drillDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM');
  293. },
  294. changetime(e) {
  295. console.log('change', e);
  296. },
  297. // 所属单位
  298. sexSelect5(e) {
  299. this.formData.orgId = e.id;
  300. this.formData.orgName = e.name;
  301. console.log(this.formData.orgId);
  302. },
  303. // 生成隐患弹出层 //暂存为草稿箱弹出层
  304. cancel() {
  305. this.show = false;
  306. },
  307. confirm() {
  308. setTimeout(() => {
  309. // 0.5秒后自动关闭
  310. this.show = false;
  311. }, 500);
  312. },
  313. // 触底的事件
  314. scrolltolower() {
  315. // 判断是否还有下一页数据
  316. if (this.pageNo * this.pageSize >= this.total)
  317. return uni.showToast({
  318. title: `数据加载完毕`
  319. });
  320. // 判断是否正在请求其它数据,如果是,则不发起额外的请求
  321. if (this.loading) return;
  322. this.pageNo += 1;
  323. this.showCheckboxShow(this.pageNo);
  324. }
  325. }
  326. };
  327. </script>
  328. <style lang="scss" scoped>
  329. page {
  330. height: 100%;
  331. background-color: #f5f7f9;
  332. position: relative;
  333. }
  334. .buttomBorder {
  335. height: 0px;
  336. border: 1px dashed #cbd5e1;
  337. }
  338. /deep/ .uni-section .uni-section-header {
  339. padding: 0px;
  340. }
  341. /deep/ .u-form-item__body {
  342. font-weight: 500;
  343. flex-direction: column !important;
  344. }
  345. /deep/ .u-form-item__body__left__content__label {
  346. margin-bottom: 16rpx;
  347. font-size: 30rpx !important;
  348. color: #274647 !important;
  349. }
  350. .arrow-icon {
  351. //主动检查箭头
  352. position: absolute;
  353. right: 14px;
  354. top: 49px;
  355. transform: rotate(90deg);
  356. }
  357. /deep/ .u-input[data-v-fdbb9fe6],
  358. /deep/ .u-input.data-v-fdbb9fe6,
  359. /deep/ .u-input {
  360. background-color: #fff;
  361. }
  362. /deep/.u-button[data-v-3bf2dba7],
  363. /deep/.u-button.data-v-3bf2dba7,
  364. /deep/.u-button {
  365. width: 60% !important;
  366. }
  367. //弹框样式
  368. .btnList {
  369. // width: 40%;
  370. display: flex;
  371. // display:flex;
  372. .u-button[data-v-3bf2dba7] {
  373. width: 30%;
  374. }
  375. }
  376. /deep/ .u-popup__content {
  377. //弹出的宽高
  378. height: 100%;
  379. }
  380. /deep/ .u-form-item__body__right__message {
  381. //校验的文字的位置
  382. margin-left: 10rpx !important;
  383. }
  384. /deep/ .uicon-close {
  385. //关闭按钮背景色
  386. background-color: rgba(199, 203, 210, 0.9);
  387. border-radius: 10%;
  388. }
  389. .checkbox {
  390. .checkbox-item {
  391. box-sizing: border-box;
  392. padding-top: 40px;
  393. }
  394. }
  395. //侧边联动
  396. .page-body {
  397. display: flex;
  398. background: #fff;
  399. overflow: hidden;
  400. }
  401. .nav {
  402. display: flex;
  403. width: 100%;
  404. }
  405. .nav-left {
  406. width: 25%;
  407. background: #fafafa;
  408. }
  409. .nav-left-item {
  410. height: 100upx;
  411. border-right: solid 1px #f1f1f1;
  412. border-bottom: solid 1px #f1f1f1;
  413. font-size: 30upx;
  414. display: flex;
  415. align-items: center;
  416. justify-content: center;
  417. }
  418. /deep/.nav-right-item[data-v-73caef23],
  419. /deep/.nav-right-item {
  420. display: flex;
  421. flex-wrap: wrap;
  422. }
  423. .nav-left-item:last-child {
  424. border-bottom: none;
  425. }
  426. .nav-right {
  427. width: 75%;
  428. }
  429. .box {
  430. display: block;
  431. overflow: hidden;
  432. border-bottom: 20upx solid #f3f3f3;
  433. /* min-height: 100vh; */
  434. /*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
  435. }
  436. .box:last-child {
  437. border: none;
  438. // min-height: 100vh;
  439. }
  440. .nav-right-item {
  441. margin-top: 20px;
  442. // width: 28%;
  443. // min-height: 200upx;
  444. float: left;
  445. text-align: center;
  446. padding: 11upx;
  447. font-size: 28upx;
  448. background: #fff;
  449. /deep/.u-checkbox__icon-wrap[data-v-532d01c7],
  450. /deep/.u-checkbox__icon-wrap {
  451. //复选框的样式
  452. margin: 0 20rpx;
  453. }
  454. /deep/ uni-view[data-v-3d1b15f2] {
  455. //复选框上线的间距
  456. margin: 20rpx 0 !important;
  457. }
  458. // /deep/ .u-checkbox__icon-wrap--square{
  459. // margin: 20rpx;
  460. // }
  461. .u-checkbox-label--right[data-v-532d01c7],
  462. .u-checkbox-label--right {
  463. margin-right: 40rpx;
  464. }
  465. }
  466. .nav-right-item image {
  467. width: 150upx;
  468. height: 150upx;
  469. }
  470. .active {
  471. font-weight: 700;
  472. color: #274647;
  473. background: #fff;
  474. border-right: 0;
  475. }
  476. ::-webkit-scrollbar {
  477. /*取消小程序的默认导航条样式*/
  478. width: 0;
  479. height: 0;
  480. color: transparent;
  481. }
  482. .selectBtn {
  483. width: 200rpx;
  484. margin-left: 0;
  485. font-size: 30rpx;
  486. background-color: #4cb2b6;
  487. }
  488. /deep/.u-action-sheet {
  489. overflow-y: auto;
  490. height: 1000rpx;
  491. background-color: #fff;
  492. }
  493. .example {
  494. overflow-y: auto;
  495. }
  496. </style>