editModal.vue 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. <template>
  2. <a-modal
  3. centered
  4. class="productPricingEdit-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="编辑价格"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="800">
  11. <!-- 编辑价格 -->
  12. <div>
  13. <a-spin :spinning="spinning" tip="Loading...">
  14. <a-form-model
  15. id="productPricingEdit-form"
  16. ref="ruleForm"
  17. :model="form"
  18. :rules="rules"
  19. :label-col="formItemLayout.labelCol"
  20. :wrapper-col="formItemLayout.wrapperCol"
  21. >
  22. <a-form-model-item label="成本价">
  23. <div v-if="detailData && detailData.supplierProductList" style="margin-top: 8px;">
  24. <p v-for="(item, index) in detailData.supplierProductList" :key="index" style="margin: 0;line-height: 1.5em;">{{ ((item.cost || item.cost==0) ? item.cost.toFixed(2) : '--') + ' 元 -- ' + (item.supplierName||'') + ';' }}</p>
  25. </div>
  26. <span v-else>--</span>
  27. </a-form-model-item>
  28. <a-form-model-item label="省级价" prop="afterProvincePrice">
  29. <a-input-number
  30. id="productPricingEdit-afterProvincePrice"
  31. v-model="form.afterProvincePrice"
  32. :precision="2"
  33. :min="0.01"
  34. :max="99999999"
  35. placeholder="请输入省级价"
  36. ref="afterProvincePrice"
  37. @keydown.enter.native="nextFocus('afterProvincePrice', 'afterCityPrice', $event)"
  38. style="width: 100%;" />
  39. </a-form-model-item>
  40. <a-form-model-item label="市级价" prop="afterCityPrice">
  41. <a-input-number
  42. id="productPricingEdit-afterCityPrice"
  43. v-model="form.afterCityPrice"
  44. :precision="2"
  45. :min="0.01"
  46. :max="99999999"
  47. placeholder="请输入市级价"
  48. ref="afterCityPrice"
  49. @keydown.enter.native="nextFocus('afterCityPrice', 'afterSpecialPrice', $event)"
  50. style="width: 100%;" />
  51. </a-form-model-item>
  52. <a-form-model-item label="特约价" prop="afterSpecialPrice">
  53. <a-input-number
  54. id="productPricingEdit-afterSpecialPrice"
  55. v-model="form.afterSpecialPrice"
  56. :precision="2"
  57. :min="0.01"
  58. :max="99999999"
  59. placeholder="请输入特约价"
  60. ref="afterSpecialPrice"
  61. @keydown.enter.native="nextFocus('afterSpecialPrice', 'afterTerminalPrice', $event)"
  62. style="width: 100%;" />
  63. </a-form-model-item>
  64. <a-form-model-item label="终端价" prop="afterTerminalPrice">
  65. <a-input-number
  66. id="productPricingEdit-afterTerminalPrice"
  67. v-model="form.afterTerminalPrice"
  68. :precision="2"
  69. :min="0.01"
  70. :max="99999999"
  71. placeholder="请输入终端价"
  72. ref="afterTerminalPrice"
  73. @keydown.enter.native="nextFocus('afterTerminalPrice', 'afterCarOwnersPrice', $event)"
  74. style="width: 100%;" />
  75. </a-form-model-item>
  76. <a-form-model-item label="车主价" prop="afterCarOwnersPrice">
  77. <a-input-number
  78. id="productPricingEdit-afterCarOwnersPrice"
  79. v-model="form.afterCarOwnersPrice"
  80. :precision="2"
  81. :min="0.01"
  82. :max="99999999"
  83. placeholder="请输入车主价"
  84. ref="afterCarOwnersPrice"
  85. @keydown.enter.native="nextFocus('afterCarOwnersPrice', 'changeReason', $event, 'vSelect')"
  86. style="width: 100%;" />
  87. </a-form-model-item>
  88. <a-form-model-item label="变更原因" prop="changeReason">
  89. <v-select
  90. code="PRODUCT_PRICE_CHANGE_REASON"
  91. id="productPricingEdit-changeReason"
  92. v-model="form.changeReason"
  93. allowClear
  94. placeholder="请选择变更原因"
  95. ref="changeReason"
  96. @keydown.enter.native="nextFocus('changeReason', '', $event)"
  97. ></v-select>
  98. </a-form-model-item>
  99. </a-form-model>
  100. <div class="btn-cont">
  101. <a-button id="productPricingEdit-cancel" @click="isShow = false" style="margin-right: 15px;">取消</a-button>
  102. <a-button type="primary" id="productPricingEdit-save" @click="handleSave">保存</a-button>
  103. </div>
  104. </a-spin>
  105. </div>
  106. </a-modal>
  107. </template>
  108. <script>
  109. import { VSelect } from '@/components'
  110. // 接口
  111. import { productPricingSnDetail, productPricingSave } from '@/api/product'
  112. export default {
  113. name: 'ProductPricingEditModal',
  114. components: { VSelect },
  115. props: {
  116. openModal: { // 弹框显示状态
  117. type: Boolean,
  118. default: false
  119. },
  120. itemSn: {// 定价产品sn
  121. type: [Number, String],
  122. default: ''
  123. }
  124. },
  125. data () {
  126. return {
  127. spinning: false,
  128. isShow: this.openModal, // 是否打开弹框
  129. formItemLayout: {// 表单布局设置
  130. labelCol: { span: 4 },
  131. wrapperCol: { span: 17 }
  132. },
  133. form: {
  134. afterProvincePrice: '', // 省级价
  135. afterCityPrice: '', // 市级价
  136. afterSpecialPrice: '', // 特约价
  137. afterTerminalPrice: '', // 终端价
  138. afterCarOwnersPrice: '', // 车主价
  139. changeReason: undefined// 变更原因
  140. },
  141. rules: {
  142. changeReason: [
  143. { required: true, message: '请选择变更原因', trigger: 'change' }
  144. ],
  145. afterProvincePrice: [
  146. { required: true, message: '请输入省级价', trigger: 'blur' }
  147. ],
  148. afterCityPrice: [
  149. { required: true, message: '请输入市级价', trigger: 'blur' }
  150. ],
  151. afterSpecialPrice: [
  152. { required: true, message: '请输入特约价', trigger: 'blur' }
  153. ],
  154. afterTerminalPrice: [
  155. { required: true, message: '请输入终端价', trigger: 'blur' }
  156. ],
  157. afterCarOwnersPrice: [
  158. { required: true, message: '请输入车主价', trigger: 'blur' }
  159. ]
  160. },
  161. detailData: null // 数据详情
  162. }
  163. },
  164. methods: {
  165. // 获取详情
  166. getDetail () {
  167. productPricingSnDetail({ sn: this.itemSn }).then(res => {
  168. if (res.status == 200) {
  169. this.detailData = res.data
  170. this.form.afterProvincePrice = res.data.afterProvincePrice || ''
  171. this.form.afterCityPrice = res.data.afterCityPrice || ''
  172. this.form.afterSpecialPrice = res.data.afterSpecialPrice || ''
  173. this.form.afterTerminalPrice = res.data.afterTerminalPrice || ''
  174. this.form.afterCarOwnersPrice = res.data.afterCarOwnersPrice || ''
  175. this.form.changeReason = res.data.id && res.data.changeReason ? '价格修改' : '首次定价'
  176. } else {
  177. this.detailData = null
  178. this.$refs.ruleForm.resetFields()
  179. }
  180. })
  181. },
  182. // 保存 定价规则==>省级价<市级价<特约价<终端价<车主价
  183. handleSave () {
  184. const _this = this
  185. this.$refs.ruleForm.validate(valid => {
  186. if (valid) {
  187. const newFormData = _this.form
  188. if (newFormData.afterCityPrice * 1 < newFormData.afterProvincePrice * 1 || newFormData.afterCityPrice * 1 > newFormData.afterSpecialPrice * 1) {
  189. _this.$message.error({ content: '价格设置规则:省级价≤市级价≤特约价', duration: 5 })
  190. return
  191. }
  192. const form = JSON.parse(JSON.stringify(_this.form))
  193. form.id = this.detailData.id || undefined
  194. form.productSn = _this.itemSn
  195. _this.spinning = true
  196. productPricingSave(form).then(res => {
  197. if (res.status == 200) {
  198. _this.$message.success(res.message)
  199. setTimeout(() => {
  200. _this.$emit('ok')
  201. _this.isShow = false
  202. _this.spinning = false
  203. }, 1000)
  204. } else {
  205. _this.spinning = false
  206. }
  207. })
  208. } else {
  209. console.log('error submit!!')
  210. return false
  211. }
  212. })
  213. },
  214. // 回车键快捷定位表单下一项
  215. nextFocus (nowRef, nextRef, event, isComponent) {
  216. const _this = this
  217. if (_this.$refs[nowRef]) {
  218. _this.$nextTick(() => {
  219. if (_this.$refs[nextRef]) {
  220. event.target.blur()
  221. if (isComponent == 'vSelect') {
  222. _this.$refs[nextRef].$children[0].focus()
  223. } else {
  224. _this.$refs[nextRef].focus()
  225. }
  226. }
  227. })
  228. }
  229. }
  230. },
  231. watch: {
  232. // 父页面传过来的弹框状态
  233. openModal (newValue, oldValue) {
  234. this.isShow = newValue
  235. },
  236. // 重定义的弹框状态
  237. isShow (newValue, oldValue) {
  238. if (!newValue) {
  239. this.$emit('close')
  240. this.costPrice = ''
  241. this.$refs.ruleForm.resetFields()
  242. } else {
  243. // 默认首项获取焦点
  244. const _this = this
  245. setTimeout(() => {
  246. if (_this.$refs['afterProvincePrice']) {
  247. _this.$refs['afterProvincePrice'].focus()
  248. }
  249. }, 300)
  250. }
  251. },
  252. itemSn (newValue, oldValue) {
  253. if (this.isShow && newValue) {
  254. this.getDetail()
  255. }
  256. }
  257. }
  258. }
  259. </script>
  260. <style lang="less">
  261. .productPricingEdit-modal{
  262. .ant-modal-body {
  263. padding: 40px 40px 24px;
  264. }
  265. .btn-cont {
  266. text-align: center;
  267. margin: 35px 0 30px;
  268. }
  269. }
  270. </style>