chooseImportModal.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  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="900">
  11. <div class="chooseImport-con">
  12. <!-- 可导入数据 -->
  13. <div class="chooseImport-head">
  14. <p class="text-overflow">可导入数据{{ loadData.length }}条</p>
  15. <p>
  16. <a-tooltip placement="rightTop">
  17. <template slot="title">
  18. <div v-for="(con,i) in countData" :key="i"><strong>业务单号</strong>({{ con.bizCode }})<span v-for="(item,j) in con.info" :key="j">{{ item.productCode }}(<span class="red">{{ item.productNum }}</span>/{{ item.bizProductNum }});</span></div>
  19. </template>
  20. <div class="text-overflows2" v-if="countData && countData.length>0">
  21. 可导入产品数量与实际销售数量有差异:<span v-for="(con,i) in countData" :key="i"><strong>业务单号</strong>({{ con.bizCode }})<span v-for="(item,j) in con.info" :key="j">{{ item.productCode }}(<span class="red">{{ item.productNum }}</span>/{{ item.bizProductNum }});</span></span>
  22. </div>
  23. </a-tooltip>
  24. </p>
  25. </div>
  26. <a-table
  27. class="sTable"
  28. ref="table"
  29. size="small"
  30. :rowKey="(record) => record.no"
  31. rowKeyName="no"
  32. :columns="nowColumns"
  33. :dataSource="loadData"
  34. :loading="loading"
  35. :scroll="{ y: 200 }"
  36. :pagination="false"
  37. bordered>
  38. </a-table>
  39. <a-divider />
  40. <!-- 不可导入数据 -->
  41. <p class="red">不可导入数据{{ unLoadData.length }}条</p>
  42. <a-table
  43. class="unTable"
  44. ref="unTable"
  45. size="small"
  46. :rowKey="(record) => record.no"
  47. rowKeyName="no"
  48. :columns="nowUnColumns"
  49. :dataSource="unLoadData"
  50. :loading="loading"
  51. :scroll="{ y: 200 }"
  52. :pagination="false"
  53. bordered>
  54. </a-table>
  55. <!-- 按钮 -->
  56. <div class="btn-con">
  57. <a-button
  58. type="primary"
  59. id="chooseImport-submit"
  60. size="large"
  61. :class="loadData.length==0?'button-grey':'button-primary'"
  62. @click="handleSubmit"
  63. style="padding: 0 40px;">确认导入</a-button>
  64. <a-button
  65. id="chooseImport-cancel"
  66. size="large"
  67. class="button-cancel"
  68. @click="isShow=false"
  69. style="padding: 0 40px;margin-left: 15px;">取消</a-button>
  70. <a-button
  71. type="primary"
  72. id="chooseImport-error"
  73. size="large"
  74. class="button-error"
  75. @click="handleError"
  76. style="padding: 0 40px;margin-left: 15px;">导出错误项</a-button>
  77. </div>
  78. </div>
  79. </a-modal>
  80. </template>
  81. <script>
  82. import { commonMixin } from '@/utils/mixin'
  83. import { hdExportExcel } from '@/libs/exportExcel'
  84. // 接口
  85. import { codeExportImportError } from '@/api/reportData'
  86. export default {
  87. name: 'ChooseImportModal',
  88. mixins: [commonMixin],
  89. props: {
  90. openModal: { // 弹框显示状态
  91. type: Boolean,
  92. default: false
  93. },
  94. paramsData: {// 导入数据
  95. type: Object,
  96. default: () => {
  97. return {}
  98. }
  99. }
  100. },
  101. data () {
  102. return {
  103. isShow: this.openModal, // 是否打开弹框
  104. nowColumns: [
  105. { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
  106. { title: '产品编码', dataIndex: 'productCode', width: '21%', align: 'center', customRender: function (text) { return text || '--' } },
  107. { title: '唯一码', dataIndex: 'traceCode', width: '21%', align: 'center', customRender: function (text) { return text || '--' } },
  108. { title: '业务单号', dataIndex: 'bizCode', width: '21%', align: 'center', customRender: function (text) { return text || '--' } },
  109. { title: '工厂出库单号', dataIndex: 'factoryOutNo', width: '26%', align: 'center', customRender: function (text) { return text || '--' } }
  110. ],
  111. loadData: [], // 可导入信息
  112. nowUnColumns: [
  113. { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
  114. { title: '产品编码', dataIndex: 'productCode', width: '17%', align: 'center', customRender: function (text) { return text || '--' } },
  115. { title: '唯一码', dataIndex: 'traceCode', width: '17%', align: 'center', customRender: function (text) { return text || '--' } },
  116. { title: '业务单号', dataIndex: 'bizCode', width: '17%', align: 'center', customRender: function (text) { return text || '--' } },
  117. { title: '工厂出库单号', dataIndex: 'factoryOutNo', width: '17%', align: 'center', customRender: function (text) { return text || '--' } },
  118. { title: '备注', dataIndex: 'errorDesc', width: '27%', align: 'center', customRender: function (text) { return text || '--' } }
  119. ],
  120. unLoadData: [], // 不可导入信息
  121. loading: false, // 表格加载状态
  122. countData: []// 导入条数统计
  123. }
  124. },
  125. methods: {
  126. // 获取导入列表
  127. getData () {
  128. const _this = this
  129. const paramsData = JSON.parse(JSON.stringify(_this.paramsData))
  130. this.loadData = paramsData.rightList || []
  131. this.unLoadData = paramsData.errorList || []
  132. this.loadData.map((item, index) => {
  133. item.no = index + 1
  134. })
  135. this.unLoadData.map((item, index) => {
  136. item.no = index + 1
  137. })
  138. if (paramsData.billList && paramsData.billList.length > 0) {
  139. const newCountData = paramsData.billList || []
  140. newCountData.map(item => {
  141. item.info = [{ productCode: item.productCode,
  142. productNum: item.productNum,
  143. bizProductNum: item.bizProductNum }]
  144. })
  145. const mergedObjects = newCountData.reduce((acc, obj) => {
  146. const index = acc.findIndex(o => { return o.bizCode == obj.bizCode })
  147. if (index != -1) {
  148. acc[index].info.push({ productCode: obj.productCode,
  149. productNum: obj.productNum,
  150. bizProductNum: obj.bizProductNum })
  151. } else {
  152. acc.push(obj)
  153. }
  154. return acc
  155. }, [])
  156. this.countData = mergedObjects
  157. }
  158. },
  159. // 获取 重复导入数据 有重复true 没有返回false
  160. compareObjects (obj1, obj2) {
  161. return Object.keys(obj1).every(key => obj1[key] === obj2[key])
  162. },
  163. // 确认导入
  164. handleSubmit () {
  165. if (this.loadData.length == 0) {
  166. this.$message.warning('无可导入数据!')
  167. } else {
  168. this.$emit('ok', this.loadData)
  169. this.isShow = false
  170. }
  171. },
  172. // 导出 错误项
  173. handleError () {
  174. const _this = this
  175. if (_this.unLoadData.length < 1) {
  176. _this.$message.info('暂无可导出的错误项~')
  177. return
  178. }
  179. _this.spinning = true
  180. hdExportExcel(codeExportImportError, _this.unLoadData, '唯一码错误项', function () {
  181. _this.spinning = false
  182. })
  183. }
  184. },
  185. watch: {
  186. // 父页面传过来的弹框状态
  187. openModal (newValue, oldValue) {
  188. this.isShow = newValue
  189. },
  190. // 重定义的弹框状态
  191. isShow (newValue, oldValue) {
  192. if (!newValue) {
  193. this.$emit('close')
  194. this.loadData = []
  195. this.unLoadData = []
  196. this.countData = []
  197. } else {
  198. this.getData()
  199. }
  200. }
  201. }
  202. }
  203. </script>
  204. <style lang="less" scoped>
  205. .chooseImport-modal{
  206. .chooseImport-con{
  207. .red{
  208. color: #f30;
  209. }
  210. .btn-con{
  211. text-align: center;
  212. margin: 30px 0 20px;
  213. .button-cancel,.button-error{
  214. font-size: 12px;
  215. }
  216. }
  217. .chooseImport-head{
  218. display:flex;
  219. align-items:center;
  220. p:first-child{
  221. max-width:12%;
  222. }
  223. p:last-child{
  224. margin-left:10px;
  225. max-width:88%;
  226. }
  227. }
  228. }
  229. }
  230. </style>