123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260 |
- <template>
- <div class="categoryList-wrap">
- <div ref="tableSearch" v-if="showTable" class="table-page-search-wrapper">
- <a-form-model
- 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-item label="品牌分类">
- <v-select
- code="BRAND_TYPE"
- v-model="queryParam.productBrandType"
- allowClear
- placeholder="请选择品牌分类"></v-select>
- </a-form-item>
- </a-col>
- <a-col :md="6" :sm="24">
- <a-form-model-item label="品牌">
- <ProductBrand v-model="queryParam.productBrandSn"></ProductBrand>
- </a-form-model-item>
- </a-col>
- <a-col :md="6" :sm="24">
- <a-form-model-item label="产品分类">
- <ProductType placeholder="请选择产品分类" @change="changeProductType" v-model="productType"></ProductType>
- </a-form-model-item>
- </a-col>
- <a-col :md="6" :sm="24" style="margin-bottom: 10px;">
- <a-button type="primary" @click="handleSearch">查询</a-button>
- <a-button style="margin-left: 5px" @click="resetSearchForm">重置</a-button>
- </a-col>
- </a-row>
- </a-form-model>
- </div>
- <a-spin :spinning="spinning" tip="Loading...">
- <ve-table
- v-show="!showEmpty"
- border-y
- :scroll-width="0"
- :max-height="tableHeight"
- :row-style-option="{clickHighlight: true}"
- :cellSelectionOption="{enable: false}"
- :virtual-scroll-option="{enable: true}"
- :columns="columns"
- :table-data="dataSource"
- row-key-field-name="id"
- :cell-style-option="cellStyleOption"
- :checkbox-option="checkboxOption"
- />
- <div v-show="showEmpty" class="empty-data"><a-empty description="暂无品类" :image="simpleImage"/></div>
- </a-spin>
- </div>
- </template>
- <script>
- import { commonMixin } from '@/utils/mixin'
- import { VSelect } from '@/components'
- import { dealerUpsPlQuery } from '@/api/dealer'
- import { Empty } from 'ant-design-vue'
- import ProductBrand from '@/views/common/productBrand.js'
- import ProductType from '@/views/common/productType.js'
- export default {
- name: 'DetailProductList',
- mixins: [commonMixin],
- components: { VSelect, ProductType, ProductBrand },
- props: {
- newLoading: {
- type: Boolean,
- default: false
- },
- maxHeight: {
- type: [String, Number],
- default: '300'
- },
- showTable: {
- type: Boolean,
- default: false
- }
- },
- data () {
- return {
- disabled: false, // 查询、重置按钮是否可操作
- spinning: false,
- simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
- dataSource: [],
- tableHeight: this.maxHeight,
- cellStyleOption: {
- bodyCellClass: ({ row, column, rowIndex }) => {
- if (row.id.indexOf('promo-') >= 0 && column.field === 'no') {
- return 'table-body-cell-no'
- }
- }
- },
- columnWidthResizeOption: {
- // default false
- enable: true,
- // column resize min width
- minWidth: 50
- },
- showEmpty: true,
- disableSelectedRowKeys: [],
- selectedRowKeys: [],
- productType: [],
- queryParam: { // 查询条件
- productBrandType: undefined,
- productBrandSn: undefined,
- productTypeSn1: undefined,
- productTypeSn2: undefined,
- productTypeSn3: undefined
- },
- dealerSn: undefined
- }
- },
- computed: {
- checkboxOption () {
- return {
- disableSelectedRowKeys: this.disableSelectedRowKeys,
- selectedRowKeys: this.selectedRowKeys,
- // 行选择改变事件
- selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
- this.selectedRowChange({ row, isSelected, selectedRowKeys })
- },
- // 全选改变事件
- selectedAllChange: ({ isSelected, selectedRowKeys }) => {
- this.selectedAllChange({ isSelected, selectedRowKeys })
- }
- }
- },
- columns () {
- const arr = [
- // { title: '序号', field: 'no', key: 'a', width: 60, align: 'center', operationColumn: false },
- { title: '', field: '', key: 'acheck', width: 40, type: 'checkbox', align: 'center' },
- { title: '品牌', field: 'productBrandName', key: 'b', width: 100, align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
- { title: '一级分类', field: 'productTypeName1', key: 'e', width: 180, align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
- { title: '二级分类', field: 'productTypeName2', width: 180, key: 'i', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
- { title: '三级分类', field: 'productTypeName3', width: 180, key: 'm', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } }
- ]
- return arr
- }
- },
- methods: {
- // 查询品类列表
- handleSearch () {
- if (this.detailData && this.detailData.upsPriceLevel && this.detailData.upsDealerSn) {
- this.searchTable()
- } else {
- this.$message.info('请选择上级经销商及其价格级别')
- }
- },
- // 产品分类 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] : ''
- },
- // 重置查询筛选表单
- resetSearchForm () {
- this.queryParam.productBrandType = undefined
- this.queryParam.productBrandSn = undefined
- this.queryParam.productTypeSn1 = undefined
- this.queryParam.productTypeSn2 = undefined
- this.queryParam.productTypeSn3 = undefined
- this.productType = []
- this.dataSource = []
- this.clearSelectTable()
- this.handleSearch()
- },
- // 清空选项
- clearSelectTable () {
- this.selectedRowKeys = []
- },
- // 选择单元格
- selectedRowChange ({ row, isSelected, selectedRowKeys }) {
- // console.log(row, isSelected, selectedRowKeys);
- this.selectedRowKeys = selectedRowKeys
- },
- // 全选行
- selectedAllChange ({ isSelected, selectedRowKeys }) {
- // console.log(isSelected, selectedRowKeys)
- this.selectedRowKeys = selectedRowKeys
- },
- // 获取已选数据
- getChooseData () {
- const result = []
- if (this.selectedRowKeys.length) {
- const rows = this.dataSource.filter(item => this.selectedRowKeys.includes(item.id))
- if (rows) {
- rows.map(item => {
- result.push({
- dealerSn: item.dealerSn,
- priceLevel: item.priceLevel,
- parentScopeSn: item.dealerScopeSn,
- productBrandSn: item.productBrandSn,
- productTypeSn1: item.productTypeSn1,
- productTypeSn2: item.productTypeSn2,
- productTypeSn3: item.productTypeSn3
- })
- })
- }
- }
- console.log(result)
- return result
- },
- async searchTable () {
- this.selectedRowKeys = []
- this.disableSelectedRowKeys = []
- this.dataSource = []
- this.disabled = true
- this.spinning = true
- const params = { ...this.detailData }
- params.dealerScope = { dealerSn: this.dealerSn, ...this.queryParam }
- console.log(params)
- // 品类列表
- const listData = await dealerUpsPlQuery(params).then(res => res.data)
- this.dataSource = listData
- // 格式化数据
- this.dataSource.map((item, i) => {
- item.no = i + 1
- })
- this.showEmpty = this.dataSource.length <= 0
- this.tableHeight = (this.showEmpty ? 0 : this.maxHeight) + 'px'
- this.spinning = false
- this.disabled = false
- },
- pageInit (detailData, dealerSn) {
- this.detailData = detailData
- this.dealerSn = dealerSn
- // 获取列表
- this.resetSearchForm()
- }
- }
- }
- </script>
- <style lang="less">
- .empty-data{
- color: #999;
- text-align: center;
- padding: 20px;
- }
- .ve-table-body-td{
- .active-title{
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 10px;
- background: #f3f8fa;
- }
- }
- .ve-table .ve-table-container .ve-table-content-wrapper table.ve-table-content tbody.ve-table-body tr.ve-table-body-tr td.table-body-cell-no,
- .ve-table .ve-table-container .ve-table-content-wrapper table.ve-table-content tbody.ve-table-body tr.ve-table-expand-tr td.table-body-cell-no{
- padding: 0;
- }
- .ve-table .ve-table-container .ve-table-content-wrapper{
- border-bottom: 1px solid #ddd;
- }
- </style>
|