city-gather-admin/src/views/xsb-manage/store-info/index.vue

<script setup lang="tsx">
import { NCollapse, NCollapseItem, NTag } from 'naive-ui';
import { commonStatus } from '@/constants/business';
import { fetchGetStoreList } from '@/service/api/xsb-manage/store-info';
import { useTable } from '@/components/zt/Table/hooks/useTable';
import { $t } from '@/locales';
const columns: NaiveUI.TableColumn<Api.Store.ShopDetail>[] = [
  {
    key: 'hbStationNo',
    title: '商家门店编码',
    width: 250,
    render: row => {
      return (
        <NCollapse>
          <NCollapseItem title={row.hbStationNo} name={`${row.hbStationId}hbStationNo`}>
            <div class={'ml-6'}>
              联系电话：<span class={'text-gray'}>{row.tel} </span>
            </div>
            <div class={'ml-6'}>
              联系人：<span class={'text-gray'}>{row.shopOwner} </span>
            </div>
            <div class={'ml-6'}>
              门店经度：<span class={'text-gray'}>{row.shopLng} </span>
            </div>
            <div class={'ml-6'}>
              门店维度：<span class={'text-gray'}>{row.shopLat} </span>
            </div>
            {/* <div class={'ml-6'}>
              时段接单量: <span class={'text-gray'}>{row.shopOwner} </span>
            </div> */}
          </NCollapseItem>
        </NCollapse>
      );
    }
  },
  {
    key: 'shopName',
    title: '门店名称',
    align: 'center',
    width: 200
  },
  {
    key: 'address',
    title: '地址',
    align: 'center',
    width: 200,
    render: row => {
      return (
        <div>
          {row.province}
          {row.city}
          {row.shopAddress}
        </div>
      );
    }
  },
  {
    key: 'runStatus',
    title: '经营状态',
    align: 'center',
    render: row => {
      const tagMap: Record<Api.Common.commonStatus, NaiveUI.ThemeColor> = {
        1: 'success',
        0: 'warning'
      };
      const status = row.runStatus || 0;
      const label = $t(commonStatus[status]);
      return <NTag type={tagMap[status]}>{label}</NTag>;
    }
  },
  {
    key: 'shopStatus',
    title: '营业状态',
    align: 'center',
    render: row => {
      const tagMap: Record<Api.Common.commonStatus, NaiveUI.ThemeColor> = {
        1: 'success',
        0: 'error'
      };
      const labelArr = ['停业中', '营业中'];
      const status = row.shopStatus || 0;
      const label = labelArr[status];
      return <NTag type={tagMap[status]}>{label}</NTag>;
    }
  },
  {
    key: 'businessTime',
    title: '营业时间',
    align: 'center',
    width: 200,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'notice',
    title: '门店公告',
    align: 'center',
    render: row => {
      return <div>{row.notice || '--'}</div>;
    }
  }
];

const [registerTable] = useTable({
  searchFormConfig: {
    schemas: [
      {
        label: '门店名称',
        component: 'NInput',
        field: 'shopName'
      },
      {
        field: 'hbStationNo',
        label: '商家门店编码',
        component: 'NInput'
      }
    ],
    inline: false,
    size: 'small',
    labelPlacement: 'left',
    isFull: false
  },
  tableConfig: {
    keyField: 'id',
    title: '门店信息',
    showAddButton: false
  }
});
</script>

<template>
  <LayoutTable>
    <ZTable :columns="columns" :show-table-action="false" :api="fetchGetStoreList" @register="registerTable"></ZTable>
  </LayoutTable>
</template>

<style scoped></style>