add.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484
  1. <template>
  2. <view>
  3. <view class="box">
  4. <view class="top">
  5. <text class="title">申报单录入</text>
  6. </view>
  7. <view class="item">
  8. <view class="l"><text style="color: red;">*</text>申报人:</view>
  9. <view class="r">
  10. <u-input placeholder="申报人" @input="handler()" v-model="form.declarePeople">
  11. </u-input>
  12. </view>
  13. </view>
  14. <view class="item">
  15. <view class="l"><text style="color: red;">*</text>申报电话:</view>
  16. <view class="r">
  17. <u-input placeholder="申报电话" @input="handler()" v-model="form.declarePhone">
  18. </u-input>
  19. </view>
  20. </view>
  21. <view class="item">
  22. <view class="l"><text style="color: red;">*</text>产品学名:</view>
  23. <view class="r">
  24. <u-input placeholder="输入产品学名" @input="handler()" v-model="form.goodsName">
  25. </u-input>
  26. </view>
  27. </view>
  28. <view class="item">
  29. <view class="l"><text style="color: red;">*</text>毛重:</view>
  30. <view class="r">
  31. <u-input type="number" placeholder="输入毛重" @input="handler()" v-model="form.grossWeight">
  32. <text slot="suffix">吨</text>
  33. </u-input>
  34. </view>
  35. </view>
  36. <view class="item">
  37. <view class="l"><text style="color: red;">*</text>件数:</view>
  38. <view class="r">
  39. <u-input type="number" placeholder="输入件数" @input="handler()" v-model="form.num">
  40. </u-input>
  41. </view>
  42. </view>
  43. <view class="item">
  44. <view class="l"><text style="color: red;">*</text>生产日期:</view>
  45. <view class="r">
  46. <view class="r">
  47. <uni-datetime-picker placeholder="请选择" @input="handler()" :clear-icon="false" type="date"
  48. v-model="form.productionDate" />
  49. </view>
  50. </view>
  51. </view>
  52. <view class="item">
  53. <view class="l" style="flex: 7;"><text style="color: red;">*</text>保质期(天):</view>
  54. <view class="r">
  55. <view class="r">
  56. <u-input placeholder="输入保质期" type="number" @input="handler()" v-model="form.expirationDate" />
  57. </view>
  58. </view>
  59. </view>
  60. <view class="item">
  61. <view class="l"><text style="color: red;">*</text>储藏条件:</view>
  62. <view class="r">
  63. <u-input placeholder="储存条件" @input="handler()" v-model="form.storageMode" />
  64. </view>
  65. </view>
  66. <view class="item">
  67. <view class="l"><text style="color: red;">*</text>生产方式:</view>
  68. <view class="r">
  69. <u-input placeholder="生产方式" @input="handler()" v-model="form.productionMode" />
  70. </view>
  71. </view>
  72. <view class="item">
  73. <view class="l"><text style="color: red;">*</text>原产国:</view>
  74. <view class="r">
  75. <u-input placeholder="原产国" @input="handler()" v-model="form.origin" />
  76. </view>
  77. </view>
  78. <view class="item">
  79. <view class="l"><text style="color: red;">*</text>货主单位:</view>
  80. <view class="r">
  81. <u-input placeholder="货主单位" @input="handler()" v-model="form.sendUnit" />
  82. </view>
  83. </view>
  84. <view class="item">
  85. <view class="l" style="flex: 7;"><text style="color: red;">*</text>生产商注册号:</view>
  86. <view class="r">
  87. <u-input placeholder="生产商注册号" @input="handler()" v-model="form.producerCode" />
  88. </view>
  89. </view>
  90. <view class="item">
  91. <view class="l"><text style="color: red;">*</text>收货单位:</view>
  92. <view class="r">
  93. <u-input placeholder="收货单位" @input="handler()" v-model="form.receiveUnit" />
  94. </view>
  95. </view>
  96. <view class="item">
  97. <view class="l"><text style="color: red;">*</text>货物流向:</view>
  98. <view class="r">
  99. <u-input placeholder="货物流向" @input="handler()" v-model="form.route" />
  100. </view>
  101. </view>
  102. <view class="item">
  103. <view class="l"><text style="color: red;">*</text>运输车辆(车头牌):</view>
  104. <view class="r">
  105. <u--textarea @input="handler()" v-model="form.chinaCarNo" placeholder="运输车车头牌,多个请用逗号隔开">
  106. </u--textarea>
  107. </view>
  108. </view>
  109. <view class="item">
  110. <view class="l"><text style="color: red;">*</text>运输车辆(车尾牌):</view>
  111. <view class="r">
  112. <u--textarea @input="handler()" v-model="form.chinaCarNoSuff" placeholder="运输车车尾牌,多个请用逗号隔开">
  113. </u--textarea>
  114. </view>
  115. </view>
  116. <view class="item">
  117. <view class="l"><text style="color: red;">*</text>司机姓名:</view>
  118. <view class="r">
  119. <u--textarea @input="handler()" v-model="form.driverName" placeholder="司机姓名,多个请用逗号隔开"></u--textarea>
  120. </view>
  121. </view>
  122. <view class="item">
  123. <view class="l"><text style="color: red;">*</text>司机电话:</view>
  124. <view class="r">
  125. <u--textarea @input="handler()" v-model="form.driverPhone" placeholder="司机电话,多个请用逗号隔开">
  126. </u--textarea>
  127. </view>
  128. </view>
  129. <view class="item">
  130. <view class="l" style="flex: 7;"><text style="color: red;">*</text>代理商电话:</view>
  131. <view class="r">
  132. <u-input placeholder="代理商电话" @input="handler()" v-model="form.agentPhone" />
  133. </view>
  134. </view>
  135. <view class="item">
  136. <view class="l" style="flex: 7;"><text style="color: red;">*</text>海关报关单据:</view>
  137. <view class="r">
  138. <u-input placeholder="海关报关单据" @input="handler()" v-model="form.customProof" />
  139. </view>
  140. </view>
  141. <view class="item">
  142. <view class="l" style="flex: 7;"><text style="color: red;">*</text>检验检疫证:</view>
  143. <view class="r">
  144. <u-input placeholder="检验检疫证" @input="handler()" v-model="form.quarantineProof" />
  145. </view>
  146. </view>
  147. <view class="item">
  148. <view class="l"><text style="color: red;">*</text>商铺:</view>
  149. <view class="r">
  150. <u-input placeholder="商铺" @input="handler()" v-model="form.shop" />
  151. </view>
  152. </view>
  153. <view class="item">
  154. <view class="l"><text style="color: red;">*</text>生产批号:</view>
  155. <view class="r">
  156. <u-input placeholder="生产批号" @input="handler()" v-model="form.productionCode" />
  157. </view>
  158. </view>
  159. <view class="item">
  160. <view class="l"><text style="color: red;">*</text>柜号:</view>
  161. <view class="r">
  162. <u-input placeholder="柜号" @input="handler()" v-model="form.containerCode" />
  163. </view>
  164. </view>
  165. <view class="item">
  166. <view class="l"><text style="color: red;">*</text>越南车牌:</view>
  167. <view class="r">
  168. <u-input placeholder="越南车牌" @input="handler()" v-model="form.carNo" />
  169. </view>
  170. </view>
  171. </view>
  172. <u-button type="primary" text="确定" @click="saveFn"></u-button>
  173. <u-button type="info" text="重置" @click="cleanFn" style="margin-top: 20rpx;"></u-button>
  174. <!-- ---------------------------------------------------------- -->
  175. <view class="bottom-safety"></view>
  176. </view>
  177. </template>
  178. <script>
  179. export default {
  180. data() {
  181. return {
  182. form: {
  183. declarePeople: '',
  184. declarePhone: '',
  185. goodsName: '',
  186. grossWeight: '',
  187. num: '',
  188. productionDate: '',
  189. expirationDate: '',
  190. productionMode: '',
  191. origin: '',
  192. sendUnit: '',
  193. producerCode: '',
  194. receiveUnit: '',
  195. route: '',
  196. storageMode: '',
  197. driverName: '',
  198. driverPhone: '',
  199. agent: '',
  200. chinaCarNo: '',
  201. chinaCarNoSuff:'',
  202. carNo: '',
  203. customProof: '',
  204. quarantineProof: '',
  205. shop: '',
  206. productionCode: '',
  207. containerCode: ''
  208. },
  209. }
  210. },
  211. onShow() {},
  212. mounted() {
  213. this.checkStore();
  214. },
  215. methods: {
  216. createModal() {
  217. return {
  218. declarePeople: '',
  219. declarePhone: '',
  220. goodsName: '',
  221. grossWeight: '',
  222. num: '',
  223. productionDate: '',
  224. expirationDate: '',
  225. productionMode: '',
  226. origin: '',
  227. sendUnit: '',
  228. producerCode: '',
  229. receiveUnit: '',
  230. route: '',
  231. storageMode: '',
  232. driverName: '',
  233. driverPhone: '',
  234. agent: '',
  235. chinaCarNo: '',
  236. chinaCarNoSuff:'',
  237. carNo: '',
  238. customProof: '',
  239. quarantineProof: '',
  240. shop: '',
  241. productionCode: '',
  242. containerCode: ''
  243. }
  244. },
  245. cleanFn() {
  246. this.form = this.createModal();
  247. this.cleanStore();
  248. },
  249. cleanStore() {
  250. uni.removeStorageSync('declare')
  251. uni.removeStorageSync('disinfect')
  252. },
  253. handler() {
  254. let cacheObj = {
  255. count: 0,
  256. cache: this.form
  257. }
  258. uni.setStorageSync('declare', cacheObj);
  259. },
  260. addStoreCount() {
  261. let cacheObj = {
  262. count: 1,
  263. cache: this.form
  264. }
  265. uni.setStorageSync('declare', cacheObj);
  266. },
  267. checkStore() {
  268. let store = uni.getStorageSync('declare');
  269. if (store && store.count == 0) {
  270. let that = this;
  271. let cache = store.cache;
  272. uni.showModal({
  273. title: '提示',
  274. content: '检测到您有未完成表单,是否继续?',
  275. success(resp) {
  276. if (resp.confirm) {
  277. that.form = cache
  278. } else {
  279. that.cleanFn();
  280. }
  281. }
  282. })
  283. }
  284. let disinfectStore = uni.getStorageSync('disinfect');
  285. if (disinfectStore) {
  286. let that = this;
  287. let cache = disinfectStore.cache;
  288. that.form.declarePeople = cache.declarePeople
  289. that.form.declarePhone = cache.declarePhone
  290. uni.showModal({
  291. title: '提示',
  292. content: '检测到最近有相似消杀申报信息,是否导入?',
  293. success(resp) {
  294. if (resp.confirm) {
  295. that.form = cache
  296. } else {
  297. that.cleanFn();
  298. }
  299. }
  300. })
  301. }
  302. },
  303. saveFn() {
  304. if (!this.form.declarePeople) {
  305. this.$common.toast('请填写申报人');
  306. return;
  307. }
  308. if (!this.$common.isPhone(this.form.declarePhone)) {
  309. this.$common.toast('请填写正确的申报电话');
  310. return;
  311. }
  312. if (!this.form.goodsName) {
  313. this.$common.toast('请填写产品');
  314. return;
  315. }
  316. if (!this.form.grossWeight || !this.$common.isNum(this.form.grossWeight)) {
  317. this.$common.toast('毛重只能填写数字');
  318. return;
  319. }
  320. if (!this.form.num || !this.$common.isNum(this.form.num)) {
  321. this.$common.toast('件数只能填整数');
  322. return;
  323. }
  324. if (!this.form.productionDate) {
  325. this.$common.toast('请选择生产日期');
  326. return;
  327. }
  328. if (!this.form.expirationDate || !this.$common.isNum(this.form.expirationDate)) {
  329. this.$common.toast('保质期为正数');
  330. return;
  331. }
  332. if (!this.form.storageMode) {
  333. this.$common.toast('请填写储藏条件');
  334. return;
  335. }
  336. if (!this.form.productionMode) {
  337. this.$common.toast('请填写生产方式');
  338. return;
  339. }
  340. if (!this.form.origin) {
  341. this.$common.toast('请输入原产国');
  342. return;
  343. }
  344. if (!this.form.sendUnit) {
  345. this.$common.toast('请填写货主单位');
  346. return;
  347. }
  348. if (!this.form.producerCode) {
  349. this.$common.toast('请填写生产商注册号');
  350. return;
  351. }
  352. if (!this.form.receiveUnit) {
  353. this.$common.toast('请填写收货单位');
  354. return;
  355. }
  356. if (!this.form.route) {
  357. this.$common.toast('请填写货物流向');
  358. return;
  359. }
  360. let chinaCarNo = this.form.chinaCarNo;
  361. if (!chinaCarNo) {
  362. this.$common.toast('请填写运输车辆车头牌');
  363. return;
  364. }
  365. let noArray=chinaCarNo.replace(",", ",").split(",");
  366. for(let i in noArray){
  367. if (!this.$common.isCarNo(noArray[i])) {
  368. this.$common.toast('运输车头牌不正确');
  369. return;
  370. }
  371. }
  372. let chinaCarNoSuff = this.form.chinaCarNoSuff;
  373. if (!chinaCarNoSuff) {
  374. this.$common.toast('请填写运输车辆车尾牌');
  375. return;
  376. }
  377. let suffArray=chinaCarNoSuff.replace(",", ",").split(",");
  378. for(let i in suffArray){
  379. if (!this.$common.isCarNo(suffArray[i])) {
  380. this.$common.toast('运输车尾牌不正确');
  381. return;
  382. }
  383. }
  384. if (!this.form.driverName) {
  385. this.$common.toast('请填写司机姓名');
  386. return;
  387. }
  388. let driverPhone = this.form.driverPhone;
  389. if (!driverPhone) {
  390. this.$common.toast('请填写司机号码');
  391. return;
  392. }
  393. let phoneArray=driverPhone.replace(",", ",").split(",");
  394. for(let i in phoneArray){
  395. let phone=phoneArray[i];
  396. if (!this.$common.isPhone(phone)) {
  397. this.$common.toast('司机联系号码不正确');
  398. return;
  399. }
  400. }
  401. if (!this.$common.isPhone(this.form.agentPhone)) {
  402. this.$common.toast('代理商联系号码不正确');
  403. return;
  404. }
  405. if (!this.form.customProof) {
  406. this.$common.toast('海关报关单据');
  407. return;
  408. }
  409. if (!this.form.quarantineProof) {
  410. this.$common.toast('请填写检验检疫证');
  411. return;
  412. }
  413. if (!this.form.shop) {
  414. this.$common.toast('请填写商铺');
  415. return;
  416. }
  417. if (!this.form.productionCode) {
  418. this.$common.toast('请填写生产批号');
  419. return;
  420. }
  421. if (!this.form.containerCode) {
  422. this.$common.toast('请填写柜号');
  423. return;
  424. }
  425. if (!this.form.carNo) {
  426. this.$common.toast('请填写越南车牌号');
  427. return;
  428. }
  429. this.$api.addDeclare(this.$common.removeNull(this.form)).then(resp => {
  430. this.addStoreCount();
  431. this.$common.to('/pages/declare/addDeclareSuccess')
  432. })
  433. },
  434. },
  435. }
  436. </script>
  437. <style lang="scss">
  438. page {
  439. background-color: #fff;
  440. }
  441. .hs-item {
  442. text-align: center;
  443. }
  444. .item-line {
  445. color: #a2a2a2;
  446. padding: 5px 0 10px 29px;
  447. border-bottom: 1px solid #E5E5E5;
  448. }
  449. .hj {
  450. padding: 50rpx;
  451. font-size: 40rpx;
  452. color: red;
  453. font-weight: bold;
  454. }
  455. .save-btn {
  456. background-color: #ff4200;
  457. height: 88rpx;
  458. display: flex;
  459. justify-content: center;
  460. align-items: center;
  461. margin: 60rpx;
  462. color: #fff;
  463. font-size: 30rpx;
  464. font-weight: bold;
  465. border-radius: 10rpx;
  466. }
  467. @import '@/common/common.scss'
  468. </style>