241019

src/views/shop/bookingCard/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingCard/index.vue

@@ -0,0 +1,336 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="applyId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <DealerApplyEdit
+        v-model:visible="showEdit"
+        :data="current"
+        @done="reload"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+<<<<<<< HEAD:src/views/shop/bookingCard/index.vue
+  import CardEdit from './components/cardEdit.vue';
+  import {
+    pageBookingCard,
+    removeBookingCard,
+    removeBatchBookingCard
+  } from '@/api/booking/bookingCard';
+  import type {
+    BookingCard,
+    BookingCardParam
+  } from '@/api/booking/bookingCard/model';
+  import { formatNumber } from 'ele-admin-pro/es';
+=======
+  import DealerApplyEdit from './components/dealerApplyEdit.vue';
+  import {
+    pageDealerApply,
+    removeDealerApply,
+    removeBatchDealerApply
+  } from '@/api/shop/dealerApply';
+  import type {
+    DealerApply,
+    DealerApplyParam
+  } from '@/api/shop/dealerApply/model';
+>>>>>>> origin/master:src/views/shop/dealerApply/index.vue
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+<<<<<<< HEAD:src/views/shop/bookingCard/index.vue
+  const selection = ref<BookingCard[]>([]);
+  // 当前编辑数据
+  const current = ref<BookingCard | null>(null);
+=======
+  const selection = ref<DealerApply[]>([]);
+  // 当前编辑数据
+  const current = ref<DealerApply | null>(null);
+>>>>>>> origin/master:src/views/shop/dealerApply/index.vue
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+<<<<<<< HEAD:src/views/shop/bookingCard/index.vue
+    return pageBookingCard({
+=======
+    return pageDealerApply({
+>>>>>>> origin/master:src/views/shop/dealerApply/index.vue
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '主键ID',
+      dataIndex: 'applyId',
+      key: 'applyId',
+      align: 'center',
+      width: 90
+    },
+    {
+      title: '用户ID',
+      dataIndex: 'userId',
+      key: 'userId',
+      align: 'center'
+    },
+    {
+      title: '姓名',
+      dataIndex: 'realName',
+      key: 'realName',
+      align: 'center'
+    },
+    {
+      title: '手机号',
+      dataIndex: 'mobile',
+      key: 'mobile',
+      align: 'center'
+    },
+    {
+      title: '推荐人用户ID',
+      dataIndex: 'refereeId',
+      key: 'refereeId',
+      align: 'center'
+    },
+    {
+      title: '申请方式(10需后台审核 20无需审核)',
+      dataIndex: 'applyType',
+      key: 'applyType',
+      align: 'center'
+    },
+    {
+      title: '申请时间',
+      dataIndex: 'applyTime',
+      key: 'applyTime',
+      align: 'center'
+    },
+    {
+      title: '审核状态 (10待审核 20审核通过 30驳回)',
+      dataIndex: 'applyStatus',
+      key: 'applyStatus',
+      align: 'center'
+    },
+    {
+      title: '审核时间',
+      dataIndex: 'auditTime',
+      key: 'auditTime',
+      align: 'center'
+    },
+    {
+      title: '驳回原因',
+      dataIndex: 'rejectReason',
+      key: 'rejectReason',
+      align: 'center'
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '修改时间',
+      dataIndex: 'updateTime',
+      key: 'updateTime',
+      align: 'center'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+<<<<<<< HEAD:src/views/shop/bookingCard/index.vue
+  const reload = (where?: BookingCardParam) => {
+=======
+  const reload = (where?: DealerApplyParam) => {
+>>>>>>> origin/master:src/views/shop/dealerApply/index.vue
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+<<<<<<< HEAD:src/views/shop/bookingCard/index.vue
+  const openEdit = (row?: BookingCard) => {
+=======
+  const openEdit = (row?: DealerApply) => {
+>>>>>>> origin/master:src/views/shop/dealerApply/index.vue
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+<<<<<<< HEAD:src/views/shop/bookingCard/index.vue
+  const remove = (row: BookingCard) => {
+    const hide = message.loading('请求中..', 0);
+    removeBookingCard(row.cardId)
+=======
+  const remove = (row: DealerApply) => {
+    const hide = message.loading('请求中..', 0);
+    removeDealerApply(row.applyId)
+>>>>>>> origin/master:src/views/shop/dealerApply/index.vue
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+<<<<<<< HEAD:src/views/shop/bookingCard/index.vue
+        removeBatchBookingCard(selection.value.map((d) => d.cardId))
+=======
+        removeBatchDealerApply(selection.value.map((d) => d.applyId))
+>>>>>>> origin/master:src/views/shop/dealerApply/index.vue
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+<<<<<<< HEAD:src/views/shop/bookingCard/index.vue
+  const customRow = (record: BookingCard) => {
+=======
+  const customRow = (record: DealerApply) => {
+>>>>>>> origin/master:src/views/shop/dealerApply/index.vue
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+<<<<<<< HEAD:src/views/shop/bookingCard/index.vue
+    name: 'BookingCard'
+=======
+    name: 'DealerApply'
+>>>>>>> origin/master:src/views/shop/dealerApply/index.vue
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/bookingCardPlan/components/bookingCardPlanEdit.vue

@@ -0,0 +1,212 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑会员卡类型' : '添加会员卡类型'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="会员卡名称" name="name">
+        <a-input
+          allow-clear
+          placeholder="请输入会员卡名称"
+          v-model:value="form.name"
+        />
+      </a-form-item>
+      <a-form-item label="标识" name="code">
+        <a-input
+          allow-clear
+          placeholder="请输入标识"
+          v-model:value="form.code"
+        />
+      </a-form-item>
+      <a-form-item label="备注" name="comments">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入描述"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+      <a-form-item label="状态" name="status">
+        <a-radio-group v-model:value="form.status">
+          <a-radio :value="0">显示</a-radio>
+          <a-radio :value="1">隐藏</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="排序号" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="修改时间" name="updateTime">
+        <a-input
+          allow-clear
+          placeholder="请输入修改时间"
+          v-model:value="form.updateTime"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import {
+    addBookingCardPlan,
+    updateBookingCardPlan
+  } from '@/api/booking/bookingCardPlan';
+  import { BookingCardPlan } from '@/api/booking/bookingCardPlan/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BookingCardPlan | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<BookingCardPlan>({
+    cardPlanId: undefined,
+    name: undefined,
+    code: undefined,
+    comments: undefined,
+    status: undefined,
+    sortNumber: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    updateTime: undefined
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    bookingCardPlanName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写会员卡类型名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value
+          ? updateBookingCardPlan
+          : addBookingCardPlan;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if (props.data.image) {
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            });
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingCardPlan/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingCardPlan/index.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="bookingCardPlanId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <BookingCardPlanEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import BookingCardPlanEdit from './components/bookingCardPlanEdit.vue';
+  import { pageBookingCardPlan, removeBookingCardPlan, removeBatchBookingCardPlan } from '@/api/booking/bookingCardPlan';
+  import type { BookingCardPlan, BookingCardPlanParam } from '@/api/booking/bookingCardPlan/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<BookingCardPlan[]>([]);
+  // 当前编辑数据
+  const current = ref<BookingCardPlan | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageBookingCardPlan({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'cardPlanId',
+      key: 'cardPlanId',
+      align: 'center',
+      width: 90,
+    },
+    {
+      title: '会员卡名称',
+      dataIndex: 'name',
+      key: 'name',
+      align: 'center',
+    },
+    {
+      title: '标识',
+      dataIndex: 'code',
+      key: 'code',
+      align: 'center',
+    },
+    {
+      title: '备注',
+      dataIndex: 'comments',
+      key: 'comments',
+      align: 'center',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+    },
+    {
+      title: '排序号',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '修改时间',
+      dataIndex: 'updateTime',
+      key: 'updateTime',
+      align: 'center',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: BookingCardPlanParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: BookingCardPlan) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: BookingCardPlan) => {
+    const hide = message.loading('请求中..', 0);
+    removeBookingCardPlan(row.bookingCardPlanId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchBookingCardPlan(selection.value.map((d) => d.bookingCardPlanId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: BookingCardPlan) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'BookingCardPlan'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/bookingCashier/components/cashier.vue

@@ -0,0 +1,190 @@
+<template>
+  <a-card
+    :title="`收银员：${loginUser?.realName}`"
+    :bordered="false"
+    :body-style="{ minHeight: '60vh', width: '380px', padding: '0' }"
+    :head-style="{ className: 'bg-gray-500' }"
+  >
+    <template #extra>
+      <a-button danger @click="removeAll" size="small">整单取消</a-button>
+    </template>
+    <div class="goods-list overflow-x-hidden px-3 h-[600px]">
+      <a-empty v-if="cashier?.totalNums === 0" :image="simpleImage" />
+      <a-spin :spinning="spinning">
+        <template v-for="(item, index) in cashier?.cashiers" :key="index">
+          <div class="goods-item py-4 flex">
+            <div class="goods-image" v-if="item.image">
+              <a-avatar :src="item.image" shape="square" :size="42" />
+            </div>
+            <div class="goods-info w-full ml-2">
+              <div class="goods-bar flex justify-between">
+                <div class="goods-name flex-1">{{ item.name }}</div>
+              </div>
+              <div class="spec text-gray-400">{{ item.spec }}</div>
+              <div class="goods-price flex justify-between items-center">
+                <div class="flex">
+                  <div class="price text-red-500">￥{{ item.price }}</div>
+                  <div class="total-num ml-5 text-gray-400"
+                    >x {{ item.cartNum }}</div
+                  >
+                </div>
+                <div class="add flex items-center text-gray-500">
+                  <MinusCircleOutlined class="text-xl" @click="subNum(item)" />
+                  <div class="block text-center px-3">{{ item.cartNum }}</div>
+                  <PlusCircleOutlined class="text-xl" @click="addNum(item)" />
+                </div>
+              </div>
+            </div>
+            <div class="total-nums"> </div>
+          </div>
+          <a-divider dashed />
+        </template>
+      </a-spin>
+    </div>
+    <template #actions>
+      <div class="flex flex-col">
+        <div class="text-left pb-4 pl-4 text-gray-500"
+          >共计 {{ cashier.totalNums }} 件，已优惠：￥0.00
+        </div>
+        <div class="flex justify-between px-2">
+          <a-button size="large" class="w-full mx-1" @click="getListByGroup"
+            >取单</a-button
+          >
+          <a-button size="large" class="w-full mx-1" @click="onPack"
+            >挂单</a-button
+          >
+          <a-button
+            type="primary"
+            class="w-full mx-1"
+            size="large"
+            @click="onPay"
+            >收款￥{{ formatNumber(cashier.totalPrice) }}
+          </a-button>
+        </div>
+      </div>
+    </template>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import {
+    DeleteOutlined,
+    PlusCircleOutlined,
+    MinusCircleOutlined,
+    ExclamationCircleOutlined
+  } from '@ant-design/icons-vue';
+  import { ref, watch, createVNode } from 'vue';
+  import { Cashier, CashierVo } from '@/api/shop/cashier/model';
+  import { User } from '@/api/system/user/model';
+  import { formatNumber } from 'ele-admin-pro/es';
+  import {
+    subCartNum,
+    addCartNum,
+    removeBatchCashier,
+    removeCashier,
+    packCashier
+  } from '@/api/shop/cashier';
+  import { Empty, Modal, message } from 'ant-design-vue';
+  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
+
+  const props = withDefaults(
+    defineProps<{
+      value?: string;
+      placeholder?: string;
+      loginUser?: User;
+      cashier?: CashierVo;
+      count?: number;
+      spinning?: boolean;
+    }>(),
+    {
+      placeholder: undefined
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'reload'): void;
+    (e: 'group'): void;
+    (e: 'pay'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const cashiers = ref<Cashier[]>([]);
+
+  /* 打开编辑弹窗 */
+  const onPay = () => {
+    emit('pay');
+  };
+
+  const subNum = (row: Cashier) => {
+    if (row.cartNum === 1) {
+      Modal.confirm({
+        title: '提示',
+        content: '确定要删除该商品吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+        maskClosable: true,
+        onOk: () => {
+          const hide = message.loading('请求中..', 0);
+          removeCashier(row?.id)
+            .then((msg) => {
+              hide();
+              message.success(msg);
+              emit('reload');
+            })
+            .catch((e) => {
+              hide();
+              message.error(e.message);
+            });
+        }
+      });
+      return false;
+    }
+    subCartNum(row).then(() => {
+      emit('reload');
+    });
+  };
+
+  const addNum = (row: Cashier) => {
+    addCartNum(row).then(() => {
+      emit('reload');
+    });
+  };
+
+  const removeAll = () => {
+    const ids = props.cashier?.cashiers?.map((d) => d.id);
+    if (ids) {
+      removeBatchCashier(ids)
+        .then(() => {})
+        .finally(() => {
+          emit('reload');
+        });
+    }
+  };
+
+  // 取单
+  const getListByGroup = () => {
+    emit('group');
+  };
+
+  // 挂单
+  const onPack = () => {
+    cashiers.value =
+      props.cashier?.cashiers?.map((d) => {
+        return {
+          id: d.id,
+          groupId: Number(d.groupId) + 1
+        };
+      }) || [];
+    if (cashiers.value.length === 0) {
+      return false;
+    }
+    packCashier(cashiers.value).then((res) => {
+      emit('reload');
+    });
+  };
+
+  watch(
+    () => props.count,
+    () => {}
+  );
+</script>

src/views/shop/bookingCashier/components/goods.vue

@@ -0,0 +1,256 @@
+<template>
+  <a-card
+    class="w-full relative"
+    :bordered="false"
+    :body-style="{ padding: '16px' }"
+  >
+    <a-spin :spinning="spinning">
+      <div class="flex leading-7 mb-6">
+        <div class="w-[202px] text-gray-500">选择场馆：</div>
+        <div class="list">
+          <a-radio-group v-model:value="where.merchantId" button-style="solid">
+            <a-radio-button
+              v-for="(item, index) in category"
+              :key="index"
+              :value="item.merchantId"
+              @click="onMerchant(item)"
+              >{{ item.merchantName }}</a-radio-button
+            >
+          </a-radio-group>
+        </div>
+      </div>
+
+      <div class="flex leading-7 mb-6">
+        <div class="w-[138px] text-gray-500">预定日期：</div>
+        <div class="list">
+          <a-radio-group v-model:value="where.dateTime" button-style="solid">
+            <a-radio-button
+              v-for="(item, index) in next7day"
+              :key="index"
+              :value="item.dateTime"
+              >{{ item.label }}</a-radio-button
+            >
+          </a-radio-group>
+        </div>
+      </div>
+      <!--      <div class="flex leading-7 mb-6">-->
+      <!--        <div class="w-[138px] text-gray-500">选择时段：</div>-->
+      <!--        <div class="list">-->
+      <!--          <a-radio-group v-model:value="where.timePeriod">-->
+      <!--            <a-radio-button-->
+      <!--              v-for="(item, index) in periods"-->
+      <!--              :key="index"-->
+      <!--              :value="item.merchantId"-->
+      <!--              @click="onMerchant(item)"-->
+      <!--              >{{ item.timePeriod }}</a-radio-button-->
+      <!--            >-->
+      <!--          </a-radio-group>-->
+      <!--        </div>-->
+      <!--      </div>-->
+      <div class="flex leading-7 mb-6">
+        <div class="w-[138px] text-gray-500">选择场地：</div>
+        <div class="list flex-1">
+          <template v-for="(item, index) in periodList" :key="index">
+            <div class="time-period leading-7 text-gray-500 mb-2">
+              <a-tag color="blue">
+                <template #icon>
+                  <ClockCircleOutlined />
+                </template>
+                {{ item.timePeriod }}</a-tag
+              >
+            </div>
+            <div class="field-list flex flex-wrap mb-2">
+              <a-button
+                class="w-[140px]"
+                v-for="(field, fieldIndex) in item.fieldList"
+                :key="fieldIndex"
+                :disabled="field.sold"
+                @click="add(field, item.timePeriod)"
+              >
+                <div class="flex justify-between">
+                  <text>{{ field.fieldName }}</text>
+                  <text>￥{{ item.price }}</text>
+                </div>
+              </a-button>
+            </div>
+          </template>
+          <!--          <div class="h-20 flex items-center m-auto w-full justify-center">-->
+          <!--            <a-pagination-->
+          <!--              v-model:current="page"-->
+          <!--              :total="count"-->
+          <!--              show-less-items-->
+          <!--              @change="reload"-->
+          <!--            />-->
+          <!--          </div>-->
+        </div>
+      </div>
+    </a-spin>
+    <!-- 编辑弹窗 -->
+    <SpecForm
+      v-model:visible="showSpecForm"
+      :data="current"
+      @done="addSpecField"
+    />
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import {
+    ShoppingCartOutlined,
+    ClockCircleOutlined
+  } from '@ant-design/icons-vue';
+  import SpecForm from './specForm.vue';
+  import { useRouter } from 'vue-router';
+  import { message } from 'ant-design-vue';
+  import { User } from '@/api/system/user/model';
+  import { listMerchant } from '@/api/shop/merchant';
+  import { getNext7day, getServerTime } from '@/api/layout';
+  import { getWeek } from '@/utils/common';
+  import {
+    listBookingPeriod
+  } from '@/api/booking/bookingPeriod';
+  import {
+    BookingPeriod,
+    BookingPeriodParam
+  } from '@/api/booking/bookingPeriod/model';
+  import { Merchant } from '@/api/shop/merchant/model';
+  import { BookingField } from '@/api/booking/bookingField/model';
+  import { addBookingCashier } from '@/api/booking/bookingCashier';
+
+  const { currentRoute } = useRouter();
+
+  withDefaults(
+    defineProps<{
+      value?: string;
+      placeholder?: string;
+      loginUser?: User;
+    }>(),
+    {
+      placeholder: undefined
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'reload'): void;
+  }>();
+
+  // 搜索表单
+  const where = reactive<BookingPeriodParam>({
+    merchantId: undefined,
+    merchantName: undefined,
+    dateTime: undefined,
+    week: undefined,
+    half: 0,
+    isStatus: 0,
+    startTime: undefined,
+    timePeriod: undefined
+  });
+
+  // 加载中状态
+  const spinning = ref<boolean>(true);
+  // 当前编辑数据
+  const current = ref<BookingField | null>(null);
+  const form = ref<BookingField>({});
+  const category = ref<Merchant[]>([]);
+  const periods = ref<BookingPeriod[]>([]);
+  const periodList = ref<BookingPeriod[] | null>();
+  const specs = ref<string>();
+  const showSpecForm = ref<boolean>(false);
+  const next7day = ref<any[]>();
+
+  /* 打开编辑弹窗 */
+  const openSpecForm = (row?: BookingField) => {
+    current.value = row ?? null;
+    showSpecForm.value = true;
+  };
+
+  const add = (row?: BookingField, timePeriod?: string) => {
+    if (row?.merchantId == 3028) {
+      form.value = row;
+      form.value.cartNum = 1;
+      openSpecForm(row);
+      return false;
+    }
+    addBookingCashier({
+      goodsId: row?.fieldId,
+      name: `${where.merchantName} ${row?.fieldName}`,
+      price: row?.price,
+      spec: `${where.dateTime} ${getWeek(where.week)} ${timePeriod}`,
+      cartNum: 1,
+      isNew: true,
+      selected: true,
+      merchantId: row?.merchantId
+    })
+      .then((res) => {
+        console.log(res);
+        emit('reload');
+      })
+      .catch(() => {
+        message.error('该场地已有人预定');
+      });
+  };
+
+  const addSpecField = () => {
+    emit('reload');
+  };
+
+  const onMerchant = (e) => {
+    where.merchantId = e.merchantId;
+    reload();
+  };
+
+  const reload = async () => {
+    spinning.value = true;
+    await getNext7day().then((list) => {
+      next7day.value = list.map((d: any, i) => {
+        if (where.dateTime == undefined) {
+          where.dateTime = d.dateTime;
+        }
+        if (where.week == undefined) {
+          where.week = d.week;
+        }
+        d.label = `${getWeek(d.week)}(${d.date})`;
+        return d;
+      });
+    });
+    await listMerchant({}).then((list) => {
+      category.value = list;
+      if (where.merchantId == undefined) {
+        where.merchantId = list[0].merchantId;
+        where.merchantName = list[0].merchantName;
+      }
+    });
+    await getServerTime().then((res) => {
+      if (where.merchantId != 3028) {
+        where.startTime = res.hourMinute;
+      }
+    });
+    // await pagePeriod({ merchantId: where.merchantId }).then((res) => {
+    //   if (res?.list) {
+    //     periods.value = res.list;
+    //   }
+    // });
+    await listBookingPeriod(where)
+      .then((list) => {
+        periodList.value = list;
+      })
+      .catch(() => {
+        periodList.value = [];
+      })
+      .finally(() => {
+        spinning.value = false;
+      });
+  };
+
+  reload();
+
+  watch(currentRoute, () => {}, { immediate: true });
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'PeriodField'
+  };
+</script>

src/views/shop/bookingCashier/components/group.vue

@@ -0,0 +1,155 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="1000"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :footer="null"
+    :title="isUpdate ? '取单' : '取单'"
+    :body-style="{
+      paddingTop: '10px',
+      paddingBottom: '38px',
+      backgroundColor: '#f3f3f3'
+    }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-space direction="vertical" class="w-full">
+      <div v-for="(item, index) in groups" :key="index">
+        <a-card
+          :title="`订单总价: ￥${formatNumber(item.totalPrice)}`"
+          :body-style="{ padding: '10px' }"
+        >
+          <div class="flex flex-wrap">
+            <div v-for="(v, i) in item.cashiers" :key="i" class="flex m-2">
+              <div class="item flex flex-col bg-gray-50 p-3 w-[215px]">
+                <text>{{ v.goodsName }}</text>
+                <text class="text-gray-400">规格：{{ v.spec }}</text>
+                <text class="text-gray-400">数量：{{ v.cartNum }}</text>
+                <text>小计：{{ v.totalPrice }}</text>
+              </div>
+            </div>
+          </div>
+          <!--          <div class="comments p-2 text-gray-400">-->
+          <!--            {{ item.comments }}-->
+          <!--          </div>-->
+          <template #actions>
+            <div class="text-left px-3">
+              <a-space>
+                <a-button type="primary" @click="getCashier(item.groupId)"
+                  >取单</a-button
+                >
+                <a-button danger type="primary" @click="remove(item.groupId)"
+                  >删除</a-button
+                >
+                <!--                <a-button>备注</a-button>-->
+              </a-space>
+            </div>
+          </template>
+        </a-card>
+      </div>
+    </a-space>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { addMpMenu, updateMpMenu } from '@/api/cms/mp-menu';
+  import { MpMenu } from '@/api/cms/mp-menu/model';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { getByGroup, listByGroupId, removeByGroup } from '@/api/shop/cashier';
+  import { formatNumber } from 'ele-admin-pro/es';
+  import { CashierVo } from '@/api/shop/cashier/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 类型 0服务 1订单
+    type?: number;
+    // 页面ID
+    pageId?: number;
+    // 修改回显的数据
+    data?: MpMenu | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  const pageId = ref(0);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  //
+  const groups = ref<CashierVo[]>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const getCashier = (groupId: number) => {
+    getByGroup(groupId).then(() => {
+      updateVisible(false);
+      emit('done');
+    });
+  };
+
+  const remove = (groupId: number) => {
+    removeByGroup(groupId).then(() => {
+      reload();
+    });
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          pageId: pageId.value
+        };
+        const saveOrUpdate = isUpdate.value ? updateMpMenu : addMpMenu;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  const reload = () => {
+    listByGroupId({}).then((data) => {
+      groups.value = data;
+    });
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        reload();
+      }
+    }
+  );
+</script>

src/views/shop/bookingCashier/components/pay.vue

@@ -0,0 +1,262 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="1000"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '支付结算' : '支付结算'"
+    okText="确定收款"
+    :ok-button-props="{ disabled: !user }"
+    :body-style="{
+      padding: '0',
+      paddingBottom: '0',
+      backgroundColor: '#f3f3f3'
+    }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <!--    {{ form }}-->
+    <div class="flex justify-between py-3 px-4 columns-3 gap-3">
+      <div class="payment flex flex-col bg-white px-4 py-2">
+        <div class="title text-gray-500 leading-10">请选择支付方式</div>
+        <template v-for="(item, index) in payments" :key="index">
+          <div
+            class="item border-2 border-solid px-3 py-1 flex items-center mb-2 cursor-pointer"
+            :class="
+              form.type === item.type
+                ? 'active border-red-300'
+                : 'border-gray-200'
+            "
+            @click="onType(item)"
+          >
+            <a-avatar :src="item.image" />
+            <text class="pl-1">{{ item.name }}</text>
+          </div>
+        </template>
+      </div>
+      <div class="settlement flex flex-col bg-white px-4 py-2 flex-1">
+        <div class="title text-gray-500 leading-10">结算信息</div>
+        <div class="comments">
+          <a-textarea
+            :rows="4"
+            :maxlength="200"
+            placeholder="备注信息"
+            v-model:value="form.comments"
+          />
+        </div>
+        <div class="discount flex mt-3">
+          <div class="item w-1/2">
+            折扣(折)
+            <div class="input">
+              <a-input-number
+                allow-clear
+                min="0"
+                max="10"
+                placeholder="请输入折扣"
+                style="width: 200px"
+                v-model:value="form.discount"
+                @input="onDiscount"
+              />
+            </div>
+          </div>
+          <div class="item w-1/2">
+            立减
+            <div class="input">
+              <a-input-number
+                allow-clear
+                placeholder="请输入立减金额"
+                style="width: 200px"
+                v-model:value="form.reducePrice"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="discount flex mt-8 items-center h-20 leading-10">
+          <div class="item w-1/2"> 优惠金额：￥0.00</div>
+          <div class="item w-1/2 text-xl">
+            实付金额：￥<span class="text-red-500 text-2xl">{{
+              formatNumber(data.totalPrice)
+            }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="user-bar flex flex-col bg-white px-4 py-2">
+        <div class="title text-gray-500 leading-10">会员信息</div>
+        <div class="user-info text-center" v-if="!user">
+          <a-empty :description="`当前为游客`" class="text-gray-300" />
+          <SelectUserByButton @done="selectUser" />
+        </div>
+        <view class="tox-user" v-if="user">
+          <div class="mb-2 flex justify-between items-center">
+            <div class="avatar">
+              <a-avatar :src="user.avatar" :size="40" />
+              <text class="ml-1 text-gray-500">{{ user.nickname }}</text>
+            </div>
+            <CloseOutlined @click="removeUser" />
+          </div>
+          <div
+            class="border-dashed py-1 px-2 border-gray-300 text-gray-500 mt-2"
+            >名称：{{ user.realName }}
+          </div>
+          <div
+            class="border-dashed py-1 px-2 border-gray-300 text-gray-500 mt-2"
+            >手机号：{{ user.mobile || '未绑定' }}
+          </div>
+          <div
+            class="border-dashed py-1 px-2 border-gray-300 text-gray-500 mt-2"
+            >可用余额：{{ user.balance }}
+          </div>
+          <div
+            class="border-dashed py-1 px-2 border-gray-300 text-gray-500 mt-2"
+            >可用积分：{{ user.points }}
+          </div>
+        </view>
+      </div>
+    </div>
+    <UserForm v-model:visible="showUserForm" :type="type" @done="reload" />
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { CloseOutlined } from '@ant-design/icons-vue';
+  import { ref, watch, reactive } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { formatNumber } from 'ele-admin-pro/es';
+  import { listPayment } from '@/api/system/payment';
+  import { Payment } from '@/api/system/payment/model';
+  import { User } from '@/api/system/user/model';
+  import { Cashier } from '@/api/shop/cashier/model';
+  import { addOrder, updateOrder } from '@/api/shop/order';
+  import { Order } from '@/api/shop/order/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 类型 0服务 1订单
+    type?: number;
+    // 修改回显的数据
+    data?: Cashier | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 用户信息
+  const form = reactive<Order>({
+    // ID
+    // 类型 0商城 1外卖
+    type: 4,
+    // 唯一标识
+    // 商品价格
+    price: undefined,
+    // 单商品合计
+    totalPrice: undefined,
+    // 商户ID
+    merchantId: undefined,
+    // 用户ID
+    userId: undefined,
+    // 租户id
+    tenantId: undefined,
+    // 创建时间
+    createTime: undefined,
+    // 修改时间
+    updateTime: undefined
+  });
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const disabled = ref<boolean>(true);
+  const payments = ref<Payment[]>();
+  const showUserForm = ref<boolean>(false);
+  const user = ref<User | null>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const selectUser = (item: User) => {
+    user.value = item;
+  };
+
+  const onType = (item: Payment) => {
+    form.type = item.type;
+  };
+
+  const removeUser = () => {
+    user.value = null;
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    loading.value = true;
+    const formData = {
+      ...form
+    };
+    const saveOrUpdate = isUpdate.value ? updateOrder : addOrder;
+    saveOrUpdate(formData)
+      .then((msg) => {
+        loading.value = false;
+        message.success(msg);
+        updateVisible(false);
+        emit('done');
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+  };
+
+  const reload = () => {
+    listPayment({}).then((data) => {
+      payments.value = data;
+    });
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        reload();
+      }
+    }
+  );
+</script>
+<style lang="less" scoped>
+  .active {
+    position: relative;
+    border: 2px solid #007cec;
+    &:before {
+      content: '';
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      border: 11px solid #007cec;
+      border-top-color: transparent;
+      border-left-color: transparent;
+    }
+    &:after {
+      content: '';
+      width: 4px;
+      height: 8px;
+      position: absolute;
+      right: 3px;
+      bottom: 4px;
+      border: 1px solid #fff;
+      border-top-color: transparent;
+      border-left-color: transparent;
+      transform: rotate(45deg);
+    }
+  }
+</style>

src/views/shop/bookingCashier/components/search.vue

@@ -0,0 +1,52 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" class="flex-wrap mb-5">
+    <a-input-search
+      allow-clear
+      size="large"
+      style="width: 400px"
+      placeholder="商品名称"
+      v-model:value="where.goodsName"
+      @pressEnter="handleSearch"
+      @search="handleSearch"
+    />
+    <a-button @click="handleSearch" size="large">搜索</a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { watch } from 'vue';
+  import useSearch from '@/utils/use-search';
+  import { GoodsParam } from '@/api/shop/goods/model';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GoodsParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 表单数据
+  const { where } = useSearch<GoodsParam>({
+    goodsId: undefined,
+    goodsName: undefined,
+    keywords: undefined
+  });
+
+  const handleSearch = () => {
+    emit('search', where);
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingCashier/components/specForm.vue

@@ -0,0 +1,235 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '选择场地' : '选择场地'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    {{ form }}
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="名称" name="goodsName">
+        {{ form.name }}
+      </a-form-item>
+      <a-form-item label="价格" name="price">
+        <div class="text-red-500">￥{{ formatNumber(form.price) }}</div>
+      </a-form-item>
+      <a-form-item
+        label="购买数量"
+        name="cartNum"
+        v-if="data.merchantId == 3028"
+      >
+        <a-input-number
+          :min="1"
+          :max="9999"
+          placeholder="请输入排序号"
+          v-model:value="form.cartNum"
+          @pressEnter="save"
+        />
+      </a-form-item>
+      <a-form-item v-if="form.specs === 1" label="规格" name="spec">
+        <template v-for="(item, index) in form?.goodsSpecValue" :key="index">
+          <div class="flex flex-col">
+            <span class="font-bold leading-8 text-gray-400">{{
+              item.value
+            }}</span>
+            <a-radio-group v-model:value="form.goodsSpecValue[index].spec">
+              <template v-for="(v, i) in item.detail" :key="i">
+                <a-radio-button :value="v">{{ v }}</a-radio-button>
+              </template>
+            </a-radio-group>
+          </div>
+        </template>
+      </a-form-item>
+      <a-form-item v-if="data.merchantId == 3028" label="规格" name="spec">
+        <template v-for="(item, index) in form?.goodsSpecValue" :key="index">
+          <div class="flex flex-col">
+            <span class="font-bold leading-8 text-gray-400">{{
+              item.value
+            }}</span>
+            <a-radio-group v-model:value="form.goodsSpecValue[index].spec">
+              <template v-for="(v, i) in item.detail" :key="i">
+                <a-radio-button :value="v">{{ v }}</a-radio-button>
+              </template>
+            </a-radio-group>
+          </div>
+        </template>
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject } from 'ele-admin-pro';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { Cashier } from '@/api/shop/cashier/model';
+  import { formatNumber } from 'ele-admin-pro/es';
+  import { addCashier, updateCashier } from '@/api/shop/cashier';
+  import { Field } from '@/api/booking/field/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 类型 0服务 1订单
+    type?: number;
+    // 修改回显的数据
+    data?: Field | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+  const spec = ref<string>();
+
+  // 用户信息
+  const form = reactive<Cashier>({
+    // ID
+    id: undefined,
+    // 类型 0商城 1外卖
+    type: undefined,
+    // 唯一标识
+    code: undefined,
+    // 商品ID
+    goodsId: undefined,
+    // 商品名称
+    goodsName: undefined,
+    // 商品封面图
+    image: undefined,
+    // 商品规格
+    spec: undefined,
+    // 商品价格
+    price: undefined,
+    // 商品数量
+    cartNum: undefined,
+    // 单商品合计
+    totalPrice: undefined,
+    // 0 = 未购买 1 = 已购买
+    isPay: undefined,
+    // 是否为立即购买
+    isNew: undefined,
+    // 是否选中
+    selected: undefined,
+    // 商户ID
+    merchantId: undefined,
+    // 用户ID
+    userId: undefined,
+    // 收银员ID
+    cashierId: undefined,
+    // 收银单分组ID
+    groupId: undefined,
+    // 租户id
+    tenantId: undefined,
+    // 创建时间
+    createTime: undefined,
+    // 修改时间
+    updateTime: undefined,
+    // 是否多规格
+    specs: undefined,
+    // 商品规格数据
+    goodsSpecValue: []
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({});
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        if (form.specs === 1) {
+          const text = form.goodsSpecValue.map((d) => d.spec).join(',');
+          if (text === ',') {
+            message.error('请选择规格');
+            return false;
+          }
+          spec.value = text;
+        }
+        console.log('>>>>>3');
+        const formData = {
+          ...form,
+          goodsId: props.data?.fieldId,
+          name: props.data?.fieldName,
+          spec: spec.value
+        };
+        const saveOrUpdate = isUpdate.value ? updateCashier : addCashier;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        spec.value = '';
+        isUpdate.value = !!props.data?.fieldId;
+        if (props.type) {
+          form.type = props.type;
+        }
+        if (props.data) {
+          assignObject(form, props.data);
+          form.name = props.data.fieldName;
+          form.cartNum = 1;
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>

src/views/shop/bookingCashier/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <a-page-header :title="`收银台`" @back="() => $router.go(-1)">
+    <div class="flex gap-5">
+      <!-- 载入购物车 -->
+      <Cart
+        :spinning="spinning"
+        :loginUser="loginUser"
+        :cashier="cashier"
+        :count="cashier?.totalNums"
+        @group="openGroupForm"
+        @reload="reload"
+        @pay="onPay"
+      />
+      <!-- 商品搜索 -->
+      <Goods :loginUser="loginUser" @reload="reload" />
+      <!-- 取单 -->
+      <GroupForm v-model:visible="showCashierForm" @done="reload" />
+      <!-- 支付结算 -->
+      <Pay v-model:visible="showPayForm" :data="cashier" @done="reload" />
+    </div>
+  </a-page-header>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref, watch } from 'vue';
+  import GroupForm from './components/group.vue';
+  import Cart from './components/cashier.vue';
+  import Goods from './components/goods.vue';
+  import Pay from './components/pay.vue';
+  import * as CashierApi from '@/api/booking/bookingCashier';
+  import { useUserStore } from '@/store/modules/user';
+  import { CashierVo } from '@/api/booking/bookingCashier/model';
+
+  // 当前用户信息
+  const userStore = useUserStore();
+  const loginUser = computed(() => userStore.info ?? {});
+  const cashier = ref<CashierVo>();
+
+  // 加载中状态
+  const spinning = ref<boolean>(true);
+  const showCashierForm = ref<boolean>(false);
+  const showPayForm = ref<boolean>(false);
+
+  const openGroupForm = () => {
+    showCashierForm.value = true;
+  };
+
+  const onPay = () => {
+    showPayForm.value = true;
+  };
+
+  /* 加载数据 */
+  const reload = () => {
+    spinning.value = true;
+    CashierApi.listByGroupId({ groupId: 0 })
+      .then((data) => {
+        if (data) {
+          cashier.value = data;
+        }
+      })
+      .finally(() => {
+        spinning.value = false;
+      });
+  };
+
+  watch(
+    () => {},
+    () => {
+      reload();
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingCooperate/components/bookingCooperateEdit.vue

@@ -0,0 +1,211 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑商务合作' : '添加商务合作'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="部门名称" name="name">
+        <a-input
+          allow-clear
+          placeholder="请输入部门名称"
+          v-model:value="form.name"
+        />
+      </a-form-item>
+      <a-form-item label="咨询电话" name="phone">
+        <a-input
+          allow-clear
+          placeholder="请输入咨询电话"
+          v-model:value="form.phone"
+        />
+      </a-form-item>
+        <a-form-item
+          label="图片"
+          name="image">
+          <SelectFile
+            :placeholder="`请选择图片`"
+            :limit="1"
+            :data="images"
+            @done="chooseImage"
+            @del="onDeleteItem"
+          />
+        </a-form-item>
+      <a-form-item label="备注" name="comments">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入描述"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+      <a-form-item label="状态" name="status">
+        <a-radio-group v-model:value="form.status">
+          <a-radio :value="0">显示</a-radio>
+          <a-radio :value="1">隐藏</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="排序号" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addBookingCooperate, updateBookingCooperate } from '@/api/booking/bookingCooperate';
+  import { BookingCooperate } from '@/api/booking/bookingCooperate/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BookingCooperate | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<BookingCooperate>({
+    cooperateId: undefined,
+    name: undefined,
+    phone: undefined,
+    image: undefined,
+    comments: undefined,
+    status: undefined,
+    sortNumber: undefined,
+    tenantId: undefined,
+    createTime: undefined
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    bookingCooperateName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写商务合作名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateBookingCooperate : addBookingCooperate;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if(props.data.image){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingCooperate/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingCooperate/index.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="bookingCooperateId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <BookingCooperateEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import BookingCooperateEdit from './components/bookingCooperateEdit.vue';
+  import { pageBookingCooperate, removeBookingCooperate, removeBatchBookingCooperate } from '@/api/booking/bookingCooperate';
+  import type { BookingCooperate, BookingCooperateParam } from '@/api/booking/bookingCooperate/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<BookingCooperate[]>([]);
+  // 当前编辑数据
+  const current = ref<BookingCooperate | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageBookingCooperate({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'cooperateId',
+      key: 'cooperateId',
+      align: 'center',
+      width: 90,
+    },
+    {
+      title: '部门名称',
+      dataIndex: 'name',
+      key: 'name',
+      align: 'center',
+    },
+    {
+      title: '咨询电话',
+      dataIndex: 'phone',
+      key: 'phone',
+      align: 'center',
+    },
+    {
+      title: '图片',
+      dataIndex: 'image',
+      key: 'image',
+      align: 'center',
+    },
+    {
+      title: '备注',
+      dataIndex: 'comments',
+      key: 'comments',
+      align: 'center',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+    },
+    {
+      title: '排序号',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: BookingCooperateParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: BookingCooperate) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: BookingCooperate) => {
+    const hide = message.loading('请求中..', 0);
+    removeBookingCooperate(row.bookingCooperateId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchBookingCooperate(selection.value.map((d) => d.bookingCooperateId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: BookingCooperate) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'BookingCooperate'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/bookingCooperateLog/components/bookingCooperateLogEdit.vue

@@ -0,0 +1,224 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑商务合作留言记录' : '添加商务合作留言记录'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="关联ID" name="cooperateId">
+        <a-input
+          allow-clear
+          placeholder="请输入关联ID"
+          v-model:value="form.cooperateId"
+        />
+      </a-form-item>
+      <a-form-item label="部门名称" name="name">
+        <a-input
+          allow-clear
+          placeholder="请输入部门名称"
+          v-model:value="form.name"
+        />
+      </a-form-item>
+      <a-form-item label="咨询电话" name="phone">
+        <a-input
+          allow-clear
+          placeholder="请输入咨询电话"
+          v-model:value="form.phone"
+        />
+      </a-form-item>
+        <a-form-item
+          label="图片"
+          name="image">
+          <SelectFile
+            :placeholder="`请选择图片`"
+            :limit="1"
+            :data="images"
+            @done="chooseImage"
+            @del="onDeleteItem"
+          />
+        </a-form-item>
+      <a-form-item label="备注" name="comments">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入描述"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+      <a-form-item label="状态" name="status">
+        <a-radio-group v-model:value="form.status">
+          <a-radio :value="0">显示</a-radio>
+          <a-radio :value="1">隐藏</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="排序号" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addBookingCooperateLog, updateBookingCooperateLog } from '@/api/booking/bookingCooperateLog';
+  import { BookingCooperateLog } from '@/api/booking/bookingCooperateLog/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BookingCooperateLog | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<BookingCooperateLog>({
+    logId: undefined,
+    cooperateId: undefined,
+    name: undefined,
+    phone: undefined,
+    image: undefined,
+    comments: undefined,
+    status: undefined,
+    sortNumber: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    bookingCooperateLogId: undefined,
+    bookingCooperateLogName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    bookingCooperateLogName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写商务合作留言记录名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateBookingCooperateLog : addBookingCooperateLog;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if(props.data.image){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingCooperateLog/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingCooperateLog/index.vue

@@ -0,0 +1,257 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="bookingCooperateLogId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <BookingCooperateLogEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import BookingCooperateLogEdit from './components/bookingCooperateLogEdit.vue';
+  import { pageBookingCooperateLog, removeBookingCooperateLog, removeBatchBookingCooperateLog } from '@/api/booking/bookingCooperateLog';
+  import type { BookingCooperateLog, BookingCooperateLogParam } from '@/api/booking/bookingCooperateLog/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<BookingCooperateLog[]>([]);
+  // 当前编辑数据
+  const current = ref<BookingCooperateLog | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageBookingCooperateLog({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'logId',
+      key: 'logId',
+      align: 'center',
+      width: 90,
+    },
+    {
+      title: '关联ID',
+      dataIndex: 'cooperateId',
+      key: 'cooperateId',
+      align: 'center',
+    },
+    {
+      title: '部门名称',
+      dataIndex: 'name',
+      key: 'name',
+      align: 'center',
+    },
+    {
+      title: '咨询电话',
+      dataIndex: 'phone',
+      key: 'phone',
+      align: 'center',
+    },
+    {
+      title: '图片',
+      dataIndex: 'image',
+      key: 'image',
+      align: 'center',
+    },
+    {
+      title: '备注',
+      dataIndex: 'comments',
+      key: 'comments',
+      align: 'center',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+    },
+    {
+      title: '排序号',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: BookingCooperateLogParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: BookingCooperateLog) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: BookingCooperateLog) => {
+    const hide = message.loading('请求中..', 0);
+    removeBookingCooperateLog(row.bookingCooperateLogId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchBookingCooperateLog(selection.value.map((d) => d.bookingCooperateLogId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: BookingCooperateLog) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'BookingCooperateLog'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/bookingCoupon/components/bookingCouponEdit.vue

@@ -0,0 +1,299 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑我的优惠券' : '添加我的优惠券'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="优惠券名称" name="name">
+        <a-input
+          allow-clear
+          placeholder="请输入优惠券名称"
+          v-model:value="form.name"
+        />
+      </a-form-item>
+      <a-form-item label="优惠券类型(10满减券 20折扣券)" name="type">
+        <a-input
+          allow-clear
+          placeholder="请输入优惠券类型(10满减券 20折扣券)"
+          v-model:value="form.type"
+        />
+      </a-form-item>
+      <a-form-item label="满减券-减免金额" name="reducePrice">
+        <a-input
+          allow-clear
+          placeholder="请输入满减券-减免金额"
+          v-model:value="form.reducePrice"
+        />
+      </a-form-item>
+      <a-form-item label="折扣券-折扣率(0-100)" name="discount">
+        <a-input
+          allow-clear
+          placeholder="请输入折扣券-折扣率(0-100)"
+          v-model:value="form.discount"
+        />
+      </a-form-item>
+      <a-form-item label="最低消费金额" name="minPrice">
+        <a-input
+          allow-clear
+          placeholder="请输入最低消费金额"
+          v-model:value="form.minPrice"
+        />
+      </a-form-item>
+      <a-form-item label="到期类型(10领取后生效 20固定时间)" name="expireType">
+        <a-input
+          allow-clear
+          placeholder="请输入到期类型(10领取后生效 20固定时间)"
+          v-model:value="form.expireType"
+        />
+      </a-form-item>
+      <a-form-item label="领取后生效-有效天数" name="expireDay">
+        <a-input
+          allow-clear
+          placeholder="请输入领取后生效-有效天数"
+          v-model:value="form.expireDay"
+        />
+      </a-form-item>
+      <a-form-item label="有效期开始时间" name="startTime">
+        <a-input
+          allow-clear
+          placeholder="请输入有效期开始时间"
+          v-model:value="form.startTime"
+        />
+      </a-form-item>
+      <a-form-item label="有效期结束时间" name="endTime">
+        <a-input
+          allow-clear
+          placeholder="请输入有效期结束时间"
+          v-model:value="form.endTime"
+        />
+      </a-form-item>
+      <a-form-item label="适用范围(10全部商品 20指定商品)" name="applyRange">
+        <a-input
+          allow-clear
+          placeholder="请输入适用范围(10全部商品 20指定商品)"
+          v-model:value="form.applyRange"
+        />
+      </a-form-item>
+      <a-form-item label="适用范围配置(json格式)" name="applyRangeConfig">
+        <a-input
+          allow-clear
+          placeholder="请输入适用范围配置(json格式)"
+          v-model:value="form.applyRangeConfig"
+        />
+      </a-form-item>
+      <a-form-item label="是否过期(0未过期 1已过期)" name="isExpire">
+        <a-input
+          allow-clear
+          placeholder="请输入是否过期(0未过期 1已过期)"
+          v-model:value="form.isExpire"
+        />
+      </a-form-item>
+      <a-form-item label="排序(数字越小越靠前)" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="状态, 0待使用, 1已使用, 2已失效" name="status">
+        <a-radio-group v-model:value="form.status">
+          <a-radio :value="0">显示</a-radio>
+          <a-radio :value="1">隐藏</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="是否删除, 0否, 1是" name="deleted">
+        <a-input
+          allow-clear
+          placeholder="请输入是否删除, 0否, 1是"
+          v-model:value="form.deleted"
+        />
+      </a-form-item>
+      <a-form-item label="用户ID" name="userId">
+        <a-input
+          allow-clear
+          placeholder="请输入用户ID"
+          v-model:value="form.userId"
+        />
+      </a-form-item>
+      <a-form-item label="修改时间" name="updateTime">
+        <a-input
+          allow-clear
+          placeholder="请输入修改时间"
+          v-model:value="form.updateTime"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addBookingCoupon, updateBookingCoupon } from '@/api/booking/bookingCoupon';
+  import { BookingCoupon } from '@/api/booking/bookingCoupon/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BookingCoupon | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<BookingCoupon>({
+    id: undefined,
+    name: undefined,
+    type: undefined,
+    reducePrice: undefined,
+    discount: undefined,
+    minPrice: undefined,
+    expireType: undefined,
+    expireDay: undefined,
+    startTime: undefined,
+    endTime: undefined,
+    applyRange: undefined,
+    applyRangeConfig: undefined,
+    isExpire: undefined,
+    sortNumber: undefined,
+    status: undefined,
+    deleted: undefined,
+    userId: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    updateTime: undefined,
+    bookingCouponId: undefined,
+    bookingCouponName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    bookingCouponName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写我的优惠券名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateBookingCoupon : addBookingCoupon;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if(props.data.image){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingCoupon/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingCoupon/index.vue

@@ -0,0 +1,317 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="bookingCouponId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <BookingCouponEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import BookingCouponEdit from './components/bookingCouponEdit.vue';
+  import { pageBookingCoupon, removeBookingCoupon, removeBatchBookingCoupon } from '@/api/booking/bookingCoupon';
+  import type { BookingCoupon, BookingCouponParam } from '@/api/booking/bookingCoupon/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<BookingCoupon[]>([]);
+  // 当前编辑数据
+  const current = ref<BookingCoupon | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageBookingCoupon({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'id',
+      dataIndex: 'id',
+      key: 'id',
+      align: 'center',
+      width: 90,
+    },
+    {
+      title: '优惠券名称',
+      dataIndex: 'name',
+      key: 'name',
+      align: 'center',
+    },
+    {
+      title: '优惠券类型(10满减券 20折扣券)',
+      dataIndex: 'type',
+      key: 'type',
+      align: 'center',
+    },
+    {
+      title: '满减券-减免金额',
+      dataIndex: 'reducePrice',
+      key: 'reducePrice',
+      align: 'center',
+    },
+    {
+      title: '折扣券-折扣率(0-100)',
+      dataIndex: 'discount',
+      key: 'discount',
+      align: 'center',
+    },
+    {
+      title: '最低消费金额',
+      dataIndex: 'minPrice',
+      key: 'minPrice',
+      align: 'center',
+    },
+    {
+      title: '到期类型(10领取后生效 20固定时间)',
+      dataIndex: 'expireType',
+      key: 'expireType',
+      align: 'center',
+    },
+    {
+      title: '领取后生效-有效天数',
+      dataIndex: 'expireDay',
+      key: 'expireDay',
+      align: 'center',
+    },
+    {
+      title: '有效期开始时间',
+      dataIndex: 'startTime',
+      key: 'startTime',
+      align: 'center',
+    },
+    {
+      title: '有效期结束时间',
+      dataIndex: 'endTime',
+      key: 'endTime',
+      align: 'center',
+    },
+    {
+      title: '适用范围(10全部商品 20指定商品)',
+      dataIndex: 'applyRange',
+      key: 'applyRange',
+      align: 'center',
+    },
+    {
+      title: '适用范围配置(json格式)',
+      dataIndex: 'applyRangeConfig',
+      key: 'applyRangeConfig',
+      align: 'center',
+    },
+    {
+      title: '是否过期(0未过期 1已过期)',
+      dataIndex: 'isExpire',
+      key: 'isExpire',
+      align: 'center',
+    },
+    {
+      title: '排序(数字越小越靠前)',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center',
+    },
+    {
+      title: '状态, 0待使用, 1已使用, 2已失效',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+    },
+    {
+      title: '是否删除, 0否, 1是',
+      dataIndex: 'deleted',
+      key: 'deleted',
+      align: 'center',
+    },
+    {
+      title: '用户ID',
+      dataIndex: 'userId',
+      key: 'userId',
+      align: 'center',
+    },
+    {
+      title: '注册时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '修改时间',
+      dataIndex: 'updateTime',
+      key: 'updateTime',
+      align: 'center',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: BookingCouponParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: BookingCoupon) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: BookingCoupon) => {
+    const hide = message.loading('请求中..', 0);
+    removeBookingCoupon(row.bookingCouponId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchBookingCoupon(selection.value.map((d) => d.bookingCouponId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: BookingCoupon) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'BookingCoupon'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/bookingEmergency/components/bookingEmergencyEdit.vue

@@ -0,0 +1,220 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑紧急联系人管理' : '添加紧急联系人管理'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="姓名" name="name">
+        <a-input
+          allow-clear
+          placeholder="请输入姓名"
+          v-model:value="form.name"
+        />
+      </a-form-item>
+      <a-form-item label="手机号" name="phone">
+        <a-input
+          allow-clear
+          placeholder="请输入手机号"
+          v-model:value="form.phone"
+        />
+      </a-form-item>
+      <a-form-item label="关联用户" name="userId">
+        <a-input
+          allow-clear
+          placeholder="请输入关联用户"
+          v-model:value="form.userId"
+        />
+      </a-form-item>
+      <a-form-item label="商户ID" name="merchantId">
+        <a-input
+          allow-clear
+          placeholder="请输入商户ID"
+          v-model:value="form.merchantId"
+        />
+      </a-form-item>
+      <a-form-item label="备注" name="comments">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入描述"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+      <a-form-item label="状态" name="status">
+        <a-radio-group v-model:value="form.status">
+          <a-radio :value="0">显示</a-radio>
+          <a-radio :value="1">隐藏</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="排序号" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addBookingEmergency, updateBookingEmergency } from '@/api/booking/bookingEmergency';
+  import { BookingEmergency } from '@/api/booking/bookingEmergency/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BookingEmergency | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<BookingEmergency>({
+    emergencyId: undefined,
+    name: undefined,
+    phone: undefined,
+    userId: undefined,
+    merchantId: undefined,
+    comments: undefined,
+    status: undefined,
+    sortNumber: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    bookingEmergencyId: undefined,
+    bookingEmergencyName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    bookingEmergencyName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写紧急联系人管理名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateBookingEmergency : addBookingEmergency;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if(props.data.image){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingEmergency/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingEmergency/index.vue

@@ -0,0 +1,257 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="bookingEmergencyId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <BookingEmergencyEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import BookingEmergencyEdit from './components/bookingEmergencyEdit.vue';
+  import { pageBookingEmergency, removeBookingEmergency, removeBatchBookingEmergency } from '@/api/booking/bookingEmergency';
+  import type { BookingEmergency, BookingEmergencyParam } from '@/api/booking/bookingEmergency/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<BookingEmergency[]>([]);
+  // 当前编辑数据
+  const current = ref<BookingEmergency | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageBookingEmergency({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'emergencyId',
+      key: 'emergencyId',
+      align: 'center',
+      width: 90,
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name',
+      align: 'center',
+    },
+    {
+      title: '手机号',
+      dataIndex: 'phone',
+      key: 'phone',
+      align: 'center',
+    },
+    {
+      title: '关联用户',
+      dataIndex: 'userId',
+      key: 'userId',
+      align: 'center',
+    },
+    {
+      title: '商户ID',
+      dataIndex: 'merchantId',
+      key: 'merchantId',
+      align: 'center',
+    },
+    {
+      title: '备注',
+      dataIndex: 'comments',
+      key: 'comments',
+      align: 'center',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+    },
+    {
+      title: '排序号',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: BookingEmergencyParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: BookingEmergency) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: BookingEmergency) => {
+    const hide = message.loading('请求中..', 0);
+    removeBookingEmergency(row.bookingEmergencyId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchBookingEmergency(selection.value.map((d) => d.bookingEmergencyId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: BookingEmergency) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'BookingEmergency'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/bookingField/components/bookingFieldEdit.vue

@@ -0,0 +1,252 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑' : '添加'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="场地名称" name="name">
+        <a-input
+          allow-clear
+          placeholder="请输入场地名称"
+          v-model:value="form.name"
+        />
+      </a-form-item>
+      <a-form-item label="是否有卫生间，1有，2没有" name="isToilet">
+        <a-input
+          allow-clear
+          placeholder="请输入是否有卫生间，1有，2没有"
+          v-model:value="form.isToilet"
+        />
+      </a-form-item>
+      <a-form-item label="是否关闭，1开启，2关闭" name="isStatus">
+        <a-input
+          allow-clear
+          placeholder="请输入是否关闭，1开启，2关闭"
+          v-model:value="form.isStatus"
+        />
+      </a-form-item>
+      <a-form-item label="是否重复预订，1可以，2不可以" name="isRepeat">
+        <a-input
+          allow-clear
+          placeholder="请输入是否重复预订，1可以，2不可以"
+          v-model:value="form.isRepeat"
+        />
+      </a-form-item>
+      <a-form-item label="是否可预定半场，1可以，2不可以" name="isHalf">
+        <a-input
+          allow-clear
+          placeholder="请输入是否可预定半场，1可以，2不可以"
+          v-model:value="form.isHalf"
+        />
+      </a-form-item>
+      <a-form-item label="是否支持儿童价：1支持，2不支持" name="isChildren">
+        <a-input
+          allow-clear
+          placeholder="请输入是否支持儿童价：1支持，2不支持"
+          v-model:value="form.isChildren"
+        />
+      </a-form-item>
+      <a-form-item label="可重复预订次数" name="num">
+        <a-input
+          allow-clear
+          placeholder="请输入可重复预订次数"
+          v-model:value="form.num"
+        />
+      </a-form-item>
+      <a-form-item label="排序" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="关联id" name="sid">
+        <a-input
+          allow-clear
+          placeholder="请输入关联id"
+          v-model:value="form.sid"
+        />
+      </a-form-item>
+      <a-form-item label="显示在第几行" name="row">
+        <a-input
+          allow-clear
+          placeholder="请输入显示在第几行"
+          v-model:value="form.row"
+        />
+      </a-form-item>
+      <a-form-item label="更新时间" name="updateTime">
+        <a-input
+          allow-clear
+          placeholder="请输入更新时间"
+          v-model:value="form.updateTime"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addBookingField, updateBookingField } from '@/api/booking/bookingField';
+  import { BookingField } from '@/api/booking/bookingField/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BookingField | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<BookingField>({
+    id: undefined,
+    name: undefined,
+    isToilet: undefined,
+    isStatus: undefined,
+    isRepeat: undefined,
+    isHalf: undefined,
+    isChildren: undefined,
+    num: undefined,
+    sortNumber: undefined,
+    sid: undefined,
+    row: undefined,
+    createTime: undefined,
+    updateTime: undefined,
+    tenantId: undefined,
+    bookingFieldId: undefined,
+    bookingFieldName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    bookingFieldName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateBookingField : addBookingField;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if(props.data.image){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingField/components/category-edit.vue

@@ -0,0 +1,289 @@
+<!-- 分类编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="620"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="isUpdate ? '修改分类' : '添加分类'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 7, sm: 4, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 18, sm: 20, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-row :gutter="16">
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="上级分类" name="parentId">
+            <a-tree-select
+              allow-clear
+              :tree-data="categoryList"
+              tree-default-expand-all
+              placeholder="请选择上级分类"
+              :value="form.parentId || undefined"
+              :dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
+              @update:value="(value?: number) => (form.parentId = value)"
+            />
+          </a-form-item>
+          <a-form-item label="分类名称" name="title">
+            <a-input
+              allow-clear
+              placeholder="请输入分类名称"
+              v-model:value="form.title"
+              @pressEnter="save"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="排序号" name="sortNumber">
+            <a-input-number
+              :min="0"
+              :max="99999"
+              class="ele-fluid"
+              placeholder="请输入排序号"
+              v-model:value="form.sortNumber"
+            />
+          </a-form-item>
+          <a-form-item label="是否展示" name="status">
+            <a-switch
+              checked-children="是"
+              un-checked-children="否"
+              :checked="form.status === 0"
+              @update:checked="updateHideValue"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <div style="margin-bottom: 22px">
+        <a-divider />
+      </div>
+      <a-form-item
+        label="备注"
+        name="comments"
+        :label-col="
+          styleResponsive ? { md: 3, sm: 4, xs: 24 } : { flex: '90px' }
+        "
+        :wrapper-col="
+          styleResponsive ? { md: 21, sm: 20, xs: 24 } : { flex: '1' }
+        "
+      >
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入备注信息"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject } from 'ele-admin-pro';
+  import {
+    addArticleCategory,
+    updateArticleCategory
+  } from '@/api/cms/category';
+  import type { ArticleCategory } from '@/api/cms/category/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { Design } from '@/api/cms/design/model';
+  import type { Rule } from 'ant-design-vue/es/form';
+
+  const useForm = Form.useForm;
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: ArticleCategory | null;
+    // 分类id
+    categoryId?: number;
+    // 全部分类
+    categoryList: ArticleCategory[];
+  }>();
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const form = reactive<ArticleCategory>({
+    categoryId: undefined,
+    type: 0,
+    title: '',
+    parentId: undefined,
+    image: '',
+    path: '/article/:id',
+    component: '/article/index',
+    pageId: undefined,
+    pageName: '',
+    status: 0,
+    showIndex: 0,
+    recommend: 0,
+    sortNumber: 100
+  });
+
+  // 表单验证规则
+  const rules = reactive({
+    type: [
+      {
+        required: true,
+        message: '请选择分类类型',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    title: [
+      {
+        required: true,
+        message: '请输入分类名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    sortNumber: [
+      {
+        required: true,
+        message: '请输入排序号',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    status: [
+      {
+        required: true,
+        message: '请设置是否展示',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    meta: [
+      {
+        type: 'string',
+        validator: async (_rule: Rule, value: string) => {
+          if (value) {
+            const msg = '请输入正确的JSON格式';
+            try {
+              const obj = JSON.parse(value);
+              if (typeof obj !== 'object' || obj === null) {
+                return Promise.reject(msg);
+              }
+            } catch (_e) {
+              return Promise.reject(msg);
+            }
+          }
+          return Promise.resolve();
+        },
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const { resetFields, validate } = useForm(form, rules);
+
+  const onType = (index: number) => {
+    if (index == 0) {
+      form.path = '/article/:id';
+      form.component = '/article/index';
+    }
+    if (index == 1) {
+      form.path = '/page/:id';
+      form.component = '/about/index';
+    }
+    if (index == 2) {
+      form.path = undefined;
+      form.component = '';
+    }
+  };
+
+  const choosePageId = (data: Design) => {
+    form.pageName = data.name;
+    form.pageId = data.pageId;
+    form.title = data.name;
+  };
+
+  const updateHideValue = (value: boolean) => {
+    form.status = value ? 0 : 1;
+  };
+
+  const updateIndexValue = (value: boolean) => {
+    form.showIndex = value ? 1 : 0;
+  };
+
+  const updateRecommendValue = (value: boolean) => {
+    form.recommend = value ? 1 : 0;
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    validate()
+      .then(() => {
+        loading.value = true;
+        const categoryData = {
+          ...form,
+          parentId: form.parentId || 0
+        };
+        const saveOrUpdate = isUpdate.value
+          ? updateArticleCategory
+          : addArticleCategory;
+        saveOrUpdate(categoryData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignObject(form, props.data);
+          isUpdate.value = true;
+        } else {
+          form.parentId = props.categoryId;
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>

src/views/shop/bookingField/components/category-select.vue

@@ -0,0 +1,39 @@
+<!-- 目录选择下拉框 -->
+<template>
+  <a-tree-select
+    allow-clear
+    tree-default-expand-all
+    :placeholder="placeholder"
+    :value="value || undefined"
+    :tree-data="data"
+    :dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
+    @update:value="updateValue"
+  />
+</template>
+
+<script lang="ts" setup>
+  import type { Article } from '@/api/cms/article/model';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value?: number): void;
+  }>();
+
+  withDefaults(
+    defineProps<{
+      // 选中的数据(v-modal)
+      value?: number;
+      // 提示信息
+      placeholder?: any;
+      // 文章分类
+      data: Article[];
+    }>(),
+    {
+      placeholder: '请选择上级分类'
+    }
+  );
+
+  /* 更新选中数据 */
+  const updateValue = (value?: number) => {
+    emit('update:value', value);
+  };
+</script>

src/views/shop/bookingField/components/field-search.vue

@@ -0,0 +1,85 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <plus-outlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+    <a-button
+      danger
+      type="primary"
+      class="ele-btn-icon"
+      @click="removeBatch"
+      :disabled="props.selection?.length === 0"
+    >
+      <template #icon>
+        <delete-outlined />
+      </template>
+      <span>批量删除</span>
+    </a-button>
+    <a-input-search
+      allow-clear
+      v-model:value="where.keywords"
+      placeholder="请输入关键词"
+      @search="search"
+      @pressEnter="search"
+    />
+    <a-button
+      type="primary"
+      style="background-color: var(--orange-6); border-color: var(--orange-5)"
+      @click="openPeriod"
+      >查看场馆时段</a-button
+    >
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+  import useSearch from '@/utils/use-search';
+  import type { BookingFieldParam } from '@/api/booking/bookingField/model';
+  import { watch } from 'vue';
+
+  const emit = defineEmits<{
+    (e: 'search', where?: BookingFieldParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'period'): void;
+  }>();
+
+  const props = defineProps<{
+    // 勾选的项目
+    selection?: [];
+  }>();
+
+  // 表单数据
+  const { where } = useSearch<BookingFieldParam>({
+    keywords: ''
+  });
+
+  /* 搜索 */
+  const search = () => {
+    emit('search', where);
+  };
+
+  /*  添加 */
+  const add = () => {
+    emit('add');
+  };
+
+  const openPeriod = () => {
+    emit('period');
+  };
+
+  // 批量删除
+  const removeBatch = () => {
+    emit('remove');
+  };
+
+  // 监听变化
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingField/components/fieldEdit.vue

@@ -0,0 +1,223 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑场馆场地' : '添加场馆场地'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="场地名称" name="name">
+        <a-input
+          allow-clear
+          placeholder="请输入场地名称"
+          v-model:value="form.name"
+        />
+      </a-form-item>
+      <a-form-item label="是否可预订半场" name="isHalf">
+        <a-radio-group v-model:value="form.isHalf">
+          <a-radio :value="1">可以</a-radio>
+          <a-radio :value="2">不可以</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="是否可重复预定" name="isRepeat">
+        <a-radio-group v-model:value="form.isRepeat">
+          <a-radio :value="1">可以</a-radio>
+          <a-radio :value="2">不可以</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="可重复预订数" name="num" v-if="form.isRepeat == 1">
+        <a-input-number
+          allow-clear
+          style="width: 120px"
+          placeholder="可重复预订数"
+          v-model:value="form.num"
+        />
+      </a-form-item>
+
+      <a-form-item label="是否是卫生间" name="isToilet">
+        <a-radio-group v-model:value="form.isToilet">
+          <a-radio :value="1">是</a-radio>
+          <a-radio :value="2">否</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="是否支持儿童价" name="isChildren">
+        <a-radio-group v-model:value="form.isChildren">
+          <a-radio :value="1">支持</a-radio>
+          <a-radio :value="2">不支持</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="显示在第几行" name="row">
+        <a-input
+          allow-clear
+          placeholder="请输入显示在第几行"
+          v-model:value="form.row"
+        />
+      </a-form-item>
+      <a-form-item label="备注" name="comments">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入描述"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+      <a-form-item label="场地状态" name="isStatus">
+        <a-radio-group v-model:value="form.isStatus">
+          <a-radio :value="1">开启</a-radio>
+          <a-radio :value="2">关闭</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="排序号" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject } from 'ele-admin-pro';
+  import {
+    addBookingField,
+    updateBookingField
+  } from '@/api/booking/bookingField';
+  import { BookingField } from '@/api/booking/bookingField/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 商户ID
+    categoryId?: number;
+    // 修改回显的数据
+    data?: BookingField | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<BookingField>({
+    id: undefined,
+    name: undefined,
+    isToilet: undefined,
+    isStatus: undefined,
+    isRepeat: undefined,
+    isHalf: undefined,
+    isChildren: undefined,
+    num: undefined,
+    sortNumber: undefined,
+    sid: undefined,
+    row: undefined,
+    tenantId: undefined,
+    createTime: undefined
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    name: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写场馆场地名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        form.merchantId = props.categoryId;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value
+          ? updateBookingField
+          : addBookingField;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingField/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingField/index.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false" :body-style="{ padding: '16px' }">
+      <ele-split-layout
+        :width="!getMerchantName() ? '266px' : ''"
+        :allow-collapse="!getMerchantName()"
+        :right-style="{ overflow: 'hidden' }"
+        :style="{ minHeight: 'calc(100vh - 252px)' }"
+      >
+        <div v-if="!getMerchantName()">
+          <ele-toolbar theme="default">
+            <span class="ele-text-heading">场馆列表</span>
+          </ele-toolbar>
+          <div class="ele-border-split sys-category-list">
+            <a-tree
+              :tree-data="data"
+              v-model:expanded-keys="expandedRowKeys"
+              v-model:selected-keys="selectedRowKeys"
+              :show-line="true"
+              :show-icon="false"
+              @select="onTreeSelect"
+            >
+              <template #title="{ type, key: treeKey, title }">
+                <a-dropdown :trigger="['contextmenu']">
+                  <span>{{ title }}</span>
+                  <template #overlay v-if="type == 0">
+                    <a-menu
+                      @click="
+                        ({ key: menuKey }) =>
+                          onContextMenuClick(treeKey, menuKey)
+                      "
+                    >
+                      <a-menu-item key="1">修改</a-menu-item>
+                      <a-menu-item key="2">删除</a-menu-item>
+                    </a-menu>
+                  </template>
+                </a-dropdown>
+              </template>
+            </a-tree>
+          </div>
+        </div>
+        <template #content>
+          <list
+            v-if="current"
+            :category-list="data"
+            :data="current"
+            :category-id="current.id"
+          />
+        </template>
+      </ele-split-layout>
+    </a-card>
+    <!-- 编辑弹窗 -->
+    <category-edit
+      v-model:visible="showEdit"
+      :data="editData"
+      :category-list="data"
+      :category-id="current?.categoryId"
+      @done="query"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import { eachTreeData } from 'ele-admin-pro';
+  import List from './list.vue';
+  import CategoryEdit from './components/category-edit.vue';
+  import { getMerchantName } from '@/utils/merchant';
+  import {
+    listBookingSite,
+    removeBookingSite
+  } from '@/api/booking/bookingSite';
+  import { BookingSite } from '@/api/booking/bookingSite/model';
+
+  // 加载状态
+  const loading = ref(true);
+
+  // 树形数据
+  const data = ref<BookingSite[]>([]);
+
+  // 树展开的key
+  const expandedRowKeys = ref<number[]>([]);
+
+  // 树选中的key
+  const selectedRowKeys = ref<number[]>([]);
+
+  // 选中数据
+  const current = ref<BookingSite | any>(null);
+
+  // 是否显示表单弹窗
+  const showEdit = ref(false);
+
+  // 编辑回显数据
+  const editData = ref<BookingSite | null>(null);
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+    listBookingSite()
+      .then((list) => {
+        loading.value = false;
+        const eks: number[] = [];
+        list.forEach((d) => {
+          d.key = d.id;
+          d.value = d.id;
+          if (typeof d.id === 'number') {
+            eks.push(d.id);
+          }
+        });
+        expandedRowKeys.value = eks;
+        data.value = list.map((d) => {
+          d.key = d.id;
+          d.value = d.id;
+          d.title = d.name;
+          return d;
+        });
+        // data.value = toTreeData({
+        //   data: list,
+        //   idField: 'categoryId',
+        //   parentIdField: 'parentId'
+        // });
+        if (list.length) {
+          if (typeof list[0].id === 'number') {
+            selectedRowKeys.value = [list[0].id];
+          }
+          current.value = list[0];
+        } else {
+          selectedRowKeys.value = [];
+          current.value = null;
+        }
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+  };
+
+  /* 选择数据 */
+  const onTreeSelect = () => {
+    current.value = {};
+    eachTreeData(data.value, (d) => {
+      if (typeof d.id === 'number' && selectedRowKeys.value.includes(d.id)) {
+        current.value = d;
+        return false;
+      }
+    });
+  };
+
+  const onContextMenuClick = (treeKey: number, menuKey: number) => {
+    // 修改
+    if (menuKey == 1) {
+      openEdit(current.value);
+    }
+    // 删除
+    if (menuKey == 2) {
+      remove();
+    }
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (item?: BookingSite | null) => {
+    editData.value = item ?? null;
+    showEdit.value = true;
+  };
+
+  /* 删除 */
+  const remove = () => {
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的分类吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBookingSite(current.value?.id)
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            query();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'BookingSite'
+  };
+</script>
+
+<style lang="less" scoped>
+  .sys-category-list {
+    padding: 12px 6px;
+    height: calc(100vh - 242px);
+    border-width: 1px;
+    border-style: solid;
+    overflow: auto;
+  }
+</style>

src/views/shop/bookingField/list.vue

@@ -0,0 +1,319 @@
+<template>
+  <!-- 表格 -->
+  <ele-pro-table
+    ref="tableRef"
+    row-key="id"
+    :columns="columns"
+    :datasource="datasource"
+    v-model:selection="selection"
+    :customRow="customRow"
+    height="calc(100vh - 390px)"
+    tool-class="ele-toolbar-form"
+    :scroll="{ x: 800 }"
+  >
+    <template #toolbar>
+      <field-search
+        :selection="selection"
+        @search="reload"
+        @add="openEdit()"
+        @period="openPeriod()"
+        @remove="removeBatch"
+      />
+    </template>
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'fieldName'">
+        {{ record.name }}
+      </template>
+      <template v-if="column.key === 'isToilet'">
+        <a-tag v-if="record.isToilet == 1" color="green">是</a-tag>
+        <a-tag v-else>否</a-tag>
+      </template>
+      <template v-if="column.key === 'isHalf'">
+        <a-tag v-if="record.isHalf == 2">不可以</a-tag>
+        <a-tag v-if="record.isHalf == 1" color="green">可以</a-tag>
+      </template>
+      <template v-if="column.key === 'isChildren'">
+        <a-tag v-if="record.isChildren == 2">不支持</a-tag>
+        <a-tag v-if="record.isChildren == 1" color="green">支持</a-tag>
+      </template>
+      <template v-if="column.key === 'isRepeat'">
+        <a-tag v-if="record.isRepeat == 2">不可以</a-tag>
+        <a-tag v-if="record.isRepeat == 1" color="green">可以</a-tag>
+      </template>
+      <template v-if="column.key === 'isStatus'">
+        <a-tag v-if="record.isStatus == 2">关闭</a-tag>
+        <a-tag v-if="record.isStatus == 1" color="green">开启</a-tag>
+      </template>
+      <template v-else-if="column.key === 'action'">
+        <a-space>
+          <a @click="openEdit(record)">修改</a>
+          <a-divider type="vertical" />
+          <a-popconfirm
+            title="确定要删除此场馆场地吗？"
+            @confirm="remove(record)"
+          >
+            <a class="ele-text-danger">删除</a>
+          </a-popconfirm>
+        </a-space>
+      </template>
+    </template>
+  </ele-pro-table>
+  <!-- 编辑弹窗 -->
+  <field-edit
+    :data="current"
+    v-model:visible="showEdit"
+    :category-list="categoryList"
+    :category-id="categoryId"
+    @done="reload"
+  />
+  <!-- 时段弹窗 -->
+  <PeriodEdit
+    v-model:visible="showPeriodEidt"
+    :category-id="categoryId"
+    :data="data"
+    @done="reload"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref, watch } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { toDateString } from 'ele-admin-pro';
+  import FieldSearch from './components/field-search.vue';
+  import FieldEdit from './components/fieldEdit.vue';
+  import {
+    pageBookingField,
+    removeBookingField,
+    removeBatchBookingField
+  } from '@/api/booking/bookingField';
+  import type {
+    BookingField,
+    BookingFieldParam
+  } from '@/api/booking/bookingField/model';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import PeriodEdit from './period/index.vue';
+  import { BookingSite } from '@/api/booking/bookingSite/model';
+
+  const props = defineProps<{
+    // 场馆场地 id
+    categoryId?: number;
+    // 全部分类
+    categoryList: BookingSite[];
+    // 当期选中
+    data: BookingSite;
+  }>();
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<any[]>([]);
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    // {
+    //   key: 'index',
+    //   width: 48,
+    //   align: 'center',
+    //   fixed: 'left',
+    //   hideInSetting: true,
+    //   customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    // },
+    {
+      title: 'ID',
+      width: 80,
+      dataIndex: 'id'
+    },
+    {
+      title: '场地名称',
+      dataIndex: 'name',
+      key: 'name'
+    },
+    {
+      title: '显示在第几行',
+      dataIndex: 'row',
+      key: 'row'
+    },
+    {
+      title: '可重复预订次数',
+      dataIndex: 'num',
+      key: 'num'
+    },
+    {
+      title: '是否是卫生间',
+      dataIndex: 'isToilet',
+      key: 'isToilet',
+      align: 'center',
+      customRender: ({ text }) => (text == true ? '否' : '是')
+    },
+    {
+      title: '是否可预订半场',
+      dataIndex: 'isHalf',
+      key: 'isHalf',
+      align: 'center'
+    },
+    {
+      title: '是否支持儿童价',
+      dataIndex: 'isChildren',
+      key: 'isChildren',
+      align: 'center',
+      customRender: ({ text }) => (text == true ? '不支持' : '支持')
+    },
+    {
+      title: '是否可重复预订',
+      dataIndex: 'isRepeat',
+      key: 'isRepeat',
+      align: 'center',
+      customRender: ({ text }) => (text == true ? '不可以' : '可以')
+    },
+    {
+      title: '场地状态',
+      dataIndex: 'isStatus',
+      key: 'isStatus',
+      align: 'center',
+      customRender: ({ text }) => (text == 0 ? '开启' : '关闭')
+    },
+    {
+      title: '排序',
+      dataIndex: 'sortNumber',
+      width: 100,
+      align: 'center'
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      width: 120,
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 100,
+      align: 'center'
+    }
+  ]);
+
+  // 当前编辑数据
+  const current = ref<BookingField | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示时段弹窗
+  const showPeriodEidt = ref(false);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    console.log(props);
+    console.log(props.categoryId);
+    if (props.categoryId) {
+      where.sid = props.categoryId;
+    }
+    // 按条件排序
+    if (filters) {
+      where.virtualViews = filters.virtualViews;
+      where.actualViews = filters.actualViews;
+      where.sortNumber = filters.sortNumber;
+      where.status = filters.status;
+    }
+    // where.merchantId = getMerchantId();
+    return pageBookingField({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = (where?: BookingFieldParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: BookingField) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const openPeriod = () => {
+    showPeriodEidt.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: BookingField) => {
+    const hide = message.loading('请求中..', 0);
+    removeBookingField(row.id)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchBookingField(selection.value.map((d) => d.id))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: BookingField) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+
+  // 监听场馆场地 id 变化
+  watch(
+    () => props.categoryId,
+    () => {
+      reload();
+    }
+  );
+</script>

src/views/shop/bookingField/period/components/periodEdit.vue

@@ -0,0 +1,288 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :title="isUpdate ? '编辑时段' : '添加时段'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-spin :spinning="loading">
+      <a-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        :label-col="
+          styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }
+        "
+        :wrapper-col="
+          styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+        "
+      >
+        <a-form-item label="时段" name="timePeriod">
+          <a-time-picker
+            v-model:value="form.timePeriod1"
+            format="HH:mm"
+            valueFormat="HH:mm"
+          />
+          -
+          <a-time-picker
+            v-model:value="form.timePeriod2"
+            format="HH:mm"
+            valueFormat="HH:mm"
+          />
+        </a-form-item>
+        <a-form-item label="价格" name="price">
+          <a-input-number
+            allow-clear
+            placeholder="请输入价格"
+            style="width: 200px"
+            v-model:value="form.price"
+          />
+        </a-form-item>
+        <!--      <a-form-item label="每日不同价格" name="prices">-->
+        <!--        <a-input-number-->
+        <!--          allow-clear-->
+        <!--          style="width: 200px"-->
+        <!--          placeholder="请输入每日不同价格"-->
+        <!--          v-model:value="form.prices"-->
+        <!--        />-->
+        <!--      </a-form-item>-->
+        <a-form-item label="半场价格" name="halfPrice">
+          <a-input-number
+            allow-clear
+            style="width: 200px"
+            placeholder="请输入半场价格"
+            v-model:value="form.halfPrice"
+          />
+        </a-form-item>
+        <!--      <a-form-item label="每日不同半场价格" name="halfPrices">-->
+        <!--        <a-input-number-->
+        <!--          allow-clear-->
+        <!--          style="width: 200px"-->
+        <!--          placeholder="请输入每日不同半场价格"-->
+        <!--          v-model:value="form.halfPrices"-->
+        <!--        />-->
+        <!--      </a-form-item>-->
+        <a-form-item label="儿童价" name="childrenPrice">
+          <a-input-number
+            allow-clear
+            style="width: 200px"
+            placeholder="请输入儿童价"
+            v-model:value="form.childrenPrice"
+          />
+        </a-form-item>
+        <a-form-item label="星期选择" name="week">
+          <a-select
+            v-model:value="form.week"
+            :options="weekOptions"
+            mode="tags"
+            placeholder="星期选择"
+            style="width: 200px"
+          />
+        </a-form-item>
+        <a-form-item label="排序" name="sortNumber">
+          <a-input-number
+            :min="0"
+            :max="9999"
+            class="ele-fluid"
+            placeholder="请输入排序号"
+            v-model:value="form.sortNumber"
+          />
+        </a-form-item>
+        <a-form-item label="是否关闭" name="isStatus">
+          <a-radio-group v-model:value="form.isStatus">
+            <a-radio :value="1">开启</a-radio>
+            <a-radio :value="2">关闭</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="是否免费" name="isFree">
+          <a-radio-group v-model:value="form.isFree">
+            <a-radio :value="1">免费</a-radio>
+            <a-radio :value="2">收费</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="备注" name="comments">
+          <a-textarea
+            :rows="4"
+            :maxlength="200"
+            placeholder="请输入描述"
+            v-model:value="form.comments"
+          />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject } from 'ele-admin-pro';
+  import {
+    addBookingPeriod,
+    updateBookingPeriod
+  } from '@/api/booking/bookingPeriod';
+  import { BookingPeriod } from '@/api/booking/bookingPeriod/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
+  import { Merchant } from '@/api/shop/merchant/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 商户ID
+    merchantId?: number;
+    // 商户信息
+    merchant?: Merchant | null;
+    // 修改回显的数据
+    data?: BookingPeriod | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const weekOptions = ref([
+    { label: '星期一', value: '1' },
+    { label: '星期二', value: '2' },
+    { label: '星期三', value: '3' },
+    { label: '星期四', value: '4' },
+    { label: '星期五', value: '5' },
+    { label: '星期六', value: '6' },
+    { label: '星期日', value: '7' }
+  ]);
+
+  // 用户信息
+  const form = reactive<BookingPeriod>({
+    periodId: undefined,
+    timePeriod: '',
+    timePeriod1: undefined,
+    timePeriod2: undefined,
+    price: '0',
+    prices: '',
+    halfPrice: '0',
+    halfPrices: '',
+    childrenPrice: '0',
+    week: undefined,
+    sortNumber: 0,
+    merchantId: 0,
+    isStatus: '1',
+    isFree: '2',
+    startTime: '',
+    comments: '',
+    status: 0
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    period: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写时段,如红色、L码、远峰蓝、原色钛金属等',
+        trigger: 'blur'
+      }
+    ],
+    timePeriod: [
+      {
+        required: true,
+        type: 'string',
+        message: '请选择时段',
+        trigger: 'blur',
+        validator: async (_rule: RuleObject, value: string) => {
+          if (form.timePeriod1 == undefined || form.timePeriod2 == undefined) {
+            return Promise.reject('请选择时段' + value);
+          }
+          return Promise.resolve();
+        }
+      }
+    ]
+  });
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        form.merchantId = props.merchantId;
+        if (!form.merchantId || form.merchantId == 0) {
+          return;
+        }
+        form.week = JSON.stringify(form.week);
+        form.prices = JSON.stringify(form.prices);
+        form.halfPrices = JSON.stringify(form.halfPrices);
+        form.timePeriod = `${form.timePeriod1} - ${form.timePeriod2}`;
+        form.startTime = `${form.timePeriod1?.replace(':', '')}`;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value
+          ? updateBookingPeriod
+          : addBookingPeriod;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignObject(form, props.data);
+          if (props.data.timePeriod) {
+            const strings = props.data.timePeriod.split('-');
+            form.timePeriod1 = strings[0].replace(' ', '');
+            form.timePeriod2 = strings[1].replace(' ', '');
+          }
+          if (props.data.week) {
+            form.week = JSON.parse(props.data.week);
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingField/period/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingField/period/index.vue

@@ -0,0 +1,300 @@
+<template>
+  <a-drawer
+    width="70%"
+    :visible="visible"
+    :title="`${data?.name}时段列表`"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    :confirm-loading="loading"
+    :footer="null"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="id"
+      :columns="columns"
+      :datasource="datasource"
+      :customRow="customRow"
+      tool-class="ele-toolbar-form"
+      class="sys-org-table"
+    >
+      <template #toolbar>
+        <search
+          @search="reload"
+          :selection="selection"
+          @add="openEdit"
+          @remove="removeBatch"
+          @batchMove="openMove"
+        />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'isStatus'">
+          <a-tag v-if="record.isStatus === 1" color="green">开启</a-tag>
+          <a-tag v-if="record.isStatus === 2" color="red">关闭</a-tag>
+        </template>
+        <template v-if="column.key === 'isFree'">
+          <a-tag v-if="record.isFree === 1" color="green">免费</a-tag>
+          <a-tag v-if="record.isFree === 2" color="orange">收费</a-tag>
+        </template>
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a @click="moveUp(record)">上移<ArrowUpOutlined /></a>
+            <a-divider type="vertical" />
+            <a @click="openEdit(record)">编辑</a>
+            <a-divider type="vertical" />
+            <a-popconfirm
+              title="确定要删除此记录吗？"
+              @confirm="remove(record)"
+            >
+              <a class="ele-text-danger">删除</a>
+            </a-popconfirm>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+    <!-- 编辑弹窗 -->
+    <PeriodEdit
+      v-model:visible="showEdit"
+      :merchant="data"
+      :merchantId="categoryId"
+      :data="current"
+      @done="reload"
+    />
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref, watch } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import {
+    ArrowUpOutlined,
+    ExclamationCircleOutlined
+  } from '@ant-design/icons-vue';
+  import { EleProTable } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import PeriodEdit from './components/periodEdit.vue';
+  import {
+    pageBookingPeriod,
+    removeBookingPeriod,
+    removeBatchBookingPeriod,
+    updateBookingPeriod
+  } from '@/api/booking/bookingPeriod';
+  import type {
+    BookingPeriod,
+    BookingPeriodParam
+  } from '@/api/booking/bookingPeriod/model';
+  import { BookingSite } from '@/api/booking/bookingSite/model';
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    categoryId?: number | null;
+    // 商户信息
+    data?: BookingSite;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  // 表格选中数据
+  const selection = ref<BookingPeriod[]>([]);
+  // 当前编辑数据
+  const current = ref<BookingPeriod | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    where.sid = props.categoryId;
+    return pageBookingPeriod({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '时段',
+      dataIndex: 'timePeriod',
+      key: 'timePeriod',
+      align: 'center'
+    },
+    {
+      title: '价格',
+      dataIndex: 'price',
+      key: 'price',
+      align: 'center'
+    },
+    {
+      title: '半场价格',
+      dataIndex: 'halfPrice',
+      key: 'halfPrice',
+      align: 'center'
+    },
+    {
+      title: '儿童价',
+      dataIndex: 'childrenPrice',
+      key: 'childrenPrice',
+      align: 'center'
+    },
+    {
+      title: '时间段状态',
+      dataIndex: 'isStatus',
+      key: 'isStatus',
+      align: 'center'
+    },
+    {
+      title: '是否免费',
+      dataIndex: 'isFree',
+      key: 'isFree',
+      align: 'center'
+    },
+    {
+      title: '排序',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: BookingPeriodParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: BookingPeriod) => {
+    current.value = row ?? null;
+    // if (props.data?.specId) {
+    //   specId.value = props.data?.specId;
+    // }
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: BookingPeriod) => {
+    const hide = message.loading('请求中..', 0);
+    removeBookingPeriod(row.periodId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchBookingPeriod(selection.value.map((d) => d.periodId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  // 上移
+  const moveUp = (row?: BookingPeriod) => {
+    updateBookingPeriod({
+      periodId: row?.periodId,
+      sortNumber: Number(row?.sortNumber) - 1
+    }).then((msg) => {
+      message.success(msg);
+      reload();
+    });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: BookingPeriod) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+
+  watch(
+    () => props.categoryId,
+    (categoryId) => {
+      if (categoryId) {
+        reload();
+      }
+    }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'BookingPeriod'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/bookingIntegral/components/bookingIntegralEdit.vue

@@ -0,0 +1,210 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑' : '添加'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="用户id" name="uid">
+        <a-input
+          allow-clear
+          placeholder="请输入用户id"
+          v-model:value="form.uid"
+        />
+      </a-form-item>
+      <a-form-item label="微信昵称" name="username">
+        <a-input
+          allow-clear
+          placeholder="请输入微信昵称"
+          v-model:value="form.username"
+        />
+      </a-form-item>
+      <a-form-item label="手机号码" name="phone">
+        <a-input
+          allow-clear
+          placeholder="请输入手机号码"
+          v-model:value="form.phone"
+        />
+      </a-form-item>
+      <a-form-item label="获得积分" name="integral">
+        <a-input
+          allow-clear
+          placeholder="请输入获得积分"
+          v-model:value="form.integral"
+        />
+      </a-form-item>
+      <a-form-item label="日期" name="dateTime">
+        <a-input
+          allow-clear
+          placeholder="请输入日期"
+          v-model:value="form.dateTime"
+        />
+      </a-form-item>
+      <a-form-item label="天" name="day">
+        <a-input
+          allow-clear
+          placeholder="请输入天"
+          v-model:value="form.day"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addBookingIntegral, updateBookingIntegral } from '@/api/booking/bookingIntegral';
+  import { BookingIntegral } from '@/api/booking/bookingIntegral/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BookingIntegral | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<BookingIntegral>({
+    id: undefined,
+    uid: undefined,
+    username: undefined,
+    phone: undefined,
+    integral: undefined,
+    dateTime: undefined,
+    day: undefined,
+    createTime: undefined,
+    tenantId: undefined,
+    bookingIntegralId: undefined,
+    bookingIntegralName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    bookingIntegralName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateBookingIntegral : addBookingIntegral;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if(props.data.image){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingIntegral/components/search.vue

@@ -0,0 +1,52 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-input-search
+      allow-clear
+      placeholder="姓名|手机号|用户ID"
+      v-model:value="where.keywords"
+      @pressEnter="search"
+      @search="search"
+      style="width: 360px"
+    />
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { watch } from 'vue';
+  import { BookingIntegralParam } from '@/api/booking/bookingIntegral/model';
+  import useSearch from '@/utils/use-search';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: BookingIntegralParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 表单数据
+  const { where } = useSearch<BookingIntegralParam>({
+    id: undefined,
+    timeStart: undefined,
+    timeEnd: undefined,
+    keywords: undefined
+  });
+
+  // 新增
+  const search = () => {
+    emit('search');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingIntegral/index.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="bookingIntegralId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <BookingIntegralEdit
+        v-model:visible="showEdit"
+        :data="current"
+        @done="reload"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import BookingIntegralEdit from './components/bookingIntegralEdit.vue';
+  import {
+    pageBookingIntegral,
+    removeBookingIntegral,
+    removeBatchBookingIntegral
+  } from '@/api/booking/bookingIntegral';
+  import type {
+    BookingIntegral,
+    BookingIntegralParam
+  } from '@/api/booking/bookingIntegral/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<BookingIntegral[]>([]);
+  // 当前编辑数据
+  const current = ref<BookingIntegral | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageBookingIntegral({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '用户ID',
+      dataIndex: 'uid',
+      key: 'uid',
+      align: 'center',
+      width: 90
+    },
+    {
+      title: '微信昵称',
+      dataIndex: 'username',
+      key: 'username',
+      align: 'center'
+    },
+    {
+      title: '手机号码',
+      dataIndex: 'phone',
+      key: 'phone',
+      align: 'center'
+    },
+    {
+      title: '获得积分',
+      dataIndex: 'integral',
+      key: 'integral',
+      align: 'center'
+    },
+    {
+      title: '日期',
+      dataIndex: 'dateTime',
+      key: 'dateTime',
+      align: 'center'
+    },
+    {
+      title: '天',
+      dataIndex: 'day',
+      key: 'day',
+      align: 'center'
+    },
+    {
+      title: '签到时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: BookingIntegralParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: BookingIntegral) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: BookingIntegral) => {
+    const hide = message.loading('请求中..', 0);
+    removeBookingIntegral(row.bookingIntegralId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchBookingIntegral(
+          selection.value.map((d) => d.bookingIntegralId)
+        )
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: BookingIntegral) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'BookingIntegral'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/bookingIntegralLog/components/bookingIntegralLogEdit.vue

@@ -0,0 +1,234 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑' : '添加'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="场馆订单号" name="orderNum">
+        <a-input
+          allow-clear
+          placeholder="请输入场馆订单号"
+          v-model:value="form.orderNum"
+        />
+      </a-form-item>
+      <a-form-item label="订单id" name="oid">
+        <a-input
+          allow-clear
+          placeholder="请输入订单id"
+          v-model:value="form.oid"
+        />
+      </a-form-item>
+      <a-form-item label="场馆名称" name="siteName">
+        <a-input
+          allow-clear
+          placeholder="请输入场馆名称"
+          v-model:value="form.siteName"
+        />
+      </a-form-item>
+      <a-form-item label="微信昵称" name="username">
+        <a-input
+          allow-clear
+          placeholder="请输入微信昵称"
+          v-model:value="form.username"
+        />
+      </a-form-item>
+      <a-form-item label="手机号码" name="phone">
+        <a-input
+          allow-clear
+          placeholder="请输入手机号码"
+          v-model:value="form.phone"
+        />
+      </a-form-item>
+      <a-form-item label="获得积分" name="integral">
+        <a-input
+          allow-clear
+          placeholder="请输入获得积分"
+          v-model:value="form.integral"
+        />
+      </a-form-item>
+      <a-form-item label="变化前积分" name="oldMoney">
+        <a-input
+          allow-clear
+          placeholder="请输入变化前积分"
+          v-model:value="form.oldMoney"
+        />
+      </a-form-item>
+      <a-form-item label="变化后积分" name="newMoney">
+        <a-input
+          allow-clear
+          placeholder="请输入变化后积分"
+          v-model:value="form.newMoney"
+        />
+      </a-form-item>
+      <a-form-item label="描述" name="info">
+        <a-input
+          allow-clear
+          placeholder="请输入描述"
+          v-model:value="form.info"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addBookingIntegralLog, updateBookingIntegralLog } from '@/api/booking/bookingIntegralLog';
+  import { BookingIntegralLog } from '@/api/booking/bookingIntegralLog/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BookingIntegralLog | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<BookingIntegralLog>({
+    id: undefined,
+    orderNum: undefined,
+    oid: undefined,
+    siteName: undefined,
+    username: undefined,
+    phone: undefined,
+    integral: undefined,
+    oldMoney: undefined,
+    newMoney: undefined,
+    info: undefined,
+    createTime: undefined,
+    tenantId: undefined,
+    bookingIntegralLogId: undefined,
+    bookingIntegralLogName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    bookingIntegralLogName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateBookingIntegralLog : addBookingIntegralLog;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if(props.data.image){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingIntegralLog/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingIntegralLog/index.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="bookingIntegralLogId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <BookingIntegralLogEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import BookingIntegralLogEdit from './components/bookingIntegralLogEdit.vue';
+  import { pageBookingIntegralLog, removeBookingIntegralLog, removeBatchBookingIntegralLog } from '@/api/booking/bookingIntegralLog';
+  import type { BookingIntegralLog, BookingIntegralLogParam } from '@/api/booking/bookingIntegralLog/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<BookingIntegralLog[]>([]);
+  // 当前编辑数据
+  const current = ref<BookingIntegralLog | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageBookingIntegralLog({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '',
+      dataIndex: 'id',
+      key: 'id',
+      align: 'center',
+      width: 90,
+    },
+    {
+      title: '场馆订单号',
+      dataIndex: 'orderNum',
+      key: 'orderNum',
+      align: 'center',
+    },
+    {
+      title: '订单id',
+      dataIndex: 'oid',
+      key: 'oid',
+      align: 'center',
+    },
+    {
+      title: '场馆名称',
+      dataIndex: 'siteName',
+      key: 'siteName',
+      align: 'center',
+    },
+    {
+      title: '微信昵称',
+      dataIndex: 'username',
+      key: 'username',
+      align: 'center',
+    },
+    {
+      title: '手机号码',
+      dataIndex: 'phone',
+      key: 'phone',
+      align: 'center',
+    },
+    {
+      title: '获得积分',
+      dataIndex: 'integral',
+      key: 'integral',
+      align: 'center',
+    },
+    {
+      title: '变化前积分',
+      dataIndex: 'oldMoney',
+      key: 'oldMoney',
+      align: 'center',
+    },
+    {
+      title: '变化后积分',
+      dataIndex: 'newMoney',
+      key: 'newMoney',
+      align: 'center',
+    },
+    {
+      title: '描述',
+      dataIndex: 'info',
+      key: 'info',
+      align: 'center',
+    },
+    {
+      title: '记录时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: BookingIntegralLogParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: BookingIntegralLog) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: BookingIntegralLog) => {
+    const hide = message.loading('请求中..', 0);
+    removeBookingIntegralLog(row.bookingIntegralLogId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchBookingIntegralLog(selection.value.map((d) => d.bookingIntegralLogId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: BookingIntegralLog) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'BookingIntegralLog'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/bookingItem/components/bookingItemEdit.vue

@@ -0,0 +1,208 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑项目类型' : '添加项目类型'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="项目类型" name="name">
+        <a-input
+          allow-clear
+          placeholder="请输入项目类型"
+          v-model:value="form.name"
+        />
+      </a-form-item>
+        <a-form-item
+          label="项目图标"
+          name="image">
+          <SelectFile
+            :placeholder="`请选择图片`"
+            :limit="1"
+            :data="images"
+            @done="chooseImage"
+            @del="onDeleteItem"
+          />
+        </a-form-item>
+      <a-form-item label="项目备注" name="comments">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入描述"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+      <a-form-item label="状态" name="status">
+        <a-radio-group v-model:value="form.status">
+          <a-radio :value="0">显示</a-radio>
+          <a-radio :value="1">隐藏</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="排序号" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addBookingItem, updateBookingItem } from '@/api/booking/bookingItem';
+  import { BookingItem } from '@/api/booking/bookingItem/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BookingItem | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<BookingItem>({
+    id: undefined,
+    name: undefined,
+    image: undefined,
+    comments: undefined,
+    status: undefined,
+    sortNumber: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    bookingItemId: undefined,
+    bookingItemName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    bookingItemName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写项目类型名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateBookingItem : addBookingItem;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if(props.data.image){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingItem/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingItem/index.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="bookingItemId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <BookingItemEdit
+        v-model:visible="showEdit"
+        :data="current"
+        @done="reload"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import BookingItemEdit from './components/bookingItemEdit.vue';
+  import {
+    pageBookingItem,
+    removeBookingItem,
+    removeBatchBookingItem
+  } from '@/api/booking/bookingItem';
+  import type {
+    BookingItem,
+    BookingItemParam
+  } from '@/api/booking/bookingItem/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<BookingItem[]>([]);
+  // 当前编辑数据
+  const current = ref<BookingItem | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageBookingItem({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '项目类型',
+      dataIndex: 'name',
+      key: 'name',
+      align: 'center'
+    },
+    {
+      title: '项目图标',
+      dataIndex: 'image',
+      key: 'image',
+      align: 'center'
+    },
+    {
+      title: '项目备注',
+      dataIndex: 'comments',
+      key: 'comments',
+      align: 'center'
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center'
+    },
+    {
+      title: '排序号',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center'
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: BookingItemParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: BookingItem) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: BookingItem) => {
+    const hide = message.loading('请求中..', 0);
+    removeBookingItem(row.bookingItemId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchBookingItem(selection.value.map((d) => d.bookingItemId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: BookingItem) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'BookingItem'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/bookingOrder/components/bookingOrderEdit.vue

@@ -0,0 +1,446 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑' : '添加'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="订单号" name="orderNum">
+        <a-input
+          allow-clear
+          placeholder="请输入订单号"
+          v-model:value="form.orderNum"
+        />
+      </a-form-item>
+      <a-form-item label="微信支付订单号" name="wechatOrder">
+        <a-input
+          allow-clear
+          placeholder="请输入微信支付订单号"
+          v-model:value="form.wechatOrder"
+        />
+      </a-form-item>
+      <a-form-item label="微信退款订单号" name="refundOrder">
+        <a-input
+          allow-clear
+          placeholder="请输入微信退款订单号"
+          v-model:value="form.refundOrder"
+        />
+      </a-form-item>
+      <a-form-item label="场馆id用于权限判断" name="sid">
+        <a-input
+          allow-clear
+          placeholder="请输入场馆id用于权限判断"
+          v-model:value="form.sid"
+        />
+      </a-form-item>
+      <a-form-item label="用户id" name="uid">
+        <a-input
+          allow-clear
+          placeholder="请输入用户id"
+          v-model:value="form.uid"
+        />
+      </a-form-item>
+      <a-form-item label="使用的优惠券id" name="cid">
+        <a-input
+          allow-clear
+          placeholder="请输入使用的优惠券id"
+          v-model:value="form.cid"
+        />
+      </a-form-item>
+      <a-form-item label="使用的会员卡id" name="vid">
+        <a-input
+          allow-clear
+          placeholder="请输入使用的会员卡id"
+          v-model:value="form.vid"
+        />
+      </a-form-item>
+      <a-form-item label="关联管理员id" name="aid">
+        <a-input
+          allow-clear
+          placeholder="请输入关联管理员id"
+          v-model:value="form.aid"
+        />
+      </a-form-item>
+      <a-form-item label="核销管理员id" name="adminId">
+        <a-input
+          allow-clear
+          placeholder="请输入核销管理员id"
+          v-model:value="form.adminId"
+        />
+      </a-form-item>
+      <a-form-item label="IC卡号" name="code">
+        <a-input
+          allow-clear
+          placeholder="请输入IC卡号"
+          v-model:value="form.code"
+        />
+      </a-form-item>
+      <a-form-item label="真实姓名" name="name">
+        <a-input
+          allow-clear
+          placeholder="请输入真实姓名"
+          v-model:value="form.name"
+        />
+      </a-form-item>
+      <a-form-item label="手机号码" name="phone">
+        <a-input
+          allow-clear
+          placeholder="请输入手机号码"
+          v-model:value="form.phone"
+        />
+      </a-form-item>
+      <a-form-item label="订单总额" name="totalPrice">
+        <a-input
+          allow-clear
+          placeholder="请输入订单总额"
+          v-model:value="form.totalPrice"
+        />
+      </a-form-item>
+      <a-form-item label="减少的金额，使用VIP会员折扣、优惠券抵扣、优惠券折扣后减去的价格" name="reducePrice">
+        <a-input
+          allow-clear
+          placeholder="请输入减少的金额，使用VIP会员折扣、优惠券抵扣、优惠券折扣后减去的价格"
+          v-model:value="form.reducePrice"
+        />
+      </a-form-item>
+      <a-form-item label="实际付款" name="payPrice">
+        <a-input
+          allow-clear
+          placeholder="请输入实际付款"
+          v-model:value="form.payPrice"
+        />
+      </a-form-item>
+      <a-form-item label="用于统计" name="price">
+        <a-input
+          allow-clear
+          placeholder="请输入用于统计"
+          v-model:value="form.price"
+        />
+      </a-form-item>
+      <a-form-item label="价钱，用于积分赠送" name="money">
+        <a-input
+          allow-clear
+          placeholder="请输入价钱，用于积分赠送"
+          v-model:value="form.money"
+        />
+      </a-form-item>
+      <a-form-item label="退款金额" name="refundMoney">
+        <a-input
+          allow-clear
+          placeholder="请输入退款金额"
+          v-model:value="form.refundMoney"
+        />
+      </a-form-item>
+      <a-form-item label="教练价格" name="coachPrice">
+        <a-input
+          allow-clear
+          placeholder="请输入教练价格"
+          v-model:value="form.coachPrice"
+        />
+      </a-form-item>
+      <a-form-item label="教练id" name="coachId">
+        <a-input
+          allow-clear
+          placeholder="请输入教练id"
+          v-model:value="form.coachId"
+        />
+      </a-form-item>
+      <a-form-item label="1微信支付，2积分，3支付宝，4现金，5POS机，6VIP月卡，7VIP年卡，8VIP次卡，9IC月卡，10IC年卡，11IC次卡，12免费，13VIP充值卡，14IC充值卡，15积分支付，16VIP季卡，17IC季卡" name="payType">
+        <a-input
+          allow-clear
+          placeholder="请输入1微信支付，2积分，3支付宝，4现金，5POS机，6VIP月卡，7VIP年卡，8VIP次卡，9IC月卡，10IC年卡，11IC次卡，12免费，13VIP充值卡，14IC充值卡，15积分支付，16VIP季卡，17IC季卡"
+          v-model:value="form.payType"
+        />
+      </a-form-item>
+      <a-form-item label="1已付款，2未付款" name="payStatus">
+        <a-input
+          allow-clear
+          placeholder="请输入1已付款，2未付款"
+          v-model:value="form.payStatus"
+        />
+      </a-form-item>
+      <a-form-item label="1已完成，2未使用，3已取消，4退款申请中，5退款被拒绝，6退款成功，7客户端申请退款" name="orderStatus">
+        <a-input
+          allow-clear
+          placeholder="请输入1已完成，2未使用，3已取消，4退款申请中，5退款被拒绝，6退款成功，7客户端申请退款"
+          v-model:value="form.orderStatus"
+        />
+      </a-form-item>
+      <a-form-item label="优惠类型：0无、1抵扣优惠券、2折扣优惠券、3、VIP月卡、4VIP年卡，5VIP次卡、6VIP会员卡、7IC月卡、8IC年卡、9IC次卡、10IC会员卡、11免费订单、12VIP充值卡、13IC充值卡、14VIP季卡、15IC季卡" name="type">
+        <a-input
+          allow-clear
+          placeholder="请输入优惠类型：0无、1抵扣优惠券、2折扣优惠券、3、VIP月卡、4VIP年卡，5VIP次卡、6VIP会员卡、7IC月卡、8IC年卡、9IC次卡、10IC会员卡、11免费订单、12VIP充值卡、13IC充值卡、14VIP季卡、15IC季卡"
+          v-model:value="form.type"
+        />
+      </a-form-item>
+      <a-form-item label="二维码地址，保存订单号，支付成功后才生成" name="qrcode">
+        <a-input
+          allow-clear
+          placeholder="请输入二维码地址，保存订单号，支付成功后才生成"
+          v-model:value="form.qrcode"
+        />
+      </a-form-item>
+      <a-form-item label="优惠说明" name="desc2">
+        <a-input
+          allow-clear
+          placeholder="请输入优惠说明"
+          v-model:value="form.desc2"
+        />
+      </a-form-item>
+      <a-form-item label="vip月卡年卡、ic月卡年卡回退次数" name="returnNum">
+        <a-input
+          allow-clear
+          placeholder="请输入vip月卡年卡、ic月卡年卡回退次数"
+          v-model:value="form.returnNum"
+        />
+      </a-form-item>
+      <a-form-item label="vip充值回退金额" name="returnMoney">
+        <a-input
+          allow-clear
+          placeholder="请输入vip充值回退金额"
+          v-model:value="form.returnMoney"
+        />
+      </a-form-item>
+      <a-form-item label="预约详情开始时间数组" name="startTime">
+        <a-input
+          allow-clear
+          placeholder="请输入预约详情开始时间数组"
+          v-model:value="form.startTime"
+        />
+      </a-form-item>
+      <a-form-item label="是否已开具发票：1已开发票，2未开发票，3不能开具发票" name="isInvoice">
+        <a-input
+          allow-clear
+          placeholder="请输入是否已开具发票：1已开发票，2未开发票，3不能开具发票"
+          v-model:value="form.isInvoice"
+        />
+      </a-form-item>
+      <a-form-item label="" name="updateTime">
+        <a-input
+          allow-clear
+          placeholder="请输入"
+          v-model:value="form.updateTime"
+        />
+      </a-form-item>
+      <a-form-item label="付款时间" name="payTime">
+        <a-input
+          allow-clear
+          placeholder="请输入付款时间"
+          v-model:value="form.payTime"
+        />
+      </a-form-item>
+      <a-form-item label="退款时间" name="refundTime">
+        <a-input
+          allow-clear
+          placeholder="请输入退款时间"
+          v-model:value="form.refundTime"
+        />
+      </a-form-item>
+      <a-form-item label="申请退款时间" name="refundApplyTime">
+        <a-input
+          allow-clear
+          placeholder="请输入申请退款时间"
+          v-model:value="form.refundApplyTime"
+        />
+      </a-form-item>
+      <a-form-item label="对账情况：1=已对账；2=未对账；3=已对账，金额对不上；4=未查询到该订单" name="checkBill">
+        <a-input
+          allow-clear
+          placeholder="请输入对账情况：1=已对账；2=未对账；3=已对账，金额对不上；4=未查询到该订单"
+          v-model:value="form.checkBill"
+        />
+      </a-form-item>
+      <a-form-item label="备注" name="comments">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入描述"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addBookingOrder, updateBookingOrder } from '@/api/booking/bookingOrder';
+  import { BookingOrder } from '@/api/booking/bookingOrder/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BookingOrder | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<BookingOrder>({
+    id: undefined,
+    orderNum: undefined,
+    wechatOrder: undefined,
+    refundOrder: undefined,
+    sid: undefined,
+    uid: undefined,
+    cid: undefined,
+    vid: undefined,
+    aid: undefined,
+    adminId: undefined,
+    code: undefined,
+    name: undefined,
+    phone: undefined,
+    totalPrice: undefined,
+    reducePrice: undefined,
+    payPrice: undefined,
+    price: undefined,
+    money: undefined,
+    refundMoney: undefined,
+    coachPrice: undefined,
+    coachId: undefined,
+    payType: undefined,
+    payStatus: undefined,
+    orderStatus: undefined,
+    type: undefined,
+    qrcode: undefined,
+    desc2: undefined,
+    returnNum: undefined,
+    returnMoney: undefined,
+    startTime: undefined,
+    isInvoice: undefined,
+    createTime: undefined,
+    updateTime: undefined,
+    payTime: undefined,
+    refundTime: undefined,
+    refundApplyTime: undefined,
+    checkBill: undefined,
+    comments: undefined,
+    tenantId: undefined
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    bookingOrderName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateBookingOrder : addBookingOrder;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if(props.data.image){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingOrder/components/orderInfo.vue

@@ -0,0 +1,431 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="`80%`"
+    :visible="visible"
+    :confirm-loading="loading"
+    :maxable="maxAble"
+    :title="isUpdate ? '编辑订单' : '订单详情'"
+    :body-style="{ paddingBottom: '8px', background: '#f3f3f3' }"
+    @update:visible="updateVisible"
+    :maskClosable="false"
+    :footer="null"
+    @ok="save"
+  >
+    <a-card class="order-card" :bordered="false">
+      <a-descriptions title="基本信息" :column="3">
+        <a-descriptions-item
+          label="订单号"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ form.id }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="订单编号"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ form.orderNum }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="订单状态"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          <a-tag v-if="form.orderStatus == 1">已完成</a-tag>
+          <a-tag v-if="form.orderStatus == 2">未使用</a-tag>
+          <a-tag v-if="form.orderStatus == 3">已取消</a-tag>
+          <a-tag v-if="form.orderStatus == 4">退款申请中</a-tag>
+          <a-tag v-if="form.orderStatus == 5">退款被拒绝</a-tag>
+          <a-tag v-if="form.orderStatus == 6">退款成功</a-tag>
+          <a-tag v-if="form.orderStatus == 7">客户端申请退款</a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="买家信息"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ form.name }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="手机号码"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ form.phone }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="交易流水号"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ form.wechatOrder }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="订单总金额"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          ￥{{ form.totalPrice }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="实付金额"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          ￥{{ form.payPrice }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="减少的金额"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          ￥{{ form.reducePrice }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="支付方式"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          <template v-if="form.payStatus == 1">
+            <a-tag v-if="form.payType == 0">余额支付</a-tag>
+            <a-tag v-if="form.payType == 1">微信支付</a-tag>
+            <a-tag v-if="form.payType == 2">积分</a-tag>
+            <a-tag v-if="form.payType == 3">支付宝</a-tag>
+            <a-tag v-if="form.payType == 4">现金</a-tag>
+            <a-tag v-if="form.payType == 5">POS机</a-tag>
+            <a-tag v-if="form.payType == 6">VIP月卡</a-tag>
+            <a-tag v-if="form.payType == 7">formVIP年卡</a-tag>
+            <a-tag v-if="form.payType == 8">formVIP次卡</a-tag>
+            <a-tag v-if="form.payType == 9">formIC月卡</a-tag>
+            <a-tag v-if="form.payType == 10">formIC年卡</a-tag>
+            <a-tag v-if="form.payType == 11">formIC次卡</a-tag>
+            <a-tag v-if="form.payType == 12">form免费</a-tag>
+            <a-tag v-if="form.payType == 13">formVIP充值卡</a-tag>
+            <a-tag v-if="form.payType == 14">formIC充值卡</a-tag>
+            <a-tag v-if="form.payType == 15">form积分支付</a-tag>
+            <a-tag v-if="form.payType == 16">formVIP季卡</a-tag>
+            <a-tag v-if="form.payType == 17">formIC季卡</a-tag>
+          </template>
+          <template v-else>
+            <span></span>
+          </template>
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="支付状态"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          <a-tag v-if="form.payStatus == 1" color="green"
+            ><CheckOutlined class="tag-icon" />已付款</a-tag
+          >
+          <a-tag v-if="form.payStatus == 0" color="error"
+            ><CloseOutlined class="tag-icon" />未付款</a-tag
+          >
+          <a-tag v-if="form.payStatus == 3" color="cyan"
+            ><CoffeeOutlined class="tag-icon" />未付款,占场中</a-tag
+          >
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="付款时间"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ toDateString(form.payTime, 'yyyy-MM-dd HH:mm') }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="下单时间"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ toDateString(form.createTime, 'yyyy-MM-dd HH:mm') }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="信息备注"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          <div
+            >{{ form.siteName }} {{ form.dateTime }} ￥{{
+              form.totalPrice
+            }}元</div
+          >
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-card>
+    <a-card class="order-card" :bordered="false">
+      <a-spin :spinning="loading">
+        <a-table
+          :data-source="orderInfo"
+          :columns="columns"
+          :pagination="false"
+        />
+      </a-spin>
+    </a-card>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form } from 'ant-design-vue';
+  import { assignObject } from 'ele-admin-pro';
+  import { ColumnItem } from 'ele-admin-pro/es/ele-pro-table/types';
+  import {
+    CheckOutlined,
+    CloseOutlined,
+    CoffeeOutlined
+  } from '@ant-design/icons-vue';
+  import { BookingOrder } from '@/api/booking/bookingOrder/model';
+  import { BookingOrderInfo } from '@/api/booking/bookingOrderInfo/model';
+  import { pageBookingOrderInfo } from '@/api/booking/bookingOrderInfo';
+  import { toDateString } from 'ele-admin-pro';
+
+  const useForm = Form.useForm;
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BookingOrder | null;
+  }>();
+
+  export interface step {
+    title?: String | undefined;
+    subTitle?: String | undefined;
+    description?: String | undefined;
+  }
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  // 是否显示最大化切换按钮
+  const maxAble = ref(true);
+  // 订单信息
+  const orderInfo = ref<BookingOrderInfo[]>([]);
+
+  // 步骤条
+  const steps = ref<step[]>([
+    {
+      title: '报餐',
+      description: undefined
+    },
+    {
+      title: '付款',
+      description: undefined
+    },
+    {
+      title: '发餐',
+      description: undefined
+    },
+    {
+      title: '取餐',
+      description: undefined
+    },
+    {
+      title: '完成',
+      description: undefined
+    }
+  ]);
+  const active = ref(2);
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 订单信息
+  const form = reactive<BookingOrder>({
+    id: undefined,
+    orderNum: undefined,
+    wechatOrder: undefined,
+    refundOrder: undefined,
+    sid: undefined,
+    uid: undefined,
+    cid: undefined,
+    vid: undefined,
+    aid: undefined,
+    adminId: undefined,
+    code: undefined,
+    name: undefined,
+    phone: undefined,
+    totalPrice: undefined,
+    reducePrice: undefined,
+    payPrice: undefined,
+    price: undefined,
+    money: undefined,
+    dateTime: undefined,
+    refundMoney: undefined,
+    coachPrice: undefined,
+    coachId: undefined,
+    payType: undefined,
+    payStatus: undefined,
+    orderStatus: undefined,
+    type: undefined,
+    qrcode: undefined,
+    desc2: undefined,
+    returnNum: undefined,
+    returnMoney: undefined,
+    startTime: undefined,
+    isInvoice: undefined,
+    createTime: undefined,
+    updateTime: undefined,
+    payTime: undefined,
+    refundTime: undefined,
+    refundApplyTime: undefined,
+    checkBill: undefined,
+    comments: undefined,
+    tenantId: undefined,
+    siteName: undefined
+  });
+
+  // 请求状态
+  const loading = ref(true);
+
+  const { resetFields } = useForm(form);
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '场馆名称',
+      dataIndex: 'siteName',
+      key: 'siteName',
+      align: 'center'
+    },
+    {
+      title: '场地',
+      dataIndex: 'fieldName',
+      align: 'center'
+    },
+    {
+      title: '价格',
+      dataIndex: 'price',
+      align: 'center'
+    },
+    {
+      title: '儿童价',
+      dataIndex: 'childrenPrice',
+      align: 'center'
+    },
+    {
+      title: '成人数',
+      dataIndex: 'adultNum',
+      align: 'center'
+    },
+    {
+      title: '儿童数',
+      dataIndex: 'childrenNum',
+      align: 'center'
+    },
+    {
+      title: '预定信息',
+      dataIndex: 'dateTime',
+      key: 'dateTime',
+      align: 'center'
+    },
+    {
+      title: '是否免费',
+      dataIndex: 'isFree',
+      align: 'center',
+      customRender: ({ text }) => ['', '免费', '付费'][text]
+    }
+  ]);
+
+  /* 制作步骤条 */
+  const loadSteps = (order) => {
+    steps.value = [];
+    steps.value.push({
+      title: '下单'
+    });
+    steps.value.push({
+      title: '付款'
+    });
+    steps.value.push({
+      title: '发货'
+    });
+    steps.value.push({
+      title: '收货'
+    });
+    steps.value.push({
+      title: '完成'
+    });
+
+    // 下单
+    if (order.payStatus == 10) {
+      active.value = 0;
+      steps.value[0].description = order.createTime;
+    }
+    // 付款
+    if (order.payStatus == 20) {
+      active.value = 1;
+      steps.value[0].description = order.createTime;
+      steps.value[1].description = order.payTime;
+    }
+    // 发货
+    if (order.payStatus == 20 && order.deliveryStatus == 20) {
+      active.value = 2;
+      steps.value[0].description = order.createTime;
+      steps.value[1].description = order.payTime;
+      steps.value[2].description = order.deliveryTime;
+    }
+    // 收货
+    if (order.payStatus == 20 && order.receiptStatus == 20) {
+      active.value = 3;
+      steps.value[0].description = order.createTime;
+      steps.value[1].description = order.payTime;
+      steps.value[2].description = order.deliveryTime;
+      steps.value[3].description = order.receiptTime;
+    }
+    // 完成
+    if (order.payStatus == 20 && order.orderStatus == 30) {
+      active.value = 4;
+      steps.value[0].description = order.createTime;
+      steps.value[1].description = order.payTime;
+      steps.value[2].description = order.deliveryTime;
+      steps.value[3].description = order.receiptTime;
+    }
+    // 已取消
+    if (order.orderStatus == 20) {
+      active.value = 4;
+    }
+  };
+
+  // const getOrderInfo = () => {
+  //   const orderId = props.data?.orderId;
+  //   listOrderInfo({ orderId }).then((data) => {
+  //     orderInfo.value = data.filter((d) => d.totalNum > 0);
+  //   });
+  // };
+
+  /* 保存编辑 */
+  const save = () => {};
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          loading.value = true;
+          assignObject(form, props.data);
+          pageBookingOrderInfo({ oid: form.id }).then((res) => {
+            if (res?.list) {
+              orderInfo.value = res?.list;
+            }
+            loading.value = false;
+          });
+          loadSteps(props.data);
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>
+<style lang="less" scoped>
+  .order-card {
+    margin-bottom: 20px;
+  }
+  .ant-form-item {
+    margin-bottom: 5px;
+  }
+  .order-info {
+    display: flex;
+    .info {
+      padding-left: 5px;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+  .tag-icon {
+    padding-right: 6px;
+  }
+</style>

src/views/shop/bookingOrder/components/search.vue

@@ -0,0 +1,221 @@
+<!-- 搜索表单 -->
+<template>
+  <div class="search">
+    <a-space class="flex items-center" :size="10" style="flex-wrap: wrap">
+      <span class="text-gray-400">付款状态</span>
+      <a-radio-group v-model:value="where.payStatus" @change="search">
+        <a-radio-button :value="2">未付款</a-radio-button>
+        <a-radio-button :value="1">已付款</a-radio-button>
+      </a-radio-group>
+      <span class="text-gray-400">订单状态</span>
+      <a-radio-group v-model:value="where.orderStatus" @change="search">
+        <a-radio-button :value="0">未使用</a-radio-button>
+        <a-radio-button :value="1">已完成</a-radio-button>
+        <a-radio-button :value="2">未使用</a-radio-button>
+        <a-radio-button :value="3">已取消</a-radio-button>
+        <a-radio-button :value="4">退款中</a-radio-button>
+        <a-radio-button :value="5">退款被拒</a-radio-button>
+        <a-radio-button :value="6">退款成功</a-radio-button>
+      </a-radio-group>
+      <span class="text-gray-400">开票状态</span>
+      <a-radio-group v-model:value="where.isInvoice" @change="search">
+        <a-radio-button :value="0">未开票</a-radio-button>
+        <a-radio-button :value="1">已开票</a-radio-button>
+        <a-radio-button :value="2">不能开票</a-radio-button>
+      </a-radio-group>
+      <span class="text-gray-400">付款方式</span>
+      <a-radio-group v-model:value="where.payType" @change="search">
+        <a-radio-button :value="1">微信支付</a-radio-button>
+        <a-radio-button :value="2">余额支付</a-radio-button>
+        <a-radio-button :value="3">支付宝</a-radio-button>
+        <a-radio-button :value="4">现金</a-radio-button>
+        <a-radio-button :value="5">POS机</a-radio-button>
+        <a-radio-button :value="6">VIP月卡</a-radio-button>
+        <a-radio-button :value="7">VIP年卡</a-radio-button>
+        <a-radio-button :value="8">VIP次卡</a-radio-button>
+        <a-radio-button :value="9">IC月卡</a-radio-button>
+        <a-radio-button :value="10">IC年卡</a-radio-button>
+        <a-radio-button :value="11">IC次卡</a-radio-button>
+        <a-radio-button :value="12">免费</a-radio-button>
+        <a-radio-button :value="13">VIP充值卡</a-radio-button>
+        <a-radio-button :value="14">IC充值卡</a-radio-button>
+        <a-radio-button :value="15">积分支付</a-radio-button>
+        <a-radio-button :value="16">VIP季卡</a-radio-button>
+        <a-radio-button :value="17">IC季卡</a-radio-button>
+      </a-radio-group>
+    </a-space>
+    <a-space :size="10" class="mt-5" style="flex-wrap: wrap">
+      <SelectBookingSite
+        :placeholder="`选择场馆`"
+        class="input-item"
+        v-model:value="where.siteName"
+        @done="chooseSiteId"
+      />
+      <a-range-picker
+        v-model:value="dateRange"
+        @change="search"
+        value-format="YYYY-MM-DD"
+        class="ele-fluid"
+      />
+      <a-input-search
+        allow-clear
+        placeholder="请输入订单号|编号|手机号"
+        v-model:value="where.keywords"
+        @pressEnter="search"
+        @search="search"
+        style="width: 380px"
+      />
+      <a-button @click="reset">重置</a-button>
+      <a-button class="ele-btn-icon" :disabled="loading" @click="handleExport">
+        <template #icon>
+          <download-outlined />
+        </template>
+        <span>导出订单</span>
+      </a-button>
+    </a-space>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import useSearch from '@/utils/use-search';
+  import { ref, watch } from 'vue';
+  import { BookingOrderInfoParam } from '@/api/booking/bookingOrderInfo/model';
+  import { utils, writeFile } from 'xlsx';
+  import { message } from 'ant-design-vue';
+  import { toDateString } from 'ele-admin-pro';
+  import dayjs from 'dayjs';
+  import { listBookingOrder } from '@/api/booking/bookingOrder';
+  import {
+    BookingOrder,
+    BookingOrderParam
+  } from '@/api/booking/bookingOrder/model';
+  import { BookingSite } from '@/api/booking/bookingSite/model';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: BookingOrderInfoParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'advanced'): void;
+  }>();
+
+  // 表单数据
+  const { where, resetFields } = useSearch<BookingOrderParam>({
+    sid: undefined,
+    siteName: undefined,
+    createTimeStart: undefined,
+    createTimeEnd: undefined,
+    timeStart: undefined,
+    timeEnd: undefined,
+    categoryId: undefined,
+    keywords: undefined
+  });
+  // 请求状态
+  const loading = ref(false);
+  // 日期范围选择
+  const dateRange = ref<[string, string]>(['', '']);
+  const orders = ref<BookingOrder[] | any[]>();
+  const xlsFileName = ref<string>();
+
+  /* 搜索 */
+  const search = () => {
+    const [d1, d2] = dateRange.value ?? [];
+    xlsFileName.value = `${d1}至${d2}`;
+    where.timeStart = dayjs(d1).valueOf() / 1000;
+    where.timeEnd = dayjs(d2).valueOf() / 1000;
+    // where.createTimeStart = d1 ? d1 + ' 00:00:00' : undefined;
+    // where.createTimeEnd = d2 ? d2 + ' 00:00:00' : undefined;
+    emit('search', {
+      ...where
+    });
+  };
+
+  const chooseSiteId = (data: BookingSite) => {
+    where.sid = data.id;
+    where.siteName = data.name;
+    search();
+  };
+
+  /*  重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+
+  // 导出
+  const handleExport = async () => {
+    loading.value = true;
+    const array: (string | number)[][] = [
+      [
+        '订单号',
+        '订单编号',
+        '姓名',
+        '电话号码',
+        '预定信息',
+        '消费金额',
+        '实付金额',
+        '下单日期'
+      ]
+    ];
+    await listBookingOrder(where)
+      .then((list) => {
+        orders.value = list;
+        orders.value?.forEach((d: BookingOrder) => {
+          array.push([
+            `${d.id}`,
+            `${d.orderNum}`,
+            `${d.name}`,
+            `${d.phone}`,
+            `${d.siteName} ${d.dateTime} ${d.totalPrice}`,
+            `${d.totalPrice}`,
+            `${d.payPrice}`,
+            `${toDateString(d.payTime)}`
+          ]);
+        });
+        const sheetName = `订单数据导出`;
+        const workbook = {
+          SheetNames: [sheetName],
+          Sheets: {}
+        };
+        const sheet = utils.aoa_to_sheet(array);
+        workbook.Sheets[sheetName] = sheet;
+        // 设置列宽
+        sheet['!cols'] = [
+          { wch: 10 },
+          { wch: 10 },
+          { wch: 10 },
+          { wch: 10 },
+          { wch: 20 },
+          { wch: 40 },
+          { wch: 10 }
+        ];
+        message.loading('正在导出...');
+        setTimeout(() => {
+          writeFile(
+            workbook,
+            `${
+              where.createTimeEnd ? xlsFileName.value + '_' : ''
+            }${sheetName}.xlsx`
+          );
+          loading.value = false;
+        }, 2000);
+      })
+      .catch((msg) => {
+        message.error(msg);
+        loading.value = false;
+      })
+      .finally(() => {});
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingOrder/index.vue

@@ -0,0 +1,475 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="id"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          :scroll="{ x: 800 }"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'dateTime'">
+              <div>{{ record.siteName }}</div>
+              <div>{{ record.dateTime }} ￥{{ record.totalPrice }}元</div>
+            </template>
+            <template v-if="column.key === 'payType'">
+              <template v-if="record.payStatus == 1">
+                <a-tag v-if="record.payType == 0">余额支付</a-tag>
+                <a-tag v-if="record.payType == 1"
+                  ><WechatOutlined class="tag-icon" />微信支付</a-tag
+                >
+                <a-tag v-if="record.payType == 2">积分</a-tag>
+                <a-tag v-if="record.payType == 3"
+                  ><AlipayCircleOutlined class="tag-icon" />支付宝</a-tag
+                >
+                <a-tag v-if="record.payType == 4"
+                  ><IdcardOutlined class="tag-icon" />现金</a-tag
+                >
+                <a-tag v-if="record.payType == 5"
+                  ><IdcardOutlined class="tag-icon" />POS机</a-tag
+                >
+                <a-tag v-if="record.payType == 6"
+                  ><IdcardOutlined class="tag-icon" />VIP月卡</a-tag
+                >
+                <a-tag v-if="record.payType == 7"
+                  ><IdcardOutlined class="tag-icon" />VIP年卡</a-tag
+                >
+                <a-tag v-if="record.payType == 8"
+                  ><IdcardOutlined class="tag-icon" />VIP次卡</a-tag
+                >
+                <a-tag v-if="record.payType == 9"
+                  ><IdcardOutlined class="tag-icon" />IC月卡</a-tag
+                >
+                <a-tag v-if="record.payType == 10"
+                  ><IdcardOutlined class="tag-icon" />IC年卡</a-tag
+                >
+                <a-tag v-if="record.payType == 11"
+                  ><IdcardOutlined class="tag-icon" />IC次卡</a-tag
+                >
+                <a-tag v-if="record.payType == 12"
+                  ><IdcardOutlined class="tag-icon" />免费</a-tag
+                >
+                <a-tag v-if="record.payType == 13"
+                  ><IdcardOutlined class="tag-icon" />VIP充值卡</a-tag
+                >
+                <a-tag v-if="record.payType == 14"
+                  ><IdcardOutlined class="tag-icon" />IC充值卡</a-tag
+                >
+                <a-tag v-if="record.payType == 15"
+                  ><IdcardOutlined class="tag-icon" />积分支付</a-tag
+                >
+                <a-tag v-if="record.payType == 16"
+                  ><IdcardOutlined class="tag-icon" />VIP季卡</a-tag
+                >
+                <a-tag v-if="record.payType == 17"
+                  ><IdcardOutlined class="tag-icon" />IC季卡</a-tag
+                >
+              </template>
+              <template v-else>
+                <span></span>
+              </template>
+            </template>
+            <template v-if="column.key === 'couponType'">
+              <a-tag v-if="record.couponType == 0">无</a-tag>
+              <a-tag v-if="record.couponType == 1" color="blue"
+                ><IdcardOutlined class="tag-icon" />抵扣优惠券</a-tag
+              >
+              <a-tag v-if="record.couponType == 2" color="blue"
+                ><IdcardOutlined class="tag-icon" />折扣优惠券</a-tag
+              >
+              <a-tag v-if="record.couponType == 3" color="blue"
+                ><IdcardOutlined class="tag-icon" />VIP月卡</a-tag
+              >
+              <a-tag v-if="record.couponType == 4" color="blue"
+                ><IdcardOutlined class="tag-icon" />VIP年卡</a-tag
+              >
+              <a-tag v-if="record.couponType == 5" color="blue"
+                ><IdcardOutlined class="tag-icon" />VIP次卡</a-tag
+              >
+              <a-tag v-if="record.couponType == 6" color="blue"
+                ><IdcardOutlined class="tag-icon" />VIP会员卡</a-tag
+              >
+              <a-tag v-if="record.couponType == 7" color="blue"
+                ><IdcardOutlined class="tag-icon" />IC月卡</a-tag
+              >
+              <a-tag v-if="record.couponType == 8" color="blue"
+                ><IdcardOutlined class="tag-icon" />IC年卡</a-tag
+              >
+              <a-tag v-if="record.couponType == 9" color="blue"
+                ><IdcardOutlined class="tag-icon" />IC次卡</a-tag
+              >
+              <a-tag v-if="record.couponType == 10" color="blue"
+                ><IdcardOutlined class="tag-icon" />IC会员卡</a-tag
+              >
+              <a-tag v-if="record.couponType == 11" color="blue"
+                ><IdcardOutlined class="tag-icon" />免费订单</a-tag
+              >
+              <a-tag v-if="record.couponType == 12" color="blue"
+                ><IdcardOutlined class="tag-icon" />VIP充值卡</a-tag
+              >
+              <a-tag v-if="record.couponType == 13" color="blue"
+                ><IdcardOutlined class="tag-icon" />IC充值卡</a-tag
+              >
+              <a-tag v-if="record.couponType == 14" color="blue"
+                ><IdcardOutlined class="tag-icon" />VIP季卡</a-tag
+              >
+              <a-tag v-if="record.couponType == 15" color="blue"
+                ><IdcardOutlined class="tag-icon" />IC季卡</a-tag
+              >
+            </template>
+            <template v-if="column.key === 'payStatus'">
+              <a-tag v-if="record.payStatus == 2" color="error"
+                ><CloseOutlined class="tag-icon" />未付款</a-tag
+              >
+              <a-tag v-if="record.payStatus == 1" color="green"
+                ><CheckOutlined class="tag-icon" />已付款</a-tag
+              >
+              <!--              <a-tag v-if="record.payStatus == 3" color="cyan"-->
+              <!--                ><CoffeeOutlined class="tag-icon" />未付款,占场中</a-tag-->
+              <!--              >-->
+            </template>
+            <template v-if="column.key === 'orderInfo'">
+              {{ record.orderInfoList }}
+            </template>
+            <template v-if="column.key === 'orderStatus'">
+              <span v-if="record.orderStatus == 1" class="ele-text-success"
+                >已完成</span
+              >
+              <span v-if="record.orderStatus == 2" class="ele-text-placeholder"
+                >未使用</span
+              >
+              <span v-if="record.orderStatus == 3" class="ele-text-placeholder"
+                >已取消</span
+              >
+              <span v-if="record.orderStatus == 4" class="ele-text-warning"
+                >退款申请中</span
+              >
+              <span v-if="record.orderStatus == 5" class="ele-text-danger"
+                >退款被拒绝</span
+              >
+              <span v-if="record.orderStatus == 6" class="ele-text-heading"
+                >退款成功</span
+              >
+              <span v-if="record.orderStatus == 7" class="ele-text-warning"
+                >客户端申请退款</span
+              >
+              <span v-if="record.orderStatus == 9" class="ele-text-warning"
+                >未完成</span
+              >
+            </template>
+            <template v-if="column.key === 'isInvoice'">
+              <a-tag v-if="record.isInvoice == 1">未开</a-tag>
+              <a-tag v-if="record.isInvoice == 2" color="green">已开</a-tag>
+              <a-tag v-if="record.isInvoice == 3">不能开</a-tag>
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">详情</a>
+                <!--                <a-divider type="vertical" />-->
+                <!--                <a @click="openEdit(record)">编辑</a>-->
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+      <!-- 编辑弹窗 -->
+      <OrderInfo v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import {
+    ExclamationCircleOutlined,
+    CheckOutlined,
+    CloseOutlined,
+    ClockCircleOutlined,
+    IdcardOutlined,
+    WechatOutlined,
+    CoffeeOutlined,
+    AlipayCircleOutlined
+  } from '@ant-design/icons-vue';
+  import { EleProTable, toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import OrderInfo from './components/orderInfo.vue';
+  import {
+    pageBookingOrder,
+    removeBookingOrder,
+    removeBatchBookingOrder
+  } from '@/api/booking/bookingOrder';
+  import type {
+    BookingOrder,
+    BookingOrderParam
+  } from '@/api/booking/bookingOrder/model';
+  import { formatNumber } from 'ele-admin-pro/es';
+  import { getMerchantId } from '@/utils/common';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<BookingOrder[]>([]);
+  // 当前编辑数据
+  const current = ref<BookingOrder | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageBookingOrder({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '订单号',
+      dataIndex: 'id',
+      key: 'iod',
+      width: 90
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name',
+      align: 'center'
+    },
+    {
+      title: '手机号',
+      dataIndex: 'phone',
+      key: 'phone',
+      width: 120,
+      align: 'center'
+    },
+    {
+      title: '预约信息',
+      dataIndex: 'dateTime',
+      key: 'dateTime',
+      width: 120,
+      align: 'center'
+    },
+    {
+      title: '总额',
+      dataIndex: 'totalPrice',
+      key: 'totalPrice',
+      align: 'center',
+      customRender: ({ text }) => `￥${formatNumber(text)}`
+    },
+    {
+      title: '减少金额',
+      dataIndex: 'reducePrice',
+      key: 'reducePrice',
+      align: 'center',
+      customRender: ({ text }) => `￥${formatNumber(text)}`
+    },
+    {
+      title: '实付金额',
+      dataIndex: 'payPrice',
+      key: 'payPrice',
+      align: 'center',
+      customRender: ({ text }) => `￥${formatNumber(text)}`
+    },
+    {
+      title: '支付方式',
+      dataIndex: 'payType',
+      key: 'payType',
+      align: 'center'
+    },
+    {
+      title: '付款状态',
+      dataIndex: 'payStatus',
+      key: 'payStatus',
+      align: 'center'
+    },
+    {
+      title: '付款时间',
+      dataIndex: 'payTime',
+      key: 'payTime',
+      align: 'center',
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
+    },
+    {
+      title: '订单状态',
+      dataIndex: 'orderStatus',
+      key: 'orderStatus',
+      align: 'center'
+    },
+    {
+      title: '优惠类型',
+      dataIndex: 'couponType',
+      key: 'couponType',
+      align: 'center'
+    },
+    {
+      title: '是否已开票',
+      dataIndex: 'isInvoice',
+      key: 'isInvoice',
+      align: 'center'
+    },
+    // {
+    //   title: '类型',
+    //   dataIndex: 'type',
+    //   key: 'type',
+    //   align: 'center',
+    //   customRender: ({ text }) =>
+    //     ['商城订单', '客户预定', '俱乐部训练场', '活动订场'][text]
+    // },
+    // {
+    //   title: '申请退款时间',
+    //   dataIndex: 'refundApplyTime',
+    //   key: 'refundApplyTime',
+    //   align: 'center',
+    //   customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
+    // },
+    // {
+    //   title: '备注',
+    //   dataIndex: 'comments',
+    //   key: 'comments',
+    //   align: 'center'
+    // },
+    {
+      title: '操作',
+      key: 'action',
+      width: 120,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: BookingOrderParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: BookingOrder) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: BookingOrder) => {
+    const hide = message.loading('请求中..', 0);
+    removeBookingOrder(row.id)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchBookingOrder(selection.value.map((d) => d.id))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: BookingOrder) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  import * as MenuIcons from '@/layout/menu-icons';
+  export default {
+    name: 'BookingOrder',
+    components: MenuIcons
+  };
+</script>
+<style lang="less" scoped>
+  .tag-icon {
+    padding-right: 6px;
+  }
+</style>

src/views/shop/bookingOrderInfo/components/bookingOrderInfoEdit.vue

@@ -0,0 +1,300 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑' : '添加'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="关联订单表id" name="oid">
+        <a-input
+          allow-clear
+          placeholder="请输入关联订单表id"
+          v-model:value="form.oid"
+        />
+      </a-form-item>
+      <a-form-item label="关联场馆id" name="sid">
+        <a-input
+          allow-clear
+          placeholder="请输入关联场馆id"
+          v-model:value="form.sid"
+        />
+      </a-form-item>
+      <a-form-item label="关联场地id" name="fid">
+        <a-input
+          allow-clear
+          placeholder="请输入关联场地id"
+          v-model:value="form.fid"
+        />
+      </a-form-item>
+      <a-form-item label="场馆" name="siteName">
+        <a-input
+          allow-clear
+          placeholder="请输入场馆"
+          v-model:value="form.siteName"
+        />
+      </a-form-item>
+      <a-form-item label="场地" name="fieldName">
+        <a-input
+          allow-clear
+          placeholder="请输入场地"
+          v-model:value="form.fieldName"
+        />
+      </a-form-item>
+      <a-form-item label="预约时间段" name="dateTime">
+        <a-input
+          allow-clear
+          placeholder="请输入预约时间段"
+          v-model:value="form.dateTime"
+        />
+      </a-form-item>
+      <a-form-item label="单价" name="price">
+        <a-input
+          allow-clear
+          placeholder="请输入单价"
+          v-model:value="form.price"
+        />
+      </a-form-item>
+      <a-form-item label="儿童价" name="childrenPrice">
+        <a-input
+          allow-clear
+          placeholder="请输入儿童价"
+          v-model:value="form.childrenPrice"
+        />
+      </a-form-item>
+      <a-form-item label="成人人数" name="adultNum">
+        <a-input
+          allow-clear
+          placeholder="请输入成人人数"
+          v-model:value="form.adultNum"
+        />
+      </a-form-item>
+      <a-form-item label="儿童人数" name="childrenNum">
+        <a-input
+          allow-clear
+          placeholder="请输入儿童人数"
+          v-model:value="form.childrenNum"
+        />
+      </a-form-item>
+      <a-form-item label="1已付款，2未付款，3无需付款或占用状态" name="payStatus">
+        <a-input
+          allow-clear
+          placeholder="请输入1已付款，2未付款，3无需付款或占用状态"
+          v-model:value="form.payStatus"
+        />
+      </a-form-item>
+      <a-form-item label="是否免费：1免费、2收费" name="isFree">
+        <a-input
+          allow-clear
+          placeholder="请输入是否免费：1免费、2收费"
+          v-model:value="form.isFree"
+        />
+      </a-form-item>
+      <a-form-item label="是否支持儿童票：1支持，2不支持" name="isChildren">
+        <a-input
+          allow-clear
+          placeholder="请输入是否支持儿童票：1支持，2不支持"
+          v-model:value="form.isChildren"
+        />
+      </a-form-item>
+      <a-form-item label="预订类型：1全场，2半场" name="type">
+        <a-input
+          allow-clear
+          placeholder="请输入预订类型：1全场，2半场"
+          v-model:value="form.type"
+        />
+      </a-form-item>
+      <a-form-item label="组合数据:日期+时间段+场馆id+场地id" name="mergeData">
+        <a-input
+          allow-clear
+          placeholder="请输入组合数据:日期+时间段+场馆id+场地id"
+          v-model:value="form.mergeData"
+        />
+      </a-form-item>
+      <a-form-item label="开场时间" name="startTime">
+        <a-input
+          allow-clear
+          placeholder="请输入开场时间"
+          v-model:value="form.startTime"
+        />
+      </a-form-item>
+      <a-form-item label="下单时间" name="orderTime">
+        <a-input
+          allow-clear
+          placeholder="请输入下单时间"
+          v-model:value="form.orderTime"
+        />
+      </a-form-item>
+      <a-form-item label="毫秒时间戳" name="timeFlag">
+        <a-input
+          allow-clear
+          placeholder="请输入毫秒时间戳"
+          v-model:value="form.timeFlag"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addBookingOrderInfo, updateBookingOrderInfo } from '@/api/booking/bookingOrderInfo';
+  import { BookingOrderInfo } from '@/api/booking/bookingOrderInfo/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BookingOrderInfo | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<BookingOrderInfo>({
+    id: undefined,
+    oid: undefined,
+    sid: undefined,
+    fid: undefined,
+    siteName: undefined,
+    fieldName: undefined,
+    dateTime: undefined,
+    price: undefined,
+    childrenPrice: undefined,
+    adultNum: undefined,
+    childrenNum: undefined,
+    payStatus: undefined,
+    isFree: undefined,
+    isChildren: undefined,
+    type: undefined,
+    mergeData: undefined,
+    startTime: undefined,
+    orderTime: undefined,
+    timeFlag: undefined,
+    tenantId: undefined
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    bookingOrderInfoName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateBookingOrderInfo : addBookingOrderInfo;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if(props.data.image){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingOrderInfo/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingOrderInfo/index.vue

@@ -0,0 +1,314 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="bookingOrderInfoId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <BookingOrderInfoEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import BookingOrderInfoEdit from './components/bookingOrderInfoEdit.vue';
+  import { pageBookingOrderInfo, removeBookingOrderInfo, removeBatchBookingOrderInfo } from '@/api/booking/bookingOrderInfo';
+  import type { BookingOrderInfo, BookingOrderInfoParam } from '@/api/booking/bookingOrderInfo/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<BookingOrderInfo[]>([]);
+  // 当前编辑数据
+  const current = ref<BookingOrderInfo | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageBookingOrderInfo({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '',
+      dataIndex: 'id',
+      key: 'id',
+      align: 'center',
+      width: 90,
+    },
+    {
+      title: '关联订单表id',
+      dataIndex: 'oid',
+      key: 'oid',
+      align: 'center',
+    },
+    {
+      title: '关联场馆id',
+      dataIndex: 'sid',
+      key: 'sid',
+      align: 'center',
+    },
+    {
+      title: '关联场地id',
+      dataIndex: 'fid',
+      key: 'fid',
+      align: 'center',
+    },
+    {
+      title: '场馆',
+      dataIndex: 'siteName',
+      key: 'siteName',
+      align: 'center',
+    },
+    {
+      title: '场地',
+      dataIndex: 'fieldName',
+      key: 'fieldName',
+      align: 'center',
+    },
+    {
+      title: '预约时间段',
+      dataIndex: 'dateTime',
+      key: 'dateTime',
+      align: 'center',
+    },
+    {
+      title: '单价',
+      dataIndex: 'price',
+      key: 'price',
+      align: 'center',
+    },
+    {
+      title: '儿童价',
+      dataIndex: 'childrenPrice',
+      key: 'childrenPrice',
+      align: 'center',
+    },
+    {
+      title: '成人人数',
+      dataIndex: 'adultNum',
+      key: 'adultNum',
+      align: 'center',
+    },
+    {
+      title: '儿童人数',
+      dataIndex: 'childrenNum',
+      key: 'childrenNum',
+      align: 'center',
+    },
+    {
+      title: '1已付款，2未付款，3无需付款或占用状态',
+      dataIndex: 'payStatus',
+      key: 'payStatus',
+      align: 'center',
+    },
+    {
+      title: '是否免费：1免费、2收费',
+      dataIndex: 'isFree',
+      key: 'isFree',
+      align: 'center',
+    },
+    {
+      title: '是否支持儿童票：1支持，2不支持',
+      dataIndex: 'isChildren',
+      key: 'isChildren',
+      align: 'center',
+    },
+    {
+      title: '预订类型：1全场，2半场',
+      dataIndex: 'type',
+      key: 'type',
+      align: 'center',
+    },
+    {
+      title: '组合数据:日期+时间段+场馆id+场地id',
+      dataIndex: 'mergeData',
+      key: 'mergeData',
+      align: 'center',
+    },
+    {
+      title: '开场时间',
+      dataIndex: 'startTime',
+      key: 'startTime',
+      align: 'center',
+    },
+    {
+      title: '下单时间',
+      dataIndex: 'orderTime',
+      key: 'orderTime',
+      align: 'center',
+    },
+    {
+      title: '毫秒时间戳',
+      dataIndex: 'timeFlag',
+      key: 'timeFlag',
+      align: 'center',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: BookingOrderInfoParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: BookingOrderInfo) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: BookingOrderInfo) => {
+    const hide = message.loading('请求中..', 0);
+    removeBookingOrderInfo(row.bookingOrderInfoId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchBookingOrderInfo(selection.value.map((d) => d.bookingOrderInfoId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: BookingOrderInfo) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'BookingOrderInfo'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/bookingPeriod/components/bookingPeriodEdit.vue

@@ -0,0 +1,268 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑' : '添加'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="时段" name="timePeriod">
+        <a-input
+          allow-clear
+          placeholder="请输入时段"
+          v-model:value="form.timePeriod"
+        />
+      </a-form-item>
+      <a-form-item label="价格" name="price">
+        <a-input
+          allow-clear
+          placeholder="请输入价格"
+          v-model:value="form.price"
+        />
+      </a-form-item>
+      <a-form-item label="每日不同价格" name="prices">
+        <a-input
+          allow-clear
+          placeholder="请输入每日不同价格"
+          v-model:value="form.prices"
+        />
+      </a-form-item>
+      <a-form-item label="半场价格" name="halfPrice">
+        <a-input
+          allow-clear
+          placeholder="请输入半场价格"
+          v-model:value="form.halfPrice"
+        />
+      </a-form-item>
+      <a-form-item label="每日不同半场价格" name="halfPrices">
+        <a-input
+          allow-clear
+          placeholder="请输入每日不同半场价格"
+          v-model:value="form.halfPrices"
+        />
+      </a-form-item>
+      <a-form-item label="儿童价" name="childrenPrice">
+        <a-input
+          allow-clear
+          placeholder="请输入儿童价"
+          v-model:value="form.childrenPrice"
+        />
+      </a-form-item>
+      <a-form-item label="星期选择" name="week">
+        <a-input
+          allow-clear
+          placeholder="请输入星期选择"
+          v-model:value="form.week"
+        />
+      </a-form-item>
+      <a-form-item label="排序" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="关联id" name="sid">
+        <a-input
+          allow-clear
+          placeholder="请输入关联id"
+          v-model:value="form.sid"
+        />
+      </a-form-item>
+      <a-form-item label="是否关闭，1开启，2关闭" name="isStatus">
+        <a-input
+          allow-clear
+          placeholder="请输入是否关闭，1开启，2关闭"
+          v-model:value="form.isStatus"
+        />
+      </a-form-item>
+      <a-form-item label="是否免费：1免费，2收费" name="isFree">
+        <a-input
+          allow-clear
+          placeholder="请输入是否免费：1免费，2收费"
+          v-model:value="form.isFree"
+        />
+      </a-form-item>
+      <a-form-item label="开始时间" name="startTime">
+        <a-input
+          allow-clear
+          placeholder="请输入开始时间"
+          v-model:value="form.startTime"
+        />
+      </a-form-item>
+      <a-form-item label="" name="updateTime">
+        <a-input
+          allow-clear
+          placeholder="请输入"
+          v-model:value="form.updateTime"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addBookingPeriod, updateBookingPeriod } from '@/api/booking/bookingPeriod';
+  import { BookingPeriod } from '@/api/booking/bookingPeriod/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BookingPeriod | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<BookingPeriod>({
+    id: undefined,
+    timePeriod: undefined,
+    price: undefined,
+    prices: undefined,
+    halfPrice: undefined,
+    halfPrices: undefined,
+    childrenPrice: undefined,
+    week: undefined,
+    sortNumber: undefined,
+    sid: undefined,
+    isStatus: undefined,
+    isFree: undefined,
+    startTime: undefined,
+    createTime: undefined,
+    updateTime: undefined,
+    tenantId: undefined,
+    bookingPeriodId: undefined,
+    bookingPeriodName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    bookingPeriodName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateBookingPeriod : addBookingPeriod;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if(props.data.image){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingPeriod/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingPeriod/index.vue

@@ -0,0 +1,297 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="id"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <BookingPeriodEdit
+        v-model:visible="showEdit"
+        :data="current"
+        @done="reload"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import BookingPeriodEdit from './components/bookingPeriodEdit.vue';
+  import {
+    pageBookingPeriod,
+    removeBookingPeriod,
+    removeBatchBookingPeriod
+  } from '@/api/booking/bookingPeriod';
+  import type {
+    BookingPeriod,
+    BookingPeriodParam
+  } from '@/api/booking/bookingPeriod/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<BookingPeriod[]>([]);
+  // 当前编辑数据
+  const current = ref<BookingPeriod | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageBookingPeriod({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '时段',
+      dataIndex: 'timePeriod',
+      key: 'timePeriod',
+      align: 'center'
+    },
+    {
+      title: '价格',
+      dataIndex: 'price',
+      key: 'price',
+      align: 'center'
+    },
+    {
+      title: '每日不同价格',
+      dataIndex: 'prices',
+      key: 'prices',
+      align: 'center'
+    },
+    {
+      title: '半场价格',
+      dataIndex: 'halfPrice',
+      key: 'halfPrice',
+      align: 'center'
+    },
+    {
+      title: '每日不同半场价格',
+      dataIndex: 'halfPrices',
+      key: 'halfPrices',
+      align: 'center'
+    },
+    {
+      title: '儿童价',
+      dataIndex: 'childrenPrice',
+      key: 'childrenPrice',
+      align: 'center'
+    },
+    {
+      title: '星期选择',
+      dataIndex: 'week',
+      key: 'week',
+      align: 'center'
+    },
+    {
+      title: '排序',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center'
+    },
+    {
+      title: '关联id',
+      dataIndex: 'sid',
+      key: 'sid',
+      align: 'center'
+    },
+    {
+      title: '是否关闭，1开启，2关闭',
+      dataIndex: 'isStatus',
+      key: 'isStatus',
+      align: 'center'
+    },
+    {
+      title: '是否免费：1免费，2收费',
+      dataIndex: 'isFree',
+      key: 'isFree',
+      align: 'center'
+    },
+    {
+      title: '开始时间',
+      dataIndex: 'startTime',
+      key: 'startTime',
+      align: 'center'
+    },
+    {
+      title: '儿童价',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '',
+      dataIndex: 'updateTime',
+      key: 'updateTime',
+      align: 'center'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: BookingPeriodParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: BookingPeriod) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: BookingPeriod) => {
+    const hide = message.loading('请求中..', 0);
+    removeBookingPeriod(row.bookingPeriodId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchBookingPeriod(selection.value.map((d) => d.bookingPeriodId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: BookingPeriod) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'BookingPeriod'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/bookingSite/components/bookingSiteEdit.vue

@@ -0,0 +1,373 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑' : '添加'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="场地名称" name="name">
+        <a-input
+          allow-clear
+          placeholder="请输入场地名称"
+          v-model:value="form.name"
+        />
+      </a-form-item>
+      <a-form-item label="封面图" name="thumb">
+        <SelectFile
+          :placeholder="`请选择图片`"
+          :limit="1"
+          :data="images"
+          @done="chooseImage"
+          @del="onDeleteItem"
+        />
+      </a-form-item>
+      <a-form-item label="场馆图片" name="files">
+        <SelectFile
+          :placeholder="`请选择图片`"
+          :limit="9"
+          :data="files"
+          @done="chooseFiles"
+          @del="onDeleteFiles"
+        />
+      </a-form-item>
+      <a-form-item label="每小时价格" name="price">
+        <a-input-number
+          allow-clear
+          placeholder="请输入每小时价格"
+          v-model:value="form.price"
+        />
+      </a-form-item>
+      <a-form-item label="营业时间" name="businessTime">
+        <a-input
+          allow-clear
+          placeholder="请输入营业时间"
+          v-model:value="form.businessTime"
+        />
+      </a-form-item>
+      <a-form-item label="场馆地址" name="address">
+        <a-input
+          allow-clear
+          placeholder="请输入场馆地址"
+          v-model:value="form.address"
+        />
+      </a-form-item>
+      <a-form-item label="场馆介绍" name="info">
+        <!-- 编辑器 -->
+        <tinymce-editor
+          ref="editorRef"
+          class="content"
+          v-model:value="content"
+          :disabled="disabled"
+          :init="config"
+          placeholder="请输入场馆介绍内容"
+        />
+      </a-form-item>
+      <a-form-item label="场馆电话" name="tel">
+        <a-input
+          allow-clear
+          placeholder="请输入场馆电话"
+          v-model:value="form.tel"
+        />
+      </a-form-item>
+      <a-form-item label="类型" name="type">
+        <a-input
+          allow-clear
+          placeholder="请输入类型：1天，2小时"
+          v-model:value="form.type"
+        />
+      </a-form-item>
+      <a-form-item label="天数或小时" name="num">
+        <a-input
+          allow-clear
+          placeholder="请输入天数或小时"
+          v-model:value="form.num"
+        />
+      </a-form-item>
+      <a-form-item label="退款比率" name="proportion">
+        <a-input
+          allow-clear
+          placeholder="请输入退款比率"
+          v-model:value="form.proportion"
+        />
+      </a-form-item>
+      <!--      <a-form-item label="退款规则组" name="moneyJson">-->
+      <!--        <a-input-->
+      <!--          allow-clear-->
+      <!--          placeholder="请输入退款规则组"-->
+      <!--          v-model:value="form.moneyJson"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <a-form-item label="周末活动订场开关" name="weekendOpen">
+        <a-switch :checked="form.weekendOpen == 1" />
+      </a-form-item>
+      <a-form-item label="排序" name="sortNumber">
+        <a-input
+          allow-clear
+          placeholder="请输入排序"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addBookingSite, updateBookingSite } from '@/api/booking/bookingSite';
+  import { BookingSite } from '@/api/booking/bookingSite/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+  import TinymceEditor from '@/components/TinymceEditor/index.vue';
+  import { uploadOss } from '@/api/system/file';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+  const disabled = ref(false);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BookingSite | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+  const files = ref<ItemType[]>([]);
+  // 编辑器内容，双向绑定
+  const content = ref<any>('');
+
+  // 用户信息
+  const form = reactive<BookingSite>({
+    id: undefined,
+    name: undefined,
+    thumb: undefined,
+    price: undefined,
+    businessTime: undefined,
+    address: undefined,
+    info: undefined,
+    tel: undefined,
+    sortNumber: undefined,
+    type: undefined,
+    num: undefined,
+    proportion: undefined,
+    moneyJson: undefined,
+    createTime: undefined,
+    updateTime: undefined,
+    weekendOpen: undefined,
+    tenantId: undefined
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    bookingSiteName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.thumb = data.path;
+  };
+
+  const chooseFiles = (data: FileRecord) => {
+    files.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+  };
+
+  const onDeleteFiles = (index: number) => {
+    files.value.splice(index, 1);
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.thumb = '';
+  };
+
+  const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
+  const config = ref({
+    height: 450,
+    images_upload_handler: (blobInfo, success, error) => {
+      const file = blobInfo.blob();
+      const formData = new FormData();
+      formData.append('file', file, file.name);
+      uploadOss(file)
+        .then((res) => {
+          success(res.path);
+        })
+        .catch((msg) => {
+          error(msg);
+        });
+    },
+    // 自定义文件上传(这里使用把选择的文件转成 blob 演示)
+    file_picker_callback: (callback: any, _value: any, meta: any) => {
+      const input = document.createElement('input');
+      input.setAttribute('type', 'file');
+      // 设定文件可选类型
+      if (meta.filetype === 'image') {
+        input.setAttribute('accept', 'image/*');
+      } else if (meta.filetype === 'media') {
+        input.setAttribute('accept', 'video/*,.pdf');
+      }
+      input.onchange = () => {
+        const file = input.files?.[0];
+        if (!file) {
+          return;
+        }
+        if (meta.filetype === 'media') {
+          if (file.size / 1024 / 1024 > 200) {
+            editorRef.value?.alert({ content: '大小不能超过 200MB' });
+            return;
+          }
+          if (file.type.startsWith('application/pdf')) {
+            uploadOss(file).then((res) => {
+              const addPath = `<a href="${res.downloadUrl}" target="_blank">${res.name}</a>`;
+              content.value = content.value + addPath;
+            });
+            return;
+          }
+          if (!file.type.startsWith('video/')) {
+            editorRef.value?.alert({ content: '只能选择视频文件' });
+            return;
+          }
+          uploadOss(file).then((res) => {
+            callback(res.path);
+          });
+        }
+        // const reader = new FileReader();
+        // reader.onload = (e) => {
+        //   if (e.target?.result != null) {
+        //     const blob = new Blob([e.target.result], { type: file.type });
+        //     callback(URL.createObjectURL(blob));
+        //   }
+        // };
+        // reader.readAsArrayBuffer(file);
+      };
+      input.click();
+    }
+  });
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          info: content.value,
+          files: JSON.stringify(files.value)
+        };
+        const saveOrUpdate = isUpdate.value
+          ? updateBookingSite
+          : addBookingSite;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        files.value = [];
+        content.value = '';
+        if (props.data) {
+          assignObject(form, props.data);
+          if (form.info) {
+            content.value = form.info;
+          }
+          if (props.data.thumb) {
+            images.value.push({
+              uid: uuid(),
+              url: props.data.thumb,
+              status: 'done'
+            });
+          }
+          if (props.data.files) {
+            const arr = JSON.parse(props.data.files);
+            arr.map((item) => {
+              files.value.push({
+                uid: uuid(),
+                url: item.url,
+                status: 'done'
+              });
+            });
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingSite/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingSite/index.vue

@@ -0,0 +1,253 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="id"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          :need-page="false"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'thumb'">
+              <a-avatar :src="record.thumb" :width="50" />
+            </template>
+            <template v-if="column.key === 'price'">
+              <span>￥{{ formatNumber(record.price) }}</span>
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <BookingSiteEdit
+        v-model:visible="showEdit"
+        :data="current"
+        @done="reload"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { formatNumber } from 'ele-admin-pro/es';
+  import Search from './components/search.vue';
+  import BookingSiteEdit from './components/bookingSiteEdit.vue';
+  import {
+    pageBookingSite,
+    removeBookingSite,
+    removeBatchBookingSite,
+    listBookingSite
+  } from '@/api/booking/bookingSite';
+  import type {
+    BookingSite,
+    BookingSiteParam
+  } from '@/api/booking/bookingSite/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<BookingSite[]>([]);
+  // 当前编辑数据
+  const current = ref<BookingSite | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = () => {
+    return listBookingSite();
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+      width: 90
+    },
+    {
+      title: '场馆名称',
+      dataIndex: 'name',
+      key: 'name',
+      align: 'center'
+    },
+    {
+      title: '场馆图片',
+      dataIndex: 'thumb',
+      key: 'thumb',
+      align: 'center'
+    },
+    {
+      title: '每小时价格',
+      dataIndex: 'price',
+      key: 'price',
+      align: 'center'
+    },
+    {
+      title: '场馆位置',
+      dataIndex: 'address',
+      key: 'address',
+      align: 'center'
+    },
+    {
+      title: '场馆电话',
+      dataIndex: 'tel',
+      key: 'tel',
+      align: 'center'
+    },
+    {
+      title: '排序号',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center'
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm')
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: BookingSiteParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: BookingSite) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: BookingSite) => {
+    const hide = message.loading('请求中..', 0);
+    removeBookingSite(row.id)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchBookingSite(selection.value.map((d) => d.id))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: BookingSite) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'BookingSite'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/bookingUser/components/bookingUserEdit.vue

@@ -0,0 +1,274 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑' : '添加'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="用户唯一小程序id" name="openId">
+        <a-input
+          allow-clear
+          placeholder="请输入用户唯一小程序id"
+          v-model:value="form.openId"
+        />
+      </a-form-item>
+      <a-form-item label="小程序用户秘钥" name="sessionKey">
+        <a-input
+          allow-clear
+          placeholder="请输入小程序用户秘钥"
+          v-model:value="form.sessionKey"
+        />
+      </a-form-item>
+      <a-form-item label="用户名" name="username">
+        <a-input
+          allow-clear
+          placeholder="请输入用户名"
+          v-model:value="form.username"
+        />
+      </a-form-item>
+      <a-form-item label="头像地址" name="avatarUrl">
+        <a-input
+          allow-clear
+          placeholder="请输入头像地址"
+          v-model:value="form.avatarUrl"
+        />
+      </a-form-item>
+      <a-form-item label="1男，2女" name="gender">
+        <a-input
+          allow-clear
+          placeholder="请输入1男，2女"
+          v-model:value="form.gender"
+        />
+      </a-form-item>
+      <a-form-item label="国家" name="country">
+        <a-input
+          allow-clear
+          placeholder="请输入国家"
+          v-model:value="form.country"
+        />
+      </a-form-item>
+      <a-form-item label="省份" name="province">
+        <a-input
+          allow-clear
+          placeholder="请输入省份"
+          v-model:value="form.province"
+        />
+      </a-form-item>
+      <a-form-item label="城市" name="city">
+        <a-input
+          allow-clear
+          placeholder="请输入城市"
+          v-model:value="form.city"
+        />
+      </a-form-item>
+      <a-form-item label="手机号码" name="phone">
+        <a-input
+          allow-clear
+          placeholder="请输入手机号码"
+          v-model:value="form.phone"
+        />
+      </a-form-item>
+      <a-form-item label="积分" name="integral">
+        <a-input
+          allow-clear
+          placeholder="请输入积分"
+          v-model:value="form.integral"
+        />
+      </a-form-item>
+      <a-form-item label="余额" name="money">
+        <a-input
+          allow-clear
+          placeholder="请输入余额"
+          v-model:value="form.money"
+        />
+      </a-form-item>
+      <a-form-item label="" name="idcard">
+        <a-input
+          allow-clear
+          placeholder="请输入"
+          v-model:value="form.idcard"
+        />
+      </a-form-item>
+      <a-form-item label="" name="truename">
+        <a-input
+          allow-clear
+          placeholder="请输入"
+          v-model:value="form.truename"
+        />
+      </a-form-item>
+      <a-form-item label="是否管理员：1是；2否" name="isAdmin">
+        <a-input
+          allow-clear
+          placeholder="请输入是否管理员：1是；2否"
+          v-model:value="form.isAdmin"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addBookingUser, updateBookingUser } from '@/api/booking/bookingUser';
+  import { BookingUser } from '@/api/booking/bookingUser/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BookingUser | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<BookingUser>({
+    id: undefined,
+    openId: undefined,
+    sessionKey: undefined,
+    username: undefined,
+    avatarUrl: undefined,
+    gender: undefined,
+    country: undefined,
+    province: undefined,
+    city: undefined,
+    phone: undefined,
+    integral: undefined,
+    money: undefined,
+    createTime: undefined,
+    idcard: undefined,
+    truename: undefined,
+    isAdmin: undefined,
+    tenantId: undefined,
+    bookingUserId: undefined,
+    bookingUserName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    bookingUserName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateBookingUser : addBookingUser;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if(props.data.image){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingUser/components/search.vue

@@ -0,0 +1,183 @@
+<!-- 搜索表单 -->
+<template>
+  <div class="search">
+    <a-space :size="10" style="flex-wrap: wrap">
+      <!--      <SelectOrganization-->
+      <!--        :placeholder="`按部门筛选`"-->
+      <!--        v-model:value="where.organizationName"-->
+      <!--        @done="chooseOrganization"-->
+      <!--      />-->
+      <SelectGrade
+        :placeholder="`按等级筛选`"
+        v-model:value="where.gradeName"
+        @done="chooseGradeId"
+      />
+      <a-radio-group v-model:value="where.isAdmin" @change="search">
+        <a-radio-button :value="1">管理员</a-radio-button>
+      </a-radio-group>
+      <a-range-picker
+        v-model:value="dateRange"
+        @change="search"
+        value-format="YYYY-MM-DD"
+        class="ele-fluid"
+      />
+      <!--      <a-radio-group v-model:value="where.categoryId" @change="search">-->
+      <!--        <a-radio-button :value="25">早餐</a-radio-button>-->
+      <!--        <a-radio-button :value="26">午餐</a-radio-button>-->
+      <!--        <a-radio-button :value="27">晚餐</a-radio-button>-->
+      <!--      </a-radio-group>-->
+      <!--      <a-button class="ele-btn-icon" @click="handleExport">-->
+      <!--        <template #icon>-->
+      <!--          <download-outlined />-->
+      <!--        </template>-->
+      <!--        <span>导出</span>-->
+      <!--      </a-button>-->
+      <a-input-search
+        allow-clear
+        placeholder="姓名|手机号|用户ID"
+        v-model:value="where.keywords"
+        @pressEnter="search"
+        @search="search"
+        style="width: 360px"
+      />
+      <a-button @click="reset">重置</a-button>
+      <!--      <span style="margin-left: 20px"-->
+      <!--        >已签到 {{ signUsers }} / 已报餐 {{ postUsers }}</span-->
+      <!--      >-->
+    </a-space>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import useSearch from '@/utils/use-search';
+  import { ref, watch } from 'vue';
+  import { OrderGoods, OrderGoodsParam } from '@/api/order/goods/model';
+  import { message } from 'ant-design-vue';
+  import { Organization } from '@/api/system/organization/model';
+  import { utils, writeFile } from 'xlsx';
+  import dayjs from 'dayjs';
+  import { Grade } from '@/api/user/grade/model';
+  import { BookingUserParam } from '@/api/booking/bookingUser/model';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: OrderGoodsParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'advanced'): void;
+  }>();
+
+  // 表单数据
+  const { where, resetFields } = useSearch<BookingUserParam>({
+    id: undefined,
+    keywords: undefined,
+    timeStart: undefined,
+    timeEnd: undefined
+  });
+  // 下来选项
+  // const categoryId = ref<number>(0);
+  const post = ref<number>(0);
+  const sign = ref<number>(0);
+  const noSign = ref<number>(0);
+  // 日期范围选择
+  const dateRange = ref<[string, string]>(['', '']);
+
+  /* 搜索 */
+  const search = () => {
+    const [d1, d2] = dateRange.value ?? [];
+    where.timeStart = d1 ? dayjs(d1).valueOf() / 1000 : undefined;
+    where.timeEnd = d2 ? dayjs(d2).valueOf() / 1000 : undefined;
+    // where.createTimeStart = d1 ? d1 + ' 00:00:00' : undefined;
+    // where.createTimeEnd = d2 ? d2 + ' 00:00:00' : undefined;
+    emit('search', {
+      ...where
+    });
+  };
+
+  const chooseOrganization = (e: Organization) => {
+    // where.organizationId = e.organizationId;
+    // where.organizationName = e.organizationName;
+    search();
+  };
+
+  const chooseGradeId = (e: Grade) => {
+    where.gradeId = e.gradeId;
+    where.gradeName = e.name;
+    search();
+  };
+
+  /*  重置 */
+  const reset = () => {
+    dateRange.value = ['', ''];
+    resetFields();
+    post.value = 0;
+    sign.value = 0;
+    noSign.value = 0;
+    search();
+  };
+
+  // 导出
+  const handleExport = () => {
+    if (!props.selection?.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    const array: (string | number)[][] = [
+      [
+        '部门',
+        '编号',
+        '姓名',
+        '早餐报餐次数',
+        '早餐签到次数',
+        '午餐报餐次数',
+        '午餐签到次数',
+        '晚餐报餐次数',
+        '晚餐签到次数',
+        '消费金额'
+      ]
+    ];
+    props.selection?.forEach((d: OrderGoods) => {
+      array.push([
+        `${d.organizationName}`,
+        `${d.userId}`,
+        `${d.nickname}`,
+        `${d.breakfastPostUsers}`,
+        `${d.breakfastSignUsers}`,
+        `${d.lunchPostUsers}`,
+        `${d.lunchSignUsers}`,
+        `${d.dinnerPostUsers}`,
+        `${d.dinnerSignUsers}`
+      ]);
+    });
+    const sheetName = '报餐统计导出';
+    const workbook = {
+      SheetNames: [sheetName],
+      Sheets: {}
+    };
+    const sheet = utils.aoa_to_sheet(array);
+    workbook.Sheets[sheetName] = sheet;
+    // 设置列宽
+    sheet['!cols'] = [
+      { wch: 10 },
+      { wch: 10 },
+      { wch: 10 },
+      { wch: 10 },
+      { wch: 20 },
+      { wch: 40 },
+      { wch: 10 }
+    ];
+    writeFile(workbook, '报餐统计导出.xlsx');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingUser/index.vue

@@ -0,0 +1,343 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="usersId"
+          :columns="columns"
+          :datasource="datasource"
+          :scroll="{ x: 2200 }"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'avatarUrl'">
+              <a-avatar
+                :size="30"
+                :src="`${record.avatarUrl}`"
+                style="margin-right: 4px"
+              >
+                <template #icon>
+                  <UserOutlined />
+                </template>
+              </a-avatar>
+            </template>
+            <template v-if="column.key === 'gender'">
+              <a-tag v-if="record.gender == 1">男</a-tag>
+              <a-tag v-if="record.gender == 2">女</a-tag>
+              <span v-if="record.gender == 0"></span>
+            </template>
+            <template v-if="column.key === 'isAdmin'">
+              <a-switch
+                :checked="record.isAdmin == 1"
+                @change="updateIsAdmin(record)"
+              />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a>积分充值</a>
+                <!--                <a @click="openEdit(record)">修改</a>-->
+                <!--                <a-divider type="vertical" />-->
+                <!--                <a-popconfirm-->
+                <!--                  title="确定要删除此记录吗？"-->
+                <!--                  @confirm="remove(record)"-->
+                <!--                >-->
+                <!--                  <a class="ele-text-danger">删除</a>-->
+                <!--                </a-popconfirm>-->
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <Edit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { UserOutlined } from '@ant-design/icons-vue';
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import Edit from './components/bookingUserEdit.vue';
+  import {
+    pageBookingUser,
+    removeBookingUser,
+    removeBatchBookingUser,
+    updateBookingUser
+  } from '@/api/booking/bookingUser';
+  import type {
+    BookingUser,
+    BookingUserParam
+  } from '@/api/booking/bookingUser/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<BookingUser[]>([]);
+  // 当前编辑数据
+  const current = ref<BookingUser | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageBookingUser({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '用户ID',
+      dataIndex: 'id',
+      key: 'id',
+      width: 90
+    },
+    {
+      title: '用户唯一小程序id',
+      dataIndex: 'openId',
+      key: 'openId',
+      align: 'center',
+      hideInTable: true
+    },
+    {
+      title: '小程序用户秘钥',
+      dataIndex: 'sessionKey',
+      key: 'sessionKey',
+      align: 'center',
+      hideInTable: true
+    },
+    {
+      title: '用户名',
+      dataIndex: 'username',
+      key: 'username',
+      align: 'center'
+    },
+    {
+      title: '头像',
+      dataIndex: 'avatarUrl',
+      key: 'avatarUrl',
+      align: 'center'
+    },
+    {
+      title: '性别',
+      dataIndex: 'gender',
+      key: 'gender',
+      align: 'center'
+    },
+    {
+      title: '手机号码',
+      dataIndex: 'phone',
+      key: 'phone',
+      align: 'center',
+      sorter: true
+    },
+    {
+      title: '积分',
+      dataIndex: 'integral',
+      key: 'integral',
+      align: 'center',
+      sorter: true
+    },
+    {
+      title: '余额',
+      dataIndex: 'money',
+      key: 'money',
+      align: 'center',
+      sorter: true
+    },
+    {
+      title: '身份证号码',
+      dataIndex: 'idcard',
+      key: 'idcard',
+      align: 'center'
+    },
+    {
+      title: '真实姓名',
+      dataIndex: 'truename',
+      key: 'truename',
+      align: 'center'
+    },
+    {
+      title: '国家',
+      dataIndex: 'country',
+      key: 'country',
+      align: 'center'
+    },
+    {
+      title: '省份',
+      dataIndex: 'province',
+      key: 'province',
+      align: 'center'
+    },
+    {
+      title: '城市',
+      dataIndex: 'city',
+      key: 'city',
+      align: 'center'
+    },
+    {
+      title: '是否管理员',
+      dataIndex: 'isAdmin',
+      key: 'isAdmin',
+      align: 'center'
+    },
+    {
+      title: '注册时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: BookingUserParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: BookingUser) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: BookingUser) => {
+    const hide = message.loading('请求中..', 0);
+    removeBookingUser(row.id)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchBookingUser(selection.value.map((d) => d.id))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 修改用户状态 */
+  const updateIsAdmin = (row: BookingUser) => {
+    row.isAdmin = row.isAdmin == 1 ? 2 : 1;
+    updateBookingUser(row)
+      .then((msg) => {
+        message.success(msg);
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: BookingUser) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'BookingUser'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/bookingUserCard/components/bookingUserCardEdit.vue

@@ -0,0 +1,465 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑' : '添加'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="sid场馆id集合，适用的场馆" name="sid">
+        <a-input
+          allow-clear
+          placeholder="请输入sid场馆id集合，适用的场馆"
+          v-model:value="form.sid"
+        />
+      </a-form-item>
+      <a-form-item label="用户id" name="uid">
+        <a-input
+          allow-clear
+          placeholder="请输入用户id"
+          v-model:value="form.uid"
+        />
+      </a-form-item>
+      <a-form-item label="vip卡id" name="vid">
+        <a-input
+          allow-clear
+          placeholder="请输入vip卡id"
+          v-model:value="form.vid"
+        />
+      </a-form-item>
+      <a-form-item label="开卡人id" name="aid">
+        <a-input
+          allow-clear
+          placeholder="请输入开卡人id"
+          v-model:value="form.aid"
+        />
+      </a-form-item>
+      <a-form-item label="微信订单号" name="wechatOrder">
+        <a-input
+          allow-clear
+          placeholder="请输入微信订单号"
+          v-model:value="form.wechatOrder"
+        />
+      </a-form-item>
+      <a-form-item label="卡号" name="code">
+        <a-input
+          allow-clear
+          placeholder="请输入卡号"
+          v-model:value="form.code"
+        />
+      </a-form-item>
+      <a-form-item label="会员卡名称" name="name">
+        <a-input
+          allow-clear
+          placeholder="请输入会员卡名称"
+          v-model:value="form.name"
+        />
+      </a-form-item>
+      <a-form-item label="真实姓名" name="username">
+        <a-input
+          allow-clear
+          placeholder="请输入真实姓名"
+          v-model:value="form.username"
+        />
+      </a-form-item>
+      <a-form-item label="手机号码" name="phone">
+        <a-input
+          allow-clear
+          placeholder="请输入手机号码"
+          v-model:value="form.phone"
+        />
+      </a-form-item>
+      <a-form-item label="vip购卡价格" name="price">
+        <a-input
+          allow-clear
+          placeholder="请输入vip购卡价格"
+          v-model:value="form.price"
+        />
+      </a-form-item>
+      <a-form-item label="会员卡介绍" name="desc">
+        <a-input
+          allow-clear
+          placeholder="请输入会员卡介绍"
+          v-model:value="form.desc"
+        />
+      </a-form-item>
+      <a-form-item label="会员卡说明" name="info">
+        <a-input
+          allow-clear
+          placeholder="请输入会员卡说明"
+          v-model:value="form.info"
+        />
+      </a-form-item>
+      <a-form-item label="vip卡折扣率" name="discount">
+        <a-input
+          allow-clear
+          placeholder="请输入vip卡折扣率"
+          v-model:value="form.discount"
+        />
+      </a-form-item>
+      <a-form-item label="使用次数" name="count">
+        <a-input
+          allow-clear
+          placeholder="请输入使用次数"
+          v-model:value="form.count"
+        />
+      </a-form-item>
+      <a-form-item label="每使用一次减少的金额" name="eachMoney">
+        <a-input
+          allow-clear
+          placeholder="请输入每使用一次减少的金额"
+          v-model:value="form.eachMoney"
+        />
+      </a-form-item>
+      <a-form-item label="剩余金额" name="remainingMoney">
+        <a-input
+          allow-clear
+          placeholder="请输入剩余金额"
+          v-model:value="form.remainingMoney"
+        />
+      </a-form-item>
+      <a-form-item label="续费累加次数" name="number">
+        <a-input
+          allow-clear
+          placeholder="请输入续费累加次数"
+          v-model:value="form.number"
+        />
+      </a-form-item>
+      <a-form-item label="剩余次数" name="num">
+        <a-input
+          allow-clear
+          placeholder="请输入剩余次数"
+          v-model:value="form.num"
+        />
+      </a-form-item>
+      <a-form-item label="付款状态,1已付款，2未付款" name="status">
+        <a-radio-group v-model:value="form.status">
+          <a-radio :value="0">显示</a-radio>
+          <a-radio :value="1">隐藏</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="会员卡年限" name="term">
+        <a-input
+          allow-clear
+          placeholder="请输入会员卡年限"
+          v-model:value="form.term"
+        />
+      </a-form-item>
+      <a-form-item label="月限" name="month">
+        <a-input
+          allow-clear
+          placeholder="请输入月限"
+          v-model:value="form.month"
+        />
+      </a-form-item>
+      <a-form-item label="IC卡类型：1年卡，2次卡，3月卡，4会员IC卡，5充值卡	" name="type">
+        <a-input
+          allow-clear
+          placeholder="请输入IC卡类型：1年卡，2次卡，3月卡，4会员IC卡，5充值卡	"
+          v-model:value="form.type"
+        />
+      </a-form-item>
+      <a-form-item label="卡类型：1成人卡，2儿童卡" name="cardType">
+        <a-input
+          allow-clear
+          placeholder="请输入卡类型：1成人卡，2儿童卡"
+          v-model:value="form.cardType"
+        />
+      </a-form-item>
+      <a-form-item label="vip卡等级类型：1特殊vip卡，2普通vip卡" name="vipType">
+        <a-input
+          allow-clear
+          placeholder="请输入vip卡等级类型：1特殊vip卡，2普通vip卡"
+          v-model:value="form.vipType"
+        />
+      </a-form-item>
+      <a-form-item label="特殊卡开发凭证图" name="pic">
+        <a-input
+          allow-clear
+          placeholder="请输入特殊卡开发凭证图"
+          v-model:value="form.pic"
+        />
+      </a-form-item>
+      <a-form-item label="价格组" name="prices">
+        <a-input
+          allow-clear
+          placeholder="请输入价格组"
+          v-model:value="form.prices"
+        />
+      </a-form-item>
+      <a-form-item label="1微信支付，2支付宝支付，3现金，4POS机刷卡，15平安健康卡" name="payType">
+        <a-input
+          allow-clear
+          placeholder="请输入1微信支付，2支付宝支付，3现金，4POS机刷卡，15平安健康卡"
+          v-model:value="form.payType"
+        />
+      </a-form-item>
+      <a-form-item label="是否赠送积分：1赠送，2不赠送" name="isIntegral">
+        <a-input
+          allow-clear
+          placeholder="请输入是否赠送积分：1赠送，2不赠送"
+          v-model:value="form.isIntegral"
+        />
+      </a-form-item>
+      <a-form-item label="是否已开具发票：1已开发票，2未开发票" name="isInvoice">
+        <a-input
+          allow-clear
+          placeholder="请输入是否已开具发票：1已开发票，2未开发票"
+          v-model:value="form.isInvoice"
+        />
+      </a-form-item>
+      <a-form-item label="vip卡到期时间" name="expireTime">
+        <a-input
+          allow-clear
+          placeholder="请输入vip卡到期时间"
+          v-model:value="form.expireTime"
+        />
+      </a-form-item>
+      <a-form-item label="紧急联系人" name="urgentName">
+        <a-input
+          allow-clear
+          placeholder="请输入紧急联系人"
+          v-model:value="form.urgentName"
+        />
+      </a-form-item>
+      <a-form-item label="紧急联系人号码" name="urgentPhone">
+        <a-input
+          allow-clear
+          placeholder="请输入紧急联系人号码"
+          v-model:value="form.urgentPhone"
+        />
+      </a-form-item>
+      <a-form-item label="卡号" name="cardNum">
+        <a-input
+          allow-clear
+          placeholder="请输入卡号"
+          v-model:value="form.cardNum"
+        />
+      </a-form-item>
+      <a-form-item label="密码" name="password">
+        <a-input
+          allow-clear
+          placeholder="请输入密码"
+          v-model:value="form.password"
+        />
+      </a-form-item>
+      <a-form-item label="使用时间" name="useTime">
+        <a-input
+          allow-clear
+          placeholder="请输入使用时间"
+          v-model:value="form.useTime"
+        />
+      </a-form-item>
+      <a-form-item label="" name="updateTime">
+        <a-input
+          allow-clear
+          placeholder="请输入"
+          v-model:value="form.updateTime"
+        />
+      </a-form-item>
+      <a-form-item label="身份证号码" name="idcard">
+        <a-input
+          allow-clear
+          placeholder="请输入身份证号码"
+          v-model:value="form.idcard"
+        />
+      </a-form-item>
+      <a-form-item label="备注" name="remark">
+        <a-input
+          allow-clear
+          placeholder="请输入备注"
+          v-model:value="form.remark"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addBookingUserCard, updateBookingUserCard } from '@/api/booking/bookingUserCard';
+  import { BookingUserCard } from '@/api/booking/bookingUserCard/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BookingUserCard | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<BookingUserCard>({
+    id: undefined,
+    sid: undefined,
+    uid: undefined,
+    vid: undefined,
+    aid: undefined,
+    wechatOrder: undefined,
+    code: undefined,
+    name: undefined,
+    username: undefined,
+    phone: undefined,
+    price: undefined,
+    desc: undefined,
+    info: undefined,
+    discount: undefined,
+    count: undefined,
+    eachMoney: undefined,
+    remainingMoney: undefined,
+    number: undefined,
+    num: undefined,
+    status: undefined,
+    term: undefined,
+    month: undefined,
+    type: undefined,
+    cardType: undefined,
+    vipType: undefined,
+    pic: undefined,
+    prices: undefined,
+    payType: undefined,
+    isIntegral: undefined,
+    isInvoice: undefined,
+    expireTime: undefined,
+    urgentName: undefined,
+    urgentPhone: undefined,
+    cardNum: undefined,
+    password: undefined,
+    useTime: undefined,
+    createTime: undefined,
+    updateTime: undefined,
+    idcard: undefined,
+    remark: undefined,
+    tenantId: undefined,
+    bookingUserCardId: undefined,
+    bookingUserCardName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    bookingUserCardName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateBookingUserCard : addBookingUserCard;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if(props.data.image){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingUserCard/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>开卡</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingUserCard/index.vue

@@ -0,0 +1,512 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="bookingUserCardId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <BookingUserCardEdit
+        v-model:visible="showEdit"
+        :data="current"
+        @done="reload"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import { formatNumber } from 'ele-admin-pro/es';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import BookingUserCardEdit from './components/bookingUserCardEdit.vue';
+  import {
+    pageBookingUserCard,
+    removeBookingUserCard,
+    removeBatchBookingUserCard
+  } from '@/api/booking/bookingUserCard';
+  import type {
+    BookingUserCard,
+    BookingUserCardParam
+  } from '@/api/booking/bookingUserCard/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<BookingUserCard[]>([]);
+  // 当前编辑数据
+  const current = ref<BookingUserCard | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageBookingUserCard({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '姓名',
+      dataIndex: 'username',
+      key: 'username',
+      align: 'center',
+      width: 120,
+      fixed: 'left'
+    },
+    {
+      title: 'IC卡号',
+      dataIndex: 'code',
+      key: 'code',
+      width: 120,
+      fixed: 'left',
+      align: 'center'
+    },
+    {
+      title: '手机号码',
+      dataIndex: 'phone',
+      key: 'phone',
+      align: 'center',
+      width: 120,
+      fixed: 'left'
+    },
+    {
+      title: '会员卡名称',
+      dataIndex: 'name',
+      key: 'name',
+      width: 180,
+      align: 'center'
+    },
+    {
+      title: '卡号',
+      dataIndex: 'cardNum',
+      key: 'cardNum',
+      width: 120,
+      align: 'center'
+    },
+    {
+      title: '可用场馆',
+      dataIndex: 'sid',
+      key: 'sid',
+      width: 120,
+      align: 'center'
+    },
+    {
+      title: '购卡价格',
+      dataIndex: 'price',
+      key: 'price',
+      align: 'center',
+      width: 120,
+      customRender: ({ text }) => `￥${formatNumber(text)}`
+    },
+    {
+      title: '紧急联系人',
+      dataIndex: 'urgentName',
+      key: 'urgentName',
+      width: 120,
+      align: 'center'
+    },
+    {
+      title: '紧急联系人号码',
+      dataIndex: 'urgentPhone',
+      key: 'urgentPhone',
+      align: 'center',
+      width: 120
+    },
+    {
+      title: 'vip卡折扣率',
+      dataIndex: 'discount',
+      key: 'discount',
+      width: 120,
+      align: 'center'
+    },
+    {
+      title: '使用次数',
+      dataIndex: 'count',
+      key: 'count',
+      width: 120,
+      align: 'center'
+    },
+    {
+      title: '剩余次数',
+      dataIndex: 'num',
+      key: 'num',
+      width: 120,
+      align: 'center'
+    },
+    {
+      title: '每使用一次减少的金额',
+      dataIndex: 'eachMoney',
+      key: 'eachMoney',
+      width: 120,
+      align: 'center',
+      customRender: ({ text }) => `￥${formatNumber(text)}`
+    },
+    {
+      title: '剩余金额',
+      dataIndex: 'remainingMoney',
+      key: 'remainingMoney',
+      width: 120,
+      align: 'center',
+      customRender: ({ text }) => `￥${formatNumber(text)}`
+    },
+    {
+      title: '月限',
+      dataIndex: 'month',
+      key: 'month',
+      width: 120,
+      align: 'center'
+    },
+    {
+      title: '会员卡年限',
+      dataIndex: 'term',
+      key: 'term',
+      width: 120,
+      align: 'center'
+    },
+    {
+      title: 'IC卡类型',
+      dataIndex: 'type',
+      key: 'type',
+      width: 120,
+      align: 'center',
+      customRender: ({ text }) =>
+        ['-', '年卡', '次卡', '月卡', '会员IC卡', '充值卡'][text]
+    },
+    {
+      title: '是否赠送积分',
+      dataIndex: 'isIntegral',
+      key: 'isIntegral',
+      width: 120,
+      align: 'center',
+      customRender: ({ text }) => ['', '赠送', '不赠送'][text]
+    },
+    {
+      title: '支付状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: 120,
+      align: 'center',
+      customRender: ({ text }) => ['未支付', '已支付'][text]
+    },
+    {
+      title: '支付方式',
+      dataIndex: 'payType',
+      key: 'payType',
+      width: 120,
+      align: 'center',
+      customRender: ({ text }) =>
+        [
+          '余额支付',
+          '微信支付',
+          '支付宝支付',
+          '现金',
+          'POS机刷卡',
+          '平安健康卡'
+        ][text]
+    },
+    {
+      title: '是否已开具发票',
+      dataIndex: 'isInvoice',
+      key: 'isInvoice',
+      width: 120,
+      align: 'center',
+      customRender: ({ text }) => ['未开票', '已开票', '未开票'][text]
+    },
+    {
+      title: '到期时间',
+      dataIndex: 'expireTime',
+      key: 'expireTime',
+      align: 'center',
+      width: 180,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm')
+    },
+    {
+      title: '购卡时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      width: 180,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    // {
+    //   title: '用户id（旧）',
+    //   dataIndex: 'uid',
+    //   key: 'uid',
+    //   width: 190,
+    //   align: 'center',
+    // },
+    // {
+    //   title: 'vip卡id',
+    //   dataIndex: 'vid',
+    //   key: 'vid',
+    //   width: 190,
+    //   align: 'center',
+    // },
+    // {
+    //   title: '开卡人id',
+    //   dataIndex: 'aid',
+    //   key: 'aid',
+    //   align: 'center',
+    // },
+    // {
+    //   title: '微信订单号',
+    //   dataIndex: 'wechatOrder',
+    //   key: 'wechatOrder',
+    //   width: 190,
+    //   align: 'center',
+    // },
+    // {
+    //   title: '会员卡介绍',
+    //   dataIndex: 'desc',
+    //   key: 'desc',
+    //   align: 'center',
+    // },
+    // {
+    //   title: '会员卡说明',
+    //   dataIndex: 'info',
+    //   key: 'info',
+    //   width: 490,
+    //   align: 'center',
+    // },
+
+    // {
+    //   title: '续费累加次数',
+    //   dataIndex: 'number',
+    //   key: 'number',
+    //   align: 'center',
+    // },
+    // {
+    //   title: '卡类型：1成人卡，2儿童卡',
+    //   dataIndex: 'cardType',
+    //   key: 'cardType',
+    //   align: 'center',
+    // },
+    // {
+    //   title: 'vip卡等级类型：1特殊vip卡，2普通vip卡',
+    //   dataIndex: 'vipType',
+    //   key: 'vipType',
+    //   align: 'center',
+    // },
+    // {
+    //   title: '特殊卡开发凭证图',
+    //   dataIndex: 'pic',
+    //   key: 'pic',
+    //   align: 'center',
+    // },
+    // {
+    //   title: '价格组',
+    //   dataIndex: 'prices',
+    //   key: 'prices',
+    //   align: 'center',
+    // },
+
+    // {
+    //   title: '密码',
+    //   dataIndex: 'password',
+    //   key: 'password',
+    //   align: 'center',
+    // },
+    // {
+    //   title: '使用时间',
+    //   dataIndex: 'useTime',
+    //   key: 'useTime',
+    //   align: 'center',
+    // },
+    // {
+    //   title: '',
+    //   dataIndex: 'updateTime',
+    //   key: 'updateTime',
+    //   align: 'center',
+    // },
+    // {
+    //   title: '身份证号码',
+    //   dataIndex: 'idCard',
+    //   key: 'idCard',
+    //   align: 'center',
+    // },
+    // {
+    //   title: '备注',
+    //   dataIndex: 'remark',
+    //   key: 'remark',
+    //   align: 'center',
+    // },
+    // {
+    //   title: '备注',
+    //   dataIndex: 'comments',
+    //   key: 'comments',
+    //   align: 'center',
+    // },
+    // {
+    //   title: '排序号',
+    //   dataIndex: 'sortNumber',
+    //   key: 'sortNumber',
+    //   align: 'center'
+    // },
+    {
+      title: '操作',
+      key: 'action',
+      width: 240,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: BookingUserCardParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: BookingUserCard) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: BookingUserCard) => {
+    const hide = message.loading('请求中..', 0);
+    removeBookingUserCard(row.bookingUserCardId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchBookingUserCard(
+          selection.value.map((d) => d.bookingUserCardId)
+        )
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: BookingUserCard) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'BookingUserCard'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/bookingUserCoupon/components/bookingUserCouponEdit.vue

@@ -0,0 +1,315 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑我的优惠券' : '添加我的优惠券'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="优惠劵id" name="couponId">
+        <a-input
+          allow-clear
+          placeholder="请输入优惠劵id"
+          v-model:value="form.couponId"
+        />
+      </a-form-item>
+      <a-form-item label="优惠券名称" name="name">
+        <a-input
+          allow-clear
+          placeholder="请输入优惠券名称"
+          v-model:value="form.name"
+        />
+      </a-form-item>
+      <a-form-item label="优惠券类型(10满减券 20折扣券)" name="type">
+        <a-input
+          allow-clear
+          placeholder="请输入优惠券类型(10满减券 20折扣券)"
+          v-model:value="form.type"
+        />
+      </a-form-item>
+      <a-form-item label="满减券-减免金额" name="reducePrice">
+        <a-input
+          allow-clear
+          placeholder="请输入满减券-减免金额"
+          v-model:value="form.reducePrice"
+        />
+      </a-form-item>
+      <a-form-item label="折扣券-折扣率(0-100)" name="discount">
+        <a-input
+          allow-clear
+          placeholder="请输入折扣券-折扣率(0-100)"
+          v-model:value="form.discount"
+        />
+      </a-form-item>
+      <a-form-item label="最低消费金额" name="minPrice">
+        <a-input
+          allow-clear
+          placeholder="请输入最低消费金额"
+          v-model:value="form.minPrice"
+        />
+      </a-form-item>
+      <a-form-item label="到期类型(10领取后生效 20固定时间)" name="expireType">
+        <a-input
+          allow-clear
+          placeholder="请输入到期类型(10领取后生效 20固定时间)"
+          v-model:value="form.expireType"
+        />
+      </a-form-item>
+      <a-form-item label="领取后生效-有效天数" name="expireDay">
+        <a-input
+          allow-clear
+          placeholder="请输入领取后生效-有效天数"
+          v-model:value="form.expireDay"
+        />
+      </a-form-item>
+      <a-form-item label="有效期开始时间" name="startTime">
+        <a-input
+          allow-clear
+          placeholder="请输入有效期开始时间"
+          v-model:value="form.startTime"
+        />
+      </a-form-item>
+      <a-form-item label="有效期结束时间" name="endTime">
+        <a-input
+          allow-clear
+          placeholder="请输入有效期结束时间"
+          v-model:value="form.endTime"
+        />
+      </a-form-item>
+      <a-form-item label="适用范围(10全部商品 20指定商品)" name="applyRange">
+        <a-input
+          allow-clear
+          placeholder="请输入适用范围(10全部商品 20指定商品)"
+          v-model:value="form.applyRange"
+        />
+      </a-form-item>
+      <a-form-item label="适用范围配置(json格式)" name="applyRangeConfig">
+        <a-input
+          allow-clear
+          placeholder="请输入适用范围配置(json格式)"
+          v-model:value="form.applyRangeConfig"
+        />
+      </a-form-item>
+      <a-form-item label="是否过期(0未过期 1已过期)" name="isExpire">
+        <a-input
+          allow-clear
+          placeholder="请输入是否过期(0未过期 1已过期)"
+          v-model:value="form.isExpire"
+        />
+      </a-form-item>
+      <a-form-item label="是否已使用(0未使用 1已使用)" name="isUse">
+        <a-input
+          allow-clear
+          placeholder="请输入是否已使用(0未使用 1已使用)"
+          v-model:value="form.isUse"
+        />
+      </a-form-item>
+      <a-form-item label="排序(数字越小越靠前)" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="状态, 0待使用, 1已使用, 2已失效" name="status">
+        <a-radio-group v-model:value="form.status">
+          <a-radio :value="0">显示</a-radio>
+          <a-radio :value="1">隐藏</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="是否删除, 0否, 1是" name="deleted">
+        <a-input
+          allow-clear
+          placeholder="请输入是否删除, 0否, 1是"
+          v-model:value="form.deleted"
+        />
+      </a-form-item>
+      <a-form-item label="用户ID" name="userId">
+        <a-input
+          allow-clear
+          placeholder="请输入用户ID"
+          v-model:value="form.userId"
+        />
+      </a-form-item>
+      <a-form-item label="修改时间" name="updateTime">
+        <a-input
+          allow-clear
+          placeholder="请输入修改时间"
+          v-model:value="form.updateTime"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addBookingUserCoupon, updateBookingUserCoupon } from '@/api/booking/bookingUserCoupon';
+  import { BookingUserCoupon } from '@/api/booking/bookingUserCoupon/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BookingUserCoupon | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<BookingUserCoupon>({
+    id: undefined,
+    couponId: undefined,
+    name: undefined,
+    type: undefined,
+    reducePrice: undefined,
+    discount: undefined,
+    minPrice: undefined,
+    expireType: undefined,
+    expireDay: undefined,
+    startTime: undefined,
+    endTime: undefined,
+    applyRange: undefined,
+    applyRangeConfig: undefined,
+    isExpire: undefined,
+    isUse: undefined,
+    sortNumber: undefined,
+    status: undefined,
+    deleted: undefined,
+    userId: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    updateTime: undefined,
+    bookingUserCouponId: undefined,
+    bookingUserCouponName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    bookingUserCouponName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写我的优惠券名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateBookingUserCoupon : addBookingUserCoupon;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if(props.data.image){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingUserCoupon/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingUserCoupon/index.vue

@@ -0,0 +1,329 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="bookingUserCouponId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <BookingUserCouponEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import BookingUserCouponEdit from './components/bookingUserCouponEdit.vue';
+  import { pageBookingUserCoupon, removeBookingUserCoupon, removeBatchBookingUserCoupon } from '@/api/booking/bookingUserCoupon';
+  import type { BookingUserCoupon, BookingUserCouponParam } from '@/api/booking/bookingUserCoupon/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<BookingUserCoupon[]>([]);
+  // 当前编辑数据
+  const current = ref<BookingUserCoupon | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageBookingUserCoupon({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'id',
+      dataIndex: 'id',
+      key: 'id',
+      align: 'center',
+      width: 90,
+    },
+    {
+      title: '优惠劵id',
+      dataIndex: 'couponId',
+      key: 'couponId',
+      align: 'center',
+    },
+    {
+      title: '优惠券名称',
+      dataIndex: 'name',
+      key: 'name',
+      align: 'center',
+    },
+    {
+      title: '优惠券类型(10满减券 20折扣券)',
+      dataIndex: 'type',
+      key: 'type',
+      align: 'center',
+    },
+    {
+      title: '满减券-减免金额',
+      dataIndex: 'reducePrice',
+      key: 'reducePrice',
+      align: 'center',
+    },
+    {
+      title: '折扣券-折扣率(0-100)',
+      dataIndex: 'discount',
+      key: 'discount',
+      align: 'center',
+    },
+    {
+      title: '最低消费金额',
+      dataIndex: 'minPrice',
+      key: 'minPrice',
+      align: 'center',
+    },
+    {
+      title: '到期类型(10领取后生效 20固定时间)',
+      dataIndex: 'expireType',
+      key: 'expireType',
+      align: 'center',
+    },
+    {
+      title: '领取后生效-有效天数',
+      dataIndex: 'expireDay',
+      key: 'expireDay',
+      align: 'center',
+    },
+    {
+      title: '有效期开始时间',
+      dataIndex: 'startTime',
+      key: 'startTime',
+      align: 'center',
+    },
+    {
+      title: '有效期结束时间',
+      dataIndex: 'endTime',
+      key: 'endTime',
+      align: 'center',
+    },
+    {
+      title: '适用范围(10全部商品 20指定商品)',
+      dataIndex: 'applyRange',
+      key: 'applyRange',
+      align: 'center',
+    },
+    {
+      title: '适用范围配置(json格式)',
+      dataIndex: 'applyRangeConfig',
+      key: 'applyRangeConfig',
+      align: 'center',
+    },
+    {
+      title: '是否过期(0未过期 1已过期)',
+      dataIndex: 'isExpire',
+      key: 'isExpire',
+      align: 'center',
+    },
+    {
+      title: '是否已使用(0未使用 1已使用)',
+      dataIndex: 'isUse',
+      key: 'isUse',
+      align: 'center',
+    },
+    {
+      title: '排序(数字越小越靠前)',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center',
+    },
+    {
+      title: '状态, 0待使用, 1已使用, 2已失效',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+    },
+    {
+      title: '是否删除, 0否, 1是',
+      dataIndex: 'deleted',
+      key: 'deleted',
+      align: 'center',
+    },
+    {
+      title: '用户ID',
+      dataIndex: 'userId',
+      key: 'userId',
+      align: 'center',
+    },
+    {
+      title: '注册时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '修改时间',
+      dataIndex: 'updateTime',
+      key: 'updateTime',
+      align: 'center',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: BookingUserCouponParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: BookingUserCoupon) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: BookingUserCoupon) => {
+    const hide = message.loading('请求中..', 0);
+    removeBookingUserCoupon(row.bookingUserCouponId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchBookingUserCoupon(selection.value.map((d) => d.bookingUserCouponId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: BookingUserCoupon) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'BookingUserCoupon'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/bookingUserEmergency/components/bookingUserEmergencyEdit.vue

@@ -0,0 +1,219 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑紧急联系人表' : '添加紧急联系人表'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="用户id" name="uid">
+        <a-input
+          allow-clear
+          placeholder="请输入用户id"
+          v-model:value="form.uid"
+        />
+      </a-form-item>
+      <a-form-item label="联系人姓名" name="contractName">
+        <a-input
+          allow-clear
+          placeholder="请输入联系人姓名"
+          v-model:value="form.contractName"
+        />
+      </a-form-item>
+      <a-form-item label="联系人电话" name="contractPhone">
+        <a-input
+          allow-clear
+          placeholder="请输入联系人电话"
+          v-model:value="form.contractPhone"
+        />
+      </a-form-item>
+      <a-form-item label="联系人地址" name="contractAddress">
+        <a-input
+          allow-clear
+          placeholder="请输入联系人地址"
+          v-model:value="form.contractAddress"
+        />
+      </a-form-item>
+      <a-form-item label="排序" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="是否默认" name="isDefault">
+        <a-input
+          allow-clear
+          placeholder="请输入是否默认"
+          v-model:value="form.isDefault"
+        />
+      </a-form-item>
+      <a-form-item label="修改时间" name="updateTime">
+        <a-input
+          allow-clear
+          placeholder="请输入修改时间"
+          v-model:value="form.updateTime"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addBookingUserEmergency, updateBookingUserEmergency } from '@/api/booking/bookingUserEmergency';
+  import { BookingUserEmergency } from '@/api/booking/bookingUserEmergency/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BookingUserEmergency | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<BookingUserEmergency>({
+    id: undefined,
+    uid: undefined,
+    contractName: undefined,
+    contractPhone: undefined,
+    contractAddress: undefined,
+    sortNumber: undefined,
+    isDefault: undefined,
+    createTime: undefined,
+    updateTime: undefined,
+    bookingUserEmergencyId: undefined,
+    bookingUserEmergencyName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    bookingUserEmergencyName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写紧急联系人表名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateBookingUserEmergency : addBookingUserEmergency;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if(props.data.image){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingUserEmergency/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingUserEmergency/index.vue

@@ -0,0 +1,257 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="bookingUserEmergencyId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <BookingUserEmergencyEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import BookingUserEmergencyEdit from './components/bookingUserEmergencyEdit.vue';
+  import { pageBookingUserEmergency, removeBookingUserEmergency, removeBatchBookingUserEmergency } from '@/api/booking/bookingUserEmergency';
+  import type { BookingUserEmergency, BookingUserEmergencyParam } from '@/api/booking/bookingUserEmergency/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<BookingUserEmergency[]>([]);
+  // 当前编辑数据
+  const current = ref<BookingUserEmergency | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageBookingUserEmergency({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '',
+      dataIndex: 'id',
+      key: 'id',
+      align: 'center',
+      width: 90,
+    },
+    {
+      title: '用户id',
+      dataIndex: 'uid',
+      key: 'uid',
+      align: 'center',
+    },
+    {
+      title: '联系人姓名',
+      dataIndex: 'contractName',
+      key: 'contractName',
+      align: 'center',
+    },
+    {
+      title: '联系人电话',
+      dataIndex: 'contractPhone',
+      key: 'contractPhone',
+      align: 'center',
+    },
+    {
+      title: '联系人地址',
+      dataIndex: 'contractAddress',
+      key: 'contractAddress',
+      align: 'center',
+    },
+    {
+      title: '排序',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center',
+    },
+    {
+      title: '是否默认',
+      dataIndex: 'isDefault',
+      key: 'isDefault',
+      align: 'center',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '修改时间',
+      dataIndex: 'updateTime',
+      key: 'updateTime',
+      align: 'center',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: BookingUserEmergencyParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: BookingUserEmergency) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: BookingUserEmergency) => {
+    const hide = message.loading('请求中..', 0);
+    removeBookingUserEmergency(row.bookingUserEmergencyId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchBookingUserEmergency(selection.value.map((d) => d.bookingUserEmergencyId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: BookingUserEmergency) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'BookingUserEmergency'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/bookingUserInvoice/components/bookingUserInvoiceEdit.vue

@@ -0,0 +1,324 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑发票' : '添加发票'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="发票类型(0纸质 1电子)" name="type">
+        <a-input
+          allow-clear
+          placeholder="请输入发票类型(0纸质 1电子)"
+          v-model:value="form.type"
+        />
+      </a-form-item>
+      <a-form-item label="发票名称" name="name">
+        <a-input
+          allow-clear
+          placeholder="请输入发票名称"
+          v-model:value="form.name"
+        />
+      </a-form-item>
+      <a-form-item label="开票类型(0普票 1专票)" name="invoiceType">
+        <a-input
+          allow-clear
+          placeholder="请输入开票类型(0普票 1专票)"
+          v-model:value="form.invoiceType"
+        />
+      </a-form-item>
+      <a-form-item label="税号" name="invoiceCode">
+        <a-input
+          allow-clear
+          placeholder="请输入税号"
+          v-model:value="form.invoiceCode"
+        />
+      </a-form-item>
+      <a-form-item label="公司地址" name="address">
+        <a-input
+          allow-clear
+          placeholder="请输入公司地址"
+          v-model:value="form.address"
+        />
+      </a-form-item>
+      <a-form-item label="公司电话" name="tel">
+        <a-input
+          allow-clear
+          placeholder="请输入公司电话"
+          v-model:value="form.tel"
+        />
+      </a-form-item>
+      <a-form-item label="开户行" name="bankName">
+        <a-input
+          allow-clear
+          placeholder="请输入开户行"
+          v-model:value="form.bankName"
+        />
+      </a-form-item>
+      <a-form-item label="开户账号" name="bankAccount">
+        <a-input
+          allow-clear
+          placeholder="请输入开户账号"
+          v-model:value="form.bankAccount"
+        />
+      </a-form-item>
+      <a-form-item label="手机号码" name="phone">
+        <a-input
+          allow-clear
+          placeholder="请输入手机号码"
+          v-model:value="form.phone"
+        />
+      </a-form-item>
+      <a-form-item label="电子邮箱" name="email">
+        <a-input
+          allow-clear
+          placeholder="请输入电子邮箱"
+          v-model:value="form.email"
+        />
+      </a-form-item>
+      <a-form-item label="发票流水号" name="invoiceNo">
+        <a-input
+          allow-clear
+          placeholder="请输入发票流水号"
+          v-model:value="form.invoiceNo"
+        />
+      </a-form-item>
+      <a-form-item label="发票图片预览" name="invoiceImg">
+        <a-input
+          allow-clear
+          placeholder="请输入发票图片预览"
+          v-model:value="form.invoiceImg"
+        />
+      </a-form-item>
+      <a-form-item label="发票pdf地址" name="invoicePdf">
+        <a-input
+          allow-clear
+          placeholder="请输入发票pdf地址"
+          v-model:value="form.invoicePdf"
+        />
+      </a-form-item>
+      <a-form-item label="备注" name="comments">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入描述"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+      <a-form-item label="是否启用" name="isCompany">
+        <a-input
+          allow-clear
+          placeholder="请输入是否启用"
+          v-model:value="form.isCompany"
+        />
+      </a-form-item>
+      <a-form-item label="排序(数字越小越靠前)" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="状态, 0待使用, 1已使用, 2已失效" name="status">
+        <a-radio-group v-model:value="form.status">
+          <a-radio :value="0">显示</a-radio>
+          <a-radio :value="1">隐藏</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="是否删除, 0否, 1是" name="deleted">
+        <a-input
+          allow-clear
+          placeholder="请输入是否删除, 0否, 1是"
+          v-model:value="form.deleted"
+        />
+      </a-form-item>
+      <a-form-item label="用户ID" name="userId">
+        <a-input
+          allow-clear
+          placeholder="请输入用户ID"
+          v-model:value="form.userId"
+        />
+      </a-form-item>
+      <a-form-item label="修改时间" name="updateTime">
+        <a-input
+          allow-clear
+          placeholder="请输入修改时间"
+          v-model:value="form.updateTime"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addBookingUserInvoice, updateBookingUserInvoice } from '@/api/booking/bookingUserInvoice';
+  import { BookingUserInvoice } from '@/api/booking/bookingUserInvoice/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BookingUserInvoice | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<BookingUserInvoice>({
+    id: undefined,
+    type: undefined,
+    name: undefined,
+    invoiceType: undefined,
+    invoiceCode: undefined,
+    address: undefined,
+    tel: undefined,
+    bankName: undefined,
+    bankAccount: undefined,
+    phone: undefined,
+    email: undefined,
+    invoiceNo: undefined,
+    invoiceImg: undefined,
+    invoicePdf: undefined,
+    comments: undefined,
+    isCompany: undefined,
+    sortNumber: undefined,
+    status: undefined,
+    deleted: undefined,
+    userId: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    updateTime: undefined,
+    bookingUserInvoiceId: undefined,
+    bookingUserInvoiceName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    bookingUserInvoiceName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写发票名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateBookingUserInvoice : addBookingUserInvoice;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if(props.data.image){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingUserInvoice/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingUserInvoice/index.vue

@@ -0,0 +1,335 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="bookingUserInvoiceId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <BookingUserInvoiceEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import BookingUserInvoiceEdit from './components/bookingUserInvoiceEdit.vue';
+  import { pageBookingUserInvoice, removeBookingUserInvoice, removeBatchBookingUserInvoice } from '@/api/booking/bookingUserInvoice';
+  import type { BookingUserInvoice, BookingUserInvoiceParam } from '@/api/booking/bookingUserInvoice/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<BookingUserInvoice[]>([]);
+  // 当前编辑数据
+  const current = ref<BookingUserInvoice | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageBookingUserInvoice({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'id',
+      dataIndex: 'id',
+      key: 'id',
+      align: 'center',
+      width: 90,
+    },
+    {
+      title: '发票类型(0纸质 1电子)',
+      dataIndex: 'type',
+      key: 'type',
+      align: 'center',
+    },
+    {
+      title: '发票名称',
+      dataIndex: 'name',
+      key: 'name',
+      align: 'center',
+    },
+    {
+      title: '开票类型(0普票 1专票)',
+      dataIndex: 'invoiceType',
+      key: 'invoiceType',
+      align: 'center',
+    },
+    {
+      title: '税号',
+      dataIndex: 'invoiceCode',
+      key: 'invoiceCode',
+      align: 'center',
+    },
+    {
+      title: '公司地址',
+      dataIndex: 'address',
+      key: 'address',
+      align: 'center',
+    },
+    {
+      title: '公司电话',
+      dataIndex: 'tel',
+      key: 'tel',
+      align: 'center',
+    },
+    {
+      title: '开户行',
+      dataIndex: 'bankName',
+      key: 'bankName',
+      align: 'center',
+    },
+    {
+      title: '开户账号',
+      dataIndex: 'bankAccount',
+      key: 'bankAccount',
+      align: 'center',
+    },
+    {
+      title: '手机号码',
+      dataIndex: 'phone',
+      key: 'phone',
+      align: 'center',
+    },
+    {
+      title: '电子邮箱',
+      dataIndex: 'email',
+      key: 'email',
+      align: 'center',
+    },
+    {
+      title: '发票流水号',
+      dataIndex: 'invoiceNo',
+      key: 'invoiceNo',
+      align: 'center',
+    },
+    {
+      title: '发票图片预览',
+      dataIndex: 'invoiceImg',
+      key: 'invoiceImg',
+      align: 'center',
+    },
+    {
+      title: '发票pdf地址',
+      dataIndex: 'invoicePdf',
+      key: 'invoicePdf',
+      align: 'center',
+    },
+    {
+      title: '备注',
+      dataIndex: 'comments',
+      key: 'comments',
+      align: 'center',
+    },
+    {
+      title: '是否启用',
+      dataIndex: 'isCompany',
+      key: 'isCompany',
+      align: 'center',
+    },
+    {
+      title: '排序(数字越小越靠前)',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center',
+    },
+    {
+      title: '状态, 0待使用, 1已使用, 2已失效',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+    },
+    {
+      title: '是否删除, 0否, 1是',
+      dataIndex: 'deleted',
+      key: 'deleted',
+      align: 'center',
+    },
+    {
+      title: '用户ID',
+      dataIndex: 'userId',
+      key: 'userId',
+      align: 'center',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '修改时间',
+      dataIndex: 'updateTime',
+      key: 'updateTime',
+      align: 'center',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: BookingUserInvoiceParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: BookingUserInvoice) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: BookingUserInvoice) => {
+    const hide = message.loading('请求中..', 0);
+    removeBookingUserInvoice(row.bookingUserInvoiceId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchBookingUserInvoice(selection.value.map((d) => d.bookingUserInvoiceId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: BookingUserInvoice) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'BookingUserInvoice'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/bookingVip/components/bookingVipEdit.vue

@@ -0,0 +1,324 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑' : '添加'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="sid场馆id集合，适用的场馆" name="sid">
+        <a-input
+          allow-clear
+          placeholder="请输入sid场馆id集合，适用的场馆"
+          v-model:value="form.sid"
+        />
+      </a-form-item>
+      <a-form-item label="会员卡名称" name="name">
+        <a-input
+          allow-clear
+          placeholder="请输入会员卡名称"
+          v-model:value="form.name"
+        />
+      </a-form-item>
+      <a-form-item label="会员卡价格" name="price">
+        <a-input
+          allow-clear
+          placeholder="请输入会员卡价格"
+          v-model:value="form.price"
+        />
+      </a-form-item>
+      <a-form-item label="会员卡介绍" name="desc">
+        <a-input
+          allow-clear
+          placeholder="请输入会员卡介绍"
+          v-model:value="form.desc"
+        />
+      </a-form-item>
+      <a-form-item label="会员卡说明" name="info">
+        <a-input
+          allow-clear
+          placeholder="请输入会员卡说明"
+          v-model:value="form.info"
+        />
+      </a-form-item>
+      <a-form-item label="折扣率" name="discount">
+        <a-input
+          allow-clear
+          placeholder="请输入折扣率"
+          v-model:value="form.discount"
+        />
+      </a-form-item>
+      <a-form-item label="使用次数" name="count">
+        <a-input
+          allow-clear
+          placeholder="请输入使用次数"
+          v-model:value="form.count"
+        />
+      </a-form-item>
+      <a-form-item label="每使用一次减少的金额" name="eachMoney">
+        <a-input
+          allow-clear
+          placeholder="请输入每使用一次减少的金额"
+          v-model:value="form.eachMoney"
+        />
+      </a-form-item>
+      <a-form-item label="年限" name="term">
+        <a-input
+          allow-clear
+          placeholder="请输入年限"
+          v-model:value="form.term"
+        />
+      </a-form-item>
+      <a-form-item label="月限" name="month">
+        <a-input
+          allow-clear
+          placeholder="请输入月限"
+          v-model:value="form.month"
+        />
+      </a-form-item>
+      <a-form-item label="日限" name="day">
+        <a-input
+          allow-clear
+          placeholder="请输入日限"
+          v-model:value="form.day"
+        />
+      </a-form-item>
+      <a-form-item label="排序" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="会员卡类型：1年卡，2次卡，3月卡，4会员VIP，VIP充值卡" name="type">
+        <a-input
+          allow-clear
+          placeholder="请输入会员卡类型：1年卡，2次卡，3月卡，4会员VIP，VIP充值卡"
+          v-model:value="form.type"
+        />
+      </a-form-item>
+      <a-form-item label="卡类型：1成人卡，2儿童卡" name="cardType">
+        <a-input
+          allow-clear
+          placeholder="请输入卡类型：1成人卡，2儿童卡"
+          v-model:value="form.cardType"
+        />
+      </a-form-item>
+      <a-form-item label="vip卡等级类型：1特殊vip卡，2普通vip卡" name="vipType">
+        <a-input
+          allow-clear
+          placeholder="请输入vip卡等级类型：1特殊vip卡，2普通vip卡"
+          v-model:value="form.vipType"
+        />
+      </a-form-item>
+      <a-form-item label="特殊卡开发凭证图" name="pic">
+        <a-input
+          allow-clear
+          placeholder="请输入特殊卡开发凭证图"
+          v-model:value="form.pic"
+        />
+      </a-form-item>
+      <a-form-item label="VIP充值卡价格组" name="prices">
+        <a-input
+          allow-clear
+          placeholder="请输入VIP充值卡价格组"
+          v-model:value="form.prices"
+        />
+      </a-form-item>
+      <a-form-item label="是否赠送积分：1赠送，2不赠送" name="isIntegral">
+        <a-input
+          allow-clear
+          placeholder="请输入是否赠送积分：1赠送，2不赠送"
+          v-model:value="form.isIntegral"
+        />
+      </a-form-item>
+      <a-form-item label="" name="updateTime">
+        <a-input
+          allow-clear
+          placeholder="请输入"
+          v-model:value="form.updateTime"
+        />
+      </a-form-item>
+      <a-form-item label="是否有效：1是，0否" name="isUse">
+        <a-input
+          allow-clear
+          placeholder="请输入是否有效：1是，0否"
+          v-model:value="form.isUse"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addBookingVip, updateBookingVip } from '@/api/booking/bookingVip';
+  import { BookingVip } from '@/api/booking/bookingVip/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: BookingVip | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<BookingVip>({
+    id: undefined,
+    sid: undefined,
+    name: undefined,
+    price: undefined,
+    desc: undefined,
+    info: undefined,
+    discount: undefined,
+    count: undefined,
+    eachMoney: undefined,
+    term: undefined,
+    month: undefined,
+    day: undefined,
+    sortNumber: undefined,
+    type: undefined,
+    cardType: undefined,
+    vipType: undefined,
+    pic: undefined,
+    prices: undefined,
+    isIntegral: undefined,
+    createTime: undefined,
+    updateTime: undefined,
+    isUse: undefined,
+    tenantId: undefined,
+    bookingVipId: undefined,
+    bookingVipName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    bookingVipName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateBookingVip : addBookingVip;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if(props.data.image){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/bookingVip/components/search.vue

@@ -0,0 +1,77 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+    <a-button class="ele-btn-icon" @click="add">
+      <span>同步会员卡权限</span>
+    </a-button>
+    <a-input-search
+      allow-clear
+      placeholder="会员卡名称"
+      v-model:value="where.keywords"
+      @pressEnter="search"
+      @search="search"
+      style="width: 360px"
+    />
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { ref, watch } from 'vue';
+  import dayjs from 'dayjs';
+  import useSearch from '@/utils/use-search';
+  import { BookingVipParam } from '@/api/booking/bookingVip/model';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 表单数据
+  const { where } = useSearch<BookingVipParam>({
+    id: undefined,
+    keywords: undefined,
+    timeStart: undefined,
+    timeEnd: undefined
+  });
+
+  // 日期范围选择
+  const dateRange = ref<[string, string]>(['', '']);
+
+  /* 搜索 */
+  const search = () => {
+    const [d1, d2] = dateRange.value ?? [];
+    where.timeStart = d1 ? dayjs(d1).valueOf() / 1000 : undefined;
+    where.timeEnd = d2 ? dayjs(d2).valueOf() / 1000 : undefined;
+    emit('search', {
+      ...where
+    });
+  };
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/bookingVip/index.vue

@@ -0,0 +1,327 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="bookingVipId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          :scroll="{ x: 2800 }"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a-button type="primary" @click="openEdit(record)"
+                  >修改</a-button
+                >
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a-button class="ele-text-danger">删除</a-button>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <BookingVipEdit
+        v-model:visible="showEdit"
+        :data="current"
+        @done="reload"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import BookingVipEdit from './components/bookingVipEdit.vue';
+  import {
+    pageBookingVip,
+    removeBookingVip,
+    removeBatchBookingVip
+  } from '@/api/booking/bookingVip';
+  import type {
+    BookingVip,
+    BookingVipParam
+  } from '@/api/booking/bookingVip/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<BookingVip[]>([]);
+  // 当前编辑数据
+  const current = ref<BookingVip | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageBookingVip({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '操作',
+      key: 'action',
+      width: 220,
+      fixed: 'left',
+      align: 'center'
+    },
+    {
+      title: '会员卡名称',
+      dataIndex: 'name',
+      key: 'name',
+      align: 'center'
+    },
+    {
+      title: '可用场地',
+      dataIndex: 'sid',
+      key: 'sid',
+      align: 'center'
+    },
+    {
+      title: '购买价格',
+      dataIndex: 'price',
+      key: 'price',
+      align: 'center'
+    },
+    // {
+    //   title: '会员卡说明',
+    //   dataIndex: 'info',
+    //   key: 'info',
+    //   align: 'center',
+    // },
+    {
+      title: '折扣率',
+      dataIndex: 'discount',
+      key: 'discount',
+      align: 'center'
+    },
+    {
+      title: '可使用次数',
+      dataIndex: 'count',
+      key: 'count',
+      align: 'center'
+    },
+    {
+      title: '每使用一次减少的金额',
+      dataIndex: 'eachMoney',
+      key: 'eachMoney',
+      align: 'center'
+    },
+    {
+      title: '年限',
+      dataIndex: 'term',
+      key: 'term',
+      align: 'center'
+    },
+    {
+      title: '月限',
+      dataIndex: 'month',
+      key: 'month',
+      align: 'center'
+    },
+    {
+      title: '日限',
+      dataIndex: 'day',
+      key: 'day',
+      align: 'center'
+    },
+    {
+      title: '是否有效',
+      dataIndex: 'isUse',
+      key: 'isUse',
+      align: 'center'
+    },
+    {
+      title: '会员卡类型',
+      dataIndex: 'type',
+      key: 'type',
+      align: 'center'
+    },
+    {
+      title: '卡类型',
+      dataIndex: 'cardType',
+      key: 'cardType',
+      align: 'center'
+    },
+    {
+      title: 'vip卡类型',
+      dataIndex: 'vipType',
+      key: 'vipType',
+      align: 'center'
+    },
+    {
+      title: '排序',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center'
+    },
+    // {
+    //   title: '特殊卡开发凭证图',
+    //   dataIndex: 'pic',
+    //   key: 'pic',
+    //   align: 'center',
+    // },
+    // {
+    //   title: 'VIP充值卡价格组',
+    //   dataIndex: 'prices',
+    //   key: 'prices',
+    //   align: 'center',
+    // },
+    {
+      title: '是否赠送积分',
+      dataIndex: 'isIntegral',
+      key: 'isIntegral',
+      align: 'center'
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: BookingVipParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: BookingVip) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: BookingVip) => {
+    const hide = message.loading('请求中..', 0);
+    removeBookingVip(row.bookingVipId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchBookingVip(selection.value.map((d) => d.bookingVipId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: BookingVip) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'BookingVip'
+  };
+</script>
+
+<style lang="less" scoped></style>