test.vue

<template>
  <div class="root">
    <table-with-filters
      :ref="tableFilter"
      :columns="columns"
      :sections="sections"
      :is-with-sortable="true"
      :is-with-pagination="true"
      :is-with-column-select="true"
      :table-props="tableProps"
      :table-query-request="tableQueryRequest"
      :full-page="true"
    />
  </div>
</template>
<script lang="ts">
import {
  Component,
  Vue,
  Ref,
} from 'vue-property-decorator'
import TableWithFilters from '@/components/table/tableWithFilter.vue'
import ExportProgressView from '@/widgets/exports/progress.vue'
import LoadingButton from '@/components/com-button/loadingButton.vue'
import API from '@/api/api'
import { time as timeCell } from '@/utils/tableCellFormatter'
import {
  timeRange,
} from '@/utils/formValueFormatter'
import {
  beforeNDaysStr,
  todayStr,
} from '@/utils/time'
import TransportControlFenceView from '@/views/tools/components/transportControlFenceView.vue'
import AuthButton from '@/widgets/auth/AuthButton.vue'
import UploadTemplate from '@/widgets/import/uploadTemplate.vue'

const today = todayStr()
const before2Days = beforeNDaysStr(2)

@Component({
  components: {
    TableWithFilters,
    ExportProgressView,
    LoadingButton,
    TransportControlFenceView,
    UploadTemplate,
    AuthButton,
  },
})
export default class TheBillCodeQuery extends Vue {
  name = 'TheBillCodeQuery'

  tableFilter = 'tableFilter'
  @Ref('tableFilter') readonly tableFilterRef!: Vue & TableWithFilters

  tableProps = {
    isSelectedColumnSave: true,
    selectedColumnSaveLabel: 'theBillCodeQueryTableColumns',
    customFilterLabel: 'theBillCodeQueryQueryFilter',
  }

  get columns(): ITableBasicColumn[] {
    return [
      {
        label: '委托书号',
        prop: 'transBookCode',
        width: 190,
      },
      {
        label: '运输任务编码',
        prop: 'transJobCode',
        width: 190,
      },
      {
        label: '运输任务项编码',
        prop: 'transJobItemCode',
        width: 190,
      },
      {
        label: '派车单编码',
        prop: 'transWorkCode',
        width: 190,
      },
      {
        label: '派车任务项编码',
        prop: 'transWorkItemCode',
        width: 90,
      },
      {
        label: '封车编码',
        prop: 'sealCarCode',
        width: 90,
      },
      {
        label: '车牌号',
        prop: 'vehicleNumber',
        width: 90,
      },
      {
        label: '承运商名称',
        prop: 'carrierName',
        width: 180,
      },
      {
        label: '车队名称',
        prop: 'carrierTeamName',
        minWidth: 100,
      },
      {
        label: '司机姓名',
        prop: 'endPerson',
        width: 120,
      },
      {
        label: '始发区域',
        prop: 'beginOrgName',
        width: 90,
      },
      {
        label: '始发省份',
        prop: 'beginProvinceName',
        width: 90,
      },
      {
        label: '始发城市',
        prop: 'beginCityName',
        width: 90,
      },
      {
        label: '始发网点',
        prop: 'beginNodeName',
        width: 90,
      },
      {
        label: '目的区域',
        prop: 'endOrgName',
        width: 90,
      },
      {
        label: '目的省份',
        prop: 'endProvinceName',
        width: 90,
      },
      {
        label: '目的城市',
        prop: 'endCityName',
        width: 90,
      },
      {
        label: '目的网点',
        prop: 'endNodeName',
        width: 90,
      },
      {
        label: '运单数',
        prop: 'waybillCount',
        width: 90,
      },
      {
        label: '包裹数',
        prop: 'packageCount',
        width: 90,
      },
      {
        label: '体积',
        prop: 'volume',
        width: 90,
      },
      {
        label: '预约提货时间',
        prop: 'requirePickupTime',
        formatter: timeCell,
        width: 200,
      },
      {
        label: '创建人',
        prop: 'createUserName',
        width: 200,
      },
      {
        label: '委托书全部签收时间',
        prop: 'signTime',
        formatter: timeCell,
        width: 200,
      },
      {
        label: '创建时间',
        prop: 'createTime',
        formatter: timeCell,
        width: 90,
      },
      {
        label: '操作',
        prop: '',
        component: 'buttons',
        fixed: 'right',
        width: 80,
        props: {
          pingback: true,
          buttons: (row: any) => {
            const { transBookCode } = row
            const btns = [
              {
                text: '打印',
                onClick: () => {
                  window.open(
                    `http://jdi.tms.jdl.com/jdi/trans-book-bill/printNew?transBookCode=${transBookCode}&t=${Date.now()}`,
                    '_blank'
                  )
                },
              },
            ]
            return btns
          },
        },
      },
    ]
  }

  sections: IFilterSection[] = [
    {
      items: [
        {
          filterProps: {
            label: '委托书号',
            type: 'text',
          },
          filterName: 'transBookCode',
        },
        {
          filterProps: {
            label: '车牌号',
            type: 'text',
          },
          filterName: 'vehicleNumber',
        },
        {
          filterProps: {
            label: '派车单号',
            type: 'text',
          },
          filterName: 'transWorkCode',
        },
        {
          filterProps: {
            label: '派车明细号',
            type: 'text',
          },
          filterName: 'transWorkItemCode',
        },
        {
          filterProps: {
            label: '运输任务号',
            type: 'text',
          },
          filterName: 'transJobCode',
        },
        {
          filterProps: {
            label: '运输任务明细号',
            type: 'text',
          },
          filterName: 'transJobItemCode',
        },
        {
          filterProps: {
            label: '创建时间区间',
            type: 'time-range',
            defaultTime: ['00:00:00', '23:59:59'],
            defaultValue: [`${before2Days} 00:00:00`, `${today} 23:59:59`],
            formatter: timeRange,
          },
          filterName: 'createTime',
          rules: [
            {
              required: true,
              message: '请选择创建时间',
              trigger: 'change',
            },
          ],
        },
      ],
    },
  ]

  async tableQueryRequest(params: [IFormValues]) {
    params[0].beginNodeSubType = 218
    const res = await API.toolsQueryTransBook(params) as IResponseData<any[]>
    return res.data
  }

  refresh() {
    this.tableFilterRef.refreshTableData()
  }
}
</script>

<style lang="stylus" scoped>
>>>.table-action-slot
  .el-select
    width 220px
>>> .last-operation-line .el-form-item__label
  width 140px !important
</style>