docOrderHeader-add-or-update.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. <template>
  2. <el-dialog
  3. :title="!dataFormHead.orderNo ? '新增' : '修改'"
  4. :close-on-click-modal="false"
  5. :fullscreen="true"
  6. :modal="false"
  7. :visible.sync="visible">
  8. <div style="border: 1px solid rgba(0, 0, 0, 0.1);height: 150px;margin-top: -30px;padding: 10px;">
  9. <el-form :model="dataFormHead" ref="dataFormHead" label-width="105px">
  10. <el-row>
  11. <el-col :span="6">
  12. <el-form-item label="出库单号" prop="orderNo">
  13. <el-input v-model="dataFormHead.orderNo" placeholder="" :disabled="true"></el-input>
  14. </el-form-item>
  15. </el-col>
  16. <el-col :span="6">
  17. <el-form-item label="单据类型" prop="orderType">
  18. <el-select v-model="dataFormHead.orderType" placeholder="请选择" style="width: 100%">
  19. <el-option
  20. v-for="dict in dict.type.so_type"
  21. :key="dict.value"
  22. :label="dict.label"
  23. :value="dict.value"
  24. />
  25. </el-select>
  26. </el-form-item>
  27. </el-col>
  28. <el-col :span="6">
  29. <el-form-item label="单据状态" prop="orderStatus">
  30. <el-select v-model="dataFormHead.orderStatus" :disabled=" id === '' ? true : false" placeholder="请选择" style="width: 100%">
  31. <el-option
  32. v-for="dict in dict.type.so_status"
  33. :key="dict.value"
  34. :label="dict.label"
  35. :value="dict.value"
  36. />
  37. </el-select>
  38. </el-form-item>
  39. </el-col>
  40. <el-col :span="6">
  41. <el-form-item label="发货时间" prop="shipmentTime">
  42. <el-date-picker
  43. v-model="dataFormHead.shipmentTime"
  44. type="date"
  45. placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%">
  46. </el-date-picker>
  47. </el-form-item>
  48. </el-col>
  49. <el-col :span="6">
  50. <el-form-item label="客户" prop="customerId">
  51. <el-select v-model="dataFormHead.customerId" placeholder="请选择" style="width: 100%" clearable>
  52. <el-option
  53. v-for="item in customerIdCombo"
  54. :key="item.value"
  55. :label="item.customerName"
  56. :value="item.customerId">
  57. </el-option>
  58. </el-select>
  59. </el-form-item>
  60. </el-col>
  61. <el-col :span="6">
  62. <el-form-item label="客户单号1" prop="soReference1">
  63. <el-input v-model="dataFormHead.soReference1" placeholder=""></el-input>
  64. </el-form-item>
  65. </el-col>
  66. <el-col :span="6">
  67. <el-form-item label="客户单号2" prop="soReference2">
  68. <el-input v-model="dataFormHead.soReference2" placeholder=""></el-input>
  69. </el-form-item>
  70. </el-col>
  71. <el-col :span="6" style="text-align: right;">
  72. <el-button size="mini" type="primary" @click="dataFormHeadSubmit()">提交</el-button>
  73. <el-button size="mini" type="primary" @click="dataFormHeadSubmit()">修改</el-button>
  74. </el-col>
  75. </el-row>
  76. </el-form>
  77. </div>
  78. <div>
  79. <el-tabs v-model="activeTap">
  80. <el-tab-pane label="出库明细" name="orderDetails">
  81. <OrderDetails ref="orderDetails"/>
  82. </el-tab-pane>
  83. </el-tabs>
  84. </div>
  85. </el-dialog>
  86. </template>
  87. <script>
  88. import { initOrderHeader, addDocOrderHeader } from '@/api/docOrder/docOrder'
  89. import OrderDetails from './docOrderDetails'
  90. import {queryCustomerDict} from "@/api/base/customer";
  91. export default {
  92. dicts: ['so_status', 'so_type'],
  93. data () {
  94. return {
  95. choseId: '',
  96. id: '',
  97. visible: false,
  98. roleList: [],
  99. dataFormHead: {
  100. orderNo: '',
  101. orderType: 'OD',
  102. orderStatus: '',
  103. shipmentTime: '',
  104. soReference1: '',
  105. soReference2: '',
  106. soReference3: '',
  107. customerId: ''
  108. },
  109. activeTap: 'orderDetails',
  110. customerIdCombo: []
  111. }
  112. },
  113. components: {
  114. OrderDetails
  115. },
  116. methods: {
  117. initData () {
  118. queryCustomerDict().then(response => {
  119. this.customerIdCombo = response.data;
  120. });
  121. },
  122. init (id) {
  123. this.initData()
  124. this.visible = true
  125. this.$nextTick(() => {
  126. initOrderHeader(id).then(response => {
  127. if(response.code == 200) {
  128. let orderHeader = response.data;
  129. this.dataFormHead.orderNo = orderHeader.orderNo
  130. this.dataFormHead.orderType = orderHeader.orderType
  131. this.dataFormHead.orderStatus = orderHeader.orderStatus
  132. this.dataFormHead.shipmentTime = orderHeader.shipmentTime
  133. this.dataFormHead.soReference1 = orderHeader.soReference1
  134. this.dataFormHead.soReference2 = orderHeader.soReference2
  135. this.dataFormHead.soReference3 = orderHeader.soReference3
  136. if(orderHeader.customerId && orderHeader.customerId != '') {
  137. this.dataFormHead.customerId = parseInt(orderHeader.customerId)
  138. }
  139. this.$refs.orderDetails.getDataList(this.dataFormHead.orderNo)
  140. } else {
  141. this.$modal.msgError(response.msg);
  142. }
  143. })
  144. })
  145. },
  146. // 表单提交
  147. dataFormHeadSubmit () {
  148. if(this.id === '') {
  149. addDocOrderHeader(this.dataFormHead).then(response => {
  150. if(response.code == 200) {
  151. this.$modal.msgSuccess(response.msg);
  152. } else {
  153. this.$modal.msgError(response.msg);
  154. }
  155. })
  156. } else {
  157. addDocOrderHeader(this.dataFormHead).then(response => {
  158. if(response.code == 200) {
  159. this.$modal.msgSuccess(response.msg);
  160. } else {
  161. this.$modal.msgError(response.msg);
  162. }
  163. })
  164. }
  165. }
  166. }
  167. }
  168. </script>