| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229 |
- <template>
- <div>
- <ul class="flex space-x-2 rtl:space-x-reverse">
- <li>
- <a href="javascript:;" class=" hover:underline" @click="goHome">首页</a>
- </li>
- <li class="before:content-['/'] ltr:before:mr-2 rtl:before:ml-2 text-primary hover:underline">
- <span>订单列表</span>
- </li>
- </ul>
- <div class="panel pb-0 mt-6">
- <div class="flex md:items-center md:flex-row flex-col mb-5 gap-5">
- <div class="flex items-center gap-5 ltr:ml-auto rtl:mr-auto">
- <div class="dropdown">
- <Popper :placement="store.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'" offsetDistance="0"
- class="align-middle">
- <button type="button"
- class="flex items-center border font-semibold
- border-[#e0e6ed] dark:border-[#253b5c]
- rounded-md px-4 py-2 text-sm dark:bg-[#1b2e4b] dark:text-white-dark whitespace-nowrap">
- <span class="ltr:mr-1 rtl:ml-1 inline">选择</span>
- <icon-caret-down class="w-5 h-5" />
- </button>
- <!-- <button type="button"
- style="white-space: nowrap; flex-wrap: nowrap; display: flex; align-items: center; border: 1px solid #e0e6ed; border-radius: 4px; padding: 8px 16px; font-weight: 600; background-color: transparent; text-align: left; color: inherit;">
- <span style="margin-right: 8px;">选择</span>
- <i class="icon-caret-down" style="width: 5px; height: 5px;"></i>
- </button> -->
- <template #content>
- <ul class="whitespace-nowrap">
- <template v-for="(col, i) in cols" :key="i">
- <li>
- <div class="flex items-center px-4 py-1">
- <label class="cursor-pointer mb-0">
- <input type="checkbox" class="form-checkbox" :id="`chk-${i}`"
- :value="col.field" @change="col.hide = !$event.target.checked"
- :checked="!col.hide" />
- <span :for="`chk-${i}`" class="ltr:ml-2 rtl:mr-2">{{ col.title
- }}</span>
- </label>
- </div>
- </li>
- </template>
- </ul>
- </template>
- </Popper>
- </div>
- <div>
- <input v-model="search" type="text" class="form-input" placeholder="Search..." />
- </div>
- </div>
- </div>
- <div class="datatable">
- <vue3-datatable :rows="rows" :columns="cols" :totalRows="rows?.length" :sortable="true" :search="search"
- skin="whitespace-nowrap bh-table-hover"
- firstArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M13 19L7 12L13 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
- lastArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M11 19L17 12L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M6.99976 19L12.9998 12L6.99976 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> '
- previousArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M15 5L9 12L15 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
- nextArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M9 5L15 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'>
- <template #order_vo.order_time="data">
- {{ formatDate(data.value.order_vo.order_time) }}
- </template>
- <template #order_vo.member_id="data">
- {{ customerName(data.value.order_vo.member_id) }}
- </template>
- <template #warehouse_id="data">
- {{ warehouseName(data.value.warehouse_id) }}
- </template>
- <template #order_vo.pay_type="data">
- {{ collectingAccountName(data.value.order_vo.pay_type) }}
- </template>
- <template #order_vo.send_type="data">
- {{ deliveryName(data.value.order_vo.send_type) }}
- </template>
- <template #order_vo.status="data">
- {{ orderTypeName(data.value.order_vo.status) }}
- </template>
- <!-- 定义操作栏的模板 -->
- <template #actions="data">
- <button v-if="data.value.status !== 'SENDING'" @click="deliveryOrder(data)"
- class="btn btn-primary">发货</button>
- </template>
- <template #isActive="data">
- <!-- <span class="capitalize" :class="data.value.isActive ? 'text-success' : 'text-danger'">{{
- data._rawValue }}</span> -->
- </template>
- </vue3-datatable>
- <el-pagination class="p-2 flex justify-end dark:bg-[#0e1726]" v-model:current-page="params.page_no" :page-size="params.page_size" :small="true"
- layout="total, prev, pager, next" :total="totalRows" @size-change="handleSizeChange"
- @current-change="handleCurrentChange" />
- </div>
- </div>
- </div>
- </template>
- <script setup lang="ts">
- import { ref, onMounted } from 'vue';
- import Vue3Datatable from '@bhplugin/vue3-datatable';
- import { useAppStore } from '@/stores/index';
- import { useRouter } from 'vue-router';
- import { useMeta } from '@/composables/use-meta';
- import { orderApi, infoApi, dictionaryAPI } from '@/api/api'
- import IconBell from '@/components/icon/icon-bell.vue';
- import IconCaretDown from '@/components/icon/icon-caret-down.vue';
- useMeta({ title: 'Column Chooser Table' });
- const router = useRouter();
- const store = useAppStore();
- const search = ref('');
- const rows: any = ref([]); // 初始化rows为响应式引用
- const customerList: any = ref([])//初始化客户列表
- const warehouseList: any = ref([])//初始化客户列表
- const collectingAccountList: any = ref([])//初始化客户列表
- const deliveryList: any = ref([])//初始化客户列表
- const orderTypeList: any = ref([])//初始化客户列表
- const cols: any = ref([
- { field: 'sn', title: '订单编号', isUnique: true, hide: false },
- { field: 'order_vo.member_id', title: '客户', hide: false },
- { field: 'order_vo.order_time', title: '下单时间', hide: false },
- { field: 'warehouse_id', title: '仓库名称', hide: false },
- { field: 'order_vo.send_type', title: '配送方式', hide: false },
- { field: 'order_vo.pay_type', title: '付款方式', hide: false },
- /* { field: 'pay_price', title: '实付金额', hide: false }, */
- { field: 'order_vo.status', title: '订单状态', type: '', hide: true },
- /* { field: 'extension', title: '延期次数', type: '', hide: true },
- { field: 'type', title: '订单类型', type: '', hide: true }, */
- { field: 'actions', title: '操作', hide: false }
- ]);
- /* 处理订单时间格式 */
- const formatDate = (date) => {
- if (date) {
- const dt = new Date(date * 1000);
- const month = dt.getMonth() + 1 < 10 ? '0' + (dt.getMonth() + 1) : dt.getMonth() + 1;
- const day = dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate();
- return dt.getFullYear() + '/' + month + '/' + day;
- }
- return '';
- };
- /* 处理客户名称 */
- const customerName = (value) => {
- if (value && customerList.value && customerList.value.data && customerList.value.data.data) {
- const type = customerList.value.data.data.find(type => type.id === value);
- return type ? type.name : '';
- }
- }
- /* 仓库名称 */
- const warehouseName = (value) => {
- if (value && warehouseList.value && warehouseList.value.data) {
- const type = warehouseList.value.data.find(type => type.id === value);
- return type ? type.name : '';
- }
- }
- /* 支付列表*/
- const collectingAccountName = (value) => {
- if (value && collectingAccountList.value && collectingAccountList.value.data && collectingAccountList.value.data.data) {
- const type = collectingAccountList.value.data.data.find(type => type.id === value);
- return type ? type.name : '';
- }
- }
- /* 配送方式*/
- const deliveryName = (value) => {
- if (value && deliveryList.value && deliveryList.value.data && deliveryList.value.data.data) {
- const type = deliveryList.value.data.data.find(type => type.value === value);
- return type ? type.label : '';
- }
- }
- /* 订单状态*/
- const orderTypeName = (value) => {
- if (value && orderTypeList.value && orderTypeList.value.data && orderTypeList.value.data.data) {
- const type = orderTypeList.value.data.data.find(type => type.value === value);
- return type ? type.label : '';
- }
- }
- const params: any = ref([
- { page_no: 1, page_size: 10 }
- ])
- const totalRows: any = ref(0);
- const handleSizeChange = (val: number) => {
- console.log(`${val} items per page`)
- }
- const handleCurrentChange = (val: number) => {
- params.page_no = val
- getOrderList()
- console.log(`current page: ${val}`)
- }
- onMounted(() => {
- getOrderList()
- getInforList()
- });
- /* 获取订单列表的值 */
- const getOrderList = async () => {
- orderApi.orderList({ page_no:params.page_no,page_size:params.page_size, selectType: 'to_be_send' }).then((res: any) => {
- params.page_no = res.data.current
- params.page_size = res.data.size
- totalRows.value = res.data.total
- console.log(res);
- rows.value = res.data.records; // 更新rows的值
- });
- };
- /* 获取仓库,字典,客户信息 */
- const getInforList = async () => {
- warehouseList.value = await infoApi.warehouseList({})//获取仓库列表
- customerList.value = await infoApi.customer({})//获取客户列表
- collectingAccountList.value = await infoApi.collectingAccount({})//获取支付方式列表
- deliveryList.value = await dictionaryAPI.getPage({ dictType: "order_send_type" })//获取配送方式
- orderTypeList.value = await dictionaryAPI.getPage({ dictType: "Sale_order_send_status" })//获取订单状态
- }
- const deliveryOrder = async (row) => {
- router.replace({
- name: 'shippingPage',
- params: { id: row.value.id, send_type: row.value.order_vo.send_type }
- });
- }
- const goHome = () => {
- router.replace({
- name: 'home'
- });
- }
- </script>
- <style>
- .bh-pagination {
- display: none !important;
- }
- </style>
|