priceDiffModal.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467
  1. <template>
  2. <a-modal
  3. v-drag
  4. centered
  5. class="priceDifference-modal"
  6. :footer="null"
  7. :maskClosable="false"
  8. :title="title"
  9. v-model="isShow"
  10. @cancel="isShow=false"
  11. :width="960">
  12. <a-spin :spinning="spinning" tip="Loading...">
  13. <div style="min-height:100px;">
  14. <a-form-model
  15. id="dealerAccountEdit-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. {{ detailData&&detailData.dealerName }}
  24. </a-form-model-item>
  25. <a-form-model-item label="上级经销商" required>
  26. <a-row :gutter="10">
  27. <a-col :span="17">
  28. <custList
  29. v-if="!form.dealerUpsSn || isSpecial"
  30. ref="custList"
  31. :notDealerSn="notDealer"
  32. :notDealerType="['SPECIAL']"
  33. @change="custSupChange"
  34. placeholder="请输入经销商名称搜索"></custList>
  35. <a-input v-else :value="superDealerName" disabled />
  36. </a-col>
  37. <a-col :span="4" v-if="!isSpecial">
  38. <a-input-number
  39. :precision="2"
  40. :min="0"
  41. :max="100"
  42. v-model="parentAllotRate"
  43. @change="rateSupChange"
  44. placeholder="请输入比例"/> %
  45. </a-col>
  46. <a-col :span="2" v-if="!isSpecial && zdDealearList.length<3">
  47. <a-button
  48. type="primary"
  49. ghost
  50. @click="addItem()"
  51. >添加指定</a-button>
  52. </a-col>
  53. </a-row>
  54. </a-form-model-item>
  55. <a-form-model-item label="指定经销商" v-if="zdDealearList.length">
  56. <a-row :gutter="10" v-for="(item,index) in zdDealearList" :key="item.id">
  57. <a-col :span="17">
  58. <custList :ref="'custList-'+item.id" :notDealerSn="notZdDealer" @change="(v,r)=>custChange(v,r,index)" placeholder="请输入经销商名称搜索"></custList>
  59. </a-col>
  60. <a-col :span="4">
  61. <a-input-number
  62. :precision="2"
  63. :min="0"
  64. :max="100"
  65. v-model="item.allotRate"
  66. @change="(v)=>rateChange(v,index)"
  67. placeholder="请输入比例"/> %
  68. </a-col>
  69. <a-col :span="2">
  70. <!-- <a-button
  71. style="margin-right:5px;"
  72. v-if="index==zdDealearList.length-1 && zdDealearList.length<3"
  73. @click="addItem(item,index)"
  74. title="添加"
  75. size="small"
  76. shape="circle"
  77. icon="plus" /> -->
  78. <a-button
  79. @click="delItem(item,index)"
  80. type="primary"
  81. title="删除"
  82. size="small"
  83. shape="circle"
  84. ghost
  85. icon="minus"/>
  86. </a-col>
  87. </a-row>
  88. </a-form-model-item>
  89. <a-form-model-item label="箭冠总公司" v-if="!isSpecial">
  90. <a-row :gutter="10">
  91. <a-col :span="17">
  92. <a-input value="箭冠总公司" disabled />
  93. </a-col>
  94. <a-col :span="4">
  95. <a-input-number
  96. :precision="2"
  97. :min="0"
  98. :max="100"
  99. v-model="hAllotRate"
  100. @change="rateHChange"
  101. placeholder="请输入比例"/> %
  102. </a-col>
  103. </a-row>
  104. </a-form-model-item>
  105. </a-form-model>
  106. </div>
  107. <div style="padding:10px 10px 10px 40px;">
  108. <categoryTree v-if="showTable&&!isSpecial&&!form.dealerUpsSn" ref="categoryTree"></categoryTree>
  109. </div>
  110. <div class="btn-cont">
  111. <a-button @click="isShow = false" style="font-size: 12px;">取消</a-button>
  112. <a-button
  113. type="primary"
  114. style="margin-left: 20px;"
  115. @click="handleSave"
  116. >确定</a-button>
  117. </div>
  118. </a-spin>
  119. </a-modal>
  120. </template>
  121. <script>
  122. import { commonMixin } from '@/utils/mixin'
  123. import custList from '@/views/common/custList.vue'
  124. import { VSelect } from '@/components'
  125. import { dealerUpsCreate, dealerUpsUpdate } from '@/api/dealer'
  126. import categoryTree from './categoryTree'
  127. export default {
  128. name: 'PriceDiffModal',
  129. mixins: [commonMixin],
  130. components: { VSelect, custList, categoryTree },
  131. props: {
  132. openModal: { // 弹框显示状态
  133. type: Boolean,
  134. default: false
  135. }
  136. },
  137. data () {
  138. return {
  139. spinning: false,
  140. isShow: this.openModal, // 是否打开弹框
  141. title: '差价设置',
  142. formItemLayout: {
  143. labelCol: { span: 3 },
  144. wrapperCol: { span: 20 }
  145. },
  146. form: {
  147. dealerSn: undefined,
  148. dealerUpsSn: undefined,
  149. rebateParentType: [], // 差价归属
  150. rebateDealerList: [], // 经销商列表
  151. rebateScopeList: [] // 品类列表
  152. },
  153. parentAllotRate: '', // 上级经销商分配比例
  154. hAllotRate: '', // 总部分配比例
  155. rules: {
  156. rebateParentType: [{ required: true, message: '请选择差价归属方', trigger: 'change' }]
  157. },
  158. cjgsfList: [],
  159. zdDealearList: [],
  160. detailData: null,
  161. superDealerName: '',
  162. checkedDealerSn: [],
  163. showTable: false
  164. }
  165. },
  166. computed: {
  167. isSpecial () {
  168. return this.detailData && this.detailData.dealerLevel == 'SPECIAL'
  169. },
  170. notDealer () {
  171. return this.form.rebateDealerList.concat(this.zdDealearList).concat([{ 'parentDealerSn': this.form.dealerSn }])
  172. },
  173. notZdDealer () {
  174. return this.form.rebateDealerList.concat(this.zdDealearList)
  175. }
  176. },
  177. methods: {
  178. // 新增
  179. setData (list, dealerSn, detail, checkedDealerSn) {
  180. this.detailData = detail
  181. this.form.dealerSn = dealerSn
  182. this.cjgsfList = list
  183. this.checkedDealerSn = checkedDealerSn
  184. // 如果当前经销商是特约经销商
  185. if (this.detailData.dealerLevel == 'SPECIAL') {
  186. // 默认只有上级经销商
  187. this.cjgsgChange(['SUPERIORS'])
  188. } else {
  189. this.cjgsgChange(['SUPERIORS', 'HEAD'])
  190. }
  191. },
  192. // 编辑
  193. editData (list, dealerSn, detail, row) {
  194. this.detailData = detail
  195. this.form.dealerSn = dealerSn
  196. this.form.dealerUpsSn = row.dealerUpsSn
  197. this.cjgsfList = list
  198. // 如果当前经销商是特约经销商
  199. if (this.detailData.dealerLevel == 'SPECIAL') {
  200. // 默认只有上级经销商
  201. this.form.rebateParentType = ['SUPERIORS']
  202. } else {
  203. this.form.rebateParentType = ['SUPERIORS', 'HEAD']
  204. }
  205. console.log(row)
  206. if (row) {
  207. row.rebateDealerList.map(item => {
  208. const row = {
  209. 'id': item.id,
  210. 'dealerSn': item.dealerSn,
  211. 'parentDealerSn': item.parentDealerSn,
  212. 'rebateParentType': item.rebateParentType,
  213. 'dealerRelationSn': item.dealerRelationSn,
  214. 'allotRate': Number(item.allotRate * 100).toFixed(2)
  215. }
  216. // 指定
  217. if (item.rebateParentType == 'ASSIGN') {
  218. this.zdDealearList.push(row)
  219. this.$nextTick(() => {
  220. this.$refs['custList-' + item.id][0].setDufaultVal(item.parentDealer.dealerName)
  221. })
  222. } else {
  223. // 上级和总部
  224. if (item.rebateParentType == 'SUPERIORS') {
  225. this.form.rebateDealerList[0] = row
  226. this.parentAllotRate = Number(item.allotRate * 100).toFixed(2)
  227. // 特约可编辑上级
  228. if (this.detailData.dealerLevel == 'SPECIAL') {
  229. this.$nextTick(() => {
  230. this.$refs.custList.setDufaultVal(item.parentDealer.dealerName)
  231. })
  232. } else {
  233. // 其它不可编辑
  234. this.superDealerName = item.parentDealer.dealerName
  235. }
  236. } else {
  237. this.form.rebateDealerList[1] = row
  238. this.hAllotRate = Number(item.allotRate * 100).toFixed(2)
  239. }
  240. }
  241. })
  242. }
  243. },
  244. // 上级经销商修改
  245. custSupChange (val, row) {
  246. console.log(val, row)
  247. this.form.rebateDealerList[0]['parentDealerSn'] = val.key
  248. this.showTable = !!val.key
  249. if (!this.isSpecial) {
  250. this.$nextTick(() => {
  251. this.getCategoryList()
  252. })
  253. }
  254. },
  255. rateSupChange (val) {
  256. this.form.rebateDealerList[0]['allotRate'] = val
  257. },
  258. // 刷新品类列表
  259. getCategoryList () {
  260. const parentDealerSn = this.form.rebateDealerList[0]['parentDealerSn']
  261. if (parentDealerSn) {
  262. // 查询品类树
  263. this.$refs.categoryTree.pageInit(this.detailData, parentDealerSn, this.form.dealerSn)
  264. }
  265. },
  266. rateHChange (val) {
  267. this.form.rebateDealerList[1]['allotRate'] = val
  268. },
  269. // 指定经销商变更
  270. custChange (val, row, index) {
  271. console.log(val, index)
  272. this.zdDealearList[index]['parentDealerSn'] = val.key
  273. },
  274. rateChange (val, index) {
  275. console.log(val, index)
  276. this.zdDealearList[index]['allotRate'] = val
  277. },
  278. // 差价归属变更
  279. cjgsgChange (val) {
  280. console.log(val)
  281. this.form.rebateParentType = val
  282. // 指定经销商
  283. if (val.indexOf('ASSIGN') >= 0) {
  284. if (this.zdDealearList.length == 0) {
  285. this.addItem()
  286. }
  287. } else {
  288. this.zdDealearList = []
  289. }
  290. // 上级经销商
  291. if (val.indexOf('SUPERIORS') >= 0) {
  292. if (!this.form.rebateDealerList[0]) {
  293. this.form.rebateDealerList[0] = {
  294. 'id': new Date().getTime(),
  295. 'dealerSn': this.form.dealerSn,
  296. 'parentDealerSn': undefined,
  297. 'rebateParentType': 'SUPERIORS',
  298. 'allotRate': 100
  299. }
  300. this.parentAllotRate = 100
  301. }
  302. } else {
  303. this.form.rebateDealerList[0] = null
  304. this.parentAllotRate = ''
  305. }
  306. // 总部经销商
  307. if (val.indexOf('HEAD') >= 0) {
  308. if (!this.form.rebateDealerList[1]) {
  309. this.form.rebateDealerList[1] = {
  310. 'id': new Date().getTime() - 100,
  311. 'dealerSn': this.form.dealerSn,
  312. 'parentDealerSn': 1,
  313. 'rebateParentType': 'HEAD',
  314. 'allotRate': 0
  315. }
  316. this.hAllotRate = 0
  317. }
  318. } else {
  319. this.form.rebateDealerList[1] = null
  320. this.hAllotRate = ''
  321. }
  322. },
  323. // 增加指定经销商
  324. addItem (row, index) {
  325. const sn = new Date().getTime()
  326. this.zdDealearList.push({
  327. 'id': sn,
  328. 'dealerSn': this.form.dealerSn,
  329. 'parentDealerSn': undefined,
  330. 'rebateParentType': 'ASSIGN',
  331. 'allotRate': ''
  332. })
  333. },
  334. // 删除指定经销商
  335. delItem (row, index) {
  336. const i = this.zdDealearList.findIndex(item => item.id == row.id)
  337. if (i >= 0) {
  338. this.zdDealearList.splice(i, 1)
  339. }
  340. },
  341. // 重置表单
  342. resetForm () {
  343. if (this.isSpecial || !this.form.dealerUpsSn) {
  344. this.$refs.custList.resetForm()
  345. }
  346. this.form.dealerSn = undefined
  347. this.form.dealerUpsSn = undefined
  348. this.form.rebateParentType = []
  349. this.form.rebateDealerList = []
  350. this.form.rebateScopeList = []
  351. this.zdDealearList = []
  352. this.hAllotRate = ''
  353. this.parentAllotRate = 100
  354. this.showTable = false
  355. },
  356. // 校验数据
  357. validateFormData (data) {
  358. let row
  359. let msg = ''
  360. for (let i = 0; i < data.length; i++) {
  361. row = data[i]
  362. if (row) {
  363. const rebateParentType = this.cjgsfList.find(item => item.code == row.rebateParentType)
  364. const type = rebateParentType ? rebateParentType.dispName : ''
  365. if (!row.parentDealerSn) {
  366. msg = '请选择' + type
  367. break
  368. }
  369. if (!row.allotRate && row.rebateParentType == 'ASSIGN') {
  370. msg = '请输入' + type + '的分配比例'
  371. break
  372. }
  373. }
  374. }
  375. return msg
  376. },
  377. // 保存
  378. handleSave () {
  379. const _this = this
  380. _this.$refs.ruleForm.validate(valid => {
  381. if (valid) {
  382. const formData = JSON.parse(JSON.stringify(_this.form))
  383. formData.rebateDealerList = formData.rebateDealerList.concat(JSON.parse(JSON.stringify(this.zdDealearList)))
  384. console.log(formData)
  385. // 校验数据
  386. const errorMsg = this.validateFormData(formData.rebateDealerList)
  387. console.log(errorMsg)
  388. if (errorMsg) {
  389. _this.$message.error(errorMsg)
  390. } else {
  391. // 处理数据并校验比例之和是否100
  392. let pa = 0
  393. formData.rebateDealerList = formData.rebateDealerList.filter(item => item)
  394. formData.rebateDealerList.map(item => {
  395. item.allotRate = item.allotRate ? (item.allotRate / 100) : 0
  396. pa += item.allotRate
  397. delete item.id
  398. })
  399. console.log(formData)
  400. console.log(Number(pa).toFixed(2))
  401. if (Number(pa).toFixed(2) != 1) {
  402. _this.$message.error('差价比例之和必须是100%')
  403. return
  404. }
  405. if (!this.isSpecial && !this.form.dealerUpsSn) {
  406. formData.rebateScopeList = this.$refs.categoryTree.getResult()
  407. if (formData.rebateScopeList.length == 0) {
  408. _this.$message.error('请选择品类')
  409. return
  410. }
  411. }
  412. delete formData.rebateParentType
  413. // 提交数据
  414. _this.spinning = true
  415. const fun = this.form.dealerUpsSn ? dealerUpsUpdate : dealerUpsCreate
  416. fun(formData).then(res => {
  417. if (res.status == 200) {
  418. _this.$message.success(res.message)
  419. _this.isShow = false
  420. setTimeout(() => {
  421. _this.$emit('ok')
  422. }, 100)
  423. }
  424. _this.spinning = false
  425. })
  426. }
  427. } else {
  428. return false
  429. }
  430. })
  431. }
  432. },
  433. watch: {
  434. // 父页面传过来的弹框状态
  435. openModal (newValue, oldValue) {
  436. this.isShow = newValue
  437. },
  438. // 重定义的弹框状态
  439. isShow (newValue, oldValue) {
  440. if (!newValue) {
  441. this.resetForm()
  442. this.$emit('close')
  443. }
  444. }
  445. }
  446. }
  447. </script>
  448. <style lang="less">
  449. .priceDifference-modal{
  450. .ant-modal-body {
  451. padding: 24px!important;
  452. .ant-input[disabled]{
  453. color:#666;
  454. }
  455. }
  456. .btn-cont {
  457. text-align: center;
  458. margin: 15px 0 10px;
  459. }
  460. }
  461. </style>