123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467 |
- <template>
- <a-modal
- v-drag
- centered
- class="priceDifference-modal"
- :footer="null"
- :maskClosable="false"
- :title="title"
- v-model="isShow"
- @cancel="isShow=false"
- :width="960">
- <a-spin :spinning="spinning" tip="Loading...">
- <div style="min-height:100px;">
- <a-form-model
- id="dealerAccountEdit-form"
- ref="ruleForm"
- :model="form"
- :rules="rules"
- :label-col="formItemLayout.labelCol"
- :wrapper-col="formItemLayout.wrapperCol"
- >
- <a-form-model-item label="经销商名称">
- {{ detailData&&detailData.dealerName }}
- </a-form-model-item>
- <a-form-model-item label="上级经销商" required>
- <a-row :gutter="10">
- <a-col :span="17">
- <custList
- v-if="!form.dealerUpsSn || isSpecial"
- ref="custList"
- :notDealerSn="notDealer"
- :notDealerType="['SPECIAL']"
- @change="custSupChange"
- placeholder="请输入经销商名称搜索"></custList>
- <a-input v-else :value="superDealerName" disabled />
- </a-col>
- <a-col :span="4" v-if="!isSpecial">
- <a-input-number
- :precision="2"
- :min="0"
- :max="100"
- v-model="parentAllotRate"
- @change="rateSupChange"
- placeholder="请输入比例"/> %
- </a-col>
- <a-col :span="2" v-if="!isSpecial && zdDealearList.length<3">
- <a-button
- type="primary"
- ghost
- @click="addItem()"
- >添加指定</a-button>
- </a-col>
- </a-row>
- </a-form-model-item>
- <a-form-model-item label="指定经销商" v-if="zdDealearList.length">
- <a-row :gutter="10" v-for="(item,index) in zdDealearList" :key="item.id">
- <a-col :span="17">
- <custList :ref="'custList-'+item.id" :notDealerSn="notZdDealer" @change="(v,r)=>custChange(v,r,index)" placeholder="请输入经销商名称搜索"></custList>
- </a-col>
- <a-col :span="4">
- <a-input-number
- :precision="2"
- :min="0"
- :max="100"
- v-model="item.allotRate"
- @change="(v)=>rateChange(v,index)"
- placeholder="请输入比例"/> %
- </a-col>
- <a-col :span="2">
- <!-- <a-button
- style="margin-right:5px;"
- v-if="index==zdDealearList.length-1 && zdDealearList.length<3"
- @click="addItem(item,index)"
- title="添加"
- size="small"
- shape="circle"
- icon="plus" /> -->
- <a-button
- @click="delItem(item,index)"
- type="primary"
- title="删除"
- size="small"
- shape="circle"
- ghost
- icon="minus"/>
- </a-col>
- </a-row>
- </a-form-model-item>
- <a-form-model-item label="箭冠总公司" v-if="!isSpecial">
- <a-row :gutter="10">
- <a-col :span="17">
- <a-input value="箭冠总公司" disabled />
- </a-col>
- <a-col :span="4">
- <a-input-number
- :precision="2"
- :min="0"
- :max="100"
- v-model="hAllotRate"
- @change="rateHChange"
- placeholder="请输入比例"/> %
- </a-col>
- </a-row>
- </a-form-model-item>
- </a-form-model>
- </div>
- <div style="padding:10px 10px 10px 40px;">
- <categoryTree v-if="showTable&&!isSpecial&&!form.dealerUpsSn" ref="categoryTree"></categoryTree>
- </div>
- <div class="btn-cont">
- <a-button @click="isShow = false" style="font-size: 12px;">取消</a-button>
- <a-button
- type="primary"
- style="margin-left: 20px;"
- @click="handleSave"
- >确定</a-button>
- </div>
- </a-spin>
- </a-modal>
- </template>
- <script>
- import { commonMixin } from '@/utils/mixin'
- import custList from '@/views/common/custList.vue'
- import { VSelect } from '@/components'
- import { dealerUpsCreate, dealerUpsUpdate } from '@/api/dealer'
- import categoryTree from './categoryTree'
- export default {
- name: 'PriceDiffModal',
- mixins: [commonMixin],
- components: { VSelect, custList, categoryTree },
- props: {
- openModal: { // 弹框显示状态
- type: Boolean,
- default: false
- }
- },
- data () {
- return {
- spinning: false,
- isShow: this.openModal, // 是否打开弹框
- title: '差价设置',
- formItemLayout: {
- labelCol: { span: 3 },
- wrapperCol: { span: 20 }
- },
- form: {
- dealerSn: undefined,
- dealerUpsSn: undefined,
- rebateParentType: [], // 差价归属
- rebateDealerList: [], // 经销商列表
- rebateScopeList: [] // 品类列表
- },
- parentAllotRate: '', // 上级经销商分配比例
- hAllotRate: '', // 总部分配比例
- rules: {
- rebateParentType: [{ required: true, message: '请选择差价归属方', trigger: 'change' }]
- },
- cjgsfList: [],
- zdDealearList: [],
- detailData: null,
- superDealerName: '',
- checkedDealerSn: [],
- showTable: false
- }
- },
- computed: {
- isSpecial () {
- return this.detailData && this.detailData.dealerLevel == 'SPECIAL'
- },
- notDealer () {
- return this.form.rebateDealerList.concat(this.zdDealearList).concat([{ 'parentDealerSn': this.form.dealerSn }])
- },
- notZdDealer () {
- return this.form.rebateDealerList.concat(this.zdDealearList)
- }
- },
- methods: {
- // 新增
- setData (list, dealerSn, detail, checkedDealerSn) {
- this.detailData = detail
- this.form.dealerSn = dealerSn
- this.cjgsfList = list
- this.checkedDealerSn = checkedDealerSn
- // 如果当前经销商是特约经销商
- if (this.detailData.dealerLevel == 'SPECIAL') {
- // 默认只有上级经销商
- this.cjgsgChange(['SUPERIORS'])
- } else {
- this.cjgsgChange(['SUPERIORS', 'HEAD'])
- }
- },
- // 编辑
- editData (list, dealerSn, detail, row) {
- this.detailData = detail
- this.form.dealerSn = dealerSn
- this.form.dealerUpsSn = row.dealerUpsSn
- this.cjgsfList = list
- // 如果当前经销商是特约经销商
- if (this.detailData.dealerLevel == 'SPECIAL') {
- // 默认只有上级经销商
- this.form.rebateParentType = ['SUPERIORS']
- } else {
- this.form.rebateParentType = ['SUPERIORS', 'HEAD']
- }
- console.log(row)
- if (row) {
- row.rebateDealerList.map(item => {
- const row = {
- 'id': item.id,
- 'dealerSn': item.dealerSn,
- 'parentDealerSn': item.parentDealerSn,
- 'rebateParentType': item.rebateParentType,
- 'dealerRelationSn': item.dealerRelationSn,
- 'allotRate': Number(item.allotRate * 100).toFixed(2)
- }
- // 指定
- if (item.rebateParentType == 'ASSIGN') {
- this.zdDealearList.push(row)
- this.$nextTick(() => {
- this.$refs['custList-' + item.id][0].setDufaultVal(item.parentDealer.dealerName)
- })
- } else {
- // 上级和总部
- if (item.rebateParentType == 'SUPERIORS') {
- this.form.rebateDealerList[0] = row
- this.parentAllotRate = Number(item.allotRate * 100).toFixed(2)
- // 特约可编辑上级
- if (this.detailData.dealerLevel == 'SPECIAL') {
- this.$nextTick(() => {
- this.$refs.custList.setDufaultVal(item.parentDealer.dealerName)
- })
- } else {
- // 其它不可编辑
- this.superDealerName = item.parentDealer.dealerName
- }
- } else {
- this.form.rebateDealerList[1] = row
- this.hAllotRate = Number(item.allotRate * 100).toFixed(2)
- }
- }
- })
- }
- },
- // 上级经销商修改
- custSupChange (val, row) {
- console.log(val, row)
- this.form.rebateDealerList[0]['parentDealerSn'] = val.key
- this.showTable = !!val.key
- if (!this.isSpecial) {
- this.$nextTick(() => {
- this.getCategoryList()
- })
- }
- },
- rateSupChange (val) {
- this.form.rebateDealerList[0]['allotRate'] = val
- },
- // 刷新品类列表
- getCategoryList () {
- const parentDealerSn = this.form.rebateDealerList[0]['parentDealerSn']
- if (parentDealerSn) {
- // 查询品类树
- this.$refs.categoryTree.pageInit(this.detailData, parentDealerSn, this.form.dealerSn)
- }
- },
- rateHChange (val) {
- this.form.rebateDealerList[1]['allotRate'] = val
- },
- // 指定经销商变更
- custChange (val, row, index) {
- console.log(val, index)
- this.zdDealearList[index]['parentDealerSn'] = val.key
- },
- rateChange (val, index) {
- console.log(val, index)
- this.zdDealearList[index]['allotRate'] = val
- },
- // 差价归属变更
- cjgsgChange (val) {
- console.log(val)
- this.form.rebateParentType = val
- // 指定经销商
- if (val.indexOf('ASSIGN') >= 0) {
- if (this.zdDealearList.length == 0) {
- this.addItem()
- }
- } else {
- this.zdDealearList = []
- }
- // 上级经销商
- if (val.indexOf('SUPERIORS') >= 0) {
- if (!this.form.rebateDealerList[0]) {
- this.form.rebateDealerList[0] = {
- 'id': new Date().getTime(),
- 'dealerSn': this.form.dealerSn,
- 'parentDealerSn': undefined,
- 'rebateParentType': 'SUPERIORS',
- 'allotRate': 100
- }
- this.parentAllotRate = 100
- }
- } else {
- this.form.rebateDealerList[0] = null
- this.parentAllotRate = ''
- }
- // 总部经销商
- if (val.indexOf('HEAD') >= 0) {
- if (!this.form.rebateDealerList[1]) {
- this.form.rebateDealerList[1] = {
- 'id': new Date().getTime() - 100,
- 'dealerSn': this.form.dealerSn,
- 'parentDealerSn': 1,
- 'rebateParentType': 'HEAD',
- 'allotRate': 0
- }
- this.hAllotRate = 0
- }
- } else {
- this.form.rebateDealerList[1] = null
- this.hAllotRate = ''
- }
- },
- // 增加指定经销商
- addItem (row, index) {
- const sn = new Date().getTime()
- this.zdDealearList.push({
- 'id': sn,
- 'dealerSn': this.form.dealerSn,
- 'parentDealerSn': undefined,
- 'rebateParentType': 'ASSIGN',
- 'allotRate': ''
- })
- },
- // 删除指定经销商
- delItem (row, index) {
- const i = this.zdDealearList.findIndex(item => item.id == row.id)
- if (i >= 0) {
- this.zdDealearList.splice(i, 1)
- }
- },
- // 重置表单
- resetForm () {
- if (this.isSpecial || !this.form.dealerUpsSn) {
- this.$refs.custList.resetForm()
- }
- this.form.dealerSn = undefined
- this.form.dealerUpsSn = undefined
- this.form.rebateParentType = []
- this.form.rebateDealerList = []
- this.form.rebateScopeList = []
- this.zdDealearList = []
- this.hAllotRate = ''
- this.parentAllotRate = 100
- this.showTable = false
- },
- // 校验数据
- validateFormData (data) {
- let row
- let msg = ''
- for (let i = 0; i < data.length; i++) {
- row = data[i]
- if (row) {
- const rebateParentType = this.cjgsfList.find(item => item.code == row.rebateParentType)
- const type = rebateParentType ? rebateParentType.dispName : ''
- if (!row.parentDealerSn) {
- msg = '请选择' + type
- break
- }
- if (!row.allotRate && row.rebateParentType == 'ASSIGN') {
- msg = '请输入' + type + '的分配比例'
- break
- }
- }
- }
- return msg
- },
- // 保存
- handleSave () {
- const _this = this
- _this.$refs.ruleForm.validate(valid => {
- if (valid) {
- const formData = JSON.parse(JSON.stringify(_this.form))
- formData.rebateDealerList = formData.rebateDealerList.concat(JSON.parse(JSON.stringify(this.zdDealearList)))
- console.log(formData)
- // 校验数据
- const errorMsg = this.validateFormData(formData.rebateDealerList)
- console.log(errorMsg)
- if (errorMsg) {
- _this.$message.error(errorMsg)
- } else {
- // 处理数据并校验比例之和是否100
- let pa = 0
- formData.rebateDealerList = formData.rebateDealerList.filter(item => item)
- formData.rebateDealerList.map(item => {
- item.allotRate = item.allotRate ? (item.allotRate / 100) : 0
- pa += item.allotRate
- delete item.id
- })
- console.log(formData)
- console.log(Number(pa).toFixed(2))
- if (Number(pa).toFixed(2) != 1) {
- _this.$message.error('差价比例之和必须是100%')
- return
- }
- if (!this.isSpecial && !this.form.dealerUpsSn) {
- formData.rebateScopeList = this.$refs.categoryTree.getResult()
- if (formData.rebateScopeList.length == 0) {
- _this.$message.error('请选择品类')
- return
- }
- }
- delete formData.rebateParentType
- // 提交数据
- _this.spinning = true
- const fun = this.form.dealerUpsSn ? dealerUpsUpdate : dealerUpsCreate
- fun(formData).then(res => {
- if (res.status == 200) {
- _this.$message.success(res.message)
- _this.isShow = false
- setTimeout(() => {
- _this.$emit('ok')
- }, 100)
- }
- _this.spinning = false
- })
- }
- } else {
- return false
- }
- })
- }
- },
- watch: {
- // 父页面传过来的弹框状态
- openModal (newValue, oldValue) {
- this.isShow = newValue
- },
- // 重定义的弹框状态
- isShow (newValue, oldValue) {
- if (!newValue) {
- this.resetForm()
- this.$emit('close')
- }
- }
- }
- }
- </script>
- <style lang="less">
- .priceDifference-modal{
- .ant-modal-body {
- padding: 24px!important;
- .ant-input[disabled]{
- color:#666;
- }
- }
- .btn-cont {
- text-align: center;
- margin: 15px 0 10px;
- }
- }
- </style>
|