basicInfoModal.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <template>
  2. <a-modal
  3. centered
  4. class="purchaseOrder-basicInfo-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="新增采购单"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. width="80%">
  11. <a-form-model
  12. id="purchaseOrder-basicInfo-form"
  13. ref="ruleForm"
  14. :model="form"
  15. :rules="rules"
  16. :label-col="formItemLayout.labelCol"
  17. :wrapper-col="formItemLayout.wrapperCol" >
  18. <a-form-model-item label="供应商" prop="state">
  19. <a-radio-group
  20. name="radioGroup"
  21. v-model="form.state"
  22. id="purchaseOrder-basicInfo-state" >
  23. <a-radio :value="1">箭冠营销中心</a-radio>
  24. <a-radio :value="0">支持省级</a-radio>
  25. </a-radio-group>
  26. </a-form-model-item>
  27. <a-form-model-item label="支付方式" prop="sort">
  28. <v-select
  29. v-model="form.billStatus"
  30. ref="billStatus"
  31. id="purchaseOrder-basicInfo-billStatus"
  32. code="PAYMENT_TYPE"
  33. placeholder="请选择支付方式"
  34. allowClear></v-select>
  35. </a-form-model-item>
  36. <a-form-model-item label="收货地址" prop="name">
  37. {{ chooseAddr }}
  38. <a-button type="link" id="purchaseOrder-basicInfo-chooseAddr" @click="handleChoose">{{ addressVal }} >></a-button>
  39. </a-form-model-item>
  40. </a-form-model>
  41. <div class="btn-cont">
  42. <a-button type="primary" id="purchaseOrder-basicInfo-modal-save" @click="handleSave">保存</a-button>
  43. <a-button id="purchaseOrder-basicInfo-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  44. </div>
  45. <!-- 选择地址 -->
  46. <choose-address-modal :openModal="openAddrModal" @ok="handleOk" @close="openAddrModal=false" />
  47. </a-modal>
  48. </template>
  49. <script>
  50. import { VSelect } from '@/components'
  51. import chooseAddressModal from './receivingAddress/chooseAddressModal.vue'
  52. export default {
  53. name: 'BasicInfoModal',
  54. components: { VSelect, chooseAddressModal },
  55. props: {
  56. openModal: { // 弹框显示状态
  57. type: Boolean,
  58. default: false
  59. }
  60. },
  61. data () {
  62. return {
  63. isShow: this.openModal, // 是否打开弹框
  64. formItemLayout: {
  65. labelCol: { span: 6 },
  66. wrapperCol: { span: 16 }
  67. },
  68. form: {
  69. name: '', // 仓库名称
  70. sort: '' // 排序
  71. },
  72. rules: {
  73. name: [
  74. { required: true, message: '请输入仓库名称', trigger: 'blur' }
  75. ]
  76. },
  77. addressVal: '选择地址', // 选择地址/更换地址
  78. chooseAddr: '', // 当前已选地址信息
  79. openAddrModal: false // 选择地址弹框是否显示
  80. }
  81. },
  82. methods: {
  83. // 保存
  84. handleSave () {
  85. this.isShow = false
  86. this.$emit('ok')
  87. },
  88. // 选择地址
  89. handleChoose () {
  90. this.openAddrModal = true
  91. },
  92. // 地址保存
  93. handleOk (data) {
  94. this.chooseAddr = '张三(18800001111) 河南省 郑州市 中原区 大学科技园'
  95. this.addressVal = '更换地址'
  96. this.openAddrModal = false
  97. }
  98. },
  99. watch: {
  100. // 父页面传过来的弹框状态
  101. openModal (newValue, oldValue) {
  102. this.isShow = newValue
  103. },
  104. // 重定义的弹框状态
  105. isShow (newValue, oldValue) {
  106. if (!newValue) {
  107. this.$emit('close')
  108. }
  109. }
  110. }
  111. }
  112. </script>
  113. <style lang="less">
  114. .purchaseOrder-basicInfo-modal{
  115. .ant-modal-body {
  116. padding: 40px 40px 24px;
  117. }
  118. .btn-cont {
  119. text-align: center;
  120. margin: 35px 0 10px;
  121. }
  122. }
  123. </style>