offlineModal.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <template>
  2. <a-modal
  3. centered
  4. class="productInfoOffline-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="提示"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. :width="800">
  11. <p v-if="loadData.length==1" style="font-weight: bold;margin-left: 20px;">确认要下线吗?</p>
  12. <p v-else style="font-weight: bold;margin-left: 20px;">已选有效数据{{ loadData.length }}条,确认要批量下线吗?</p>
  13. <a-form-model
  14. id="productInfoEdit-form"
  15. ref="ruleForm"
  16. :model="form"
  17. :rules="rules"
  18. :label-col="formItemLayout.labelCol"
  19. :wrapper-col="formItemLayout.wrapperCol">
  20. <a-form-model-item label="下线选项" prop="unit">
  21. <v-select
  22. code="OFFLINE_REASON_TYPE"
  23. id="productInfoOffline-unit"
  24. v-model="form.unit"
  25. allowClear
  26. placeholder="请选择下线选项"
  27. ></v-select>
  28. </a-form-model-item>
  29. <a-form-model-item label="通用编码" prop="unit">
  30. <!-- 列表 -->
  31. <a-table
  32. class="sTable"
  33. ref="table"
  34. size="small"
  35. :rowKey="(record) => record.id"
  36. :columns="columns"
  37. :dataSource="loadData"
  38. :pagination="false"
  39. bordered>
  40. <!-- 通用编码 -->
  41. <template slot="universalCoding" slot-scope="text, record" >
  42. <div>
  43. <a-input
  44. id="productInfoOffline-universalCoding"
  45. :maxLength="60"
  46. v-model="form.lowerLimit"
  47. placeholder="请输入通用编码(最多60个字符)"
  48. allowClear />
  49. </div>
  50. </template>
  51. </a-table>
  52. </a-form-model-item>
  53. <a-form-model-item label="下线备注" prop="otherCode">
  54. <a-textarea
  55. id="productInfoOffline-otherCode"
  56. :maxLength="60"
  57. v-model="form.otherCode"
  58. placeholder="请输入下线备注(最多60个字符)"
  59. allowClear />
  60. </a-form-model-item>
  61. </a-form-model>
  62. <div class="btn-cont">
  63. <a-button type="primary" id="productInfoOffline-submit" @click="handleSubmit">确定</a-button>
  64. <a-button id="productInfoOffline-cancel" @click="isShow = false" style="margin-left: 100px;">取消</a-button>
  65. </div>
  66. </a-modal>
  67. </template>
  68. <script>
  69. import { VSelect } from '@/components'
  70. import { productSnDetail } from '@/api/product'
  71. export default {
  72. name: 'ProductInfoDetailModal',
  73. components: { VSelect },
  74. props: {
  75. openModal: { // 弹框显示状态
  76. type: Boolean,
  77. default: false
  78. },
  79. nowData: {
  80. type: Array,
  81. default: () => {
  82. return []
  83. }
  84. }
  85. },
  86. data () {
  87. return {
  88. isShow: this.openModal, // 是否打开弹框
  89. formItemLayout: {
  90. labelCol: { span: 3 },
  91. wrapperCol: { span: 21 }
  92. },
  93. form: {
  94. storageQuantity: undefined
  95. },
  96. rules: {
  97. supplierName: [
  98. { required: true, message: '请输入供应商名称', trigger: 'blur' }
  99. ]
  100. },
  101. columns: [
  102. { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
  103. { title: '产品编码', dataIndex: 'code', width: 220, align: 'center', customRender: function (text) { return text || '--' } },
  104. { title: '通用编码', scopedSlots: { customRender: 'universalCoding' }, align: 'center' }
  105. ],
  106. loadData: []
  107. }
  108. },
  109. methods: {
  110. // 确定
  111. handleSubmit () {
  112. // productSnDetail({ sn: this.itemSn }).then(res => {
  113. // if (res.status == 200) {
  114. // this.detailsData = res.data
  115. // } else {
  116. // this.detailsData = null
  117. // }
  118. // })
  119. }
  120. },
  121. watch: {
  122. // 父页面传过来的弹框状态
  123. openModal (newValue, oldValue) {
  124. this.isShow = newValue
  125. },
  126. // 重定义的弹框状态
  127. isShow (newValue, oldValue) {
  128. if (!newValue) {
  129. this.$emit('close')
  130. }
  131. },
  132. nowData: {
  133. handler (newValue, oldValue) {
  134. if (this.isShow && newValue) {
  135. // this.getDetail()
  136. }
  137. },
  138. deep: true
  139. }
  140. }
  141. }
  142. </script>
  143. <style lang="less">
  144. .productInfoOffline-modal{
  145. .ant-modal-body {
  146. padding: 40px 40px 24px;
  147. }
  148. .btn-cont {
  149. text-align: center;
  150. margin: 35px 0 10px;
  151. }
  152. }
  153. </style>