edit.vue 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. <template>
  2. <div class="intelligentReplenishmentEdit-wrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <a-page-header :ghost="false" :backIcon="false" class="intelligentReplenishmentEdit-back">
  5. <!-- 自定义的二级文字标题 -->
  6. <template slot="subTitle">
  7. <a id="intelligentReplenishmentEdit-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
  8. </template>
  9. </a-page-header>
  10. <a-card size="small" :bordered="false" class="intelligentReplenishmentEdit-cont">
  11. <div class="steps-cont">
  12. <a-steps :current="current" size="small">
  13. <a-step title="产品设置" />
  14. <a-step title="参数设置" />
  15. <a-step title="系统计算" />
  16. </a-steps>
  17. </div>
  18. <a-form-model
  19. id="intelligentReplenishmentEdit-form"
  20. ref="ruleForm"
  21. :model="form"
  22. :rules="rules"
  23. :label-col="formItemLayout.labelCol"
  24. :wrapper-col="formItemLayout.wrapperCol"
  25. >
  26. <!-- 产品设置 -->
  27. <div v-if="current==0">
  28. <div class="module-cont">
  29. <p class="title">产品范围</p>
  30. <a-form-model-item label=" " :colon="false" prop="stockPredictRange" class="form-item">
  31. <a-radio-group name="radioGroup" v-model="form.stockPredictRange" placeholder="请选择">
  32. <a-radio :value="1">全部产品</a-radio>
  33. <a-radio :value="0">自选产品</a-radio>
  34. </a-radio-group>
  35. </a-form-model-item>
  36. <productRange v-if="form.stockPredictRange==0" ref="productRange" :itemSn="$route.params.sn" @ok="handleProductOk" />
  37. </div>
  38. </div>
  39. <!-- 参数设置 -->
  40. <div v-if="current==1">
  41. <div class="module-cont">
  42. <p class="title">销售保障法<a-button type="link" size="small" class="link-btn" @click="handleExplain('xsbz')">算法说明</a-button></p>
  43. <a-form-model-item label="保障倍数" prop="saleEnsureNum" class="form-item">
  44. <a-input-number
  45. id="intelligentReplenishmentEdit-saleEnsureNum"
  46. v-model="form.saleEnsureNum"
  47. :precision="2"
  48. :min="1"
  49. :max="3"
  50. placeholder="请输入1~3之间的数字,最多两位小数"
  51. style="width: 100%;" />
  52. </a-form-model-item>
  53. </div>
  54. <div class="module-cont">
  55. <p class="title">趋势平均法<a-button type="link" size="small" class="link-btn" @click="handleExplain('qspj')">算法说明</a-button></p>
  56. <a-form-model-item label="服务水平" prop="trendSn" class="form-item">
  57. <div class="intelligentReplenishmentEdit-trendSn" @click="openModal=true">{{ form.serviceLevel || '--' }}%(对应的安全系数为{{ form.safetyFactor || '--' }})</div>
  58. </a-form-model-item>
  59. </div>
  60. </div>
  61. <!-- 系统计算 -->
  62. <div v-if="current==2">
  63. <div class="item-cont">
  64. <img src="@/assets/explain/def_calculation.png" width="200" class="item-pic" />
  65. <p class="item-txt">按照上一步的参数设置,系统正在<br/>计算中...点击左上角的返回列表可查看该条预测记录</p>
  66. </div>
  67. </div>
  68. </a-form-model>
  69. <div class="btn-cont" v-if="current==0 || current==1">
  70. <a-button
  71. type="primary"
  72. id="intelligentReplenishmentLevel-submit"
  73. size="large"
  74. class="button-primary"
  75. @click="handleNext"
  76. style="padding: 0 60px;">下一步</a-button>
  77. </div>
  78. </a-card>
  79. </a-spin>
  80. <!-- 服务水平 -->
  81. <replenishment-service-level-modal :openModal="openModal" :itemSn="form.trendSn" @close="openModal=false" @ok="handleOk" />
  82. </div>
  83. </template>
  84. <script>
  85. import ReplenishmentServiceLevelModal from './serviceLevelModal.vue'
  86. import productRange from './productRange.vue'
  87. import { predictDetail, predictRangeSave, predictSave, predictTrendList, predictRun } from '@/api/predict'
  88. export default {
  89. components: { ReplenishmentServiceLevelModal, productRange },
  90. data () {
  91. return {
  92. spinning: false,
  93. formItemLayout: {
  94. labelCol: { span: 2 },
  95. wrapperCol: { span: 16 }
  96. },
  97. form: {
  98. stockPredictRange: 1,
  99. saleEnsureNum: '',
  100. trendSn: '',
  101. serviceLevel: '',
  102. safetyFactor: ''
  103. },
  104. rules: {
  105. saleEnsureNum: [ { required: true, message: '请输入保障倍数', trigger: 'blur' } ],
  106. trendSn: [ { required: true, message: '请选择服务水平', trigger: ['blur', 'change'] } ]
  107. },
  108. openModal: false,
  109. current: 0,
  110. detailData: null
  111. }
  112. },
  113. methods: {
  114. // 返回
  115. handleBack () {
  116. this.$router.push({ path: `/inventoryManagement/intelligentReplenishment/list` })
  117. },
  118. // 详情
  119. getDetail () {
  120. predictDetail({ sn: this.$route.params.sn }).then(res => {
  121. if (res.status == 200) {
  122. this.detailData = res.data
  123. if (res.data.state == 'RUN') {
  124. this.current = 2
  125. } else {
  126. this.current = 0
  127. }
  128. } else {
  129. this.detailData = null
  130. }
  131. })
  132. },
  133. // 产品范围 ok
  134. handleProductOk (params) {
  135. predictRangeSave(params).then(res => {
  136. if (res.status == 200) {
  137. this.$refs.productRange.refreshList()
  138. }
  139. })
  140. },
  141. // 下一步
  142. handleNext () {
  143. const _this = this
  144. if (this.current == 0) { // 产品设置
  145. const params = {
  146. id: this.detailData.id,
  147. stockPredictSn: this.$route.params.sn,
  148. stockPredictRange: this.form.stockPredictRange
  149. }
  150. this.handleSave(params)
  151. } else if (this.current == 1) { // 参数设置
  152. this.$refs.ruleForm.validate(valid => {
  153. if (valid) {
  154. const params = {
  155. id: this.detailData.id,
  156. stockPredictSn: _this.$route.params.sn,
  157. saleEnsureNum: _this.form.saleEnsureNum,
  158. trendSn: _this.form.trendSn,
  159. trendServiceLevel: _this.form.serviceLevel,
  160. trendSafetyFactor: _this.form.safetyFactor,
  161. stockPredictRange: this.form.stockPredictRange
  162. }
  163. _this.handleRun(params)
  164. } else {
  165. return false
  166. }
  167. })
  168. }
  169. },
  170. // 保存
  171. handleSave (params) {
  172. this.spinning = true
  173. predictSave(params).then(res => {
  174. if (res.status == 200) {
  175. this.current++
  176. this.spinning = false
  177. } else {
  178. this.spinning = false
  179. }
  180. })
  181. },
  182. // 计算
  183. handleRun (params) {
  184. this.spinning = true
  185. predictRun(params).then(res => {
  186. if (res.status == 200) {
  187. this.current++
  188. this.spinning = false
  189. } else {
  190. this.spinning = false
  191. }
  192. })
  193. },
  194. // 算法说明
  195. handleExplain (type) {
  196. if (type == 'xsbz') {
  197. this.$router.push({ path: `/inventoryManagement/intelligentReplenishment/explainXsbz` })
  198. } else if (type == 'qspj') {
  199. this.$router.push({ path: `/inventoryManagement/intelligentReplenishment/explainQspj` })
  200. }
  201. },
  202. // 服务水平选择
  203. handleOk (val) {
  204. this.form.trendSn = val.trendSn
  205. this.form.serviceLevel = val.serviceLevel
  206. this.form.safetyFactor = val.safetyFactor
  207. this.openModal = false
  208. },
  209. // 获取默认服务水平
  210. getTrendSn () {
  211. predictTrendList({ defaultFlag: 1 }).then(res => {
  212. if (res.status == 200) {
  213. this.form.trendSn = res.data[0].trendSn
  214. this.form.serviceLevel = res.data[0].serviceLevel
  215. this.form.safetyFactor = res.data[0].safetyFactor
  216. } else {
  217. this.form.trendSn = ''
  218. this.form.serviceLevel = ''
  219. this.form.safetyFactor = ''
  220. }
  221. })
  222. }
  223. },
  224. beforeRouteEnter (to, from, next) {
  225. next(vm => {
  226. vm.getDetail()
  227. vm.getTrendSn()
  228. vm.current = 0
  229. })
  230. }
  231. }
  232. </script>
  233. <style lang="less">
  234. .intelligentReplenishmentEdit-wrap{
  235. .intelligentReplenishmentEdit-back{
  236. margin-bottom: 10px;
  237. }
  238. .intelligentReplenishmentEdit-cont{
  239. .steps-cont{
  240. width: 50%;
  241. margin: 30px auto 10px;
  242. }
  243. .module-cont{
  244. border: 1px dashed #e8e8e8;
  245. border-radius: 12px;
  246. position: relative;
  247. margin: 30px 0;
  248. padding: 20px 15px 15px;
  249. .title{
  250. position: absolute;
  251. left: 50px;
  252. top: -12px;
  253. padding: 0 10px;
  254. font-size: 15px;
  255. background-color: #fff;
  256. .link-btn{
  257. font-size: 12px;
  258. }
  259. }
  260. .form-item{
  261. margin-top: 25px;
  262. }
  263. .intelligentReplenishmentEdit-trendSn{
  264. border: 1px solid #d9d9d9;
  265. border-radius: 4px;
  266. line-height: 1.5;
  267. padding: 4px 11px;
  268. margin-top: 4px;
  269. }
  270. }
  271. .item-cont{
  272. text-align: center;
  273. padding: 130px 0 100px;
  274. .item-txt{
  275. margin: 20px 0 50px;
  276. font-size: 12px;
  277. line-height: 24px;
  278. }
  279. }
  280. .btn-cont{
  281. margin: 30px 0 20px;
  282. text-align: center;
  283. }
  284. }
  285. }
  286. </style>