printModal.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template>
  2. <a-modal
  3. centered
  4. :footer="null"
  5. :maskClosable="false"
  6. class="sales-print-type-modal"
  7. :title="modalTit"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="600">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. id="sales-print-form"
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol"
  19. >
  20. <a-form-model-item label="销售单号">{{ itemData&&itemData.salesBillNo || '--' }}</a-form-model-item>
  21. <a-form-model-item label="客户名称">{{ itemData&&itemData.buyerName || '--' }}</a-form-model-item>
  22. <a-form-model-item label="是否缺货产品" prop="dataScope">
  23. <a-radio-group v-model="form.dataScope">
  24. <a-radio value="all">全部</a-radio>
  25. <a-radio value="ENOUGH">有库存</a-radio>
  26. <a-radio value="LESS">缺货</a-radio>
  27. </a-radio-group>
  28. </a-form-model-item>
  29. <a-form-model-item label="原厂编码" prop="orgCode">
  30. <a-radio-group v-model="form.orgCode">
  31. <a-radio value="1">导出</a-radio>
  32. <a-radio value="0">不导出</a-radio>
  33. </a-radio-group>
  34. </a-form-model-item>
  35. </a-form-model>
  36. <div class="btn-cont">
  37. <a-button id="sales-print-back" @click="handleCancel">取消</a-button>
  38. <a-button type="primary" style="margin-left: 15px;" id="sales-print-save" @click="handleSave">导出</a-button>
  39. </div>
  40. </a-spin>
  41. </a-modal>
  42. </template>
  43. <script>
  44. export default {
  45. props: {
  46. openModal: { // 弹框显示状态
  47. type: Boolean,
  48. default: false
  49. },
  50. itemData: {
  51. type: Object,
  52. default: () => {
  53. return null
  54. }
  55. },
  56. nowType: {
  57. type: String,
  58. default: ''
  59. }
  60. },
  61. data () {
  62. return {
  63. isShow: this.openModal, // 是否打开弹框
  64. form: {
  65. id: 'all',
  66. dataScope: 'all',
  67. priceType: undefined,
  68. orgCode: "1"
  69. },
  70. rules: {
  71. id: [{ required: true, message: '请选择产品分类', trigger: 'change' }],
  72. dataScope: [{ required: true, message: '请选择是否缺货产品', trigger: 'change' }],
  73. orgCode: [{ required: true, message: '请选择原厂编码', trigger: 'change' }]
  74. },
  75. formItemLayout: {
  76. labelCol: { span: 6 },
  77. wrapperCol: { span: 15 }
  78. },
  79. spinning: false,
  80. typeList: []
  81. }
  82. },
  83. computed: {
  84. modalTit () {
  85. return '导出Excel'
  86. }
  87. },
  88. methods: {
  89. // 确认
  90. handleSave (isPrint) {
  91. const _this = this
  92. this.$refs.ruleForm.validate(valid => {
  93. if (valid) {
  94. _this.form.priceType = _this.form.dataScope == 'ENOUGH' ? 'SALES_BILL_NOT_LACK':'SALES_BILL'
  95. _this.form.priceType += _this.form.orgCode == "1" ? '_ORIG_CODE':''
  96. const obj = {
  97. salesBillSn: _this.itemData.salesBillSn,
  98. priceType: _this.form.priceType,
  99. dataScope: _this.form.dataScope == 'all' ? '' : _this.form.dataScope,
  100. type: isPrint || 'preview'
  101. }
  102. _this.$emit('ok', obj)
  103. _this.isShow = false
  104. } else {
  105. console.log('error submit!!')
  106. return false
  107. }
  108. })
  109. },
  110. // 取消选择分类
  111. handleCancel () {
  112. this.isShow = false
  113. },
  114. },
  115. watch: {
  116. // 父页面传过来的弹框状态
  117. openModal (newValue, oldValue) {
  118. this.isShow = newValue
  119. },
  120. // 重定义的弹框状态
  121. isShow (newValue, oldValue) {
  122. if (!newValue) {
  123. this.$emit('close')
  124. this.form = {
  125. id: 'all',
  126. dataScope: 'all',
  127. priceType: undefined,
  128. orgCode: "1"
  129. }
  130. this.$refs.ruleForm.resetFields()
  131. }
  132. }
  133. }
  134. }
  135. </script>
  136. <style lang="less">
  137. .sales-print-type-modal{
  138. .btn-cont {
  139. text-align: center;
  140. margin: 35px 0 10px;
  141. }
  142. }
  143. </style>