add.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. <template>
  2. <view class="p-content">
  3. <view class="u-forms">
  4. <u--form
  5. labelPosition="top"
  6. :model="form"
  7. :rules="rules"
  8. ref="uForm"
  9. errorType="toast"
  10. labelWidth="auto"
  11. >
  12. <u-form-item
  13. label="供应商"
  14. prop="supplierSn"
  15. borderBottom
  16. @click="showSupplier = true;"
  17. ref="item1"
  18. required
  19. >
  20. <u--input
  21. v-model="supplierName"
  22. disabled
  23. inputAlign="right"
  24. disabledColor="#ffffff"
  25. placeholder="请选择供应商"
  26. border="none"
  27. ></u--input>
  28. <u-icon
  29. slot="right"
  30. name="arrow-right"
  31. ></u-icon>
  32. </u-form-item>
  33. <u-form-item
  34. label="散件入库类型"
  35. prop="sparePartsType"
  36. borderBottom
  37. @click="showSparePartsType = true;"
  38. ref="item2"
  39. required
  40. >
  41. <u--input
  42. v-model="sparePartsType"
  43. disabled
  44. inputAlign="right"
  45. disabledColor="#ffffff"
  46. placeholder="请选择散件入库类型"
  47. border="none"
  48. ></u--input>
  49. <u-icon
  50. slot="right"
  51. name="arrow-right"
  52. ></u-icon>
  53. </u-form-item>
  54. <u-form-item
  55. label="备注"
  56. ref="item3"
  57. >
  58. <u--textarea
  59. v-model="form.remarks"
  60. :maxlength="200"
  61. border="bottom"
  62. placeholder="请输入备注(最多200字符)"
  63. count></u--textarea>
  64. </u-form-item>
  65. </u--form>
  66. </view>
  67. <view class="f-button">
  68. <u-button @click="cansel" hairline>取消</u-button>
  69. <u-button type="primary" :loading="spinning" @click="submit" hairline>提交</u-button>
  70. </view>
  71. <!-- 选择供应商 -->
  72. <u-picker
  73. title="请选择供应商"
  74. :show="showSupplier"
  75. @cancel="showSupplier = false"
  76. @close="showSupplier = false"
  77. @confirm="supplierSelect"
  78. :columns="supplierList"
  79. :closeOnClickOverlay="true"
  80. keyName="supplierName">
  81. </u-picker>
  82. <!-- 选择散件入库类型 -->
  83. <u-picker
  84. :show="showSparePartsType"
  85. :columns="sparePartsTypeList"
  86. title="请选择散件入库类型"
  87. keyName="name"
  88. @cancel="showSparePartsType = false"
  89. @close="showSparePartsType = false"
  90. @confirm="sparePartsTypeSelect"
  91. :closeOnClickOverlay="true"
  92. >
  93. </u-picker>
  94. </view>
  95. </template>
  96. <script>
  97. import {sparePartsPurSave} from '@/config/api.js'
  98. export default {
  99. data() {
  100. return {
  101. spinning: false,
  102. showSupplier: false,
  103. supplierList: [],
  104. showSparePartsType: false,
  105. sparePartsTypeList:[],
  106. form:{
  107. supplierSn: undefined,
  108. sparePartsType: undefined,
  109. remarks: ''
  110. },
  111. supplierName:'',
  112. sparePartsType:'',
  113. rules: {
  114. 'supplierSn': {
  115. type: 'string',
  116. required: true,
  117. message: '请选择供应商',
  118. trigger: ['blur', 'change']
  119. },
  120. 'sparePartsType': {
  121. type: 'string',
  122. required: true,
  123. message: '请选择散件入库类型',
  124. trigger: ['blur', 'change']
  125. },
  126. }
  127. };
  128. },
  129. onNavigationBarButtonTap(e){
  130. if(e.index == 0){
  131. uni.navigateTo({
  132. url: "/pages/stockIn/list"
  133. })
  134. }
  135. },
  136. methods: {
  137. // 选择供应商
  138. supplierSelect(e) {
  139. console.log(e)
  140. this.form.supplierSn = e.value[0].supplierSn
  141. this.supplierName = e.value[0].supplierName
  142. this.$refs.uForm.validateField('supplierSn')
  143. this.showSupplier = false
  144. },
  145. // 选择散件入库类型
  146. sparePartsTypeSelect(e) {
  147. console.log(e)
  148. this.form.sparePartsType = e.value[0].sparePartsPutTypeSn
  149. this.sparePartsType = e.value[0].name
  150. this.$refs.uForm.validateField('sparePartsType')
  151. this.showSparePartsType = false
  152. },
  153. // 保存
  154. submit() {
  155. this.$refs.uForm.validate().then(res => {
  156. this.spinning = true
  157. this.form.sourceType = 'HAND'
  158. sparePartsPurSave(this.form,{custom:{catch:true}}).then(res => {
  159. console.log(res)
  160. if(res.status == 200){
  161. uni.redirectTo({
  162. url:"/pages/stockIn/index?sn="+res.data.sparePartsPurchaseSn+"&id="+res.data.id
  163. })
  164. }
  165. this.spinning = false
  166. }).catch(res => {
  167. this.spinning = false
  168. })
  169. }).catch(errors => {
  170. console.log('校验失败')
  171. })
  172. },
  173. cansel(){
  174. uni.navigateBack()
  175. }
  176. },
  177. onLoad() {
  178. this.supplierList = [this.$store.state.vuex_supplierList]
  179. this.sparePartsTypeList = [this.$store.state.vuex_sparePartsTypeList]
  180. console.log(this.supplierList)
  181. },
  182. onBackPress(e) {
  183. if(this.showSupplier||this.showSparePartsType){
  184. this.showSupplier = false
  185. this.showSparePartsType = false
  186. return true
  187. }
  188. },
  189. onReady() {
  190. //如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
  191. this.$refs.uForm.setRules(this.rules)
  192. },
  193. };
  194. </script>
  195. <style lang="scss">
  196. .p-content{
  197. .u-forms{
  198. flex-grow: 1;
  199. height: 100%;
  200. overflow: auto;
  201. padding: 0 50upx;
  202. }
  203. .f-button{
  204. display: flex;
  205. justify-content: space-around;
  206. padding: 60upx 40upx;
  207. button{
  208. width: 40%;
  209. }
  210. }
  211. }
  212. </style>