index.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  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()">
  7. <u-input v-model="formData.orgName" placeholder="请输入" :disabled="isview" />
  8. </u-form-item>
  9. <u-form-item label="人员姓名" prop="empName" :required="true">
  10. <u-input v-model="formData.empName" placeholder="请输入" :disabled="isview" />
  11. </u-form-item>
  12. <u-form-item label="特种证书编号" prop="numberCode" :required="true">
  13. <u-input v-model="formData.numberCode" placeholder="请输入" :disabled="isview" />
  14. </u-form-item>
  15. <u-form-item label="身份证号" prop="idcardno" :required="true">
  16. <u-input v-model="formData.idcardno" placeholder="请输入" :disabled="isview" />
  17. </u-form-item>
  18. <u-form-item label="性别" prop="empGender" @click="showSex = true; hideKeyboard()">
  19. <u-input v-model="formData.empGender" placeholder="请选择" :disabled="isview" />
  20. </u-form-item>
  21. <picker mode="date" :value="dateTime" @change="bindDateChange" :disabled="isview">
  22. <view class="datatime-street">
  23. <u-form-item label="人员出生日期" prop="empBirthday">
  24. <u-input v-model="formData.empBirthday" placeholder="人员出生日期" class="add-date"
  25. :disabled="isview" />
  26. </u-form-item>
  27. </view>
  28. </picker>
  29. <picker mode="date" @change="bindDateChange2" :disabled="isview">
  30. <view class="datatime-street">
  31. <u-form-item label="颁证时间" prop="issueDate">
  32. <u-input v-model="formData.issueDate" placeholder="颁证时间" class="add-date"
  33. :disabled="isview" />
  34. </u-form-item>
  35. </view>
  36. </picker>
  37. <u-form-item label="附件">
  38. <!-- 选择文件上传,limit="1则最多选择一张图片,del-icon隐藏删除按钮 -->
  39. <uni-file-picker v-model="formData.attId" del-icon limit="1" auto-upload file-mediatype="all"
  40. @select="selectFile" @delete="deleteFile" :disabled="isview">
  41. <button type="primary" class="selectBtn" :disabled="isview">选择文件</button>
  42. <!-- 加载中 -->
  43. <isLodingModel v-if="loading"></isLodingModel>
  44. </uni-file-picker>
  45. </u-form-item>
  46. <u-form-item label="已上传附件:" v-if="formData.att" labelWidth="150">
  47. <u-icon name="close" color="#4CB2B6" size="24" @click="closeImage()" v-if="!isview">
  48. </u-icon>
  49. <!-- #ifdef MP-WEIXIN -->
  50. <text style="color:#00a3f4;cursor: pointer;margin-left: 20px !important;"
  51. @click.native="viewSee(formData.att)">点击预览文件</text>
  52. <!-- #endif -->
  53. <!-- #ifdef H5 -->
  54. <a style="color:#00a3f4;cursor: pointer;margin-left: 20px !important;"
  55. @click="viewSee(formData.att)">点击预览文件</a>
  56. <!-- #endif -->
  57. </u-form-item>
  58. </view>
  59. </u--form>
  60. </view>
  61. <view class="heigthButton">
  62. <u-button v-if="isedit" @click="submit('customForm')" type="primary" shape="circle" size="large"
  63. color="#4CB2B6" text="确认修改" style="width:200px">
  64. </u-button>
  65. <u-button v-else-if="!isedit&&!isview" @click="submit('customForm')" type="primary" shape="circle" size="large"
  66. color="#4CB2B6" text="确认新增" style="width:200px">
  67. </u-button>
  68. <u-button v-else-if="isview" @click="submit('customForm')" type="primary" shape="circle" size="large"
  69. color="#4CB2B6" text="返回" style="width:200px">
  70. </u-button>
  71. </view>
  72. <u-action-sheet :show="showSex" :actions="actionsSex" title="请选择性别" @close="showSex = false"
  73. @select="sexSelect">
  74. </u-action-sheet>
  75. <u-action-sheet :show="showOrg" :actions="orgaction" title="请选择单位" class="org-choice" @close="showOrg = false"
  76. @select="orgSelect"></u-action-sheet>
  77. </view>
  78. </template>
  79. <script>
  80. import {
  81. fireSpecialUpdate,
  82. fireSpecialCreate,
  83. fireSpecialIdGet
  84. } from '@/api/fireSpecial';
  85. import {
  86. NumericRule,
  87. downSee,
  88. uploadFile
  89. } from '@/utils/common.js';
  90. import config from '@/config'
  91. import {
  92. DICT_TYPE,
  93. getDictDatas
  94. } from "@/utils/dict";
  95. const baseUrlImg = config.baseUrlImg
  96. export default {
  97. data() {
  98. return {
  99. screenHeight: this.$screenHeight,
  100. wheight: '',
  101. formData: {
  102. orgName: '',
  103. orgId: '',
  104. empName: '',
  105. numberCode: '',
  106. idcardno: '',
  107. empGender: '',
  108. empBirthday: '',
  109. issueDate: '',
  110. att:'',
  111. attId:[]
  112. },
  113. loading:'',
  114. rules: {
  115. empName: [{
  116. type: 'string',
  117. required: true,
  118. message: '人员姓名不能为空',
  119. trigger: ['blur', 'change']
  120. }],
  121. numberCode: [{
  122. type: 'string',
  123. required: true,
  124. message: '特种证书编号',
  125. trigger: ['blur', 'change']
  126. }],
  127. idcardno: [{
  128. type: 'string',
  129. required: true,
  130. pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
  131. message: "请输入合法身份证号",
  132. trigger: ['blur', 'change']
  133. }],
  134. // empName: NumericRule(),
  135. },
  136. isedit: '',
  137. isview: '',
  138. dateTime: '',
  139. showSex: false,
  140. actionsSex: getDictDatas(DICT_TYPE.SYSTEM_USER_SEX), //性别
  141. orgaction: [], //单位
  142. showOrg: false
  143. }
  144. },
  145. onReady() {
  146. this.$refs.customForm.setRules(this.rules);
  147. },
  148. mounted() {
  149. uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
  150. this.wheight = data.height
  151. }).exec()
  152. },
  153. onLoad(option) {
  154. this.formData.orgName = option.orgName ? option.orgName : ''
  155. this.formData.orgId = option.orgId ? option.orgId : ''
  156. //单位信息
  157. this.orgaction = option.orgaction ? JSON.parse(option.orgaction) : []
  158. this.actionsSex.map(i => i.name = i.label)
  159. uni.setNavigationBarTitle({
  160. title: option.title
  161. })
  162. if (option.editData) {
  163. this.isedit = true
  164. this.isview = false
  165. this.parentId = option.editData
  166. this.getData()
  167. // this.formData = JSON.parse(option.editData)
  168. } else if (option.viewData) {
  169. this.isview = true
  170. this.parentId = option.viewData
  171. this.getData()
  172. // this.formData = JSON.parse(option.viewData)
  173. } else {
  174. this.isedit = false
  175. this.isview = false
  176. }
  177. console.log(this.isedit,'ffffffff',this.isview);
  178. },
  179. methods: {
  180. //查看已上传附件
  181. viewSee(val) {
  182. downSee(val)
  183. },
  184. // 移出图片函数
  185. async deleteFile(e) {
  186. this.formData.attId = [];
  187. // console.log('移除了:');
  188. },
  189. selectFile(e) {
  190. let promises = [];
  191. for (let i = 0; i < e.tempFilePaths.length; i++) {
  192. const promise = uploadFile(e.tempFilePaths, i,this);
  193. promises.push(promise);
  194. }
  195. Promise.all(promises).then(result => {
  196. // 处理上传文件成功的结果
  197. }).catch(error => {
  198. // 处理上传文件失败的错误
  199. });
  200. },
  201. closeImage() {
  202. this.formData.attId = []
  203. this.formData.att=''
  204. this.$forceUpdate()
  205. },
  206. sexSelect(e) {
  207. this.formData.empGender = e.name
  208. },
  209. orgSelect(e) {
  210. this.formData.orgName = e.name
  211. this.formData.orgId = e.value
  212. },
  213. hideKeyboard() {
  214. uni.hideKeyboard()
  215. },
  216. getData() {
  217. fireSpecialIdGet({
  218. id: this.parentId
  219. }).then(response => {
  220. this.formData = response.data
  221. console.log(response, 'response')
  222. })
  223. },
  224. bindDateChange(e) {
  225. this.formData.empBirthday = e.detail.value
  226. },
  227. bindDateChange2(e) {
  228. this.formData.issueDate = e.detail.value
  229. },
  230. submit(ref) {
  231. this.$refs[ref].validate().then(res => {
  232. this.formData.att = this.formData.attId?this.formData.attId.join(''):this.formData.att
  233. if (this.isedit) {
  234. fireSpecialUpdate(JSON.stringify(this.formData)).then(res => {
  235. this.$modal.msg('修改成功')
  236. this.isedit = false
  237. setTimeout(() => {
  238. uni.navigateBack()
  239. }, 400)
  240. })
  241. } else if (this.isview) {
  242. this.isview = false
  243. uni.navigateBack()
  244. } else {
  245. fireSpecialCreate(JSON.stringify(this.formData)).then(response => {
  246. this.$modal.msg('新增成功')
  247. setTimeout(() => {
  248. uni.navigateBack()
  249. }, 400)
  250. })
  251. }
  252. }).catch(err => {
  253. console.log(err);
  254. })
  255. }
  256. }
  257. }
  258. </script>
  259. <style lang="scss" scoped>
  260. body {
  261. background-color: #f5f7f9;
  262. }
  263. page {
  264. background-color: #f5f7f9 !important;
  265. }
  266. .uni-container {
  267. // height: 100vh;
  268. background-color: #f5f7f9 !important;
  269. }
  270. /deep/.uni-card {
  271. position: relative;
  272. box-shadow: 0px 0px 3px 0px rgba(86, 165, 168, 0.15);
  273. border-radius: 30rpx;
  274. }
  275. .example {
  276. overflow-y: auto;
  277. }
  278. .juli-bottom {
  279. /deep/ .u-form-item__body__left__content__label {
  280. color: #000 !important;
  281. }
  282. }
  283. .org-choice {
  284. /deep/.u-action-sheet {
  285. overflow-y: auto;
  286. height: 1000rpx;
  287. background-color: #fff;
  288. }
  289. }
  290. .selectBtn {
  291. width: 200rpx;
  292. margin-left: 0;
  293. font-size: 30rpx;
  294. background-color: #4cb2b6;
  295. }
  296. </style>