|
@@ -0,0 +1,232 @@
|
|
|
+<template>
|
|
|
+ <div class="categoryList-wrap">
|
|
|
+ <div ref="tableSearch" v-if="!showEmpty" 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="8" :sm="24">
|
|
|
+ <a-form-model-item label="品牌">
|
|
|
+ <ProductBrand v-model="queryParam.productBrandSn"></ProductBrand>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="8" :sm="24">
|
|
|
+ <a-form-model-item label="产品分类">
|
|
|
+ <ProductType placeholder="请选择产品分类" @change="changeProductType" v-model="productType"></ProductType>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="8" :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
|
|
|
+ border-y
|
|
|
+ v-show="!showEmpty"
|
|
|
+ :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 { waitDispatchDetailAllList } from '@/api/waitDispatchDetail'
|
|
|
+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: { ProductType, ProductBrand },
|
|
|
+ props: {
|
|
|
+ newLoading: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ maxHeight: {
|
|
|
+ type: [String, Number],
|
|
|
+ default: '300'
|
|
|
+ },
|
|
|
+ showHeader: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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: { // 查询条件
|
|
|
+ productBrandSn: undefined,
|
|
|
+ productTypeSn1: undefined,
|
|
|
+ productTypeSn2: undefined,
|
|
|
+ productTypeSn3: 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: '', key: 'acheck', width: 60, type: 'checkbox', align: 'center' },
|
|
|
+ // { title: '序号', field: 'no', key: 'a', width: 60, align: 'center', operationColumn: false },
|
|
|
+ { title: '品牌', field: 'productCode', key: 'b', width: 150, align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
|
|
|
+ { title: '一级分类', field: 'warehouseName', key: 'e', width: 150, align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
|
|
|
+ { title: '二级分类', field: 'productOrigUnit', width: 150, key: 'i', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
|
|
|
+ { title: '三级分类', field: 'productName', width: 150, key: 'm', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } }
|
|
|
+ ]
|
|
|
+ return arr
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 查询品类列表
|
|
|
+ handleSearch () {
|
|
|
+
|
|
|
+ },
|
|
|
+ // 产品分类 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.productBrandSn = undefined
|
|
|
+ this.queryParam.productTypeSn1 = undefined
|
|
|
+ this.queryParam.productTypeSn2 = undefined
|
|
|
+ this.queryParam.productTypeSn3 = undefined
|
|
|
+ this.productType = []
|
|
|
+ this.dataSource = []
|
|
|
+ this.clearSelectTable()
|
|
|
+ this.searchTable()
|
|
|
+ },
|
|
|
+ // 清空选项
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ async searchTable () {
|
|
|
+ this.selectedRowKeys = []
|
|
|
+ this.disableSelectedRowKeys = []
|
|
|
+ this.dataSource = []
|
|
|
+ this.disabled = true
|
|
|
+ this.spinning = true
|
|
|
+ const params = this.queryParam
|
|
|
+
|
|
|
+ // 带下推产品
|
|
|
+ const listData = await waitDispatchDetailAllList(params).then(res => res.data)
|
|
|
+ this.dataSource = listData
|
|
|
+ // 格式化数据
|
|
|
+ let f = 0
|
|
|
+ this.dataSource.map((item, i) => {
|
|
|
+ if (item.id.indexOf('promo-') >= 0) { f = f - 1 }
|
|
|
+ item.no = i + 1 + f
|
|
|
+ const productCode = (item.productEntity && item.productEntity.code) || (item.dealerProductEntity && item.dealerProductEntity.code)
|
|
|
+ const productName = (item.productEntity && item.productEntity.name) || (item.dealerProductEntity && item.dealerProductEntity.name)
|
|
|
+ const productOrigCode = (item.productEntity && item.productEntity.origCode) || (item.dealerProductEntity && item.dealerProductEntity.origCode)
|
|
|
+ const productOrigUnit = (item.productEntity && item.productEntity.unit) || (item.dealerProductEntity && item.dealerProductEntity.unit)
|
|
|
+ const warehouseName = item.dispatchBill && item.dispatchBill.warehouseName || ''
|
|
|
+ item.productCode = productCode || '--'
|
|
|
+ item.productName = productName || '--'
|
|
|
+ item.productOrigCode = productOrigCode == ' ' ? '--' : productOrigCode
|
|
|
+ item.productOrigUnit = productOrigUnit || '--'
|
|
|
+ item.warehouseName = warehouseName || '--'
|
|
|
+ })
|
|
|
+ this.showEmpty = this.dataSource.length <= 0
|
|
|
+ this.tableHeight = (this.showEmpty ? 300 : this.maxHeight) + 'px'
|
|
|
+ this.spinning = false
|
|
|
+ this.disabled = false
|
|
|
+ },
|
|
|
+ pageInit (productForm, detailData) {
|
|
|
+ this.productForm = Object.assign(this.productForm, productForm)
|
|
|
+ this.detailData = detailData
|
|
|
+ // 获取列表
|
|
|
+ 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>
|