index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378
  1. <template>
  2. <view class="uni-container">
  3. <view class="example container" :style="'height: ' + (screenHeight - wheight - 85) + 'px'">
  4. <u--form ref="customForm" :model="formData" labelPosition="left" labelWidth="100%" labelAlign="left">
  5. <view class="juli-bottom">
  6. <u-form-item label="所属单位" prop="orgName" @click="showOrg = true; hideKeyboard()" :required="true">
  7. <u-input v-model="formData.orgName" placeholder="请输入" :disabled="isview" />
  8. </u-form-item>
  9. <u-form-item label="动火事由" prop="workReason" :required="true">
  10. <u-input v-model="formData.workReason" placeholder="请输入" :disabled="isview" />
  11. </u-form-item>
  12. <u-form-item label="动火作业执行人" prop="executor" :required="true"
  13. style="position: relative;">
  14. <view slot="label" style="display: flex;">
  15. <text style="color:#000;font-size: 15px;"><text style="color: red;margin-right: 4px">*</text>动火作业执行人</text>
  16. <u-button @click="onAddPerson" shape="circle" size="mini" style="margin-bottom: 10px;width: 80px;" :custom-style="{backgroundColor: '#4CB2B6',color:'#fff',padding:'12px 0'}">新增人员</u-button>
  17. </view>
  18. <view class="" @click="addPerson">
  19. <u-input v-model="formData.executor" placeholder="请选择" :disabled="isview" />
  20. </view>
  21. </u-form-item>
  22. <u-form-item label="动火台账状态" prop="workStatus" :required="true" v-if="isview">
  23. <u-input v-model="formData.workStatus" placeholder="请选择" :disabled="isview" />
  24. <!-- @click="showSex = true; hideKeyboard()" -->
  25. </u-form-item>
  26. <picker mode="date" :value="dateTime" @change="bindDateChange" :disabled="isview">
  27. <view class="datatime-street">
  28. <u-form-item label="动火开始时间" prop="workBegin" :required="true">
  29. <u-input v-model="formData.workBegin" placeholder="动火结束时间" class="add-date"
  30. :disabled="isview" />
  31. </u-form-item>
  32. </view>
  33. </picker>
  34. <picker mode="date" @change="bindDateChange2" :disabled="isview">
  35. <view class="datatime-street">
  36. <u-form-item label="动火结束时间" prop="workEnd" :required="true">
  37. <u-input v-model="formData.workEnd" placeholder="动火结束时间" class="add-date"
  38. :disabled="isview" />
  39. </u-form-item>
  40. </view>
  41. </picker>
  42. <u-form-item label="附件">
  43. <!-- 选择文件上传,limit="1则最多选择一张图片,del-icon隐藏删除按钮 -->
  44. <uni-file-picker v-model="formData.attId" del-icon limit="1" auto-upload file-mediatype="all"
  45. @select="selectFile" @delete="deleteFile" :disabled="isview">
  46. <button type="primary" class="selectBtn" :disabled="isview">选择文件</button>
  47. <!-- 加载中 -->
  48. <isLodingModel v-if="loading"></isLodingModel>
  49. </uni-file-picker>
  50. </u-form-item>
  51. <u-form-item label="已上传附件:" v-if="formData.att" labelWidth="150">
  52. <u-icon name="close" color="#4CB2B6" size="24" @click="closeImage()" v-if="!isview">
  53. </u-icon>
  54. <!-- #ifdef MP-WEIXIN -->
  55. <text style="color:#00a3f4;cursor: pointer;margin-left: 20px !important;"
  56. @click.native="viewSee(formData.att)">点击预览文件</text>
  57. <!-- #endif -->
  58. <!-- #ifdef H5 -->
  59. <a style="color:#00a3f4;cursor: pointer;margin-left: 20px !important;"
  60. @click="viewSee(formData.att)">点击预览文件</a>
  61. <!-- #endif -->
  62. </u-form-item>
  63. </view>
  64. </u--form>
  65. </view>
  66. <view class="heigthButton">
  67. <u-button v-if="isedit" @click="submit('customForm')" type="primary" shape="circle" size="large"
  68. color="#4CB2B6" text="确认修改" style="width:200px">
  69. </u-button>
  70. <u-button v-else-if="!isedit&&!isview" @click="submit('customForm')" type="primary" shape="circle"
  71. size="large" color="#4CB2B6" text="确认新增" style="width:200px">
  72. </u-button>
  73. <u-button v-else-if="isview" @click="submit('customForm')" type="primary" shape="circle" size="large"
  74. color="#4CB2B6" text="返回" style="width:200px">
  75. </u-button>
  76. </view>
  77. <u-action-sheet :show="showSex" :actions="actionsSex" title="请选择动火台账状态" @close="showSex = false"
  78. @select="sexSelect">
  79. </u-action-sheet>
  80. <u-action-sheet :show="showExecutor" :actions="actionsExecutor" class="popups" title="请选择动火作业执行人"
  81. @close="showExecutor = false" @select="clickExecutor">
  82. </u-action-sheet>
  83. <u-action-sheet :show="showOrg" :actions="orgaction" title="请选择单位" class="org-choice popups"
  84. @close="showOrg = false" @select="orgSelect"></u-action-sheet>
  85. </view>
  86. </template>
  87. <script>
  88. import {
  89. fireWorkUpdate,
  90. fireWorkCreate,
  91. fireWorkIdGet,
  92. fireSpecialPage, //动火执行人
  93. } from '@/api/fireSpecial';
  94. import {
  95. NumericRule,
  96. downSee,
  97. uploadFile
  98. } from '@/utils/common.js';
  99. import config from '@/config'
  100. import {
  101. DICT_TYPE,
  102. getDictDatas
  103. } from "@/utils/dict";
  104. const baseUrlImg = config.baseUrlImg
  105. export default {
  106. data() {
  107. return {
  108. screenHeight: this.$screenHeight,
  109. wheight: '',
  110. showExecutor: false, //动火台账执行人
  111. actionsExecutor: [],
  112. formData: {
  113. orgName: '',
  114. orgId: '',
  115. workReason: '',
  116. executor: '',
  117. workStatus: '0',
  118. workBegin: '',
  119. workEnd: '',
  120. att: '',
  121. attId: []
  122. },
  123. loading: '',
  124. rules: {
  125. workReason: [{
  126. type: 'string',
  127. required: true,
  128. message: '动火事由不能为空',
  129. trigger: ['blur', 'change']
  130. }],
  131. executor: [{
  132. type: 'string',
  133. required: true,
  134. message: '动火作业执行人不能为空',
  135. trigger: ['blur', 'change']
  136. }],
  137. workStatus: [{
  138. type: 'string',
  139. required: true,
  140. message: '动火台账状态不能为空',
  141. trigger: ['blur', 'change']
  142. }],
  143. workBegin: [{
  144. type: 'string',
  145. required: true,
  146. message: '动火开始时间不能为空',
  147. trigger: ['blur', 'change']
  148. }],
  149. workEnd: [{
  150. type: 'string',
  151. required: true,
  152. message: '动火结束时间不能为空',
  153. trigger: ['blur', 'change']
  154. }],
  155. // empName: NumericRule(),
  156. },
  157. isedit: '',
  158. isview: '',
  159. dateTime: '',
  160. showSex: false,
  161. actionsSex: getDictDatas(DICT_TYPE.FIRE_WORK_STATUS), //性别
  162. workStatus: getDictDatas(DICT_TYPE.FIRE_WORK_STATUS), //台账状态
  163. orgaction: [], //单位
  164. showOrg: false
  165. }
  166. },
  167. onReady() {
  168. this.$refs.customForm.setRules(this.rules);
  169. },
  170. mounted() {
  171. uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
  172. this.wheight = data.height
  173. }).exec()
  174. },
  175. onLoad(option) {
  176. this.formData.orgName = option.orgName ? option.orgName : ''
  177. this.formData.orgId = option.orgId ? option.orgId : ''
  178. this.orgaction = option.orgaction ? JSON.parse(option.orgaction) : []
  179. this.actionsSex.map(i => i.name = i.label)
  180. uni.setNavigationBarTitle({
  181. title: option.title
  182. })
  183. if (option.editData) {
  184. this.isedit = true
  185. this.isview = false
  186. this.parentId = option.editData
  187. this.getData()
  188. // this.formData = JSON.parse(option.editData)
  189. } else if (option.viewData) {
  190. this.isview = true
  191. this.parentId = option.viewData
  192. this.getData()
  193. // this.formData = JSON.parse(option.viewData)
  194. } else {
  195. this.isedit = false
  196. this.isview = false
  197. }
  198. },
  199. onShow() {
  200. // 获取动火作业执行人数据
  201. let arrOrg = []
  202. arrOrg.push(this.formData.orgId)
  203. fireSpecialPage({
  204. pageNo: 1,
  205. pageSize: 100,
  206. orgIds: arrOrg,
  207. }).then(response => {
  208. this.actionsExecutor = response.data ? response.data.list : []
  209. this.actionsExecutor.map(i => {
  210. i.name = i.empName
  211. })
  212. });
  213. },
  214. methods: {
  215. onAddPerson(){
  216. uni.navigateTo({
  217. url: `/pagesB/fire/fireSpecial/addSpecial/index?title=新增特种人员`
  218. })
  219. },
  220. addPerson() {
  221. this.showExecutor = true;
  222. uni.hideKeyboard()
  223. },
  224. clickExecutor(e) { //动火台账执行人
  225. this.formData.executor = e.name
  226. },
  227. //查看已上传附件
  228. viewSee(val) {
  229. downSee(val)
  230. },
  231. // 移出图片函数
  232. async deleteFile(e) {
  233. this.formData.attId = [];
  234. },
  235. selectFile(e) {
  236. let promises = [];
  237. for (let i = 0; i < e.tempFilePaths.length; i++) {
  238. const promise = uploadFile(e.tempFilePaths, i, this);
  239. promises.push(promise);
  240. }
  241. Promise.all(promises).then(result => {
  242. // 处理上传文件成功的结果
  243. }).catch(error => {
  244. // 处理上传文件失败的错误
  245. });
  246. },
  247. closeImage() {
  248. this.formData.attId = []
  249. this.formData.att = ''
  250. this.$forceUpdate()
  251. },
  252. sexSelect(e) {
  253. this.formData.workStatus = e.name
  254. },
  255. orgSelect(e) {
  256. this.formData.orgName = e.name
  257. this.formData.orgId = e.value
  258. },
  259. hideKeyboard() {
  260. uni.hideKeyboard()
  261. },
  262. getData() {
  263. fireWorkIdGet({
  264. id: this.parentId
  265. }).then(response => {
  266. this.formData = response.data
  267. this.workStatus.map(i => {
  268. if (this.formData.workStatus == i.value)
  269. this.formData.workStatus = i.label
  270. })
  271. })
  272. },
  273. bindDateChange(e) {
  274. this.formData.workBegin = e.detail.value
  275. },
  276. bindDateChange2(e) {
  277. this.formData.workEnd = e.detail.value
  278. },
  279. submit(ref) {
  280. const end = new Date(this.formData.workEnd).getTime()
  281. const start = new Date(this.formData.workBegin).getTime()
  282. if (start > end) {
  283. return this.$modal.msg('结束时间不能小于开始时间')
  284. }
  285. this.$refs[ref].validate().then(res => {
  286. if (this.formData.attId && this.formData.attId.length > 0) {
  287. this.formData.att = this.formData.attId[0];
  288. } else {
  289. this.formData.att = this.formData.att;
  290. }
  291. if (this.isedit) {
  292. fireWorkUpdate(JSON.stringify(this.formData)).then(res => {
  293. this.$modal.msg('修改成功')
  294. this.isedit = false
  295. setTimeout(() => {
  296. uni.navigateBack()
  297. }, 400)
  298. })
  299. } else if (this.isview) {
  300. this.isview = false
  301. uni.navigateBack()
  302. } else {
  303. fireWorkCreate(JSON.stringify(this.formData)).then(response => {
  304. this.$modal.msg('新增成功')
  305. setTimeout(() => {
  306. uni.navigateBack()
  307. }, 400)
  308. })
  309. }
  310. }).catch(err => {})
  311. }
  312. }
  313. }
  314. </script>
  315. <style lang="scss" scoped>
  316. body {
  317. background-color: #f5f7f9;
  318. }
  319. page {
  320. background-color: #f5f7f9 !important;
  321. }
  322. .uni-container {
  323. // height: 100vh;
  324. background-color: #f5f7f9 !important;
  325. }
  326. /deep/.uni-card {
  327. position: relative;
  328. box-shadow: 0px 0px 3px 0px rgba(86, 165, 168, 0.15);
  329. border-radius: 30rpx;
  330. }
  331. .example {
  332. overflow-y: auto;
  333. }
  334. .juli-bottom {
  335. /deep/ .u-form-item__body__left__content__label {
  336. color: #000 !important;
  337. }
  338. }
  339. .org-choice {
  340. /deep/.u-action-sheet {
  341. overflow-y: auto;
  342. height: 1000rpx;
  343. background-color: #fff;
  344. }
  345. }
  346. .selectBtn {
  347. width: 200rpx;
  348. margin-left: 0;
  349. font-size: 30rpx;
  350. background-color: #4cb2b6;
  351. }
  352. .popups {
  353. /deep/.u-action-sheet {
  354. overflow-y: auto;
  355. height: 1000rpx;
  356. background-color: #fff;
  357. }
  358. }
  359. .example {
  360. overflow-y: auto;
  361. }
  362. </style>s