|
@@ -1,196 +0,0 @@
|
|
|
-<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="6" :sm="24">
|
|
|
- <a-form-item label="品牌分类">
|
|
|
- <v-select
|
|
|
- code="BRAND_TYPE"
|
|
|
- id="inventoryQueryList-productBrandType"
|
|
|
- v-model="queryParam.productBrandType"
|
|
|
- allowClear
|
|
|
- placeholder="请选择品牌分类"></v-select>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :md="6" :sm="24">
|
|
|
- <a-form-item label="产品品牌">
|
|
|
- <ProductBrand id="inventoryQueryList-productBrandSn" v-model="queryParam.productBrandSn"></ProductBrand>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :md="6" :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="6" :sm="24">
|
|
|
- <a-button type="primary" @click="getTableData" :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="no"
|
|
|
- :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 ProductType from '@/views/common/productType.js'
|
|
|
-import ProductBrand from '@/views/common/productBrand.js'
|
|
|
-import { Empty } from 'ant-design-vue'
|
|
|
-import { queryWaitingData } from '@/api/dealerScope'
|
|
|
-import { VSelect } from '@/components'
|
|
|
-export default {
|
|
|
- name: 'DetailProductList',
|
|
|
- mixins: [commonMixin],
|
|
|
- components: { ProductType, ProductBrand, VSelect },
|
|
|
- props: {
|
|
|
- maxHeight: {
|
|
|
- type: [String, Number],
|
|
|
- default: '300'
|
|
|
- }
|
|
|
- },
|
|
|
- data () {
|
|
|
- return {
|
|
|
- spinning: false,
|
|
|
- disabled: false,
|
|
|
- showEmpty: false,
|
|
|
- tableHeight: this.maxHeight,
|
|
|
- showTableHead: true, // 显示表头
|
|
|
- chooseDataList: [],
|
|
|
- selectedRowKeys: [],
|
|
|
- queryParam: {
|
|
|
- productBrandType: undefined,
|
|
|
- productBrandSn: undefined,
|
|
|
- productTypeSn1: undefined, // 产品一级分类
|
|
|
- productTypeSn2: undefined, // 产品二级分类
|
|
|
- productTypeSn3: undefined // 产品三级分类
|
|
|
- },
|
|
|
- productType: [],
|
|
|
- simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
|
|
|
- dataSource: []
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- columns () {
|
|
|
- const arr = [
|
|
|
- { title: '', field: '', key: 'acheck', width: 60, type: 'checkbox', align: 'center' },
|
|
|
- { title: '品牌', field: 'productBrandName', key: 'a', align: 'center', width: 160, operationColumn: false, renderBodyCell: ({ row, column }) => { return row[column.field] || '--' } },
|
|
|
- { title: '一级分类', field: 'productTypeName1', key: 'b', width: 160, align: 'center', operationColumn: false, renderBodyCell: ({ row, column }) => { return row[column.field] || '--' } },
|
|
|
- { title: '二级分类', field: 'productTypeName2', key: 'c', width: 160, align: 'center', operationColumn: false, renderBodyCell: ({ row, column }) => { return row[column.field] || '--' } },
|
|
|
- { title: '三级分类', field: 'productTypeName3', key: 'd', width: 160, align: 'center', operationColumn: false, renderBodyCell: ({ row, column }) => { return row[column.field] || '--' } }
|
|
|
- ]
|
|
|
- return arr
|
|
|
- },
|
|
|
- checkboxOption () {
|
|
|
- return {
|
|
|
- selectedRowKeys: this.selectedRowKeys,
|
|
|
- // 行选择改变事件
|
|
|
- selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
|
|
|
- const selectedRowKeysInfo = selectedRowKeys.map(item => {
|
|
|
- return { productBrandSn: this.dataSource[item - 1].productBrandSn,
|
|
|
- productTypeSn1: this.dataSource[item - 1].productTypeSn1,
|
|
|
- productTypeSn2: this.dataSource[item - 1].productTypeSn2,
|
|
|
- productTypeSn3: this.dataSource[item - 1].productTypeSn3 }
|
|
|
- })
|
|
|
- this.selectedRowKeys = selectedRowKeys
|
|
|
- this.chooseDataList = selectedRowKeysInfo
|
|
|
- },
|
|
|
- // 全选改变事件
|
|
|
- selectedAllChange: ({ isSelected, selectedRowKeys }) => {
|
|
|
- const selectedRowKeysInfo = selectedRowKeys.map(item => {
|
|
|
- return { productBrandSn: this.dataSource[item - 1].productBrandSn,
|
|
|
- productTypeSn1: this.dataSource[item - 1].productTypeSn1,
|
|
|
- productTypeSn2: this.dataSource[item - 1].productTypeSn2,
|
|
|
- productTypeSn3: this.dataSource[item - 1].productTypeSn3 }
|
|
|
- })
|
|
|
- this.selectedRowKeys = selectedRowKeys
|
|
|
- this.chooseDataList = selectedRowKeysInfo
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getTableData () {
|
|
|
- const _this = this
|
|
|
- _this.spinning = true
|
|
|
- _this.disabled = true
|
|
|
- const ajaxData = JSON.parse(JSON.stringify(_this.queryParam))
|
|
|
- ajaxData.dealerSn = _this.$route.params.sn
|
|
|
- queryWaitingData(ajaxData).then(res => {
|
|
|
- if (res.status == 200 && res.data && res.data.length > 0) {
|
|
|
- for (var i = 0; i < res.data.length; i++) {
|
|
|
- res.data[i].no = i + 1
|
|
|
- }
|
|
|
- _this.dataSource = res.data
|
|
|
- } else {
|
|
|
- _this.dataSource = []
|
|
|
- }
|
|
|
- _this.showEmpty = _this.dataSource.length <= 0
|
|
|
- _this.tableHeight = (_this.showEmpty ? 300 : _this.maxHeight) + 'px'
|
|
|
- _this.spinning = false
|
|
|
- _this.disabled = false
|
|
|
- })
|
|
|
- },
|
|
|
- resetSearchForm () {
|
|
|
- this.queryParam = {
|
|
|
- productBrandType: undefined,
|
|
|
- productBrandSn: undefined,
|
|
|
- productTypeSn1: undefined, // 产品一级分类
|
|
|
- productTypeSn2: undefined, // 产品二级分类
|
|
|
- productTypeSn3: undefined // 产品三级分类
|
|
|
- }
|
|
|
- this.productType = []
|
|
|
- this.getTableData()
|
|
|
- this.clearSelectTable()
|
|
|
- },
|
|
|
- changeProductType (val, opt) {
|
|
|
- this.queryParam.productTypeSn1 = val[0] ? val[0] : undefined
|
|
|
- this.queryParam.productTypeSn2 = val[1] ? val[1] : undefined
|
|
|
- this.queryParam.productTypeSn3 = val[2] ? val[2] : undefined
|
|
|
- },
|
|
|
- // 清空选项
|
|
|
- clearSelectTable () {
|
|
|
- this.selectedRowKeys = []
|
|
|
- this.chooseDataList = []
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
- .empty-data{
|
|
|
- color: #999;
|
|
|
- text-align: center;
|
|
|
- padding: 20px;
|
|
|
- border:1px solid #eee;
|
|
|
- }
|
|
|
- /* 修改表格多选框颜色 */
|
|
|
- /deep/.ve-checkbox .ve-checkbox-checked .ve-checkbox-inner {
|
|
|
- background-color: #ed1c24 !important;
|
|
|
- border-color: #ed1c24 !important;
|
|
|
- }
|
|
|
- /deep/.ve-checkbox .ve-checkbox-indeterminate .ve-checkbox-inner::after{
|
|
|
- background-color: #ed1c24 !important;
|
|
|
- }
|
|
|
-</style>
|