import.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. <template>
  2. <div class="intelligentReplenishmentImport-wrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <a-page-header :ghost="false" :backIcon="false" class="intelligentReplenishmentImport-back">
  5. <!-- 自定义的二级文字标题 -->
  6. <template slot="subTitle">
  7. <a id="intelligentReplenishmentImport-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
  8. </template>
  9. </a-page-header>
  10. <a-card :bordered="false" class="intelligentReplenishmentImport-cont">
  11. <div>
  12. <p class="total">共 <span>{{ listData.length }}</span> 条数据,红色字体表示数据不符合规范,请返回上一步修改文件后重新上传</p>
  13. <s-table
  14. class="sTable"
  15. ref="table"
  16. size="small"
  17. :rowKey="(record) => record.id"
  18. :columns="columns"
  19. :data="loadData"
  20. :scroll="{ x: 1440 }"
  21. :rowClassName="(record, index) => record.cost ? 'redBg-row':''"
  22. :showPagination="false"
  23. :defaultLoadData="false"
  24. bordered>
  25. </s-table>
  26. <div class="btn-cont">
  27. <a-button
  28. type="primary"
  29. v-if="errorFlag.indexOf('1')==-1"
  30. id="intelligentReplenishmentLevel-submit"
  31. size="large"
  32. class="button-primary"
  33. @click="handleSubmit"
  34. style="padding: 0 60px;">确认导入</a-button>
  35. <a-button
  36. type="primary"
  37. v-if="errorFlag.indexOf('1')!=-1"
  38. id="intelligentReplenishmentLevel-set"
  39. size="large"
  40. class="button-primary"
  41. @click="handleBackSet"
  42. style="padding: 0 60px;">上一步</a-button>
  43. <a-button
  44. id="intelligentReplenishmentLevel-back"
  45. size="large"
  46. class="button-cancel"
  47. @click="handleBack"
  48. style="padding: 0 60px;">取消</a-button>
  49. </div>
  50. </div>
  51. </a-card>
  52. </a-spin>
  53. </div>
  54. </template>
  55. <script>
  56. import { commonMixin } from '@/utils/mixin'
  57. import { STable } from '@/components'
  58. import { predictProductInfoGoods, predictProductInfoInsert } from '@/api/predict'
  59. export default {
  60. name: 'IntelligentReplenishmentImport',
  61. mixins: [commonMixin],
  62. components: { STable },
  63. data () {
  64. return {
  65. spinning: false,
  66. columns: [
  67. { title: '序号', dataIndex: 'no', width: 80, align: 'center', fixed: 'left' },
  68. { title: '产品编码', dataIndex: 'productCode', width: 220, align: 'center', customRender: function (text) { return text || '--' } },
  69. { title: '产品名称', dataIndex: 'productName', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  70. { title: '产品状态', dataIndex: 'productStateDictValue', width: 100, align: 'center', customRender: function (text) { return text || '--' } },
  71. { title: '订货周期(天)', dataIndex: 'cycle', width: 120, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  72. { title: '是否淘汰', dataIndex: 'eliminateText', width: 100, align: 'center', customRender: function (text) { return text || '--' } },
  73. { title: '淘汰描述', dataIndex: 'eliminateDesc', width: 200, align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  74. { title: '备注', dataIndex: 'remark', width: 200, align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  75. { title: '错误原因', dataIndex: 'errorDesc', width: 200, align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true }
  76. ],
  77. // 加载数据方法 必须为 Promise 对象
  78. loadData: parameter => {
  79. return predictProductInfoGoods({ path: JSON.parse(this.$cookies.get('REPLENISHMENT_PATH')) }).then(res => {
  80. let data
  81. if (res.status == 200) {
  82. data = res.data
  83. for (var i = 0; i < data.list.length; i++) {
  84. data.list[i].no = i + 1
  85. this.errorFlag.push(data.list[i].errorFlag)
  86. }
  87. this.listData = data.list
  88. }
  89. return data
  90. })
  91. },
  92. listData: [],
  93. errorFlag: []
  94. }
  95. },
  96. methods: {
  97. // 返回
  98. handleBack () {
  99. this.$router.push({ path: `/inventoryManagement/intelligentReplenishment/list`, query: { closeLastOldTab: true } })
  100. },
  101. // 返回基础设置页
  102. handleBackSet () {
  103. this.$router.push({ path: `/inventoryManagement/intelligentReplenishment/set` })
  104. },
  105. // 确认导入
  106. handleSubmit () {
  107. const _this = this
  108. _this.spinning = true
  109. predictProductInfoInsert(this.listData).then(res => {
  110. _this.spinning = false
  111. if (res.status == 200) {
  112. _this.$success({
  113. content: '数据导入成功!',
  114. centered: true,
  115. onOk () {
  116. _this.handleBack()
  117. }
  118. })
  119. } else {
  120. _this.$error({
  121. content: '数据导入失败,请重试!',
  122. centered: true,
  123. onOk () {}
  124. })
  125. }
  126. })
  127. }
  128. },
  129. mounted () {
  130. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  131. this.$refs.table.refresh(true)
  132. }
  133. },
  134. activated () {
  135. // 如果是新页签打开或者进入新的子页(例:存在列表第2条数据编辑页页签时再打开第4条数据的编辑页),则重置当前页面
  136. if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
  137. this.$refs.table.refresh(true)
  138. }
  139. }
  140. }
  141. </script>
  142. <style lang="less">
  143. .intelligentReplenishmentImport-wrap{
  144. .intelligentReplenishmentImport-back{
  145. margin-bottom: 10px;
  146. }
  147. .intelligentReplenishmentImport-cont{
  148. .total{
  149. margin: 20px 0 30px;
  150. span{
  151. font-weight: bold;
  152. }
  153. }
  154. .btn-cont{
  155. margin: 30px 0 20px;
  156. text-align: center;
  157. .button-cancel{
  158. font-size: 12px;
  159. margin-left: 15px;
  160. }
  161. }
  162. }
  163. .redBg-row{
  164. background-color: #f5cdc8;
  165. }
  166. }
  167. </style>