basicInfoModal.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <template>
  2. <a-modal
  3. centered
  4. class="quotation-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="quotation-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="name" extra="(未搜索到客户时可直接录入,但客户信息不保存于客户资料)">
  19. <a-auto-complete id="quotation-basicInfo-bundleName" allowClear v-model="form.name" placeholder="请输入客户名称">
  20. <template slot="dataSource">
  21. <a-select-option v-for="item in optData" :key="item">{{ item }}</a-select-option>
  22. </template>
  23. </a-auto-complete>
  24. </a-form-model-item>
  25. <a-form-model-item label="价格类型" prop="priceType">
  26. <v-select code="PRICE_TYPE" id="quotation-basicInfo-priceType" v-model="form.priceType" allowClear placeholder="请选择价格类型" ></v-select>
  27. </a-form-model-item>
  28. <a-form-model-item label="电话" prop="phone">
  29. <a-input id="quotation-basicInfo-bundleName" v-model="form.bundleName" allowClear :maxLength="30" placeholder="请输入电话(最多30个字符)"/>
  30. </a-form-model-item>
  31. <a-form-model-item label="联系人" prop="phone">
  32. <a-input id="quotation-basicInfo-bundleName" v-model="form.bundleName" allowClear :maxLength="30" placeholder="请输入联系人(最多30个字符)"/>
  33. </a-form-model-item>
  34. <a-form-model-item label="备注" prop="phone">
  35. <a-textarea id="quotation-basicInfo-bundleName" v-model="form.bundleName" allowClear :maxLength="120" placeholder="请输入备注(最多120个字符)"/>
  36. </a-form-model-item>
  37. </a-form-model>
  38. <div class="btn-cont">
  39. <a-button type="primary" id="quotation-basicInfo-modal-submit" @click="handleSubmit">提交</a-button>
  40. <a-button id="quotation-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: 'BasicInfoModal',
  48. components: { VSelect },
  49. props: {
  50. openModal: { // 弹框显示状态
  51. type: Boolean,
  52. default: false
  53. }
  54. },
  55. data(){
  56. return{
  57. isShow: this.openModal, // 是否打开弹框
  58. formItemLayout: {
  59. labelCol: { span: 6 },
  60. wrapperCol: { span: 16 }
  61. },
  62. form: {
  63. name: '', // 仓库名称
  64. priceType: undefined, // 价格类型
  65. },
  66. rules: {
  67. name: [
  68. { required: true, message: '请输入客户名称', trigger: 'blur' }
  69. ],
  70. priceType: [
  71. { required: true, message: '请选择价格类型', trigger: 'change' },
  72. ],
  73. },
  74. optData: ['aa', 'bb', 'cc'],
  75. dataSource: [
  76. {name: '111', id:1},
  77. {name: '222', id:2},
  78. {name: '333', id:3},
  79. ],
  80. }
  81. },
  82. methods: {
  83. // 提交
  84. handleSubmit(){
  85. const _this = this
  86. // this.$refs.ruleForm.validate(valid => {
  87. // if (valid) {
  88. _this.$emit('ok')
  89. _this.isShow = false
  90. // } else {
  91. // console.log('error submit!!')
  92. // return false
  93. // }
  94. // })
  95. },
  96. filterOption(input, option) {
  97. console.log(input, option)
  98. return (
  99. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  100. )
  101. },
  102. },
  103. watch: {
  104. // 父页面传过来的弹框状态
  105. openModal (newValue, oldValue) {
  106. this.isShow = newValue
  107. },
  108. // 重定义的弹框状态
  109. isShow (newValue, oldValue) {
  110. if (!newValue) {
  111. this.$emit('close')
  112. }
  113. }
  114. }
  115. }
  116. </script>
  117. <style lang="less">
  118. .quotation-basicInfo-modal{
  119. .ant-modal-body {
  120. padding: 40px 40px 24px;
  121. }
  122. .btn-cont {
  123. text-align: center;
  124. margin: 35px 0 10px;
  125. }
  126. }
  127. </style>