Jelajahi Sumber

经销权设置

chenrui 1 tahun lalu
induk
melakukan
67218723ff

+ 1 - 1
src/config/router.config.js

@@ -3031,7 +3031,7 @@ export const asyncRouterMap = [
               {
                 path: 'permissionSetting/:sn',
                 name: 'merchantInfoManagementSet',
-                component: () => import(/* webpackChunkName: "dealerManagement" */ '@/views/dealerManagement/merchantInfoManagement/permissionSetting.vue'),
+                component: () => import(/* webpackChunkName: "dealerManagement" */ '@/views/dealerManagement/merchantInfoManagement/permissionSettingNew.vue'),
                 meta: {
                   title: '经销权设置',
                   icon: 'file-text',

+ 107 - 0
src/views/dealerManagement/merchantInfoManagement/chooseTypeList.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <div ref="tableSearch" class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
+        <a-row :gutter="15">
+          <a-col :md="8" :sm="24">
+            <a-form-item label="产品品牌">
+              <ProductBrand id="inventoryQueryList-productBrandSn" v-model="queryParam.productBrandSn"></ProductBrand>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-model-item label="产品分类">
+              <ProductType id="inventoryQueryList-productType" placeholder="请选择产品分类" @change="changeProductType" v-model="productType"></ProductType>
+            </a-form-model-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-button type="primary" @click="$refs.table.refresh()" :disabled="disabled" id="inventoryQueryList-refresh">查询</a-button>
+            <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="inventoryQueryList-reset">重置</a-button>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!-- 表格区域 -->
+    <!-- cellSelectionOption 单元格选择 -->
+    <a-spin :spinning="spinning" tip="Loading...">
+      <ve-table
+        border-y
+        v-show="!showEmpty"
+        :scroll-width="0"
+        :max-height="tableHeight"
+        :show-header="showTableHead"
+        :row-style-option="{clickHighlight: true}"
+        :cellSelectionOption="{enable: false}"
+        :virtual-scroll-option="{enable: true}"
+        :columns="columns"
+        :table-data="dataSource"
+        row-key-field-name="id"
+        :checkbox-option="checkboxOption"
+      />
+      <div v-show="dataSource.length==0" class="empty-data"><a-empty description="暂无产品" :image="simpleImage"/></div>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import { commonMixin } from '@/utils/mixin'
+import ProductType from '@/views/common/productType.js'
+import ProductBrand from '@/views/common/productBrand.js'
+export default {
+  name: 'DetailProductList',
+  mixins: [commonMixin],
+  components: { ProductType, ProductBrand },
+  props: {
+    maxHeight: {
+      type: [String, Number],
+      default: '300'
+    },
+    dataSource: {
+      type: Array,
+      default: function () { return [] }
+    }
+  },
+  data () {
+    return {
+      spinning: false,
+      showEmpty: false,
+      tableHeight: this.maxHeight,
+      showTableHead: true, // 显示表头
+      checkboxOption: {
+        // 行选择改变事件
+        selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
+          console.log(row, isSelected, selectedRowKeys)
+        },
+        // 全选改变事件
+        selectedAllChange: ({ isSelected, selectedRowKeys }) => {
+          console.log(isSelected, selectedRowKeys)
+        }
+      },
+      queryParam: {
+        productBrandSn: undefined
+      }
+    }
+  },
+  computed: {
+    columns () {
+      const arr = [
+        { title: '', field: '', key: 'acheck', width: 60, type: 'checkbox', align: 'center' },
+        { title: '序号', field: 'no', key: 'a', width: 80, align: 'center', operationColumn: false },
+        { title: '品牌', field: 'productCode', key: 'b', align: 'center', width: 160, operationColumn: false },
+        { title: '一级分类', field: 'warehouseName', key: 'c', width: 160, align: 'center', operationColumn: false },
+        { title: '二级分类', field: 'surplusQty', key: 'd', width: 160, align: 'center', operationColumn: false },
+        { title: '三级分类', field: 'qty', key: 'e', width: 160, align: 'center', operationColumn: false }
+      ]
+      return arr
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .empty-data{
+        color: #999;
+        text-align: center;
+        padding: 20px;
+        border:1px solid #eee;
+    }
+</style>

+ 161 - 0
src/views/dealerManagement/merchantInfoManagement/chooseTypeModal.vue

@@ -0,0 +1,161 @@
+<template>
+  <a-modal
+    centered
+    class="chooseType-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="选择品类"
+    v-model="isShow"
+    @cancel="isShow=false"
+    width="70%">
+    <a-spin :spinning="spinning" tip="Loading...">
+      <!-- 表单 -->
+      <a-form-model
+        ref="ruleForm"
+        :model="form"
+        :rules="rules"
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+      >
+        <a-form-model-item label="价格级别" prop="priceLevel">
+          <v-select code="PRODUCT_LEVEL" id="productPriceLevel-level" v-model="form.level" allowClear placeholder="请选择价格级别"></v-select>
+        </a-form-model-item>
+        <a-form-model-item label="添加品类" prop="productType">
+          <chooseTypeList :dataSource="dataList"></chooseTypeList>
+        </a-form-model-item>
+      </a-form-model>
+      <div class="btn-cont">
+        <a-button id="chooseType-modal-back" @click="isShow = false" >取消</a-button>
+        <a-button type="primary" style="margin-left: 15px;" id="chooseType-modal-save" @click="handleSave">确定</a-button>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { serviceCenterAdd } from '@/api/serviceCenter'
+import chooseTypeList from './chooseTypeList.vue'
+import { VSelect } from '@/components'
+export default {
+  name: 'ChooseTypeModal',
+  components: { chooseTypeList, VSelect },
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    dataList: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      spinning: false,
+      formItemLayout: {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 18 }
+      },
+      form: {
+        serviceCenterSn: undefined, // 经销商sn
+        serviceCenterName: undefined// 经销商名称
+      },
+      rules: {
+        priceLevel: [
+          { required: true, message: '请选择价格等级', trigger: 'change' }
+        ],
+        productType: [
+          { required: true, message: '请选择产品品类', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    // 选择经销商
+    dealerChange (val) {
+      this.form.serviceCenterSn = val.key
+      this.form.serviceCenterName = val.key ? (val.label.replace('\n', '')).trim() : ''
+    },
+    //  保存
+    handleSave () {
+      const _this = this
+      _this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const formData = JSON.parse(JSON.stringify(_this.form))
+          _this.spinning = true
+          serviceCenterAdd(formData).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.$emit('ok')
+              _this.isShow = false
+              _this.spinning = false
+            } else {
+              _this.spinning = false
+            }
+          })
+        } else {
+          return false
+        }
+      })
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .chooseType-modal{
+    .ant-modal-body {
+      padding: 40px 40px 24px;
+    }
+    .btn-cont {
+      text-align: center;
+      margin: 35px 0 10px;
+    }
+    .tree-node{
+      height: 300px;
+      overflow: auto;
+      .tree-box{
+        .tree-parent{
+          display: flex;
+          align-items: center;
+          border-bottom: 1px solid #eee;
+          padding: 0 10px;
+          > span{
+            margin:0 5px;
+            &:first-child{
+              flex-grow: 1;
+            }
+            &:last-child{
+              cursor: pointer;
+            }
+          }
+        }
+        .tree-child{
+          padding: 10px 10px 10px 35px;
+          display: flex;
+          align-items: center;
+          flex-wrap:wrap ;
+          > div{
+            margin:0 5px;
+          }
+        }
+      }
+
+    }
+  }
+</style>

+ 344 - 0
src/views/dealerManagement/merchantInfoManagement/permissionSettingNew.vue

@@ -0,0 +1,344 @@
+<template>
+  <div class="permissionSetting-wrap">
+    <a-spin :spinning="spinning" tip="Loading...">
+      <a-page-header :ghost="false" :backIcon="false" @back="handleBack" class="permissionSetting-cont">
+        <!-- 自定义的二级文字标题 -->
+        <template slot="subTitle">
+          <a id="permissionSetting-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
+          <span style="margin-left: 20px;color: #666;">经销商:{{ $route.params.name }}</span>
+        </template>
+      </a-page-header>
+      <a-card size="small" :bordered="false" class="permissionSetting-main">
+        <!-- 搜索条件 -->
+        <div ref="tableSearch" class="table-page-search-wrapper">
+          <a-form-model
+            id="permissionSetting-form"
+            ref="ruleForm"
+            class="form-model-con"
+            layout="inline"
+            :model="queryParam"
+            @keyup.enter.native="handleSearch">
+            <a-row :gutter="15">
+              <a-col :md="6" :sm="24">
+                <a-form-model-item label="品牌" prop="goodsBrand">
+                  <ProductBrand id="chooseProducts-productBrandSn" v-model="queryParam.productBrandSn"></ProductBrand>
+                </a-form-model-item>
+              </a-col>
+              <a-col :md="6" :sm="24">
+                <a-form-model-item label="产品分类" prop="goodsType">
+                  <productTypeAll placeholder="请选择产品分类" @change="changeProductType" v-model="queryParam.productType" id="chooseProducts-productType"></productTypeAll>
+                </a-form-model-item>
+              </a-col>
+              <a-col :md="6" :sm="24">
+                <a-form-model-item label="价格级别" prop="goodsCode">
+                  <v-select code="PRODUCT_LEVEL" id="productLevelEdit-level" v-model="queryParam.level" allowClear placeholder="请选择价格级别"></v-select>
+                </a-form-model-item>
+              </a-col>
+              <a-col :md="6" :sm="24" style="margin-bottom: 10px;">
+                <a-button type="primary" @click="handleSearch" :disabled="disabled" id="permissionSetting-refresh">查询</a-button>
+                <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="permissionSetting-reset">重置</a-button>
+              </a-col>
+            </a-row>
+          </a-form-model>
+        </div>
+        <!-- 操作按钮 -->
+        <div class="table-operator">
+          <a-button id="permissionSetting-brand" type="primary" class="button-error" @click="chooseTModal">选择品类</a-button>
+          <!-- <a-button id="permissionSetting-type" type="primary" class="button-info" @click="choosePModal('CATEGORY')">选择产品分类</a-button>
+          <a-button id="permissionSetting-product" type="primary" class="button-success" @click="choosePModal('PRODUCT')">选择产品</a-button> -->
+        </div>
+        <!-- 列表 -->
+        <s-table
+          class="sTable fixPagination"
+          ref="table"
+          :style="{ height: tableHeight+84.5+'px' }"
+          size="small"
+          :rowKey="(record) => record.id"
+          :columns="columns"
+          :data="loadData"
+          :scroll="{ y: tableHeight }"
+          :defaultLoadData="false"
+          bordered>
+          <!-- 操作 -->
+          <template slot="action" slot-scope="text, record">
+            <a-button size="small" type="link" class="button-error" @click="handleDel(record)">删除</a-button>
+          </template>
+        </s-table>
+      </a-card>
+    </a-spin>
+    <!-- 选择产品品牌 -->
+    <chooseBrandModal :openModal="openBrandModal" :chooseData="chooseBrand" @close="openBrandModal=false" @ok="handleBrandOk" />
+    <!-- 选择产品分类 -->
+    <chooseTypeModal :openModal="openTypeModal" :dataList="detailDataList" @close="openTypeModal=false" @ok="handleTypeOk" />
+    <!-- 选择产品 -->
+    <chooseProductsModal
+      type="dealership"
+      :dealerSn="$route.params.sn"
+      :openModal="openProductsModal"
+      :chooseData="chooseProducts"
+      @close="openProductsModal=false"
+      @ok="handleProductsOk" />
+  </div>
+</template>
+
+<script>
+import { commonMixin } from '@/utils/mixin'
+import { STable, VSelect } from '@/components'
+import ChooseProductsModal from '@/views/common/chooseProductsModal.vue'
+import ChooseBrandModal from '@/views/common/chooseBrandModal.vue'
+import ChooseTypeModal from './chooseTypeModal.vue'
+import productTypeAll from '@/views/common/productTypeAll.js'
+import ProductBrand from '@/views/common/productBrand.js'
+import { dealerScopeList, dealerScopeSave, dealerScopeDel, dealerScopeQueryList } from '@/api/dealerScope'
+export default {
+  name: 'MerchantInfoManagementSet',
+  mixins: [commonMixin],
+  components: { STable, VSelect, ChooseProductsModal, ChooseBrandModal, ChooseTypeModal, productTypeAll, ProductBrand },
+  data () {
+    return {
+      spinning: false,
+      tableHeight: 0,
+      queryParam: { //  查询条件
+        goodsType: undefined,
+        goodsName: '',
+        goodsCode: '',
+        productBrandSn: undefined, //  产品品牌
+        productType: [],
+        productTypeSn1: '', //  产品一级分类
+        productTypeSn2: '', //  产品二级分类
+        productTypeSn3: '' //  产品三级分类
+      },
+      disabled: false, //  查询、重置按钮是否可操作
+      loading: false, //  表格加载中
+      columns: [
+        { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
+        { title: '品牌', dataIndex: 'createDate', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '一级分类', dataIndex: 'type', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '二级分类', dataIndex: 'goodsName', align: 'left', width: '20%', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '三级分类', dataIndex: 'product.name', align: 'left', width: '30%', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '价格级别', dataIndex: 'product.code', width: '10%', align: 'left', customRender: function (text) { return text || '--' } },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: '10%', align: 'center' }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        this.disabled = true
+        this.spinning = true
+        return dealerScopeList(Object.assign(parameter, this.queryParam, { dealerSn: this.$route.params.sn })).then(res => {
+          let data
+          if (res.status == 200) {
+            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
+              const goodsType = data.list[i].goodsType
+              data.list[i].type = goodsType == 'PRODUCT' ? '产品' : goodsType == 'BRAND' ? '品牌' : goodsType == 'CATEGORY' ? '分类' : '--'
+            }
+            this.disabled = false
+          }
+          this.spinning = false
+          return data
+        })
+      },
+      openBrandModal: false, //  选择产品品牌
+      openTypeModal: false, //  选择产品分类
+      openProductsModal: false, //  选择产品
+      chooseBrand: [], //  所选品牌
+      chooseProducts: [], //  所选产品
+      chooseType: [] //  所选分类
+    }
+  },
+  methods: {
+    // 查询
+    handleSearch () {
+      const _this = this
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          _this.$refs.table.refresh(true)
+        } else {
+          return false
+        }
+      })
+    },
+    // 选择品类
+    chooseTModal () {
+      this.openTypeModal = true
+    },
+    // 选择产品
+    choosePModal (type) {
+      const productList = []
+      const brandList = []
+      const typeList = []
+      dealerScopeQueryList({ dealerSn: this.$route.params.sn, goodsType: type }).then(res => {
+        if (res.status == 200) {
+          const data = res.data
+          data.map(item => {
+            if (item.goodsType == 'PRODUCT') {
+              productList.push(item)
+            } else if (item.goodsType == 'BRAND') {
+              brandList.push(item)
+            } else if (item.goodsType == 'CATEGORY') {
+              typeList.push(item)
+            }
+          })
+          if (type == 'PRODUCT') { //  选择产品
+            // this.chooseProducts = productList  //  包含先前所选产品
+            this.chooseProducts = [] //  不包含先前所选产品
+            this.openProductsModal = true
+          } else if (type == 'BRAND') { //  选择品牌
+            this.chooseBrand = brandList
+            this.openBrandModal = true
+          } else if (type == 'CATEGORY') { //  选择分类
+            this.chooseType = typeList
+            this.openTypeModal = true
+          }
+        }
+      })
+    },
+    //  产品分类  change
+    changeProductType (val, opt) {
+      this.queryParam.productTypeSn1 = val[0] ? val[0] : ''
+      this.queryParam.productTypeSn2 = val[1] ? val[1] : ''
+      this.queryParam.productTypeSn3 = val[2] ? val[2] : ''
+    },
+    // 品牌
+    handleBrandOk (obj) {
+      this.chooseBrand = obj
+      this.changeData('BRAND')
+    },
+    // 产品
+    handleProductsOk (obj) {
+      this.chooseProducts = obj
+      this.changeData('PRODUCT')
+    },
+    // 分类
+    handleTypeOk (obj) {
+      this.chooseType = obj
+      this.changeData('CATEGORY')
+    },
+    changeData (type) {
+      const _this = this
+      if (type == 'PRODUCT') { //  选择产品
+        if (_this.chooseProducts.length > 0) {
+          const snList = []
+          _this.chooseProducts.map(item => {
+            const productSn = item.productSn ? item.productSn : item.product.productSn ? item.product.productSn : ''
+            snList.push(productSn)
+          })
+          this.setData(snList, type)
+        }
+      } else if (type == 'BRAND') { //  选择品牌
+        if (_this.chooseBrand.length > 0) {
+          const snList = []
+          _this.chooseBrand.map(item => {
+            snList.push(item.brandSn)
+          })
+          this.setData(snList, type)
+        }
+      } else if (type == 'CATEGORY') { //  选择分类
+        if (_this.chooseType.length > 0) {
+          const snList = []
+          _this.chooseType.map(item => {
+            snList.push(item.productTypeSn)
+          })
+          this.setData(snList, type)
+        }
+      }
+    },
+    // 添加经销权
+    setData (snList, type) {
+      const _this = this
+      const params = {
+        dealerSn: _this.$route.params.sn,
+        goodsType: type,
+        goodsSnList: snList
+      }
+      _this.spinning = true
+      dealerScopeSave(params).then(res => {
+        if (res.status == 200) {
+          _this.$message.success(res.message)
+          _this.$refs.table.refresh(true)
+          _this.spinning = false
+        } else {
+          _this.spinning = false
+        }
+      })
+    },
+    // 删除
+    handleDel (row) {
+      const _this = this
+      this.$confirm({
+        title: '提示',
+        content: '确认要删除吗?',
+        centered: true,
+        onOk () {
+          _this.spinning = true
+          dealerScopeDel({ sn: row.dealerScopeSn }).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.$refs.table.refresh()
+              _this.spinning = false
+            } else {
+              _this.spinning = false
+            }
+          })
+        }
+      })
+    },
+    // 重置表单
+    resetSearchForm () {
+      this.queryParam.goodsType = undefined
+      this.queryParam.goodsName = ''
+      this.queryParam.goodsCode = ''
+      this.$refs.table.refresh(true)
+    },
+    // 返回
+    handleBack () {
+      this.$router.push({ path: '/dealerManagement/merchantInfoManagement/list', query: { closeLastOldTab: true } })
+    },
+    filterOption (input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      )
+    },
+    pageInit () {
+      const _this = this
+      this.$nextTick(() => { // 页面渲染完成后的回调
+        _this.setTableH()
+      })
+    },
+    setTableH () {
+      const tableSearchH = this.$refs.tableSearch.offsetHeight
+      this.tableHeight = window.innerHeight - tableSearchH - 292
+    }
+  },
+  watch: {
+    '$store.state.app.winHeight' (newValue, oldValue) { //  窗口变更时,需同时更改表格高度
+      this.setTableH()
+    }
+  },
+  mounted () {
+    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
+      this.$refs.table.refresh(true)
+      this.pageInit()
+    }
+  },
+  activated () {
+    // 如果是新页签打开或者进入新的子页(例:存在列表第2条数据编辑页页签时再打开第4条数据的编辑页),则重置当前页面
+    if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
+      this.$refs.table.refresh(true)
+      this.pageInit()
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {})
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .permissionSetting-wrap{
+    .permissionSetting-cont{
+      margin-bottom: 6px;
+    }
+  }
+</style>