Kaynağa Gözat

经销商关系绑定、差价归属设置

chenrui 4 yıl önce
ebeveyn
işleme
73cf4fc31f

+ 176 - 0
src/views/dealerManagement/dealerRelationshipBinding/associateModal.vue

@@ -0,0 +1,176 @@
+<template>
+  <a-modal
+    centered
+    class="relationshipBinding-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="关联下级"
+    v-model="isShow"
+    @cancle="isShow=false"
+    :width="800">
+    <!-- 表单 -->
+    <div>
+      <a-form-model
+        id="relationshipBinding-form"
+        ref="ruleForm"
+        :model="form"
+        :rules="rules"
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+      >
+        <a-form-model-item label="上级名称" v-if="parentType">
+          {{ parentType }}
+        </a-form-model-item>
+        <a-form-model-item label="选择下级" prop="productTypeName">
+          <a-select
+            placeholder="请选择"
+            id="relationshipBinding-productBrandSn"
+            allowClear
+            v-model="form.productTypeName"
+            :showSearch="true"
+            @search="handlerSearch">
+            <div slot="dropdownRender" slot-scope="menu">
+              <ul style="padding: 0;margin: 0;list-style: none;">
+                <li style="padding: 10px 15px;display: flex;justify-content: space-between;align-items: center;" @click="handleDisassociate()">
+                  <p style="margin: 0;">西安车领主网络科技有限公司</p>
+                  <a-button
+                    type="link"
+                    class="button-error"
+                    size="small"
+                    id="relationshipBindingList-edit">立刻关联</a-button>
+                </li>
+              </ul>
+            </div>
+            <!-- <a-select-option v-for="item in productBrandList" :key="item.productBrandSn" :value="item.productBrandSn">{{ item.productBrandName }}</a-select-option> -->
+          </a-select>
+        </a-form-model-item>
+      </a-form-model>
+      <div class="btn-cont">
+        <a-button type="primary" id="product-category-edit-modal-save" @click="handleSave">确定</a-button>
+        <a-button id="product-category-edit-modal-back" @click="isShow = false" style="margin-left: 15px;">关闭</a-button>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+// import { dealerProductTypeSave } from '@/api/dealerProductType'
+export default {
+  name: 'RelationshipBindingModal',
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    itemId: {
+      type: [Number, String],
+      default: ''
+    },
+    nowData: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      formItemLayout: {
+        labelCol: { span: 6 },
+        wrapperCol: { span: 16 }
+      },
+      form: {
+        productTypeName: '' // 产品分类名称
+      },
+      rules: {
+        productTypeName: [
+          { required: true, message: '请输入产品分类名称', trigger: 'blur' }
+        ]
+      },
+      parentType: '', //  父级分类
+      productBrandList: [
+        { productBrandSn: 2, productBrandName: '爱的世界客户带伞' }
+      ]
+    }
+  },
+  components: {
+    VNodes: {
+      functional: true,
+      render: (h, ctx) => ctx.props.vnodes
+    }
+  },
+  methods: {
+    handleDisassociate () {
+      console.log('选中')
+    },
+    // search
+    handlerSearch (val) {
+      console.log(val)
+    },
+    //  保存
+    handleSave () {
+      const _this = this
+      _this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const formData = JSON.parse(JSON.stringify(_this.form))
+          formData.id = _this.itemId ? _this.itemId : undefined
+          formData.psn = _this.nowData && _this.nowData.psn ? _this.nowData.psn : undefined
+          // dealerProductTypeSave(formData).then(res => {
+          //   if (res.status == 200) {
+          //     _this.$message.success(res.message)
+          //     _this.$emit('ok')
+          //     _this.isShow = false
+          //   }
+          // })
+        } else {
+          return false
+        }
+      })
+    },
+    filterOption (input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      )
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+        this.$refs.ruleForm.resetFields()
+      }
+    },
+    itemId (newValue, oldValue) {
+      if (this.isShow && newValue) {
+
+      } else {
+
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .relationshipBinding-modal{
+    .ant-modal-body {
+      padding: 40px 40px 24px;
+    }
+    .search-opt{
+      padding: 0;
+      margin: 0;
+      list-style: none;
+      li{
+        padding: 5px 15px;
+      }
+    }
+    .btn-cont {
+      text-align: center;
+      margin: 35px 0 10px;
+    }
+  }
+</style>

+ 152 - 3
src/views/dealerManagement/dealerRelationshipBinding/list.vue

@@ -1,8 +1,157 @@
 <template>
+  <a-card size="small" :bordered="false" class="relationshipBindingList-wrap">
+    <!-- 搜索条件 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
+        <a-row :gutter="15">
+          <a-col :md="6" :sm="24">
+            <a-form-item label="经销商名称">
+              <a-input id="relationshipBindingList-productName" v-model.trim="queryParam.productName" allowClear placeholder="请输入经销商名称"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-button style="margin-bottom: 18px;" type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="relationshipBindingList-refresh">查询</a-button>
+            <a-button style="margin: 0 0 18px 8px" @click="resetSearchForm" :disabled="disabled" id="relationshipBindingList-reset">重置</a-button>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!-- 列表 -->
+    <a-tabs type="card" @change="callback">
+      <a-tab-pane key="1" tab="省市级关系绑定"></a-tab-pane>
+      <a-tab-pane key="2" tab="特约店关系绑定"></a-tab-pane>
+    </a-tabs>
+    <s-table
+      class="sTable"
+      ref="table"
+      size="default"
+      :rowKey="(record) => record.id"
+      :columns="columns"
+      :data="loadData"
+      :showPagination="false"
+      :defaultExpandedRowKeys="defaultExpandedRowKeys"
+      :scroll="{ y: tableHeight }"
+      bordered>
+      <!-- 操作 -->
+      <template slot="action" slot-scope="text, record">
+        <a-button
+          type="link"
+          class="button-info"
+          size="small"
+          icon="plus"
+          id="relationshipBindingList-addSubItem"
+          @click="handleAssociate(record)">关联下级</a-button>
+        <a-button
+          type="link"
+          class="button-error"
+          size="small"
+          icon="rollback"
+          id="relationshipBindingList-edit"
+          @click="handleDisassociate(record)">取消关联</a-button>
+        <!-- <span v-if="record.sysFlag != 0">--</span> -->
+      </template>
+    </s-table>
+    <!-- 关联下级 -->
+    <associate-modal :openModal="openModal" :nowData="nowData" :itemId="itemId" @ok="$refs.table.refresh(true)" @close="closeModal" />
+  </a-card>
 </template>
 
 <script>
+import { STable, VSelect } from '@/components'
+import associateModal from './associateModal.vue'
+export default {
+  components: { STable, VSelect, associateModal },
+  data () {
+    return {
+      tableHeight: 0,
+      formItemLayout: {
+        labelCol: { span: 6 },
+        wrapperCol: { span: 16 }
+      },
+      queryParam: {},
+      disabled: false, //  查询、重置按钮是否可操作
+      columns: [
+        { title: '经销商名称', dataIndex: 'productTypeName', align: 'left' },
+        { title: '操作', scopedSlots: { customRender: 'action' }, align: 'center' }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        this.disabled = true
+        if (this.tableHeight == 0) {
+          this.tableHeight = window.innerHeight - 380
+        }
+        // return dealerProductList(Object.assign(parameter, this.queryParam)).then(res => {
+        //   const data = res.data
+        //   const no = (data.pageNo - 1) * data.pageSize
+        //   for (var i = 0; i < data.list.length; i++) {
+        //     data.list[i].no = no + i + 1
+        //   }
+        //   this.disabled = false
+        //   return data
+        // })
+        const _this = this
+        return new Promise(function (resolve, reject) {
+          const data = {
+            pageNo: 1,
+            pageSize: 10,
+            list: [
+              { id: '1', productNum: 'jgqp11111111111', productName: '产品1', productPic: ['https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg', 'https://qn.antdv.com/vue.png'], productOldNum: 'jgqp111123545', productBrand: '箭冠品牌', productType: '产品分类1', inventoryNum: '5', inventoryMoney: '122' }
+            ]
+          }
+          const no = (data.pageNo - 1) * data.pageSize
+          for (var i = 0; i < data.list.length; i++) {
+            data.list[i].no = no + i + 1
+          }
+          _this.disabled = false
+          resolve(data)
+        })
+      },
+      defaultExpandedRowKeys: [], //  树形数据默认展开项
+      openModal: false, //  新增编辑  弹框
+      itemId: '', //  当前id
+      nowData: null //  当前记录数据
+    }
+  },
+  methods: {
+    //  重置
+    resetSearchForm () {
+      this.queryParam.productCode = ''
+      this.queryParam.enabledFlag = undefined
+      this.$refs.table.refresh(true)
+    },
+    callback (key) {
+      console.log(key)
+    },
+    // 关联下级
+    handleAssociate (row) {
+      this.itemId = row.id
+      this.nowData = row
+      this.openModal = true
+    },
+    // 取消关联
+    handleDisassociate (row) {
+      const _this = this
+      // _this.nowId = row.id
+      _this.$confirm({
+        title: '提示',
+        content: '确认要解除上下级的关系吗?',
+        centered: true,
+        onOk () {
+          // dealerProductTypeDel({ id: _this.nowId }).then(res => {
+          //   if (res.status == 200) {
+          //     _this.$message.success(res.message)
+          //     _this.$refs.table.refresh()
+          //   }
+          // })
+        }
+      })
+    },
+    //  关闭弹框
+    closeModal () {
+      this.itemId = ''
+      this.nowData = null
+      this.openModal = false
+    }
+  }
+}
 </script>
-
-<style>
-</style>

+ 176 - 0
src/views/dealerManagement/rebateSettings/associateModal.vue

@@ -0,0 +1,176 @@
+<template>
+  <a-modal
+    centered
+    class="rebateSettingsEdit-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="编辑"
+    v-model="isShow"
+    @cancle="isShow=false"
+    :width="800">
+    <!-- 表单 -->
+    <div>
+      <a-form-model
+        id="rebateSettingsEdit-form"
+        ref="ruleForm"
+        :model="form"
+        :rules="rules"
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+      >
+        <a-form-model-item label="经销商名">
+          收款方还是空见房东
+        </a-form-model-item>
+        <a-form-model-item label="返利归属" prop="productTypeName">
+          <a-select
+            placeholder="请选择"
+            id="rebateSettingsEdit-productBrandSn"
+            allowClear
+            v-model="form.productTypeName"
+            :showSearch="true"
+            @search="handlerSearch">
+            <div slot="dropdownRender" slot-scope="menu">
+              <ul style="padding: 0;margin: 0;list-style: none;">
+                <li style="padding: 10px 15px;display: flex;justify-content: space-between;align-items: center;" @click="handleDisassociate()">
+                  <p style="margin: 0;">西安车领主网络科技有限公司</p>
+                  <a-button
+                    type="link"
+                    class="button-error"
+                    size="small"
+                    id="rebateSettingsEdit-edit">立刻关联</a-button>
+                </li>
+              </ul>
+            </div>
+            <!-- <a-select-option v-for="item in productBrandList" :key="item.productBrandSn" :value="item.productBrandSn">{{ item.productBrandName }}</a-select-option> -->
+          </a-select>
+        </a-form-model-item>
+      </a-form-model>
+      <div class="btn-cont">
+        <a-button type="primary" id="rebateSettingsEdit-save" @click="handleSave">保存</a-button>
+        <a-button id="rebateSettingsEdit-back" @click="isShow = false" style="margin-left: 15px;">关闭</a-button>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+// import { dealerProductTypeSave } from '@/api/dealerProductType'
+export default {
+  name: 'RebateSettingsEditModal',
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    itemId: {
+      type: [Number, String],
+      default: ''
+    },
+    nowData: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      formItemLayout: {
+        labelCol: { span: 6 },
+        wrapperCol: { span: 16 }
+      },
+      form: {
+        productTypeName: '' // 产品分类名称
+      },
+      rules: {
+        productTypeName: [
+          { required: true, message: '请输入产品分类名称', trigger: 'blur' }
+        ]
+      },
+      parentType: '', //  父级分类
+      productBrandList: [
+        { productBrandSn: 2, productBrandName: '爱的世界客户带伞' }
+      ]
+    }
+  },
+  components: {
+    VNodes: {
+      functional: true,
+      render: (h, ctx) => ctx.props.vnodes
+    }
+  },
+  methods: {
+    handleDisassociate () {
+      console.log('选中')
+    },
+    // search
+    handlerSearch (val) {
+      console.log(val)
+    },
+    //  保存
+    handleSave () {
+      const _this = this
+      _this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const formData = JSON.parse(JSON.stringify(_this.form))
+          formData.id = _this.itemId ? _this.itemId : undefined
+          formData.psn = _this.nowData && _this.nowData.psn ? _this.nowData.psn : undefined
+          // dealerProductTypeSave(formData).then(res => {
+          //   if (res.status == 200) {
+          //     _this.$message.success(res.message)
+          //     _this.$emit('ok')
+          //     _this.isShow = false
+          //   }
+          // })
+        } else {
+          return false
+        }
+      })
+    },
+    filterOption (input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      )
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+        this.$refs.ruleForm.resetFields()
+      }
+    },
+    itemId (newValue, oldValue) {
+      if (this.isShow && newValue) {
+
+      } else {
+
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .rebateSettingsEdit-modal{
+    .ant-modal-body {
+      padding: 40px 40px 24px;
+    }
+    .search-opt{
+      padding: 0;
+      margin: 0;
+      list-style: none;
+      li{
+        padding: 5px 15px;
+      }
+    }
+    .btn-cont {
+      text-align: center;
+      margin: 35px 0 10px;
+    }
+  }
+</style>

+ 114 - 3
src/views/dealerManagement/rebateSettings/list.vue

@@ -1,8 +1,119 @@
 <template>
+  <a-card size="small" :bordered="false" class="rebateSettingsList-wrap">
+    <!-- 搜索条件 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
+        <a-row :gutter="15">
+          <a-col :md="6" :sm="24">
+            <a-form-item label="经销商名称">
+              <a-input id="rebateSettingsList-productName" v-model.trim="queryParam.productName" allowClear placeholder="请输入经销商名称"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-button style="margin-bottom: 18px;" type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="rebateSettingsList-refresh">查询</a-button>
+            <a-button style="margin: 0 0 18px 8px" @click="resetSearchForm" :disabled="disabled" id="rebateSettingsList-reset">重置</a-button>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!-- 列表 -->
+    <s-table
+      class="sTable"
+      ref="table"
+      size="default"
+      :rowKey="(record) => record.id"
+      :columns="columns"
+      :data="loadData"
+      :scroll="{ y: tableHeight }"
+      bordered>
+      <!-- 操作 -->
+      <template slot="action" slot-scope="text, record">
+        <a-button size="small" type="link" class="button-info" @click="handleEdit(record)" id="rebateSettingsList-edit-btn">编辑</a-button>
+      </template>
+    </s-table>
+    <!-- 关联下级 -->
+    <associate-modal :openModal="openModal" :nowData="nowData" :itemId="itemId" @ok="$refs.table.refresh(true)" @close="closeModal" />
+  </a-card>
 </template>
 
 <script>
+import { STable, VSelect } from '@/components'
+import associateModal from './associateModal.vue'
+export default {
+  components: { STable, VSelect, associateModal },
+  data () {
+    return {
+      tableHeight: 0,
+      formItemLayout: {
+        labelCol: { span: 6 },
+        wrapperCol: { span: 16 }
+      },
+      queryParam: {},
+      disabled: false, //  查询、重置按钮是否可操作
+      columns: [
+        { title: '经销商名称', dataIndex: 'productTypeName', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '经销商级别', dataIndex: 'productTyspeName', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '差价归属', dataIndex: 'productTypdeName', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '归属经销商级别', dataIndex: 'productTfypeName', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: 100, align: 'center' }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        this.disabled = true
+        if (this.tableHeight == 0) {
+          this.tableHeight = window.innerHeight - 380
+        }
+        // return dealerProductList(Object.assign(parameter, this.queryParam)).then(res => {
+        //   const data = res.data
+        //   const no = (data.pageNo - 1) * data.pageSize
+        //   for (var i = 0; i < data.list.length; i++) {
+        //     data.list[i].no = no + i + 1
+        //   }
+        //   this.disabled = false
+        //   return data
+        // })
+        const _this = this
+        return new Promise(function (resolve, reject) {
+          const data = {
+            pageNo: 1,
+            pageSize: 10,
+            list: [
+              { id: '1', productNum: 'jgqp11111111111', productName: '产品1', productPic: ['https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg', 'https://qn.antdv.com/vue.png'], productOldNum: 'jgqp111123545', productBrand: '箭冠品牌', productType: '产品分类1', inventoryNum: '5', inventoryMoney: '122' }
+            ]
+          }
+          const no = (data.pageNo - 1) * data.pageSize
+          for (var i = 0; i < data.list.length; i++) {
+            data.list[i].no = no + i + 1
+          }
+          _this.disabled = false
+          resolve(data)
+        })
+      },
+      defaultExpandedRowKeys: [], //  树形数据默认展开项
+      openModal: false, //  新增编辑  弹框
+      itemId: '', //  当前id
+      nowData: null //  当前记录数据
+    }
+  },
+  methods: {
+    //  重置
+    resetSearchForm () {
+      this.queryParam.productCode = ''
+      this.queryParam.enabledFlag = undefined
+      this.$refs.table.refresh(true)
+    },
+    // 编辑
+    handleEdit (row) {
+      this.itemId = row.id
+      this.nowData = row
+      this.openModal = true
+    },
+    //  关闭弹框
+    closeModal () {
+      this.itemId = ''
+      this.nowData = null
+      this.openModal = false
+    }
+  }
+}
 </script>
-
-<style>
-</style>