printModal.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  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.salesReturnBillNo || '--' }}</a-form-model-item>
  21. <a-form-model-item label="销售退货对象">{{ itemData&&itemData.buyerName || '--' }}</a-form-model-item>
  22. <a-form-model-item label="退货价格" prop="priceType" v-if="nowType=='export'">
  23. <a-radio-group v-model="form.priceType">
  24. <a-radio value="SALES_RETURN_AMOUNT">导出</a-radio>
  25. <a-radio value="SALES_RETURN">不导出</a-radio>
  26. </a-radio-group>
  27. </a-form-model-item>
  28. <a-form-model-item label="退货价格" prop="priceType" v-if="nowType!='export'">
  29. <a-radio-group v-model="form.priceType">
  30. <a-radio value="SALES_RETURN_AMOUNT">打印</a-radio>
  31. <a-radio value="SALES_RETURN">不打印</a-radio>
  32. </a-radio-group>
  33. </a-form-model-item>
  34. <a-form-model-item label="货架编号" prop="orderBy" v-if="nowType!='export'">
  35. <a-radio-group v-model="form.orderBy">
  36. <a-radio value="ASC">打印(↑升序)</a-radio>
  37. <a-radio value="DESC">打印(↓降序)</a-radio>
  38. <a-radio value="-1">不打印</a-radio>
  39. </a-radio-group>
  40. </a-form-model-item>
  41. </a-form-model>
  42. <div class="btn-cont">
  43. <a-button id="sales-print-back" @click="handleCancel">取消</a-button>
  44. <a-button type="primary" id="sales-print-save" @click="handleSave()" style="margin-left: 15px;">确定</a-button>
  45. </div>
  46. </a-spin>
  47. </a-modal>
  48. </template>
  49. <script>
  50. export default {
  51. props: {
  52. openModal: { // 弹框显示状态
  53. type: Boolean,
  54. default: false
  55. },
  56. itemData: {
  57. type: Object,
  58. default: () => {
  59. return null
  60. }
  61. },
  62. nowType: {
  63. type: String,
  64. default: ''
  65. }
  66. },
  67. data () {
  68. return {
  69. isShow: this.openModal, // 是否打开弹框
  70. form: {
  71. priceType: undefined,
  72. orderBy: undefined
  73. },
  74. rules: {
  75. priceType: [{ required: true, message: '请选择退货价格', trigger: 'change' }],
  76. orderBy: [{ required: true, message: '请选择货架编号', trigger: 'change' }]
  77. },
  78. formItemLayout: {
  79. labelCol: { span: 6 },
  80. wrapperCol: { span: 18 }
  81. },
  82. spinning: false,
  83. typeList: []
  84. }
  85. },
  86. computed: {
  87. modalTit () {
  88. return this.nowType == 'export' ? '导出Excel' : '销售退货打印'
  89. }
  90. },
  91. methods: {
  92. // 确认
  93. handleSave () {
  94. const _this = this
  95. this.$refs.ruleForm.validate(valid => {
  96. if (valid) {
  97. const obj = {
  98. priceType: _this.form.priceType
  99. }
  100. // 打印货位编号
  101. if (_this.form.orderBy != '-1' && this.nowType != 'export') {
  102. obj.orderBy = _this.form.orderBy
  103. obj.priceType = obj.priceType + '_STACK_PLACE'
  104. }
  105. _this.$emit('ok', obj)
  106. _this.isShow = false
  107. } else {
  108. console.log('error submit!!')
  109. return false
  110. }
  111. })
  112. },
  113. // 取消选择分类
  114. handleCancel () {
  115. this.isShow = false
  116. }
  117. },
  118. watch: {
  119. // 父页面传过来的弹框状态
  120. openModal (newValue, oldValue) {
  121. this.isShow = newValue
  122. },
  123. // 重定义的弹框状态
  124. isShow (newValue, oldValue) {
  125. if (!newValue) {
  126. this.$emit('close')
  127. this.$refs.ruleForm.resetFields()
  128. }
  129. }
  130. }
  131. }
  132. </script>
  133. <style lang="less">
  134. .sales-print-type-modal{
  135. .btn-cont {
  136. text-align: center;
  137. margin: 35px 0 10px;
  138. }
  139. }
  140. </style>