GoodsLogistics.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  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. <v-select
  19. ref="company"
  20. code="ADVERT_POSITION"
  21. allowClear
  22. id="logistics-company"
  23. placeholder="请选择快递公司"
  24. v-decorator="['formData.company', { initialValue: formData.company, rules: [{ required: true, message: '请选择快递公司' }] }]"
  25. ></v-select>
  26. </a-form-item>
  27. <a-form-item label="运单编号" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  28. <a-input
  29. id="logistics-orderNo"
  30. :maxLength="30"
  31. v-decorator="[
  32. 'formData.orderNo',
  33. { initialValue: formData.orderNo, getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请输入运单编号(最多30个字符)' }] }
  34. ]"
  35. placeholder="请输入运单编号(最多30个字符)"
  36. allowClear />
  37. </a-form-item>
  38. <a-form-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
  39. <a-button type="primary" html-type="submit" id="logistics-submit" style="margin-right: 15px">保存</a-button>
  40. <a-button @click="close" style="margin-left: 15px" id="logistics-close">取消</a-button>
  41. </a-form-item>
  42. </a-form>
  43. </a-modal>
  44. </template>
  45. <script>
  46. import { VSelect } from '@/components'
  47. export default {
  48. name: 'GoodsLogistics',
  49. components: { VSelect },
  50. props: {
  51. openModal: { // 弹框显示状态
  52. type: Boolean,
  53. default: false
  54. }
  55. },
  56. data () {
  57. return {
  58. form: this.$form.createForm(this),
  59. formItemLayout: {
  60. labelCol: { span: 4 },
  61. wrapperCol: { span: 16 }
  62. },
  63. formData: {
  64. company: null, // 快递公司
  65. orderNo: '' // 运单编号
  66. },
  67. isShow: this.openModal // 是否填写物流信息
  68. }
  69. },
  70. methods: {
  71. // 物流信息 保存
  72. handleSubmit (e) {
  73. e.preventDefault()
  74. const _this = this
  75. this.form.validateFields((err, values) => {
  76. if (!err) {
  77. this.$emit('success')
  78. }
  79. })
  80. },
  81. // 取消
  82. close () {
  83. this.isShow = false
  84. }
  85. },
  86. watch: {
  87. // 父页面传过来的弹框状态
  88. openModal (newValue, oldValue) {
  89. this.isShow = newValue
  90. },
  91. // 重定义的弹框状态
  92. isShow (val) {
  93. if (!val) {
  94. this.$emit('close')
  95. }
  96. }
  97. }
  98. }
  99. </script>
  100. <style lang="less" scoped>
  101. </style>