detailModal.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <template>
  2. <a-modal
  3. centered
  4. class="vinRecord-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="调回单详情——[数字货架]"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. width="60%">
  11. <!-- 详情 -->
  12. <div v-if="itemData">
  13. <a-descriptions :column="3" size="default">
  14. <a-descriptions-item label="调货单号">123456789</a-descriptions-item>
  15. <a-descriptions-item label="创建时间">2022-11-4 10:00:02</a-descriptions-item>
  16. <a-descriptions-item label="状态" :span="1">已完成</a-descriptions-item>
  17. <a-descriptions-item label="退库时间">1</a-descriptions-item>
  18. <a-descriptions-item label="关联销售退货单">
  19. <span class="recallBillNo" @click="seeRecallBill">DH221104000008,</span>
  20. <span class="recallBillNo">DH221104000008</span>
  21. <a-button type="primary" ghost class="recallBillBtn">生成销售退货单</a-button>
  22. </a-descriptions-item>
  23. </a-descriptions>
  24. </div>
  25. <!-- 表格 -->
  26. <div class="table-body">
  27. <table>
  28. <tr>
  29. <th width="10%">序号</th>
  30. <th width="10%">产品编码</th>
  31. <th width="50%">产品名称</th>
  32. <th width="10%">调回数量</th>
  33. <th width="10%">实退数量</th>
  34. <th width="10%">单位</th>
  35. </tr>
  36. <tr v-for="(item,index) in 5" :key="item.productSn">
  37. <td>{{ index + 1 }}</td>
  38. <td>JA-11070N</td>
  39. <td>名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字</td>
  40. <td>2</td>
  41. <td>2</td>
  42. <td>个</td>
  43. </tr>
  44. </table>
  45. </div>
  46. <div class="btn-cont"><a-button id="vinRecord-modal-back" @click="isShow = false">关闭</a-button></div>
  47. <!-- 回调单号提示窗 -->
  48. <a-modal
  49. class="tipPopup"
  50. :maskClosable="false"
  51. v-model="tipVisible"
  52. :centered="true"
  53. :closable="false"
  54. :footer="null"
  55. width="23%">
  56. <div class="tipTop">
  57. <div>产品总款数:<span>5</span></div>
  58. <div>产品总件数:<span>5</span></div>
  59. </div>
  60. <div class="tipCon">确认生成销售退货订单吗?</div>
  61. <div class="tipCon">此调货单已经存在相应的销售退货单,确定再次生成销售退货单吗?</div>
  62. <div class="tipRecallBillNo">
  63. <p>DH221104000008</p>
  64. <p>DH221104000008</p>
  65. </div>
  66. <div class="tipFooter">
  67. <div class="btnLeft" @click="tipVisible = false">取消</div>
  68. <div class="btnLeft">确定</div>
  69. </div>
  70. </a-modal>
  71. </a-modal>
  72. </template>
  73. <script>
  74. export default {
  75. name: 'DetailModal',
  76. props: {
  77. openModal: { // 弹框显示状态
  78. type: Boolean,
  79. default: false
  80. },
  81. itemData: {
  82. type: Object,
  83. default: function () {
  84. return []
  85. }
  86. }
  87. },
  88. data () {
  89. return {
  90. isShow: this.openModal, // 是否打开弹框
  91. tipVisible: false
  92. }
  93. },
  94. watch: {
  95. // 父页面传过来的弹框状态
  96. openModal (newValue, oldValue) {
  97. this.isShow = newValue
  98. },
  99. // 重定义的弹框状态
  100. isShow (newValue, oldValue) {
  101. if (!newValue) {
  102. this.$emit('close')
  103. }
  104. // else {
  105. // this.getDetailList()
  106. // }
  107. }
  108. },
  109. methods: {
  110. seeRecallBill () {
  111. this.tipVisible = true
  112. }
  113. }
  114. }
  115. </script>
  116. <style lang="less">
  117. .vinRecord-modal{
  118. .ant-modal-body {
  119. padding: 40px 40px 24px;
  120. }
  121. .btn-cont {
  122. text-align: center;
  123. margin: 35px 0 10px;
  124. }
  125. .table-body{
  126. table{
  127. th,td{
  128. text-align: center;
  129. padding: 5px;
  130. border:1px solid #ddd;
  131. }
  132. th{
  133. background:#f8f8f8;
  134. }
  135. }
  136. }
  137. .recallBillNo{
  138. color:#39f;
  139. font-weight: 600;
  140. }
  141. .recallBillBtn{
  142. border-color:#39f;
  143. color:#39f;
  144. margin-left: 20px;
  145. &:hover, &:focus {
  146. border-color: #52a6fb;
  147. color: #52a6fb;
  148. }
  149. }
  150. }
  151. // 弹窗
  152. .tipPopup{
  153. .ant-modal-body{
  154. padding:0 !important;
  155. }
  156. text-align: center;
  157. .tipTop{
  158. width:62%;
  159. display: flex;
  160. algin-item:center;
  161. padding:20px 0;
  162. box-sizing: border-box;
  163. justify-content: space-between;
  164. color:#333;
  165. margin:0 auto;
  166. span{
  167. color:#f30f3;
  168. font-weight: bold;
  169. }
  170. }
  171. .tipCon{
  172. width:62%;
  173. margin: 0 auto 30px;
  174. text-align: center;
  175. }
  176. .tipRecallBillNo{
  177. padding:20px;
  178. p{
  179. padding-bottom: 15px;
  180. border-bottom: 1px solid #e0e0e0;
  181. }
  182. }
  183. .tipFooter{
  184. display: flex;
  185. algin-item:center;
  186. border-top:1px solid #e0e0e0;
  187. .btnLeft{
  188. width:50%;
  189. text-align: center;
  190. height:46px;
  191. line-height: 46px;
  192. color:#39f;
  193. &:first-child{
  194. border-right:1px solid #e0e0e0;
  195. }
  196. }
  197. }
  198. }
  199. </style>