修复：AdvanceTable 组件异步获取列配置不生效的问题；:bug: #159 #160 #161 fix: the async configu...

chenghongxing

2020-11-29 31e22aaf0ee304039dccee6908f7948b243041e4

修复：AdvanceTable 组件异步获取列配置不生效的问题；:bug: #159 #160 #161
fix: the async configuration of columns not to take effect in AdvanceTable.vue;

 src/components/table/advance/ActionColumns.vue

@@ -49,18 +49,16 @@
      checkedCounts(val) {
        this.checkAll = val === this.columns.length
        this.indeterminate = val > 0 && val < this.columns.length
      },
      columns(newVal, oldVal) {
        if (newVal != oldVal) {
          this.checkedCounts = newVal.length
          this.formatColumns(newVal)
        }
      }
    },
    created() {
      this.$emit('update:visibleColumns', [...this.columns])
      for (let col of this.columns) {
        if (col.visible === undefined) {
          this.$set(col, 'visible', true)
        }
        if (!col.visible) {
          this.checkedCounts -= 1
        }
      }
      this.formatColumns(this.columns)
    },
    methods: {
      onCheckChange(e, col) {
@@ -126,6 +124,16 @@
            conditions[col.dataIndex] = col.search.value
          })
        return conditions
      },
      formatColumns(columns) {
        for (let col of columns) {
          if (col.visible === undefined) {
            this.$set(col, 'visible', true)
          }
          if (!col.visible) {
            this.checkedCounts -= 1
          }
        }
      }
    }
  }

 src/components/table/advance/AdvanceTable.vue

@@ -32,7 +32,7 @@
      </div>
    </div>
    <a-table
      v-bind="{...$options.propsData, columns: visibleColumns, title: undefined, loading: false}"
      v-bind="{...this.$props, columns: visibleColumns, title: undefined, loading: false}"
      :size="sSize"
      @expandedRowsChange="onExpandedRowsChange"
      @change="onChange"

 src/components/table/advance/SearchArea.vue

@@ -7,7 +7,10 @@
          {{col.title}}:
        </template>
        <slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
        <a-switch @change="onSwitchChange(col)" class="switch" v-model="col.search.value" size="small" checked-children="是" un-checked-children="否" />
        <a-switch @change="onSwitchChange(col)" class="switch" v-model="col.search.value" size="small"
                  :checked-children="(col.search.switchOptions && col.search.switchOptions.checkedText) || '是'"
                  :un-checked-children="(col.search.switchOptions && col.search.switchOptions.uncheckedText) || '否'"
        />
        <a-icon v-if="col.search.value !== undefined" class="close" @click="e => onCloseClick(e, col)" type="close-circle" theme="filled" />
      </div>
      <div v-else-if="col.dataType === 'time'" :class="['title', {active: col.search.value}]">
@@ -70,12 +73,14 @@
    props: ['columns', 'formatConditions'],
    inject: ['table'],
    created() {
      this.columns.forEach(item => {
        this.$set(item, 'search', {...item.search, visible: false, value: undefined, format: this.getFormat(item)})
      })
      console.log(this.columns)
      this.formatColumns(this.columns)
    },
    watch: {
      columns(newVal, oldVal) {
        if (newVal != oldVal) {
          this.formatColumns(newVal)
        }
      },
      searchCols(newVal, oldVal) {
        if (newVal.length != oldVal.length) {
          const newConditions = this.getConditions(newVal)
@@ -218,6 +223,11 @@
          return true
        }
        return false
      },
      formatColumns(columns) {
        columns.forEach(item => {
          this.$set(item, 'search', {...item.search, visible: false, value: undefined, format: this.getFormat(item)})
        })
      }
    }
  }

 src/mock/goods/index.js

@@ -49,3 +49,58 @@
    }
  }
})

const columnsConfig = [
  {
    title: '商品名称',
    dataIndex: 'name',
    searchAble: true
  },
  {
    title: '订单号',
    dataIndex: 'orderId'
  },
  {
    searchAble: true,
    dataIndex: 'status',
    dataType: 'select',
    slots: {title: 'statusTitle'},
    scopedSlots: {customRender: 'status'},
    search: {
      selectOptions: [
        {title: '已下单', value: 1},
        {title: '已付款', value: 2},
        {title: '已审核', value: 3},
        // {title: '已发货', value: 4}
      ]
    }
  },
  {
    title: '发货',
    searchAble: true,
    dataIndex: 'send',
    dataType: 'boolean',
    scopedSlots: {customRender: 'send'}
  },
  {
    title: '发货时间',
    dataIndex: 'sendTime',
    dataType: 'datetime'
  },
  {
    title: '下单日期',
    searchAble: true,
    dataIndex: 'orderDate',
    dataType: 'date',
    visible: false
  },
  {
    title: '审核时间',
    dataIndex: 'auditTime',
    dataType: 'time',
  },
]

Mock.mock(`${process.env.VUE_APP_API_BASE_URL}/columns`, 'get', () => {
  return columnsConfig
})

 src/pages/components/table/Table.vue

@@ -90,24 +90,19 @@
            searchAble: true,
            dataIndex: 'send',
            dataType: 'boolean',
            scopedSlots: {customRender: 'send'}
          },
          {
            title: '发货时间',
            dataIndex: 'sendTime',
            dataType: 'datetime'
          },
          {
            title: '下单日期',
            searchAble: true,
            dataIndex: 'orderDate',
            dataType: 'date'
            scopedSlots: {customRender: 'send'},
            search: {
              switchOptions: {
                checkedText: '开',
                uncheckedText: '关'
              }
            }
          },
          {
            title: '审核时间',
            dataIndex: 'auditTime',
            dataType: 'time',
          },
          }
        ],
        dataSource: [],
        conditions: {}
@@ -115,6 +110,7 @@
    },
    created() {
      this.getGoodList()
      this.getColumns()
    },
    methods: {
      getGoodList() {
@@ -129,8 +125,12 @@
          this.loading = false
        })
      },
      getColumns() {
        ds.goodsColumns().then(res => {
          this.columns = res.data
        })
      },
      onSearch(conditions, searchOptions) {
        console.log(conditions)
        console.log(searchOptions)
        this.page = 1
        this.conditions = conditions

 src/services/api.js

@@ -6,4 +6,5 @@
  LOGIN: `${BASE_URL}/login`,
  ROUTES: `${BASE_URL}/routes`,
  GOODS: `${BASE_URL}/goods`,
  GOODS_COLUMNS: `${BASE_URL}/columns`,
}

 src/services/dataSource.js

@@ -1,8 +1,12 @@
import {GOODS} from './api'
import {GOODS, GOODS_COLUMNS} from './api'
import {METHOD, request} from '@/utils/request'

export async function goodsList(params) {
  return request(GOODS, METHOD.GET, params)
}

export default {goodsList}
export async function goodsColumns() {
  return request(GOODS_COLUMNS, METHOD.GET)
}

export default {goodsList, goodsColumns}