basicInfoModal.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <template>
  2. <a-modal centered class="warehouseAllocation-basicInfo-modal" :footer="null" :maskClosable="false" title="新建散件入库单" v-model="isShow" @cancle="isShow = false" width="80%">
  3. <a-form-model
  4. id="warehouseAllocation-basicInfo-form"
  5. ref="ruleForm"
  6. :model="form"
  7. :rules="rules"
  8. :label-col="formItemLayout.labelCol"
  9. :wrapper-col="formItemLayout.wrapperCol"
  10. >
  11. <a-form-model-item label="调出仓库" prop="sort">
  12. <v-select
  13. v-model="form.billStatus"
  14. ref="billStatus"
  15. id="warehouseAllocation-basicInfo-billStatus"
  16. code="PAYMENT_TYPE"
  17. placeholder="请选择调出仓库"
  18. allowClear
  19. ></v-select>
  20. </a-form-model-item>
  21. <a-form-model-item label="调入仓库" prop="sort">
  22. <v-select
  23. v-model="form.billStatus"
  24. ref="billStatus"
  25. id="warehouseAllocation-basicInfo-billStatus"
  26. code="PAYMENT_TYPE"
  27. placeholder="请选择调入仓库"
  28. allowClear
  29. ></v-select>
  30. </a-form-model-item>
  31. <a-form-model-item label="关联单号" prop="address">
  32. <a-input id="warehouseAllocation-basicInfo-address" :maxLength="30" v-model="form.address" placeholder="请输入关联单号(最多30个字符)" allowClear />
  33. </a-form-model-item>
  34. <a-form-model-item label="备注" prop="remarks">
  35. <a-textarea id="warehouseAllocation-basicInfo-remarks" :maxLength="500" v-model="form.remarks" placeholder="请输入备注(最多500个字符)" allowClear />
  36. </a-form-model-item>
  37. </a-form-model>
  38. <div class="btn-cont">
  39. <a-button type="primary" id="warehouseAllocation-basicInfo-modal-save" @click="handleSave">保存</a-button>
  40. <a-button id="warehouseAllocation-basicInfo-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  41. </div>
  42. </a-modal>
  43. </template>
  44. <script>
  45. import { VSelect } from '@/components';
  46. export default {
  47. name: 'WarehouseAllocationBasicInfoModal',
  48. components: { VSelect },
  49. props: {
  50. openModal: {
  51. // 弹框显示状态
  52. type: Boolean,
  53. default: false
  54. }
  55. },
  56. data() {
  57. return {
  58. isShow: this.openModal, // 是否打开弹框
  59. formItemLayout: {
  60. labelCol: { span: 6 },
  61. wrapperCol: { span: 16 }
  62. },
  63. form: {
  64. name: '', // 仓库名称
  65. sort: '' // 排序
  66. },
  67. rules: {
  68. name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }]
  69. },
  70. brandData: [] // 供应商 下拉数据
  71. };
  72. },
  73. methods: {
  74. // 保存
  75. handleSave() {
  76. this.isShow = false
  77. this.$emit('ok')
  78. },
  79. filterOption(input, option) {
  80. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  81. }
  82. },
  83. watch: {
  84. // 父页面传过来的弹框状态
  85. openModal(newValue, oldValue) {
  86. this.isShow = newValue
  87. },
  88. // 重定义的弹框状态
  89. isShow(newValue, oldValue) {
  90. if (!newValue) {
  91. this.$emit('close')
  92. }
  93. }
  94. }
  95. };
  96. </script>
  97. <style lang="less">
  98. .warehouseAllocation-basicInfo-modal {
  99. .ant-modal-body {
  100. padding: 40px 40px 24px;
  101. }
  102. .btn-cont {
  103. text-align: center;
  104. margin: 35px 0 10px;
  105. }
  106. }
  107. </style>