MTP2.0_WEB/generate-code/templates/index.vue

<template>
  <!-- 提货查询 -->
  <div class="<%= code %>">
    <Filter @search="updateColumn" />
    <contextMenu :contextMenuList="btnList">
      <a-table :columns="columns"
               class="srcollYTable"
               :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }"
               :pagination="false"
               :expandedRowKeys="expandedRowKeys"
               :customRow="Rowclick"
               rowKey="key"
               :data-source="tableList">
        <!-- 额外的展开行 -->
        <template #expandedRowRender="{ record }">
          <BtnList :btnList="handleTableList(firstBtn, record)"
                   @onClick="btnClick(record)" />
        </template>
        <!-- 提货状态 -->
        <template #takeorderstatus="{ record }">
          <a>{{ getPickUpStateName(record.takeorderstatus) }}</a>
        </template>
        <!-- 提货/ 收货人-->
        <template #takemode="{ record }">
          <a>{{ getTakeStateName(record.takemode)}}</a>
        </template>

        <!-- 物流信息 -->
        <template #expresscompany="{ record }">
          <a>{{ record.expresscompany + "-" + record.expressnum}}</a>
        </template>

        <!-- 商品数量 -->
        <template #qty="{ record }">
          <a>{{ record.qty + record.enumdicname}}</a>
        </template>

        <!-- 地址 -->
        <template #address="{ record }">
          <a>{{ record.provincename + record.cityname + record.districtname + record.address}}</a>
        </template>

        <template #userinfotype="{ record }">
          <a>{{ record.userinfotype === 1 ? '个人' : '企业' }}</a>
        </template>
      </a-table>
    </contextMenu>
    <ControlModal :selectedRow="selectedRow"
                  @refresh="getData" />
  </div>
</template>

<script lang="ts">
import { defineComponent, initData, getTableColumns, getTableEvent, contextMenu, BtnList, _getBtnList, queryTableList } from '@/common/export/table';
import Filter from '../../compoments/filter/index.vue';
import { handleTableList } from './setup';
import ControlModal from './compoments/controlModal/index.vue';
import { QhjTradeGoodsPickup } from '@/services/go/ermcp/qhj/interface';
import { getPickUpStateName, getTakeStateName } from '@/common/constants/enumsName';
import { TableEventCB, BtnList as BtnListType } from '@/common/setup/table/interface';
import { ref } from 'vue';
import { queryTradeGoodsPickup } from '@/services/go/ermcp/qhj';

export default defineComponent({
    name: '<%= code %>',
    components: { Filter, contextMenu, BtnList, ControlModal },
    setup() {
        // 表头数据
        const { columns, registerColumn, updateColumn } = getTableColumns();
        // 表格操作按钮列表
        const [firstBtn] = _getBtnList('platinum_pick_query_tab', true).value;
        const btnList = ref<BtnListType[]>([]);
        const event: TableEventCB = {
            contextmenuCB: (record: QhjTradeGoodsPickup) => {
                btnList.value = handleTableList(firstBtn, record);
            },
        };
        // 表格事件
        const { expandedRowKeys, selectedRow, Rowclick, btnClick } = getTableEvent<QhjTradeGoodsPickup>(event);

        // 表格列表数据
        const { loading, tableList, queryTable } = queryTableList<QhjTradeGoodsPickup>();

        function getData() {
            // 获取列表数据
            queryTable(queryTradeGoodsPickup).then((res) => {
                tableList.value = res.map((el) => {
                    return { ...el, key: String(el.takeorderid) };
                });
            });
        }

        // 1:备货中  完成备货
        // 2:待取货(自提) 确认取货
        // 4:待收货(邮寄) 上传物流信息、确认收货
        initData(() => {
            // 获取列表数据
            getData();
            // 注册表头信息 过滤
            registerColumn('table_pcweb_qhj_pickup_query', ['reqtime', 'pickupgoodsname', 'takeorderstatus', 'goodsname']);
        });

        return {
            btnList,
            columns,
            getData,
            updateColumn,
            expandedRowKeys,
            selectedRow,
            Rowclick,
            firstBtn,
            loading,
            tableList,
            queryTable,
            btnClick,
            getPickUpStateName,
            getTakeStateName,
            handleTableList,
        };
    },
});
</script>

<style lang="less">
.<%= code % > {
}
</style>;