chooseImportModal.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <template>
  2. <a-modal
  3. centered
  4. class="chooseImport-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="导入"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. width="75%">
  11. <div class="chooseImport-con">
  12. <p class="">查询数据{{ loadData.length }}条</p>
  13. <a-table
  14. class="sTable"
  15. ref="table"
  16. size="small"
  17. :rowKey="(record) => record.allocateSn"
  18. :columns="nowColumns"
  19. :dataSource="loadData"
  20. :loading="loading"
  21. :scroll="{ y: 500 }"
  22. :pagination="false"
  23. bordered>
  24. </a-table>
  25. <!-- 按钮 -->
  26. <div class="btn-con">
  27. <a-button
  28. id="chooseImport-cancel"
  29. size="large"
  30. class="button-cancel"
  31. @click="isShow=false"
  32. style="padding: 0 40px;margin-left: 15px;">取消</a-button>
  33. <a-button
  34. type="primary"
  35. id="chooseImport-error"
  36. size="large"
  37. class="button-error"
  38. @click="handleExport"
  39. style="padding: 0 40px;margin-left: 15px;">导出</a-button>
  40. </div>
  41. </div>
  42. </a-modal>
  43. </template>
  44. <script>
  45. import { commonMixin } from '@/utils/mixin'
  46. // 组件
  47. import { hdExportExcel } from '@/libs/exportExcel'
  48. // 接口
  49. import { productForeignQueryList, productForeignExport } from '@/api/productForeign'
  50. export default {
  51. name: 'ChooseImportModal',
  52. mixins: [commonMixin],
  53. props: {
  54. openModal: { // 弹框显示状态
  55. type: Boolean,
  56. default: false
  57. },
  58. paramsData: {
  59. type: Object,
  60. default: () => {
  61. return {}
  62. }
  63. }
  64. },
  65. data () {
  66. const _this = this
  67. return {
  68. isShow: this.openModal, // 是否打开弹框
  69. nowColumns: [
  70. { title: '序号', dataIndex: 'no', width: '6%', align: 'center' },
  71. { title: '查询码', dataIndex: 'queryCode', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
  72. { title: '外贸产品编码', dataIndex: 'foreignCode', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
  73. { title: '箭冠产品编码', dataIndex: 'productCode', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
  74. { title: 'OE码', dataIndex: 'oeCode', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
  75. { title: '大厂码',
  76. children: [
  77. {
  78. title: 'MANN No.', dataIndex: 'mannCode', width: '10%', align: 'center', customRender: function (text) { return text || '--' }
  79. },
  80. {
  81. title: 'MAHLE No.', dataIndex: 'mahleCode', width: '10%', align: 'center', customRender: function (text) { return text || '--' }
  82. },
  83. {
  84. title: 'VIC No.', dataIndex: 'vicCode', width: '10%', align: 'center', customRender: function (text) { return text || '--' }
  85. },
  86. {
  87. title: 'FRAM NO.', dataIndex: 'framCode', width: '10%', align: 'center', customRender: function (text) { return text || '--' }
  88. },
  89. {
  90. title: 'WIX No.', dataIndex: 'wixCode', width: '10%', align: 'center', customRender: function (text) { return text || '--' }
  91. }
  92. ]
  93. },
  94. { title: '产品尺寸', dataIndex: 'size', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
  95. { title: '主材料', dataIndex: 'material', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
  96. { title: '含盒报价', dataIndex: 'priceFreeBox', width: '8%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  97. { title: '无盒报价', dataIndex: 'priceWithBox', width: '8%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } }
  98. ],
  99. loadData: [],
  100. loading: false
  101. }
  102. },
  103. methods: {
  104. getData () {
  105. const _this = this
  106. _this.loading = true
  107. const params = {
  108. path: _this.paramsData.path
  109. }
  110. productForeignQueryList(params).then(res => {
  111. _this.loading = false
  112. if (res.status == 200) {
  113. if (res.data && res.data.length > 0) {
  114. res.data.map((item, index) => {
  115. item.no = index + 1
  116. })
  117. }
  118. _this.loadData = res.data || []
  119. }
  120. })
  121. },
  122. // 导出
  123. handleExport () {
  124. const _this = this
  125. if (_this.loadData.length < 1) {
  126. _this.$message.info('暂无可导出的产品~')
  127. return
  128. }
  129. _this.spinning = true
  130. const newLoadData = _this.loadData.map(item => {
  131. if (item.productEntity) {
  132. item.productName = item.productEntity.name
  133. item.productCode = item.productEntity.code
  134. item.productOrigCode = item.productEntity.origCode
  135. item.productTypeName1 = item.productEntity.productTypeName1
  136. item.productTypeName2 = item.productEntity.productTypeName2
  137. item.productTypeName3 = item.productEntity.productTypeName3
  138. }
  139. return item
  140. })
  141. hdExportExcel(productForeignExport, newLoadData, '外贸产品', function () {
  142. _this.spinning = false
  143. })
  144. }
  145. },
  146. watch: {
  147. // 父页面传过来的弹框状态
  148. openModal (newValue, oldValue) {
  149. this.isShow = newValue
  150. },
  151. // 重定义的弹框状态
  152. isShow (newValue, oldValue) {
  153. if (!newValue) {
  154. this.$emit('close')
  155. this.loadData = []
  156. } else {
  157. this.getData()
  158. }
  159. }
  160. }
  161. }
  162. </script>
  163. <style lang="less" scoped>
  164. .chooseImport-modal{
  165. .chooseImport-con{
  166. /deep/.sTable td{
  167. white-space: pre-line;
  168. }
  169. .btn-con{
  170. text-align: center;
  171. margin: 30px 0 20px;
  172. .button-cancel,.button-error{
  173. font-size: 12px;
  174. }
  175. }
  176. }
  177. }
  178. </style>