GoodsLogistics.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <template>
  2. <a-modal
  3. centered
  4. class="modalBox"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="物流信息"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. :width="1000">
  11. <a-form
  12. id="logistics-form"
  13. :form="form"
  14. ref="form"
  15. v-bind="formItemLayout"
  16. @submit="handleSubmit">
  17. <a-form-item label="快递公司" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  18. <a-select
  19. id="logistics-expressName"
  20. allowClear
  21. v-decorator="[
  22. 'formData.expressName',
  23. { initialValue: formData.expressName,
  24. rules: [{ required: true, message: '请选择快递公司' }] },
  25. ]"
  26. placeholder="请选择快递公司"
  27. >
  28. <a-select-option v-for="(item,index) in expressCompany" :key="index" :value="item.expressName">
  29. {{ item.expressName }}
  30. </a-select-option>
  31. </a-select>
  32. </a-form-item>
  33. <a-form-item label="运单编号" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  34. <a-input
  35. id="logistics-expressNum"
  36. :maxLength="30"
  37. v-decorator="[
  38. 'formData.expressNum',
  39. { initialValue: formData.expressNum, getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请输入运单编号' }] }
  40. ]"
  41. placeholder="请输入运单编号(最多30个字符)"
  42. allowClear />
  43. </a-form-item>
  44. <a-form-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
  45. <a-button type="primary" html-type="submit" id="logistics-submit" style="margin-right: 15px">保存</a-button>
  46. <a-button @click="isShow=false" style="margin-left: 15px" id="logistics-close">取消</a-button>
  47. </a-form-item>
  48. </a-form>
  49. </a-modal>
  50. </template>
  51. <script>
  52. import { VSelect } from '@/components'
  53. import { expressCompanyQuery } from '@/api/order'
  54. export default {
  55. name: 'GoodsLogistics',
  56. components: { VSelect },
  57. props: {
  58. openModal: { // 弹框显示状态
  59. type: Boolean,
  60. default: false
  61. }
  62. },
  63. data () {
  64. return {
  65. form: this.$form.createForm(this),
  66. formItemLayout: {
  67. labelCol: { span: 4 },
  68. wrapperCol: { span: 16 }
  69. },
  70. formData: {
  71. expressName: undefined, // 快递公司
  72. expressNum: '' // 运单编号
  73. },
  74. isShow: this.openModal, // 是否填写物流信息
  75. expressCompany: [] // 快递公司
  76. }
  77. },
  78. mounted () {
  79. this.getExpressCompany()
  80. },
  81. methods: {
  82. // 物流信息 保存
  83. handleSubmit (e) {
  84. e.preventDefault()
  85. this.form.validateFields((err, values) => {
  86. if (!err) {
  87. this.$emit('submit', values.formData)
  88. }
  89. })
  90. },
  91. // 获取快递公司
  92. getExpressCompany () {
  93. expressCompanyQuery({}).then(res => {
  94. if (res.status == 200) {
  95. this.expressCompany = res.data
  96. } else {
  97. this.expressCompany = []
  98. }
  99. })
  100. }
  101. },
  102. watch: {
  103. // 父页面传过来的弹框状态
  104. openModal (newValue, oldValue) {
  105. this.isShow = newValue
  106. },
  107. // 重定义的弹框状态
  108. isShow (val) {
  109. if (!val) {
  110. this.$emit('close')
  111. } else {
  112. this.form.resetFields()
  113. }
  114. }
  115. }
  116. }
  117. </script>
  118. <style lang="less" scoped>
  119. </style>