addModal.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template>
  2. <a-modal
  3. centered
  4. class="inventoryCheckAddModal-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :closable="false"
  8. title="新增盘点单"
  9. v-model="isShow"
  10. @cancel="isShow=false"
  11. :width="600">
  12. <a-spin :spinning="spinning" tip="Loading...">
  13. <div>
  14. <div class="inventoryCheckAddModal-con">
  15. <h3>全盘盘点</h3>
  16. <p>全盘是指所有有过入库记录的产品都参与盘点</p>
  17. <p>确定创建新的盘点单吗?</p>
  18. <p v-show="isShowWarehouse">
  19. 仓库:<warehouse
  20. style="width:200px;"
  21. v-model="form.warehouseSn"
  22. isPermission
  23. id="inventoryCheckAddModal-warehouseSn"
  24. placeholder="请选择仓库"
  25. />
  26. </p>
  27. </div>
  28. <div class="btn-cont">
  29. <a-button id="inventoryCheckAddModal-back" @click="isShow = false" style="margin-right: 15px;">取消</a-button>
  30. <a-button type="primary" id="inventoryCheckAddModal-save" @click="handleSave">确定</a-button>
  31. </div>
  32. </div>
  33. </a-spin>
  34. </a-modal>
  35. </template>
  36. <script>
  37. import { commonMixin } from '@/utils/mixin'
  38. import { checkWarehouseSave } from '@/api/checkWarehouse'
  39. import warehouse from '@/views/common/chooseWarehouse.js'
  40. export default {
  41. name: 'ProductInfoDetailModal',
  42. mixins: [commonMixin],
  43. components:{warehouse},
  44. props: {
  45. openModal: { // 弹框显示状态
  46. type: Boolean,
  47. default: false
  48. }
  49. },
  50. data () {
  51. return {
  52. spinning: false,
  53. form:{warehouseSn:undefined},
  54. isShow: this.openModal // 是否打开弹框
  55. }
  56. },
  57. methods: {
  58. // 确定
  59. handleSave () {
  60. if(this.isShowWarehouse && !this.form.warehouseSn){
  61. this.$message.error('请选择仓库')
  62. return
  63. }
  64. this.spinning = true
  65. checkWarehouseSave(this.form).then(res => {
  66. this.spinning = false
  67. if (res.status == 200) {
  68. this.$message.success('盘点单新增成功')
  69. this.$emit('ok', res.data)
  70. this.isShow = false
  71. }
  72. })
  73. }
  74. },
  75. watch: {
  76. // 父页面传过来的弹框状态
  77. openModal (newValue, oldValue) {
  78. this.isShow = newValue
  79. },
  80. // 重定义的弹框状态
  81. isShow (newValue, oldValue) {
  82. if (!newValue) {
  83. this.form.warehouseSn = undefined
  84. this.$emit('close')
  85. }else{
  86. // 默认仓库
  87. const defWareHouse = this.$store.state.app.defWarehouse
  88. this.form.warehouseSn = this.isShowWarehouse ? undefined : (defWareHouse?defWareHouse.warehouseSn:undefined)
  89. }
  90. }
  91. }
  92. }
  93. </script>
  94. <style lang="less">
  95. .inventoryCheckAddModal-modal{
  96. .ant-modal-body {
  97. padding: 30px 40px 24px;
  98. }
  99. .inventoryCheckAddModal-con{
  100. text-align: center;
  101. h3{
  102. font-size: 16px;
  103. font-weight: bold;
  104. margin-bottom: 25px;
  105. }
  106. }
  107. .btn-cont {
  108. text-align: center;
  109. margin: 35px 0 10px;
  110. }
  111. }
  112. </style>