set.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. <template>
  2. <div class="intelligentReplenishmentSet-wrap">
  3. <a-page-header :ghost="false" :backIcon="false" class="intelligentReplenishmentSet-back">
  4. <!-- 自定义的二级文字标题 -->
  5. <template slot="subTitle">
  6. <a id="intelligentReplenishmentSet-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
  7. </template>
  8. </a-page-header>
  9. <a-card size="small" :bordered="false" class="intelligentReplenishmentSet-cont">
  10. <div class="importGuide-con">
  11. <div class="explain-con">
  12. <div class="explain-item">
  13. <div class="explain-tit">
  14. <span>1</span>准备导入
  15. </div>
  16. <p>所有允许导入的数据字段请参考模板,数据字段不符合规则,整条不予以导入。</p>
  17. <ul>
  18. <li>1) “产品编码”字段为必填项。</li>
  19. <li>2) “起订量限制“为选项,只可选择”按整箱‘或者“按设置数量”,选择“按设置数量”时,“起订数量”为必填项。</li>
  20. </ul>
  21. <a :href="filePath" style="padding: 5px 0 0 23px;display: block;">
  22. <a-icon type="download" style="padding-right: 5px;" />下载导入模板
  23. </a>
  24. </div>
  25. <div class="explain-item">
  26. <div class="explain-tit">
  27. <span>2</span>上传数据文件
  28. </div>
  29. <p>目前支持的文件类型*.xls,*.xlsx.</p>
  30. <p>
  31. <Upload
  32. id="importGuide-attachList"
  33. ref="importUpload"
  34. :maxNums="1"
  35. fileType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
  36. uploadType="import"
  37. :action="attachAction"
  38. :uploadParams="uploadParams"
  39. upText="添加文件"
  40. @change="changeImport"></Upload>
  41. </p>
  42. </div>
  43. </div>
  44. <!-- 按钮 -->
  45. <div class="btn-con">
  46. <a-button
  47. type="primary"
  48. id="importGuide-nextStep"
  49. size="large"
  50. class="button-primary"
  51. @click="handlerNextStep"
  52. style="padding: 0 60px;">下一步</a-button>
  53. <a-button
  54. id="importGuide-cancel"
  55. size="large"
  56. class="button-cancel"
  57. @click="isShow=false"
  58. style="padding: 0 60px;margin-left: 15px;">取消</a-button>
  59. </div>
  60. </div>
  61. </a-card>
  62. <!-- 导入 -->
  63. <!-- <chooseImportModal :openModal="openImportModal" :paramsData="paramsData" @close="handleClose" @ok="hanldeOk" /> -->
  64. </div>
  65. </template>
  66. <script>
  67. import { Upload } from '@/components'
  68. export default {
  69. components: { Upload },
  70. data () {
  71. return {
  72. filePath: 'http://jg-ocs.oss-cn-beijing.aliyuncs.com/templ/promo/normal_product_templ.xlsx',
  73. openImportModal: false, // 导入
  74. attachAction: process.env.VUE_APP_API_BASE_URL + '/upload',
  75. paramsData: null,
  76. uploadParams: {
  77. savePathType: 'local'
  78. }
  79. }
  80. },
  81. methods: {
  82. // 返回
  83. handleBack () {
  84. this.$router.push({ path: `/inventoryManagement/intelligentReplenishment/list` })
  85. },
  86. // 下一步
  87. handlerNextStep () {
  88. if (this.paramsData) {
  89. this.openImportModal = true
  90. } else {
  91. this.$message.warning('添加文件后再进行下一步操作!')
  92. }
  93. },
  94. // 上传文件 change
  95. changeImport (file) {
  96. if (file) {
  97. this.paramsData = {
  98. promoRuleType: this.params.promoRuleType || '',
  99. promoGoodsType: this.params.promoGoodsType || '',
  100. path: file
  101. }
  102. }
  103. },
  104. // 导入
  105. hanldeOk (obj) {
  106. if (obj && obj.length > 0) {
  107. this.$emit('ok', obj)
  108. this.isShow = false
  109. }
  110. },
  111. // 关闭
  112. handleClose () {
  113. this.openImportModal = false
  114. this.isShow = false
  115. }
  116. }
  117. }
  118. </script>
  119. <style lang="less">
  120. .importGuide-warp{
  121. .importGuide-con{
  122. .explain-con{
  123. .explain-item{
  124. margin-bottom: 10px;
  125. .explain-tit{
  126. font-weight: bold;
  127. span{
  128. display: inline-block;
  129. width: 18px;
  130. height: 18px;
  131. line-height: 16px;
  132. text-align: center;
  133. margin-right: 5px;
  134. border-radius: 50%;
  135. border: 1px solid rgba(0, 0, 0, 0.3);
  136. }
  137. }
  138. p{
  139. margin: 8px 0;
  140. padding-left: 23px;
  141. }
  142. ul{
  143. list-style: none;
  144. padding: 0;
  145. padding-left: 23px;
  146. margin: 0;
  147. li{
  148. line-height: 26px;
  149. }
  150. }
  151. }
  152. }
  153. .btn-con{
  154. margin: 60px 0 20px;
  155. .button-cancel{
  156. font-size: 12px;
  157. }
  158. }
  159. }
  160. }
  161. </style>